Refactor Auth component

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## v2.0.0
+
+- Auth: Refactoring and renaming some inputs so this can be a breaking change
+
 ## v1.8.0
 
 - Auth: add ability to customize labels and placeholders for user/password fields

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/experimental",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "Experimental Grafana components and APIs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

src/ConfigEditor/Auth/Auth.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { AuthMethod, DefaultAuthMethod, CustomMethod, CustomMethodId } from './types';
+import { AuthMethod, AuthMethodSelectOption, CustomMethod, CustomMethodId } from './types';
 import { AuthMethodSettings } from './auth-method/AuthMethodSettings';
 import { TLSSettings, Props as TLSSettingsProps } from './tls/TLSSettings';
 import { Props as BasicAuthProps } from './auth-method/BasicAuth';
@@ -11,7 +11,7 @@ export type Props = {
   selectedMethod: AuthMethod | CustomMethodId;
   mostCommonMethod?: AuthMethod | CustomMethodId;
   visibleMethods?: Array<AuthMethod | CustomMethodId>;
-  extendedDefaultOptions?: Partial<Record<AuthMethod, DefaultAuthMethod>>;
+  defaultOptionsOverrides?: Partial<Record<AuthMethod, AuthMethodSelectOption>>;
   customMethods?: CustomMethod[];
   onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void;
   basicAuth?: Omit<BasicAuthProps, 'readOnly'>;
@@ -24,7 +24,7 @@ export const Auth: React.FC<Props> = ({
   selectedMethod,
   mostCommonMethod,
   visibleMethods,
-  extendedDefaultOptions,
+  defaultOptionsOverrides,
   customMethods,
   onAuthMethodSelect,
   basicAuth,
@@ -46,7 +46,7 @@ export const Auth: React.FC<Props> = ({
           mostCommonMethod={mostCommonMethod}
           customMethods={customMethods}
           visibleMethods={visibleMethods}
-          extendedDefaultOptions={extendedDefaultOptions}
+          defaultOptionsOverrides={defaultOptionsOverrides}
           onAuthMethodSelect={onAuthMethodSelect}
           basicAuth={basicAuth}
           readOnly={readOnly}

src/ConfigEditor/Auth/README.md

@@ -162,9 +162,18 @@ If `customHeaders` is not passed, custom headers section will not be rendered.
 
 ## Mixing old and new style props
 
-In some cases you might want to use the `convertLegacyAuthProps` helper to create base properties that can then be extended with custom parameters. This is useful when the provisioning file used has similar structure to the one defined in ()[]. It can make using the `Auth` component extremely easy and still provide enough flexibility to customize it for your needs. For instance using the `BasicAuth` we can change it's name and description shown in the dropdown, as well as tooltips.
+In some cases you might want to use the `convertLegacyAuthProps` helper to create base properties that can then be extended with custom parameters. This is for instance useful when the provisioning file used has the basic authentication defined (example below):
 
-```ts
+```yaml
+    basicAuth: true
+    basicAuthUser: username
+    secureJsonData:
+      basicAuthPassword: password
+```
+
+It can make using the `Auth` component extremely easy and still provide enough flexibility to customize it for your needs. For instance using the `BasicAuth` we can change it's name and description shown in the dropdown, as well as the tooltips.
+
+```tsx
 import { Auth, AuthMethod, convertLegacyAuthProps } from '@grafana/experimental';
 
 export const ConfigEditor = ({ options, onOptionsChange }) => {
@@ -180,9 +189,11 @@ export const ConfigEditor = ({ options, onOptionsChange }) => {
       ...convertedProps.basicAuth,
       userTooltip: 'The user is the username assigned to the MongoDB account.',
       passwordTooltip: 'The password is the password assigned to the MongoDB account.',
-    }
+    },
+    // when custom headers section should not be visible and props were converted using the helper function it is required to set the value to null
+    customHeaders={null}
   };
-  const extendDefaultAuth = {
+  const extendedDefaultAuth = {
     [AuthMethod.BasicAuth]: {
       label: 'Credentials',
       description: 'Authenticate with default credentials assigned to the MongoDB account upon creation.'
@@ -193,10 +204,8 @@ export const ConfigEditor = ({ options, onOptionsChange }) => {
     <div>
       <Auth
         {...newAuthProps}
-        extendedDefaultOptions={extendDefaultAuth}
+        defaultOptionsOverrides={extendedDefaultAuth}
         visibleMethods={AuthMethodsList}
-        // when custom headers section should not be visible and props were converted using the helper function it is required to set the value to null
-        customHeaders={null}
       />
     </div>
   );
@@ -209,7 +218,7 @@ You can extend the component with your custom auth method(s) by passing it to th
 
 `customMethods` is an array of the following objects:
 
-```ts
+```tsx
 type CustomMethod = {
   id: `custom-${string}`;
   label: string;

src/ConfigEditor/Auth/auth-method/AuthMethodSettings.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { screen, render, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AuthMethodSettings, Props } from './AuthMethodSettings';
-import { AuthMethod, DefaultAuthMethod } from '../types';
+import { AuthMethod, AuthMethodSelectOption } from '../types';
 
 type PartialProps = Partial<Omit<Props, 'basicAuth'> & { basicAuth?: Partial<Props['basicAuth']> }>;
 const getProps = (partialProps?: PartialProps): Props => ({
@@ -32,7 +32,7 @@ describe('<AuthMethodSettings />', () => {
   it('should override Basic auth name and display it', async () => {
     const props = getProps({
       selectedMethod: AuthMethod.BasicAuth,
-      extendedDefaultOptions: { [AuthMethod.BasicAuth]: { label: 'Override '} } as Record<AuthMethod, DefaultAuthMethod>,
+      defaultOptionsOverrides: { [AuthMethod.BasicAuth]: { label: 'Override '} } as Record<AuthMethod, AuthMethodSelectOption>,
     });
     render(<AuthMethodSettings {...props} />);
 

src/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx

@@ -4,7 +4,7 @@ import { useTheme2, Select } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { BasicAuth, Props as BasicAuthProps } from './BasicAuth';
 import { ConfigSubSection } from '../../ConfigSection';
-import { AuthMethod, CustomMethod, CustomMethodId , DefaultAuthMethod } from '../types';
+import { AuthMethod, CustomMethod, CustomMethodId , AuthMethodSelectOption } from '../types';
 
 const defaultOptions: Record<AuthMethod, SelectableValue<AuthMethod>> = {
   [AuthMethod.BasicAuth]: {
@@ -35,7 +35,7 @@ export type Props = {
   selectedMethod: AuthMethod | CustomMethodId;
   mostCommonMethod?: AuthMethod | CustomMethodId;
   visibleMethods?: Array<AuthMethod | CustomMethodId>;
-  extendedDefaultOptions?: Partial<Record<AuthMethod, DefaultAuthMethod>>;
+  defaultOptionsOverrides?: Partial<Record<AuthMethod, AuthMethodSelectOption>>;
   customMethods?: CustomMethod[];
   onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void;
   basicAuth?: Omit<BasicAuthProps, 'readOnly'>;
@@ -46,7 +46,7 @@ export const AuthMethodSettings: React.FC<Props> = ({
   selectedMethod,
   mostCommonMethod,
   visibleMethods: visibleMethodsFromProps,
-  extendedDefaultOptions,
+  defaultOptionsOverrides,
   customMethods,
   onAuthMethodSelect,
   basicAuth,
@@ -80,13 +80,9 @@ export const AuthMethodSettings: React.FC<Props> = ({
     const preparedDefaultOptions = {} as Record<AuthMethod, SelectableValue<AuthMethod>>;
     let k: keyof typeof AuthMethod;
     for (k in defaultOptions) {
-      if (extendedDefaultOptions && extendedDefaultOptions[k]) {
-        preparedDefaultOptions[k] = {
-          ...defaultOptions[k],
-          ...extendedDefaultOptions[k],
-        }
-      } else {
-        preparedDefaultOptions[k] = defaultOptions[k];
+      preparedDefaultOptions[k] = {
+        ...defaultOptions[k],
+        ...defaultOptionsOverrides?.[k],
       }
     }
 
@@ -107,7 +103,7 @@ export const AuthMethodSettings: React.FC<Props> = ({
         }
         return option;
       });
-  }, [visibleMethods, customMethods, extendedDefaultOptions, mostCommonMethod, hasSelect]);
+  }, [visibleMethods, customMethods, defaultOptionsOverrides, mostCommonMethod, hasSelect]);
 
   let selected = selectedMethod;
   if (!hasSelect) {

src/ConfigEditor/Auth/types.ts

@@ -7,7 +7,7 @@ export enum AuthMethod {
   CrossSiteCredentials = 'CrossSiteCredentials',
 }
 
-export interface DefaultAuthMethod {
+export interface AuthMethodSelectOption {
   label?: string;
   description?: string;
 };