Extract shlink-web-component outside of src folder

shlink-web-component/domains/helpers/DomainDropdown.tsx

@@ -0,0 +1,49 @@
+import { faChartPie as pieChartIcon, faEdit as editIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { DropdownItem } from 'reactstrap';
+import { useToggle } from '../../../src/utils/helpers/hooks';
+import { RowDropdownBtn } from '../../../src/utils/RowDropdownBtn';
+import { useFeature } from '../../utils/features';
+import { useRoutesPrefix } from '../../utils/routesPrefix';
+import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
+import type { Domain } from '../data';
+import type { EditDomainRedirects } from '../reducers/domainRedirects';
+import { EditDomainRedirectsModal } from './EditDomainRedirectsModal';
+
+interface DomainDropdownProps {
+  domain: Domain;
+  editDomainRedirects: (redirects: EditDomainRedirects) => Promise<void>;
+}
+
+export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedirects }) => {
+  const [isModalOpen, toggleModal] = useToggle();
+  const { isDefault } = domain;
+  const canBeEdited = !isDefault;
+  const withVisits = useFeature('domainVisits');
+  const routesPrefix = useRoutesPrefix();
+
+  return (
+    <RowDropdownBtn>
+      {withVisits && (
+        <DropdownItem
+          tag={Link}
+          to={`${routesPrefix}/domain/${domain.domain}${domain.isDefault ? `_${DEFAULT_DOMAIN}` : ''}/visits`}
+        >
+          <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
+        </DropdownItem>
+      )}
+      <DropdownItem disabled={!canBeEdited} onClick={!canBeEdited ? undefined : toggleModal}>
+        <FontAwesomeIcon fixedWidth icon={editIcon} /> Edit redirects
+      </DropdownItem>
+
+      <EditDomainRedirectsModal
+        domain={domain}
+        isOpen={isModalOpen}
+        toggle={toggleModal}
+        editDomainRedirects={editDomainRedirects}
+      />
+    </RowDropdownBtn>
+  );
+};

shlink-web-component/domains/helpers/DomainStatusIcon.tsx

@@ -0,0 +1,60 @@
+import {
+  faCheck as checkIcon,
+  faCircleNotch as loadingStatusIcon,
+  faTimes as invalidIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+import { ExternalLink } from 'react-external-link';
+import { UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../../../src/utils/helpers/hooks';
+import type { MediaMatcher } from '../../../src/utils/types';
+import type { DomainStatus } from '../data';
+
+interface DomainStatusIconProps {
+  status: DomainStatus;
+  matchMedia?: MediaMatcher;
+}
+
+export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia = window.matchMedia }) => {
+  const ref = useElementRef<HTMLSpanElement>();
+  const matchesMobile = () => matchMedia('(max-width: 991px)').matches;
+  const [isMobile, setIsMobile] = useState<boolean>(matchesMobile());
+
+  useEffect(() => {
+    const listener = () => setIsMobile(matchesMobile());
+
+    window.addEventListener('resize', listener);
+
+    return () => window.removeEventListener('resize', listener);
+  }, []);
+
+  if (status === 'validating') {
+    return <FontAwesomeIcon fixedWidth icon={loadingStatusIcon} spin />;
+  }
+
+  return (
+    <>
+      <span ref={ref}>
+        {status === 'valid'
+          ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
+          : <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}
+      </span>
+      <UncontrolledTooltip
+        target={ref}
+        placement={isMobile ? 'top-start' : 'left'}
+        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 />
+            Check the <ExternalLink href="https://slnk.to/multi-domain-docs">documentation</ExternalLink> in order to
+            find out what is missing.
+          </span>
+        )}
+      </UncontrolledTooltip>
+    </>
+  );
+};

shlink-web-component/domains/helpers/EditDomainRedirectsModal.tsx

@@ -0,0 +1,78 @@
+import type { FC } from 'react';
+import { useState } from 'react';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import type { ShlinkDomain } from '../../../api/types';
+import type { InputFormGroupProps } from '../../../src/utils/forms/InputFormGroup';
+import { InputFormGroup } from '../../../src/utils/forms/InputFormGroup';
+import { InfoTooltip } from '../../../src/utils/InfoTooltip';
+import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../../src/utils/utils';
+import type { EditDomainRedirects } from '../reducers/domainRedirects';
+
+interface EditDomainRedirectsModalProps {
+  domain: ShlinkDomain;
+  isOpen: boolean;
+  toggle: () => void;
+  editDomainRedirects: (redirects: EditDomainRedirects) => Promise<void>;
+}
+
+const FormGroup: FC<InputFormGroupProps & { isLast?: boolean }> = ({ isLast, ...rest }) => (
+  <InputFormGroup
+    {...rest}
+    required={false}
+    type="url"
+    placeholder="No redirect"
+    className={isLast ? 'mb-0' : ''}
+  />
+);
+
+export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
+  { isOpen, toggle, domain, editDomainRedirects },
+) => {
+  const [baseUrlRedirect, setBaseUrlRedirect] = useState(domain.redirects?.baseUrlRedirect ?? '');
+  const [regular404Redirect, setRegular404Redirect] = useState(domain.redirects?.regular404Redirect ?? '');
+  const [invalidShortUrlRedirect, setInvalidShortUrlRedirect] = useState(
+    domain.redirects?.invalidShortUrlRedirect ?? '',
+  );
+  const handleSubmit = handleEventPreventingDefault(async () => editDomainRedirects({
+    domain: domain.domain,
+    redirects: {
+      baseUrlRedirect: nonEmptyValueOrNull(baseUrlRedirect),
+      regular404Redirect: nonEmptyValueOrNull(regular404Redirect),
+      invalidShortUrlRedirect: nonEmptyValueOrNull(invalidShortUrlRedirect),
+    },
+  }).then(toggle));
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered>
+      <form name="domainRedirectsModal" onSubmit={handleSubmit}>
+        <ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
+        <ModalBody>
+          <FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
+            <InfoTooltip className="me-2" placement="bottom">
+              Visitors accessing the base url, as in <b>https://{domain.domain}/</b>, will be redirected to this URL.
+            </InfoTooltip>
+            Base URL
+          </FormGroup>
+          <FormGroup value={regular404Redirect} onChange={setRegular404Redirect}>
+            <InfoTooltip className="me-2" placement="bottom">
+              Visitors accessing a url not matching a short URL pattern, as in <b>https://{domain.domain}/???/[...]</b>,
+              will be redirected to this URL.
+            </InfoTooltip>
+            Regular 404
+          </FormGroup>
+          <FormGroup value={invalidShortUrlRedirect} isLast onChange={setInvalidShortUrlRedirect}>
+            <InfoTooltip className="me-2" placement="bottom">
+              Visitors accessing a url matching a short URL pattern, but not matching an existing short code, will be
+              redirected to this URL.
+            </InfoTooltip>
+            Invalid short URL
+          </FormGroup>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" type="button" onClick={toggle}>Cancel</Button>
+          <Button color="primary">Save</Button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};