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

@@ -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"]
     ],

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: {

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('<ButtonRow>', () => {
   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();
   });
 });

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<HTMLButtonElement>) => void;
   onSubmit: (event: React.MouseEvent<HTMLButtonElement>) => void;
   onTest: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-export function ButtonRow({ canSave, onSubmit, onTest }: Props) {
+export function ButtonRow({ canSave, canDelete, onDelete, onSubmit, onTest }: Props) {
   return (
     <div className="gf-form-button-row">
+      <Button
+        type="button"
+        variant="destructive"
+        disabled={!canDelete}
+        onClick={onDelete}
+        data-testid={selectors.pages.DataSource.delete}
+      >
+        Delete
+      </Button>
       {canSave && (
         <Button
           type="submit"
           variant="primary"
           disabled={!canSave}
           onClick={onSubmit}
-          aria-label={selectors.pages.DataSource.saveAndTest}
+          data-testid={selectors.pages.DataSource.saveAndTest}
         >
           Save &amp; test
         </Button>

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({
 
       <DataSourceTestingStatus testingStatus={testingStatus} exploreUrl={exploreUrl} dataSource={dataSource} />
 
-      <ButtonRow onSubmit={onSubmit} onTest={onTest} canSave={!readOnly && hasWriteRights} />
+      <ButtonRow
+        onSubmit={onSubmit}
+        onTest={onTest}
+        onDelete={onDelete}
+        canDelete={!readOnly && hasDeleteRights}
+        canSave={!readOnly && hasWriteRights}
+      />
     </form>
   );
 }

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 (
     <>
       <LinkButton
@@ -71,10 +66,6 @@ export function EditDataSourceActions({ uid }: Props) {
           Explore
         </LinkButton>
       )}
-
-      <Button type="button" variant="destructive" disabled={!canDelete} onClick={onDelete} className={styles.button}>
-        Delete
-      </Button>
     </>
   );
 }