Added tooltips to domain icons

src/domains/DomainRow.tsx

@@ -4,8 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faBan as forbiddenIcon,
   faDotCircle as defaultDomainIcon,
-  faCheck as checkIcon,
-  faCircleNotch as loadingStatusIcon,
   faEdit as editIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { ShlinkDomainRedirects } from '../api/types';
@@ -14,7 +12,8 @@ import { OptionalString } from '../utils/utils';
 import { SelectedServer } from '../servers/data';
 import { supportsDefaultDomainRedirectsEdition } from '../utils/helpers/features';
 import { EditDomainRedirectsModal } from './helpers/EditDomainRedirectsModal';
-import { Domain, DomainStatus } from './data';
+import { Domain } from './data';
+import { DomainStatusIcon } from './helpers/DomainStatusIcon';
 
 interface DomainRowProps {
   domain: Domain;
@@ -36,15 +35,6 @@ const DefaultDomain: FC = () => (
     <UncontrolledTooltip target="defaultDomainIcon" placement="right">Default domain</UncontrolledTooltip>
   </>
 );
-const StatusIcon: FC<{ status: DomainStatus }> = ({ status }) => {
-  if (status === 'validating') {
-    return <FontAwesomeIcon fixedWidth icon={loadingStatusIcon} spin />;
-  }
-
-  return status === 'valid'
-    ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
-    : <FontAwesomeIcon fixedWidth icon={forbiddenIcon} className="text-danger" />;
-};
 
 export const DomainRow: FC<DomainRowProps> = (
   { domain, editDomainRedirects, checkDomainHealth, defaultRedirects, selectedServer },
@@ -59,7 +49,7 @@ export const DomainRow: FC<DomainRowProps> = (
 
   return (
     <tr className="responsive-table__row">
-      <td className="responsive-table__cell" data-th="Is default domain">{isDefault ? <DefaultDomain /> : ''}</td>
+      <td className="responsive-table__cell" data-th="Is default domain">{isDefault && <DefaultDomain />}</td>
       <th className="responsive-table__cell" data-th="Domain">{authority}</th>
       <td className="responsive-table__cell" data-th="Base path redirect">
         {redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}
@@ -71,7 +61,7 @@ export const DomainRow: FC<DomainRowProps> = (
         {redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
       </td>
       <td className="responsive-table__cell text-lg-center" data-th="Status">
-        <StatusIcon status={status} />
+        <DomainStatusIcon status={status} />
       </td>
       <td className="responsive-table__cell text-right">
         <span id={!canEditDomain ? 'defaultDomainBtn' : undefined}>

src/domains/helpers/DomainStatusIcon.tsx

@@ -0,0 +1,42 @@
+import { FC, useRef } from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+import { ExternalLink } from 'react-external-link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faBan as forbiddenIcon,
+  faCheck as checkIcon,
+  faCircleNotch as loadingStatusIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { DomainStatus } from '../data';
+
+export const DomainStatusIcon: FC<{ status: DomainStatus }> = ({ status }) => {
+  const ref = useRef<HTMLSpanElement>();
+
+  if (status === 'validating') {
+    return <FontAwesomeIcon fixedWidth icon={loadingStatusIcon} spin />;
+  }
+
+  return (
+    <>
+      <span
+        ref={(el: HTMLSpanElement) => {
+          ref.current = el;
+        }}
+      >
+        {status === 'valid'
+          ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
+          : <FontAwesomeIcon fixedWidth icon={forbiddenIcon} className="text-danger" />}
+      </span>
+      <UncontrolledTooltip target={(() => ref.current) as any} placement="bottom" autohide={status === 'valid'}>
+        {status === 'valid' ? 'Congratulations! This domain is properly configured.' : (
+          <>
+            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
+            find out what is missing.
+          </>
+        )}
+      </UncontrolledTooltip>
+    </>
+  );
+};