Merge pull request #163 from acelaya-forks/feature/update-deps

Feature/update deps

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://acel.me/donate']

.github/ISSUE_TEMPLATE.md

@@ -2,5 +2,5 @@
 Before opening an issue, just take into account that this is a completely free of charge open source project.
 I'm always happy to help and provide support, but some understanding will be required.
 I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
-Try to be polite, and understand it is impossible for a project to cover all use cases.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
 -->

.github/ISSUE_TEMPLATE/Bug.md

@@ -0,0 +1,34 @@
+---
+name: Bug report
+about: Something on shlink is broken or not working as documented?
+labels: bug
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Shlink web client version
+
+* Version: x.y.z
+
+#### Summary
+
+<!-- Provide a summary describing the problem you are experiencing. -->
+
+#### Current behavior
+
+<!-- How is it actually behaving (and it shouldn't)? -->
+
+#### Expected behavior
+
+<!-- How did you expected to behave? -->
+
+#### How to reproduce
+
+<!-- Provide steps to reproduce the bug. -->

.github/ISSUE_TEMPLATE/Feature_Request.md

@@ -0,0 +1,18 @@
+---
+name: Feature request
+about: Do you find shlink is missing some important feature that would make it more useful?
+labels: feature
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Summary
+
+<!-- Describe the new feature you would like to request. -->

.github/ISSUE_TEMPLATE/Question_Support.md

@@ -0,0 +1,22 @@
+---
+name: Question - Support
+about: Do you have a problem setting up or using shlink?
+labels: question
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Shlink web client version
+
+* Version: x.y.z
+
+#### Summary
+
+<!-- Describe the issue you are facing here. -->

.scrutinizer.yml

@@ -1,6 +1,6 @@
 build:
   environment:
-    node: v10.15.3
+    node: v12.11.0
 tools:
   external_code_coverage:
     timeout: 1200

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - "10.15.3"
+  - "12.11.0"
 
 cache:
   directories:
@@ -15,7 +15,7 @@ install:
 
 before_script:
   - echo "Building commit range ${TRAVIS_COMMIT_RANGE}"
-  - export MUTATION_FILES=$(git diff ${TRAVIS_COMMIT_RANGE:-origin/master} --name-only | grep src/ | paste -sd ",")
+  - export MUTATION_FILES=$(git diff ${TRAVIS_COMMIT_RANGE:-origin/master} --name-only | grep -E 'src\/(.*).(js|ts|jsx|tsx)' | paste -sd ",")
 
 script:
   - npm run lint

CHANGELOG.md

@@ -4,6 +4,54 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## 2.2.0 - 2019-10-05
+
+#### Added
+
+* [#144](https://github.com/shlinkio/shlink-web-client/issues/144) Added domain input to create domain page.
+
+#### Changed
+
+* [#140](https://github.com/shlinkio/shlink-web-client/issues/140) Updated project dependencies.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* *Nothing*
+
+
+## 2.1.1 - 2019-09-22
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#142](https://github.com/shlinkio/shlink-web-client/issues/142) Updated to newer versions of base docker images for dev and production.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#151](https://github.com/shlinkio/shlink-web-client/issues/151) Fixed "order by" indicator (caret) still indicate ASC on column header when no order is specified.
+* [#157](https://github.com/shlinkio/shlink-web-client/issues/157) Fixed pagination control on graphs expanding too much when lots of pages need to be rendered.
+* [#155](https://github.com/shlinkio/shlink-web-client/issues/155) Fixed client-side paths resolve to 404 when served from nginx in docker image instead of falling back to `index.html`.
+
+
 ## 2.1.0 - 2019-05-19
 
 #### Added

Dockerfile

@@ -1,8 +1,9 @@
-FROM node:10.15.3-alpine as node
+FROM node:12.11.0-alpine as node
 COPY . /shlink-web-client
 RUN cd /shlink-web-client && npm install && npm run build
 
-FROM nginx:1.15.9-alpine
+FROM nginx:1.17.4-alpine
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
-RUN rm -r /usr/share/nginx/html
+RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
+COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html

config/docker/nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80 default_server;
+    charset utf-8;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # When requesting static paths with extension, try them, and return a 404 if not found
+    location ~ .+\.(css|js|html|png|jpg|jpeg|gif|bmp|ico|csv|otf|eot|svg|svgz|ttf|woff|woff2|ijmap|pdf|tif|map) {
+        try_files $uri $uri/ =404;
+    }
+
+    # When requesting a path without extension, try it, and return the index if not found
+    # This allows HTML5 history paths to be handled by the client application
+    location / {
+        try_files $uri $uri/ /index.html$is_args$args;
+    }
+}

docker-compose.yml

@@ -3,7 +3,7 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:10.15.3-alpine
+    image: node:12.11.0-alpine
     command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
     volumes:
       - ./:/home/shlink/www

package.json

@@ -1,9 +1,11 @@
 {
-  "name": "shlink-web-client-react",
+  "name": "shlink-web-client",
   "description": "A React-based progressive web application for shlink",
-  "version": "1.0.0",
+  "version": "2.3.0",
   "private": false,
   "homepage": "",
+  "repository": "https://github.com/shlinkio/shlink-web-client",
+  "license": "MIT",
   "scripts": {
     "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint src test scripts config",
@@ -20,120 +22,123 @@
     "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.6.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
-    "@fortawesome/free-regular-svg-icons": "^5.6.3",
-    "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.1.3",
+    "@fortawesome/fontawesome-free": "^5.11.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-regular-svg-icons": "^5.11.2",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.5",
     "array-filter": "^1.0.0",
     "array-map": "^0.0.0",
     "array-reduce": "^0.0.0",
-    "axios": "^0.18.0",
+    "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
-    "bottlejs": "^1.7.1",
-    "chart.js": "^2.7.2",
+    "bottlejs": "^1.7.2",
+    "chart.js": "^2.8.0",
     "classnames": "^2.2.6",
+    "compare-versions": "^3.5.1",
     "csvjson": "^5.1.0",
-    "leaflet": "^1.4.0",
-    "moment": "^2.22.2",
-    "promise": "^8.0.1",
-    "prop-types": "^15.6.2",
-    "qs": "^6.5.2",
+    "leaflet": "^1.5.1",
+    "moment": "^2.24.0",
+    "promise": "^8.0.3",
+    "prop-types": "^15.7.2",
+    "qs": "^6.9.0",
     "ramda": "^0.26.1",
-    "react": "^16.8.0",
-    "react-autosuggest": "^9.4.0",
-    "react-chartjs-2": "^2.7.4",
-    "react-color": "^2.14.1",
+    "react": "^16.10.2",
+    "react-autosuggest": "^9.4.3",
+    "react-chartjs-2": "^2.8.0",
+    "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "~1.5.0",
-    "react-dom": "^16.8.0",
-    "react-leaflet": "^2.2.1",
-    "react-moment": "^0.7.6",
-    "react-redux": "^5.0.7",
-    "react-router-dom": "^4.2.2",
-    "react-swipeable": "^4.3.0",
+    "react-dom": "^16.10.2",
+    "react-external-link": "^1.0.0",
+    "react-leaflet": "^2.4.0",
+    "react-moment": "^0.9.5",
+    "react-redux": "^7.1.1",
+    "react-router-dom": "^5.1.2",
+    "react-swipeable": "^5.4.0",
     "react-tagsinput": "^3.19.0",
-    "reactstrap": "^7.1.0",
-    "redux": "^4.0.0",
+    "reactstrap": "^8.0.1",
+    "redux": "^4.0.4",
     "redux-actions": "^2.6.5",
     "redux-thunk": "^2.3.0",
-    "uuid": "^3.3.2"
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@stryker-mutator/core": "^1.2.0",
-    "@stryker-mutator/html-reporter": "^1.2.0",
-    "@stryker-mutator/javascript-mutator": "^1.2.0",
-    "@stryker-mutator/jest-runner": "^1.2.0",
-    "@svgr/webpack": "^2.4.1",
-    "adm-zip": "0.4.11",
-    "autoprefixer": "^7.1.6",
+    "@babel/core": "^7.6.2",
+    "@stryker-mutator/core": "^2.1.0",
+    "@stryker-mutator/html-reporter": "^2.1.0",
+    "@stryker-mutator/javascript-mutator": "^2.1.0",
+    "@stryker-mutator/jest-runner": "^2.1.0",
+    "@svgr/webpack": "^4.3.3",
+    "adm-zip": "^0.4.13",
+    "autoprefixer": "^9.6.3",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-named-asset-import": "^0.3.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-named-asset-import": "^0.3.4",
+    "babel-preset-react-app": "^9.0.2",
     "babel-runtime": "^6.26.0",
-    "bfj": "^6.1.1",
-    "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "chalk": "^2.4.1",
-    "css-loader": "^1.0.0",
-    "dotenv": "^6.0.0",
-    "dotenv-expand": "^4.2.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "bfj": "^7.0.1",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
+    "chalk": "^2.4.2",
+    "css-loader": "^3.2.0",
+    "dotenv": "^8.1.0",
+    "dotenv-expand": "^5.1.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^5.11.1",
     "eslint-config-adidas-babel": "^1.1.0",
     "eslint-config-adidas-env": "^1.1.0",
     "eslint-config-adidas-es6": "^1.2.0",
     "eslint-config-adidas-react": "^1.1.1",
-    "eslint-loader": "^2.1.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.22.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^2.0.0",
+    "eslint-loader": "^3.0.2",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.17.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.16.0",
+    "file-loader": "^4.2.0",
     "fork-ts-checker-webpack-plugin-alt": "^0.4.14",
-    "fs-extra": "^7.0.0",
-    "html-webpack-plugin": "^4.0.0-alpha.2",
+    "fs-extra": "^8.1.0",
+    "html-webpack-plugin": "^4.0.0-beta.8",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
-    "jest-pnp-resolver": "^1.0.1",
-    "jest-resolve": "^23.6.0",
-    "mini-css-extract-plugin": "^0.4.3",
-    "node-sass": "^4.9.0",
+    "jest": "^24.9.0",
+    "jest-each": "^24.9.0",
+    "jest-pnp-resolver": "^1.2.1",
+    "jest-resolve": "^24.9.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.12.0",
     "object-assign": "^4.1.1",
     "ocular.js": "^0.1.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "pnp-webpack-plugin": "^1.1.0",
-    "postcss": "^7.0.7",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "pnp-webpack-plugin": "^1.5.0",
+    "postcss": "^7.0.18",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.3.1",
+    "postcss-preset-env": "^6.7.0",
     "postcss-safe-parser": "^4.0.1",
-    "raf": "^3.4.0",
-    "react-app-polyfill": "^0.2.0",
-    "react-dev-utils": "^7.0.1",
-    "resolve": "^1.8.1",
-    "sass-loader": "^7.1.0",
-    "serve": "^10.0.0",
+    "raf": "^3.4.1",
+    "react-app-polyfill": "^1.0.4",
+    "react-dev-utils": "^9.1.0",
+    "resolve": "^1.12.0",
+    "sass-loader": "^8.0.0",
+    "serve": "^11.2.0",
     "stryker-cli": "^1.0.0",
-    "style-loader": "^0.23.0",
-    "stylelint": "^9.9.0",
+    "style-loader": "^1.0.0",
+    "stylelint": "^9.10.1",
     "stylelint-config-adidas": "^1.2.1",
     "stylelint-config-adidas-bem": "^1.2.0",
-    "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.3.0",
-    "sw-precache-webpack-plugin": "^0.11.4",
-    "terser-webpack-plugin": "^1.1.0",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.19.1",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-manifest-plugin": "^2.0.4",
-    "whatwg-fetch": "^2.0.3",
-    "workbox-webpack-plugin": "^3.6.3"
+    "stylelint-config-recommended-scss": "^4.0.0",
+    "stylelint-scss": "^3.11.1",
+    "sw-precache-webpack-plugin": "^0.11.5",
+    "terser-webpack-plugin": "^2.1.2",
+    "url-loader": "^2.2.0",
+    "webpack": "^4.41.0",
+    "webpack-dev-server": "^3.8.2",
+    "webpack-manifest-plugin": "^2.2.0",
+    "whatwg-fetch": "^3.0.0",
+    "workbox-webpack-plugin": "^4.3.1"
   },
   "babel": {
     "presets": [

scripts/start.js

@@ -81,7 +81,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const urls = prepareUrls(protocol, HOST, port);
 
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    const compiler = createCompiler({ webpack, config, appName, urls, useYarn });
 
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;

src/common/MenuLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import Swipeable from 'react-swipeable';
+import { Swipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';

src/common/SimplePaginator.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import { range, max, min } from 'ramda';
+import './SimplePaginator.scss';
+
+const propTypes = {
+  pagesCount: PropTypes.number.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  setCurrentPage: PropTypes.func.isRequired,
+};
+
+export const ellipsis = '...';
+
+const pagination = (currentPage, pageCount) => {
+  const delta = 2;
+  const pages = range(
+    max(delta, currentPage - delta),
+    min(pageCount - 1, currentPage + delta) + 1
+  );
+
+  if (currentPage - delta > delta) {
+    pages.unshift(ellipsis);
+  }
+  if (currentPage + delta < pageCount - 1) {
+    pages.push(ellipsis);
+  }
+
+  pages.unshift(1);
+  pages.push(pageCount);
+
+  return pages;
+};
+
+const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
+  if (pagesCount < 2) {
+    return null;
+  }
+
+  const onClick = (page) => () => setCurrentPage(page);
+
+  return (
+    <Pagination listClassName="flex-wrap justify-content-center mb-0 simple-paginator">
+      <PaginationItem disabled={currentPage <= 1}>
+        <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
+      </PaginationItem>
+      {pagination(currentPage, pagesCount).map((page, index) => (
+        <PaginationItem
+          key={page !== ellipsis ? page : `${page}_${index}`}
+          active={page === currentPage}
+          disabled={page === ellipsis}
+        >
+          <PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
+      </PaginationItem>
+    </Pagination>
+  );
+};
+
+SimplePaginator.propTypes = propTypes;
+
+export default SimplePaginator;

src/common/SimplePaginator.scss

@@ -0,0 +1,3 @@
+.simple-paginator {
+  user-select: none;
+}

src/servers/ServersDropdown.js

@@ -1,6 +1,5 @@
 import { isEmpty, values } from 'ramda';
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { serverType } from './prop-types';
@@ -11,11 +10,20 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
     selectedServer: serverType,
     selectServer: PropTypes.func,
     listServers: PropTypes.func,
+    history: PropTypes.shape({
+      push: PropTypes.func,
+    }),
   };
 
   renderServers = () => {
     const { servers: { list, loading }, selectedServer, selectServer } = this.props;
     const servers = values(list);
+    const { push } = this.props.history;
+    const loadServer = (id) => {
+      selectServer(id)
+        .then(() => push(`/server/${id}/list-short-urls/1`))
+        .catch(() => {});
+    };
 
     if (loading) {
       return <DropdownItem disabled><i>Trying to load servers...</i></DropdownItem>;
@@ -28,15 +36,7 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
     return (
       <React.Fragment>
         {servers.map(({ name, id }) => (
-          <DropdownItem
-            key={id}
-            tag={Link}
-            to={`/server/${id}/list-short-urls/1`}
-            active={selectedServer && selectedServer.id === id}
-
-            // FIXME This should be implicit
-            onClick={() => selectServer(id)}
-          >
+          <DropdownItem key={id} active={selectedServer && selectedServer.id === id} onClick={() => loadServer(id)}>
             {name}
           </DropdownItem>
         ))}

src/servers/reducers/selectedServer.js

@@ -10,14 +10,19 @@ const initialState = null;
 
 export const resetSelectedServer = createAction(RESET_SELECTED_SERVER);
 
-export const selectServer = ({ findServerById }) => (serverId) => (dispatch) => {
+export const selectServer = ({ findServerById }, buildShlinkApiClient) => (serverId) => async (dispatch) => {
   dispatch(resetShortUrlParams());
 
   const selectedServer = findServerById(serverId);
+  const { health } = await buildShlinkApiClient(selectedServer);
+  const { version } = await health().catch(() => ({ version: '1.0.0' }));
 
   dispatch({
     type: SELECT_SERVER,
-    selectedServer,
+    selectedServer: {
+      ...selectedServer,
+      version,
+    },
   });
 };
 

src/servers/services/provideServices.js

@@ -16,6 +16,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
 
   bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
+  bottle.decorator('ServersDropdown', withRouter);
   bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ], [ 'listServers', 'selectServer' ]));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
@@ -34,7 +35,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.service('ServersExporter', ServersExporter, 'ServersService', 'window', 'csvjson');
 
   // Actions
-  bottle.serviceFactory('selectServer', selectServer, 'ServersService');
+  bottle.serviceFactory('selectServer', selectServer, 'ServersService', 'buildShlinkApiClient');
   bottle.serviceFactory('createServer', createServer, 'ServersService', 'listServers');
   bottle.serviceFactory('createServers', createServers, 'ServersService', 'listServers');
   bottle.serviceFactory('deleteServer', deleteServer, 'ServersService', 'listServers');

src/short-urls/CreateShortUrl.js

@@ -1,11 +1,14 @@
 import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { assoc, dissoc, isNil, pipe, replace, trim } from 'ramda';
+import { assoc, dissoc, isEmpty, isNil, pipe, replace, trim } from 'ramda';
 import React from 'react';
 import { Collapse } from 'reactstrap';
 import * as PropTypes from 'prop-types';
 import DateInput from '../utils/DateInput';
 import Checkbox from '../utils/Checkbox';
+import ForVersion from '../utils/ForVersion';
+import { serverType } from '../servers/prop-types';
+import { compareVersions } from '../utils/utils';
 import { createShortUrlResultType } from './reducers/shortUrlCreation';
 import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 
@@ -17,12 +20,14 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
     createShortUrl: PropTypes.func,
     shortUrlCreationResult: createShortUrlResultType,
     resetCreateShortUrl: PropTypes.func,
+    selectedServer: serverType,
   };
 
   state = {
     longUrl: '',
     tags: [],
     customSlug: undefined,
+    domain: undefined,
     validSince: undefined,
     validUntil: undefined,
     maxVisits: undefined,
@@ -66,6 +71,8 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
         assoc('validUntil', formatDate(this.state.validUntil))
       )(this.state));
     };
+    const currentServerVersion = this.props.selectedServer ? this.props.selectedServer.version : '';
+    const disableDomain = isEmpty(currentServerVersion) || compareVersions(currentServerVersion, '<', '1.19.0-beta.1');
 
     return (
       <div className="shlink-container">
@@ -89,24 +96,39 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
             <div className="row">
               <div className="col-sm-6">
                 {renderOptionalInput('customSlug', 'Custom slug')}
-                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
               </div>
               <div className="col-sm-6">
+                {renderOptionalInput('domain', 'Domain', 'text', {
+                  disabled: disableDomain,
+                  ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
+                })}
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="col-sm-6">
+                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
+              </div>
+              <div className="col-sm-3">
                 {renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
+              </div>
+              <div className="col-sm-3">
                 {renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
               </div>
             </div>
 
-            <div className="mb-3 text-right">
-              <Checkbox
-                className="mr-2"
-                checked={this.state.findIfExists}
-                onChange={(findIfExists) => this.setState({ findIfExists })}
-              >
-                Use existing URL if found
-              </Checkbox>
-              <UseExistingIfFoundInfoIcon />
-            </div>
+            <ForVersion minVersion="1.16.0" currentServerVersion={currentServerVersion}>
+              <div className="mb-4 text-right">
+                <Checkbox
+                  className="mr-2"
+                  checked={this.state.findIfExists}
+                  onChange={(findIfExists) => this.setState({ findIfExists })}
+                >
+                  Use existing URL if found
+                </Checkbox>
+                <UseExistingIfFoundInfoIcon />
+              </div>
+            </ForVersion>
           </Collapse>
 
           <div>
@@ -119,7 +141,10 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
               &nbsp;
               {this.state.moreOptionsVisible ? 'Less' : 'More'} options
             </button>
-            <button className="btn btn-outline-primary float-right" disabled={shortUrlCreationResult.loading}>
+            <button
+              className="btn btn-outline-primary float-right"
+              disabled={shortUrlCreationResult.loading || isEmpty(this.state.longUrl)}
+            >
               {shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
             </button>
           </div>

src/short-urls/ShortUrlsList.js

@@ -11,7 +11,7 @@ import { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './ShortUrlsList.scss';
 
-const SORTABLE_FIELDS = {
+export const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
   longUrl: 'Long URL',
@@ -50,6 +50,10 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
       return null;
     }
 
+    if (!this.state.orderDir) {
+      return null;
+    }
+
     return (
       <FontAwesomeIcon
         icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}

src/short-urls/UseExistingIfFoundInfoIcon.js

@@ -20,11 +20,11 @@ const renderInfoModal = (isOpen, toggle) => (
       <ul>
         <li>
           When only the long URL is provided: The most recent match will be returned, or a new short URL will be created
-          if none is found
+          if none is found.
         </li>
         <li>
-          When long URL and custom slug are provided: Same as in previous case, but it will try to match the short URL
-          using both the long URL and the slug.
+          When long URL and custom slug and/or domain are provided: Same as in previous case, but it will try to match
+          the short URL using both the long URL and the slug, the long URL and the domain, or the three of them.
           <br />
           If the slug is being used by another long URL, an error will be returned.
         </li>
@@ -33,9 +33,6 @@ const renderInfoModal = (isOpen, toggle) => (
           all provided data. If any of them does not match, a new short URL will be created
         </li>
       </ul>
-      <blockquote className="use-existing-if-found-info-icon__modal-quote">
-        <b>Important:</b> This feature will be ignored while using a Shlink version older than v1.16.0.
-      </blockquote>
     </ModalBody>
   </Modal>
 );

src/short-urls/services/provideServices.js

@@ -39,7 +39,7 @@ const provideServices = (bottle, connect) => {
   bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult');
   bottle.decorator(
     'CreateShortUrl',
-    connect([ 'shortUrlCreationResult' ], [ 'createShortUrl', 'resetCreateShortUrl' ])
+    connect([ 'shortUrlCreationResult', 'selectedServer' ], [ 'createShortUrl', 'resetCreateShortUrl' ])
   );
 
   bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);

src/utils/ExternalLink.js

@@ -1,19 +1,3 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { ExternalLink } from 'react-external-link';
 
-const propTypes = {
-  href: PropTypes.string.isRequired,
-  children: PropTypes.node,
-};
-
-export default function ExternalLink(props) {
-  const { href, children, ...rest } = props;
-
-  return (
-    <a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
-      {children || href}
-    </a>
-  );
-}
-
-ExternalLink.propTypes = propTypes;
+export default ExternalLink;

src/utils/ForVersion.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'ramda';
+import { compareVersions } from './utils';
+
+const propTypes = {
+  minVersion: PropTypes.string.isRequired,
+  currentServerVersion: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+const ForVersion = ({ minVersion, currentServerVersion, children }) =>
+  isEmpty(currentServerVersion) || compareVersions(currentServerVersion, '<', minVersion)
+    ? null
+    : <React.Fragment>{children}</React.Fragment>;
+
+ForVersion.propTypes = propTypes;
+
+export default ForVersion;

src/utils/services/ShlinkApiClient.js

@@ -2,12 +2,13 @@ import qs from 'qs';
 import { isEmpty, isNil, reject } from 'ramda';
 
 const API_VERSION = '1';
-const buildRestUrl = (url) => url ? `${url}/rest/v${API_VERSION}` : '';
+
+export const buildShlinkBaseUrl = (url) => url ? `${url}/rest/v${API_VERSION}` : '';
 
 export default class ShlinkApiClient {
   constructor(axios, baseUrl, apiKey) {
     this.axios = axios;
-    this._baseUrl = buildRestUrl(baseUrl);
+    this._baseUrl = buildShlinkBaseUrl(baseUrl);
     this._apiKey = apiKey || '';
   }
 
@@ -50,6 +51,8 @@ export default class ShlinkApiClient {
     this._performRequest('/tags', 'PUT', {}, { oldName, newName })
       .then(() => ({ oldName, newName }));
 
+  health = () => this._performRequest('/health', 'GET').then((resp) => resp.data);
+
   _performRequest = async (url, method = 'GET', query = {}, body = {}) =>
     await this.axios({
       method,

src/utils/services/ShlinkApiClientBuilder.js

@@ -13,8 +13,10 @@ const getSelectedServerFromState = async (getState) => {
   return selectedServer;
 };
 
-const buildShlinkApiClient = (axios) => async (getState) => {
-  const { url, apiKey } = await getSelectedServerFromState(getState);
+const buildShlinkApiClient = (axios) => async (getStateOrSelectedServer) => {
+  const { url, apiKey } = typeof getStateOrSelectedServer === 'function'
+    ? await getSelectedServerFromState(getStateOrSelectedServer)
+    : getStateOrSelectedServer;
   const clientKey = `${url}_${apiKey}`;
 
   if (!apiClients[clientKey]) {

src/utils/utils.js

@@ -4,6 +4,7 @@ import marker from 'leaflet/dist/images/marker-icon.png';
 import markerShadow from 'leaflet/dist/images/marker-shadow.png';
 import { range } from 'ramda';
 import { useState } from 'react';
+import { compare } from 'compare-versions';
 
 const TEN_ROUNDING_NUMBER = 10;
 const DEFAULT_TIMEOUT_DELAY = 2000;
@@ -53,3 +54,9 @@ export const useToggle = (initialValue = false) => {
 };
 
 export const wait = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+
+export const compareVersions = (firstVersion, operator, secondVersion) => compare(
+  firstVersion,
+  secondVersion,
+  operator
+);

src/visits/SortableBarGraph.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
-import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import SortingDropdown from '../utils/SortingDropdown';
 import PaginationDropdown from '../utils/PaginationDropdown';
 import { rangeOf, roundTen } from '../utils/utils';
+import SimplePaginator from '../common/SimplePaginator';
 import GraphCard from './GraphCard';
 
 const { max } = Math;
@@ -66,22 +66,9 @@ export default class SortableBarGraph extends React.Component {
 
   renderPagination(pagesCount) {
     const { currentPage } = this.state;
+    const setCurrentPage = (currentPage) => this.setState({ currentPage });
 
-    return (
-      <Pagination listClassName="flex-wrap mb-0">
-        <PaginationItem disabled={currentPage === 1}>
-          <PaginationLink previous tag="span" onClick={() => this.setState({ currentPage: currentPage - 1 })} />
-        </PaginationItem>
-        {rangeOf(pagesCount, (page) => (
-          <PaginationItem key={page} active={page === currentPage}>
-            <PaginationLink tag="span" onClick={() => this.setState({ currentPage: page })}>{page}</PaginationLink>
-          </PaginationItem>
-        ))}
-        <PaginationItem disabled={currentPage >= pagesCount}>
-          <PaginationLink next tag="span" onClick={() => this.setState({ currentPage: currentPage + 1 })} />
-        </PaginationItem>
-      </Pagination>
-    );
+    return <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
   }
 
   render() {

test/common/SimplePaginator.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { identity } from 'ramda';
+import each from 'jest-each';
+import { PaginationItem } from 'reactstrap';
+import SimplePaginator, { ellipsis } from '../../src/common/SimplePaginator';
+
+describe('<SimplePaginator />', () => {
+  let wrapper;
+  const createWrapper = (pagesCount, currentPage = 1) => {
+    wrapper = shallow(<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={identity} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  each([ -3, -2, 0, 1 ]).it('renders empty when the amount of pages is smaller than 2', (pagesCount) => {
+    expect(createWrapper(pagesCount).text()).toEqual('');
+  });
+
+  describe('ellipsis are rendered where expected', () => {
+    const getItemsForPages = (pagesCount, currentPage) => {
+      const paginator = createWrapper(pagesCount, currentPage);
+      const items = paginator.find(PaginationItem);
+      const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ellipsis));
+
+      return { items, itemsWithEllipsis };
+    };
+
+    it('renders first ellipsis', () => {
+      const { items, itemsWithEllipsis } = getItemsForPages(9, 7);
+
+      expect(items.at(2).html()).toContain(ellipsis);
+      expect(itemsWithEllipsis).toHaveLength(1);
+    });
+
+    it('renders last ellipsis', () => {
+      const { items, itemsWithEllipsis } = getItemsForPages(9, 2);
+
+      expect(items.at(items.length - 3).html()).toContain(ellipsis);
+      expect(itemsWithEllipsis).toHaveLength(1);
+    });
+
+    it('renders both ellipsis', () => {
+      const { items, itemsWithEllipsis } = getItemsForPages(20, 9);
+
+      expect(items.at(2).html()).toContain(ellipsis);
+      expect(items.at(items.length - 3).html()).toContain(ellipsis);
+      expect(itemsWithEllipsis).toHaveLength(2);
+    });
+  });
+});

test/servers/ServersDropdown.test.js

@@ -15,15 +15,18 @@ describe('<ServersDropdown />', () => {
     },
     loading: false,
   };
+  const history = {
+    push: jest.fn(),
+  };
 
   beforeEach(() => {
     ServersDropdown = serversDropdownCreator({});
-    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} />);
+    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} history={history} />);
   });
   afterEach(() => wrapped.unmount());
 
-  it('contains the list of servers', () =>
-    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers.list).length));
+  it('contains the list of servers, the divider and the export button', () =>
+    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers.list).length + 2));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -36,7 +39,9 @@ describe('<ServersDropdown />', () => {
   });
 
   it('shows a message when no servers exist yet', () => {
-    wrapped = shallow(<ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} />);
+    wrapped = shallow(
+      <ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} history={history} />
+    );
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);
@@ -45,7 +50,9 @@ describe('<ServersDropdown />', () => {
   });
 
   it('shows a message when loading', () => {
-    wrapped = shallow(<ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} />);
+    wrapped = shallow(
+      <ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} history={history} />
+    );
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);

test/servers/reducers/selectedServer.test.js

@@ -29,28 +29,43 @@ describe('selectedServerReducer', () => {
     const selectedServer = {
       id: serverId,
     };
+    const version = '1.19.0';
     const ServersServiceMock = {
       findServerById: jest.fn(() => selectedServer),
     };
+    const apiClientMock = {
+      health: jest.fn().mockResolvedValue({ version }),
+    };
+    const buildApiClient = jest.fn().mockResolvedValue(apiClientMock);
+
+    beforeEach(() => {
+      apiClientMock.health.mockClear();
+      buildApiClient.mockClear();
+    });
 
     afterEach(() => {
       ServersServiceMock.findServerById.mockClear();
     });
 
-    it('dispatches proper actions', () => {
+    it('dispatches proper actions', async () => {
       const dispatch = jest.fn();
+      const expectedSelectedServer = {
+        ...selectedServer,
+        version,
+      };
 
-      selectServer(ServersServiceMock)(serverId)(dispatch);
+      await selectServer(ServersServiceMock, buildApiClient)(serverId)(dispatch);
 
       expect(dispatch).toHaveBeenCalledTimes(2);
       expect(dispatch).toHaveBeenNthCalledWith(1, { type: RESET_SHORT_URL_PARAMS });
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, selectedServer });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, selectedServer: expectedSelectedServer });
     });
 
-    it('invokes dependencies', () => {
-      selectServer(ServersServiceMock)(serverId)(() => {});
+    it('invokes dependencies', async () => {
+      await selectServer(ServersServiceMock, buildApiClient)(serverId)(() => {});
 
       expect(ServersServiceMock.findServerById).toHaveBeenCalledTimes(1);
+      expect(buildApiClient).toHaveBeenCalledTimes(1);
     });
   });
 });

test/short-urls/CreateShortUrl.test.js

@@ -32,6 +32,7 @@ describe('<CreateShortUrl />', () => {
     const urlInput = wrapper.find('.form-control-lg');
     const tagsInput = wrapper.find(TagsSelector);
     const customSlugInput = wrapper.find('#customSlug');
+    const domain = wrapper.find('#domain');
     const maxVisitsInput = wrapper.find('#maxVisits');
     const dateInputs = wrapper.find(DateInput);
     const validSinceInput = dateInputs.at(0);
@@ -40,6 +41,7 @@ describe('<CreateShortUrl />', () => {
     urlInput.simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } });
     tagsInput.simulate('change', [ 'tag_foo', 'tag_bar' ]);
     customSlugInput.simulate('change', { target: { value: 'my-slug' } });
+    domain.simulate('change', { target: { value: 'example.com' } });
     maxVisitsInput.simulate('change', { target: { value: '20' } });
     validSinceInput.simulate('change', validSince);
     validUntilInput.simulate('change', validUntil);
@@ -53,6 +55,7 @@ describe('<CreateShortUrl />', () => {
         longUrl: 'https://long-domain.com/foo/bar',
         tags: [ 'tag_foo', 'tag_bar' ],
         customSlug: 'my-slug',
+        domain: 'example.com',
         validSince: validSince.format(),
         validUntil: validUntil.format(),
         maxVisits: '20',

test/short-urls/ShortUrlsList.test.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
+import shortUrlsListCreator, { SORTABLE_FIELDS } from '../../src/short-urls/ShortUrlsList';
+
+describe('<ShortUrlsList />', () => {
+  let wrapper;
+  const ShortUrlsRow = () => '';
+  const listShortUrlsMock = jest.fn();
+  const resetShortUrlParamsMock = jest.fn();
+
+  const ShortUrlsList = shortUrlsListCreator(ShortUrlsRow);
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <ShortUrlsList
+        listShortUrls={listShortUrlsMock}
+        resetShortUrlParams={resetShortUrlParamsMock}
+        shortUrlsListParams={{
+          page: '1',
+          tags: [ 'test tag' ],
+          searchTerm: 'example.com',
+        }}
+        match={{ params: {} }}
+        location={{}}
+        loading={false}
+        error={false}
+        shortUrlsList={
+          [
+            {
+              shortCode: 'testShortCode',
+              shortUrl: 'https://www.example.com/testShortUrl',
+              longUrl: 'https://www.example.com/testLongUrl',
+              tags: [ 'test tag' ],
+            },
+          ]
+        }
+      />
+    );
+  });
+
+  afterEach(() => {
+    listShortUrlsMock.mockReset();
+    resetShortUrlParamsMock.mockReset();
+    wrapper && wrapper.unmount();
+  });
+
+  it('wraps a ShortUrlsList with 1 ShortUrlsRow', () => {
+    expect(wrapper.find(ShortUrlsRow)).toHaveLength(1);
+  });
+
+  it('should render inner table by default', () => {
+    expect(wrapper.find('table')).toHaveLength(1);
+  });
+
+  it('should render table header by default', () => {
+    expect(wrapper.find('table').shallow().find('thead')).toHaveLength(1);
+  });
+
+  it('should render 6 table header cells by default', () => {
+    expect(wrapper.find('table').shallow()
+      .find('thead').shallow()
+      .find('tr').shallow()
+      .find('th')).toHaveLength(6);
+  });
+
+  it('should render 6 table header cells without order by icon by default', () => {
+    const thElements = wrapper.find('table').shallow()
+      .find('thead').shallow()
+      .find('tr').shallow()
+      .find('th').map((e) => e.shallow());
+
+    for (const thElement of thElements) {
+      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
+    }
+  });
+
+  it('should render 6 table header cells with conditional order by icon', () => {
+    const orderDirOptionToIconMap = {
+      ASC: caretUpIcon,
+      DESC: caretDownIcon,
+    };
+
+    for (const sortableField of Object.getOwnPropertyNames(SORTABLE_FIELDS)) {
+      wrapper.setState({ orderField: sortableField, orderDir: undefined });
+      const [ sortableThElement ] = wrapper.find('table').shallow()
+        .find('thead').shallow()
+        .find('tr').shallow()
+        .find('th')
+        .filterWhere(
+          (e) =>
+            e.text().includes(SORTABLE_FIELDS[sortableField])
+        );
+
+      const sortableThElementWrapper = shallow(sortableThElement);
+
+      expect(sortableThElementWrapper.find(FontAwesomeIcon)).toHaveLength(0);
+
+      for (const orderDir of Object.getOwnPropertyNames(orderDirOptionToIconMap)) {
+        wrapper.setState({ orderField: sortableField, orderDir });
+        const [ sortableThElement ] = wrapper.find('table').shallow()
+          .find('thead').shallow()
+          .find('tr').shallow()
+          .find('th')
+          .filterWhere(
+            (e) =>
+              e.text().includes(SORTABLE_FIELDS[sortableField])
+          );
+
+        const sortableThElementWrapper = shallow(sortableThElement);
+
+        expect(sortableThElementWrapper.find(FontAwesomeIcon)).toHaveLength(1);
+        expect(
+          sortableThElementWrapper.find(FontAwesomeIcon).prop('icon')
+        ).toEqual(orderDirOptionToIconMap[orderDir]);
+      }
+    }
+  });
+});

test/short-urls/reducers/shortUrlTags.test.js

@@ -46,15 +46,17 @@ describe('shortUrlTagsReducer', () => {
     });
   });
 
-  describe('resetShortUrlsTags', () =>
-    it('creates expected action', () => expect(resetShortUrlsTags()).toEqual({ type: RESET_EDIT_SHORT_URL_TAGS })));
+  describe('resetShortUrlsTags', () => {
+    it('creates expected action', () => expect(resetShortUrlsTags()).toEqual({ type: RESET_EDIT_SHORT_URL_TAGS }));
+  });
 
-  describe('shortUrlTagsEdited', () =>
+  describe('shortUrlTagsEdited', () => {
     it('creates expected action', () => expect(shortUrlTagsEdited(shortCode, tags)).toEqual({
       tags,
       shortCode,
       type: SHORT_URL_TAGS_EDITED,
-    })));
+    }));
+  });
 
   describe('editShortUrlTags', () => {
     const updateShortUrlTags = jest.fn();

test/tags/reducers/tagsList.test.js

@@ -70,8 +70,9 @@ describe('tagsListReducer', () => {
     });
   });
 
-  describe('filterTags', () =>
-    it('creates expected action', () => expect(filterTags('foo')).toEqual({ type: FILTER_TAGS, searchTerm: 'foo' })));
+  describe('filterTags', () => {
+    it('creates expected action', () => expect(filterTags('foo')).toEqual({ type: FILTER_TAGS, searchTerm: 'foo' }));
+  });
 
   describe('listTags', () => {
     const dispatch = jest.fn();

test/utils/ForVersion.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ForVersion from '../../src/utils/ForVersion';
+
+describe('<ForVersion />', () => {
+  let wrapped;
+
+  const renderComponent = (minVersion, currentServerVersion) => {
+    wrapped = mount(
+      <ForVersion minVersion={minVersion} currentServerVersion={currentServerVersion}>
+        <span>Hello</span>
+      </ForVersion>
+    );
+
+    return wrapped;
+  };
+
+  afterEach(() => wrapped && wrapped.unmount());
+
+  it('does not render children when current version is empty', () => {
+    const wrapped = renderComponent('1', '');
+
+    expect(wrapped.html()).toBeNull();
+  });
+
+  it('does not render children when current version is lower than min version', () => {
+    const wrapped = renderComponent('2.0.0', '1.8.3');
+
+    expect(wrapped.html()).toBeNull();
+  });
+
+  it('renders children when current version is equal min version', () => {
+    const wrapped = renderComponent('2.0.0', '2.0.0');
+
+    expect(wrapped.html()).toContain('<span>Hello</span>');
+  });
+
+  it('renders children when current version is higher than min version', () => {
+    const wrapped = renderComponent('2.0.0', '2.1.0');
+
+    expect(wrapped.html()).toContain('<span>Hello</span>');
+  });
+});

test/utils/services/ShlinkApiClient.test.js

@@ -165,4 +165,20 @@ describe('ShlinkApiClient', () => {
       }));
     });
   });
+
+  describe('health', () => {
+    it('returns health data', async () => {
+      const expectedData = {
+        status: 'pass',
+        version: '1.19.0',
+      };
+      const axiosSpy = jest.fn(createAxiosMock({ data: expectedData }));
+      const { health } = new ShlinkApiClient(axiosSpy);
+
+      const result = await health();
+
+      expect(axiosSpy).toHaveBeenCalled();
+      expect(result).toEqual(expectedData);
+    });
+  });
 });

test/utils/services/ShlinkApiClientBuilder.test.js

@@ -1,4 +1,5 @@
 import buildShlinkApiClient from '../../../src/utils/services/ShlinkApiClientBuilder';
+import { buildShlinkBaseUrl } from '../../../src/utils/services/ShlinkApiClient';
 
 describe('ShlinkApiClientBuilder', () => {
   const createBuilder = () => {
@@ -33,4 +34,13 @@ describe('ShlinkApiClientBuilder', () => {
     expect(firstApiClient).toBe(thirdApiClient);
     expect(secondApiClient).toBe(thirdApiClient);
   });
+
+  it('does not fetch from state when provided param is already selected server', async () => {
+    const url = 'url';
+    const apiKey = 'apiKey';
+    const apiClient = await buildShlinkApiClient({})({ url, apiKey });
+
+    expect(apiClient._baseUrl).toEqual(buildShlinkBaseUrl(url));
+    expect(apiClient._apiKey).toEqual(apiKey);
+  });
 });

test/visits/SortableBarGraph.test.js

@@ -49,12 +49,10 @@ describe('<SortableBarGraph />', () => {
       assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
         dropdown.prop('onChange')(sortName, sortDir);
         setImmediate(() => {
-          const graphCard = wrapper.find(GraphCard);
-          const statsKeys = keys(graphCard.prop('stats'));
-          const statsValues = values(graphCard.prop('stats'));
+          const stats = wrapper.find(GraphCard).prop('stats');
 
-          expect(statsKeys).toEqual(expectedKeys);
-          expect(statsValues).toEqual(expectedValues);
+          expect(keys(stats)).toEqual(expectedKeys);
+          expect(values(stats)).toEqual(expectedValues);
           done();
         });
       };
@@ -80,10 +78,9 @@ describe('<SortableBarGraph />', () => {
       assert = (itemsPerPage, expectedStats, done) => {
         dropdown.prop('setValue')(itemsPerPage);
         setImmediate(() => {
-          const graphCard = wrapper.find(GraphCard);
-          const statsKeys = keys(graphCard.prop('stats'));
+          const stats = wrapper.find(GraphCard).prop('stats');
 
-          expect(statsKeys).toEqual(expectedStats);
+          expect(keys(stats)).toEqual(expectedStats);
           done();
         });
       };