mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Merge pull request #552 from acelaya-forks/feature/duplicated-servers
Feature/duplicated servers
This commit is contained in:
commit
184d5d97e7
21 changed files with 283 additions and 57 deletions
|
@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
|
||||||
|
|
||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
|
||||||
|
|
||||||
## [Unreleased]
|
## [3.5.0] - 2022-01-01
|
||||||
### Added
|
### Added
|
||||||
* [#407](https://github.com/shlinkio/shlink-web-client/pull/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter".
|
* [#407](https://github.com/shlinkio/shlink-web-client/pull/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter".
|
||||||
|
|
||||||
|
@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
|
|
||||||
The warning includes a link to the documentation, explaining what are the steps to get it fixed.
|
The warning includes a link to the documentation, explaining what are the steps to get it fixed.
|
||||||
|
|
||||||
|
* [#506](https://github.com/shlinkio/shlink-web-client/pull/506) Improved how servers are handled, dispaying a warning when creating or importing servers that already exist.
|
||||||
* [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
|
* [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
|
||||||
* [#531](https://github.com/shlinkio/shlink-web-client/pull/531) Added custom slug field to the basic creation form in the Overview page.
|
* [#531](https://github.com/shlinkio/shlink-web-client/pull/531) Added custom slug field to the basic creation form in the Overview page.
|
||||||
* [#537](https://github.com/shlinkio/shlink-web-client/pull/537) Allowed to customize the ordering for every list in the app that supports it, being currently tags and short URLs.
|
* [#537](https://github.com/shlinkio/shlink-web-client/pull/537) Allowed to customize the ordering for every list in the app that supports it, being currently tags and short URLs.
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import './NoMenuLayout.scss';
|
import './NoMenuLayout.scss';
|
||||||
|
|
||||||
const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
|
export const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
|
||||||
|
|
||||||
export default NoMenuLayout;
|
|
||||||
|
|
|
@ -1,10 +0,0 @@
|
||||||
@import '../utils/base';
|
|
||||||
|
|
||||||
.create-server__label {
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@media (min-width: $mdMin) {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,14 +1,14 @@
|
||||||
import { FC } from 'react';
|
import { FC, useEffect, useState } from 'react';
|
||||||
import { v4 as uuid } from 'uuid';
|
import { v4 as uuid } from 'uuid';
|
||||||
import { RouterProps } from 'react-router';
|
import { RouterProps } from 'react-router';
|
||||||
import { Button } from 'reactstrap';
|
import { Button } from 'reactstrap';
|
||||||
import { Result } from '../utils/Result';
|
import { Result } from '../utils/Result';
|
||||||
import NoMenuLayout from '../common/NoMenuLayout';
|
import { NoMenuLayout } from '../common/NoMenuLayout';
|
||||||
import { StateFlagTimeout } from '../utils/helpers/hooks';
|
import { StateFlagTimeout, useToggle } from '../utils/helpers/hooks';
|
||||||
import { ServerForm } from './helpers/ServerForm';
|
import { ServerForm } from './helpers/ServerForm';
|
||||||
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
||||||
import { ServerData, ServersMap, ServerWithId } from './data';
|
import { ServerData, ServersMap, ServerWithId } from './data';
|
||||||
import './CreateServer.scss';
|
import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
|
||||||
|
|
||||||
const SHOW_IMPORT_MSG_TIME = 4000;
|
const SHOW_IMPORT_MSG_TIME = 4000;
|
||||||
|
|
||||||
|
@ -32,16 +32,30 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
|
||||||
const hasServers = !!Object.keys(servers).length;
|
const hasServers = !!Object.keys(servers).length;
|
||||||
const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
|
const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
|
||||||
const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
|
const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
|
||||||
const handleSubmit = (serverData: ServerData) => {
|
const [ isConfirmModalOpen, toggleConfirmModal ] = useToggle();
|
||||||
|
const [ serverData, setServerData ] = useState<ServerData | undefined>();
|
||||||
|
const save = () => {
|
||||||
|
if (!serverData) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const id = uuid();
|
const id = uuid();
|
||||||
|
|
||||||
createServer({ ...serverData, id });
|
createServer({ ...serverData, id });
|
||||||
push(`/server/${id}`);
|
push(`/server/${id}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const serverExists = Object.values(servers).some(
|
||||||
|
({ url, apiKey }) => serverData?.url === url && serverData?.apiKey === apiKey,
|
||||||
|
);
|
||||||
|
|
||||||
|
serverExists ? toggleConfirmModal() : save();
|
||||||
|
}, [ serverData ]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NoMenuLayout>
|
<NoMenuLayout>
|
||||||
<ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
|
<ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={setServerData}>
|
||||||
{!hasServers &&
|
{!hasServers &&
|
||||||
<ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
|
<ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
|
||||||
{hasServers && <Button outline onClick={goBack}>Cancel</Button>}
|
{hasServers && <Button outline onClick={goBack}>Cancel</Button>}
|
||||||
|
@ -50,6 +64,13 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
|
||||||
|
|
||||||
{serversImported && <ImportResult type="success" />}
|
{serversImported && <ImportResult type="success" />}
|
||||||
{errorImporting && <ImportResult type="error" />}
|
{errorImporting && <ImportResult type="error" />}
|
||||||
|
|
||||||
|
<DuplicatedServersModal
|
||||||
|
isOpen={isConfirmModalOpen}
|
||||||
|
duplicatedServers={serverData ? [ serverData ] : []}
|
||||||
|
onDiscard={goBack}
|
||||||
|
onSave={save}
|
||||||
|
/>
|
||||||
</NoMenuLayout>
|
</NoMenuLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import { Button } from 'reactstrap';
|
import { Button } from 'reactstrap';
|
||||||
import NoMenuLayout from '../common/NoMenuLayout';
|
import { NoMenuLayout } from '../common/NoMenuLayout';
|
||||||
import { ServerForm } from './helpers/ServerForm';
|
import { ServerForm } from './helpers/ServerForm';
|
||||||
import { withSelectedServer } from './helpers/withSelectedServer';
|
import { withSelectedServer } from './helpers/withSelectedServer';
|
||||||
import { isServerWithId, ServerData } from './data';
|
import { isServerWithId, ServerData } from './data';
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { Button, Row } from 'reactstrap';
|
||||||
import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons';
|
import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import NoMenuLayout from '../common/NoMenuLayout';
|
import { NoMenuLayout } from '../common/NoMenuLayout';
|
||||||
import { SimpleCard } from '../utils/SimpleCard';
|
import { SimpleCard } from '../utils/SimpleCard';
|
||||||
import SearchField from '../utils/SearchField';
|
import SearchField from '../utils/SearchField';
|
||||||
import { Result } from '../utils/Result';
|
import { Result } from '../utils/Result';
|
||||||
|
|
40
src/servers/helpers/DuplicatedServersModal.tsx
Normal file
40
src/servers/helpers/DuplicatedServersModal.tsx
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
import { FC, Fragment } from 'react';
|
||||||
|
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
|
||||||
|
import { ServerData } from '../data';
|
||||||
|
|
||||||
|
interface DuplicatedServersModalProps {
|
||||||
|
duplicatedServers: ServerData[];
|
||||||
|
isOpen: boolean;
|
||||||
|
onDiscard: () => void;
|
||||||
|
onSave: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DuplicatedServersModal: FC<DuplicatedServersModalProps> = (
|
||||||
|
{ isOpen, duplicatedServers, onDiscard, onSave },
|
||||||
|
) => {
|
||||||
|
const hasMultipleServers = duplicatedServers.length > 1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal centered isOpen={isOpen}>
|
||||||
|
<ModalHeader>Duplicated server{hasMultipleServers && 's'}</ModalHeader>
|
||||||
|
<ModalBody>
|
||||||
|
<p>{hasMultipleServers ? 'The next servers already exist:' : 'There is already a server with:'}</p>
|
||||||
|
<ul>
|
||||||
|
{duplicatedServers.map(({ url, apiKey }, index) => !hasMultipleServers ? (
|
||||||
|
<Fragment key={index}>
|
||||||
|
<li>URL: <b>{url}</b></li>
|
||||||
|
<li>API key: <b>{apiKey}</b></li>
|
||||||
|
</Fragment>
|
||||||
|
) : <li key={index}><b>{url}</b> - <b>{apiKey}</b></li>)}
|
||||||
|
</ul>
|
||||||
|
<span>
|
||||||
|
{hasMultipleServers ? 'Do you want to ignore duplicated servers' : 'Do you want to save this server anyway'}?
|
||||||
|
</span>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<Button color="link" onClick={onDiscard}>{hasMultipleServers ? 'Ignore duplicated' : 'Discard'}</Button>
|
||||||
|
<Button color="primary" onClick={onSave}>Save anyway</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,10 +1,12 @@
|
||||||
import { useRef, RefObject, ChangeEvent, MutableRefObject, FC } from 'react';
|
import { useRef, RefObject, ChangeEvent, MutableRefObject, FC, useState, useEffect } from 'react';
|
||||||
import { Button, UncontrolledTooltip } from 'reactstrap';
|
import { Button, UncontrolledTooltip } from 'reactstrap';
|
||||||
import { pipe } from 'ramda';
|
import { complement, pipe } from 'ramda';
|
||||||
import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
|
import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import ServersImporter from '../services/ServersImporter';
|
import { useToggle } from '../../utils/helpers/hooks';
|
||||||
import { ServerData } from '../data';
|
import { ServersImporter } from '../services/ServersImporter';
|
||||||
|
import { ServerData, ServersMap } from '../data';
|
||||||
|
import { DuplicatedServersModal } from './DuplicatedServersModal';
|
||||||
import './ImportServersBtn.scss';
|
import './ImportServersBtn.scss';
|
||||||
|
|
||||||
type Ref<T> = RefObject<T> | MutableRefObject<T>;
|
type Ref<T> = RefObject<T> | MutableRefObject<T>;
|
||||||
|
@ -18,11 +20,16 @@ export interface ImportServersBtnProps {
|
||||||
|
|
||||||
interface ImportServersBtnConnectProps extends ImportServersBtnProps {
|
interface ImportServersBtnConnectProps extends ImportServersBtnProps {
|
||||||
createServers: (servers: ServerData[]) => void;
|
createServers: (servers: ServerData[]) => void;
|
||||||
|
servers: ServersMap;
|
||||||
fileRef: Ref<HTMLInputElement>;
|
fileRef: Ref<HTMLInputElement>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const serversFiltering = (servers: ServerData[]) =>
|
||||||
|
({ url, apiKey }: ServerData) => servers.some((server) => server.url === url && server.apiKey === apiKey);
|
||||||
|
|
||||||
const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<ImportServersBtnConnectProps> => ({
|
const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<ImportServersBtnConnectProps> => ({
|
||||||
createServers,
|
createServers,
|
||||||
|
servers,
|
||||||
fileRef,
|
fileRef,
|
||||||
children,
|
children,
|
||||||
onImport = () => {},
|
onImport = () => {},
|
||||||
|
@ -31,15 +38,37 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
|
||||||
className = '',
|
className = '',
|
||||||
}) => {
|
}) => {
|
||||||
const ref = fileRef ?? useRef<HTMLInputElement>();
|
const ref = fileRef ?? useRef<HTMLInputElement>();
|
||||||
const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
|
const [ serversToCreate, setServersToCreate ] = useState<ServerData[] | undefined>();
|
||||||
|
const [ duplicatedServers, setDuplicatedServers ] = useState<ServerData[]>([]);
|
||||||
|
const [ isModalOpen,, showModal, hideModal ] = useToggle();
|
||||||
|
const create = pipe(createServers, onImport);
|
||||||
|
const createAllServers = pipe(() => create(serversToCreate ?? []), hideModal);
|
||||||
|
const createNonDuplicatedServers = pipe(
|
||||||
|
() => create((serversToCreate ?? []).filter(complement(serversFiltering(duplicatedServers)))),
|
||||||
|
hideModal,
|
||||||
|
);
|
||||||
|
const onFile = async ({ target }: ChangeEvent<HTMLInputElement>) =>
|
||||||
importServersFromFile(target.files?.[0])
|
importServersFromFile(target.files?.[0])
|
||||||
.then(pipe(createServers, onImport))
|
.then(setServersToCreate)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// Reset input after processing file
|
// Reset input after processing file
|
||||||
(target as { value: string | null }).value = null;
|
(target as { value: string | null }).value = null;
|
||||||
})
|
})
|
||||||
.catch(onImportError);
|
.catch(onImportError);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!serversToCreate) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingServers = Object.values(servers);
|
||||||
|
const duplicatedServers = serversToCreate.filter(serversFiltering(existingServers));
|
||||||
|
const hasDuplicatedServers = !!duplicatedServers.length;
|
||||||
|
|
||||||
|
!hasDuplicatedServers ? create(serversToCreate) : setDuplicatedServers(duplicatedServers);
|
||||||
|
hasDuplicatedServers && showModal();
|
||||||
|
}, [ serversToCreate ]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Button outline id="importBtn" className={className} onClick={() => ref.current?.click()}>
|
<Button outline id="importBtn" className={className} onClick={() => ref.current?.click()}>
|
||||||
|
@ -49,7 +78,14 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
|
||||||
You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
|
You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
|
||||||
</UncontrolledTooltip>
|
</UncontrolledTooltip>
|
||||||
|
|
||||||
<input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onChange} />
|
<input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onFile} />
|
||||||
|
|
||||||
|
<DuplicatedServersModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
duplicatedServers={duplicatedServers}
|
||||||
|
onDiscard={createNonDuplicatedServers}
|
||||||
|
onSave={createAllServers}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,7 +4,7 @@ import Message from '../../utils/Message';
|
||||||
import ServersListGroup from '../ServersListGroup';
|
import ServersListGroup from '../ServersListGroup';
|
||||||
import { DeleteServerButtonProps } from '../DeleteServerButton';
|
import { DeleteServerButtonProps } from '../DeleteServerButton';
|
||||||
import { isServerWithId, SelectedServer, ServersMap } from '../data';
|
import { isServerWithId, SelectedServer, ServersMap } from '../data';
|
||||||
import NoMenuLayout from '../../common/NoMenuLayout';
|
import { NoMenuLayout } from '../../common/NoMenuLayout';
|
||||||
import './ServerError.scss';
|
import './ServerError.scss';
|
||||||
|
|
||||||
interface ServerErrorProps {
|
interface ServerErrorProps {
|
||||||
|
|
|
@ -1,3 +1,10 @@
|
||||||
|
@import '../../utils/base';
|
||||||
|
|
||||||
.server-form .form-group:last-child {
|
.server-form .form-group:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.server-form__label {
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
|
@ -12,7 +12,7 @@ interface ServerFormProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const FormGroup: FC<FormGroupContainerProps> = (props) =>
|
const FormGroup: FC<FormGroupContainerProps> = (props) =>
|
||||||
<FormGroupContainer {...props} labelClassName="create-server__label" />;
|
<FormGroupContainer {...props} labelClassName="server-form__label" />;
|
||||||
|
|
||||||
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
|
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
|
||||||
const [ name, setName ] = useState('');
|
const [ name, setName ] = useState('');
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { FC, useEffect } from 'react';
|
||||||
import { RouteComponentProps } from 'react-router';
|
import { RouteComponentProps } from 'react-router';
|
||||||
import Message from '../../utils/Message';
|
import Message from '../../utils/Message';
|
||||||
import { isNotFoundServer, SelectedServer } from '../data';
|
import { isNotFoundServer, SelectedServer } from '../data';
|
||||||
import NoMenuLayout from '../../common/NoMenuLayout';
|
import { NoMenuLayout } from '../../common/NoMenuLayout';
|
||||||
|
|
||||||
interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
|
interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
|
||||||
selectServer: (serverId: string) => void;
|
selectServer: (serverId: string) => void;
|
||||||
|
|
|
@ -7,7 +7,7 @@ const validateServer = (server: any): server is ServerData =>
|
||||||
const validateServers = (servers: any): servers is ServerData[] =>
|
const validateServers = (servers: any): servers is ServerData[] =>
|
||||||
Array.isArray(servers) && servers.every(validateServer);
|
Array.isArray(servers) && servers.every(validateServer);
|
||||||
|
|
||||||
export default class ServersImporter {
|
export class ServersImporter {
|
||||||
public constructor(private readonly csvJson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
|
public constructor(private readonly csvJson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
|
||||||
|
|
||||||
public readonly importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {
|
public readonly importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {
|
||||||
|
|
|
@ -17,7 +17,7 @@ import { Overview } from '../Overview';
|
||||||
import { ManageServers } from '../ManageServers';
|
import { ManageServers } from '../ManageServers';
|
||||||
import { ManageServersRow } from '../ManageServersRow';
|
import { ManageServersRow } from '../ManageServersRow';
|
||||||
import { ManageServersRowDropdown } from '../ManageServersRowDropdown';
|
import { ManageServersRowDropdown } from '../ManageServersRowDropdown';
|
||||||
import ServersImporter from './ServersImporter';
|
import { ServersImporter } from './ServersImporter';
|
||||||
import ServersExporter from './ServersExporter';
|
import ServersExporter from './ServersExporter';
|
||||||
|
|
||||||
const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
|
const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
|
||||||
|
@ -54,7 +54,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
|
||||||
bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');
|
bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');
|
||||||
|
|
||||||
bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
|
bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
|
||||||
bottle.decorator('ImportServersBtn', connect(null, [ 'createServers' ]));
|
bottle.decorator('ImportServersBtn', connect([ 'servers' ], [ 'createServers' ]));
|
||||||
|
|
||||||
bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
|
bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
|
||||||
bottle.decorator('ForServerVersion', connect([ 'selectedServer' ]));
|
bottle.decorator('ForServerVersion', connect([ 'selectedServer' ]));
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { FC, ReactNode } from 'react';
|
import { FC, ReactNode } from 'react';
|
||||||
import { Row } from 'reactstrap';
|
import { Row } from 'reactstrap';
|
||||||
import NoMenuLayout from '../common/NoMenuLayout';
|
import { NoMenuLayout } from '../common/NoMenuLayout';
|
||||||
|
|
||||||
const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
|
const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { Route } from 'react-router-dom';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import createMenuLayout from '../../src/common/MenuLayout';
|
import createMenuLayout from '../../src/common/MenuLayout';
|
||||||
import { NonReachableServer, NotFoundServer, ReachableServer, SelectedServer } from '../../src/servers/data';
|
import { NonReachableServer, NotFoundServer, ReachableServer, SelectedServer } from '../../src/servers/data';
|
||||||
import NoMenuLayout from '../../src/common/NoMenuLayout';
|
import { NoMenuLayout } from '../../src/common/NoMenuLayout';
|
||||||
import { SemVer } from '../../src/utils/helpers/version';
|
import { SemVer } from '../../src/utils/helpers/version';
|
||||||
|
|
||||||
describe('<MenuLayout />', () => {
|
describe('<MenuLayout />', () => {
|
||||||
|
|
|
@ -4,18 +4,21 @@ import { History } from 'history';
|
||||||
import createServerConstruct from '../../src/servers/CreateServer';
|
import createServerConstruct from '../../src/servers/CreateServer';
|
||||||
import { ServerForm } from '../../src/servers/helpers/ServerForm';
|
import { ServerForm } from '../../src/servers/helpers/ServerForm';
|
||||||
import { ServerWithId } from '../../src/servers/data';
|
import { ServerWithId } from '../../src/servers/data';
|
||||||
|
import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal';
|
||||||
|
|
||||||
describe('<CreateServer />', () => {
|
describe('<CreateServer />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
let wrapper: ShallowWrapper;
|
||||||
const ImportServersBtn = () => null;
|
const ImportServersBtn = () => null;
|
||||||
const createServerMock = jest.fn();
|
const createServerMock = jest.fn();
|
||||||
const push = jest.fn();
|
const push = jest.fn();
|
||||||
const historyMock = Mock.of<History>({ push });
|
const goBack = jest.fn();
|
||||||
|
const historyMock = Mock.of<History>({ push, goBack });
|
||||||
const servers = { foo: Mock.all<ServerWithId>() };
|
const servers = { foo: Mock.all<ServerWithId>() };
|
||||||
const createWrapper = (serversImported = false, importFailed = false) => {
|
const createWrapper = (serversImported = false, importFailed = false) => {
|
||||||
const useStateFlagTimeout = jest.fn()
|
const useStateFlagTimeout = jest.fn()
|
||||||
.mockReturnValueOnce([ serversImported, () => '' ])
|
.mockReturnValueOnce([ serversImported, () => '' ])
|
||||||
.mockReturnValueOnce([ importFailed, () => '' ]);
|
.mockReturnValueOnce([ importFailed, () => '' ])
|
||||||
|
.mockReturnValue([]);
|
||||||
const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout);
|
const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout);
|
||||||
|
|
||||||
wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} servers={servers} />);
|
wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} servers={servers} />);
|
||||||
|
@ -23,10 +26,8 @@ describe('<CreateServer />', () => {
|
||||||
return wrapper;
|
return wrapper;
|
||||||
};
|
};
|
||||||
|
|
||||||
afterEach(() => {
|
beforeEach(jest.clearAllMocks);
|
||||||
jest.resetAllMocks();
|
afterEach(() => wrapper?.unmount());
|
||||||
wrapper?.unmount();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders components', () => {
|
it('renders components', () => {
|
||||||
const wrapper = createWrapper();
|
const wrapper = createWrapper();
|
||||||
|
@ -51,13 +52,30 @@ describe('<CreateServer />', () => {
|
||||||
expect(result.prop('type')).toEqual('error');
|
expect(result.prop('type')).toEqual('error');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('creates server and redirects to it when form is submitted', () => {
|
it('creates server data when form is submitted', () => {
|
||||||
const wrapper = createWrapper();
|
const wrapper = createWrapper();
|
||||||
const form = wrapper.find(ServerForm);
|
const form = wrapper.find(ServerForm);
|
||||||
|
|
||||||
|
expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([]);
|
||||||
form.simulate('submit', {});
|
form.simulate('submit', {});
|
||||||
|
expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([{}]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('saves server and redirects on modal save', () => {
|
||||||
|
const wrapper = createWrapper();
|
||||||
|
|
||||||
|
wrapper.find(ServerForm).simulate('submit', {});
|
||||||
|
wrapper.find(DuplicatedServersModal).simulate('save');
|
||||||
|
|
||||||
expect(createServerMock).toHaveBeenCalledTimes(1);
|
expect(createServerMock).toHaveBeenCalledTimes(1);
|
||||||
expect(push).toHaveBeenCalledTimes(1);
|
expect(push).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('goes back on modal discard', () => {
|
||||||
|
const wrapper = createWrapper();
|
||||||
|
|
||||||
|
wrapper.find(DuplicatedServersModal).simulate('discard');
|
||||||
|
|
||||||
|
expect(goBack).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
106
test/servers/helpers/DuplicatedServersModal.test.tsx
Normal file
106
test/servers/helpers/DuplicatedServersModal.test.tsx
Normal file
|
@ -0,0 +1,106 @@
|
||||||
|
import { shallow, ShallowWrapper } from 'enzyme';
|
||||||
|
import { Mock } from 'ts-mockery';
|
||||||
|
import { Button, ModalHeader } from 'reactstrap';
|
||||||
|
import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
|
||||||
|
import { ServerData } from '../../../src/servers/data';
|
||||||
|
|
||||||
|
describe('<DuplicatedServersModal />', () => {
|
||||||
|
const onDiscard = jest.fn();
|
||||||
|
const onSave = jest.fn();
|
||||||
|
let wrapper: ShallowWrapper;
|
||||||
|
const createWrapper = (duplicatedServers: ServerData[] = []) => {
|
||||||
|
wrapper = shallow(
|
||||||
|
<DuplicatedServersModal isOpen duplicatedServers={duplicatedServers} onDiscard={onDiscard} onSave={onSave} />,
|
||||||
|
);
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
};
|
||||||
|
|
||||||
|
beforeEach(jest.clearAllMocks);
|
||||||
|
afterEach(() => wrapper?.unmount());
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
[[], 0 ],
|
||||||
|
[[ Mock.all<ServerData>() ], 2 ],
|
||||||
|
[[ Mock.all<ServerData>(), Mock.all<ServerData>() ], 2 ],
|
||||||
|
[[ Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>() ], 3 ],
|
||||||
|
[[ Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>() ], 4 ],
|
||||||
|
])('renders expected amount of items', (duplicatedServers, expectedItems) => {
|
||||||
|
const wrapper = createWrapper(duplicatedServers);
|
||||||
|
const li = wrapper.find('li');
|
||||||
|
|
||||||
|
expect(li).toHaveLength(expectedItems);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
[
|
||||||
|
[ Mock.all<ServerData>() ],
|
||||||
|
{
|
||||||
|
header: 'Duplicated server',
|
||||||
|
firstParagraph: 'There is already a server with:',
|
||||||
|
lastParagraph: 'Do you want to save this server anyway?',
|
||||||
|
discardBtn: 'Discard',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
[ Mock.all<ServerData>(), Mock.all<ServerData>() ],
|
||||||
|
{
|
||||||
|
header: 'Duplicated servers',
|
||||||
|
firstParagraph: 'The next servers already exist:',
|
||||||
|
lastParagraph: 'Do you want to ignore duplicated servers?',
|
||||||
|
discardBtn: 'Ignore duplicated',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
])('renders expected texts based on amount of servers', (duplicatedServers, assertions) => {
|
||||||
|
const wrapper = createWrapper(duplicatedServers);
|
||||||
|
const header = wrapper.find(ModalHeader);
|
||||||
|
const p = wrapper.find('p');
|
||||||
|
const span = wrapper.find('span');
|
||||||
|
const discardBtn = wrapper.find(Button).first();
|
||||||
|
|
||||||
|
expect(header.html()).toContain(assertions.header);
|
||||||
|
expect(p.html()).toContain(assertions.firstParagraph);
|
||||||
|
expect(span.html()).toContain(assertions.lastParagraph);
|
||||||
|
expect(discardBtn.html()).toContain(assertions.discardBtn);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
[[]],
|
||||||
|
[[ Mock.of<ServerData>({ url: 'url', apiKey: 'apiKey' }) ]],
|
||||||
|
])('displays provided server data', (duplicatedServers) => {
|
||||||
|
const wrapper = createWrapper(duplicatedServers);
|
||||||
|
const li = wrapper.find('li');
|
||||||
|
|
||||||
|
if (duplicatedServers.length === 0) {
|
||||||
|
expect(li).toHaveLength(0);
|
||||||
|
} else if (duplicatedServers.length === 1) {
|
||||||
|
expect(li.first().find('b').html()).toEqual(`<b>${duplicatedServers[0].url}</b>`);
|
||||||
|
expect(li.last().find('b').html()).toEqual(`<b>${duplicatedServers[0].apiKey}</b>`);
|
||||||
|
} else {
|
||||||
|
expect.assertions(duplicatedServers.length);
|
||||||
|
li.forEach((item, index) => {
|
||||||
|
const server = duplicatedServers[index];
|
||||||
|
|
||||||
|
expect(item.html()).toContain(`<b>${server.url}</b> - <b>${server.apiKey}</b>`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it('invokes onDiscard when appropriate button is clicked', () => {
|
||||||
|
const wrapper = createWrapper();
|
||||||
|
const btn = wrapper.find(Button).first();
|
||||||
|
|
||||||
|
btn.simulate('click');
|
||||||
|
|
||||||
|
expect(onDiscard).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('invokes onSave when appropriate button is clicked', () => {
|
||||||
|
const wrapper = createWrapper();
|
||||||
|
const btn = wrapper.find(Button).last();
|
||||||
|
|
||||||
|
btn.simulate('click');
|
||||||
|
|
||||||
|
expect(onSave).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
|
@ -2,8 +2,9 @@ import { ReactNode } from 'react';
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { shallow, ShallowWrapper } from 'enzyme';
|
||||||
import { UncontrolledTooltip } from 'reactstrap';
|
import { UncontrolledTooltip } from 'reactstrap';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import importServersBtnConstruct from '../../../src/servers/helpers/ImportServersBtn';
|
import importServersBtnConstruct, { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
|
||||||
import ServersImporter from '../../../src/servers/services/ServersImporter';
|
import { ServersImporter } from '../../../src/servers/services/ServersImporter';
|
||||||
|
import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
|
||||||
|
|
||||||
describe('<ImportServersBtn />', () => {
|
describe('<ImportServersBtn />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
let wrapper: ShallowWrapper;
|
||||||
|
@ -12,17 +13,15 @@ describe('<ImportServersBtn />', () => {
|
||||||
const importServersFromFile = jest.fn().mockResolvedValue([]);
|
const importServersFromFile = jest.fn().mockResolvedValue([]);
|
||||||
const serversImporterMock = Mock.of<ServersImporter>({ importServersFromFile });
|
const serversImporterMock = Mock.of<ServersImporter>({ importServersFromFile });
|
||||||
const click = jest.fn();
|
const click = jest.fn();
|
||||||
const fileRef = {
|
const fileRef = { current: Mock.of<HTMLInputElement>({ click }) };
|
||||||
current: Mock.of<HTMLInputElement>({ click }),
|
|
||||||
};
|
|
||||||
const ImportServersBtn = importServersBtnConstruct(serversImporterMock);
|
const ImportServersBtn = importServersBtnConstruct(serversImporterMock);
|
||||||
const createWrapper = (className?: string, children?: ReactNode) => {
|
const createWrapper = (props: Partial<ImportServersBtnProps & { children: ReactNode }> = {}) => {
|
||||||
wrapper = shallow(
|
wrapper = shallow(
|
||||||
<ImportServersBtn
|
<ImportServersBtn
|
||||||
createServers={createServersMock}
|
servers={{}}
|
||||||
className={className}
|
{...props}
|
||||||
fileRef={fileRef}
|
fileRef={fileRef}
|
||||||
children={children}
|
createServers={createServersMock}
|
||||||
onImport={onImportMock}
|
onImport={onImportMock}
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
|
@ -46,7 +45,7 @@ describe('<ImportServersBtn />', () => {
|
||||||
[ 'foo', 'foo' ],
|
[ 'foo', 'foo' ],
|
||||||
[ 'bar', 'bar' ],
|
[ 'bar', 'bar' ],
|
||||||
])('allows a class name to be provided', (providedClassName, expectedClassName) => {
|
])('allows a class name to be provided', (providedClassName, expectedClassName) => {
|
||||||
const wrapper = createWrapper(providedClassName);
|
const wrapper = createWrapper({ className: providedClassName });
|
||||||
|
|
||||||
expect(wrapper.find('#importBtn').prop('className')).toEqual(expectedClassName);
|
expect(wrapper.find('#importBtn').prop('className')).toEqual(expectedClassName);
|
||||||
});
|
});
|
||||||
|
@ -56,7 +55,7 @@ describe('<ImportServersBtn />', () => {
|
||||||
[ 'foo', false ],
|
[ 'foo', false ],
|
||||||
[ 'bar', false ],
|
[ 'bar', false ],
|
||||||
])('has expected text', (children, expectToHaveDefaultText) => {
|
])('has expected text', (children, expectToHaveDefaultText) => {
|
||||||
const wrapper = createWrapper(undefined, children);
|
const wrapper = createWrapper({ children });
|
||||||
|
|
||||||
if (expectToHaveDefaultText) {
|
if (expectToHaveDefaultText) {
|
||||||
expect(wrapper.find('#importBtn').html()).toContain('Import from file');
|
expect(wrapper.find('#importBtn').html()).toContain('Import from file');
|
||||||
|
@ -82,6 +81,16 @@ describe('<ImportServersBtn />', () => {
|
||||||
await file.simulate('change', { target: { files: [ '' ] } }); // eslint-disable-line @typescript-eslint/await-thenable
|
await file.simulate('change', { target: { files: [ '' ] } }); // eslint-disable-line @typescript-eslint/await-thenable
|
||||||
|
|
||||||
expect(importServersFromFile).toHaveBeenCalledTimes(1);
|
expect(importServersFromFile).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
[ 'discard' ],
|
||||||
|
[ 'save' ],
|
||||||
|
])('invokes callback in DuplicatedServersModal events', (event) => {
|
||||||
|
const wrapper = createWrapper();
|
||||||
|
|
||||||
|
wrapper.find(DuplicatedServersModal).simulate(event);
|
||||||
|
|
||||||
expect(createServersMock).toHaveBeenCalledTimes(1);
|
expect(createServersMock).toHaveBeenCalledTimes(1);
|
||||||
expect(onImportMock).toHaveBeenCalledTimes(1);
|
expect(onImportMock).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { CsvJson } from 'csvjson';
|
import { CsvJson } from 'csvjson';
|
||||||
import ServersImporter from '../../../src/servers/services/ServersImporter';
|
import { ServersImporter } from '../../../src/servers/services/ServersImporter';
|
||||||
import { RegularServer } from '../../../src/servers/data';
|
import { RegularServer } from '../../../src/servers/data';
|
||||||
|
|
||||||
describe('ServersImporter', () => {
|
describe('ServersImporter', () => {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
import createSettings from '../../src/settings/Settings';
|
import createSettings from '../../src/settings/Settings';
|
||||||
import NoMenuLayout from '../../src/common/NoMenuLayout';
|
import { NoMenuLayout } from '../../src/common/NoMenuLayout';
|
||||||
|
|
||||||
describe('<Settings />', () => {
|
describe('<Settings />', () => {
|
||||||
const Component = () => null;
|
const Component = () => null;
|
||||||
|
|
Loading…
Reference in a new issue