diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f828f3..48dd833 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. +## v0.4.0 + +- Remove awsDatasourcesNewFormStyling feature toggle in [#90](https://github.com/grafana/grafana-aws-sdk-react/pull/90) + ## v0.3.5 - Chore: associate label with input element of the `ResourceSelector` component and update applySQLTemplateVariables type in [#88](https://github.com/grafana/grafana-aws-sdk-react/pull/88) diff --git a/package.json b/package.json index df1268d..9ba73e3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@grafana/aws-sdk", - "version": "0.3.5", + "version": "0.4.0", "description": "Common AWS features for grafana", "main": "dist/index.js", "module": "dist/esm/index.js", diff --git a/src/components/ConnectionConfig.test.tsx b/src/components/ConnectionConfig.test.tsx index 00cb185..97f0bf7 100644 --- a/src/components/ConnectionConfig.test.tsx +++ b/src/components/ConnectionConfig.test.tsx @@ -1,8 +1,8 @@ import '@testing-library/jest-dom/extend-expect'; import React from 'react'; import { render, screen, waitFor } from '@testing-library/react'; -import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthType } from '../types'; -import { ConnectionConfig, ConnectionConfigProps } from './ConnectionConfig'; +import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthType, ConnectionConfigProps } from '../types'; +import { ConnectionConfig } from './ConnectionConfig'; import selectEvent from 'react-select-event'; import { config } from '@grafana/runtime'; diff --git a/src/components/ConnectionConfig.tsx b/src/components/ConnectionConfig.tsx index 1bd5895..b700e16 100644 --- a/src/components/ConnectionConfig.tsx +++ b/src/components/ConnectionConfig.tsx @@ -1,5 +1,5 @@ import React, { FC, useEffect, useMemo, useState } from 'react'; -import { Input, Select, InlineField, ButtonGroup, ToolbarButton, FieldSet, Collapse } from '@grafana/ui'; +import { Input, Select, ButtonGroup, ToolbarButton, Collapse, Field } from '@grafana/ui'; import { onUpdateDatasourceJsonDataOptionSelect, onUpdateDatasourceResetOption, @@ -10,8 +10,8 @@ import { config } from '@grafana/runtime'; import { standardRegions } from '../regions'; import { AwsAuthType, ConnectionConfigProps } from '../types'; import { awsAuthProviderOptions } from '../providers'; -import { NewConnectionConfig } from './NewConnectionConfig'; import { assumeRoleInstructionsStyle } from './ConnectionConfig.styles'; +import { ConfigSection, ConfigSubSection } from '@grafana/experimental'; export const DEFAULT_LABEL_WIDTH = 28; const DS_TYPES_THAT_SUPPORT_TEMP_CREDS = ['cloudwatch', 'grafana-athena-datasource']; @@ -23,8 +23,7 @@ const isAwsAuthType = (value: any): value is AwsAuthType => { export const ConnectionConfig: FC = (props: ConnectionConfigProps) => { const [isARNInstructionsOpen, setIsARNInstructionsOpen] = useState(false); const [regions, setRegions] = useState((props.standardRegions || standardRegions).map(toOption)); - const { loadRegions, onOptionsChange, skipHeader = false, skipEndpoint = false } = props; - const { labelWidth = DEFAULT_LABEL_WIDTH, options, inExperimentalAuthComponent } = props; + const { loadRegions, onOptionsChange, skipHeader = false, skipEndpoint = false, options } = props; let profile = options.jsonData.profile; if (profile === undefined) { profile = options.database; @@ -62,232 +61,212 @@ export const ConnectionConfig: FC = (props: ConnectionCon loadRegions().then((regions) => setRegions(regions.map(toOption))); }, [loadRegions]); - const inputWidth = inExperimentalAuthComponent ? 'width-20' : 'width-30'; - return ( - <> - {props.newFormStylingEnabled ? ( - - ) : ( -
- - - - )} - - {options.jsonData.authType === 'keys' && ( - <> - - {props.options.secureJsonFields?.accessKey ? ( - - - - - ) : ( - - )} - - - - {props.options.secureJsonFields?.secretKey ? ( - - - - - ) : ( - - )} - - - )} - - {options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && ( -
- setIsARNInstructionsOpen(!isARNInstructionsOpen)} - > -
    -
  1. -

    - 1. Create a new IAM role in the AWS console, and select AWS account as the Trusted - entity, and select Another AWS account as the account. -

    -
    2. -
  2. -

    - 2. Enter the account ID of the Grafana account that has permission to assume this role: - 008923505280 and check the Require external ID box. -

    -
    3. -
  3. -

    - 3. Enter the following external ID:{' '} - {props.externalId || 'External Id is currently unavailable'} and click{' '} - Next. -

    -
    4. -
  4. -

    - 4. Add any required permissions you would like Grafana to be able to access on your behalf. For - more details on our permissions please{' '} - - read through our documentation - - . -

    -
    5. -
  5. -

    - 5. Give the role a name and description, and click Create role. -

    -
    6. -
  6. -

    - 6. Copy the ARN of the role you just created and paste it into the Assume Role ARN{' '} - field below. -

    -
    7. -
- -
- )} - - {awsAssumeRoleEnabled && ( - <> - - - - {options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && ( - - - - )} - - )} - {!skipEndpoint && options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && ( - - - - )} - - awsAllowedAuthProviders.includes(opt.value!))} + defaultValue={options.jsonData.authType} + onChange={(option) => { + onUpdateDatasourceJsonDataOptionSelect(props, 'authType')(option); + }} + menuShouldPortal={true} + /> + + {options.jsonData.authType === 'credentials' && ( + + + + )} + {options.jsonData.authType === 'keys' && ( + <> + + {props.options.secureJsonFields?.accessKey ? ( + + + + + ) : ( + + )} + + + + {props.options.secureJsonFields?.secretKey ? ( + + + + + ) : ( + + )} + + + )} + + + + {options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && ( +
+ setIsARNInstructionsOpen(!isARNInstructionsOpen)} + > +
    +
  1. +

    + 1. Create a new IAM role in the AWS console, and select Another AWS account as the{' '} + Trusted entity. +

    +
    2. +
  2. +

    + 2. Enter the account ID of the Grafana account that has permission to assume this role: + 008923505280 and check the Require external ID box. +

    +
    3. +
  3. +

    + 3. Enter the following external ID:{' '} + {props.externalId || 'External Id is currently unavailable'} and click{' '} + Next. +

    +
    4. +
  4. +

    + 4. Add any required permissions you would like Grafana to be able to access on your behalf. For + more details on our permissions please{' '} + + read through our documentation + + . +

    +
    5. +
  5. +

    + 5. Give the role a name and description, and click Create role. +

    +
    6. +
  6. +

    + 6. Copy the ARN of the role you just created and paste it into the Assume Role ARN{' '} + field below. +

    +
    7. +
+ +
+ )} + {awsAssumeRoleEnabled && ( + <> + + + + {options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && ( + + + + )} + + )} + + + {!skipEndpoint && options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && ( + + + + )} + + + awsAllowedAuthProviders.includes(opt.value!))} - defaultValue={options.jsonData.authType} - onChange={(option) => { - onUpdateDatasourceJsonDataOptionSelect(props, 'authType')(option); - }} - menuShouldPortal={true} - /> - - {options.jsonData.authType === 'credentials' && ( - - - - )} - {options.jsonData.authType === 'keys' && ( - <> - - {props.options.secureJsonFields?.accessKey ? ( - - - - - ) : ( - - )} - - - - {props.options.secureJsonFields?.secretKey ? ( - - - - - ) : ( - - )} - - - )} - - - - {options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && ( -
- setIsARNInstructionsOpen(!isARNInstructionsOpen)} - > -
    -
  1. -

    - 1. Create a new IAM role in the AWS console, and select Another AWS account as the{' '} - Trusted entity. -

    -
    2. -
  2. -

    - 2. Enter the account ID of the Grafana account that has permission to assume this role: - 008923505280 and check the Require external ID box. -

    -
    3. -
  3. -

    - 3. Enter the following external ID:{' '} - {props.externalId || 'External Id is currently unavailable'} and click{' '} - Next. -

    -
    4. -
  4. -

    - 4. Add any required permissions you would like Grafana to be able to access on your behalf. For - more details on our permissions please{' '} - - read through our documentation - - . -

    -
    5. -
  5. -

    - 5. Give the role a name and description, and click Create role. -

    -
    6. -
  6. -

    - 6. Copy the ARN of the role you just created and paste it into the Assume Role ARN{' '} - field below. -

    -
    7. -
- -
- )} - {awsAssumeRoleEnabled && ( - <> - - - - {options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && ( - - - - )} - - )} - - - {!props.skipEndpoint && options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && ( - - - - )} - - - >( )} - ) : ( - <> - - ) => - props.onChange({ - ...props.query, - fillMode: { - mode: FillValueOptions.Value, - value: currentTarget.valueAsNumber, - }, - }) - } - onBlur={() => props.onRunQuery?.()} - /> - - )} - - )} - ); } diff --git a/src/sql/QueryEditor/FormatSelect.test.tsx b/src/sql/QueryEditor/FormatSelect.test.tsx index 19462a9..e5078dd 100644 --- a/src/sql/QueryEditor/FormatSelect.test.tsx +++ b/src/sql/QueryEditor/FormatSelect.test.tsx @@ -6,8 +6,7 @@ import { select } from 'react-select-event'; import { FormatSelect, FormatSelectProps } from './FormatSelect'; import { SQLQuery } from '../types'; -const defaultProps: FormatSelectProps = { - newFormStylingEnabled: false, +const props: FormatSelectProps = { query: mockQuery, options: [ { @@ -24,13 +23,11 @@ const defaultProps: FormatSelectProps = { }; describe('FormatSelect', () => { - function run(testName: string, props: FormatSelectProps) { - describe(testName, () => { it('should change the format mode', async () => { render(); expect(screen.getByText('Table')).toBeInTheDocument(); - const selectEl = screen.getByLabelText(props.newFormStylingEnabled ? 'Format data frames as' : 'Format as'); + const selectEl = screen.getByLabelText('Format data frames as'); expect(selectEl).toBeInTheDocument(); await select(selectEl, 'Time Series', { container: document.body }); @@ -38,7 +35,3 @@ describe('FormatSelect', () => { expect(props.onRunQuery).toHaveBeenCalled(); }); }); - } - run('FormatSelect with newFormStylingEnabled=false', defaultProps); - run('FormatSelect with newFormStylingEnabled=true', { ...defaultProps, newFormStylingEnabled: true }); -}); diff --git a/src/sql/QueryEditor/FormatSelect.tsx b/src/sql/QueryEditor/FormatSelect.tsx index 8813748..fb9e843 100644 --- a/src/sql/QueryEditor/FormatSelect.tsx +++ b/src/sql/QueryEditor/FormatSelect.tsx @@ -1,9 +1,8 @@ import React from 'react'; import { DataQuery, SelectableValue } from '@grafana/data'; -import { InlineField, Select } from '@grafana/ui'; +import { Select } from '@grafana/ui'; export type FormatSelectProps = { - newFormStylingEnabled?: boolean; id?: string; query: TQuery; options: Array>; @@ -21,10 +20,7 @@ export function FormatSelect, For }); props.onRunQuery?.(); }; - return ( - <> - {props.newFormStylingEnabled ? ( - - - )} - - ); } diff --git a/src/sql/ResourceSelector.test.tsx b/src/sql/ResourceSelector.test.tsx index 4d4b278..66f01eb 100644 --- a/src/sql/ResourceSelector.test.tsx +++ b/src/sql/ResourceSelector.test.tsx @@ -5,18 +5,15 @@ import { select } from 'react-select-event'; import { ResourceSelector, ResourceSelectorProps } from './ResourceSelector'; import { defaultKey } from './types'; -const defaultProps: ResourceSelectorProps = { +const props: ResourceSelectorProps = { id: 'resource', label: 'resource', - newFormStylingEnabled: false, value: null, fetch: jest.fn(), onChange: jest.fn(), }; describe('ResourceSelector', () => { - function run(testName: string, props: ResourceSelectorProps) { - describe(testName, () => { it('should include a default option', () => { render(); expect(screen.queryByText('default (foo)')).toBeInTheDocument(); @@ -53,8 +50,4 @@ describe('ResourceSelector', () => { await select(selectEl, 'bar', { container: document.body }); expect(onChange).toHaveBeenCalledWith({ label: 'bar', value: 'bar' }); }); - }); - } - run('ResourceSelector with newFormStylingEnabled=false', defaultProps); - run('ResourceSelector with newFormStylingEnabled=true', { ...defaultProps, newFormStylingEnabled: true }); }); diff --git a/src/sql/ResourceSelector.tsx b/src/sql/ResourceSelector.tsx index 0e41750..e151cf7 100644 --- a/src/sql/ResourceSelector.tsx +++ b/src/sql/ResourceSelector.tsx @@ -1,5 +1,5 @@ import { SelectableValue } from '@grafana/data'; -import { InlineField, Select, SelectCommonProps } from '@grafana/ui'; +import { Select, SelectCommonProps } from '@grafana/ui'; import { isEqual } from 'lodash'; import React, { useEffect, useMemo, useState, DependencyList, useRef } from 'react'; @@ -10,7 +10,6 @@ export interface ResourceSelectorProps extends SelectCommonProps { tooltip?: string; hidden?: boolean; - newFormStylingEnabled?: boolean; // awsDatasourcesNewForStyling feature toggle value: string | null; dependencies?: DependencyList; id: string; @@ -115,10 +114,7 @@ export function ResourceSelector(props: ResourceSelectorProps) { } }; - return ( - <> - {props.newFormStylingEnabled ? ( - props.fetch && onClick()} - menuShouldPortal={true} - /> - - - )} - - ); + } diff --git a/src/types.ts b/src/types.ts index c07c8d4..77dc741 100644 --- a/src/types.ts +++ b/src/types.ts @@ -42,5 +42,4 @@ export interface ConnectionConfigProps< labelWidth?: number; inExperimentalAuthComponent?: boolean; externalId?: string; - newFormStylingEnabled?: boolean; }