feat(Network): add description field

.vscode/settings.json

@@ -66,7 +66,7 @@
     }
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "typescript.tsdk": "node_modules/typescript/lib"
 }

src/components/common/AdvancedOptionsModal.spec.tsx

@@ -13,7 +13,7 @@ describe('AdvancedOptionsModal', () => {
   let unmount: () => void;
 
   const renderComponent = async (status?: Status, nodeName = 'alice') => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const initialState = {
       network: {
         networks: [network],

src/components/common/RemoveNode.spec.tsx

@@ -25,7 +25,7 @@ describe('RemoveNode', () => {
     nodeName = 'alice',
     nodeType?: CommonNode['type'],
   ) => {
-    const network = getNetwork(1, 'test network', status, 2);
+    const network = getNetwork(1, 'test network', status?.toString(), 2);
     // add an extra lightning node to the network without a connected tapd node
     const lnd = defaultRepoState.images.LND;
     network.nodes.lightning.push(

src/components/common/RestartNode.spec.tsx

@@ -16,7 +16,7 @@ const dockerServiceMock = injections.dockerService as jest.Mocked<DockerLibrary>
 
 describe('RestartNode', () => {
   const renderComponent = (status?: Status) => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const initialState = {
       network: {
         networks: [network],

src/components/common/form/TapDataSelect.spec.tsx

@@ -14,7 +14,7 @@ describe('TapDataSelect', () => {
   const handleChange: jest.Mock | undefined = jest.fn();
 
   const renderComponent = (selectBalances = true, changeEvent = true) => {
-    const network = getNetwork(1, 'test network', Status.Started, 3);
+    const network = getNetwork(1, 'test network', Status.Started.toString(), 3);
     const initialState = {
       tap: {
         nodes: {

src/components/common/form/TapNodeSelect.spec.tsx

@@ -7,7 +7,7 @@ import TapNodeSelect from './TapNodeSelect';
 
 describe('TapNodeSelect', () => {
   const renderComponent = () => {
-    const network = getNetwork(1, 'test network', Status.Stopped, 3);
+    const network = getNetwork(1, 'test network', Status.Stopped.toString(), 3);
     const TestForm = () => {
       const [form] = Form.useForm();
       return (

src/components/designer/AutoMineButton.spec.tsx

@@ -10,7 +10,7 @@ describe('AutoMineButton', () => {
   let unmount: () => void;
 
   const renderComponent = (autoMineMode: AutoMineMode = AutoMineMode.AutoOff) => {
-    const network = getNetwork(1, 'test network', Status.Started);
+    const network = getNetwork(1, 'test network', Status.Started.toString());
     network.autoMineMode = autoMineMode;
 
     const autoMiner = {

src/components/designer/LinkContextMenu.spec.tsx

@@ -45,7 +45,7 @@ describe('LinkContextMenu', () => {
     },
   });
   const renderComponent = (link: ILink, activeId?: number) => {
-    const network = getNetwork(1, 'test network', Status.Started, 2);
+    const network = getNetwork(1, 'test network', Status.Started?.toString(), 2);
     const chart = initChartFromNetwork(network);
     chart.links[link.id] = link;
     const initialState = {

src/components/designer/NetworkDesigner.spec.tsx

@@ -25,7 +25,7 @@ describe('NetworkDesigner Component', () => {
   });
 
   const renderComponent = (charts?: Record<number, IChart>, theme = 'dark') => {
-    const network = getNetwork(1, 'test network', Status.Stopped, 2);
+    const network = getNetwork(1, 'test network', Status.Stopped?.toString(), 2);
     const allCharts = charts || {
       1: initChartFromNetwork(network),
     };

src/components/designer/NodeContextMenu.spec.tsx

@@ -9,7 +9,7 @@ import NodeContextMenu from './NodeContextMenu';
 
 describe('NodeContextMenu', () => {
   const renderComponent = (nodeName: string, status?: Status, activeId?: number) => {
-    const network = getNetwork(1, 'test network', status, 2);
+    const network = getNetwork(1, 'test network', status?.toString(), 2);
     const chart = initChartFromNetwork(network);
     if (nodeName === 'invalid') {
       chart.nodes.alice.id = 'invalid';

src/components/designer/Sidebar.spec.tsx

@@ -11,7 +11,7 @@ describe('Sidebar Component', () => {
     selectedId?: string,
     status?: Status,
   ) => {
-    const network = getNetwork(1, 'test network', status, 2);
+    const network = getNetwork(1, 'test network', status?.toString(), 2);
     const chart = initChartFromNetwork(network);
     if (selectedType && selectedId) {
       chart.selected = { type: selectedType, id: selectedId };

src/components/designer/bitcoind/BitcoindDetails.spec.tsx

@@ -8,7 +8,7 @@ import BitcoindDetails from './BitcoindDetails';
 
 describe('BitcoindDetails', () => {
   const renderComponent = (status?: Status, custom = false) => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     if (status === Status.Error) {
       network.nodes.bitcoin.forEach(n => (n.errorMsg = 'test-error'));
     }

src/components/designer/bitcoind/actions/MineBlocksInput.spec.tsx

@@ -12,7 +12,7 @@ import MineBlocksInput from './MineBlocksInput';
 
 describe('MineBlocksInput', () => {
   const renderComponent = (status?: Status) => {
-    const network = getNetwork(1, 'test network', status, 2);
+    const network = getNetwork(1, 'test network', status?.toString(), 2);
     const initialState = {
       network: {
         networks: [network],

src/components/designer/bitcoind/actions/SendOnChainModal.spec.tsx

@@ -23,6 +23,7 @@ describe('SendOnChainModal', () => {
     const network = createNetwork({
       id: 1,
       name: 'test network',
+      description: 'test network description',
       lndNodes: 2,
       clightningNodes: 1,
       eclairNodes: 1,

src/components/designer/default/DefaultSidebar.spec.tsx

@@ -36,7 +36,7 @@ describe('DefaultSidebar Component', () => {
   ];
 
   const renderComponent = (status?: Status, images?: CustomImage[]) => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const chart = initChartFromNetwork(network);
     const initialState = {
       app: {

src/components/designer/lightning/actions/ChangeBackendModal.spec.tsx

@@ -22,7 +22,7 @@ describe('ChangeBackendModal', () => {
     lnName = 'alice',
     backendName = 'backend1',
   ) => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const oldBitcoind = createBitcoindNetworkNode(
       network,
       '0.18.1',

src/components/designer/lightning/actions/CreateInvoiceModal.spec.tsx

@@ -14,7 +14,7 @@ describe('CreateInvoiceModal', () => {
   let unmount: () => void;
 
   const renderComponent = async (status?: Status, nodeName = 'alice') => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const initialState = {
       network: {
         networks: [network],

src/components/designer/lightning/actions/OpenChannelModal.spec.tsx

@@ -21,7 +21,7 @@ describe('OpenChannelModal', () => {
   let unmount: () => void;
 
   const renderComponent = async (from = 'alice', to?: string) => {
-    const network = getNetwork(1, 'test network', Status.Started);
+    const network = getNetwork(1, 'test network', Status.Started?.toString());
     const initialState = {
       network: {
         networks: [network],

src/components/designer/lightning/actions/PayInvoiceModal.spec.tsx

@@ -14,7 +14,7 @@ describe('PayInvoiceModal', () => {
   let unmount: () => void;
 
   const renderComponent = async (status?: Status, nodeName = 'alice') => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const initialState = {
       network: {
         networks: [network],

src/components/designer/link/Channel.spec.tsx

@@ -18,7 +18,7 @@ const bitcoindServiceMock = injections.bitcoindService as jest.Mocked<
 
 describe('Channel component', () => {
   const renderComponent = (status = Status.Stopped) => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const lnd1 = network.nodes.lightning[0];
     const lnd2 = network.nodes.lightning[3];
     const link: ILink = {

src/components/designer/link/LinkDetails.spec.tsx

@@ -8,7 +8,7 @@ import LinkDetails from './LinkDetails';
 
 describe('LinkDetails component', () => {
   const renderComponent = (from: string, to: string, properties: any) => {
-    const network = getNetwork(1, 'test network', Status.Stopped, 2);
+    const network = getNetwork(1, 'test network', Status.Stopped?.toString(), 2);
     network.nodes.bitcoin.push(
       createBitcoindNetworkNode(network, '0.18.1', testNodeDocker),
     );

src/components/designer/link/TapBackend.spec.tsx

@@ -13,7 +13,7 @@ const filesMock = files as jest.Mocked<typeof files>;
 
 describe('TAP Lnd Link Component', () => {
   const renderComponent = () => {
-    const network = getNetwork(1, 'test network', Status.Stopped, 1);
+    const network = getNetwork(1, 'test network', Status.Stopped?.toString(), 1);
     const allCharts = {
       1: initChartFromNetwork(network),
     };

src/components/designer/tap/TapNodeDetails.spec.tsx

@@ -47,7 +47,7 @@ describe('TapDetails', () => {
   };
 
   beforeEach(() => {
-    network = getNetwork(1, 'test network', Status.Stopped, 2);
+    network = getNetwork(1, 'test network', Status.Stopped?.toString(), 2);
     node = network.nodes.tap[0];
   });
 

src/components/designer/tap/actions/ChangeTapBackendModal.spec.tsx

@@ -20,7 +20,7 @@ describe('ChangeTapBackendModal', () => {
     tapName = 'alice-tap',
     lndName = 'alice',
   ) => {
-    const network = getNetwork(1, 'test network', status, 2);
+    const network = getNetwork(1, 'test network', status?.toString(), 2);
     const { compatibility } = defaultRepoState.images.LND;
     const otherLND = createLndNetworkNode(
       network,

src/components/designer/tap/actions/MintAssetModal.spec.tsx

@@ -21,7 +21,7 @@ describe('MintAssetModal', () => {
   let node: TapNode;
 
   const renderComponent = async () => {
-    const network = getNetwork(1, 'test network', Status.Started, 2);
+    const network = getNetwork(1, 'test network', Status.Started?.toString(), 2);
     node = network.nodes.tap[0];
 
     const initialState = {

src/components/designer/tap/actions/NewAddressModal.spec.tsx

@@ -10,7 +10,7 @@ describe('NewAddressModal', () => {
   let unmount: () => void;
 
   const renderComponent = async () => {
-    const network = getNetwork(1, 'test network', Status.Started, 2);
+    const network = getNetwork(1, 'test network', Status.Started?.toString(), 2);
 
     const initialState = {
       network: {

src/components/designer/tap/actions/SendAssetModal.spec.tsx

@@ -22,7 +22,7 @@ describe('SendAssetModal', () => {
   let unmount: () => void;
 
   const renderComponent = async () => {
-    const network = getNetwork(1, 'test network', Status.Started, 2);
+    const network = getNetwork(1, 'test network', Status.Started?.toString(), 2);
 
     const initialState = {
       tap: {

src/components/home/NetworkCard.spec.tsx

@@ -7,7 +7,7 @@ import { NETWORK_VIEW } from 'components/routing';
 import NetworkCard from './NetworkCard';
 
 describe('NetworkCard component', () => {
-  const network = getNetwork(1, 'my network 1', Status.Stopped, 4);
+  const network = getNetwork(1, 'my network 1', Status.Stopped?.toString(), 4);
   const renderComponent = () => {
     const initialState = {
       network: {

src/components/home/NetworkCard.tsx

@@ -11,6 +11,17 @@ const Styled = {
   Card: styled(Card)`
     margin-top: 16px;
   `,
+  description: styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
+  `,
+  title: styled.div`
+    margin-bottom: 2px;
+    color: #ffffff73;
+  `,
 };
 
 const NetworkCard: React.FC<{ network: Network }> = ({ network }) => {
@@ -28,6 +39,10 @@ const NetworkCard: React.FC<{ network: Network }> = ({ network }) => {
       extra={<StatusBadge status={network.status} />}
       onClick={handleClick}
     >
+      <Row>
+        <Styled.title>{`Description`}</Styled.title>
+        <Styled.description>{network.description}</Styled.description>
+      </Row>
       <Row>
         <Col span={8}>
           <Statistic

src/components/network/ImportNetwork.spec.tsx

@@ -158,7 +158,7 @@ describe('ImportNetwork component', () => {
   });
 
   it('should import a TAP network successfully', async () => {
-    network = getNetwork(1, 'tap network', Status.Stopped, 2);
+    network = getNetwork(1, 'tap network', Status.Stopped?.toString(), 2);
     chart = initChartFromNetwork(network);
     filesMock.read.mockResolvedValue(JSON.stringify({ network, chart }));
     const { queryByLabelText, findByText, fileInput } = renderComponent();
@@ -171,7 +171,7 @@ describe('ImportNetwork component', () => {
   });
 
   it('should throw for an unknown TAP implementation', async () => {
-    network = getNetwork(1, 'tap network', Status.Stopped, 2);
+    network = getNetwork(1, 'tap network', Status.Stopped?.toString(), 2);
     chart = initChartFromNetwork(network);
     network.nodes.tap[0].implementation = 'asdf' as any;
     filesMock.read.mockResolvedValue(JSON.stringify({ network, chart }));

src/components/network/NetworkActions.spec.tsx

@@ -19,7 +19,7 @@ describe('NetworkActions Component', () => {
   const handleExportClick = jest.fn();
 
   const renderComponent = (status: Status) => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     network.nodes.bitcoin.forEach(n => (n.status = status));
     const chart = initChartFromNetwork(network);
     const initialState = {

src/components/network/NetworkView.spec.tsx

@@ -38,7 +38,7 @@ describe('NetworkView Component', () => {
     images?: string[],
     withBitcoinData = true,
   ) => {
-    const network = getNetwork(1, 'test network', status);
+    const network = getNetwork(1, 'test network', status?.toString());
     const bitcoinData = {
       nodes: {
         '1-backend1': {

src/components/network/NetworkView.tsx

@@ -172,6 +172,7 @@
       <Styled.PageHeader
         colors={theme.pageHeader}
         title={network.name}
+        description={'network.description'}
         onBack={handleBackClick}
         tags={<StatusTag status={network.status} />}
         extra={

src/components/network/NewNetwork.tsx

@@ -88,6 +88,18 @@ const NewNetwork: React.FC = () => {
           >
             <Input placeholder={l('namePhldr')} />
           </Form.Item>
+
+          <Form.Item
+            name="description"
+            label={l('descriptionLabel')}
+            rules={[
+              { required: true, message: l('cmps.forms.required') },
+              { max: 80, message: 'Maximum length is 80 characters' },
+            ]}
+          >
+            <Input placeholder={l('descriptionPhldr')} />
+          </Form.Item>
+
           {customNodes.length > 0 && (
             <>
               <Styled.Divider orientation="left">{l('customLabel')}</Styled.Divider>

src/i18n/locales/en-US.json

@@ -428,7 +428,9 @@
   "cmps.network.ImportNetwork.importError": "Could not import '{{file}}'",
   "cmps.network.NewNetwork.title": "Create a new Lightning Network",
   "cmps.network.NewNetwork.nameLabel": "Network Name",
+  "cmps.network.NewNetwork.descriptionLabel": "Network Description",
   "cmps.network.NewNetwork.namePhldr": "My Lightning Simnet",
+  "cmps.network.NewNetwork.descriptionPhldr": "My Lightning Simnet Description",
   "cmps.network.NewNetwork.customLabel": "How many Custom Nodes?",
   "cmps.network.NewNetwork.managedLabel": "How many Managed Nodes?",
   "cmps.network.NewNetwork.clightningWindows": "Not supported on Windows yet.",

src/lib/docker/composeFile.spec.ts

@@ -11,7 +11,7 @@ describe('ComposeFile', () => {
   const clnNode = network.nodes.lightning[1] as CLightningNode;
   // create a separate network for tap nodes because it won't include any
   // c-lightning nodes
-  const tapNetwork = getNetwork(2, 'tap', Status.Stopped, 2);
+  const tapNetwork = getNetwork(2, 'tap', Status.Stopped?.toString(), 2);
   const tapNode = tapNetwork.nodes.tap[0] as TapdNode;
   const tapLndNode = network.nodes.lightning[0] as LndNode;