mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 09:47:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Rolled-back blurred modal

Browse source
This commit is contained in:
Alejandro Celaya 2021-02-27 08:52:10 +01:00
parent 3cd30b61e4
commit 2553b27d7d
20 changed files with 43 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* [#379](https://github.com/shlinkio/shlink-web-client/issues/379) and [#384](https://github.com/shlinkio/shlink-web-client/issues/384) Improved QR code modal, including controls to customize size, format and margin, as well as a button to copy the link to the clipboard. * [#379](https://github.com/shlinkio/shlink-web-client/issues/379) and [#384](https://github.com/shlinkio/shlink-web-client/issues/384) Improved QR code modal, including controls to customize size, format and margin, as well as a button to copy the link to the clipboard.
* [#385](https://github.com/shlinkio/shlink-web-client/issues/385) Added setting to determine if "validate URL" should be enabled or disabled by default. * [#385](https://github.com/shlinkio/shlink-web-client/issues/385) Added setting to determine if "validate URL" should be enabled or disabled by default.
* [#386](https://github.com/shlinkio/shlink-web-client/issues/386) Added new card in overview section to display amount of orphan visits when using Shlink 2.6.0 or higher. * [#386](https://github.com/shlinkio/shlink-web-client/issues/386) Added new card in overview section to display amount of orphan visits when using Shlink 2.6.0 or higher.
* [#177](https://github.com/shlinkio/shlink-web-client/issues/177) Added dark theme. **[BETA]** * [#177](https://github.com/shlinkio/shlink-web-client/issues/177) Added dark theme.
### Changed ### Changed
* *Nothing* * *Nothing*

7
src/servers/DeleteServerModal.tsx
View file

@ -1,6 +1,5 @@
import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { RouterProps } from 'react-router'; import { RouterProps } from 'react-router';
import { BlurredModal } from '../utils/BlurredModal';
import { ServerWithId } from './data'; import { ServerWithId } from './data';
export interface DeleteServerModalProps { export interface DeleteServerModalProps {
@ -21,7 +20,7 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: De
}; };
return ( return (
<BlurredModal isOpen={isOpen} toggle={toggle} centered> <Modal isOpen={isOpen} toggle={toggle} centered>
<ModalHeader toggle={toggle}><span className="text-danger">Remove server</span></ModalHeader> <ModalHeader toggle={toggle}><span className="text-danger">Remove server</span></ModalHeader>
<ModalBody> <ModalBody>
<p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p> <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
@ -36,7 +35,7 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: De
<button className="btn btn-link" onClick={toggle}>Cancel</button> <button className="btn btn-link" onClick={toggle}>Cancel</button>
<button className="btn btn-danger" onClick={() => closeModal()}>Delete</button> <button className="btn btn-danger" onClick={() => closeModal()}>Delete</button>
</ModalFooter> </ModalFooter>
</BlurredModal> </Modal>
); );
}; };

7
src/short-urls/UseExistingIfFoundInfoIcon.tsx
View file

@ -1,12 +1,11 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { ModalBody, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import { useToggle } from '../utils/helpers/hooks'; import { useToggle } from '../utils/helpers/hooks';
import { BlurredModal } from '../utils/BlurredModal';
import './UseExistingIfFoundInfoIcon.scss'; import './UseExistingIfFoundInfoIcon.scss';
const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => ( const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => (
<BlurredModal isOpen={isOpen} toggle={toggle} centered size="lg"> <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
<ModalHeader toggle={toggle}>Info</ModalHeader> <ModalHeader toggle={toggle}>Info</ModalHeader>
<ModalBody> <ModalBody>
<p> <p>
@ -34,7 +33,7 @@ const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void })
</li> </li>
</ul> </ul>
</ModalBody> </ModalBody>
</BlurredModal> </Modal>
); );
const UseExistingIfFoundInfoIcon = () => { const UseExistingIfFoundInfoIcon = () => {

7
src/short-urls/helpers/DeleteShortUrlModal.tsx
View file

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { identity, pipe } from 'ramda'; import { identity, pipe } from 'ramda';
import { ShortUrlDeletion } from '../reducers/shortUrlDeletion'; import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
import { ShortUrlModalProps } from '../data'; import { ShortUrlModalProps } from '../data';
@ -7,7 +7,6 @@ import { handleEventPreventingDefault, OptionalString } from '../../utils/utils'
import { Result } from '../../utils/Result'; import { Result } from '../../utils/Result';
import { isInvalidDeletionError } from '../../api/utils'; import { isInvalidDeletionError } from '../../api/utils';
import { ShlinkApiError } from '../../api/ShlinkApiError'; import { ShlinkApiError } from '../../api/ShlinkApiError';
import { BlurredModal } from '../../utils/BlurredModal';
interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps { interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
shortUrlDeletion: ShortUrlDeletion; shortUrlDeletion: ShortUrlDeletion;
@ -33,7 +32,7 @@ const DeleteShortUrlModal = (
}); });
return ( return (
<BlurredModal isOpen={isOpen} toggle={close} centered> <Modal isOpen={isOpen} toggle={close} centered>
<form onSubmit={handleDeleteUrl}> <form onSubmit={handleDeleteUrl}>
<ModalHeader toggle={close}> <ModalHeader toggle={close}>
<span className="text-danger">Delete short URL</span> <span className="text-danger">Delete short URL</span>
@ -68,7 +67,7 @@ const DeleteShortUrlModal = (
</button> </button>
</ModalFooter> </ModalFooter>
</form> </form>
</BlurredModal> </Modal>
); );
}; };

