From 679cee0cd2e645ce8d3da43318e1c437fa2b86f8 Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Tue, 12 Mar 2024 18:29:39 +0000
Subject: [PATCH 1/8] [Token Exchange Unification] State update for
 createDataSource and editDataSource pages

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 .../create_form/create_data_source_form.tsx   | 13 ++--
 .../edit_form/edit_data_source_form.tsx       | 70 +++++++++++++------
 2 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
index ab5df7220c7..e4d1d54fc50 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -153,15 +153,20 @@ export class CreateDataSourceForm extends React.Component<
   };
 
   onChangeAuthType = (authType: AuthType) => {
+    const credentials = this.state.auth.credentials;
+
+    const registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
+      (credentials ?? {}) as { [key: string]: string },
+      authType,
+      this.authenticationMethodRegistery
+    );
+
     this.setState({
       auth: {
         ...this.state.auth,
         type: authType,
         credentials: {
-          ...this.state.auth.credentials,
-          service:
-            (this.state.auth.credentials.service as SigV4ServiceName) ||
-            SigV4ServiceName.OpenSearch,
+          ...registeredAuthCredentials,
         },
       },
     });
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index 0089e8f12af..ebd6970b949 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -24,6 +24,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import deepEqual from 'fast-deep-equal';
 import { AuthenticationMethodRegistery } from '../../../../auth_registry';
 import { SigV4Content, SigV4ServiceName } from '../../../../../../data_source/common/data_sources';
 import { Header } from '../header';
@@ -100,11 +101,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
       auth: {
         type: initialSelectedAuthMethod?.name,
         credentials: {
-          username: '',
-          password: '',
-          region: '',
-          accessKey: '',
-          secretKey: '',
+          ...initialSelectedAuthMethod?.crendentialFormField,
         },
       },
       showUpdatePasswordModal: false,
@@ -127,10 +124,11 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     if (this.props.existingDataSource) {
       const { title, description, endpoint, auth } = this.props.existingDataSource;
 
-      const authTypeCheckResults = {
-        isUserNamePassword: auth.type === AuthType.UsernamePasswordType,
-        isSigV4: auth.type === AuthType.SigV4,
-      };
+      const registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
+        (auth.credentials ?? {}) as { [key: string]: string },
+        auth.type,
+        this.authenticationMethodRegistery
+      );
 
       this.setState({
         title,
@@ -139,14 +137,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         auth: {
           type: auth.type,
           credentials: {
-            username: authTypeCheckResults.isUserNamePassword ? auth.credentials?.username : '',
-            password: authTypeCheckResults.isUserNamePassword ? this.maskedPassword : '',
-            service: authTypeCheckResults.isSigV4
-              ? auth.credentials?.service || SigV4ServiceName.OpenSearch
-              : '',
-            region: authTypeCheckResults.isSigV4 ? auth.credentials!.region : '',
-            accessKey: authTypeCheckResults.isSigV4 ? this.maskedPassword : '',
-            secretKey: authTypeCheckResults.isSigV4 ? this.maskedPassword : '',
+            ...registeredAuthCredentials,
           },
         },
       });
@@ -185,16 +176,21 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   };
 
   onChangeAuthType = (authType: AuthType) => {
+    const credentials = this.state.auth.credentials;
+
+    const registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
+      (credentials ?? {}) as { [key: string]: string },
+      authType,
+      this.authenticationMethodRegistery
+    );
+
     this.setState(
       {
         auth: {
           ...this.state.auth,
           type: authType,
           credentials: {
-            ...this.state.auth.credentials,
-            service:
-              (this.state.auth.credentials?.service as SigV4ServiceName) ||
-              SigV4ServiceName.OpenSearch,
+            ...registeredAuthCredentials,
           },
         },
       },
@@ -427,6 +423,14 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         break;
 
       default:
+        const currentCredentials = (this.state.auth.credentials ?? {}) as {
+          [key: string]: string;
+        };
+        credentials = extractRegisteredAuthTypeCredentials(
+          currentCredentials,
+          this.state.auth.type,
+          this.authenticationMethodRegistery
+        );
         break;
     }
 
@@ -1029,6 +1033,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     const isServiceNameChanged =
       isAuthTypeSigV4Unchanged &&
       formValues.auth.credentials?.service !== auth.credentials?.service;
