Improvements on ManageServers

src/servers/CreateServer.tsx

@@ -27,7 +27,7 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
 );
 
 const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
-  { servers, createServer, history: { push } }: CreateServerProps,
+  { servers, createServer, history: { push, goBack } }: CreateServerProps,
 ) => {
   const hasServers = !!Object.keys(servers).length;
   const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
@@ -44,6 +44,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
       <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
         {!hasServers &&
           <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
+        {hasServers && <Button outline onClick={goBack}>Cancel</Button>}
         <Button outline color="primary" className="ml-2">Create server</Button>
       </ServerForm>
 

src/servers/EditServer.tsx

@@ -10,7 +10,7 @@ interface EditServerProps {
 }
 
 export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>((
-  { editServer, selectedServer, history: { push, goBack } },
+  { editServer, selectedServer, history: { goBack } },
 ) => {
   if (!isServerWithId(selectedServer)) {
     return null;
@@ -18,7 +18,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
 
   const handleSubmit = (serverData: ServerData) => {
     editServer(selectedServer.id, serverData);
-    push(`/server/${selectedServer.id}`);
+    goBack();
   };
 
   return (

src/servers/ManageServers.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react';
-import { Button } from 'reactstrap';
+import { Button, Row } 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';
@@ -41,15 +41,19 @@ export const ManageServers = (
     <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>
+      <Row className="mb-3">
+        <div className="col-md-6 d-flex d-md-block mb-2 mb-md-0">
+          <ImportServersBtn className="flex-fill" onImportError={setErrorImporting} />
+          <Button outline className="ml-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
+            <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
+          </Button>
+        </div>
+        <div className="col-md-6 text-md-right d-flex d-md-block">
+          <Button outline color="primary" className="flex-fill" tag={Link} to="/server/create">
+            <FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server
+          </Button>
+        </div>
+      </Row>
 
       <SimpleCard title="Shlink servers">
         <table className="table table-hover mb-0">

src/servers/ManageServersRow.tsx

@@ -54,7 +54,7 @@ export const ManageServersRow = (
             <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
           </DropdownItem>
           <DropdownItem>
-            <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Unset' : 'Set'} auto-connect
+            <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
           </DropdownItem>
           <DropdownItem divider />
           <DropdownItem className="dropdown-item--danger" onClick={showModal}>

src/servers/helpers/ImportServersBtn.tsx

@@ -12,6 +12,7 @@ export interface ImportServersBtnProps {
   onImport?: () => void;
   onImportError?: (error: Error) => void;
   tooltipPlacement?: 'top' | 'bottom';
+  className?: string;
 }
 
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {
@@ -25,6 +26,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
   onImport = () => {},
   onImportError = () => {},
   tooltipPlacement = 'bottom',
+  className = '',
 }: ImportServersBtnConnectProps) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
   const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
@@ -39,7 +41,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
 
   return (
     <>
-      <Button outline id="importBtn" onClick={() => ref.current?.click()}>
+      <Button outline id="importBtn" className={className} onClick={() => ref.current?.click()}>
         <FontAwesomeIcon icon={importIcon} fixedWidth /> Import from file
       </Button>
       <UncontrolledTooltip placement={tooltipPlacement} target="importBtn">