7
src/short-urls/helpers/EditMetaModal.tsx
View file

@ -1,5 +1,5 @@
import { ChangeEvent, useState } from 'react'; import { ChangeEvent, useState } from 'react';
import { ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
@ -12,7 +12,6 @@ import { ShortUrl, ShortUrlMeta, ShortUrlModalProps } from '../data';
import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils'; import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils';
import { Result } from '../../utils/Result'; import { Result } from '../../utils/Result';
import { ShlinkApiError } from '../../api/ShlinkApiError'; import { ShlinkApiError } from '../../api/ShlinkApiError';
import { BlurredModal } from '../../utils/BlurredModal';
interface EditMetaModalConnectProps extends ShortUrlModalProps { interface EditMetaModalConnectProps extends ShortUrlModalProps {
shortUrlMeta: ShortUrlMetaEdition; shortUrlMeta: ShortUrlMetaEdition;
@ -43,7 +42,7 @@ const EditMetaModal = (
}).then(close); }).then(close);
return ( return (
<BlurredModal isOpen={isOpen} toggle={close} centered> <Modal isOpen={isOpen} toggle={close} centered>
<ModalHeader toggle={close}> <ModalHeader toggle={close}>
<FontAwesomeIcon icon={infoIcon} id="metaTitleInfo" /> Edit metadata for <ExternalLink href={url} /> <FontAwesomeIcon icon={infoIcon} id="metaTitleInfo" /> Edit metadata for <ExternalLink href={url} />
<UncontrolledTooltip target="metaTitleInfo" placement="bottom"> <UncontrolledTooltip target="metaTitleInfo" placement="bottom">
@ -95,7 +94,7 @@ const EditMetaModal = (
<button className="btn btn-primary" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button> <button className="btn btn-primary" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
</ModalFooter> </ModalFooter>
</form> </form>
</BlurredModal> </Modal>
); );
}; };

7
src/short-urls/helpers/EditShortUrlModal.tsx
View file

@ -1,12 +1,11 @@
import { useState } from 'react'; import { useState } from 'react';
import { ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
import { ShortUrlEdition } from '../reducers/shortUrlEdition'; import { ShortUrlEdition } from '../reducers/shortUrlEdition';
import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils'; import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils';
import { ShortUrlModalProps } from '../data'; import { ShortUrlModalProps } from '../data';
import { Result } from '../../utils/Result'; import { Result } from '../../utils/Result';
import { ShlinkApiError } from '../../api/ShlinkApiError'; import { ShlinkApiError } from '../../api/ShlinkApiError';
import { BlurredModal } from '../../utils/BlurredModal';
interface EditShortUrlModalProps extends ShortUrlModalProps { interface EditShortUrlModalProps extends ShortUrlModalProps {
shortUrlEdition: ShortUrlEdition; shortUrlEdition: ShortUrlEdition;
@ -21,7 +20,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
const doEdit = async () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle); const doEdit = async () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle);
return ( return (
<BlurredModal isOpen={isOpen} toggle={toggle} centered size="lg"> <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
<ModalHeader toggle={toggle}> <ModalHeader toggle={toggle}>
Edit long URL for <ExternalLink href={url} /> Edit long URL for <ExternalLink href={url} />
</ModalHeader> </ModalHeader>
@ -50,7 +49,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
<Button color="primary" disabled={saving || !hasValue(longUrl)}>{saving ? 'Saving...' : 'Save'}</Button> <Button color="primary" disabled={saving || !hasValue(longUrl)}>{saving ? 'Saving...' : 'Save'}</Button>
</ModalFooter> </ModalFooter>
</form> </form>
</BlurredModal> </Modal>
); );
}; };

