diff --git a/src/domains/DomainRow.tsx b/src/domains/DomainRow.tsx index 0cb7b5f7..db35cdaa 100644 --- a/src/domains/DomainRow.tsx +++ b/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 = () => ( Default domain ); -const StatusIcon: FC<{ status: DomainStatus }> = ({ status }) => { - if (status === 'validating') { - return ; - } - - return status === 'valid' - ? - : ; -}; export const DomainRow: FC = ( { domain, editDomainRedirects, checkDomainHealth, defaultRedirects, selectedServer }, @@ -59,7 +49,7 @@ export const DomainRow: FC = ( return ( - {isDefault ? : ''} + {isDefault && } {authority} {redirects?.baseUrlRedirect ?? } @@ -71,7 +61,7 @@ export const DomainRow: FC = ( {redirects?.invalidShortUrlRedirect ?? } - + diff --git a/src/domains/helpers/DomainStatusIcon.tsx b/src/domains/helpers/DomainStatusIcon.tsx new file mode 100644 index 00000000..3bb22677 --- /dev/null +++ b/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(); + + if (status === 'validating') { + return ; + } + + return ( + <> + { + ref.current = el; + }} + > + {status === 'valid' + ? + : } + + 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. +
+ Follow the documentation in order to + find out what is missing. + + )} +
+ + ); +};