PMM-13428 Fix add remote instance issues.

docker-compose.yml

@@ -10,6 +10,8 @@ services:
       - "./:/workspace"
       - "./public:/usr/share/grafana/public"
       - "./conf/grafana.local-dev.ini:/usr/share/grafana/conf/defaults.ini"
+      # pmm
+      # - "../pmm:/root/go/src/github.com/percona/pmm"
     ports:
       - 80:8080
       - 443:8443

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useCallback, useEffect, useMemo } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
-import { NodesAgents } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents';
 import { PasswordInputField } from 'app/percona/shared/components/Form/PasswordInput';
 import { RadioButtonGroupField } from 'app/percona/shared/components/Form/RadioButtonGroup';
 import { TextInputField } from 'app/percona/shared/components/Form/TextInput';
@@ -97,7 +96,6 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
             />
             <div />
           </div>
-          <NodesAgents form={form} />
           <div className={styles.group}>
             <TextInputField
               name="address"

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useCallback, useMemo } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
-import { NodesAgents } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents';
 import { PasswordInputField } from 'app/percona/shared/components/Form/PasswordInput';
 import { TextInputField } from 'app/percona/shared/components/Form/TextInput';
 import Validators from 'app/percona/shared/helpers/validators';
@@ -30,7 +29,6 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
         />
         <div />
       </div>
-      <NodesAgents form={form} />
       <div className={styles.group}>
         <TextInputField
           name="address"

public/app/percona/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()
+    );
+  });
 });

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.tsx

@@ -39,10 +39,12 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   }, []);
 
   const changeAgentValue = (value: AgentsOption) => {
-    if (value.label !== PMM_SERVER_NODE_AGENT_ID) {
-      form?.change('address', 'localhost');
-    } else {
-      form?.change('address', '');
+    if (!form?.getState().values?.address) {
+      if (value.label !== PMM_SERVER_NODE_AGENT_ID) {
+        form?.change('address', 'localhost');
+      } else {
+        form?.change('address', '');
+      }
     }
   };
 
@@ -57,13 +59,9 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
     }
     if (selectedAgent) {
       form?.change('pmm_agent_id', selectedAgent);
-
-      if (selectedAgent.value !== PMM_SERVER_NODE_AGENT_ID) {
-        form?.change('address', 'localhost');
-      }
+      changeAgentValue(selectedAgent);
     } else {
       form?.change('pmm_agent_id', undefined);
-      form?.change('address', '');
     }
   };
 

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,
-    };
-  });
+      return {
+        value: node.node_id,
+        label: node.node_name,
+        agents: agents,
+      };
+    })
+    .filter((node) => node.agents.length > 0);