From 0339047dc65b388bf38744ac909ffd2ab3cf312a Mon Sep 17 00:00:00 2001 From: Xinrui Bai Date: Fri, 23 Feb 2024 00:12:12 +0000 Subject: [PATCH] [AuthRegistry Onboard] Support default selected auth type in datasource creation page Signed-off-by: Xinrui Bai --- .../authentication_methods_registry.ts | 3 +- .../create_form/create_data_source_form.tsx | 27 ++++++++----- .../edit_form/edit_data_source_form.tsx | 13 +++++-- .../mount_management_section.tsx | 2 +- .../data_source_management/public/types.ts | 39 +++++++++++++++---- 5 files changed, 62 insertions(+), 22 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 5c3b3481583e..1f1ab81aa60a 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 @@ -8,8 +8,9 @@ import { EuiSuperSelectOption } from '@elastic/eui'; export interface AuthenticationMethod { name: string; - credentialForm?: React.JSX.Element; credentialSourceOption: EuiSuperSelectOption; + credentialForm?: React.JSX.Element; + crendentialFormField?: any; } 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.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx index 735da5d0d68e..b462d5861159 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 @@ -28,6 +28,8 @@ import { DataSourceAttributes, DataSourceManagementContextValue, UsernamePasswordTypedContent, + defaultAuthType, + noAuthCredentialAuthMethod, sigV4ServiceOptions, } from '../../../../types'; import { Header } from '../header'; @@ -66,16 +68,24 @@ export class CreateDataSourceForm extends React.Component< static contextType = contextType; public readonly context!: DataSourceManagementContextValue; - authOptions: Array>; + authOptions: Array> = []; constructor(props: CreateDataSourceProps, context: DataSourceManagementContextValue) { super(props, context); - this.authOptions = context.services.authenticationMethodRegistery - .getAllAuthenticationMethods() - .map((authMethod) => { - return authMethod.credentialSourceOption; - }); + const authenticationMethodRegistery = context.services.authenticationMethodRegistery; + const registeredAuthMethods = authenticationMethodRegistery.getAllAuthenticationMethods(); + + this.authOptions = registeredAuthMethods.map((authMethod) => { + return authMethod.credentialSourceOption; + }); + + const defaultAuthMethod = + registeredAuthMethods.length > 0 + ? authenticationMethodRegistery.getAuthenticationMethod(registeredAuthMethods[0].name) + : noAuthCredentialAuthMethod; + const initialSelectedAuthMethod = + authenticationMethodRegistery.getAuthenticationMethod(defaultAuthType) ?? defaultAuthMethod; this.state = { formErrorsByField: { ...defaultValidation }, @@ -83,10 +93,9 @@ export class CreateDataSourceForm extends React.Component< description: '', endpoint: '', auth: { - type: AuthType.UsernamePasswordType, + type: initialSelectedAuthMethod?.name, credentials: { - username: '', - password: '', + ...initialSelectedAuthMethod?.crendentialFormField, }, }, }; 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 9af843a64071..b3f83b372f05 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 @@ -20,6 +20,7 @@ import { EuiSuperSelect, EuiSpacer, EuiText, + EuiSuperSelectOption, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { FormattedMessage } from '@osd/i18n/react'; @@ -27,7 +28,6 @@ import { SigV4Content, SigV4ServiceName } from '../../../../../../data_source/co import { Header } from '../header'; import { AuthType, - credentialSourceOptions, DataSourceAttributes, DataSourceManagementContextValue, sigV4ServiceOptions, @@ -71,10 +71,17 @@ export class EditDataSourceForm extends React.Component> = []; constructor(props: EditDataSourceProps, context: DataSourceManagementContextValue) { super(props, context); + this.authOptions = context.services.authenticationMethodRegistery + .getAllAuthenticationMethods() + .map((authMethod) => { + return authMethod.credentialSourceOption; + }); + this.state = { formErrorsByField: { ...defaultValidation }, title: '', @@ -772,9 +779,9 @@ export class EditDataSourceForm extends React.Component this.onChangeAuthType(value)} name="Credential" data-test-subj="editDataSourceSelectAuthType" /> diff --git a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx index ae932e48f852..6b421a32d2b2 100644 --- a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx +++ b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx @@ -15,7 +15,7 @@ import { ManagementAppMountParams } from '../../../management/public'; import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public'; import { CreateDataSourceWizardWithRouter } from '../components/create_data_source_wizard'; import { DataSourceTableWithRouter } from '../components/data_source_table'; -import { AuthType, DataSourceManagementContext } from '../types'; +import { DataSourceManagementContext } from '../types'; import { EditDataSourceWithRouter } from '../components/edit_data_source'; import { AuthenticationMethodRegistery } from '../auth_registry'; diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts index 9d9dc016e991..7b669da15e5e 100644 --- a/src/plugins/data_source_management/public/types.ts +++ b/src/plugins/data_source_management/public/types.ts @@ -60,6 +60,8 @@ export enum AuthType { SigV4 = 'sigv4', } +export const defaultAuthType = AuthType.UsernamePasswordType; + export const noAuthCredentialOption = { value: AuthType.NoAuth, inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.NoAuthentication', { @@ -67,6 +69,18 @@ export const noAuthCredentialOption = { }), }; +export const noAuthCredentialField = { + username: '', + password: '', + service: 'es', +}; + +export const noAuthCredentialAuthMethod = { + name: AuthType.NoAuth, + credentialSourceOption: noAuthCredentialOption, + crendentialFormField: noAuthCredentialField, +}; + export const usernamePasswordCredentialOption = { value: AuthType.UsernamePasswordType, inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.UsernamePassword', { @@ -74,6 +88,17 @@ export const usernamePasswordCredentialOption = { }), }; +export const usernamePasswordCredentialField = { + username: '', + password: '', +}; + +export const usernamePasswordAuthMethod = { + name: AuthType.UsernamePasswordType, + credentialSourceOption: usernamePasswordCredentialOption, + crendentialFormField: usernamePasswordCredentialField, +}; + export const sigV4CredentialOption = { value: AuthType.SigV4, inputDisplay: i18n.translate('dataSourceManagement.credentialSourceOptions.AwsSigV4', { @@ -96,19 +121,17 @@ export const sigV4ServiceOptions = [ }, ]; -export const noAuthCredentialAuthMethod = { - name: AuthType.NoAuth, - credentialSourceOption: noAuthCredentialOption, -}; - -export const usernamePasswordAuthMethod = { - name: AuthType.UsernamePasswordType, - credentialSourceOption: usernamePasswordCredentialOption, +export const sigV4CredentialField = { + region: '', + accessKey: '', + secretKey: '', + service: '', }; export const sigV4AuthMethod = { name: AuthType.SigV4, credentialSourceOption: sigV4CredentialOption, + crendentialFormField: sigV4CredentialField, }; export const credentialSourceOptions = [