[release-11.6.8] Dashboards: Disable saving while title is validating (#113057)

save button validation

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

@@ -1,5 +1,5 @@
 import debounce from 'debounce-promise';
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { UseFormSetValue, useForm } from 'react-hook-form';
 
 import { selectors } from '@grafana/e2e-selectors';
@@ -28,7 +28,7 @@ export interface Props {
 export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
   const { changedSaveModel } = changeInfo;
 
-  const { register, handleSubmit, setValue, formState, getValues, watch } = useForm<SaveDashboardAsFormDTO>({
+  const { register, handleSubmit, setValue, formState, getValues, watch, trigger } = useForm<SaveDashboardAsFormDTO>({
     mode: 'onBlur',
     defaultValues: {
       title: changeInfo.isNew ? changedSaveModel.title! : `${changedSaveModel.title} Copy`,
@@ -41,13 +41,18 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
     },
   });
 
-  const { errors, isValid, defaultValues } = formState;
+  const { errors, isValid, defaultValues, validatingFields } = formState;
   const formValues = watch();
 
   const { state, onSaveDashboard } = useSaveDashboard(false);
 
   const [contentSent, setContentSent] = useState<{ title?: string; folderUid?: string }>({});
-  const [hasFolderChanged, setHasFolderChanged] = useState(false);
+
+  // Validate title on form mount to catch invalid default values
+  useEffect(() => {
+    trigger('title');
+  }, [trigger]);
+
   const onSave = async (overwrite: boolean) => {
     const data = getValues();
 
@@ -81,8 +86,15 @@ 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={isValid && !isTitleValidating}
+        isLoading={state.loading}
+        onSave={onSave}
+        overwrite={overwrite}
+      />
+    );
   };
   function renderFooter(error?: Error) {
     const formValuesMatchContentSent =
@@ -133,8 +145,8 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
         <FolderPicker
           onChange={(uid: string | undefined, title: string | undefined) => {
             setValue('folder', { uid, title });
-            const folderUid = dashboard.state.meta.folderUid;
-            setHasFolderChanged(uid !== folderUid);
+            // Re-validate title when folder changes to check for duplicates in new folder
+            trigger('title');
           }}
           // Old folder picker fields
           value={formValues.folder?.uid}