fix: OU-1236 coderabbit suggestions

Author: zhuje

web/src/components/dashboards/perses/dashboard-action-modals.tsx

@@ -218,8 +218,12 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
   });
 
   const selectedProjectName = form.watch('projectName');
+  const dashboardName = form.watch('dashboardName');
 
-  const { schema: dynamicValidationSchema } = useDashboardValidationSchema(selectedProjectName, t);
+  const { schema: dynamicValidationSchema, isSchemaLoading } = useDashboardValidationSchema(
+    selectedProjectName,
+    t,
+  );
 
   const projectOptions = useMemo<TypeaheadSelectOption[]>(() => {
     if (!editableProjects) {
@@ -235,24 +239,46 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
   const createDashboardMutation = useCreateDashboardMutation();
 
   React.useEffect(() => {
-    if (dynamicValidationSchema && selectedProjectName) {
+    const isPerseProject = persesProjects?.some(
+      (project) => project.metadata?.name === selectedProjectName,
+    );
+
+    if (dynamicValidationSchema && selectedProjectName && !isSchemaLoading && isPerseProject) {
       const currentValues = form.getValues();
       const result = dynamicValidationSchema.safeParse(currentValues);
 
       if (!result.success) {
-        result.error.issues.forEach((issue) => {
-          if (issue.path[0] === 'dashboardName') {
-            form.setError('dashboardName', {
-              type: 'validate',
-              message: issue.message,
-            });
-          }
-        });
+        const hasDashboardIssue = result.error.issues.some(
+          (issue) => issue.path[0] === 'dashboardName',
+        );
+
+        if (hasDashboardIssue) {
+          result.error.issues.forEach((issue) => {
+            if (issue.path[0] === 'dashboardName') {
+              form.setError('dashboardName', {
+                type: 'validate',
+                message: issue.message,
+              });
+            }
+          });
+        } else {
+          form.clearErrors('dashboardName');
+        }
       } else {
         form.clearErrors('dashboardName');
       }
+    } else if (!isPerseProject && selectedProjectName) {
+      // Clear any existing validation errors for non-Perses projects
+      form.clearErrors('dashboardName');
     }
-  }, [selectedProjectName, dynamicValidationSchema, form]);
+  }, [
+    selectedProjectName,
+    dynamicValidationSchema,
+    form,
+    dashboardName,
+    isSchemaLoading,
+    persesProjects,
+  ]);
 
   React.useEffect(() => {
     if (isOpen && dashboard && editableProjects?.length > 0 && defaultProject) {
@@ -453,9 +479,10 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
                   !(form.watch('dashboardName') || '')?.trim() ||
                   !(form.watch('projectName') || '')?.trim() ||
                   !hasEditableProject ||
+                  isSchemaLoading ||
                   createDashboardMutation.isPending
                 }
-                isLoading={createDashboardMutation.isPending}
+                isLoading={createDashboardMutation.isPending || isSchemaLoading}
               >
                 {t('Duplicate')}
               </Button>

web/src/components/dashboards/perses/dashboard-action-validations.ts

@@ -60,7 +60,7 @@ export function useDashboardValidationSchema(
     if (!dashboards?.length)
       return {
         schema: createDashboardDialogValidationSchema(t),
-        isSchemaLoading: true,
+        isSchemaLoading: false,
         hasSchemaError: false,
       };
 
@@ -87,6 +87,6 @@ export function useDashboardValidationSchema(
       }),
     );
 
-    return { schema: refinedSchema, isSchemaLoading: true, hasSchemaError: false };
+    return { schema: refinedSchema, isSchemaLoading: false, hasSchemaError: false };
   }, [dashboards, isDashboardsLoading, isError, t]);
 }