Extracted InfoTooltip to its own component

src/domains/helpers/EditDomainRedirectsModal.tsx

@@ -1,10 +1,9 @@
 import { FC, useState } from 'react';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader, UncontrolledTooltip } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
 import { FormGroupContainer } from '../../utils/FormGroupContainer';
 import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
+import { InfoTooltip } from '../../utils/InfoTooltip';
 
 interface EditDomainRedirectsModalProps {
   domain: ShlinkDomain;
@@ -13,13 +12,6 @@ interface EditDomainRedirectsModalProps {
   editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
 }
 
-const InfoTooltip: FC<{ id: string }> = ({ id, children }) => (
-  <>
-    <FontAwesomeIcon icon={infoIcon} className="mr-2" id={id} />
-    <UncontrolledTooltip target={id} placement="bottom">{children}</UncontrolledTooltip>
-  </>
-);
-
 const FormGroup: FC<{ value: string; onChange: (newValue: string) => void; isLast?: boolean }> = (
   { value, onChange, isLast, children },
 ) => (
@@ -50,25 +42,23 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
   return (
     <Modal isOpen={isOpen} toggle={toggle} centered>
       <form onSubmit={handleSubmit}>
-        <ModalHeader toggle={toggle}>
+        <ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
-          Edit redirects for <b>{domain.domain}</b>
-        </ModalHeader>
         <ModalBody>
           <FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
-            <InfoTooltip id="baseUrlInfo">
+            <InfoTooltip className="mr-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 id="regularNotFoundInfo">
+            <InfoTooltip className="mr-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 id="invalidShortUrlInfo">
+            <InfoTooltip className="mr-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>

src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx

@@ -1,8 +1,6 @@
-import { ChangeEvent, FC, useRef } from 'react';
+import { ChangeEvent, FC } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
-import { UncontrolledTooltip } from 'reactstrap';
 import Checkbox from '../../utils/Checkbox';
+import { InfoTooltip } from '../../utils/InfoTooltip';
 
 interface ShortUrlFormCheckboxGroupProps {
   checked?: boolean;
@@ -10,23 +8,6 @@ interface ShortUrlFormCheckboxGroupProps {
   infoTooltip?: string;
 }
 
-const InfoTooltip: FC<{ tooltip: string }> = ({ tooltip }) => {
-  const ref = useRef<HTMLElement | null>();
-
-  return (
-    <>
-      <span
-        ref={(el) => {
-          ref.current = el;
-        }}
-      >
-        <FontAwesomeIcon icon={infoIcon} />
-      </span>
-      <UncontrolledTooltip target={(() => ref.current) as any} placement="right">{tooltip}</UncontrolledTooltip>
-    </>
-  );
-};
-
 export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
   { children, infoTooltip, checked, onChange },
 ) => (
@@ -34,6 +15,6 @@ export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
     <Checkbox inline checked={checked} className={infoTooltip ? 'mr-2' : ''} onChange={onChange}>
       {children}
     </Checkbox>
-    {infoTooltip && <InfoTooltip tooltip={infoTooltip} />}
+    {infoTooltip && <InfoTooltip placement="right">{infoTooltip}</InfoTooltip>}
   </p>
 );

src/utils/InfoTooltip.tsx

@@ -0,0 +1,28 @@
+import { FC, useRef } from 'react';
+import * as Popper from 'popper.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { UncontrolledTooltip } from 'reactstrap';
+
+interface InfoTooltipProps {
+  className?: string;
+  placement: Popper.Placement;
+}
+
+export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {
+  const ref = useRef<HTMLElement | null>();
+
+  return (
+    <>
+      <span
+        className={className}
+        ref={(el) => {
+          ref.current = el;
+        }}
+      >
+        <FontAwesomeIcon icon={infoIcon} />
+      </span>
+      <UncontrolledTooltip target={(() => ref.current) as any} placement={placement}>{children}</UncontrolledTooltip>
+    </>
+  );
+};

test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx

@@ -1,6 +1,7 @@
 import { shallow } from 'enzyme';
 import { ShortUrlFormCheckboxGroup } from '../../../src/short-urls/helpers/ShortUrlFormCheckboxGroup';
 import Checkbox from '../../../src/utils/Checkbox';
+import { InfoTooltip } from '../../../src/utils/InfoTooltip';
 
 describe('<ShortUrlFormCheckboxGroup />', () => {
   test.each([
@@ -11,6 +12,6 @@ describe('<ShortUrlFormCheckboxGroup />', () => {
     const checkbox = wrapper.find(Checkbox);
 
     expect(checkbox.prop('className')).toEqual(expectedClassName);
-    expect(wrapper.find('InfoTooltip')).toHaveLength(expectedAmountOfTooltips);
+    expect(wrapper.find(InfoTooltip)).toHaveLength(expectedAmountOfTooltips);
   });
 });