fix(DesignerV2): Optimized useHandoffActionsForAgent hook, standalone improvement (#8802)

* Optimized hook

* Removed any typecast

Author: rllyy97

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/DesignerCommandBarV2.tsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Button,
   Card,
   Divider,
@@ -11,12 +12,12 @@ import {
   MenuTrigger,
   mergeClasses,
   Spinner,
-  Text,
   tokens,
   Toolbar,
   ToolbarButton,
+  Tooltip,
 } from '@fluentui/react-components';
-import { isNullOrEmpty, ChatbotService } from '@microsoft/logic-apps-shared';
+import { isNullOrEmpty, ChatbotService, useThrottledEffect } from '@microsoft/logic-apps-shared';
 import type { AppDispatch, CustomCodeFileNameMapping, RootState, Workflow } from '@microsoft/logic-apps-designer-v2';
 import {
   store as DesignerStore,
@@ -45,6 +46,7 @@ import {
   resetDesignerView,
   downloadDocumentAsFile,
   useNodesAndDynamicDataInitialized,
+  useChangeCount,
 } from '@microsoft/logic-apps-designer-v2';
 import { useEffect, useMemo, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
@@ -70,6 +72,8 @@ import {
   DocumentOnePageAddRegular,
   DocumentOnePageColumnsFilled,
   DocumentOnePageColumnsRegular,
+  ArrowSyncFilled,
+  CheckmarkCircleRegular,
 } from '@fluentui/react-icons';
 
 const UndoIcon = bundleIcon(ArrowUndoFilled, ArrowUndoRegular);
@@ -148,55 +152,91 @@ export const DesignerCommandBar = ({
   const styles = useStyles();
   const [lastSavedTime, setLastSavedTime] = useState<Date>();
   const [autoSaving, setAutoSaving] = useState<boolean>(false);
+  const [autosaveError, setAutosaveError] = useState<string>();
+
+  const designerIsDirty = useIsDesignerDirty();
+  const isInitialized = useNodesAndDynamicDataInitialized();
 
   const dispatch = useDispatch<AppDispatch>();
   const isCopilotReady = useNodesInitialized();
   const { isLoading: isSaving, mutate: saveWorkflowMutate } = useMutation(async (autoSave?: boolean) => {
-    setAutoSaving(autoSave ?? false);
-    const designerState = DesignerStore.getState();
-    const serializedWorkflow = await serializeBJSWorkflow(designerState, {
-      skipValidation: false,
-      ignoreNonCriticalErrors: true,
-    });
-
-    const validationErrorsList = Object.entries(designerState.operations.inputParameters).reduce((acc: any, [id, nodeInputs]) => {
-      const hasValidationErrors = Object.values(nodeInputs.parameterGroups).some((parameterGroup) => {
-        return parameterGroup.parameters.some((parameter) => {
-          const validationErrors = validateParameter(parameter, parameter.value);
-          if (validationErrors.length > 0) {
-            dispatch(
-              updateParameterValidation({
-                nodeId: id,
-                groupId: parameterGroup.id,
-                parameterId: parameter.id,
-                validationErrors,
-              })
-            );
-          }
-          return validationErrors.length;
-        });
+    try {
+      setAutoSaving(autoSave ?? false);
+      const designerState = DesignerStore.getState();
+      const serializedWorkflow = await serializeBJSWorkflow(designerState, {
+        skipValidation: false,
+        ignoreNonCriticalErrors: true,
       });
-      if (hasValidationErrors) {
-        acc[id] = hasValidationErrors;
-      }
-      return acc;
-    }, {});
 
-    const hasParametersErrors = !isNullOrEmpty(validationErrorsList);
+      const validationErrorsList = Object.entries(designerState.operations.inputParameters).reduce((acc: any, [id, nodeInputs]) => {
+        const hasValidationErrors = Object.values(nodeInputs.parameterGroups).some((parameterGroup) => {
+          return parameterGroup.parameters.some((parameter) => {
+            const validationErrors = validateParameter(parameter, parameter.value);
+            if (validationErrors.length > 0) {
+              dispatch(
+                updateParameterValidation({
+                  nodeId: id,
+                  groupId: parameterGroup.id,
+                  parameterId: parameter.id,
+                  validationErrors,
+                })
+              );
+            }
+            return validationErrors.length;
+          });
+        });
+        if (hasValidationErrors) {
+          acc[id] = hasValidationErrors;
+        }
+        return acc;
+      }, {});
+
+      const hasParametersErrors = !isNullOrEmpty(validationErrorsList);
 
-    const customCodeFilesWithData = getCustomCodeFilesWithData(designerState.customCode);
+      const customCodeFilesWithData = getCustomCodeFilesWithData(designerState.customCode);
 
-    if (!hasParametersErrors || autoSave) {
-      await saveWorkflow(serializedWorkflow, customCodeFilesWithData, () => dispatch(resetDesignerDirtyState(undefined)), autoSave);
-      if (Object.keys(serializedWorkflow?.definition?.triggers ?? {}).length > 0) {
-        updateCallbackUrl(designerState, dispatch);
+      if (!hasParametersErrors || autoSave) {
+        await saveWorkflow(serializedWorkflow, customCodeFilesWithData, () => dispatch(resetDesignerDirtyState(undefined)), autoSave);
+        if (Object.keys(serializedWorkflow?.definition?.triggers ?? {}).length > 0) {
+          updateCallbackUrl(designerState, dispatch);
+        }
+        if (autoSave) {
+          setLastSavedTime(new Date());
+        }
       }
+    } catch (error: any) {
+      console.error('Error saving workflow:', error);
       if (autoSave) {
-        setLastSavedTime(new Date());
+        setAutosaveError(error?.message ?? 'Unknown error during auto-save');
       }
+    } finally {
+      setAutoSaving(false);
     }
   });
 
+  // When any change is made, set needsSaved to true
+  const changeCount = useChangeCount();
+  const [needsSaved, setNeedsSaved] = useState(false);
+  useEffect(() => {
+    if (changeCount === 0) {
+      return;
+    }
+    setNeedsSaved(true);
+  }, [changeCount]);
+
+  // Auto-save every 5 seconds if needed
+  useThrottledEffect(
+    () => {
+      if (!needsSaved || !isDraftMode || isSaving || isSaving || isMonitoringView) {
+        return;
+      }
+      setNeedsSaved(false);
+      saveWorkflowMutate(true);
+    },
+    [isDraftMode, isSaving, isMonitoringView, isSaving, needsSaved, saveWorkflowMutate, isCodeView],
+    5000
+  );
+
   const { isLoading: isSavingUnitTest, mutate: saveUnitTestMutate } = useMutation(async () => {
     const designerState = DesignerStore.getState();
     const definition = await serializeUnitTestDefinition(designerState);
@@ -230,9 +270,6 @@ export const DesignerCommandBar = ({
     downloadDocumentAsFile(queryResponse);
   });
 
-  const designerIsDirty = useIsDesignerDirty();
-  const isInitialized = useNodesAndDynamicDataInitialized();
-
   const allInputErrors = useSelector((state: RootState) => {
     return (Object.entries(state.operations.inputParameters) ?? []).filter(([_id, nodeInputs]) =>
       Object.values(nodeInputs.parameterGroups).some((parameterGroup) =>
@@ -333,8 +370,43 @@ export const DesignerCommandBar = ({
   );
 
   const DraftSaveNotification = () => {
-    if (isDraftMode && lastSavedTime) {
-      return <Text style={{ fontStyle: 'italic' }}>{`Draft auto-saved at: ${lastSavedTime?.toLocaleTimeString()}`}</Text>;
+    const [, setTick] = useState(0);
+
+    useEffect(() => {
+      if (isDraftMode && lastSavedTime) {
+        const interval = setInterval(() => {
+          setTick((prev) => prev + 1);
+        }, 2000); // Update every 2 seconds
+
+        return () => clearInterval(interval);
+      }
+    }, [lastSavedTime, isDraftMode]);
+
+    if (isDraftMode && (isDesignerView || isCodeView)) {
+      const style = { fontStyle: 'italic', fontSize: '12px' };
+      const iconStyle = { fontSize: '16px' };
+
+      if (isSaving || needsSaved) {
+        return (
+          <Badge appearance="ghost" color="informative" size="small" style={style} icon={<ArrowSyncFilled style={iconStyle} />}>
+            {'Saving...'}
+          </Badge>
+        );
+      }
+
+      return lastSavedTime ? (
+        <Tooltip content={`Draft autosaved at: ${lastSavedTime.toLocaleTimeString()}`} relationship="label" withArrow>
+          <Badge appearance="ghost" color="informative" size="small" style={style} icon={<CheckmarkCircleRegular style={iconStyle} />}>
+            {getRelativeTimeString(lastSavedTime)}
+          </Badge>
+        </Tooltip>
+      ) : autosaveError ? (
+        <Tooltip content={autosaveError} relationship="label" withArrow>
+          <Badge appearance="ghost" color="danger" size="small" style={style} icon={<ErrorCircleFilled style={iconStyle} />}>
+            {'Error autosaving draft'}
+          </Badge>
+        </Tooltip>
+      ) : null;
     }
     return null;
   };
@@ -415,15 +487,6 @@ export const DesignerCommandBar = ({
     </Menu>
   );
 
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      if (isDraftMode && !isSaving && isDesignerView && !isMonitoringView) {
-        saveWorkflowMutate(true);
-      }
-    }, 30000); // Auto-save every 30 seconds
-    return () => clearTimeout(timeoutId);
-  }, [saveIsDisabled, isDraftMode, isSaving, isDesignerView, saveWorkflowMutate, isMonitoringView]);
-
   return (
     <>
       <Toolbar
@@ -458,3 +521,36 @@ export const DesignerCommandBar = ({
     </>
   );
 };
+
+const getRelativeTimeString = (savedTime: Date) => {
+  const now = new Date();
+  const diffMs = now.getTime() - savedTime.getTime();
+  const diffSeconds = Math.floor(diffMs / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+
+  if (diffHours > 0) {
+    const unit = diffHours === 1 ? Common_TimeFormat.hour : Common_TimeFormat.hours;
+    return Common_TimeFormat.autoSavedHours.replace('{0}', diffHours.toString()).replace('{1}', unit);
+  }
+  if (diffMinutes > 0) {
+    return Common_TimeFormat.autoSavedMinutes.replace('{0}', Common_TimeFormat.aFew).replace('{1}', Common_TimeFormat.minutes);
+  }
+  return Common_TimeFormat.autoSavedSeconds.replace('{0}', Common_TimeFormat.aFew).replace('{1}', Common_TimeFormat.seconds);
+};
+
+const Common_TimeFormat = {
+  /** 0 = number of seconds */
+  autoSavedSeconds: 'Autosaved {0} {1} ago',
+  /** 0 = number of minutes */
+  autoSavedMinutes: 'Autosaved {0} {1} ago',
+  /** 0 = number of hours */
+  autoSavedHours: 'Autosaved {0} {1} ago',
+  aFew: 'a few',
+  second: 'second',
+  seconds: 'seconds',
+  minute: 'minute',
+  minutes: 'minutes',
+  hour: 'hour',
+  hours: 'hours',
+};

libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts

@@ -14,6 +14,7 @@ import type {} from '@tanstack/react-query';
 import { collapseFlowTree } from './helper';
 import { useEdges } from '@xyflow/react';
 import type { OperationMetadataState } from '../operation/operationMetadataSlice';
+import { getOperationsState } from '../selectors/actionMetadataSelector';
 
 export const getWorkflowState = (state: RootState): WorkflowState => state.workflow;
 
@@ -326,7 +327,7 @@ export const useNewAdditiveSubgraphId = (baseId: string) =>
       let caseId = baseId;
       let caseCount = 1;
       const idList = Object.keys(state.nodesMetadata);
-      // eslint-disable-next-line no-loop-func
+
       while (idList.some((id) => id === caseId)) {
         caseCount++;
         caseId = `${baseId}_${caseCount}`;
@@ -754,41 +755,45 @@ export const useHandoffEdges = (): WorkflowEdge[] => {
 
 export const useHandoffActionsForAgent = (agentId: string): any[] => {
   return useSelector(
-    createSelector(getWorkflowAndOperationState, (state: { workflow: WorkflowState; operations: OperationMetadataState }) => {
-      // Check the action is an agent action
-      if (!equals(state.workflow.operations[agentId]?.type, commonConstants.NODE.TYPE.AGENT)) {
-        return [];
-      }
-      const toolNodeIds = Object.keys(state.workflow.nodesMetadata[agentId]?.handoffs ?? {});
-      const output: any[] = [];
-      for (const toolId of toolNodeIds) {
-        // If the tool contains a handoff action, add it to the output
-        const toolActionIds = getNodesWithGraphId(toolId, state.workflow.nodesMetadata);
-        const isSingleAction = Object.keys(toolActionIds).length === 1;
-        for (const actionId of Object.keys(toolActionIds)) {
-          const action = state.workflow.operations[actionId];
-          if (equals(action.type, commonConstants.NODE.TYPE.HANDOFF)) {
-            const toolDescription =
-              state.operations?.inputParameters?.[toolId]?.parameterGroups?.default?.parameters?.find((param) =>
-                equals(param.parameterName, 'description')
-              )?.value?.[0]?.value ?? '';
-            const targetId =
-              state.operations?.inputParameters?.[actionId]?.parameterGroups?.default?.parameters?.find((param) =>
-                equals(param.parameterName, 'name')
-              )?.value?.[0]?.value ?? '';
-
-            const actionData = {
-              id: actionId,
-              toolId,
-              toolDescription,
-              targetId,
-              isSingleAction,
-            };
-            output.push(actionData);
+    useMemo(
+      () =>
+        createSelector([getWorkflowState, getOperationsState], (workflowState: WorkflowState, operationsState: OperationMetadataState) => {
+          // Check the action is an agent action
+          if (!equals(workflowState.operations[agentId]?.type, commonConstants.NODE.TYPE.AGENT)) {
+            return [];
           }
-        }
-      }
-      return output;
-    })
+          const toolNodeIds = Object.keys(workflowState.nodesMetadata[agentId]?.handoffs ?? {});
+          const output: any[] = [];
+          for (const toolId of toolNodeIds) {
+            // If the tool contains a handoff action, add it to the output
+            const toolActionIds = getNodesWithGraphId(toolId, workflowState.nodesMetadata);
+            const isSingleAction = Object.keys(toolActionIds).length === 1;
+            for (const actionId of Object.keys(toolActionIds)) {
+              const action = workflowState.operations[actionId];
+              if (equals(action.type, commonConstants.NODE.TYPE.HANDOFF)) {
+                const toolDescription =
+                  operationsState?.inputParameters?.[toolId]?.parameterGroups?.default?.parameters?.find((param) =>
+                    equals(param.parameterName, 'description')
+                  )?.value?.[0]?.value ?? '';
+                const targetId =
+                  operationsState?.inputParameters?.[actionId]?.parameterGroups?.default?.parameters?.find((param) =>
+                    equals(param.parameterName, 'name')
+                  )?.value?.[0]?.value ?? '';
+
+                const actionData = {
+                  id: actionId,
+                  toolId,
+                  toolDescription,
+                  targetId,
+                  isSingleAction,
+                };
+                output.push(actionData);
+              }
+            }
+          }
+          return output;
+        }),
+      [agentId]
+    )
   );
 };