[Multi Data Source] Render credential form registered from AuthMethod

CHANGELOG.md

@@ -77,6 +77,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Hide/Show authentication method in multi data source plugin based on configuration ([#5916](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5916))
 - [[Dynamic Configurations] Add support for dynamic application configurations ([#5855](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5855))
 - [Workspace] Optional workspaces params in repository ([#5949](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5949))
+- [Multiple Datasource] Refactoring create and edit form to use authentication registry ([#6002](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6002))
 
 ### 🐛 Bug Fixes
 

src/plugins/data_source_management/public/auth_registry/authentication_methods_registry.ts

@@ -9,7 +9,10 @@ import { EuiSuperSelectOption } from '@elastic/eui';
 export interface AuthenticationMethod {
   name: string;
   credentialSourceOption: EuiSuperSelectOption<string>;
-  credentialForm?: React.JSX.Element;
+  credentialForm?: (
+    state: { [key: string]: any },
+    setState: React.Dispatch<React.SetStateAction<any>>
+  ) => React.JSX.Element;
   crendentialFormField?: { [key: string]: string };
 }
 

src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx

@@ -17,7 +17,7 @@ import {
   sigV4AuthMethod,
   usernamePasswordAuthMethod,
 } from '../../../../types';
-import { AuthenticationMethodRegistery } from 'src/plugins/data_source_management/public/auth_registry';
+import { AuthenticationMethod, AuthenticationMethodRegistery } from '../../../../auth_registry';
 
 const titleIdentifier = '[data-test-subj="createDataSourceFormTitleField"]';
 const descriptionIdentifier = `[data-test-subj="createDataSourceFormDescriptionField"]`;
@@ -363,3 +363,158 @@ describe('Datasource Management: Create Datasource form with different authType
     });
   });
 });
+
+describe('Datasource Management: Create Datasource form with registered Auth Type', () => {
+  let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  const mockSubmitHandler = jest.fn();
+  const mockTestConnectionHandler = jest.fn();
+  const mockCancelHandler = jest.fn();
+
+  test('should call registered crendential form at the first round when registered method is at the first place and username & password disabled', () => {
+    const mockCredentialForm = jest.fn();
+    const authTypeToBeTested = 'Some Auth Type';
+    const authMethodToBeTested = {
+      name: authTypeToBeTested,
+      credentialSourceOption: {
+        value: authTypeToBeTested,
+        inputDisplay: 'some input',
+      },
+      credentialForm: mockCredentialForm,
+    } as AuthenticationMethod;
+
+    const authMethodCombinationsToBeTested = [
+      [authMethodToBeTested],
+      [authMethodToBeTested, sigV4AuthMethod],
+      [authMethodToBeTested, noAuthCredentialAuthMethod],
+      [authMethodToBeTested, noAuthCredentialAuthMethod, sigV4AuthMethod],
+    ];
+
+    authMethodCombinationsToBeTested.forEach((authMethodCombination) => {
+      const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+      mockedContext.authenticationMethodRegistery = new AuthenticationMethodRegistery();
+
+      authMethodCombination.forEach((authMethod) => {
+        mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(authMethod);
+      });
+
+      component = mount(
+        wrapWithIntl(
+          <CreateDataSourceForm
+            handleTestConnection={mockTestConnectionHandler}
+            handleSubmit={mockSubmitHandler}
+            handleCancel={mockCancelHandler}
+            existingDatasourceNamesList={['dup20']}
+          />
+        ),
+        {
+          wrappingComponent: OpenSearchDashboardsContextProvider,
+          wrappingComponentProps: {
+            services: mockedContext,
+          },
+        }
+      );
+
+      expect(mockCredentialForm).toHaveBeenCalled();
+    });
+  });
+
+  test('should not call registered crendential form at the first round when registered method is at the first place and username & password enabled', () => {
+    const mockCredentialForm = jest.fn();
+    const authTypeToBeTested = 'Some Auth Type';
+    const authMethodToBeTested = {
+      name: authTypeToBeTested,
+      credentialSourceOption: {
+        value: authTypeToBeTested,
+        inputDisplay: 'some input',
+      },
+      credentialForm: mockCredentialForm,
+    } as AuthenticationMethod;
+
+    const authMethodCombinationsToBeTested = [
+      [authMethodToBeTested, usernamePasswordAuthMethod],
+      [authMethodToBeTested, usernamePasswordAuthMethod, sigV4AuthMethod],
+      [authMethodToBeTested, usernamePasswordAuthMethod, noAuthCredentialAuthMethod],
+      [
+        authMethodToBeTested,
+        usernamePasswordAuthMethod,
+        noAuthCredentialAuthMethod,
+        sigV4AuthMethod,
+      ],
+    ];
+
+    authMethodCombinationsToBeTested.forEach((authMethodCombination) => {
+      const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+      mockedContext.authenticationMethodRegistery = new AuthenticationMethodRegistery();
+
+      authMethodCombination.forEach((authMethod) => {
+        mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(authMethod);
+      });
+
+      component = mount(
+        wrapWithIntl(
+          <CreateDataSourceForm
+            handleTestConnection={mockTestConnectionHandler}
+            handleSubmit={mockSubmitHandler}
+            handleCancel={mockCancelHandler}
+            existingDatasourceNamesList={['dup20']}
+          />
+        ),
+        {
+          wrappingComponent: OpenSearchDashboardsContextProvider,
+          wrappingComponentProps: {
+            services: mockedContext,
+          },
+        }
+      );
+
+      expect(mockCredentialForm).not.toHaveBeenCalled();
+    });
+  });
+
+  test('should not call registered crendential form at the first round when registered method is not at the first place', () => {
+    const mockCredentialForm = jest.fn();
+    const authTypeToBeTested = 'Some Auth Type';
+    const authMethodToBeTested = {
+      name: authTypeToBeTested,
+      credentialSourceOption: {
+        value: authTypeToBeTested,
+        inputDisplay: 'some input',
+      },
+      credentialForm: mockCredentialForm,
+    } as AuthenticationMethod;
+
+    const authMethodCombinationsToBeTested = [
+      [sigV4AuthMethod, authMethodToBeTested],
+      [noAuthCredentialAuthMethod, authMethodToBeTested],
+      [noAuthCredentialAuthMethod, authMethodToBeTested, sigV4AuthMethod],
+    ];
+
+    authMethodCombinationsToBeTested.forEach((authMethodCombination) => {
+      const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+      mockedContext.authenticationMethodRegistery = new AuthenticationMethodRegistery();
+
+      authMethodCombination.forEach((authMethod) => {
+        mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(authMethod);
+      });
+
+      component = mount(
+        wrapWithIntl(
+          <CreateDataSourceForm
+            handleTestConnection={mockTestConnectionHandler}
+            handleSubmit={mockSubmitHandler}
+            handleCancel={mockCancelHandler}
+            existingDatasourceNamesList={['dup20']}
+          />
+        ),
+        {
+          wrappingComponent: OpenSearchDashboardsContextProvider,
+          wrappingComponentProps: {
+            services: mockedContext,
+          },
+        }
+      );
+
+      expect(mockCredentialForm).not.toHaveBeenCalled();
+    });
+  });
+});

src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx

@@ -22,6 +22,7 @@
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import { AuthenticationMethodRegistery } from '../../../../auth_registry';
 import { SigV4Content, SigV4ServiceName } from '../../../../../../data_source/common/data_sources';
 import {
   AuthType,
@@ -68,16 +69,17 @@
 
   authOptions: Array<EuiSuperSelectOption<string>> = [];
   isNoAuthOptionEnabled: boolean;
+  authenticationMethodRegistery: AuthenticationMethodRegistery;
 
   constructor(props: CreateDataSourceProps, context: DataSourceManagementContextValue) {
     super(props, context);
 
-    const authenticationMethodRegistery = context.services.authenticationMethodRegistery;
-    const registeredAuthMethods = authenticationMethodRegistery.getAllAuthenticationMethods();
-    const initialSelectedAuthMethod = getDefaultAuthMethod(authenticationMethodRegistery);
+    this.authenticationMethodRegistery = context.services.authenticationMethodRegistery;
+    const registeredAuthMethods = this.authenticationMethodRegistery.getAllAuthenticationMethods();
+    const initialSelectedAuthMethod = getDefaultAuthMethod(this.authenticationMethodRegistery);
 
     this.isNoAuthOptionEnabled =
-      authenticationMethodRegistery.getAuthenticationMethod(AuthType.NoAuth) !== undefined;
+      this.authenticationMethodRegistery.getAuthenticationMethod(AuthType.NoAuth) !== undefined;
 
     this.authOptions = registeredAuthMethods.map((authMethod) => {
       return authMethod.credentialSourceOption;
@@ -322,6 +324,23 @@
     };
   };
 
+  handleStateChange = (state: any) => {
+    this.setState(state);
+  };
+
+  getCredentialFormFromRegistry = (authType: string) => {
+    const registeredAuthMethod = this.authenticationMethodRegistery.getAuthenticationMethod(
+      authType
+    );
+    const authCredentialForm = registeredAuthMethod?.credentialForm;
+
+    if (authCredentialForm !== undefined) {
+      return authCredentialForm(this.state, this.handleStateChange);
+    }
+
+    return null;
+  };
+
   /* Render methods */
 
   /* Render header*/
@@ -362,6 +381,8 @@
   /* Render create new credentials*/
   renderCreateNewCredentialsForm = (type: AuthType) => {
     switch (type) {
+      case AuthType.NoAuth:
+        return null;
       case AuthType.UsernamePasswordType:
         return (
           <>
@@ -498,7 +519,7 @@
         );
 
       default:
-        break;
+        return this.getCredentialFormFromRegistry(type);
     }
   };
 
@@ -632,13 +653,7 @@
             </EuiFormRow>
 
             {/* Create New credentials */}
-            {this.state.auth.type === AuthType.UsernamePasswordType
-              ? this.renderCreateNewCredentialsForm(this.state.auth.type)
-              : null}
-
-            {this.state.auth.type === AuthType.SigV4
-              ? this.renderCreateNewCredentialsForm(this.state.auth.type)
-              : null}
+            {this.renderCreateNewCredentialsForm(this.state.auth.type)}
 
             <EuiSpacer size="xl" />
             <EuiFormRow>

src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx

@@ -21,6 +21,7 @@ import {
   sigV4AuthMethod,
   usernamePasswordAuthMethod,
 } from '../../../../types';
+import { AuthenticationMethod, AuthenticationMethodRegistery } from '../../../../auth_registry';
 
 const titleFieldIdentifier = 'dataSourceTitle';
 const titleFormRowIdentifier = '[data-test-subj="editDataSourceTitleFormRow"]';
@@ -340,3 +341,45 @@ describe('Datasource Management: Edit Datasource Form', () => {
     });
   });
 });
+
+describe('With Registered Authentication', () => {
+  let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  const mockCredentialForm = jest.fn();
+
+  test('should call registered crendential form', () => {
+    const authTypeToBeTested = 'Some Auth Type';
+    const authMethodToBeTest = {
+      name: authTypeToBeTested,
+      credentialSourceOption: {
+        value: authTypeToBeTested,
+        inputDisplay: 'some input',
+      },
+      credentialForm: mockCredentialForm,
+    } as AuthenticationMethod;
+
+    const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+    mockedContext.authenticationMethodRegistery = new AuthenticationMethodRegistery();
+    mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(authMethodToBeTest);
+
+    component = mount(
+      wrapWithIntl(
+        <EditDataSourceForm
+          existingDataSource={mockDataSourceAttributesWithNoAuth}
+          existingDatasourceNamesList={existingDatasourceNamesList}
+          onDeleteDataSource={jest.fn()}
+          handleSubmit={jest.fn()}
+          handleTestConnection={jest.fn()}
+          displayToastMessage={jest.fn()}
+        />
+      ),
+      {
+        wrappingComponent: OpenSearchDashboardsContextProvider,
+        wrappingComponentProps: {
+          services: mockedContext,
+        },
+      }
+    );
+
+    expect(mockCredentialForm).toHaveBeenCalled();
+  });
+});