PMM-14257 add instance id field for add service step 2 (#840)

* PMM-14257 add instance id field for add service step 2

* PMM-14257: add instance id field only for RDS connection and modified request payload

* PMM-14257 Format code

* PMM-14257 Add unit tests

* PMM-14257 Fix unit test

* PMM-14257 Correctly fix unit test

---------

Co-authored-by: Matej Kubinec <[email protected]>

Author: ioana-maniga

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

@@ -96,6 +96,7 @@ describe('AddRemoteInstanceService:: ', () => {
       qan_postgresql_pgstatements_agent: true,
       metrics_mode: 1,
       node_id: 'node1',
+      node_name: 'localhost',
     };
     expect(toPayload(data)).toStrictEqual(payload);
   });

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.service.tsx

@@ -143,11 +143,12 @@ export const toPayload = (values: any, discoverName?: string, type?: InstanceAva
     data.node_id = data.node.value;
   } else if (!values.isAzure && data.add_node === undefined) {
     data.add_node = {
-      node_name: data.service_name,
       node_type: 'NODE_TYPE_REMOTE_NODE',
     };
   }
 
+  data.node_name = data.service_name;
+
   if (values.isRDS && discoverName) {
     data.engine = discoverName;
   }

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts

@@ -29,6 +29,7 @@ export const Messages = {
         port: 'Port',
         username: 'Username',
         password: 'Password',
+        instanceID: 'Instance ID',
       },
       postgresqlDetails: {
         database: 'Database',
@@ -94,6 +95,7 @@ export const Messages = {
         serviceName: 'Service name (default: Hostname)',
         username: 'Username',
         password: 'Password',
+        instanceID: 'Instance ID',
       },
       postgresqlDetails: {
         database: 'Database (default: postgres)',
@@ -136,6 +138,7 @@ export const Messages = {
         port: 'Port your service is listening on',
         username: 'Your database user name',
         password: 'Your database password',
+        instanceID: 'Instance ID to use',
       },
       postgresqlDetails: {
         database: 'Database name',

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

@@ -21,4 +21,42 @@ describe('MySQL connection details:: ', () => {
 
     await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
+
+  it('should show instance id field for RDS', async () => {
+    render(
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={() => (
+            <MySQLConnectionDetails
+              remoteInstanceCredentials={{
+                isRDS: true,
+              }}
+            />
+          )}
+        />
+      </Provider>
+    );
+
+    await waitFor(() => expect(screen.queryByTestId('instance_id-text-input')).toBeDefined());
+  });
+
+  it("shouldn't show instance id field for non RDS", async () => {
+    render(
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={() => (
+            <MySQLConnectionDetails
+              remoteInstanceCredentials={{
+                isRDS: false,
+              }}
+            />
+          )}
+        />
+      </Provider>
+    );
+
+    await waitFor(() => expect(screen.queryByTestId('instance_id-text-input')).toBeNull());
+  });
 });

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

@@ -31,7 +31,16 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
           tooltipText={Messages.form.tooltips.mainDetails.serviceName}
           placeholder={Messages.form.placeholders.mainDetails.serviceName}
         />
-        <div />
+        {remoteInstanceCredentials.isRDS ? (
+          <TextInputField
+            name="instance_id"
+            placeholder={Messages.form.placeholders.mainDetails.instanceID}
+            label={Messages.form.labels.mainDetails.instanceID}
+            tooltipText={Messages.form.tooltips.mainDetails.instanceID}
+          />
+        ) : (
+          <div />
+        )}
       </div>
       <NodesAgents form={form} />
       <div className={styles.group}>

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

@@ -34,4 +34,42 @@ describe('PostgreSQL connection details:: ', () => {
 
     await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
+
+  it('should show instance id field for RDS', async () => {
+    render(
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={() => (
+            <PostgreSQLConnectionDetails
+              remoteInstanceCredentials={{
+                isRDS: true,
+              }}
+            />
+          )}
+        />
+      </Provider>
+    );
+
+    await waitFor(() => expect(screen.queryByTestId('instance_id-text-input')).toBeDefined());
+  });
+
+  it("shouldn't show instance id field for non RDS", async () => {
+    render(
+      <Provider store={configureStore()}>
+        <Form
+          onSubmit={jest.fn()}
+          render={() => (
+            <PostgreSQLConnectionDetails
+              remoteInstanceCredentials={{
+                isRDS: false,
+              }}
+            />
+          )}
+        />
+      </Provider>
+    );
+
+    await waitFor(() => expect(screen.queryByTestId('instance_id-text-input')).toBeNull());
+  });
 });

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

@@ -30,7 +30,16 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           label={Messages.form.labels.mainDetails.serviceName}
           tooltipText={Messages.form.tooltips.mainDetails.serviceName}
         />
-        <div />
+        {remoteInstanceCredentials.isRDS ? (
+          <TextInputField
+            name="instance_id"
+            placeholder={Messages.form.placeholders.mainDetails.instanceID}
+            label={Messages.form.labels.mainDetails.instanceID}
+            tooltipText={Messages.form.tooltips.mainDetails.instanceID}
+          />
+        ) : (
+          <div />
+        )}
       </div>
       <NodesAgents form={form} />
       <div className={styles.group}>