Hide/Show authentication method in multi data source plugin based on configuration

CHANGELOG.md

@@ -69,6 +69,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add api registry and allow it to be added into client config in data source plugin ([#5895](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5895))
 - [Multiple Datasource] Concatenate data source name with index pattern name and change delimiter to double colon ([#5907](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5907))
 - [Multiple Datasource] Refactor client and legacy client to use authentication registry ([#5881](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5881))
+- [Multiple Datasource] Hide/Show authentication method in multi data source plugin based on configuration ([#5916](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5916))
 
 ### 🐛 Bug Fixes
 

config/opensearch_dashboards.yml

@@ -270,6 +270,17 @@
 #    'ff00::/8',
 # ]
 
+# Set enabled false to hide authentication method in OpenSearch Dashboards.
+# If this setting is commented then all 3 options will be available in OpenSearch Dashboards.
+# Default value will be considered to True.
+#data_source.authTypes:
+#   NoAuthentication:
+#     enabled: true
+#   UsernamePassword:
+#     enabled: true
+#   AWSSigV4:
+#     enabled: true
+
 # Set the value of this setting to false to hide the help menu link to the OpenSearch Dashboards user survey
 # opensearchDashboards.survey.url: "https://survey.opensearch.org"
 

src/plugins/data_source/config.ts

@@ -39,6 +39,17 @@ export const configSchema = schema.object({
     appender: fileAppenderSchema,
   }),
   endpointDeniedIPs: schema.maybe(schema.arrayOf(schema.string())),
+  authTypes: schema.object({
+    NoAuthentication: schema.object({
+      enabled: schema.boolean({ defaultValue: true }),
+    }),
+    UsernamePassword: schema.object({
+      enabled: schema.boolean({ defaultValue: true }),
+    }),
+    AWSSigV4: schema.object({
+      enabled: schema.boolean({ defaultValue: true }),
+    }),
+  }),
 });
 
 export type DataSourcePluginConfigType = TypeOf<typeof configSchema>;

src/plugins/data_source/public/plugin.ts

@@ -22,6 +22,9 @@ export class DataSourcePlugin implements Plugin<DataSourcePluginSetup, DataSourc
     return {
       dataSourceEnabled: config.enabled,
       hideLocalCluster: config.hideLocalCluster,
+      noAuthenticationTypeEnabled: config.authTypes.NoAuthentication.enabled,
+      usernamePasswordAuthEnabled: config.authTypes.UsernamePassword.enabled,
+      awsSigV4AuthEnabled: config.authTypes.AWSSigV4.enabled,
     };
   }
 
@@ -30,6 +33,9 @@ export class DataSourcePlugin implements Plugin<DataSourcePluginSetup, DataSourc
     return {
       dataSourceEnabled: config.enabled,
       hideLocalCluster: config.hideLocalCluster,
+      noAuthenticationTypeEnabled: config.authTypes.NoAuthentication.enabled,
+      usernamePasswordAuthEnabled: config.authTypes.UsernamePassword.enabled,
+      awsSigV4AuthEnabled: config.authTypes.AWSSigV4.enabled,
     };
   }
 

src/plugins/data_source/public/types.ts

@@ -6,9 +6,15 @@
 export interface DataSourcePluginSetup {
   dataSourceEnabled: boolean;
   hideLocalCluster: boolean;
+  noAuthenticationTypeEnabled: boolean;
+  usernamePasswordAuthEnabled: boolean;
+  awsSigV4AuthEnabled: boolean;
 }
 
 export interface DataSourcePluginStart {
   dataSourceEnabled: boolean;
   hideLocalCluster: boolean;
+  noAuthenticationTypeEnabled: boolean;
+  usernamePasswordAuthEnabled: boolean;
+  awsSigV4AuthEnabled: boolean;
 }

src/plugins/data_source/server/index.ts

@@ -11,6 +11,7 @@ export const config: PluginConfigDescriptor<DataSourcePluginConfigType> = {
   exposeToBrowser: {
     enabled: true,
     hideLocalCluster: true,
+    authTypes: true,
   },
   schema: configSchema,
 };

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<string>;
+  credentialForm?: React.JSX.Element;
+  crendentialFormField?: { [key: string]: string };
 }
 
 export type IAuthenticationMethodRegistery = Omit<

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

@@ -11,7 +11,13 @@ import { OpenSearchDashboardsContextProvider } from '../../../../../../opensearc
 import { CreateDataSourceForm } from './create_data_source_form';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { AuthType } from '../../../../types';
+import {
+  AuthType,
+  noAuthCredentialAuthMethod,
+  sigV4AuthMethod,
+  usernamePasswordAuthMethod,
+} from '../../../../types';
+import { AuthenticationMethodRegistery } from 'src/plugins/data_source_management/public/auth_registry';
 
 const titleIdentifier = '[data-test-subj="createDataSourceFormTitleField"]';
 const descriptionIdentifier = `[data-test-subj="createDataSourceFormDescriptionField"]`;
@@ -21,9 +27,18 @@ const usernameIdentifier = '[data-test-subj="createDataSourceFormUsernameField"]
 const passwordIdentifier = '[data-test-subj="createDataSourceFormPasswordField"]';
 const createButtonIdentifier = '[data-test-subj="createDataSourceButton"]';
 const testConnectionButtonIdentifier = '[data-test-subj="createDataSourceTestConnectionButton"]';
+const authOptionSelectorIdentifier = '[data-test-subj="createDataSourceFormAuthTypeSelect"]';
 
 describe('Datasource Management: Create Datasource form', () => {
   const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+  mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(
+    noAuthCredentialAuthMethod
+  );
+  mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(
+    usernamePasswordAuthMethod
+  );
+  mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(sigV4AuthMethod);
+
   let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
   const mockSubmitHandler = jest.fn();
   const mockTestConnectionHandler = jest.fn();
@@ -222,3 +237,129 @@ describe('Datasource Management: Create Datasource form', () => {
     expect(component.find(passwordIdentifier).first().props().isInvalid).toBe(false);
   });
 });
+
+describe('Datasource Management: Create Datasource form with different authType configurations', () => {
+  let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  const mockSubmitHandler = jest.fn();
+  const mockTestConnectionHandler = jest.fn();
+  const mockCancelHandler = jest.fn();
+
+  /* Scenario 1: Should render the page normally with all authMethod combinations */
+  test('should render normally with all authMethod combinations', () => {
+    const authMethodCombinationsToBeTested = [
+      [noAuthCredentialAuthMethod],
+      [usernamePasswordAuthMethod],
+      [sigV4AuthMethod],
+      [noAuthCredentialAuthMethod, usernamePasswordAuthMethod],
+      [noAuthCredentialAuthMethod, sigV4AuthMethod],
+      [usernamePasswordAuthMethod, sigV4AuthMethod],
+      [noAuthCredentialAuthMethod, usernamePasswordAuthMethod, sigV4AuthMethod],
+    ];
+
+    authMethodCombinationsToBeTested.forEach((authMethodCombination) => {
+      const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+      mockedContext.authenticationMethodRegistery = new AuthenticationMethodRegistery();
+
+      authMethodCombination.forEach((authMethod) => {
+        mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(authMethod);
+      });
+
+      component = mount(
+        wrapWithIntl(
+          <CreateDataSourceForm
+            handleTestConnection={mockTestConnectionHandler}
+            handleSubmit={mockSubmitHandler}
+            handleCancel={mockCancelHandler}
+            existingDatasourceNamesList={['dup20']}
+          />
+        ),
+        {
+          wrappingComponent: OpenSearchDashboardsContextProvider,
+          wrappingComponentProps: {
+            services: mockedContext,
+          },
+        }
+      );
+
+      const testConnBtn = component.find(testConnectionButtonIdentifier).last();
+      expect(testConnBtn.prop('disabled')).toBe(true);
+    });
+  });
+
+  /* Scenario 2: options selector should be disabled when only one authMethod supported */
+  test('options selector should be disabled when only one authMethod supported', () => {
+    const authMethodCombinationsToBeTested = [
+      [noAuthCredentialAuthMethod],
+      [usernamePasswordAuthMethod],
+      [sigV4AuthMethod],
+    ];
+
+    authMethodCombinationsToBeTested.forEach((authMethodCombination) => {
+      const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+      mockedContext.authenticationMethodRegistery = new AuthenticationMethodRegistery();
+
+      authMethodCombination.forEach((authMethod) => {
+        mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(authMethod);
+      });
+
+      component = mount(
+        wrapWithIntl(
+          <CreateDataSourceForm
+            handleTestConnection={mockTestConnectionHandler}
+            handleSubmit={mockSubmitHandler}
+            handleCancel={mockCancelHandler}
+            existingDatasourceNamesList={['dup20']}
+          />
+        ),
+        {
+          wrappingComponent: OpenSearchDashboardsContextProvider,
+          wrappingComponentProps: {
+            services: mockedContext,
+          },
+        }
+      );
+
+      const authOptionSelector = component.find(authOptionSelectorIdentifier).last();
+      expect(authOptionSelector.prop('disabled')).toBe(true);
+    });
+  });
+
+  /* Scenario 3: options selector should not be disabled when more than one authMethod supported */
+  test('options selector should not be disabled when more than one authMethod supported', () => {
+    const authMethodCombinationsToBeTested = [
+      [sigV4AuthMethod, usernamePasswordAuthMethod],
+      [noAuthCredentialAuthMethod, sigV4AuthMethod],
+      [noAuthCredentialAuthMethod, usernamePasswordAuthMethod],
+      [noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod],
+    ];
+
+    authMethodCombinationsToBeTested.forEach((authMethodCombination) => {
+      const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+      mockedContext.authenticationMethodRegistery = new AuthenticationMethodRegistery();
+
+      authMethodCombination.forEach((authMethod) => {
+        mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(authMethod);
+      });
+
+      component = mount(
+        wrapWithIntl(
+          <CreateDataSourceForm
+            handleTestConnection={mockTestConnectionHandler}
+            handleSubmit={mockSubmitHandler}
+            handleCancel={mockCancelHandler}
+            existingDatasourceNamesList={['dup20']}
+          />
+        ),
+        {
+          wrappingComponent: OpenSearchDashboardsContextProvider,
+          wrappingComponentProps: {
+            services: mockedContext,
+          },
+        }
+      );
+
+      const authOptionSelector = component.find(authOptionSelectorIdentifier).last();
+      expect(authOptionSelector.prop('disabled')).toBe(false);
+    });
+  });
+});

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

@@ -18,13 +18,13 @@ import {
   EuiSuperSelect,
   EuiSpacer,
   EuiText,
+  EuiSuperSelectOption,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import { SigV4Content, SigV4ServiceName } from '../../../../../../data_source/common/data_sources';
 import {
   AuthType,
-  credentialSourceOptions,
   DataSourceAttributes,
   DataSourceManagementContextValue,
   UsernamePasswordTypedContent,
@@ -38,7 +38,7 @@ import {
   isTitleValid,
   performDataSourceFormValidation,
 } from '../../../validation';
-import { isValidUrl } from '../../../utils';
+import { getDefaultAuthMethod, isValidUrl } from '../../../utils';
 
 export interface CreateDataSourceProps {
   existingDatasourceNamesList: string[];
@@ -55,7 +55,7 @@ export interface CreateDataSourceState {
   endpoint: string;
   auth: {
     type: AuthType;
-    credentials: UsernamePasswordTypedContent | SigV4Content;
+    credentials: UsernamePasswordTypedContent | SigV4Content | undefined;
   };
 }
 
@@ -66,19 +66,28 @@ export class CreateDataSourceForm extends React.Component<
   static contextType = contextType;
   public readonly context!: DataSourceManagementContextValue;
 
+  authOptions: Array<EuiSuperSelectOption<string>> = [];
+
   constructor(props: CreateDataSourceProps, context: DataSourceManagementContextValue) {
     super(props, context);
 
+    const authenticationMethodRegistery = context.services.authenticationMethodRegistery;
+    const registeredAuthMethods = authenticationMethodRegistery.getAllAuthenticationMethods();
+    const initialSelectedAuthMethod = getDefaultAuthMethod(authenticationMethodRegistery);
+
+    this.authOptions = registeredAuthMethods.map((authMethod) => {
+      return authMethod.credentialSourceOption;
+    });
+
     this.state = {
       formErrorsByField: { ...defaultValidation },
       title: '',
       description: '',
       endpoint: '',
       auth: {
-        type: AuthType.UsernamePasswordType,
+        type: initialSelectedAuthMethod?.name,
         credentials: {
-          username: '',
-          password: '',
+          ...initialSelectedAuthMethod?.crendentialFormField,
         },
       },
     };
@@ -297,6 +306,9 @@ export class CreateDataSourceForm extends React.Component<
         service: this.state.auth.credentials.service || SigV4ServiceName.OpenSearch,
       } as SigV4Content;
     }
+    if (this.state.auth.type === AuthType.NoAuth) {
+      credentials = {};
+    }
 
     return {
       title: this.state.title,
@@ -598,9 +610,10 @@ export class CreateDataSourceForm extends React.Component<
             <EuiSpacer size="l" />
             <EuiFormRow>
               <EuiSuperSelect
-                options={credentialSourceOptions}
+                options={this.authOptions}
                 valueOfSelected={this.state.auth.type}
                 onChange={(value) => this.onChangeAuthType(value)}
+                disabled={this.authOptions.length <= 1}
                 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

@@ -15,7 +15,12 @@ import {
 import { OpenSearchDashboardsContextProvider } from '../../../../../../opensearch_dashboards_react/public';
 import { EditDataSourceForm } from './edit_data_source_form';
 import { act } from 'react-dom/test-utils';
-import { AuthType } from '../../../../types';
+import {
+  AuthType,
+  noAuthCredentialAuthMethod,
+  sigV4AuthMethod,
+  usernamePasswordAuthMethod,
+} from '../../../../types';
 
 const titleFieldIdentifier = 'dataSourceTitle';
 const titleFormRowIdentifier = '[data-test-subj="editDataSourceTitleFormRow"]';
@@ -29,6 +34,14 @@ const passwordFieldIdentifier = '[data-test-subj="updateDataSourceFormPasswordFi
 const updatePasswordBtnIdentifier = '[data-test-subj="editDatasourceUpdatePasswordBtn"]';
 describe('Datasource Management: Edit Datasource Form', () => {
   const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+  mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(
+    noAuthCredentialAuthMethod
+  );
+  mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(
+    usernamePasswordAuthMethod
+  );
+  mockedContext.authenticationMethodRegistery.registerAuthenticationMethod(sigV4AuthMethod);
+
   let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
   const mockFn = jest.fn();