feat(network): add create buttons to network list

src/components/network/NetworkList.module.less

@@ -6,22 +6,32 @@
     width: 100%;
     line-height: 50px;
     color: #fff;
+
+    .create {
+      float: right;
+    }
   }
 
   .network {
     border-left: 3px solid transparent;
+
     &.active {
       border-left: 3px solid #fa8c16;
     }
-  }
-
-  .item {
-    height: 30px !important;
-    line-height: 30px !important;
-    font-size: 12px;
 
-    .icon {
+    .item {
+      height: 30px !important;
+      line-height: 30px !important;
       font-size: 12px;
+
+      .icon {
+        font-size: 12px;
+      }
     }
   }
+
+  .empty {
+    color: #fff;
+    padding: 0 16px;
+  }
 }

src/components/network/NetworkList.spec.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import { renderWithProviders, getNetwork } from 'utils/tests';
+import { NETWORK } from 'components/Routes';
 import NetworkList from './NetworkList';
 
 describe('NetworkList Component', () => {
-  const renderComponent = () => {
+  const renderComponent = (initialNetworks?: Network[]) => {
     const initialState = {
       network: {
-        networks: [
+        networks: initialNetworks || [
           getNetwork(0, 'my network 1'),
           getNetwork(1, 'my network 2'),
           getNetwork(2, 'my network 3'),
@@ -22,11 +23,37 @@ describe('NetworkList Component', () => {
     expect(getByTestId('header')).toHaveTextContent('cmps.network-list.title');
   });
 
-  it('should show a big add button if no networks exist', () => {});
+  it('should display a big create button if no networks exist', () => {
+    const { getByText } = renderComponent([]);
+    expect(getByText('cmps.network-list.create-button')).toBeTruthy();
+  });
+
+  it('should not display a create button if one or more networks exist', () => {
+    const { queryByText } = renderComponent();
+    expect(queryByText('cmps.network-list.create-button')).toBeNull();
+  });
 
-  it('should display an Add Network icon if other networks exist', () => {});
+  it('should go to the new network screen when the create button is clicked', () => {
+    const { getByText, history } = renderComponent([]);
+    fireEvent.click(getByText('cmps.network-list.create-button'));
+    expect(history.location.pathname).toEqual(NETWORK);
+  });
 
-  it('should go to the new network screen when the add button is clicked', () => {});
+  it('should display a create icon if one or more networks exist', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('create-icon')).toBeTruthy();
+  });
+
+  it('should not display a create icon if no networks exist', () => {
+    const { queryByTestId } = renderComponent([]);
+    expect(queryByTestId('create-icon')).toBeNull();
+  });
+
+  it('should go to the new network screen when the create icon is clicked', () => {
+    const { getByTestId, history } = renderComponent();
+    fireEvent.click(getByTestId('create-icon'));
+    expect(history.location.pathname).toEqual(NETWORK);
+  });
 
   it('should display a list of network names', async () => {
     const { getByText } = renderComponent();

src/components/network/NetworkList.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Menu, Icon } from 'antd';
+import { Menu, Icon, Tooltip, Empty, Button } from 'antd';
+import { NETWORK } from 'components/Routes';
 import { useStoreState } from 'store';
 import styles from './NetworkList.module.less';
 
@@ -55,6 +57,15 @@ const List: React.FC = () => {
     <div className={styles.networkList}>
       <header className={styles.header} data-tid="header">
         {t('cmps.network-list.title', 'Networks')}
+        {networks.length > 0 && (
+          <Link to={NETWORK} className={styles.create}>
+            <Tooltip
+              title={t('cmps.network-list.create-icon-tooltip', 'Create a new Network')}
+            >
+              <Icon type="plus-circle" data-tid="create-icon" />
+            </Tooltip>
+          </Link>
+        )}
       </header>
       <Menu
         theme="dark"
@@ -64,6 +75,22 @@ const List: React.FC = () => {
       >
         {networks.map(network => getNetworkItem(network))}
       </Menu>
+      {networks.length === 0 && (
+        <Empty
+          className={styles.empty}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={t(
+            'cmps.network-list.empty-desc',
+            'You have not created any local networks',
+          )}
+        >
+          <Link to={NETWORK}>
+            <Button type="primary" icon="plus">
+              {t('cmps.network-list.create-button', 'New Network')}
+            </Button>
+          </Link>
+        </Empty>
+      )}
     </div>
   );
 };

src/components/network/NewNetwork.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import { renderWithProviders } from 'utils/tests';
+import { HOME } from 'components/Routes';
 import NewNetwork from './NewNetwork';
 
 describe('NewNetwork component', () => {
@@ -38,7 +39,7 @@ describe('NewNetwork component', () => {
       const nameInput = getByTestId('name');
       fireEvent.change(nameInput, { target: { value: 'test' } });
       fireEvent.click(getByTestId('submit'));
-      expect(history.location.pathname).toEqual('/');
+      expect(history.location.pathname).toEqual(HOME);
     });
 
     it('should call networkManager.create', () => {