7
src/short-urls/helpers/EditTagsModal.tsx
View file

@ -1,5 +1,5 @@
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
import { ShortUrlTags } from '../reducers/shortUrlTags'; import { ShortUrlTags } from '../reducers/shortUrlTags';
import { ShortUrlModalProps } from '../data'; import { ShortUrlModalProps } from '../data';
@ -7,7 +7,6 @@ import { OptionalString } from '../../utils/utils';
import { TagsSelectorProps } from '../../tags/helpers/TagsSelector'; import { TagsSelectorProps } from '../../tags/helpers/TagsSelector';
import { Result } from '../../utils/Result'; import { Result } from '../../utils/Result';
import { ShlinkApiError } from '../../api/ShlinkApiError'; import { ShlinkApiError } from '../../api/ShlinkApiError';
import { BlurredModal } from '../../utils/BlurredModal';
interface EditTagsModalProps extends ShortUrlModalProps { interface EditTagsModalProps extends ShortUrlModalProps {
shortUrlTags: ShortUrlTags; shortUrlTags: ShortUrlTags;
@ -29,7 +28,7 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
.catch(() => {}); .catch(() => {});
return ( return (
<BlurredModal isOpen={isOpen} toggle={toggle} centered> <Modal isOpen={isOpen} toggle={toggle} centered>
<ModalHeader toggle={toggle}> <ModalHeader toggle={toggle}>
Edit tags for <ExternalLink href={url} /> Edit tags for <ExternalLink href={url} />
</ModalHeader> </ModalHeader>
@ -47,7 +46,7 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
{saving ? 'Saving tags...' : 'Save tags'} {saving ? 'Saving tags...' : 'Save tags'}
</button> </button>
</ModalFooter> </ModalFooter>
</BlurredModal> </Modal>
); );
}; };

7
src/short-urls/helpers/QrCodeModal.tsx
View file

@ -1,5 +1,5 @@
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { DropdownItem, FormGroup, ModalBody, ModalHeader, Row } from 'reactstrap'; import { Modal, DropdownItem, FormGroup, ModalBody, ModalHeader, Row } from 'reactstrap';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
import classNames from 'classnames'; import classNames from 'classnames';
import { ShortUrlModalProps } from '../data'; import { ShortUrlModalProps } from '../data';
@ -9,7 +9,6 @@ import { DropdownBtn } from '../../utils/DropdownBtn';
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon'; import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
import { buildQrCodeUrl, QrCodeCapabilities, QrCodeFormat } from '../../utils/helpers/qrCodes'; import { buildQrCodeUrl, QrCodeCapabilities, QrCodeFormat } from '../../utils/helpers/qrCodes';
import './QrCodeModal.scss'; import './QrCodeModal.scss';
import { BlurredModal } from '../../utils/BlurredModal';
interface QrCodeModalConnectProps extends ShortUrlModalProps { interface QrCodeModalConnectProps extends ShortUrlModalProps {
selectedServer: ReachableServer; selectedServer: ReachableServer;
@ -38,7 +37,7 @@ const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }:
}, [ totalSize ]); }, [ totalSize ]);
return ( return (
<BlurredModal isOpen={isOpen} toggle={toggle} centered size={modalSize}> <Modal isOpen={isOpen} toggle={toggle} centered size={modalSize}>
<ModalHeader toggle={toggle}> <ModalHeader toggle={toggle}>
QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink> QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
</ModalHeader> </ModalHeader>
@ -99,7 +98,7 @@ const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }:
<div className="mt-2">{size}x{size}</div> <div className="mt-2">{size}x{size}</div>
</div> </div>
</ModalBody> </ModalBody>
</BlurredModal> </Modal>
); );
}; };

7
src/tags/helpers/DeleteTagConfirmModal.tsx
View file

