diff --git a/src/domains/helpers/EditDomainRedirectsModal.tsx b/src/domains/helpers/EditDomainRedirectsModal.tsx index a74b9c4a..568503a5 100644 --- a/src/domains/helpers/EditDomainRedirectsModal.tsx +++ b/src/domains/helpers/EditDomainRedirectsModal.tsx @@ -1,10 +1,9 @@ import { FC, useState } from 'react'; -import { Button, Modal, ModalBody, ModalFooter, ModalHeader, UncontrolledTooltip } from 'reactstrap'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; +import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; 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) => Promise; } -const InfoTooltip: FC<{ id: string }> = ({ id, children }) => ( - <> - - {children} - -); - const FormGroup: FC<{ value: string; onChange: (newValue: string) => void; isLast?: boolean }> = ( { value, onChange, isLast, children }, ) => ( @@ -50,25 +42,23 @@ export const EditDomainRedirectsModal: FC = ( return (
- - Edit redirects for {domain.domain} - + Edit redirects for {domain.domain} - + Visitors accessing the base url, as in https://{domain.domain}/, will be redirected to this URL. Base URL - + Visitors accessing a url not matching a short URL pattern, as in https://{domain.domain}/???/[...], will be redirected to this URL. Regular 404 - + Visitors accessing a url matching a short URL pattern, but not matching an existing short code, will be redirected to this URL. diff --git a/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx b/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx index 91dff0bc..410d7625 100644 --- a/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx +++ b/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx @@ -1,8 +1,6 @@ -import { ChangeEvent, FC, useRef } from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; -import { UncontrolledTooltip } from 'reactstrap'; +import { ChangeEvent, FC } from 'react'; 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(); - - return ( - <> - { - ref.current = el; - }} - > - - - ref.current) as any} placement="right">{tooltip} - - ); -}; - export const ShortUrlFormCheckboxGroup: FC = ( { children, infoTooltip, checked, onChange }, ) => ( @@ -34,6 +15,6 @@ export const ShortUrlFormCheckboxGroup: FC = ( {children} - {infoTooltip && } + {infoTooltip && {infoTooltip}}

); diff --git a/src/utils/InfoTooltip.tsx b/src/utils/InfoTooltip.tsx new file mode 100644 index 00000000..f204fd14 --- /dev/null +++ b/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 = ({ className = '', placement, children }) => { + const ref = useRef(); + + return ( + <> + { + ref.current = el; + }} + > + + + ref.current) as any} placement={placement}>{children} + + ); +}; diff --git a/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx b/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx index 76df7496..d8889b41 100644 --- a/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx +++ b/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('', () => { test.each([ @@ -11,6 +12,6 @@ describe('', () => { const checkbox = wrapper.find(Checkbox); expect(checkbox.prop('className')).toEqual(expectedClassName); - expect(wrapper.find('InfoTooltip')).toHaveLength(expectedAmountOfTooltips); + expect(wrapper.find(InfoTooltip)).toHaveLength(expectedAmountOfTooltips); }); });