diff --git a/src/common/MainHeader.tsx b/src/common/MainHeader.tsx index 54faa970..be06d9d0 100644 --- a/src/common/MainHeader.tsx +++ b/src/common/MainHeader.tsx @@ -1,4 +1,4 @@ -import { faPlus as plusIcon, faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons'; +import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FC, useEffect } from 'react'; import { Link } from 'react-router-dom'; @@ -15,7 +15,6 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) useEffect(close, [ location ]); - const createServerPath = '/server/create'; const settingsPath = '/settings'; const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen }); @@ -32,15 +31,10 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx index a787c467..81045e42 100644 --- a/src/servers/ServersDropdown.tsx +++ b/src/servers/ServersDropdown.tsx @@ -1,6 +1,8 @@ import { isEmpty, values } from 'ramda'; import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'; import { Link } from 'react-router-dom'; +import { faPlus as plusIcon, faFileDownload as exportIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import ServersExporter from './services/ServersExporter'; import { isServerWithId, SelectedServer, ServersMap } from './data'; @@ -11,10 +13,15 @@ export interface ServersDropdownProps { const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, selectedServer }: ServersDropdownProps) => { const serversList = values(servers); + const createServerItem = ( + + Add server + + ); const renderServers = () => { if (isEmpty(serversList)) { - return Add a server first...; + return createServerItem; } return ( @@ -30,8 +37,9 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select ))} + {createServerItem} serversExporter.exportServers()}> - Export servers + Export servers ); @@ -39,7 +47,9 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select return ( - Servers + + Servers + {renderServers()} ); diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx index 9d7f285a..acc2eb45 100644 --- a/test/servers/ServersDropdown.test.tsx +++ b/test/servers/ServersDropdown.test.tsx @@ -22,8 +22,8 @@ describe('', () => { }); afterEach(() => wrapped.unmount()); - it('contains the list of servers, the divider and the export button', () => - expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2)); + it('contains the list of servers, the divider, the create button and the export button', () => + expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 3)); it('contains a toggle with proper title', () => expect(wrapped.find(DropdownToggle)).toHaveLength(1)); @@ -35,14 +35,14 @@ describe('', () => { expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1); }); - it('shows a message when no servers exist yet', () => { + it('shows only create link when no servers exist yet', () => { wrapped = shallow( , ); const item = wrapped.find(DropdownItem); expect(item).toHaveLength(1); - expect(item.prop('disabled')).toEqual(true); - expect(item.find('i').text()).toEqual('Add a server first...'); + expect(item.prop('to')).toEqual('/server/create'); + expect(item.find('span').text()).toContain('Add server'); }); });