From 7f4263966e858abeefd3ff8fd8a7f966de07238c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 17 Oct 2021 19:13:06 +0200
Subject: [PATCH] Created new section to manage servers

---
 src/app/App.tsx                               |  2 +
 src/app/services/provideServices.ts           |  1 +
 src/index.scss                                | 10 +++
 src/servers/CreateServer.scss                 |  6 --
 src/servers/CreateServer.tsx                  | 30 +++----
 src/servers/DeleteServerModal.tsx             |  8 +-
 src/servers/ManageServers.tsx                 | 80 +++++++++++++++++++
 src/servers/ManageServersRow.tsx              | 68 ++++++++++++++++
 src/servers/ServersDropdown.tsx               | 21 +++--
 src/servers/data/index.ts                     |  1 +
 src/servers/helpers/ImportServersBtn.scss     |  5 ++
 src/servers/helpers/ImportServersBtn.tsx      | 22 ++---
 src/servers/helpers/ServerForm.tsx            |  2 +-
 src/servers/services/provideServices.ts       | 19 ++++-
 src/utils/FormGroupContainer.tsx              |  5 +-
 test/app/App.test.tsx                         | 12 ++-
 test/servers/CreateServer.test.tsx            |  4 +-
 test/servers/ServersDropdown.test.tsx         | 10 +--
 .../servers/helpers/ImportServersBtn.test.tsx |  4 +-
 19 files changed, 249 insertions(+), 61 deletions(-)
 create mode 100644 src/servers/ManageServers.tsx
 create mode 100644 src/servers/ManageServersRow.tsx
 create mode 100644 src/servers/helpers/ImportServersBtn.scss

