mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Update CreateServer logic so that it ensures a unique human-friendly ID is set
This commit is contained in:
parent
9134d07969
commit
e786f9d21f
7 changed files with 76 additions and 47 deletions
|
@ -50,8 +50,8 @@ const App: FCWithDeps<AppProps, AppDeps> = (
|
||||||
const isHome = location.pathname === '/';
|
const isHome = location.pathname === '/';
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Try to fetch the remote servers if the list is empty at first
|
// Try to fetch the remote servers if the list is empty during first render.
|
||||||
// We use a ref because we don't care if the servers list becomes empty later
|
// We use a ref because we don't care if the servers list becomes empty later.
|
||||||
if (Object.keys(initialServers.current).length === 0) {
|
if (Object.keys(initialServers.current).length === 0) {
|
||||||
fetchServers();
|
fetchServers();
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,8 +8,8 @@ import { NoMenuLayout } from '../common/NoMenuLayout';
|
||||||
import type { FCWithDeps } from '../container/utils';
|
import type { FCWithDeps } from '../container/utils';
|
||||||
import { componentFactory, useDependencies } from '../container/utils';
|
import { componentFactory, useDependencies } from '../container/utils';
|
||||||
import { useGoBack } from '../utils/helpers/hooks';
|
import { useGoBack } from '../utils/helpers/hooks';
|
||||||
import { randomUUID } from '../utils/utils';
|
|
||||||
import type { ServerData, ServersMap, ServerWithId } from './data';
|
import type { ServerData, ServersMap, ServerWithId } from './data';
|
||||||
|
import { ensureUniqueIds } from './helpers';
|
||||||
import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
|
import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
|
||||||
import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
||||||
import { ServerForm } from './helpers/ServerForm';
|
import { ServerForm } from './helpers/ServerForm';
|
||||||
|
@ -44,12 +44,12 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
|
||||||
const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
|
const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
|
||||||
const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
|
const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
|
||||||
const [serverData, setServerData] = useState<ServerData>();
|
const [serverData, setServerData] = useState<ServerData>();
|
||||||
const saveNewServer = useCallback((theServerData: ServerData) => {
|
const saveNewServer = useCallback((newServerData: ServerData) => {
|
||||||
const id = randomUUID();
|
const [newServerWithUniqueId] = ensureUniqueIds(servers, [newServerData]);
|
||||||
|
|
||||||
createServers([{ ...theServerData, id }]);
|
createServers([newServerWithUniqueId]);
|
||||||
navigate(`/server/${id}`);
|
navigate(`/server/${newServerWithUniqueId.id}`);
|
||||||
}, [createServers, navigate]);
|
}, [createServers, navigate, servers]);
|
||||||
const onSubmit = useCallback((newServerData: ServerData) => {
|
const onSubmit = useCallback((newServerData: ServerData) => {
|
||||||
setServerData(newServerData);
|
setServerData(newServerData);
|
||||||
|
|
||||||
|
|
|
@ -6,10 +6,10 @@ import { useCallback, useRef, useState } from 'react';
|
||||||
import { Button, UncontrolledTooltip } from 'reactstrap';
|
import { Button, UncontrolledTooltip } from 'reactstrap';
|
||||||
import type { FCWithDeps } from '../../container/utils';
|
import type { FCWithDeps } from '../../container/utils';
|
||||||
import { componentFactory, useDependencies } from '../../container/utils';
|
import { componentFactory, useDependencies } from '../../container/utils';
|
||||||
import type { ServerData, ServersMap } from '../data';
|
import type { ServerData, ServersMap, ServerWithId } from '../data';
|
||||||
import type { ServersImporter } from '../services/ServersImporter';
|
import type { ServersImporter } from '../services/ServersImporter';
|
||||||
import { DuplicatedServersModal } from './DuplicatedServersModal';
|
import { DuplicatedServersModal } from './DuplicatedServersModal';
|
||||||
import { dedupServers } from './index';
|
import { dedupServers, ensureUniqueIds } from './index';
|
||||||
|
|
||||||
export type ImportServersBtnProps = PropsWithChildren<{
|
export type ImportServersBtnProps = PropsWithChildren<{
|
||||||
onImport?: () => void;
|
onImport?: () => void;
|
||||||
|
@ -19,7 +19,7 @@ export type ImportServersBtnProps = PropsWithChildren<{
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
type ImportServersBtnConnectProps = ImportServersBtnProps & {
|
type ImportServersBtnConnectProps = ImportServersBtnProps & {
|
||||||
createServers: (servers: ServerData[]) => void;
|
createServers: (servers: ServerWithId[]) => void;
|
||||||
servers: ServersMap;
|
servers: ServersMap;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -41,10 +41,10 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
|
||||||
const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
|
const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
|
||||||
const [isModalOpen,, showModal, hideModal] = useToggle();
|
const [isModalOpen,, showModal, hideModal] = useToggle();
|
||||||
|
|
||||||
const importedServersRef = useRef<ServerData[]>([]);
|
const importedServersRef = useRef<ServerWithId[]>([]);
|
||||||
const newServersRef = useRef<ServerData[]>([]);
|
const newServersRef = useRef<ServerWithId[]>([]);
|
||||||
|
|
||||||
const create = useCallback((serversData: ServerData[]) => {
|
const create = useCallback((serversData: ServerWithId[]) => {
|
||||||
createServers(serversData);
|
createServers(serversData);
|
||||||
onImport();
|
onImport();
|
||||||
}, [createServers, onImport]);
|
}, [createServers, onImport]);
|
||||||
|
@ -54,11 +54,11 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
|
||||||
.then((importedServers) => {
|
.then((importedServers) => {
|
||||||
const { duplicatedServers, newServers } = dedupServers(servers, importedServers);
|
const { duplicatedServers, newServers } = dedupServers(servers, importedServers);
|
||||||
|
|
||||||
importedServersRef.current = importedServers;
|
importedServersRef.current = ensureUniqueIds(servers, importedServers);
|
||||||
newServersRef.current = newServers;
|
newServersRef.current = ensureUniqueIds(servers, newServers);
|
||||||
|
|
||||||
if (duplicatedServers.length === 0) {
|
if (duplicatedServers.length === 0) {
|
||||||
create(importedServers);
|
create(importedServersRef.current);
|
||||||
} else {
|
} else {
|
||||||
setDuplicatedServers(duplicatedServers);
|
setDuplicatedServers(duplicatedServers);
|
||||||
showModal();
|
showModal();
|
||||||
|
|
|
@ -6,24 +6,18 @@ import type { ServerData, ServersMap, ServerWithId } from '../data';
|
||||||
* in lowercase and replacing invalid URL characters with hyphens.
|
* in lowercase and replacing invalid URL characters with hyphens.
|
||||||
*/
|
*/
|
||||||
function idForServer(server: ServerData): string {
|
function idForServer(server: ServerData): string {
|
||||||
|
// TODO Handle invalid URLs. If not valid url, use the value as is
|
||||||
const url = new URL(server.url);
|
const url = new URL(server.url);
|
||||||
return `${server.name} ${url.host}`.toLowerCase().replace(/[^a-zA-Z0-9-_.~]/g, '-');
|
return `${server.name} ${url.host}`.toLowerCase().replace(/[^a-zA-Z0-9-_.~]/g, '-');
|
||||||
}
|
}
|
||||||
|
|
||||||
export function serverWithId(server: ServerWithId | ServerData): ServerWithId {
|
|
||||||
if ('id' in server) {
|
|
||||||
return server;
|
|
||||||
}
|
|
||||||
|
|
||||||
const id = idForServer(server);
|
|
||||||
return { ...server, id };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function serversListToMap(servers: ServerWithId[]): ServersMap {
|
export function serversListToMap(servers: ServerWithId[]): ServersMap {
|
||||||
return servers.reduce<ServersMap>(
|
const serversMap: ServersMap = {};
|
||||||
(acc, server) => ({ ...acc, [server.id]: server }),
|
servers.forEach((server) => {
|
||||||
{},
|
serversMap[server.id] = server;
|
||||||
);
|
});
|
||||||
|
|
||||||
|
return serversMap;
|
||||||
}
|
}
|
||||||
|
|
||||||
const serversInclude = (serversList: ServerData[], { url, apiKey }: ServerData) =>
|
const serversInclude = (serversList: ServerData[], { url, apiKey }: ServerData) =>
|
||||||
|
@ -48,3 +42,30 @@ export function dedupServers(servers: ServersMap, serversToAdd: ServerData[]): D
|
||||||
|
|
||||||
return { duplicatedServers, newServers };
|
return { duplicatedServers, newServers };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a servers map and a list of servers, return the same list of servers but all with an ID, ensuring the ID is
|
||||||
|
* unique both among all those servers and existing ones
|
||||||
|
*/
|
||||||
|
export function ensureUniqueIds(existingServers: ServersMap, serversList: ServerData[]): ServerWithId[] {
|
||||||
|
const existingIds = new Set(Object.keys(existingServers));
|
||||||
|
const serversWithId: ServerWithId[] = [];
|
||||||
|
|
||||||
|
serversList.forEach((server) => {
|
||||||
|
const baseId = idForServer(server);
|
||||||
|
|
||||||
|
let id = baseId;
|
||||||
|
let iterations = 1;
|
||||||
|
while (existingIds.has(id)) {
|
||||||
|
id = `${baseId}-${iterations}`;
|
||||||
|
iterations++;
|
||||||
|
}
|
||||||
|
|
||||||
|
serversWithId.push({ id, ...server });
|
||||||
|
|
||||||
|
// Add this server's ID to the list, so that it is taken into consideration for the next ones
|
||||||
|
existingIds.add(id);
|
||||||
|
});
|
||||||
|
|
||||||
|
return serversWithId;
|
||||||
|
}
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
import type { HttpClient } from '@shlinkio/shlink-js-sdk';
|
import type { HttpClient } from '@shlinkio/shlink-js-sdk';
|
||||||
import pack from '../../../package.json';
|
import pack from '../../../package.json';
|
||||||
import { createAsyncThunk } from '../../utils/helpers/redux';
|
import { createAsyncThunk } from '../../utils/helpers/redux';
|
||||||
import type { ServerData } from '../data';
|
|
||||||
import { hasServerData } from '../data';
|
import { hasServerData } from '../data';
|
||||||
|
import { ensureUniqueIds } from '../helpers';
|
||||||
import { createServers } from './servers';
|
import { createServers } from './servers';
|
||||||
|
|
||||||
const responseToServersList = (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []);
|
const responseToServersList = (data: any) => ensureUniqueIds(
|
||||||
|
{},
|
||||||
|
(Array.isArray(data) ? data.filter(hasServerData) : []),
|
||||||
|
);
|
||||||
|
|
||||||
export const fetchServers = (httpClient: HttpClient) => createAsyncThunk(
|
export const fetchServers = (httpClient: HttpClient) => createAsyncThunk(
|
||||||
'shlink/remoteServers/fetchServers',
|
'shlink/remoteServers/fetchServers',
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import type { PayloadAction } from '@reduxjs/toolkit';
|
import type { PayloadAction } from '@reduxjs/toolkit';
|
||||||
import { createSlice } from '@reduxjs/toolkit';
|
import { createSlice } from '@reduxjs/toolkit';
|
||||||
import type { ServerData, ServersMap, ServerWithId } from '../data';
|
import type { ServerData, ServersMap, ServerWithId } from '../data';
|
||||||
import { serversListToMap, serverWithId } from '../helpers';
|
import { serversListToMap } from '../helpers';
|
||||||
|
|
||||||
interface EditServer {
|
interface EditServer {
|
||||||
serverId: string;
|
serverId: string;
|
||||||
|
@ -57,10 +57,7 @@ export const { actions, reducer } = createSlice({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
createServers: {
|
createServers: {
|
||||||
prepare: (servers: ServerData[]) => {
|
prepare: (servers: ServerWithId[]) => ({ payload: serversListToMap(servers) }),
|
||||||
const payload = serversListToMap(servers.map(serverWithId));
|
|
||||||
return { payload };
|
|
||||||
},
|
|
||||||
reducer: (state, { payload: newServers }: PayloadAction<ServersMap>) => ({ ...state, ...newServers }),
|
reducer: (state, { payload: newServers }: PayloadAction<ServersMap>) => ({ ...state, ...newServers }),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { screen, waitFor } from '@testing-library/react';
|
import { screen, waitFor } from '@testing-library/react';
|
||||||
import { fromPartial } from '@total-typescript/shoehorn';
|
import { fromPartial } from '@total-typescript/shoehorn';
|
||||||
import type { ServersMap, ServerWithId } from '../../../src/servers/data';
|
import type { ServerData, ServersMap, ServerWithId } from '../../../src/servers/data';
|
||||||
import type {
|
import type {
|
||||||
ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
|
ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
|
||||||
import { ImportServersBtnFactory } from '../../../src/servers/helpers/ImportServersBtn';
|
import { ImportServersBtnFactory } from '../../../src/servers/helpers/ImportServersBtn';
|
||||||
|
@ -65,22 +65,30 @@ describe('<ImportServersBtn />', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each([
|
it.each([
|
||||||
['Save anyway', true],
|
{ btnName: 'Save anyway',savesDuplicatedServers: true },
|
||||||
['Discard', false],
|
{ btnName: 'Discard', savesDuplicatedServers: false },
|
||||||
])('creates expected servers depending on selected option in modal', async (btnName, savesDuplicatedServers) => {
|
])('creates expected servers depending on selected option in modal', async ({ btnName, savesDuplicatedServers }) => {
|
||||||
const existingServer = fromPartial<ServerWithId>({ id: 'abc', url: 'existingUrl', apiKey: 'existingApiKey' });
|
const existingServer: ServerWithId = {
|
||||||
const newServer = fromPartial<ServerWithId>({ url: 'newUrl', apiKey: 'newApiKey' });
|
name: 'existingServer',
|
||||||
const { user } = setUp({}, { abc: existingServer });
|
id: 'existingserver-s.test',
|
||||||
const input = screen.getByTestId('csv-file-input');
|
url: 'http://s.test/existingUrl',
|
||||||
|
apiKey: 'existingApiKey',
|
||||||
|
};
|
||||||
|
const newServer: ServerData = { name: 'newServer', url: 'http://s.test/newUrl', apiKey: 'newApiKey' };
|
||||||
|
const { user } = setUp({}, { [existingServer.id]: existingServer });
|
||||||
|
|
||||||
importServersFromFile.mockResolvedValue([existingServer, newServer]);
|
importServersFromFile.mockResolvedValue([existingServer, newServer]);
|
||||||
|
|
||||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||||
await user.upload(input, csvFile);
|
await user.upload(screen.getByTestId('csv-file-input'), csvFile);
|
||||||
expect(screen.getByRole('dialog')).toBeInTheDocument();
|
expect(screen.getByRole('dialog')).toBeInTheDocument();
|
||||||
await user.click(screen.getByRole('button', { name: btnName }));
|
await user.click(screen.getByRole('button', { name: btnName }));
|
||||||
|
|
||||||
expect(createServersMock).toHaveBeenCalledWith(savesDuplicatedServers ? [existingServer, newServer] : [newServer]);
|
expect(createServersMock).toHaveBeenCalledWith(
|
||||||
|
savesDuplicatedServers
|
||||||
|
? [existingServer, expect.objectContaining(newServer)]
|
||||||
|
: [expect.objectContaining(newServer)],
|
||||||
|
);
|
||||||
expect(onImportMock).toHaveBeenCalledTimes(1);
|
expect(onImportMock).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue