diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx index 2ee329cd..e24e548c 100644 --- a/src/servers/CreateServer.tsx +++ b/src/servers/CreateServer.tsx @@ -27,7 +27,7 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => ( ); const CreateServer = (ImportServersBtn: FC, useStateFlagTimeout: StateFlagTimeout) => ( - { servers, createServer, history: { push } }: CreateServerProps, + { servers, createServer, history: { push, goBack } }: CreateServerProps, ) => { const hasServers = !!Object.keys(servers).length; const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME); @@ -44,6 +44,7 @@ const CreateServer = (ImportServersBtn: FC, useStateFlagT Add new server} onSubmit={handleSubmit}> {!hasServers && } + {hasServers && } diff --git a/src/servers/EditServer.tsx b/src/servers/EditServer.tsx index f18c788d..f6576066 100644 --- a/src/servers/EditServer.tsx +++ b/src/servers/EditServer.tsx @@ -10,7 +10,7 @@ interface EditServerProps { } export const EditServer = (ServerError: FC) => withSelectedServer(( - { editServer, selectedServer, history: { push, goBack } }, + { editServer, selectedServer, history: { goBack } }, ) => { if (!isServerWithId(selectedServer)) { return null; @@ -18,7 +18,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer { editServer(selectedServer.id, serverData); - push(`/server/${selectedServer.id}`); + goBack(); }; return ( diff --git a/src/servers/ManageServers.tsx b/src/servers/ManageServers.tsx index 78d1259b..3f69e43a 100644 --- a/src/servers/ManageServers.tsx +++ b/src/servers/ManageServers.tsx @@ -1,5 +1,5 @@ import { FC, useEffect, useState } from 'react'; -import { Button } from 'reactstrap'; +import { Button, Row } from 'reactstrap'; import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Link } from 'react-router-dom'; @@ -41,15 +41,19 @@ export const ManageServers = ( -
- - - -
+ +
+ + +
+
+ +
+
diff --git a/src/servers/ManageServersRow.tsx b/src/servers/ManageServersRow.tsx index 306ef719..03ca9cae 100644 --- a/src/servers/ManageServersRow.tsx +++ b/src/servers/ManageServersRow.tsx @@ -54,7 +54,7 @@ export const ManageServersRow = ( Edit server - {isAutoConnect ? 'Unset' : 'Set'} auto-connect + {isAutoConnect ? 'Do not a' : 'A'}uto-connect diff --git a/src/servers/helpers/ImportServersBtn.tsx b/src/servers/helpers/ImportServersBtn.tsx index 869b661f..c9e150a5 100644 --- a/src/servers/helpers/ImportServersBtn.tsx +++ b/src/servers/helpers/ImportServersBtn.tsx @@ -12,6 +12,7 @@ export interface ImportServersBtnProps { onImport?: () => void; onImportError?: (error: Error) => void; tooltipPlacement?: 'top' | 'bottom'; + className?: string; } interface ImportServersBtnConnectProps extends ImportServersBtnProps { @@ -25,6 +26,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({ onImport = () => {}, onImportError = () => {}, tooltipPlacement = 'bottom', + className = '', }: ImportServersBtnConnectProps) => { const ref = fileRef ?? useRef(); const onChange = async ({ target }: ChangeEvent) => @@ -39,7 +41,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({ return ( <> - diff --git a/test/servers/EditServer.test.tsx b/test/servers/EditServer.test.tsx index c74cb72c..4f6a65da 100644 --- a/test/servers/EditServer.test.tsx +++ b/test/servers/EditServer.test.tsx @@ -10,8 +10,8 @@ describe('', () => { let wrapper: ReactWrapper; const ServerError = jest.fn(); const editServerMock = jest.fn(); - const push = jest.fn(); - const historyMock = Mock.of({ push }); + const goBack = jest.fn(); + const historyMock = Mock.of({ goBack }); const match = Mock.of>({ params: { serverId: 'abc123' }, }); @@ -50,6 +50,6 @@ describe('', () => { form.simulate('submit', {}); expect(editServerMock).toHaveBeenCalledTimes(1); - expect(push).toHaveBeenCalledTimes(1); + expect(goBack).toHaveBeenCalledTimes(1); }); }); diff --git a/test/servers/helpers/ImportServersBtn.test.tsx b/test/servers/helpers/ImportServersBtn.test.tsx index da5b4941..dd8471be 100644 --- a/test/servers/helpers/ImportServersBtn.test.tsx +++ b/test/servers/helpers/ImportServersBtn.test.tsx @@ -15,25 +15,43 @@ describe('', () => { const fileRef = { current: Mock.of({ click }), }; - - beforeEach(() => { - jest.clearAllMocks(); - - const ImportServersBtn = importServersBtnConstruct(serversImporterMock); - + const ImportServersBtn = importServersBtnConstruct(serversImporterMock); + const createWrapper = (className?: string) => { wrapper = shallow( - , + , ); - }); + + return wrapper; + }; + + afterEach(jest.clearAllMocks); afterEach(() => wrapper.unmount()); it('renders a button, a tooltip and a file input', () => { + const wrapper = createWrapper(); + expect(wrapper.find('#importBtn')).toHaveLength(1); expect(wrapper.find(UncontrolledTooltip)).toHaveLength(1); expect(wrapper.find('.import-servers-btn__csv-select')).toHaveLength(1); }); + it.each([ + [ undefined, '' ], + [ 'foo', 'foo' ], + [ 'bar', 'bar' ], + ])('allows a class name to be provided', (providedClassName, expectedClassName) => { + const wrapper = createWrapper(providedClassName); + + expect(wrapper.find('#importBtn').prop('className')).toEqual(expectedClassName); + }); + it('triggers click on file ref when button is clicked', () => { + const wrapper = createWrapper(); const btn = wrapper.find('#importBtn'); btn.simulate('click'); @@ -42,6 +60,7 @@ describe('', () => { }); it('imports servers when file input changes', (done) => { + const wrapper = createWrapper(); const file = wrapper.find('.import-servers-btn__csv-select'); file.simulate('change', { target: { files: [ '' ] } });