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');
});
});