Merge pull request #783 from zhuje/ou1236-loading-kebab

OU-1236:  Kebab icon should be disable while "Checking permissions" is happening

Author: openshift-merge-bot[bot]

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

@@ -208,12 +208,8 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
     return allProjects[0] || '';
   }, [dashboard, editableProjects, allProjects]);
 
-  const { schema: validationSchema } = useDashboardValidationSchema(defaultProject, t);
-
   const form = useForm<CreateDashboardValidationType>({
-    resolver: validationSchema
-      ? zodResolver(validationSchema)
-      : zodResolver(createDashboardDialogValidationSchema(t)),
+    resolver: zodResolver(createDashboardDialogValidationSchema(t)),
     mode: 'onBlur',
     defaultValues: {
       projectName: defaultProject,
@@ -222,6 +218,12 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
   });
 
   const selectedProjectName = form.watch('projectName');
+  const dashboardName = form.watch('dashboardName');
+
+  const { schema: dynamicValidationSchema, isSchemaLoading } = useDashboardValidationSchema(
+    selectedProjectName,
+    t,
+  );
 
   const projectOptions = useMemo<TypeaheadSelectOption[]>(() => {
     if (!editableProjects) {
@@ -236,6 +238,48 @@ export const DuplicateActionModal = ({ dashboard, isOpen, onClose }: ActionModal
 
   const createDashboardMutation = useCreateDashboardMutation();
 
+  React.useEffect(() => {
+    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) {
+        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,
+    dashboardName,
+    isSchemaLoading,
+    persesProjects,
+  ]);
+
   React.useEffect(() => {
     if (isOpen && dashboard && editableProjects?.length > 0 && defaultProject) {
       form.reset({
@@ -435,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]);
 }

web/src/components/dashboards/perses/dashboard-list.tsx

@@ -36,6 +36,7 @@ import {
   DuplicateActionModal,
   RenameActionModal,
 } from './dashboard-action-modals';
+import { useEditableProjects } from './hooks/useEditableProjects';
 const perPageOptions = [
   { title: '10', value: 10 },
   { title: '20', value: 20 },
@@ -58,7 +59,9 @@ const DashboardActionsCell = React.memo(
     emptyActions: any[];
   }) => {
     const { t } = useTranslation(process.env.I18N_NAMESPACE);
-    const { canEdit, loading } = usePersesEditPermissions(project);
+
+    const { permissionsLoading } = useEditableProjects();
+    const { canEdit } = usePersesEditPermissions(project);
     const disabled = !canEdit;
 
     const rowSpecificActions = useMemo(
@@ -79,7 +82,7 @@ const DashboardActionsCell = React.memo(
       [dashboard, onRename, onDuplicate, onDelete, t],
     );
 
-    if (disabled || loading) {
+    if (disabled) {
       return (
         <Tooltip content={t("You don't have permissions for dashboard actions")}>
           <div>
@@ -88,6 +91,15 @@ const DashboardActionsCell = React.memo(
         </Tooltip>
       );
     }
+    if (permissionsLoading) {
+      return (
+        <Tooltip content={t('Checking permissions...')}>
+          <div>
+            <ActionsColumn items={emptyActions} isDisabled={true} />
+          </div>
+        </Tooltip>
+      );
+    }
 
     return <ActionsColumn items={rowSpecificActions} isDisabled={false} />;
   },