Created new section to manage servers

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} />

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' ]));

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);

src/servers/CreateServer.scss

@@ -8,9 +8,3 @@
     text-align: right;
   }
 }
-
-.create-server__csv-select {
-  position: absolute;
-  left: -9999px;
-  top: -9999px;
-}

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>
   );
 };

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 (

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>
+  );
+};

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>
+  );
+};

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>
       </>
     );

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 {

src/servers/helpers/ImportServersBtn.scss

@@ -0,0 +1,5 @@
+.import-servers-btn__csv-select {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+}

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} />
     </>
   );
 };

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>

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);

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>
   );
 };