[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,10 @@ import {
   sigV4AuthMethod,
   usernamePasswordAuthMethod,
 } from '../../../../types';
-import { AuthenticationMethodRegistery } from 'src/plugins/data_source_management/public/auth_registry';
+import {
+  AuthenticationMethod,
+  AuthenticationMethodRegistery,
+} from 'src/plugins/data_source_management/public/auth_registry';
 
 const titleIdentifier = '[data-test-subj="createDataSourceFormTitleField"]';
 const descriptionIdentifier = `[data-test-subj="createDataSourceFormDescriptionField"]`;
@@ -363,3 +366,46 @@ 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();
+  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(
+        <CreateDataSourceForm
+          handleTestConnection={mockTestConnectionHandler}
+          handleSubmit={mockSubmitHandler}
+          handleCancel={mockCancelHandler}
+          existingDatasourceNamesList={['dup20']}
+        />
+      ),
+      {
+        wrappingComponent: OpenSearchDashboardsContextProvider,
+        wrappingComponentProps: {
+          services: mockedContext,
+        },
+      }
+    );
+
+    expect(mockCredentialForm).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 'src/plugins/data_source_management/public/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,10 @@ import {
   sigV4AuthMethod,
   usernamePasswordAuthMethod,
 } from '../../../../types';
+import {
+  AuthenticationMethod,
+  AuthenticationMethodRegistery,
+} from 'src/plugins/data_source_management/public/auth_registry';
 
 const titleFieldIdentifier = 'dataSourceTitle';
 const titleFormRowIdentifier = '[data-test-subj="editDataSourceTitleFormRow"]';
@@ -340,3 +344,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();
+  });
+});

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

@@ -24,6 +24,7 @@
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import { AuthenticationMethodRegistery } from 'src/plugins/data_source_management/public/auth_registry';
 import { SigV4Content, SigV4ServiceName } from '../../../../../../data_source/common/data_sources';
 import { Header } from '../header';
 import {
@@ -43,6 +44,7 @@
 } from '../../../validation';
 import { UpdatePasswordModal } from '../update_password_modal';
 import { UpdateAwsCredentialModal } from '../update_aws_credential_modal';
+import { getDefaultAuthMethod } from '../../../utils';
 
 export interface EditDataSourceProps {
   existingDataSource: DataSourceAttributes;
@@ -72,23 +74,27 @@
   public readonly context!: DataSourceManagementContextValue;
   maskedPassword: string = '********';
   authOptions: Array<EuiSuperSelectOption<string>> = [];
+  authenticationMethodRegistery: AuthenticationMethodRegistery;
 
   constructor(props: EditDataSourceProps, context: DataSourceManagementContextValue) {
     super(props, context);
 
-    this.authOptions = context.services.authenticationMethodRegistery
+    this.authenticationMethodRegistery = context.services.authenticationMethodRegistery;
+    this.authOptions = this.authenticationMethodRegistery
       .getAllAuthenticationMethods()
       .map((authMethod) => {
         return authMethod.credentialSourceOption;
       });
 
+    const initialSelectedAuthMethod = getDefaultAuthMethod(this.authenticationMethodRegistery);
+
     this.state = {
       formErrorsByField: { ...defaultValidation },
       title: '',
       description: '',
       endpoint: '',
       auth: {
-        type: AuthType.NoAuth,
+        type: initialSelectedAuthMethod?.name,
         credentials: {
           username: '',
           password: '',
@@ -518,6 +524,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 modal for new credential */
@@ -796,12 +819,14 @@
 
   renderSelectedAuthType = (type: AuthType) => {
     switch (type) {
+      case AuthType.NoAuth:
+        return null;
       case AuthType.UsernamePasswordType:
         return this.renderUsernamePasswordFields();
       case AuthType.SigV4:
         return this.renderSigV4ContentFields();
       default:
-        return null;
+        return this.getCredentialFormFromRegistry(type);
     }
   };