Replace OuiSelect component with OuiSuperSelect in data-source plugin

CHANGELOG.md

@@ -18,6 +18,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### 📈 Features/Enhancements
 
 - Add support for read-only mode through tenants ([#4498](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4498))
+- Replace OuiSelect component with OuiSuperSelect in data-source plugin ([#5315](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5315))
 - [Workspace] Add core workspace service module to enable the implementation of workspace features within OSD plugins ([#5092](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5092))
 - [Workspace] Setup workspace skeleton and implement basic CRUD API ([#5075](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5075))
 - [Decouple] Add new cross compatibility check core service which export functionality for plugins to verify if their OpenSearch plugin counterpart is installed on the cluster or has incompatible version to configure the plugin behavior([#4710](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4710))

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

@@ -53,11 +53,8 @@ describe('Datasource Management: Create Datasource form', () => {
   };
 
   const setAuthTypeValue = (testSubjId: string, value: string) => {
-    component.find(testSubjId).last().simulate('change', {
-      target: {
-        value,
-      },
-    });
+    component.find(testSubjId).last().simulate('click');
+    component.find({ id: value }).last().simulate('click');
   };
 
   beforeEach(() => {
@@ -103,7 +100,7 @@ describe('Datasource Management: Create Datasource form', () => {
 
     const { authType, username, password } = getFields(component);
 
-    expect(authType.prop('value')).toBe(AuthType.NoAuth);
+    expect(authType.prop('valueOfSelected')).toBe(AuthType.NoAuth);
     expect(username.exists()).toBeFalsy(); // username field does not exist when No Auth option is selected
     expect(password.exists()).toBeFalsy(); // password field does not exist when No Auth option is selected
   });

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

@@ -15,7 +15,7 @@
   EuiForm,
   EuiFormRow,
   EuiPageContent,
-  EuiSelect,
+  EuiSuperSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -124,8 +124,7 @@
     });
   };
 
-  onChangeAuthType = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const authType = e.target.value as AuthType;
+  onChangeAuthType = (authType: AuthType) => {
     this.setState({
       auth: {
         ...this.state.auth,
@@ -140,13 +139,13 @@
     });
   };
 
-  onChangeSigV4ServiceName = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  onChangeSigV4ServiceName = (service: SigV4ServiceName) => {
     this.setState({
       auth: {
         ...this.state.auth,
         credentials: {
           ...this.state.auth.credentials,
-          service: e.target.value as SigV4ServiceName,
+          service,
         },
       },
     });
@@ -425,10 +424,10 @@
                 defaultMessage: 'Service Name',
               })}
             >
-              <EuiSelect
+              <EuiSuperSelect
                 options={sigV4ServiceOptions}
-                value={this.state.auth.credentials.service}
-                onChange={(e) => this.onChangeSigV4ServiceName(e)}
+                valueOfSelected={this.state.auth.credentials.service}
+                onChange={(value) => this.onChangeSigV4ServiceName(value)}
                 name="ServiceName"
                 data-test-subj="createDataSourceFormSigV4ServiceTypeSelect"
               />
@@ -598,10 +597,10 @@
             {/* Credential source */}
             <EuiSpacer size="l" />
             <EuiFormRow>
-              <EuiSelect
+              <EuiSuperSelect
                 options={credentialSourceOptions}
-                value={this.state.auth.type}
-                onChange={(e) => this.onChangeAuthType(e)}
+                valueOfSelected={this.state.auth.type}
+                onChange={(value) => this.onChangeAuthType(value)}
                 name="Credential"
                 data-test-subj="createDataSourceFormAuthTypeSelect"
               />

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

@@ -50,11 +50,8 @@ describe('Datasource Management: Edit Datasource Form', () => {
   };
 
   const setAuthTypeValue = (testSubjId: string, value: string) => {
-    component.find(testSubjId).last().simulate('change', {
-      target: {
-        value,
-      },
-    });
+    component.find(testSubjId).last().simulate('click');
+    component.find({ id: value }).last().simulate('click');
   };
 
   describe('Case 1: With Username & Password', () => {

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

@@ -17,7 +17,7 @@
   EuiFormRow,
   EuiHorizontalRule,
   EuiPanel,
-  EuiSelect,
+  EuiSuperSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -166,8 +166,7 @@
     });
   };
 
-  onChangeAuthType = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const authType = e.target.value as AuthType;
+  onChangeAuthType = (authType: AuthType) => {
     this.setState(
       {
         auth: {
@@ -241,13 +240,13 @@
     });
   };
 
-  onChangeSigV4ServiceName = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  onChangeSigV4ServiceName = (service: SigV4ServiceName) => {
     this.setState({
       auth: {
         ...this.state.auth,
         credentials: {
           ...this.state.auth.credentials,
-          service: e.target.value as SigV4ServiceName,
+          service,
         } as SigV4Content,
       },
     });
@@ -772,9 +771,9 @@
             defaultMessage: 'Credential',
           })}
         >
-          <EuiSelect
+          <EuiSuperSelect
             options={credentialSourceOptions}
-            value={this.state.auth.type}
+            valueOfSelected={this.state.auth.type}
             onChange={this.onChangeAuthType}
             name="Credential"
             data-test-subj="editDataSourceSelectAuthType"
@@ -827,10 +826,10 @@
             defaultMessage: 'Service Name',
           })}
         >
-          <EuiSelect
+          <EuiSuperSelect
             options={sigV4ServiceOptions}
-            value={this.state.auth.credentials?.service}
-            onChange={(e) => this.onChangeSigV4ServiceName(e)}
+            valueOfSelected={this.state.auth.credentials?.service}
+            onChange={(value) => this.onChangeSigV4ServiceName(value)}
             name="ServiceName"
             data-test-subj="editDataSourceFormSigV4ServiceTypeSelect"
           />

src/plugins/data_source_management/public/types.ts

@@ -61,19 +61,19 @@ export enum AuthType {
 export const credentialSourceOptions = [
   {
     value: AuthType.NoAuth,
-    text: i18n.translate('dataSourceManagement.credentialSourceOptions.NoAuthentication', {
+    inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.NoAuthentication', {
       defaultMessage: 'No authentication',
     }),
   },
   {
     value: AuthType.UsernamePasswordType,
-    text: i18n.translate('dataSourceManagement.credentialSourceOptions.UsernamePassword', {
+    inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.UsernamePassword', {
       defaultMessage: 'Username & Password',
     }),
   },
   {
     value: AuthType.SigV4,
-    text: i18n.translate('dataSourceManagement.credentialSourceOptions.AwsSigV4', {
+    inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.AwsSigV4', {
       defaultMessage: 'AWS SigV4',
     }),
   },
@@ -82,13 +82,13 @@ export const credentialSourceOptions = [
 export const sigV4ServiceOptions = [
   {
     value: SigV4ServiceName.OpenSearch,
-    text: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearch', {
+    inputDisplay: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearch', {
       defaultMessage: 'Amazon OpenSearch Service',
     }),
   },
   {
     value: SigV4ServiceName.OpenSearchServerless,
-    text: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearchServerless', {
+    inputDisplay: i18n.translate('dataSourceManagement.SigV4ServiceOptions.OpenSearchServerless', {
       defaultMessage: 'Amazon OpenSearch Serverless',
     }),
   },