PMM-13548 Add service node selection fixes

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

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { FormApi, FormState } from 'final-form';
 import React from 'react';
 import { Form } from 'react-final-form';
@@ -13,6 +13,8 @@ import { trackingOptions, rdsTrackingOptions } from './FormParts.constants';
 import { LabelsFormPart } from './Labels/Labels';
 import { MainDetailsFormPart } from './MainDetails/MainDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 const form: Partial<FormApi> = {
   change: jest.fn(),
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -31,7 +33,7 @@ describe('MainDetailsFormPart ::', () => {
     );
 
     const fields = container.querySelectorAll('input');
-    expect(fields.length).toBe(8);
+    await waitFor(() => expect(fields.length).toBe(8));
 
     expect(screen.getByTestId('address-text-input')).toBeDisabled();
     expect(screen.getByTestId('serviceName-text-input')).not.toBeDisabled();
@@ -51,7 +53,7 @@ describe('MainDetailsFormPart ::', () => {
     );
 
     const fields = container.querySelectorAll('input');
-    expect(fields.length).toBe(8);
+    await waitFor(() => expect(fields.length).toBe(8));
 
     expect(screen.getByTestId('address-text-input')).not.toBeDisabled();
     expect(screen.getByTestId('serviceName-text-input')).not.toBeDisabled();

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

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
 import { Provider } from 'react-redux';
@@ -7,8 +7,10 @@ import { configureStore } from 'app/store/configureStore';
 
 import { MongoDBConnectionDetails } from './MongoDBConnectionDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 describe('MongoDB connection details:: ', () => {
-  it('should have max query length attribute', () => {
+  it('should have max query length attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <MongoDBConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -18,6 +20,6 @@ describe('MongoDB connection details:: ', () => {
     const textInput = screen.getByTestId('maxQueryLength-text-input');
     fireEvent.change(textInput, { target: { value: '1000' } });
 
-    expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000');
+    await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
 });

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

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
 import { Provider } from 'react-redux';
@@ -7,8 +7,10 @@ import { configureStore } from 'app/store/configureStore';
 
 import { MySQLConnectionDetails } from './MySQLConnectionDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 describe('MySQL connection details:: ', () => {
-  it('should have max query length attribute', () => {
+  it('should have max query length attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <MySQLConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -18,6 +20,6 @@ describe('MySQL connection details:: ', () => {
     const textInput = screen.getByTestId('maxQueryLength-text-input');
     fireEvent.change(textInput, { target: { value: '1000' } });
 
-    expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000');
+    await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
 });

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

@@ -1 +1,2 @@
+export const PMM_SERVER_NODE_ID = 'pmm-server';
 export const PMM_SERVER_NODE_AGENT_ID = 'pmm-server';

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

@@ -46,6 +46,16 @@ describe('Nodes Agents:: ', () => {
     submitMock.mockClear();
   });
 
+  it('should pick pmm-server node by default when available', async () => {
+    jest.spyOn(InventoryService, 'getNodes').mockReturnValue(Promise.resolve({ nodes: nodesMock }));
+
+    setup();
+
+    await waitFor(() => expect(fetchNodesActionActionSpy).toHaveBeenCalled());
+
+    await waitFor(() => expect(screen.getByTestId('node')).toHaveTextContent(nodesMock[0].node_id));
+  });
+
   it('should not pick any agent when the selected node is not pmm-server', async () => {
     jest
       .spyOn(InventoryService, 'getNodes')

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

@@ -1,9 +1,13 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
+import { useField } from 'react-final-form';
 
 import { useStyles2 } from '@grafana/ui';
 import { Messages } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages';
 import { getStyles } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles';
-import { PMM_SERVER_NODE_AGENT_ID } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.constants';
+import {
+  PMM_SERVER_NODE_AGENT_ID,
+  PMM_SERVER_NODE_ID,
+} from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.constants';
 import { NodesAgentsProps } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.types';
 import { GET_NODES_CANCEL_TOKEN } from 'app/percona/inventory/Inventory.constants';
 import { AgentsOption, NodesOption } from 'app/percona/inventory/Inventory.types';
@@ -14,15 +18,18 @@ import { fetchNodesAction } from 'app/percona/shared/core/reducers/nodes/nodes';
 import { getNodes } from 'app/percona/shared/core/selectors';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { logger } from 'app/percona/shared/helpers/logger';
+import { validators } from 'app/percona/shared/helpers/validatorsForm';
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
 export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   const styles = useStyles2(getStyles);
   const dispatch = useAppDispatch();
   const [generateToken] = useCancelToken();
-  const [selectedNode, setSelectedNode] = useState<NodesOption>();
   const { nodes } = useSelector(getNodes);
+  const {
+    input: { value: selectedNode },
+  } = useField('node');
 
   const nodesOptions = useMemo<NodesOption[]>(() => nodesOptionsMapper(nodes), [nodes]);
 
@@ -49,7 +56,7 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   };
 
   const setNodeAndAgent = (value: NodesOption) => {
-    setSelectedNode(value);
+    form?.change('node', value);
 
     let selectedAgent: AgentsOption | undefined;
     if (value.agents && value.agents?.length > 1) {
@@ -68,6 +75,12 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   useEffect(() => {
     if (nodesOptions.length === 0) {
       loadData();
+    } else if (!selectedNode) {
+      // preselect pmm-server node
+      const pmmServerNode = nodesOptions.find((node) => node.value === PMM_SERVER_NODE_ID);
+      if (pmmServerNode) {
+        setNodeAndAgent(pmmServerNode);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nodesOptions]);
@@ -84,8 +97,8 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
           data-testid="nodes-selectbox"
           onChange={(event) => setNodeAndAgent(event as NodesOption)}
           className={styles.selectField}
-          value={selectedNode}
           aria-label={Messages.form.labels.nodesAgents.nodes}
+          validators={[validators.required]}
         />
       </div>
       <div className={styles.selectFieldWrapper}>
@@ -99,6 +112,7 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
           onChange={(event) => changeAgentValue(event as AgentsOption)}
           className={styles.selectField}
           aria-label={Messages.form.labels.nodesAgents.agents}
+          validators={selectedNode ? [validators.required] : undefined}
         />
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
 import { Provider } from 'react-redux';
@@ -7,8 +7,10 @@ import { configureStore } from 'app/store/configureStore';
 
 import { PostgreSQLConnectionDetails } from './PostgreSQLConnectionDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 describe('PostgreSQL connection details:: ', () => {
-  it('should have database attribute', () => {
+  it('should have database attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <PostgreSQLConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -18,10 +20,10 @@ describe('PostgreSQL connection details:: ', () => {
     const textInput = screen.getByTestId('database-text-input');
     fireEvent.change(textInput, { target: { value: 'db1' } });
 
-    expect(screen.getByTestId('database-text-input')).toHaveValue('db1');
+    await waitFor(() => expect(screen.getByTestId('database-text-input')).toHaveValue('db1'));
   });
 
-  it('should have max query length attribute', () => {
+  it('should have max query length attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <PostgreSQLConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -31,6 +33,6 @@ describe('PostgreSQL connection details:: ', () => {
     const textInput = screen.getByTestId('maxQueryLength-text-input');
     fireEvent.change(textInput, { target: { value: '1000' } });
 
-    expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000');
+    await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
 });