From 56106064b1092ed83e3168c6d5dcc757fb41284a Mon Sep 17 00:00:00 2001
From: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com>
Date: Thu, 25 Sep 2025 12:27:35 -0600
Subject: [PATCH] Dashboards: Disable saving while title is validating
 (#111518)

* disable saving while title is validating

* don't show loading icon in the save button while validating

* fix e2e
---
 e2e-playwright/utils/dashboard-helpers.ts           |  7 ++++++-
 .../dashboard-scene/saving/SaveDashboardAsForm.tsx  | 13 +++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/e2e-playwright/utils/dashboard-helpers.ts b/e2e-playwright/utils/dashboard-helpers.ts
index ff73bfe919f..d37d3dee25e 100644
--- a/e2e-playwright/utils/dashboard-helpers.ts
+++ b/e2e-playwright/utils/dashboard-helpers.ts
@@ -21,7 +21,12 @@ export async function addDashboard(page: Page, title?: string): Promise<string>
 
   // Click save
   const saveAsButton = page.getByTestId('data-testid Save dashboard drawer button');
-  await saveAsButton.click();
+  // Ensure button is ready and click using the method that works with React
+  // Doing simply saveAsButton.click doesn't work, even with force: true and when button is enabled
+  // It stopped working when https://github.com/grafana/grafana/pull/111518 introduced proper title validation
+  // This should be a an ok alternative since we are checking that the button is enabled first
+  await expect(saveAsButton).toBeEnabled();
+  await saveAsButton.evaluate((btn: HTMLElement) => btn.click());
 
   // Wait for success notification
   await expect(page.getByText('Dashboard saved')).toBeVisible();
diff --git a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
index cc437b74486..aa5c53aa1fa 100644
--- a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
@@ -43,7 +43,7 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
     },
   });
 
-  const { errors, isValid } = formState;
+  const { errors, isValid, validatingFields } = formState;
   const formValues = watch();
 
   const { state, onSaveDashboard } = useSaveDashboard(false);
@@ -85,7 +85,16 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
 
   const saveButton = (overwrite: boolean) => {
     const showSaveButton = !isValid && hasFolderChanged ? true : isValid;
-    return <SaveButton isValid={showSaveButton} isLoading={state.loading} onSave={onSave} overwrite={overwrite} />;
+    const isTitleValidating = !!validatingFields.title;
+
+    return (
+      <SaveButton
+        isValid={showSaveButton && !isTitleValidating}
+        isLoading={state.loading}
+        onSave={onSave}
+        overwrite={overwrite}
+      />
+    );
   };
   function renderFooter(error?: Error) {
     const formValuesMatchContentSent =