+    const isRegisteredAuthCredentialChanged = this.isRegisteredAuthCredentialUpdated();
 
     if (
       formValues.title !== title ||
@@ -1036,7 +1041,8 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
       formValues.auth.type !== auth.type ||
       isUsernameChanged ||
       isRegionChanged ||
-      isServiceNameChanged
+      isServiceNameChanged ||
+      isRegisteredAuthCredentialChanged
     ) {
       this.setState({ showUpdateOptions: true });
     } else {
@@ -1044,6 +1050,26 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     }
   };
 
+  isRegisteredAuthCredentialUpdated = () => {
+    const { auth } = this.props.existingDataSource;
+    const currentAuth = this.state.auth;
+
+    if (
+      currentAuth.type === AuthType.NoAuth ||
+      currentAuth.type === AuthType.UsernamePasswordType ||
+      currentAuth.type === AuthType.SigV4
+    ) {
+      return false;
+    }
+
+    const registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
+      (currentAuth?.credentials ?? {}) as { [key: string]: string },
+      currentAuth.type,
+      this.authenticationMethodRegistery
+    );
+    return !deepEqual(auth?.credentials ?? {}, registeredAuthCredentials);
+  };
+
   renderBottomBar = () => {
     return (
       <EuiBottomBar data-test-subj="datasource-edit-bottomBar" affordForDisplacement={true}>

From 83e24f44c959d58ccadd1717890dbc3031a5a1ea Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Tue, 12 Mar 2024 20:34:24 +0000
Subject: [PATCH 2/8] [Token Exchange Unification] rectify state for dataSource
 creation page and edit page

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 .../edit_form/edit_data_source_form.tsx         | 17 +++++++++++------
 .../public/components/utils.ts                  |  3 ++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index ebd6970b949..68f65d8d6ec 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -176,13 +176,18 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   };
 
   onChangeAuthType = (authType: AuthType) => {
-    const credentials = this.state.auth.credentials;
+    let registeredAuthCredentials;
+    if (this.props.existingDataSource && authType === this.props.existingDataSource.auth.type) {
+      registeredAuthCredentials = this.props.existingDataSource.auth.credentials;
+    } else {
+      const credentials = this.state.auth.credentials;
 
-    const registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
-      (credentials ?? {}) as { [key: string]: string },
-      authType,
-      this.authenticationMethodRegistery
-    );
+      registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
+        (credentials ?? {}) as { [key: string]: string },
+        authType,
+        this.authenticationMethodRegistery
+      );
+    }
 
     this.setState(
       {
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index 871abc1dc63..d7680b16f0a 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -154,7 +154,8 @@ export const extractRegisteredAuthTypeCredentials = (
     authenticationMethodRegistery.getAuthenticationMethod(authType)?.crendentialFormField ?? {};
 
   Object.keys(registeredCredentialField).forEach((credentialFiled) => {
-    registeredCredentials[credentialFiled] = currentCredentialState[credentialFiled] ?? '';
+    registeredCredentials[credentialFiled] =
+      currentCredentialState[credentialFiled] ?? registeredCredentialField[credentialFiled];
   });
 
   return registeredCredentials;

From abdfa2d2785fc4f15cf4b1914878d35b9c4722a2 Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Tue, 12 Mar 2024 21:18:51 +0000
Subject: [PATCH 3/8] [UT] Add more test cases for util functions

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 .../public/components/utils.test.ts           | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/src/plugins/data_source_management/public/components/utils.test.ts b/src/plugins/data_source_management/public/components/utils.test.ts
index cefaa628bf2..83edf161148 100644
--- a/src/plugins/data_source_management/public/components/utils.test.ts
+++ b/src/plugins/data_source_management/public/components/utils.test.ts
@@ -380,5 +380,71 @@ describe('DataSourceManagement: Utils.ts', () => {
 
       expect(deepEqual(registedAuthTypeCredentials, expectExtractedAuthCredentials));
     });
+
+    test('Should inherit value from registered field when credentail state not have registered field', () => {
+      const authTypeToBeTested = 'Some Auth Type';
+
+      const authMethodToBeTested = {
+        name: authTypeToBeTested,
+        credentialSourceOption: {
+          value: authTypeToBeTested,
+          inputDisplay: 'some input',
+        },
+        crendentialFormField: {
+          registeredField: 'some value',
+        },
+      } as AuthenticationMethod;
+
+      const mockedCredentialState = {} as { [key: string]: string };
+
+      const expectExtractedAuthCredentials = {
+        registeredField: 'some value',
+      };
+
+      const authenticationMethodRegistery = new AuthenticationMethodRegistery();
+      authenticationMethodRegistery.registerAuthenticationMethod(authMethodToBeTested);
+
+      const registedAuthTypeCredentials = extractRegisteredAuthTypeCredentials(
+        mockedCredentialState,
+        authTypeToBeTested,
+        authenticationMethodRegistery
+      );
+
+      expect(deepEqual(registedAuthTypeCredentials, expectExtractedAuthCredentials));
+    });
+
+    test('Should not inherit value from registered field when credentail state have registered field', () => {
+      const authTypeToBeTested = 'Some Auth Type';
+
+      const authMethodToBeTested = {
+        name: authTypeToBeTested,
+        credentialSourceOption: {
+          value: authTypeToBeTested,
+          inputDisplay: 'some input',
+        },
+        crendentialFormField: {
+          registeredField: 'Some value',
+        },
+      } as AuthenticationMethod;
+
+      const mockedCredentialState = {
+        registeredField: 'some other values',
+      } as { [key: string]: string };
+
+      const expectExtractedAuthCredentials = {
+        registeredField: 'some other values',
+      };
+
+      const authenticationMethodRegistery = new AuthenticationMethodRegistery();
+      authenticationMethodRegistery.registerAuthenticationMethod(authMethodToBeTested);
+
+      const registedAuthTypeCredentials = extractRegisteredAuthTypeCredentials(
+        mockedCredentialState,
+        authTypeToBeTested,
+        authenticationMethodRegistery
+      );
+
+      expect(deepEqual(registedAuthTypeCredentials, expectExtractedAuthCredentials));
+    });
   });
 });

