From 3a92b38f9921a3857472d79276a3c3ff99d57196 Mon Sep 17 00:00:00 2001 From: Bandini Bhopi Date: Tue, 17 Oct 2023 21:55:15 +0000 Subject: [PATCH 1/2] Replace EuiSelect component with EuiSuperSelect in data-source plugin Signed-off-by: Bandini Bhopi --- CHANGELOG.md | 1 + .../create_form/create_data_source_form.tsx | 21 +++++++++---------- .../edit_form/edit_data_source_form.tsx | 19 ++++++++--------- .../data_source_management/public/types.ts | 10 ++++----- 4 files changed, 25 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e4b91b6282e..74e1778ebe9d 100644 --- a/CHANGELOG.md +++ b/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)) 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 3107ee84006a..86052cff8995 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 @@ -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) => { - 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) => { + 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', })} > - 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 */} - this.onChangeAuthType(e)} + valueOfSelected={this.state.auth.type} + onChange={(value) => this.onChangeAuthType(value)} name="Credential" data-test-subj="createDataSourceFormAuthTypeSelect" /> 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 e05813ca6f04..9af843a64071 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 @@ -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) => { - const authType = e.target.value as AuthType; + onChangeAuthType = (authType: AuthType) => { this.setState( { auth: { @@ -241,13 +240,13 @@ export class EditDataSourceForm extends React.Component) => { + 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 - - 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 index 1bede8fbfca9..d461daba82cc 100644 --- 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', }), }, From 27cefed9796ae265272d824f18df0640459d34bc Mon Sep 17 00:00:00 2001 From: Bandini Bhopi Date: Thu, 21 Dec 2023 22:46:31 +0000 Subject: [PATCH 2/2] Fix UT Signed-off-by: Bandini Bhopi --- .../create_form/create_data_source_form.test.tsx | 9 +++------ .../components/edit_form/edit_data_source_form.test.tsx | 7 ++----- 2 files changed, 5 insertions(+), 11 deletions(-) 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 ad1d02c87db4..c3c34cbdab1d 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 @@ -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 }); 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 41133f65035a..c57b5b414ed3 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 @@ -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', () => {