@ -1,9 +1,8 @@
import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { TagDeletion } from '../reducers/tagDelete'; import { TagDeletion } from '../reducers/tagDelete';
import { TagModalProps } from '../data'; import { TagModalProps } from '../data';
import { Result } from '../../utils/Result'; import { Result } from '../../utils/Result';
import { ShlinkApiError } from '../../api/ShlinkApiError'; import { ShlinkApiError } from '../../api/ShlinkApiError';
import { BlurredModal } from '../../utils/BlurredModal';
interface DeleteTagConfirmModalProps extends TagModalProps { interface DeleteTagConfirmModalProps extends TagModalProps {
deleteTag: (tag: string) => Promise<void>; deleteTag: (tag: string) => Promise<void>;
@ -22,7 +21,7 @@ const DeleteTagConfirmModal = (
}; };
return ( return (
<BlurredModal toggle={toggle} isOpen={isOpen} centered> <Modal toggle={toggle} isOpen={isOpen} centered>
<ModalHeader toggle={toggle}> <ModalHeader toggle={toggle}>
<span className="text-danger">Delete tag</span> <span className="text-danger">Delete tag</span>
</ModalHeader> </ModalHeader>
@ -40,7 +39,7 @@ const DeleteTagConfirmModal = (
{deleting ? 'Deleting tag...' : 'Delete tag'} {deleting ? 'Deleting tag...' : 'Delete tag'}
</button> </button>
</ModalFooter> </ModalFooter>
</BlurredModal> </Modal>
); );
}; };

7
src/tags/helpers/EditTagModal.tsx
View file

@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
import { ChromePicker } from 'react-color'; import { ChromePicker } from 'react-color';
import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons'; import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -10,7 +10,6 @@ import { TagModalProps } from '../data';
import { TagEdition } from '../reducers/tagEdit'; import { TagEdition } from '../reducers/tagEdit';
import { Result } from '../../utils/Result'; import { Result } from '../../utils/Result';
import { ShlinkApiError } from '../../api/ShlinkApiError'; import { ShlinkApiError } from '../../api/ShlinkApiError';
import { BlurredModal } from '../../utils/BlurredModal';
import './EditTagModal.scss'; import './EditTagModal.scss';
interface EditTagModalProps extends TagModalProps { interface EditTagModalProps extends TagModalProps {
@ -32,7 +31,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
.catch(() => {})); .catch(() => {}));
return ( return (
<BlurredModal isOpen={isOpen} toggle={toggle} centered onClosed={hideColorPicker}> <Modal isOpen={isOpen} toggle={toggle} centered onClosed={hideColorPicker}>
<form onSubmit={saveTag}> <form onSubmit={saveTag}>
<ModalHeader toggle={toggle}>Edit tag</ModalHeader> <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
<ModalBody> <ModalBody>
@ -69,7 +68,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
<button type="submit" className="btn btn-primary" disabled={editing}>{editing ? 'Saving...' : 'Save'}</button> <button type="submit" className="btn btn-primary" disabled={editing}>{editing ? 'Saving...' : 'Save'}</button>
</ModalFooter> </ModalFooter>
</form> </form>
</BlurredModal> </Modal>
); );
}; };

11
src/utils/BlurredModal.scss
View file

@ -1,11 +0,0 @@
@import './base';
@media (min-width: $smMin) {
#root {
transition: filter 300ms;
}
.with-modal #root {
filter: blur(1.5px);
}
}

12
src/utils/BlurredModal.tsx
View file

@ -1,12 +0,0 @@
import { FC } from 'react';
import { ModalProps, Modal } from 'reactstrap'; // eslint-disable-line import/named
import './BlurredModal.scss';
const onEnter = () => document.body.classList.add('with-modal');
const onExit = () => document.body.classList.remove('with-modal');
export const BlurredModal: FC<ModalProps> = ({ children, ...rest }) => (
<Modal {...rest} modalTransition={{ onEnter, onExit }}>
{children}
</Modal>
);

7
src/visits/helpers/MapModal.tsx
View file