From c62847e8a61632cf1dbf6b87cac20a43392bbd16 Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Tue, 12 Mar 2024 22:27:13 +0000
Subject: [PATCH 4/8] [Token Exchange Unification] Update dataSource bottom
 banner control

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 .../edit_form/edit_data_source_form.tsx       | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index 68f65d8d6ec..3957c4fe4f6 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -176,18 +176,15 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   };
 
   onChangeAuthType = (authType: AuthType) => {
-    let registeredAuthCredentials;
-    if (this.props.existingDataSource && authType === this.props.existingDataSource.auth.type) {
-      registeredAuthCredentials = this.props.existingDataSource.auth.credentials;
-    } else {
-      const credentials = this.state.auth.credentials;
-
-      registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
-        (credentials ?? {}) as { [key: string]: string },
-        authType,
-        this.authenticationMethodRegistery
-      );
-    }
+    const credentials =
+      this.props.existingDataSource && authType === this.props.existingDataSource.auth.type
+        ? this.props.existingDataSource.auth.credentials
+        : this.state.auth.credentials;
+    const registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
+      (credentials ?? {}) as { [key: string]: string },
+      authType,
+      this.authenticationMethodRegistery
+    );
 
     this.setState(
       {
@@ -1067,12 +1064,19 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
       return false;
     }
 
+    const existingAuthCredentials = extractRegisteredAuthTypeCredentials(
+      (auth?.credentials ?? {}) as { [key: string]: string },
+      currentAuth.type,
+      this.authenticationMethodRegistery
+    );
+
     const registeredAuthCredentials = extractRegisteredAuthTypeCredentials(
       (currentAuth?.credentials ?? {}) as { [key: string]: string },
       currentAuth.type,
       this.authenticationMethodRegistery
     );
-    return !deepEqual(auth?.credentials ?? {}, registeredAuthCredentials);
+
+    return !deepEqual(existingAuthCredentials, registeredAuthCredentials);
   };
 
   renderBottomBar = () => {

From 500c375e97976f89904c4555bbc7957d278acbae Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Tue, 12 Mar 2024 23:33:44 +0000
Subject: [PATCH 5/8] Update changefile.md

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f9e5e4d2ed..9ef9eb96cdb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Adds a session token to AWS credentials ([#6103](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6103))
 - [Multiple Datasource] Add Vega support to MDS by specifying a data source name in the Vega spec ([#5975](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5975))
 - [Multiple Datasource] Test connection schema validation for registered auth types ([#6109](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6109))
+- [Multiple DataSource] DataSource creation and edition page improvement to better support registered auth types ([#6122](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6122))
 - [Workspace] Consume workspace id in saved object client ([#6014](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6014))
 - [Multiple Datasource] Export DataSourcePluginRequestContext at top level for plugins to use ([#6108](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6108))
 - [Multiple Datasource] Expose filterfn in datasource menu component to allow filter data sources before rendering in navigation bar ([#6113](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6113))

From be1abaca29f5363b7a7d03b82ff7ebc2eeb1fac8 Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Wed, 13 Mar 2024 18:29:06 +0000
Subject: [PATCH 6/8] Add comments

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 .../components/edit_form/edit_data_source_form.tsx               | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index 3957c4fe4f6..294eb9ab50c 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -176,6 +176,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   };
 
   onChangeAuthType = (authType: AuthType) => {
+    /* If the selected authentication type matches, utilize the existing data source's credentials directly.*/
     const credentials =
       this.props.existingDataSource && authType === this.props.existingDataSource.auth.type
         ? this.props.existingDataSource.auth.credentials

From 5dbc94318a9b282facb2629b96a6a0d2e2bea3e8 Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Thu, 14 Mar 2024 04:14:32 +0000
Subject: [PATCH 7/8] Code review change, fix typo

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 .../auth_registry/authentication_methods_registry.ts      | 2 +-
 .../create_form/create_data_source_form.test.tsx          | 2 +-
 .../components/create_form/create_data_source_form.tsx    | 2 +-
 .../components/edit_form/edit_data_source_form.test.tsx   | 2 +-
 .../components/edit_form/edit_data_source_form.tsx        | 2 +-
 .../public/components/utils.test.ts                       | 8 ++++----
 .../data_source_management/public/components/utils.ts     | 2 +-
 .../validation/datasource_form_validation.test.ts         | 2 +-
 src/plugins/data_source_management/public/types.ts        | 6 +++---
 9 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/plugins/data_source_management/public/auth_registry/authentication_methods_registry.ts b/src/plugins/data_source_management/public/auth_registry/authentication_methods_registry.ts
index a4152cb0627..7d6bf38026a 100644
--- a/src/plugins/data_source_management/public/auth_registry/authentication_methods_registry.ts
+++ b/src/plugins/data_source_management/public/auth_registry/authentication_methods_registry.ts
@@ -13,7 +13,7 @@ export interface AuthenticationMethod {
     state: { [key: string]: any },
     setState: React.Dispatch<React.SetStateAction<any>>
   ) => React.JSX.Element;
-  crendentialFormField?: { [key: string]: string };
+  credentialFormField?: { [key: string]: string };
 }
 
 export type IAuthenticationMethodRegistery = Omit<
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx
index 043f8026784..2c7778868bc 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx
@@ -534,7 +534,7 @@ describe('Datasource Management: Create Datasource form with registered Auth Typ
         inputDisplay: 'some input',
       },
       credentialForm: mockCredentialForm,
-      crendentialFormField: {
+      credentialFormField: {
         userNameRegistered: 'some filled in userName from registed auth credential form',
         passWordRegistered: 'some filled in password from registed auth credential form',
       },
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
index e4d1d54fc50..180476e8b08 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -101,7 +101,7 @@ export class CreateDataSourceForm extends React.Component<
       auth: {
         type: initialSelectedAuthMethod?.name,
         credentials: {
-          ...initialSelectedAuthMethod?.crendentialFormField,
+          ...initialSelectedAuthMethod?.credentialFormField,
         },
       },
     };
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
index 25ea22ef274..06d0af486bb 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx
@@ -410,7 +410,7 @@ describe('With Registered Authentication', () => {
         inputDisplay: 'some input',
       },
       credentialForm: mockedCredentialForm,
-      crendentialFormField: {},
+      credentialFormField: {},
     } as AuthenticationMethod;
 
     const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index 294eb9ab50c..2cb1db4515d 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -101,7 +101,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
       auth: {
         type: initialSelectedAuthMethod?.name,
         credentials: {
-          ...initialSelectedAuthMethod?.crendentialFormField,
+          ...initialSelectedAuthMethod?.credentialFormField,
         },
       },
       showUpdatePasswordModal: false,
diff --git a/src/plugins/data_source_management/public/components/utils.test.ts b/src/plugins/data_source_management/public/components/utils.test.ts
index 83edf161148..2e5890b8384 100644
--- a/src/plugins/data_source_management/public/components/utils.test.ts
+++ b/src/plugins/data_source_management/public/components/utils.test.ts
@@ -285,7 +285,7 @@ describe('DataSourceManagement: Utils.ts', () => {
           value: authTypeToBeTested,
           inputDisplay: 'some input',
         },
-        crendentialFormField: {
+        credentialFormField: {
           userNameRegistered: '',
           passWordRegistered: '',
         },
@@ -352,7 +352,7 @@ describe('DataSourceManagement: Utils.ts', () => {
           value: authTypeToBeTested,
           inputDisplay: 'some input',
         },
-        crendentialFormField: {
+        credentialFormField: {
           userNameRegistered: '',
           passWordRegistered: '',
         },
@@ -390,7 +390,7 @@ describe('DataSourceManagement: Utils.ts', () => {
           value: authTypeToBeTested,
           inputDisplay: 'some input',
         },
-        crendentialFormField: {
+        credentialFormField: {
           registeredField: 'some value',
         },
       } as AuthenticationMethod;
@@ -422,7 +422,7 @@ describe('DataSourceManagement: Utils.ts', () => {
           value: authTypeToBeTested,
           inputDisplay: 'some input',
         },
-        crendentialFormField: {
+        credentialFormField: {
           registeredField: 'Some value',
         },
       } as AuthenticationMethod;
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index d7680b16f0a..6f55b71b250 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -151,7 +151,7 @@ export const extractRegisteredAuthTypeCredentials = (
 ) => {
   const registeredCredentials = {} as { [key: string]: string };
   const registeredCredentialField =
-    authenticationMethodRegistery.getAuthenticationMethod(authType)?.crendentialFormField ?? {};
+    authenticationMethodRegistery.getAuthenticationMethod(authType)?.credentialFormField ?? {};
 
   Object.keys(registeredCredentialField).forEach((credentialFiled) => {
     registeredCredentials[credentialFiled] =
diff --git a/src/plugins/data_source_management/public/components/validation/datasource_form_validation.test.ts b/src/plugins/data_source_management/public/components/validation/datasource_form_validation.test.ts
index fbac18c7ddc..1eaaea0f567 100644
--- a/src/plugins/data_source_management/public/components/validation/datasource_form_validation.test.ts
+++ b/src/plugins/data_source_management/public/components/validation/datasource_form_validation.test.ts
@@ -82,7 +82,7 @@ describe('DataSourceManagement: Form Validation', () => {
           inputDisplay: 'some input',
         },
         credentialForm: jest.fn(),
-        crendentialFormField: {
+        credentialFormField: {
           userNameRegistered: 'some filled in userName from registed auth credential form',
           passWordRegistered: 'some filled in password from registed auth credential form',
         },
diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts
index d8df61d304b..bf0743468fd 100644
--- a/src/plugins/data_source_management/public/types.ts
+++ b/src/plugins/data_source_management/public/types.ts
@@ -74,7 +74,7 @@ export const noAuthCredentialField = {};
 export const noAuthCredentialAuthMethod = {
   name: AuthType.NoAuth,
   credentialSourceOption: noAuthCredentialOption,
-  crendentialFormField: noAuthCredentialField,
+  credentialFormField: noAuthCredentialField,
 };
 
 export const usernamePasswordCredentialOption = {
@@ -92,7 +92,7 @@ export const usernamePasswordCredentialField = {
 export const usernamePasswordAuthMethod = {
   name: AuthType.UsernamePasswordType,
   credentialSourceOption: usernamePasswordCredentialOption,
-  crendentialFormField: usernamePasswordCredentialField,
+  credentialFormField: usernamePasswordCredentialField,
 };
 
 export const sigV4CredentialOption = {
@@ -127,7 +127,7 @@ export const sigV4CredentialField = {
 export const sigV4AuthMethod = {
   name: AuthType.SigV4,
   credentialSourceOption: sigV4CredentialOption,
-  crendentialFormField: sigV4CredentialField,
+  credentialFormField: sigV4CredentialField,
 };
 
 export const credentialSourceOptions = [

From c104509aecc0a36bc1de90acc336576e3aa6f334 Mon Sep 17 00:00:00 2001
From: Xinrui Bai <xinruiba@amazon.com>
Date: Thu, 14 Mar 2024 04:17:05 +0000
Subject: [PATCH 8/8] Resolve comments, update typo in test cases

Signed-off-by: Xinrui Bai <xinruiba@amazon.com>
---
 .../data_source_management/public/components/utils.test.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/data_source_management/public/components/utils.test.ts b/src/plugins/data_source_management/public/components/utils.test.ts
index 2e5890b8384..a327c22bf0c 100644
--- a/src/plugins/data_source_management/public/components/utils.test.ts
+++ b/src/plugins/data_source_management/public/components/utils.test.ts
@@ -381,7 +381,7 @@ describe('DataSourceManagement: Utils.ts', () => {
       expect(deepEqual(registedAuthTypeCredentials, expectExtractedAuthCredentials));
     });
 
-    test('Should inherit value from registered field when credentail state not have registered field', () => {
+    test('Should inherit value from registered field when credential state not have registered field', () => {
       const authTypeToBeTested = 'Some Auth Type';
 
       const authMethodToBeTested = {