Standarize e2e for addDashbaord e2e flow

.betterer.results

@@ -2540,9 +2540,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/features/dashboard-scene/saving/shared.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

e2e/dashboards-suite/textbox-variables.spec.ts

@@ -143,9 +143,9 @@ function copyExistingDashboard() {
 
   e2e.pages.Dashboard.Settings.General.saveAsDashBoard().should('be.visible').click();
 
-  e2e.pages.SaveDashboardAsModal.newName().should('be.visible').type(`${Date.now()}`);
+  e2e.pages.SaveDashboardModal.newName().should('be.visible').type(`${Date.now()}`);
 
-  e2e.pages.SaveDashboardAsModal.save().should('be.visible').click();
+  e2e.pages.SaveDashboardModal.saveDashboardToolbar().should('be.visible').click();
 
   cy.wait('@save-dash');
   cy.wait('@load-dash');

e2e/utils/flows/addDashboard.ts

@@ -139,9 +139,11 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
 
   setDashboardTimeRange(timeRange);
 
-  e2e.components.PageToolbar.item('Save dashboard').click();
+  //Use different selectors if dashboardScene feature flag is enabled
-  e2e.pages.SaveDashboardAsModal.newName().clear().type(title, { force: true });
+
-  e2e.pages.SaveDashboardAsModal.save().click();
+  e2e.components.PageToolbar.itemButton('Save dashboard').click();
+  e2e.pages.SaveDashboardModal.newName().clear().type(title, { force: true });
+  e2e.pages.SaveDashboardModal.saveButtonDrawer().click();
   e2e.flows.assertSuccessNotification();
   e2e.pages.AddDashboard.itemButton('Create new panel button').should('be.visible');
 

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -222,7 +222,10 @@ export const Pages = {
     save: 'Save dashboard button',
   },
   SaveDashboardModal: {
+    newName: 'Save dashboard title field',
     save: 'Dashboard settings Save Dashboard Modal Save button',
+    saveDashboardToolbar: 'data-testid Save dashboard',
+    saveButtonDrawer: 'data-testid Save dashboard button',
     saveVariables: 'Dashboard settings Save Dashboard Modal Save variables checkbox',
     saveTimerange: 'Dashboard settings Save Dashboard Modal Save timerange checkbox',
   },

packages/grafana-e2e/src/flows/addDashboard.ts

@@ -141,8 +141,8 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
   setDashboardTimeRange(timeRange);
 
   e2e.components.PageToolbar.item('Save dashboard').click();
-  e2e.pages.SaveDashboardAsModal.newName().clear().type(title, { force: true });
+  e2e.pages.SaveDashboardModal.newName().clear().type(title, { force: true });
-  e2e.pages.SaveDashboardAsModal.save().click();
+  e2e.pages.SaveDashboardModal.saveButtonDrawer().click();
   e2e.flows.assertSuccessNotification();
   e2e.pages.AddDashboard.itemButton('Create new panel button').should('be.visible');
 

public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx

@@ -2,6 +2,7 @@ import debounce from 'debounce-promise';
 import React from 'react';
 import { UseFormSetValue, useForm } from 'react-hook-form';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { Dashboard } from '@grafana/schema';
 import { Button, Input, Switch, Field, Label, TextArea, Stack, Alert, Box } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
@@ -66,7 +67,13 @@ export function SaveDashboardAsForm({ dashboard, drawer, changeInfo }: Props) {
   );
 
   const saveButton = (overwrite: boolean) => (
-    <SaveButton isValid={isValid} isLoading={state.loading} onSave={onSave} overwrite={overwrite} />
+    <SaveButton
+      isValid={isValid}
+      isLoading={state.loading}
+      onSave={onSave}
+      overwrite={overwrite}
+      testId={selectors.pages.SaveDashboardModal.saveButtonDrawer}
+    />
   );
 
   function renderFooter(error?: Error) {

public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx

@@ -45,7 +45,13 @@ export function SaveDashboardForm({ dashboard, drawer, changeInfo }: Props) {
   );
 
   const saveButton = (overwrite: boolean) => (
-    <SaveButton isValid={hasChanges} isLoading={state.loading} onSave={onSave} overwrite={overwrite} />
+    <SaveButton
+      isValid={hasChanges}
+      isLoading={state.loading}
+      onSave={onSave}
+      overwrite={overwrite}
+      testId={selectors.pages.SaveDashboardModal.saveButtonDrawer}
+    />
   );
 
   function renderFooter(error?: Error) {

public/app/features/dashboard-scene/saving/shared.tsx

@@ -56,14 +56,16 @@ export interface SaveButtonProps {
   onSave: (overwrite: boolean) => void;
   isLoading: boolean;
   isValid?: boolean;
+  testId?: string;
 }
 
-export function SaveButton({ overwrite, isLoading, isValid, onSave }: SaveButtonProps) {
+export function SaveButton({ overwrite, isLoading, isValid, onSave, testId }: SaveButtonProps) {
+  const testIdSelector = testId ? testId : selectors.pages.SaveDashboardModal.save;
   return (
     <Button
       disabled={!isValid || isLoading}
       icon={isLoading ? 'spinner' : undefined}
-      aria-label={selectors.pages.SaveDashboardModal.save}
+      data-testid={testIdSelector}
       onClick={() => onSave(overwrite)}
       variant={overwrite ? 'destructive' : 'primary'}
     >

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -417,6 +417,7 @@ export function ToolbarActions({ dashboard }: Props) {
             key="save"
             size="sm"
             variant={'primary'}
+            data-testid={selectors.pages.SaveDashboardModal.saveDashboardToolbar}
           >
             Save dashboard
           </Button>
@@ -474,6 +475,7 @@ export function ToolbarActions({ dashboard }: Props) {
             tooltip="Save changes"
             size="sm"
             variant={isDirty ? 'primary' : 'secondary'}
+            data-testid={selectors.pages.SaveDashboardModal.saveDashboardToolbar}
           >
             Save dashboard
           </Button>

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -315,6 +315,7 @@ export const DashNav = React.memo<Props>((props) => {
                   onDismiss: hideModal,
                 });
               }}
+              data-testid={e2eSelectors.pages.SaveDashboardModal.saveDashboardToolbar}
             />
           )}
         </ModalsController>

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent } from 'react';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { Button, Input, Switch, Form, Field, InputControl, HorizontalGroup, Label, TextArea } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
@@ -188,7 +189,12 @@ export const SaveDashboardAsForm = ({
             <Button type="button" variant="secondary" onClick={onCancel} fill="outline">
               Cancel
             </Button>
-            <Button disabled={isLoading} type="submit" aria-label="Save dashboard button">
+            <Button
+              disabled={isLoading}
+              type="submit"
+              aria-label="Save dashboard button"
+              data-testid={selectors.pages.SaveDashboardModal.saveButtonDrawer}
+            >
               {isLoading ? 'Saving...' : 'Save'}
             </Button>
           </HorizontalGroup>