[One Workflow] Optimistic approach for updates in workflows (#240722)

talboren · web-flow · commit 683f0d8d9e38 · 2025-10-27T17:54:03.000+02:00
_LLM Generated Summary_ ### Summary Implements optimistic UI updates for workflow bulk actions (delete, enable, disable) to provide immediate user feedback and eliminate laggy interactions. ### 🎯 Problem Bulk delete operations kept the modal/popover open while processing, with no clear feedback Enable/disable actions felt slow and unresponsive Users had to wait for server responses before seeing any UI changes No clear success/failure indicators for batch operations ### ✨ Solution Implemented optimistic updates using React Query's mutation lifecycle hooks (onMutate, onError, onSettled) to: Update the UI immediately when actions are triggered Automatically rollback changes if operations fail Show error toasts only when failures occur (no success toasts to reduce noise) ### 📝 Modified Files #### 1. use_workflow_actions.ts Added optimistic updates to updateWorkflow mutation: Optimistically updates workflow list data (for table view) Optimistically updates individual workflow detail data (for YAML editor view) Stores previous state for automatic rollback on errors Added optimistic updates to deleteWorkflows mutation: Immediately removes workflows from list Updates pagination counts Reverts on failure #### 2. use_workflow_bulk_actions.tsx Refactored bulk enable/disable to leverage optimistic updates Added comprehensive error handling with toast notifications: Total failure: danger toast Partial failure: warning toast with counts Success: no toast (silent success for better UX) Immediate modal/popover closing and selection clearing Added TODO comment about potential bulk delete endpoint optimization #### 3. workflows_utility_bar.tsx Pass deselectWorkflows callback to bulk actions for immediate selection clearing ### 🎨 User Experience Improvements Before: - ⏳ Popover/modal stayed open during operations - ⏳ No immediate feedback on actions - ⏳ Laggy enabled toggle in both list and detail views - ❌ No clear success/failure indicators After: - ✅ Instant UI updates (workflows disappear/update immediately) - ✅ Modal/popover close right away - ✅ Selection clears instantly - ✅ Smooth enabled toggle in both list and YAML editor - ✅ Clear error feedback with detailed toast messages - ✅ Automatic rollback on failures https://github.com/user-attachments/assets/8322839c-792f-40f7-a8b2-4499092e9dda
diff --git a/src/platform/plugins/shared/workflows_management/public/entities/workflows/model/use_workflow_actions.ts b/src/platform/plugins/shared/workflows_management/public/entities/workflows/model/use_workflow_actions.ts
@@ -18,6 +18,7 @@ import type {
   TestWorkflowCommand,
   TestWorkflowResponseDto,
   WorkflowDetailDto,
+  WorkflowListDto,
 } from '@kbn/workflows';
 import { useKibana } from '../../../hooks/use_kibana';
 
@@ -28,6 +29,14 @@ export interface UpdateWorkflowParams {
   workflow: Partial<EsWorkflow>;
 }
 
+// Context type for storing previous query data to enable rollback on mutation errors
+interface OptimisticContext {
+  // Map of query keys to their previous data for workflow lists
+  previousData: Map<string, WorkflowListDto>;
+  // Previous workflow detail data for individual workflow view
+  previousWorkflowDetail?: WorkflowDetailDto;
+}
+
 export function useWorkflowActions() {
   const queryClient = useQueryClient();
   const { http } = useKibana().services;
@@ -45,26 +54,133 @@ export function useWorkflowActions() {
     },
   });
 
