Added links to delete and edit the server when a server could not be reached

src/servers/helpers/ServerError.js

@@ -3,31 +3,48 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Message from '../../utils/Message';
 import ServersListGroup from '../ServersListGroup';
+import { serverType } from '../prop-types';
 import './ServerError.scss';
 
 const propTypes = {
   servers: PropTypes.object,
+  selectedServer: serverType,
   type: PropTypes.oneOf([ 'not-found', 'not-reachable' ]).isRequired,
 };
 
-export const ServerError = ({ type, servers: { list } }) => (
-  <div className="server-error-container flex-column">
-    <div className="row w-100 mb-3 mb-md-5">
-      <Message type="error">
-        {type === 'not-found' && 'Could not find this Shlink server.'}
-        {type === 'not-reachable' && (
-          <React.Fragment>
-            <p>Oops! Could not connect to this Shlink server.</p>
-            Make sure you have internet connection, and the server is properly configured and on-line.
-          </React.Fragment>
-        )}
-      </Message>
-    </div>
-    <ServersListGroup servers={Object.values(list)}>
-      These are the {type === 'not-reachable' ? 'other' : ''} Shlink servers currently configured. Choose one of
-      them or <Link to="/server/create">add a new one</Link>.
-    </ServersListGroup>
-  </div>
-);
+export const ServerError = (DeleteServerButton) => {
+  const ServerErrorComp = ({ type, servers: { list }, selectedServer }) => (
+    <div className="server-error__container flex-column">
+      <div className="row w-100 mb-3 mb-md-5">
+        <Message type="error">
+          {type === 'not-found' && 'Could not find this Shlink server.'}
+          {type === 'not-reachable' && (
+            <React.Fragment>
+              <p>Oops! Could not connect to this Shlink server.</p>
+              Make sure you have internet connection, and the server is properly configured and on-line.
+            </React.Fragment>
+          )}
+        </Message>
+      </div>
 
-ServerError.propTypes = propTypes;
+      <ServersListGroup servers={Object.values(list)}>
+        These are the Shlink servers currently configured. Choose one of
+        them or <Link to="/server/create">add a new one</Link>.
+      </ServersListGroup>
+
+      {type === 'not-reachable' && (
+        <div className="container mt-3 mt-md-5">
+          <h5>
+            Alternatively, if you think you may have miss-configured this server, you
+            can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
+            <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
+          </h5>
+        </div>
+      )}
+    </div>
+  );
+
+  ServerErrorComp.propTypes = propTypes;
+
+  return ServerErrorComp;
+};

src/servers/helpers/ServerError.scss

@@ -1,6 +1,15 @@
-.server-error-container {
+.server-error__container {
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.server-error__delete-btn {
+  color: #dc3545;
+  cursor: pointer;
+}
+
+.server-error__delete-btn:hover {
+  text-decoration: underline;
+}