feat(rename): Rename Nodes

src/components/common/RenameNodeButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FormOutlined } from '@ant-design/icons';
+import { Button, Form } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
+import { AnyNode } from 'shared/types';
+import { useStoreActions } from 'store';
+
+interface Props {
+  node: AnyNode;
+  type?: 'button' | 'menu';
+}
+
+const RenameNodeButton: React.FC<Props> = ({ node, type }) => {
+  const { l } = usePrefixedTranslation('cmps.common.RenameNodeButton');
+  const { showRenameNode } = useStoreActions(s => s.modals);
+  const handleClick = () => {
+    showRenameNode({
+      oldNodeName: node.name,
+    });
+  };
+
+  // render a menu item inside of the NodeContextMenu
+  if (type === 'menu') {
+    return (
+      <div onClick={handleClick}>
+        <FormOutlined />
+        <span>{l('menu')}</span>
+      </div>
+    );
+  }
+
+  return (
+    <Form.Item label={l('title')} colon={false}>
+      <Button icon={<FormOutlined />} block onClick={handleClick}>
+        {l('btn')}
+      </Button>
+    </Form.Item>
+  );
+};
+
+export default RenameNodeButton;

src/components/common/RenameNodeModal.spec.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { Status } from 'shared/types';
+import { BitcoindLibrary } from 'types';
+import * as asyncUtil from 'utils/async';
+import { initChartFromNetwork } from 'utils/chart';
+import { defaultRepoState } from 'utils/constants';
+import { createNetwork, createTapdNetworkNode } from 'utils/network';
+import {
+  injections,
+  lightningServiceMock,
+  renderWithProviders,
+  tapServiceMock,
+  testManagedImages,
+  testNodeDocker,
+} from 'utils/tests';
+import RenameNodeModal from './RenameNodeModal';
+
+jest.mock('utils/async');
+const asyncUtilMock = asyncUtil as jest.Mocked<typeof asyncUtil>;
+
+const dockerServiceMock = injections.dockerService as jest.Mocked<
+  typeof injections.dockerService
+>;
+const bitcoindServiceMock = injections.bitcoindService as jest.Mocked<BitcoindLibrary>;
+
+describe('RenameNodeModal', () => {
+  let unmount: () => void;
+
+  const renderComponent = async (status?: Status, nodeName = 'alice') => {
+    const network = createNetwork({
+      id: 1,
+      name: 'test network',
+      lndNodes: 2,
+      clightningNodes: 1,
+      eclairNodes: 1,
+      bitcoindNodes: 3,
+      status,
+      repoState: defaultRepoState,
+      managedImages: testManagedImages,
+      customImages: [],
+    });
+    network.nodes.tap.push(
+      createTapdNetworkNode(
+        network,
+        defaultRepoState.images.tapd.latest,
+        defaultRepoState.images.tapd.compatibility,
+        testNodeDocker,
+        status,
+      ),
+    );
+    const initialState = {
+      network: {
+        networks: [network],
+      },
+      designer: {
+        activeId: network.id,
+        allCharts: {
+          [network.id]: initChartFromNetwork(network),
+        },
+      },
+      modals: {
+        renameNode: {
+          visible: true,
+          oldNodeName: nodeName,
+        },
+      },
+    };
+    const cmp = <RenameNodeModal network={network} />;
+    const result = renderWithProviders(cmp, { initialState });
+    unmount = result.unmount;
+    return {
+      ...result,
+      network,
+    };
+  };
+
+  afterEach(() => unmount());
+
+  it('should render labels', async () => {
+    const { getByText } = await renderComponent();
+    expect(getByText('Rename Node alice')).toBeInTheDocument();
+    expect(getByText('New Node Name')).toBeInTheDocument();
+  });
+
+  it('should render form inputs', async () => {
+    const { getByLabelText } = await renderComponent();
+    expect(getByLabelText('New Node Name')).toBeInTheDocument();
+  });
+
+  it('should render button', async () => {
+    const { getByText } = await renderComponent();
+    const btn = getByText('Save');
+    expect(btn).toBeInTheDocument();
+    expect(btn.parentElement).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('should render a alert for started nodes', async () => {
+    const { getByText } = await renderComponent(Status.Started);
+    expect(
+      getByText('The network will be restarted to perform this operation'),
+    ).toBeInTheDocument();
+  });
+
+  it('should hide modal when cancel is clicked', async () => {
+    const { getByText, queryByText } = await renderComponent();
+    const btn = getByText('Cancel');
+    expect(btn).toBeInTheDocument();
+    expect(btn.parentElement).toBeInstanceOf(HTMLButtonElement);
+    fireEvent.click(getByText('Cancel'));
+    expect(queryByText('Cancel')).not.toBeInTheDocument();
+  });
+
+  it('should do nothing if an invalid node name is used', async () => {
+    const { getByText } = await renderComponent(Status.Stopped, 'invalid');
+    fireEvent.click(getByText('Save'));
+    await waitFor(() => {
+      expect(getByText('Save')).toBeInTheDocument();
+    });
+  });
+
+  describe('with form submitted', () => {
+    it('should update the Lightning node name', async () => {
+      const { getByText, getByLabelText, store } = await renderComponent();
+      fireEvent.change(getByLabelText('New Node Name'), { target: { value: 'test' } });
+      fireEvent.click(getByText('Save'));
+      await waitFor(() => {
+        expect(store.getState().modals.advancedOptions.visible).toBe(false);
+        expect(store.getState().network.networks[0].nodes.lightning[0].name).toBe('test');
+      });
+      expect(getByText('The node alice has been renamed to test')).toBeInTheDocument();
+    });
+
+    it('should update the TAP node name', async () => {
+      const { getByText, getByLabelText, store } = await renderComponent(
+        Status.Stopped,
+        'alice-tap',
+      );
+      fireEvent.change(getByLabelText('New Node Name'), { target: { value: 'test' } });
+      fireEvent.click(getByText('Save'));
+      await waitFor(() => {
+        expect(store.getState().modals.advancedOptions.visible).toBe(false);
+        expect(store.getState().network.networks[0].nodes.tap[0].name).toBe('test');
+      });
+      expect(
+        getByText('The node alice-tap has been renamed to test'),
+      ).toBeInTheDocument();
+    });
+
+    it('should update the started Backend node name', async () => {
+      asyncUtilMock.delay.mockResolvedValue(Promise.resolve());
+      lightningServiceMock.waitUntilOnline.mockResolvedValue();
+      bitcoindServiceMock.waitUntilOnline.mockResolvedValue();
+      tapServiceMock.waitUntilOnline.mockResolvedValue();
+      const { getByText, getByLabelText, store } = await renderComponent(
+        Status.Started,
+        'backend1',
+      );
+      fireEvent.change(getByLabelText('New Node Name'), { target: { value: 'test' } });
+      fireEvent.click(getByText('Save'));
+      await waitFor(() => {
+        expect(store.getState().modals.advancedOptions.visible).toBe(false);
+        expect(store.getState().network.networks[0].nodes.bitcoin[0].name).toBe('test');
+      });
+      expect(getByText('The node backend1 has been renamed to test')).toBeInTheDocument();
+    });
+
+    it('should display an error if it fails', async () => {
+      dockerServiceMock.saveComposeFile.mockRejectedValue(new Error('test-error'));
+      const { getByText, getByLabelText } = await renderComponent();
+      fireEvent.change(getByLabelText('New Node Name'), { target: { value: 'test' } });
+      fireEvent.click(getByText('Save'));
+      await waitFor(() => {
+        expect(getByText('Unable to rename the node')).toBeInTheDocument();
+        expect(getByText('test-error')).toBeInTheDocument();
+      });
+    });
+  });
+});

src/components/common/RenameNodeModal.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useAsyncCallback } from 'react-async-hook';
+import { Alert, Form, Input, Modal } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
+import { AnyNode, Status } from 'shared/types';
+import { useStoreActions, useStoreState } from 'store';
+import { Network } from 'types';
+
+interface Props {
+  network: Network;
+}
+
+const RenameNodeModal: React.FC<Props> = ({ network }) => {
+  const { l } = usePrefixedTranslation('cmps.common.RenameNodeModal');
+
+  const [form] = Form.useForm();
+  const { visible, oldNodeName } = useStoreState(s => s.modals.renameNode);
+  const { hideRenameNode } = useStoreActions(s => s.modals);
+  const { renameNode } = useStoreActions(s => s.network);
+  const { notify } = useStoreActions(s => s.app);
+
+  const updateAsync = useAsyncCallback(async (node: AnyNode, newName: string) => {
+    try {
+      const name = node.name;
+      await renameNode({ node, newName });
+      hideRenameNode();
+      notify({ message: l('success', { name, newName }) });
+    } catch (error: any) {
+      notify({ message: l('error'), error });
+    }
+  });
+
+  const { lightning, bitcoin, tap } = network.nodes;
+  const nodes: AnyNode[] = [...lightning, ...bitcoin, ...tap];
+  const node = nodes.find(n => n.name === oldNodeName);
+  const handleSubmit = (values: any) => {
+    if (!node) return;
+    updateAsync.execute(node, values.newNodeName);
+  };
+
+  return (
+    <Modal
+      title={l('title', { name: oldNodeName })}
+      open={visible}
+      onCancel={() => hideRenameNode()}
+      destroyOnClose
+      cancelText={l('cancelBtn')}
+      okText={l('okBtn')}
+      okButtonProps={{
+        loading: updateAsync.loading,
+      }}
+      onOk={form.submit}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        hideRequiredMark
+        colon={false}
+        initialValues={{ newNodeName: oldNodeName }}
+        onFinish={handleSubmit}
+      >
+        {node?.status === Status.Started ? (
+          <Alert type="warning" message={l('alert')} />
+        ) : null}
+        <Form.Item
+          name="newNodeName"
+          label={l('label')}
+          rules={[
+            { required: true, message: l('cmps.forms.required') },
+            { pattern: /^[a-zA-Z0-9_-]+$/, message: l('invalidName') },
+          ]}
+        >
+          <Input placeholder="Enter node name" disabled={updateAsync.loading} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default RenameNodeModal;

src/components/common/index.ts

@@ -7,3 +7,5 @@ export { default as RestartNode } from './RestartNode';
 export { default as StatusBadge } from './StatusBadge';
 export { default as StatusTag } from './StatusTag';
 export { default as RemoveNode } from './RemoveNode';
+export { default as RenameNodeModal } from './RenameNodeModal';
+export { default as RenameNodeButton } from './RenameNodeButton';

src/components/designer/NetworkDesigner.spec.tsx

@@ -224,6 +224,16 @@ describe('NetworkDesigner Component', () => {
     fireEvent.click(getByText('Cancel'));
   });
 
+  it('should display the Rename Node modal', async () => {
+    const { getByText, findByText, store } = renderComponent();
+    expect(await findByText('backend1')).toBeInTheDocument();
+    act(() => {
+      store.getActions().modals.showRenameNode({ oldNodeName: 'alice' });
+    });
+    expect(await findByText('Rename Node alice')).toBeInTheDocument();
+    fireEvent.click(getByText('Cancel'));
+  });
+
   it('should remove a node from the network', async () => {
     const { getByText, findByText, queryByText, store } = renderComponent();
     // add a new LN node that doesn't have a tap node connected

src/components/designer/NetworkDesigner.tsx

@@ -7,7 +7,7 @@ import { useDebounce } from 'hooks';
 import { useTheme } from 'hooks/useTheme';
 import { useStoreActions, useStoreState } from 'store';
 import { Network } from 'types';
-import { Loader } from 'components/common';
+import { Loader, RenameNodeModal } from 'components/common';
 import AdvancedOptionsModal from 'components/common/AdvancedOptionsModal';
 import SendOnChainModal from './bitcoind/actions/SendOnChainModal';
 import { CanvasOuterDark, Link, NodeInner, Port, Ports } from './custom';
@@ -61,6 +61,7 @@ const NetworkDesigner: React.FC<Props> = ({ network, updateStateDelay = 3000 })
     sendOnChain,
     advancedOptions,
     changeTapBackend,
+    renameNode,
   } = useStoreState(s => s.modals);
 
   const { save } = useStoreActions(s => s.network);
@@ -108,6 +109,7 @@ const NetworkDesigner: React.FC<Props> = ({ network, updateStateDelay = 3000 })
       {newAddress.visible && <NewAddressModal network={network} />}
       {changeTapBackend.visible && <ChangeTapBackendModal network={network} />}
       {sendAsset.visible && <SendAssetModal network={network} />}
+      {renameNode.visible && <RenameNodeModal network={network} />}
     </Styled.Designer>
   );
 };

src/components/designer/NodeContextMenu.tsx

@@ -3,7 +3,12 @@ import { INode } from '@mrblenny/react-flow-chart';
 import { Dropdown, MenuProps } from 'antd';
 import { BitcoinNode, LightningNode, Status, TapNode } from 'shared/types';
 import { useStoreState } from 'store';
-import { AdvancedOptionsButton, RemoveNode, RestartNode } from 'components/common';
+import {
+  AdvancedOptionsButton,
+  RemoveNode,
+  RestartNode,
+  RenameNodeButton,
+} from 'components/common';
 import { ViewLogsButton } from 'components/dockerLogs';
 import { OpenTerminalButton } from 'components/terminal';
 import SendOnChainButton from './bitcoind/actions/SendOnChainButton';
@@ -102,6 +107,7 @@ const NodeContextMenu: React.FC<Props> = ({ node: { id }, children }) => {
       <ViewLogsButton type="menu" node={node} />,
       [Status.Starting, Status.Started, Status.Error].includes(node.status),
     ),
+    addItemIf('rename', <RenameNodeButton type="menu" node={node} />),
     addItemIf('options', <AdvancedOptionsButton type="menu" node={node} />),
     addItemIf('remove', <RemoveNode type="menu" node={node} />),
   );

src/components/designer/bitcoind/ActionsTab.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { Form } from 'antd';
 import { BitcoinNode, Status } from 'shared/types';
-import { AdvancedOptionsButton, RemoveNode, RestartNode } from 'components/common';
+import {
+  AdvancedOptionsButton,
+  RemoveNode,
+  RestartNode,
+  RenameNodeButton,
+} from 'components/common';
 import { ViewLogsButton } from 'components/dockerLogs';
 import { OpenTerminalButton } from 'components/terminal';
 import MineBlocksInput from './actions/MineBlocksInput';
@@ -31,6 +36,7 @@ const ActionsTab: React.FC<Props> = ({ node }) => {
         </>
       )}
       <RestartNode node={node} />
+      <RenameNodeButton node={node} />
       <AdvancedOptionsButton node={node} />
       <RemoveNode node={node} />
     </Form>