@ -1,9 +1,8 @@
import { FC } from 'react'; import { FC } from 'react';
import { ModalBody } from 'reactstrap'; import { Modal, ModalBody } from 'reactstrap';
import { MapContainer, TileLayer, Marker, Popup, MapContainerProps } from 'react-leaflet'; import { MapContainer, TileLayer, Marker, Popup, MapContainerProps } from 'react-leaflet';
import { prop } from 'ramda'; import { prop } from 'ramda';
import { CityStats } from '../types'; import { CityStats } from '../types';
import { BlurredModal } from '../../utils/BlurredModal';
import './MapModal.scss'; import './MapModal.scss';
interface MapModalProps { interface MapModalProps {
@ -37,7 +36,7 @@ const calculateMapProps = (locations: CityStats[]): MapContainerProps => {
}; };
const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => ( const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
<BlurredModal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content"> <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
<ModalBody className="map-modal__modal-body"> <ModalBody className="map-modal__modal-body">
<h3 className="map-modal__modal-title"> <h3 className="map-modal__modal-title">
{title} {title}
@ -52,7 +51,7 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
))} ))}
</MapContainer> </MapContainer>
</ModalBody> </ModalBody>
</BlurredModal> </Modal>
); );
export default MapModal; export default MapModal;

5
test/servers/DeleteServerModal.test.tsx
View file

