From ba8bba78fca95c608de995b7c8665398c02b8bd4 Mon Sep 17 00:00:00 2001 From: Kuba Siemiatkowski <112862936+sasklacz@users.noreply.github.com> Date: Mon, 1 May 2023 12:16:16 +0200 Subject: [PATCH] Datasource: Move the Delete data source button back to the bottom (#67552) * - move delete button back to the lower section * - remove the top Delete button * - fix e2e tests --- .betterer.results | 3 --- .../grafana-e2e-selectors/src/selectors/pages.ts | 2 +- .../datasources/components/ButtonRow.test.tsx | 5 ++++- .../features/datasources/components/ButtonRow.tsx | 15 +++++++++++++-- .../datasources/components/EditDataSource.tsx | 10 ++++++++-- .../components/EditDataSourceActions.tsx | 13 ++----------- 6 files changed, 28 insertions(+), 20 deletions(-) diff --git a/.betterer.results b/.betterer.results index 3b1d4fa728d..84d3ed13d5e 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2595,9 +2595,6 @@ exports[`better eslint`] = { "public/app/features/datasources/components/BasicSettings.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] ], - "public/app/features/datasources/components/ButtonRow.tsx:5381": [ - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] - ], "public/app/features/datasources/components/DataSourceReadOnlyMessage.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] ], diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index fd3412b8559..ca4ab410469 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -20,7 +20,7 @@ export const Pages = { name: 'Data source settings page name input field', delete: 'Data source settings page Delete button', readOnly: 'Data source settings page read only message', - saveAndTest: 'Data source settings page Save and Test button', + saveAndTest: 'data-testid Data source settings page Save and Test button', alert: 'Data source settings page Alert', }, DataSources: { diff --git a/public/app/features/datasources/components/ButtonRow.test.tsx b/public/app/features/datasources/components/ButtonRow.test.tsx index db90d92bb97..4232314a48e 100644 --- a/public/app/features/datasources/components/ButtonRow.test.tsx +++ b/public/app/features/datasources/components/ButtonRow.test.tsx @@ -8,6 +8,8 @@ import { ButtonRow, Props } from './ButtonRow'; const setup = (propOverrides?: object) => { const props: Props = { canSave: false, + canDelete: true, + onDelete: jest.fn(), onSubmit: jest.fn(), onTest: jest.fn(), }; @@ -21,11 +23,12 @@ describe('', () => { it('should render component', () => { setup(); + expect(screen.getByTestId(selectors.pages.DataSource.delete)).toBeInTheDocument(); expect(screen.getByText('Test')).toBeInTheDocument(); }); it('should render save & test', () => { setup({ canSave: true }); - expect(screen.getByRole('button', { name: selectors.pages.DataSource.saveAndTest })).toBeInTheDocument(); + expect(screen.getByTestId(selectors.pages.DataSource.saveAndTest)).toBeInTheDocument(); }); }); diff --git a/public/app/features/datasources/components/ButtonRow.tsx b/public/app/features/datasources/components/ButtonRow.tsx index 3058d6b1e9b..8239b2f7b56 100644 --- a/public/app/features/datasources/components/ButtonRow.tsx +++ b/public/app/features/datasources/components/ButtonRow.tsx @@ -5,20 +5,31 @@ import { Button } from '@grafana/ui'; export interface Props { canSave: boolean; + canDelete: boolean; + onDelete: (event: React.MouseEvent) => void; onSubmit: (event: React.MouseEvent) => void; onTest: (event: React.MouseEvent) => void; } -export function ButtonRow({ canSave, onSubmit, onTest }: Props) { +export function ButtonRow({ canSave, canDelete, onDelete, onSubmit, onTest }: Props) { return (
+ {canSave && ( diff --git a/public/app/features/datasources/components/EditDataSource.tsx b/public/app/features/datasources/components/EditDataSource.tsx index 1cad01373a8..460fd603244 100644 --- a/public/app/features/datasources/components/EditDataSource.tsx +++ b/public/app/features/datasources/components/EditDataSource.tsx @@ -108,7 +108,7 @@ export function EditDataSourceView({ onUpdate, }: ViewProps) { const { plugin, loadError, testingStatus, loading } = dataSourceSettings; - const { readOnly, hasWriteRights } = dataSourceRights; + const { readOnly, hasWriteRights, hasDeleteRights } = dataSourceRights; const hasDataSource = dataSource.id > 0; const dsi = getDataSourceSrv()?.getInstanceSettings(dataSource.uid); @@ -179,7 +179,13 @@ export function EditDataSourceView({ - + ); } diff --git a/public/app/features/datasources/components/EditDataSourceActions.tsx b/public/app/features/datasources/components/EditDataSourceActions.tsx index ae07c1dafdc..95cbc85c558 100644 --- a/public/app/features/datasources/components/EditDataSourceActions.tsx +++ b/public/app/features/datasources/components/EditDataSourceActions.tsx @@ -3,11 +3,11 @@ import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { config } from '@grafana/runtime'; -import { Button, LinkButton, useStyles2 } from '@grafana/ui'; +import { LinkButton, useStyles2 } from '@grafana/ui'; import { contextSrv } from 'app/core/core'; import { AccessControlAction } from 'app/types'; -import { useDataSource, useDataSourceRights, useDeleteLoadedDataSource } from '../state'; +import { useDataSource } from '../state'; import { trackCreateDashboardClicked, trackExploreClicked } from '../tracking'; import { constructDataSourceExploreUrl } from '../utils'; @@ -26,13 +26,8 @@ interface Props { export function EditDataSourceActions({ uid }: Props) { const styles = useStyles2(getStyles); const dataSource = useDataSource(uid); - const onDelete = useDeleteLoadedDataSource(); - - const { readOnly, hasDeleteRights } = useDataSourceRights(uid); const hasExploreRights = contextSrv.hasPermission(AccessControlAction.DataSourcesExplore); - const canDelete = !readOnly && hasDeleteRights; - return ( <> )} - - ); }