Replace EuiSelect component with EuiSuperSelect in data-source plugin

Signed-off-by: Bandini Bhopi <bandinib@amazon.com>
opensearch-project · Oct 19, 2023 · 6abe9f8 · 6abe9f8
1 parent e1db842
commit 6abe9f8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/...c/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/...c/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -15,7 +15,7 @@ import {
   EuiForm,
   EuiFormRow,
   EuiPageContent,
-  EuiSelect,
+  EuiSuperSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -124,8 +124,7 @@ export class CreateDataSourceForm extends React.Component<
     });
   };
 
-  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 @@ export class CreateDataSourceForm extends React.Component<
     });
   };
 
-  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 @@ export class CreateDataSourceForm extends React.Component<
                 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 @@ export class CreateDataSourceForm extends React.Component<
             {/* 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"
               />

diff --git a/...agement/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/...agement/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -17,7 +17,7 @@ import {
   EuiFormRow,
   EuiHorizontalRule,
   EuiPanel,
-  EuiSelect,
+  EuiSuperSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -166,8 +166,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     });
   };
 
-  onChangeAuthType = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const authType = e.target.value as AuthType;
+  onChangeAuthType = (authType: AuthType) => {
     this.setState(
       {
         auth: {
@@ -241,13 +240,13 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     });
   };
 
-  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 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             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 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             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"
           />

diff --git a/src/plugins/data_source_management/public/types.ts b/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',
     }),
   },