@ -1,10 +1,9 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { History } from 'history'; import { History } from 'history';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import DeleteServerModal from '../../src/servers/DeleteServerModal'; import DeleteServerModal from '../../src/servers/DeleteServerModal';
import { ServerWithId } from '../../src/servers/data'; import { ServerWithId } from '../../src/servers/data';
import { BlurredModal } from '../../src/utils/BlurredModal';
describe('<DeleteServerModal />', () => { describe('<DeleteServerModal />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
@ -28,7 +27,7 @@ describe('<DeleteServerModal />', () => {
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
it('renders a modal window', () => { it('renders a modal window', () => {
expect(wrapper.find(BlurredModal)).toHaveLength(1); expect(wrapper.find(Modal)).toHaveLength(1);
expect(wrapper.find(ModalHeader)).toHaveLength(1); expect(wrapper.find(ModalHeader)).toHaveLength(1);
expect(wrapper.find(ModalBody)).toHaveLength(1); expect(wrapper.find(ModalBody)).toHaveLength(1);
expect(wrapper.find(ModalFooter)).toHaveLength(1); expect(wrapper.find(ModalFooter)).toHaveLength(1);

2
test/short-urls/helpers/EditMetaModal.test.tsx
View file

@ -71,7 +71,7 @@ describe('<EditMetaModal />', () => {
it.each([ it.each([
[ '.btn-link', 'onClick' ], [ '.btn-link', 'onClick' ],
[ 'BlurredModal', 'toggle' ], [ 'Modal', 'toggle' ],
[ 'ModalHeader', 'toggle' ], [ 'ModalHeader', 'toggle' ],
])('resets meta when modal is toggled in any way', (componentToFind, propToCall) => { ])('resets meta when modal is toggled in any way', (componentToFind, propToCall) => {
const wrapper = createWrapper({ saving: false, error: false }); const wrapper = createWrapper({ saving: false, error: false });

2
test/short-urls/helpers/EditShortUrlModal.test.tsx
View file

@ -67,7 +67,7 @@ describe('<EditShortUrlModal />', () => {
it.each([ it.each([
[ '[color="link"]', 'onClick' ], [ '[color="link"]', 'onClick' ],
[ 'BlurredModal', 'toggle' ], [ 'Modal', 'toggle' ],
[ 'ModalHeader', 'toggle' ], [ 'ModalHeader', 'toggle' ],
])('toggles modal with different mechanisms', (componentToFind, propToCall) => { ])('toggles modal with different mechanisms', (componentToFind, propToCall) => {
const wrapper = createWrapper({}, { saving: false, error: false }); const wrapper = createWrapper({}, { saving: false, error: false });

4
test/short-urls/helpers/EditTagsModal.test.tsx
View file

@ -4,7 +4,7 @@ import createEditTagsModal from '../../../src/short-urls/helpers/EditTagsModal';
import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrl } from '../../../src/short-urls/data';
import { ShortUrlTags } from '../../../src/short-urls/reducers/shortUrlTags'; import { ShortUrlTags } from '../../../src/short-urls/reducers/shortUrlTags';
import { OptionalString } from '../../../src/utils/utils'; import { OptionalString } from '../../../src/utils/utils';
import { BlurredModal } from '../../../src/utils/BlurredModal'; import { Modal } from 'reactstrap';
describe('<EditTagsModal />', () => { describe('<EditTagsModal />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
@ -98,7 +98,7 @@ describe('<EditTagsModal />', () => {
saving: false, saving: false,
error: false, error: false,
}); });
const modal = wrapper.find(BlurredModal); const modal = wrapper.find(Modal);
modal.simulate('closed'); modal.simulate('closed');
expect(editShortUrlTags).not.toHaveBeenCalled(); expect(editShortUrlTags).not.toHaveBeenCalled();

5
test/short-urls/helpers/QrCodeModal.test.tsx
View file

@ -1,13 +1,12 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
import { ModalBody, ModalHeader, Row } from 'reactstrap'; import { Modal, ModalBody, ModalHeader, Row } from 'reactstrap';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal'; import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrl } from '../../../src/short-urls/data';
import { ReachableServer } from '../../../src/servers/data'; import { ReachableServer } from '../../../src/servers/data';
import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon'; import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
import { DropdownBtn } from '../../../src/utils/DropdownBtn'; import { DropdownBtn } from '../../../src/utils/DropdownBtn';
import { BlurredModal } from '../../../src/utils/BlurredModal';
describe('<QrCodeModal />', () => { describe('<QrCodeModal />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
@ -81,7 +80,7 @@ describe('<QrCodeModal />', () => {
expect(wrapper.find('.mt-2').text()).toEqual(`${size}x${size}`); expect(wrapper.find('.mt-2').text()).toEqual(`${size}x${size}`);
expect(wrapper.find('label').at(0).text()).toEqual(`Size: ${size}px`); expect(wrapper.find('label').at(0).text()).toEqual(`Size: ${size}px`);
expect(wrapper.find('label').at(1).text()).toEqual(`Margin: ${margin}px`); expect(wrapper.find('label').at(1).text()).toEqual(`Margin: ${margin}px`);
expect(wrapper.find(BlurredModal).prop('size')).toEqual(modalSize); expect(wrapper.find(Modal).prop('size')).toEqual(modalSize);
}); });
it.each([ it.each([

5
test/tags/helpers/DeleteTagConfirmModal.test.tsx
View file

@ -1,8 +1,7 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { ModalBody, ModalFooter } from 'reactstrap'; import { Modal, ModalBody, ModalFooter } from 'reactstrap';
import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal'; import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal';
import { TagDeletion } from '../../../src/tags/reducers/tagDelete'; import { TagDeletion } from '../../../src/tags/reducers/tagDelete';
import { BlurredModal } from '../../../src/utils/BlurredModal';
describe('<DeleteTagConfirmModal />', () => { describe('<DeleteTagConfirmModal />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
@ -69,7 +68,7 @@ describe('<DeleteTagConfirmModal />', () => {
it('does no further actions when modal is closed without deleting tag', () => { it('does no further actions when modal is closed without deleting tag', () => {
wrapper = createWrapper({ error: false, deleting: false }); wrapper = createWrapper({ error: false, deleting: false });
const modal = wrapper.find(BlurredModal); const modal = wrapper.find(Modal);
modal.simulate('closed'); modal.simulate('closed');
expect(deleteTag).not.toHaveBeenCalled(); expect(deleteTag).not.toHaveBeenCalled();

4
test/visits/helpers/MapModal.test.tsx
View file

@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { Marker, Popup } from 'react-leaflet'; import { Marker, Popup } from 'react-leaflet';
import MapModal from '../../../src/visits/helpers/MapModal'; import MapModal from '../../../src/visits/helpers/MapModal';
import { CityStats } from '../../../src/visits/types'; import { CityStats } from '../../../src/visits/types';
import { BlurredModal } from '../../../src/utils/BlurredModal'; import { Modal } from 'reactstrap';
describe('<MapModal />', () => { describe('<MapModal />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
@ -33,7 +33,7 @@ describe('<MapModal />', () => {
afterEach(() => wrapper.unmount()); afterEach(() => wrapper.unmount());
it('renders modal with provided props', () => { it('renders modal with provided props', () => {
const modal = wrapper.find(BlurredModal); const modal = wrapper.find(Modal);
const header = wrapper.find('.map-modal__modal-title'); const header = wrapper.find('.map-modal__modal-title');
expect(modal.prop('toggle')).toEqual(toggle); expect(modal.prop('toggle')).toEqual(toggle);