-  const updateWorkflow = useMutation<void, HttpError, UpdateWorkflowParams>({
+  const updateWorkflow = useMutation<void, HttpError, UpdateWorkflowParams, OptimisticContext>({
     mutationKey: ['PUT', 'workflows', 'id'],
     mutationFn: ({ id, workflow }: UpdateWorkflowParams) => {
       return http.put<void>(`/api/workflows/${id}`, {
         body: JSON.stringify(workflow),
       });
     },
+    // Optimistic update: immediately update UI before server responds
+    onMutate: async ({ id, workflow }) => {
+      // Cancel any outgoing refetches to avoid overwriting optimistic update
+      await queryClient.cancelQueries({ queryKey: ['workflows'] });
+
+      const previousData = new Map<string, WorkflowListDto>();
+
+      // Update all workflow list queries (e.g., different pages, filters)
+      queryClient
+        .getQueriesData<WorkflowListDto>({ queryKey: ['workflows'] })
+        .forEach(([queryKey, data]) => {
+          if (data && data.results) {
+            const queryKeyString = JSON.stringify(queryKey);
+            // Store previous data for rollback on error
+            previousData.set(queryKeyString, data);
+
+            // Immediately update the workflow in the list with new data
+            const optimisticData: WorkflowListDto = {
+              ...data,
+              results: data.results.map((w) => (w.id === id ? { ...w, ...workflow } : w)),
+            };
+
+            queryClient.setQueryData(queryKey, optimisticData);
+          }
+        });
+
+      // Update workflow detail query (used in YAML editor view)
+      // But skip optimistic update when saving YAML, as the component manages its own state
+      const previousWorkflowDetail = queryClient.getQueryData<WorkflowDetailDto>(['workflows', id]);
+      if (previousWorkflowDetail && !workflow.yaml) {
+        // Only optimistically update for non-YAML changes (like enabled toggle)
+        // YAML updates are handled by component state and we don't want to show
+        // false "Saved just now" messages when save might fail
+        const optimisticWorkflowDetail: WorkflowDetailDto = {
+          ...previousWorkflowDetail,
+          ...workflow,
+        };
+        queryClient.setQueryData(['workflows', id], optimisticWorkflowDetail);
+      }
+
+      // Return previous data for potential rollback
+      return { previousData, previousWorkflowDetail };
+    },
+    // Rollback: restore previous data if update fails
+    onError: (err, variables, context) => {
+      // Restore previous workflow list data
+      if (context?.previousData) {
+        context.previousData.forEach((data, queryKeyString) => {
+          const queryKey = JSON.parse(queryKeyString);
+          queryClient.setQueryData(queryKey, data);
+        });
+      }
+      // For workflow detail, only revert if we're updating non-YAML fields (like enabled toggle)
+      // If YAML was being saved, DON'T revert because the YAML editor manages its own state
+      // and the component will handle showing the error and keeping the unsaved changes
+      if (context?.previousWorkflowDetail && !variables.workflow.yaml) {
+        // Only revert for metadata changes (like enabled toggle)
+        queryClient.setQueryData(['workflows', variables.id], context.previousWorkflowDetail);
+      }
+      // If YAML was being saved, we intentionally don't revert the detail query
+      // The component's local state keeps the YAML, and the error toast will inform the user
+    },
     onSuccess: () => {
+      // Refetch to ensure data is in sync with server
       queryClient.invalidateQueries({ queryKey: ['workflows'] });
     },
   });
 
-  const deleteWorkflows = useMutation({
+  const deleteWorkflows = useMutation<void, HttpError, { ids: string[] }, OptimisticContext>({
     mutationKey: ['DELETE', 'workflows'],
     mutationFn: ({ ids }: { ids: string[] }) => {
       return http.delete(`/api/workflows`, {
         body: JSON.stringify({ ids }),
       });
     },
+    // Optimistic update: immediately remove workflows from UI before server responds
+    onMutate: async ({ ids }) => {
+      // Cancel any outgoing refetches to avoid overwriting optimistic update
+      await queryClient.cancelQueries({ queryKey: ['workflows'] });
+
+      const previousData = new Map<string, WorkflowListDto>();
+
+      // Update all workflow list queries (e.g., different pages, filters)
+      queryClient
+        .getQueriesData<WorkflowListDto>({ queryKey: ['workflows'] })
+        .forEach(([queryKey, data]) => {
+          if (data && data.results) {
+            const queryKeyString = JSON.stringify(queryKey);
+            // Store previous data for rollback on error
+            previousData.set(queryKeyString, data);
+
+            // Immediately remove deleted workflows from the list and update pagination
+            const optimisticData: WorkflowListDto = {
+              ...data,
+              results: data.results.filter((w) => !ids.includes(w.id)),
+              _pagination: {
+                ...data._pagination,
+                total: data._pagination.total - ids.length,
+              },
+            };
+
+            queryClient.setQueryData(queryKey, optimisticData);
+          }
+        });
+
+      // Return previous data for potential rollback
+      return { previousData };
+    },
+    // Rollback: restore deleted workflows if deletion fails
+    onError: (err, variables, context) => {
+      // Restore previous workflow list data (brings back deleted workflows)
+      if (context?.previousData) {
+        context.previousData.forEach((data, queryKeyString) => {
+          const queryKey = JSON.parse(queryKeyString);
+          queryClient.setQueryData(queryKey, data);
+        });
+      }
+    },
     onSuccess: () => {
+      // Refetch to ensure data is in sync with server
       queryClient.invalidateQueries({ queryKey: ['workflows'] });
     },
   });
diff --git a/src/platform/plugins/shared/workflows_management/public/features/workflow_list/ui/use_workflow_bulk_actions.tsx b/src/platform/plugins/shared/workflows_management/public/features/workflow_list/ui/use_workflow_bulk_actions.tsx
@@ -22,6 +22,7 @@ interface UseWorkflowBulkActionsProps {
   selectedWorkflows: WorkflowListItemDto[];
   onAction: () => void;
   onActionSuccess: () => void;
+  deselectWorkflows: () => void;
 }
 
 interface UseWorkflowBulkActionsReturn {
@@ -33,8 +34,9 @@ export const useWorkflowBulkActions = ({
   selectedWorkflows,
   onAction,
   onActionSuccess,
+  deselectWorkflows,
 }: UseWorkflowBulkActionsProps): UseWorkflowBulkActionsReturn => {
-  const { application } = useKibana().services;
+  const { application, notifications } = useKibana().services;
   const { deleteWorkflows, updateWorkflow } = useWorkflowActions();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const modalTitleId = useGeneratedHtmlId();
@@ -51,19 +53,31 @@ export const useWorkflowBulkActions = ({
 
   const confirmDelete = useCallback(() => {
     const ids = selectedWorkflows.map((workflow) => workflow.id);
+    const count = ids.length;
+
+    setShowDeleteModal(false);
+    deselectWorkflows();
+
     deleteWorkflows.mutate(
       { ids },
       {
         onSuccess: () => {
-          setShowDeleteModal(false);
           onActionSuccess();
         },
-        onError: () => {
-          setShowDeleteModal(false);
+        onError: (err) => {
+          onActionSuccess();
+          notifications?.toasts.addError(err as Error, {
+            title: i18n.translate('workflows.bulkActions.deleteError', {
+              defaultMessage:
+                'Failed to delete {count} {count, plural, one {workflow} other {workflows}}',
+              values: { count },
+            }),
+            toastLifeTimeMs: 3000,
+          });
         },
       }
     );
-  }, [selectedWorkflows, deleteWorkflows, onActionSuccess]);
+  }, [selectedWorkflows, deleteWorkflows, onActionSuccess, deselectWorkflows, notifications]);
 
   const cancelDelete = useCallback(() => {
     setShowDeleteModal(false);
@@ -72,29 +86,61 @@ export const useWorkflowBulkActions = ({
   const bulkUpdateWorkflows = useCallback(
     (workflowsToUpdate: WorkflowListItemDto[], updateData: { enabled: boolean }) => {
       onAction();
+      deselectWorkflows();
+
+      const totalCount = workflowsToUpdate.length;
+      let completedCount = 0;
+      let failedCount = 0;
 
-      const updatePromises = workflowsToUpdate.map(
-        (workflow) =>
-          new Promise<void>((resolve) => {
-            updateWorkflow.mutate(
-              {
-                id: workflow.id,
-                workflow: updateData,
-              },
-              {
-                onSettled: () => {
-                  resolve();
-                },
+      const actionType = updateData.enabled ? 'enable' : 'disable';
+      const actionLabel = updateData.enabled ? 'enabled' : 'disabled';
+
+      workflowsToUpdate.forEach((workflow) => {
+        updateWorkflow.mutate(
+          {
+            id: workflow.id,
+            workflow: updateData,
+          },
+          {
+            onSettled: (data, error) => {
+              completedCount++;
+              if (error) {
+                failedCount++;
               }
-            );
-          })
-      );
 
-      Promise.allSettled(updatePromises).then(() => {
-        onActionSuccess();
+              if (completedCount === totalCount) {
+                onActionSuccess();
+
+                const successCount = totalCount - failedCount;
+
+                if (failedCount > 0) {
+                  if (successCount === 0) {
+                    notifications?.toasts.addDanger(
+                      i18n.translate(`workflows.bulkActions.${actionType}Error`, {
+                        defaultMessage:
+                          'Failed to {actionType} {count} {count, plural, one {workflow} other {workflows}}',
+                        values: { count: totalCount, actionType },
+                      }),
+                      { toastLifeTimeMs: 3000 }
+                    );
+                  } else {
+                    notifications?.toasts.addWarning(
+                      i18n.translate(`workflows.bulkActions.${actionType}PartialSuccess`, {
+                        defaultMessage:
+                          '{successCount} of {totalCount} workflows {actionLabel}. {failedCount} failed.',
+                        values: { successCount, totalCount, failedCount, actionLabel },
+                      }),
+                      { toastLifeTimeMs: 3000 }
+                    );
+                  }
+                }
+              }
+            },
+          }
+        );
       });
     },
-    [updateWorkflow, onAction, onActionSuccess]
+    [updateWorkflow, onAction, onActionSuccess, deselectWorkflows, notifications]
   );
 
   const handleEnableWorkflows = useCallback(() => {
diff --git a/src/platform/plugins/shared/workflows_management/public/features/workflow_list/ui/workflows_utility_bar.tsx b/src/platform/plugins/shared/workflows_management/public/features/workflow_list/ui/workflows_utility_bar.tsx
@@ -53,6 +53,7 @@ export const WorkflowsUtilityBar: React.FC<WorkflowsUtilityBarProps> = ({
     selectedWorkflows,
     onAction: closePopover,
     onActionSuccess,
+    deselectWorkflows,
   });
 
   const showBulkActions = selectedWorkflows.length > 0;