diff --git a/src/app/App.tsx b/src/app/App.tsx
index d8b91056..0f43ab29 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -23,6 +23,7 @@ const App = (
   CreateServer: FC,
   EditServer: FC,
   Settings: FC,
+  ManageServers: FC,
   ShlinkVersionsContainer: FC,
 ) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => {
   useEffect(() => {
@@ -43,6 +44,7 @@ const App = (
           <Switch>
             <Route exact path="/" component={Home} />
             <Route exact path="/settings" component={Settings} />
+            <Route exact path="/manage-servers" component={ManageServers} />
             <Route exact path="/server/create" component={CreateServer} />
             <Route exact path="/server/:serverId/edit" component={EditServer} />
             <Route path="/server/:serverId" component={MenuLayout} />
diff --git a/src/app/services/provideServices.ts b/src/app/services/provideServices.ts
index 4dff9f31..50bb8f12 100644
--- a/src/app/services/provideServices.ts
+++ b/src/app/services/provideServices.ts
@@ -14,6 +14,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     'CreateServer',
     'EditServer',
     'Settings',
+    'ManageServers',
     'ShlinkVersionsContainer',
   );
   bottle.decorator('App', connect([ 'servers', 'settings', 'appUpdated' ], [ 'fetchServers', 'resetAppUpdate' ]));
diff --git a/src/index.scss b/src/index.scss
index 419f1638..f1cee307 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -115,6 +115,16 @@ hr {
   color: var(--text-color) !important;
 }
 
+.dropdown-item--danger.dropdown-item--danger {
+  color: $dangerColor;
+
+  &:hover,
+  &:active,
+  &.active {
+    color: $dangerColor !important;
+  }
+}
+
 .badge-main {
   color: #ffffff;
   background-color: var(--brand-color);
diff --git a/src/servers/CreateServer.scss b/src/servers/CreateServer.scss
index cfba848d..4861c9af 100644
--- a/src/servers/CreateServer.scss
+++ b/src/servers/CreateServer.scss
@@ -8,9 +8,3 @@
     text-align: right;
   }
 }
-
-.create-server__csv-select {
-  position: absolute;
-  left: -9999px;
-  top: -9999px;
-}
diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx
index 0f87fa0d..2ee329cd 100644
--- a/src/servers/CreateServer.tsx
+++ b/src/servers/CreateServer.tsx
@@ -1,30 +1,35 @@
 import { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
+import { Button } from 'reactstrap';
 import { Result } from '../utils/Result';
 import NoMenuLayout from '../common/NoMenuLayout';
 import { StateFlagTimeout } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { ImportServersBtnProps } from './helpers/ImportServersBtn';
-import { ServerData, ServerWithId } from './data';
+import { ServerData, ServersMap, ServerWithId } from './data';
 import './CreateServer.scss';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
 interface CreateServerProps extends RouterProps {
   createServer: (server: ServerWithId) => void;
+  servers: ServersMap;
 }
 
 const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
-  <Result type={type}>
-    {type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
-    {type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
-  </Result>
+  <div className="mt-3">
+    <Result type={type}>
+      {type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
+      {type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
+    </Result>
+  </div>
 );
 
 const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
-  { createServer, history: { push } }: CreateServerProps,
+  { servers, createServer, history: { push } }: CreateServerProps,
 ) => {
+  const hasServers = !!Object.keys(servers).length;
   const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
   const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
   const handleSubmit = (serverData: ServerData) => {
@@ -37,16 +42,13 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
   return (
     <NoMenuLayout>
       <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
-        <ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
-        <button className="btn btn-outline-primary">Create server</button>
+        {!hasServers &&
+          <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
+        <Button outline color="primary" className="ml-2">Create server</Button>
       </ServerForm>
 
-      {(serversImported || errorImporting) && (
-        <div className="mt-3">
-          {serversImported && <ImportResult type="success" />}
-          {errorImporting && <ImportResult type="error" />}
-        </div>
-      )}
+      {serversImported && <ImportResult type="success" />}
+      {errorImporting && <ImportResult type="error" />}
     </NoMenuLayout>
   );
 };
diff --git a/src/servers/DeleteServerModal.tsx b/src/servers/DeleteServerModal.tsx
index 4d74869e..491d2f95 100644
--- a/src/servers/DeleteServerModal.tsx
+++ b/src/servers/DeleteServerModal.tsx
@@ -1,3 +1,4 @@
+import { FC } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { RouterProps } from 'react-router';
 import { ServerWithId } from './data';
@@ -6,17 +7,20 @@ export interface DeleteServerModalProps {
   server: ServerWithId;
   toggle: () => void;
   isOpen: boolean;
+  redirectHome?: boolean;
 }
 
 interface DeleteServerModalConnectProps extends DeleteServerModalProps, RouterProps {
   deleteServer: (server: ServerWithId) => void;
 }
 
-const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: DeleteServerModalConnectProps) => {
+const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
+  { server, toggle, isOpen, deleteServer, history, redirectHome = true },
+) => {
   const closeModal = () => {
     deleteServer(server);
     toggle();
-    history.push('/');
+    redirectHome && history.push('/');
   };
 
   return (
diff --git a/src/servers/ManageServers.tsx b/src/servers/ManageServers.tsx
new file mode 100644
index 00000000..78d1259b
--- /dev/null
+++ b/src/servers/ManageServers.tsx
@@ -0,0 +1,80 @@
+import { FC, useEffect, useState } from 'react';
+import { Button } from 'reactstrap';
+import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+import NoMenuLayout from '../common/NoMenuLayout';
+import { SimpleCard } from '../utils/SimpleCard';
+import SearchField from '../utils/SearchField';
+import { Result } from '../utils/Result';
+import { StateFlagTimeout } from '../utils/helpers/hooks';
+import { ImportServersBtnProps } from './helpers/ImportServersBtn';
+import { ServersMap } from './data';
+import { ManageServersRowProps } from './ManageServersRow';
+import ServersExporter from './services/ServersExporter';
+
+interface ManageServersProps {
+  servers: ServersMap;
+}
+
+const SHOW_IMPORT_MSG_TIME = 4000;
+
+export const ManageServers = (
+  serversExporter: ServersExporter,
+  ImportServersBtn: FC<ImportServersBtnProps>,
+  useStateFlagTimeout: StateFlagTimeout,
+  ManageServersRow: FC<ManageServersRowProps>,
+): FC<ManageServersProps> => ({ servers }) => {
+  const allServers = Object.values(servers);
+  const [ serversList, setServersList ] = useState(allServers);
+  const filterServers = (searchTerm: string) => setServersList(
+    allServers.filter(({ name, url }) => `${name} ${url}`.match(searchTerm)),
+  );
+  const hasAutoConnect = serversList.some(({ autoConnect }) => !!autoConnect);
+  const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
+
+  useEffect(() => {
+    setServersList(Object.values(servers));
+  }, [ servers ]);
+
+  return (
+    <NoMenuLayout>
+      <SearchField className="mb-3" onChange={filterServers} />
+
+      <div className="mb-3 d-flex flex-row">
+        <ImportServersBtn onImportError={setErrorImporting} />
+        <Button outline className="ml-2" onClick={async () => serversExporter.exportServers()}>
+          <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
+        </Button>
+        <Button outline color="primary" className="ml-auto" tag={Link} to="/server/create">
+          <FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server
+        </Button>
+      </div>
+
+      <SimpleCard title="Shlink servers">
+        <table className="table table-hover mb-0">
+          <thead className="responsive-table__header">
+            <tr>
+              {hasAutoConnect && <th />}
+              <th>Name</th>
+              <th>Base URL</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {!serversList.length && <tr className="text-center"><td colSpan={4}>No servers found.</td></tr>}
+            {serversList.map((server) =>
+              <ManageServersRow key={server.id} server={server} hasAutoConnect={hasAutoConnect} />)
+            }
+          </tbody>
+        </table>
+      </SimpleCard>
+
+      {errorImporting && (
+        <div className="mt-3">
+          <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>
+        </div>
+      )}
+    </NoMenuLayout>
+  );
+};
diff --git a/src/servers/ManageServersRow.tsx b/src/servers/ManageServersRow.tsx
new file mode 100644
index 00000000..306ef719
--- /dev/null
+++ b/src/servers/ManageServersRow.tsx
@@ -0,0 +1,68 @@
+import { FC } from 'react';
+import { DropdownItem, UncontrolledTooltip } from 'reactstrap';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCheck as checkIcon,
+  faEdit as editIcon,
+  faMinusCircle as deleteIcon,
+  faPlug as connectIcon,
+  faToggleOn as toggleOnIcon,
+  faToggleOff as toggleOffIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { DropdownBtnMenu } from '../utils/DropdownBtnMenu';
+import { useToggle } from '../utils/helpers/hooks';
+import { ServerWithId } from './data';
+import { DeleteServerModalProps } from './DeleteServerModal';
+
+export interface ManageServersRowProps {
+  server: ServerWithId;
+  hasAutoConnect: boolean;
+}
+
+export const ManageServersRow = (
+  DeleteServerModal: FC<DeleteServerModalProps>,
+): FC<ManageServersRowProps> => ({ server, hasAutoConnect }) => {
+  const [ isMenuOpen, toggleMenu ] = useToggle();
+  const [ isModalOpen,, showModal, hideModal ] = useToggle();
+  const serverUrl = `/server/${server.id}`;
+  const { autoConnect: isAutoConnect } = server;
+  const autoConnectIcon = isAutoConnect ? toggleOnIcon : toggleOffIcon;
+
+  return (
+    <tr className="responsive-table__row">
+      {hasAutoConnect && (
+        <td className="responsive-table__cell text-lg-right" data-th="Auto-connect">
+          {isAutoConnect && (
+            <>
+              <FontAwesomeIcon icon={checkIcon} className="text-primary" id="autoConnectIcon" />
+              <UncontrolledTooltip target="autoConnectIcon">Auto-connect to this server</UncontrolledTooltip>
+            </>
+          )}
+        </td>
+      )}
+      <th className="responsive-table__cell" data-th="Name">
+        <Link to={serverUrl}>{server.name}</Link>
+      </th>
+      <td className="responsive-table__cell" data-th="Base URL">{server.url}</td>
+      <td className="responsive-table__cell text-right">
+        <DropdownBtnMenu isOpen={isMenuOpen} toggle={toggleMenu}>
+          <DropdownItem tag={Link} to={serverUrl}>
+            <FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
+          </DropdownItem>
+          <DropdownItem tag={Link} to={`${serverUrl}/edit`}>
+            <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
+          </DropdownItem>
+          <DropdownItem>
+            <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Unset' : 'Set'} auto-connect
+          </DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem className="dropdown-item--danger" onClick={showModal}>
+            <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
+          </DropdownItem>
+          <DeleteServerModal redirectHome={false} server={server} isOpen={isModalOpen} toggle={hideModal} />
+        </DropdownBtnMenu>
+      </td>
+    </tr>
+  );
+};
diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx
index 284643f6..6adb05b3 100644
--- a/src/servers/ServersDropdown.tsx
+++ b/src/servers/ServersDropdown.tsx
@@ -1,9 +1,8 @@
 import { isEmpty, values } from 'ramda';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import { Link } from 'react-router-dom';
-import { faPlus as plusIcon, faFileDownload as exportIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
+import { faPlus as plusIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import ServersExporter from './services/ServersExporter';
 import { isServerWithId, SelectedServer, ServersMap } from './data';
 
 export interface ServersDropdownProps {
@@ -11,17 +10,16 @@ export interface ServersDropdownProps {
   selectedServer: SelectedServer;
 }
 
-const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, selectedServer }: ServersDropdownProps) => {
+const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
   const serversList = values(servers);
-  const createServerItem = (
-    <DropdownItem tag={Link} to="/server/create">
-      <FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add a server</span>
-    </DropdownItem>
-  );
 
   const renderServers = () => {
     if (isEmpty(serversList)) {
-      return createServerItem;
+      return (
+        <DropdownItem tag={Link} to="/server/create">
+          <FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add a server</span>
+        </DropdownItem>
+      );
     }
 
     return (
@@ -37,9 +35,8 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
           </DropdownItem>
         ))}
         <DropdownItem divider />
-        {createServerItem}
-        <DropdownItem className="servers-dropdown__export-item" onClick={async () => serversExporter.exportServers()}>
-          <FontAwesomeIcon icon={exportIcon} /> <span className="ml-1">Export servers</span>
+        <DropdownItem tag={Link} to="/manage-servers">
+          <FontAwesomeIcon icon={serverIcon} /> <span className="ml-1">Manage servers</span>
         </DropdownItem>
       </>
     );
diff --git a/src/servers/data/index.ts b/src/servers/data/index.ts
index 6edee8ec..809a6636 100644
--- a/src/servers/data/index.ts
+++ b/src/servers/data/index.ts
@@ -8,6 +8,7 @@ export interface ServerData {
 
 export interface ServerWithId extends ServerData {
   id: string;
+  autoConnect?: boolean;
 }
 
 export interface ReachableServer extends ServerWithId {
diff --git a/src/servers/helpers/ImportServersBtn.scss b/src/servers/helpers/ImportServersBtn.scss
new file mode 100644
index 00000000..32b254a8
--- /dev/null
+++ b/src/servers/helpers/ImportServersBtn.scss
@@ -0,0 +1,5 @@
+.import-servers-btn__csv-select {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+}
diff --git a/src/servers/helpers/ImportServersBtn.tsx b/src/servers/helpers/ImportServersBtn.tsx
index 490d2d7e..869b661f 100644
--- a/src/servers/helpers/ImportServersBtn.tsx
+++ b/src/servers/helpers/ImportServersBtn.tsx
@@ -1,13 +1,17 @@
 import { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
+import { Button, UncontrolledTooltip } from 'reactstrap';
+import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ServersImporter from '../services/ServersImporter';
 import { ServerData } from '../data';
+import './ImportServersBtn.scss';
 
 type Ref<T> = RefObject<T> | MutableRefObject<T>;
 
 export interface ImportServersBtnProps {
   onImport?: () => void;
   onImportError?: (error: Error) => void;
+  tooltipPlacement?: 'top' | 'bottom';
 }
 
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {
@@ -20,6 +24,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
   fileRef,
   onImport = () => {},
   onImportError = () => {},
+  tooltipPlacement = 'bottom',
 }: ImportServersBtnConnectProps) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
   const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
@@ -34,19 +39,14 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
 
   return (
     <>
-      <button
-        type="button"
-        className="btn btn-outline-secondary mr-2"
-        id="importBtn"
-        onClick={() => ref.current?.click()}
-      >
-        Import from file
-      </button>
-      <UncontrolledTooltip placement="top" target="importBtn">
+      <Button outline id="importBtn" onClick={() => ref.current?.click()}>
+        <FontAwesomeIcon icon={importIcon} fixedWidth /> Import from file
+      </Button>
+      <UncontrolledTooltip placement={tooltipPlacement} target="importBtn">
         You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
       </UncontrolledTooltip>
 
-      <input type="file" accept="text/csv" className="create-server__csv-select" ref={ref} onChange={onChange} />
+      <input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onChange} />
     </>
   );
 };
diff --git a/src/servers/helpers/ServerForm.tsx b/src/servers/helpers/ServerForm.tsx
index 3d30b926..9370cbb3 100644
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@@ -31,7 +31,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
       <SimpleCard className="mb-3" title={title}>
         <FormGroup value={name} onChange={setName}>Name</FormGroup>
         <FormGroup type="url" value={url} onChange={setUrl}>URL</FormGroup>
-        <FormGroup value={apiKey} onChange={setApiKey}>APIkey</FormGroup>
+        <FormGroup value={apiKey} onChange={setApiKey}>API key</FormGroup>
       </SimpleCard>
 
       <div className="text-right">{children}</div>
diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts
index 14453446..bea4bd94 100644
--- a/src/servers/services/provideServices.ts
+++ b/src/servers/services/provideServices.ts
@@ -14,19 +14,34 @@ import { ServerError } from '../helpers/ServerError';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
 import { Overview } from '../Overview';
+import { ManageServers } from '../ManageServers';
+import { ManageServersRow } from '../ManageServersRow';
 import ServersImporter from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
   // Components
+  bottle.serviceFactory(
+    'ManageServers',
+    ManageServers,
+    'ServersExporter',
+    'ImportServersBtn',
+    'useStateFlagTimeout',
+    'ManageServersRow',
+  );
+  bottle.decorator('ManageServers', connect([ 'servers' ]));
+
+  bottle.serviceFactory('ManageServersRow', ManageServersRow, 'DeleteServerModal');
+  bottle.decorator('ManageServers', connect([ 'servers' ]));
+
   bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout');
   bottle.decorator('CreateServer', withoutSelectedServer);
-  bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
+  bottle.decorator('CreateServer', connect([ 'selectedServer', 'servers' ], [ 'createServer', 'resetSelectedServer' ]));
 
   bottle.serviceFactory('EditServer', EditServer, 'ServerError');
   bottle.decorator('EditServer', connect([ 'selectedServer' ], [ 'editServer', 'selectServer' ]));
 
-  bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
+  bottle.serviceFactory('ServersDropdown', () => ServersDropdown);
   bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ]));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
diff --git a/src/utils/FormGroupContainer.tsx b/src/utils/FormGroupContainer.tsx
index d522ebfb..767a4fbf 100644
--- a/src/utils/FormGroupContainer.tsx
+++ b/src/utils/FormGroupContainer.tsx
@@ -1,6 +1,7 @@
 import { FC, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
 import { InputType } from 'reactstrap/lib/Input';
+import { FormGroup } from 'reactstrap';
 
 export interface FormGroupContainerProps {
   value: string;
@@ -19,7 +20,7 @@ export const FormGroupContainer: FC<FormGroupContainerProps> = (
   const forId = useRef<string>(id ?? uuid());
 
   return (
-    <div className={`form-group ${className ?? ''}`}>
+    <FormGroup className={className ?? ''}>
       <label htmlFor={forId.current} className={labelClassName ?? ''}>
         {children}:
       </label>
@@ -32,6 +33,6 @@ export const FormGroupContainer: FC<FormGroupContainerProps> = (
         placeholder={placeholder}
         onChange={(e) => onChange(e.target.value)}
       />
-    </div>
+    </FormGroup>
   );
 };
diff --git a/test/app/App.test.tsx b/test/app/App.test.tsx
index 873e70ec..1638b6fc 100644
--- a/test/app/App.test.tsx
+++ b/test/app/App.test.tsx
@@ -11,7 +11,16 @@ describe('<App />', () => {
   const ShlinkVersions = () => null;
 
   beforeEach(() => {
-    const App = appFactory(MainHeader, () => null, () => null, () => null, () => null, () => null, ShlinkVersions);
+    const App = appFactory(
+      MainHeader,
+      () => null,
+      () => null,
+      () => null,
+      () => null,
+      () => null,
+      () => null,
+      ShlinkVersions,
+    );
 
     wrapper = shallow(
       <App
@@ -36,6 +45,7 @@ describe('<App />', () => {
     const expectedPaths = [
       '/',
       '/settings',
+      '/manage-servers',
       '/server/create',
       '/server/:serverId/edit',
       '/server/:serverId',
diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx
index dcc90006..7cb2e388 100644
--- a/test/servers/CreateServer.test.tsx
+++ b/test/servers/CreateServer.test.tsx
@@ -3,6 +3,7 @@ import { Mock } from 'ts-mockery';
 import { History } from 'history';
 import createServerConstruct from '../../src/servers/CreateServer';
 import { ServerForm } from '../../src/servers/helpers/ServerForm';
+import { ServerWithId } from '../../src/servers/data';
 
 describe('<CreateServer />', () => {
   let wrapper: ShallowWrapper;
@@ -10,13 +11,14 @@ describe('<CreateServer />', () => {
   const createServerMock = jest.fn();
   const push = jest.fn();
   const historyMock = Mock.of<History>({ push });
+  const servers = { foo: Mock.all<ServerWithId>() };
   const createWrapper = (serversImported = false, importFailed = false) => {
     const useStateFlagTimeout = jest.fn()
       .mockReturnValueOnce([ serversImported, () => '' ])
       .mockReturnValueOnce([ importFailed, () => '' ]);
     const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout);
 
-    wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} />);
+    wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} servers={servers} />);
 
     return wrapper;
   };
diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx
index 2730979b..eab1eca2 100644
--- a/test/servers/ServersDropdown.test.tsx
+++ b/test/servers/ServersDropdown.test.tsx
@@ -1,15 +1,12 @@
 import { values } from 'ramda';
 import { Mock } from 'ts-mockery';
-import { FC } from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { DropdownItem, DropdownToggle } from 'reactstrap';
-import serversDropdownCreator, { ServersDropdownProps } from '../../src/servers/ServersDropdown';
+import ServersDropdown from '../../src/servers/ServersDropdown';
 import { ServerWithId } from '../../src/servers/data';
-import ServersExporter from '../../src/servers/services/ServersExporter';
 
 describe('<ServersDropdown />', () => {
   let wrapped: ShallowWrapper;
-  let ServersDropdown: FC<ServersDropdownProps>;
   const servers = {
     '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
     '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
@@ -17,13 +14,12 @@ describe('<ServersDropdown />', () => {
   };
 
   beforeEach(() => {
-    ServersDropdown = serversDropdownCreator(Mock.of<ServersExporter>());
     wrapped = shallow(<ServersDropdown servers={servers} selectedServer={null} />);
   });
   afterEach(() => wrapped.unmount());
 
   it('contains the list of servers, the divider, the create button and the export button', () =>
-    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 3));
+    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -32,7 +28,7 @@ describe('<ServersDropdown />', () => {
     const items = wrapped.find(DropdownItem);
 
     expect(items.filter('[divider]')).toHaveLength(1);
-    expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
+    expect(items.filterWhere((item) => item.prop('to') === '/manage-servers')).toHaveLength(1);
   });
 
   it('shows only create link when no servers exist yet', () => {
diff --git a/test/servers/helpers/ImportServersBtn.test.tsx b/test/servers/helpers/ImportServersBtn.test.tsx
index 261e6e72..da5b4941 100644
--- a/test/servers/helpers/ImportServersBtn.test.tsx
+++ b/test/servers/helpers/ImportServersBtn.test.tsx
@@ -30,7 +30,7 @@ describe('<ImportServersBtn />', () => {
   it('renders a button, a tooltip and a file input', () => {
     expect(wrapper.find('#importBtn')).toHaveLength(1);
     expect(wrapper.find(UncontrolledTooltip)).toHaveLength(1);
-    expect(wrapper.find('.create-server__csv-select')).toHaveLength(1);
+    expect(wrapper.find('.import-servers-btn__csv-select')).toHaveLength(1);
   });
 
   it('triggers click on file ref when button is clicked', () => {
@@ -42,7 +42,7 @@ describe('<ImportServersBtn />', () => {
   });
 
   it('imports servers when file input changes', (done) => {
-    const file = wrapper.find('.create-server__csv-select');
+    const file = wrapper.find('.import-servers-btn__csv-select');
 
     file.simulate('change', { target: { files: [ '' ] } });