diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fbc0e6..e1c57e7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 29cfeb3..18d2b53 100644 --- a/package.json +++ b/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", diff --git a/src/ConfigEditor/Auth/Auth.tsx b/src/ConfigEditor/Auth/Auth.tsx index 6aea154..9fa49a5 100644 --- a/src/ConfigEditor/Auth/Auth.tsx +++ b/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; - extendedDefaultOptions?: Partial>; + defaultOptionsOverrides?: Partial>; customMethods?: CustomMethod[]; onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void; basicAuth?: Omit; @@ -24,7 +24,7 @@ export const Auth: React.FC = ({ selectedMethod, mostCommonMethod, visibleMethods, - extendedDefaultOptions, + defaultOptionsOverrides, customMethods, onAuthMethodSelect, basicAuth, @@ -46,7 +46,7 @@ export const Auth: React.FC = ({ mostCommonMethod={mostCommonMethod} customMethods={customMethods} visibleMethods={visibleMethods} - extendedDefaultOptions={extendedDefaultOptions} + defaultOptionsOverrides={defaultOptionsOverrides} onAuthMethodSelect={onAuthMethodSelect} basicAuth={basicAuth} readOnly={readOnly} diff --git a/src/ConfigEditor/Auth/README.md b/src/ConfigEditor/Auth/README.md index c02792e..5ced8d3 100644 --- a/src/ConfigEditor/Auth/README.md +++ b/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 }) => {
); @@ -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; diff --git a/src/ConfigEditor/Auth/auth-method/AuthMethodSettings.test.tsx b/src/ConfigEditor/Auth/auth-method/AuthMethodSettings.test.tsx index d1df99a..5a94ff7 100644 --- a/src/ConfigEditor/Auth/auth-method/AuthMethodSettings.test.tsx +++ b/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 & { basicAuth?: Partial }>; const getProps = (partialProps?: PartialProps): Props => ({ @@ -32,7 +32,7 @@ describe('', () => { it('should override Basic auth name and display it', async () => { const props = getProps({ selectedMethod: AuthMethod.BasicAuth, - extendedDefaultOptions: { [AuthMethod.BasicAuth]: { label: 'Override '} } as Record, + defaultOptionsOverrides: { [AuthMethod.BasicAuth]: { label: 'Override '} } as Record, }); render(); diff --git a/src/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx b/src/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx index 4b13208..4d61a18 100644 --- a/src/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx +++ b/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.BasicAuth]: { @@ -35,7 +35,7 @@ export type Props = { selectedMethod: AuthMethod | CustomMethodId; mostCommonMethod?: AuthMethod | CustomMethodId; visibleMethods?: Array; - extendedDefaultOptions?: Partial>; + defaultOptionsOverrides?: Partial>; customMethods?: CustomMethod[]; onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void; basicAuth?: Omit; @@ -46,7 +46,7 @@ export const AuthMethodSettings: React.FC = ({ selectedMethod, mostCommonMethod, visibleMethods: visibleMethodsFromProps, - extendedDefaultOptions, + defaultOptionsOverrides, customMethods, onAuthMethodSelect, basicAuth, @@ -80,13 +80,9 @@ export const AuthMethodSettings: React.FC = ({ const preparedDefaultOptions = {} as Record>; 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 = ({ } return option; }); - }, [visibleMethods, customMethods, extendedDefaultOptions, mostCommonMethod, hasSelect]); + }, [visibleMethods, customMethods, defaultOptionsOverrides, mostCommonMethod, hasSelect]); let selected = selectedMethod; if (!hasSelect) { diff --git a/src/ConfigEditor/Auth/types.ts b/src/ConfigEditor/Auth/types.ts index c1af1ed..a6349e8 100644 --- a/src/ConfigEditor/Auth/types.ts +++ b/src/ConfigEditor/Auth/types.ts @@ -7,7 +7,7 @@ export enum AuthMethod { CrossSiteCredentials = 'CrossSiteCredentials', } -export interface DefaultAuthMethod { +export interface AuthMethodSelectOption { label?: string; description?: string; };