Improved icon used for failing status domains

CHANGELOG.md

@@ -12,6 +12,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
     If the resulting list for that interval is empty, it will try to infer the closest interval with visits, based on the latest visit's date, and reload visits for that interval.
 
+* [#547](https://github.com/shlinkio/shlink-web-client/pull/547) Improved domains page, to tell which of the domains are not properly configured.
+
+    Now, when this section is loaded, it tries to call the `GET /rest/health` endpoint for each one of the domains, and displays a warning icon on each one that failed.
+
+    The warning includes a link to the documentation, explaining what are the steps to get it fixed.
+
 * [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
 * [#531](https://github.com/shlinkio/shlink-web-client/pull/531) Added custom slug field to the basic creation form in the Overview page.
 * [#537](https://github.com/shlinkio/shlink-web-client/pull/537) Allowed to customize the ordering for every list in the app that supports it, being currently tags and short URLs.

src/domains/helpers/DomainStatusIcon.tsx

@@ -3,7 +3,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  faBan as forbiddenIcon,
+  faTimes as invalidIcon,
   faCheck as checkIcon,
   faCircleNotch as loadingStatusIcon,
 } from '@fortawesome/free-solid-svg-icons';
@@ -25,14 +25,14 @@ export const DomainStatusIcon: FC<{ status: DomainStatus }> = ({ status }) => {
       >
         {status === 'valid'
           ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
-          : <FontAwesomeIcon fixedWidth icon={forbiddenIcon} className="text-danger" />}
+          : <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}
       </span>
       <UncontrolledTooltip target={(() => ref.current) as any} placement="bottom" autohide={status === 'valid'}>
         {status === 'valid' ? 'Congratulations! This domain is properly configured.' : (
           <span>
             Oops! There is some missing configuration, and short URLs shared with this domain will not work.
             <br />
-            Follow <ExternalLink href="https://slnk.to/multi-domain-docs">the documentation</ExternalLink> in order to
+            Check the <ExternalLink href="https://slnk.to/multi-domain-docs">documentation</ExternalLink> in order to
             find out what is missing.
           </span>
         )}

test/domains/helpers/DomainStatusIcon.test.tsx

@@ -1,7 +1,7 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBan, faCheck, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faCheck, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 import { DomainStatus } from '../../../src/domains/data';
 import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon';
 
@@ -29,7 +29,7 @@ describe('<DomainStatusIcon />', () => {
   it.each([
     [
       'invalid' as DomainStatus,
-      faBan,
+      faTimes,
       'Oops! There is some missing configuration, and short URLs shared with this domain will not work.',
     ],
     [ 'valid' as DomainStatus, faCheck, 'Congratulations! This domain is properly configured.' ],