[Backport 2.x] Refactor integrations setup for easier separation of different setup options

public/components/integrations/components/__tests__/setup_integration.test.tsx

@@ -7,11 +7,8 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { SetupIntegrationPage, SetupIntegrationFormInputs } from '../setup_integration';
-import {
-  TEST_INTEGRATION_CONFIG,
-  TEST_INTEGRATION_SETUP_INPUTS,
-} from '../../../../../test/constants';
+import { SetupIntegrationPage } from '../setup_integration';
+import { TEST_INTEGRATION_CONFIG } from '../../../../../test/constants';
 
 describe('Integration Setup Page', () => {
   configure({ adapter: new Adapter() });
@@ -23,49 +20,4 @@ describe('Integration Setup Page', () => {
       expect(wrapper).toMatchSnapshot();
     });
   });
-
-  it('Renders the index form as expected', async () => {
-    const wrapper = mount(
-      <SetupIntegrationFormInputs
-        config={TEST_INTEGRATION_SETUP_INPUTS}
-        updateConfig={() => {}}
-        integration={TEST_INTEGRATION_CONFIG}
-        setupCallout={{ show: false }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  it('Renders the S3 connector form as expected', async () => {
-    const wrapper = mount(
-      <SetupIntegrationFormInputs
-        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
-        updateConfig={() => {}}
-        integration={TEST_INTEGRATION_CONFIG}
-        setupCallout={{ show: false }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  it('Renders the S3 connector form without workflows', async () => {
-    const wrapper = mount(
-      <SetupIntegrationFormInputs
-        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
-        updateConfig={() => {}}
-        integration={{ ...TEST_INTEGRATION_CONFIG, workflows: undefined }}
-        setupCallout={{ show: false }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
 });

public/components/integrations/components/__tests__/setup_integration_inputs.test.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import {
+  IntegrationConnectionInputs,
+  IntegrationDetailsInputs,
+  IntegrationQueryInputs,
+  IntegrationWorkflowsInputs,
+  SetupIntegrationFormInputs,
+} from '../setup_integration_inputs';
+import {
+  TEST_INTEGRATION_CONFIG,
+  TEST_INTEGRATION_SETUP_INPUTS,
+} from '../../../../../test/constants';
+
+describe('Integration Setup Inputs', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders the index form as expected', async () => {
+    const wrapper = shallow(
+      <SetupIntegrationFormInputs
+        config={TEST_INTEGRATION_SETUP_INPUTS}
+        updateConfig={() => {}}
+        integration={TEST_INTEGRATION_CONFIG}
+        setupCallout={{ show: false }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders the S3 connector form as expected', async () => {
+    const wrapper = shallow(
+      <SetupIntegrationFormInputs
+        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
+        updateConfig={() => {}}
+        integration={TEST_INTEGRATION_CONFIG}
+        setupCallout={{ show: false }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders the S3 connector form without workflows', async () => {
+    const wrapper = shallow(
+      <SetupIntegrationFormInputs
+        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
+        updateConfig={() => {}}
+        integration={TEST_INTEGRATION_CONFIG}
+        setupCallout={{ show: false }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders the details inputs', async () => {
+    const wrapper = mount(
+      <IntegrationDetailsInputs
+        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
+        updateConfig={() => {}}
+        integration={TEST_INTEGRATION_CONFIG}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders the connection inputs', async () => {
+    const wrapper = mount(
+      <IntegrationConnectionInputs
+        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
+        updateConfig={() => {}}
+        integration={TEST_INTEGRATION_CONFIG}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders the connection inputs with a locked connection type', async () => {
+    const wrapper = mount(
+      <IntegrationConnectionInputs
+        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
+        updateConfig={() => {}}
+        integration={TEST_INTEGRATION_CONFIG}
+        lockConnectionType={true}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders the query inputs', async () => {
+    const wrapper = mount(
+      <IntegrationQueryInputs
+        config={{ ...TEST_INTEGRATION_SETUP_INPUTS, connectionType: 's3' }}
+        updateConfig={() => {}}
+        integration={TEST_INTEGRATION_CONFIG}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders the workflows inputs', async () => {
+    const wrapper = mount(
+      <IntegrationWorkflowsInputs updateConfig={() => {}} integration={TEST_INTEGRATION_CONFIG} />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

public/components/integrations/components/create_integration_helpers.ts

@@ -13,6 +13,18 @@ interface Properties {
   [key: string]: Properties | object;
 }
 
+interface AddIntegrationRequestParams {
+  addSample: boolean;
+  templateName: string;
+  integration: IntegrationConfig;
+  setToast: (title: string, color?: Color, text?: string | undefined) => void;
+  name?: string;
+  indexPattern?: string;
+  workflows?: string[];
+  skipRedirect?: boolean;
+  dataSourceInfo?: { dataSource: string; tableName: string };
+}
+
 interface ComponentMappingPayload {
   template: { mappings: { _meta: { version: string } } };
   composed_of: string[];
@@ -277,28 +289,27 @@ const createIndexPatternMappings = async (
   }
 };
 
-export async function addIntegrationRequest(
-  addSample: boolean,
-  templateName: string,
-  integrationTemplateId: string,
-  integration: IntegrationConfig,
-  setToast: (title: string, color?: Color, text?: string | undefined) => void,
-  name?: string,
-  indexPattern?: string,
-  workflows?: string[],
-  skipRedirect?: boolean,
-  dataSourceInfo?: { dataSource: string; tableName: string }
-): Promise<boolean> {
+export async function addIntegrationRequest({
+  addSample,
+  templateName,
+  integration,
+  setToast,
+  name,
+  indexPattern,
+  workflows,
+  skipRedirect,
+  dataSourceInfo,
+}: AddIntegrationRequestParams): Promise<boolean> {
   const http = coreRefs.http!;
   if (addSample) {
     createIndexPatternMappings(
-      `ss4o_${integration.type}-${integrationTemplateId}-*-sample`,
-      integrationTemplateId,
+      `ss4o_${integration.type}-${templateName}-*-sample`,
+      templateName,
       integration,
       setToast
     );
-    name = `${integrationTemplateId}-sample`;
-    indexPattern = `ss4o_${integration.type}-${integrationTemplateId}-sample-sample`;
+    name = `${templateName}-sample`;
+    indexPattern = `ss4o_${integration.type}-${templateName}-sample-sample`;
   }
 
   const createReqBody: {

public/components/integrations/components/integration.tsx

@@ -23,14 +23,14 @@ import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { IntegrationScreenshots } from './integration_screenshots_panel';
 import { useToast } from '../../../../public/components/common/toast';
 import { coreRefs } from '../../../framework/core_refs';
-import { IntegrationTemplate, addIntegrationRequest } from './create_integration_helpers';
+import { addIntegrationRequest } from './create_integration_helpers';
 
 export function Integration(props: AvailableIntegrationProps) {
   const http = coreRefs.http!;
   const { integrationTemplateId, chrome } = props;
 
   const { setToast } = useToast();
-  const [integration, setIntegration] = useState({} as IntegrationTemplate);
+  const [integration, setIntegration] = useState({} as IntegrationConfig);
 
   const [integrationMapping, setMapping] = useState(null);
   const [integrationAssets, setAssets] = useState([]);
@@ -149,13 +149,12 @@ export function Integration(props: AvailableIntegrationProps) {
           }}
           setUpSample={async () => {
             setLoading(true);
-            await addIntegrationRequest(
-              true,
-              integration.name,
-              integrationTemplateId,
+            await addIntegrationRequest({
+              addSample: true,
+              templateName: integration.name,
               integration,
-              setToast
-            );
+              setToast,
+            });
             setLoading(false);
           }}
           loading={loading}