PMM-13428 Address comments & add unit test

percona · Nov 8, 2024 · c0f282f · c0f282f
1 parent ed34afd
commit c0f282f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 13 deletions.
diff --git a/...cona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.test.tsx b/...cona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { Form } from 'react-final-form';
+import { Field, Form } from 'react-final-form';
 import { Provider } from 'react-redux';
 import selectEvent from 'react-select-event';
 
@@ -24,9 +24,13 @@ describe('Nodes Agents:: ', () => {
     render(
       <Provider store={configureStore()}>
         <Form
+          initialValues={{
+            address: '',
+          }}
           onSubmit={submitMock}
           render={({ handleSubmit, form, values }) => (
             <form data-testid="node-agents-form" onSubmit={handleSubmit}>
+              <Field name="address" component="input" data-testid="address-field" />
               <NodesAgents form={form} />
               <p data-testid="node">{values.node?.value}</p>
               <p data-testid="agent">{values.pmm_agent_id?.value}</p>
@@ -134,4 +138,44 @@ describe('Nodes Agents:: ', () => {
       expect.anything()
     );
   });
+
+  it("shouldn't change address on node change if already filled out", async () => {
+    jest
+      .spyOn(InventoryService, 'getNodes')
+      .mockReturnValue(Promise.resolve({ nodes: nodesMockMultipleAgentsNoPMMServer }));
+
+    setup();
+    await waitFor(() => {
+      expect(fetchNodesActionActionSpy).toHaveBeenCalled();
+    });
+
+    const form = screen.getByTestId('node-agents-form');
+
+    const address = screen.getByTestId('address-field');
+    fireEvent.change(address, { target: { value: 'some-address' } });
+
+    const nodesSelect = screen.getByLabelText('Nodes');
+    await waitFor(() =>
+      selectEvent.select(nodesSelect, [nodesMockMultipleAgentsNoPMMServer[0].node_name], {
+        container: document.body,
+      })
+    );
+
+    const agentsSelect = screen.getByLabelText('Agents');
+    await waitFor(() =>
+      selectEvent.select(agentsSelect, nodesMockMultipleAgentsNoPMMServer[0].agents[0].agent_id, {
+        container: document.body,
+      })
+    );
+
+    fireEvent.submit(form);
+
+    expect(submitMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        address: 'some-address',
+      }),
+      expect.anything(),
+      expect.anything()
+    );
+  });
 });
diff --git a/...p/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.tsx b/...p/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.tsx
@@ -39,8 +39,7 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   }, []);
 
   const changeAgentValue = (value: AgentsOption) => {
-    console.log(form?.getState().values?.address);
-    if (form?.getState().values?.address === undefined || form?.getState().values?.address === '' ) {
+    if (!form?.getState().values?.address) {
       if (value.label !== PMM_SERVER_NODE_AGENT_ID) {
         form?.change('address', 'localhost');
       } else {

diff --git a/public/app/percona/shared/core/reducers/nodes/nodes.utils.ts b/public/app/percona/shared/core/reducers/nodes/nodes.utils.ts
@@ -56,14 +56,16 @@ export const nodeFromDbMapper = (nodeFromDb: NodeDB[]): Node[] => {
 };
 
 export const nodesOptionsMapper = (nodeFromDb: NodeDB[]): NodesOption[] =>
-  nodeFromDb.map((node) => {
-    const agents = (node.agents || [])
-      .filter((agent) => agent.agent_type === AgentType.pmmAgent)
-      .map<AgentsOption>((agent) => ({ value: agent.agent_id, label: agent.agent_id, key: agent.agent_type }));
+  nodeFromDb
+    .map((node) => {
+      const agents = (node.agents || [])
+        .filter((agent) => agent.agent_type === AgentType.pmmAgent)
+        .map<AgentsOption>((agent) => ({ value: agent.agent_id, label: agent.agent_id, key: agent.agent_type }));
 
-    return {
-      value: node.node_id,
-      label: node.node_name,
-      agents: agents,
-    };
-  }).filter((node) => node.agents.length > 0);
+      return {
+        value: node.node_id,
+        label: node.node_name,
+        agents: agents,
+      };
+    })
+    .filter((node) => node.agents.length > 0);