refactor(DesignerV2): State simplification

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

@@ -43,7 +43,7 @@ import {
   onRedoClick,
   serializeWorkflow,
   getDocumentationMetadata,
-  resetDesignerView,
+  useResetDesignerView,
   downloadDocumentAsFile,
   useNodesAndDynamicDataInitialized,
   useChangeCount,
@@ -162,6 +162,7 @@ export const DesignerCommandBar = ({
   const isInitialized = useNodesAndDynamicDataInitialized();
 
   const dispatch = useDispatch<AppDispatch>();
+  const resetDesignerView = useResetDesignerView();
   const isCopilotReady = useNodesInitialized();
   const queryClient = useQueryClient();
   const { isLoading: isSaving, mutate: saveWorkflowMutate } = useMutation(async (autoSave?: boolean) => {
@@ -324,7 +325,7 @@ export const DesignerCommandBar = ({
         onClick={() => {
           showDesignerView();
           dispatch(collapsePanel());
-          dispatch(resetDesignerView());
+          resetDesignerView();
         }}
       >
         Workflow
@@ -336,7 +337,7 @@ export const DesignerCommandBar = ({
         onClick={() => {
           showCodeView();
           dispatch(collapsePanel());
-          dispatch(resetDesignerView());
+          resetDesignerView();
         }}
       >
         Code
@@ -348,7 +349,7 @@ export const DesignerCommandBar = ({
         onClick={() => {
           showMonitoringView();
           dispatch(collapsePanel());
-          dispatch(resetDesignerView());
+          resetDesignerView();
         }}
       >
         Run history

apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx

@@ -15,7 +15,7 @@ import {
   getCustomCodeFilesWithData,
   resetDesignerDirtyState,
   type RootState,
-  resetDesignerView,
+  useResetDesignerView,
   collapsePanel,
 } from '@microsoft/logic-apps-designer-v2';
 import { isNullOrEmpty, type Workflow } from '@microsoft/logic-apps-shared';
@@ -110,6 +110,7 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
 }) => {
   const vscode = useContext(VSCodeContext);
   const dispatch = DesignerStore.dispatch;
+  const resetDesignerView = useResetDesignerView();
 
   const styles = useCommandBarStyles();
   const intlText = useIntlMessages(designerMessages);
@@ -245,7 +246,7 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
         size="small"
         onClick={() => {
           dispatch(collapsePanel());
-          dispatch(resetDesignerView());
+          resetDesignerView();
           switchToDesignerView();
         }}
       >
@@ -257,7 +258,7 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
         size="small"
         onClick={() => {
           dispatch(collapsePanel());
-          dispatch(resetDesignerView());
+          resetDesignerView();
           switchToCodeView();
         }}
       >
@@ -269,7 +270,7 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
         size="small"
         onClick={() => {
           dispatch(collapsePanel());
-          dispatch(resetDesignerView());
+          resetDesignerView();
           switchToMonitoringView();
         }}
       >

libs/designer-v2/src/lib/__test__/mock-root-state.tsx

@@ -2,11 +2,9 @@ import { RootState } from '../core';
 import { initialConnectionsState } from '../core/state/connection/connectionSlice';
 import { initialState as initialCustomCodeState } from '../core/state/customcode/customcodeSlice';
 import { initialDesignerOptionsState } from '../core/state/designerOptions/designerOptionsSlice';
-import { initialState as initialDesignerViewState } from '../core/state/designerView/designerViewSlice';
 import { initialState as initialOperationsState } from '../core/state/operation/operationMetadataSlice';
 import { initialState as initialPanelState } from '../core/state/panel/panelSlice';
 import { initialState as initialSettingsState } from '../core/state/setting/settingSlice';
-import { initialState as initialStaticResultsState } from '../core/state/staticresultschema/staticresultsSlice';
 import { initialState as initialTokensState } from '../core/state/tokens/tokensSlice';
 import { initialState as initialUndoRedoState } from '../core/state/undoRedo/undoRedoSlice';
 import { UndoRedoPartialRootState } from '../core/state/undoRedo/undoRedoTypes';
@@ -20,12 +18,10 @@ export const getMockedInitialRootState = (): RootState => {
     operations: initialOperationsState,
     panel: initialPanelState,
     settings: initialSettingsState,
-    staticResults: initialStaticResultsState,
     tokens: initialTokensState,
     workflow: initialWorkflowState,
     workflowParameters: initialWorkflowParametersState,
     designerOptions: initialDesignerOptionsState,
-    designerView: initialDesignerViewState,
     undoRedo: initialUndoRedoState,
   };
 };
@@ -35,9 +31,7 @@ export const getMockedUndoRedoPartialRootState = (): UndoRedoPartialRootState =>
     connections: initialConnectionsState,
     customCode: initialCustomCodeState,
     operations: initialOperationsState,
-    panel: initialPanelState,
     settings: initialSettingsState,
-    staticResults: initialStaticResultsState,
     tokens: initialTokensState,
     workflow: initialWorkflowState,
     workflowParameters: initialWorkflowParametersState,

libs/designer-v2/src/lib/__test__/redux-test-helper.tsx

@@ -1,12 +1,10 @@
 import connectionsReducer from '../core/state/connection/connectionSlice';
 import designerOptionsReducer from '../core/state/designerOptions/designerOptionsSlice';
-import designerViewReducer from '../core/state/designerView/designerViewSlice';
 import operationMetadataReducer from '../core/state/operation/operationMetadataSlice';
 import panelReducer from '../core/state/panel/panelSlice';
 import unitTestReducer from '../core/state/unitTest/unitTestSlice';
 import customCodeReducer from '../core/state/customcode/customcodeSlice';
 import settingsReducer from '../core/state/setting/settingSlice';
-import staticResultsSchemasReducer from '../core/state/staticresultschema/staticresultsSlice';
 import tokens from '../core/state/tokens/tokensSlice';
 import workflowReducer from '../core/state/workflow/workflowSlice';
 import workflowParametersReducer from '../core/state/workflowparameters/workflowparametersSlice';
@@ -39,10 +37,8 @@ export function renderWithRedux(
         connections: connectionsReducer,
         settings: settingsReducer,
         designerOptions: designerOptionsReducer,
-        designerView: designerViewReducer,
         tokens: tokens,
         workflowParameters: workflowParametersReducer,
-        staticResults: staticResultsSchemasReducer,
         unitTest: unitTestReducer,
         customCode: customCodeReducer,
         undoRedo: undoRedoReducer,

libs/designer-v2/src/lib/core/DesignerProvider.tsx

@@ -2,6 +2,8 @@ import { resetWorkflowState } from '.';
 import { ProviderWrappedContext } from './ProviderWrappedContext';
 import type { DesignerOptionsState, ServiceOptions } from './state/designerOptions/designerOptionsInterfaces';
 import { initDesignerOptions } from './state/designerOptions/designerOptionsSlice';
+import { DesignerViewProvider, useResetDesignerView } from './state/designerView/DesignerViewContext';
+import { ModalProvider } from './state/modal/ModalContext';
 import { store } from './store';
 import { AzureThemeDark } from '@fluentui/azure-themes/lib/azure/AzureThemeDark';
 import { AzureThemeLight } from '@fluentui/azure-themes/lib/azure/AzureThemeLight';
@@ -53,21 +55,25 @@ export const DesignerProvider = ({ id, locale = 'en', options, children }: Desig
           <ThemeProvider theme={azTheme} style={{ height: 'inherit' }}>
             <FluentProvider theme={webTheme} style={{ height: 'inherit' }}>
               <LayoutProvider>
-                <div
-                  data-color-scheme={themeName}
-                  className={`msla-theme-${themeName}`}
-                  style={{ display: 'flex', flexDirection: 'column', height: 'inherit', overflow: 'clip' }}
-                >
-                  <IntlProvider
-                    locale={locale}
-                    defaultLocale={locale}
-                    stringOverrides={options.hostOptions.stringOverrides}
-                    onError={onError}
-                  >
-                    <ReduxReset id={id} />
-                    {children}
-                  </IntlProvider>
-                </div>
+                <DesignerViewProvider>
+                  <ModalProvider>
+                    <div
+                      data-color-scheme={themeName}
+                      className={`msla-theme-${themeName}`}
+                      style={{ display: 'flex', flexDirection: 'column', height: 'inherit', overflow: 'clip' }}
+                    >
+                      <IntlProvider
+                        locale={locale}
+                        defaultLocale={locale}
+                        stringOverrides={options.hostOptions.stringOverrides}
+                        onError={onError}
+                      >
+                        <ReduxReset id={id} />
+                        {children}
+                      </IntlProvider>
+                    </div>
+                  </ModalProvider>
+                </DesignerViewProvider>
               </LayoutProvider>
               <div id="fluent-compat-component-mount" />
             </FluentProvider>
@@ -81,8 +87,10 @@ export const DesignerProvider = ({ id, locale = 'en', options, children }: Desig
 // Redux state persists even through component re-mounts (like with changing the key prop in a parent), so we need to reset the state when the key changes manually
 const ReduxReset = ({ id }: { id?: string }) => {
   const dispatch = useDispatch();
+  const resetDesignerView = useResetDesignerView();
   useEffect(() => {
     dispatch(resetWorkflowState());
-  }, [id, dispatch]);
+    resetDesignerView();
+  }, [id, dispatch, resetDesignerView]);
   return null;
 };

libs/designer-v2/src/lib/core/actions/bjsworkflow/add.ts

@@ -10,10 +10,10 @@ import {
   initializeOperationInfo,
   updateErrorDetails,
   updateNodeSettings,
+  addResultSchema,
 } from '../../state/operation/operationMetadataSlice';
 import type { RelationshipIds } from '../../state/panel/panelTypes';
 import { changePanelNode, openPanel, setIsPanelLoading, setAlternateSelectedNode } from '../../state/panel/panelSlice';
-import { addResultSchema } from '../../state/staticresultschema/staticresultsSlice';
 import type { NodeTokens, VariableDeclaration } from '../../state/tokens/tokensSlice';
 import { initializeTokensAndVariables } from '../../state/tokens/tokensSlice';
 import { WorkflowKind, type NodesMetadata, type WorkflowState } from '../../state/workflow/workflowInterfaces';
@@ -65,7 +65,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import { batch } from 'react-redux';
 import { operationSupportsSplitOn } from '../../utils/outputs';
 import { isA2AWorkflow, isManagedMcpOperation } from '../../state/workflow/helper';
-import { openKindChangeDialog } from '../../state/modal/modalSlice';
+import { getModalService } from '../../state/modal/ModalContext';
 import constants from '../../../common/constants';
 import { addOperationRunAfter, removeOperationRunAfter } from './runafter';
 import { AgentUtils } from '../../../common/utilities/Utils';
@@ -97,7 +97,7 @@ export const addOperation = createAsyncThunk('addOperation', async (payload: Add
       const isA2ATrigger = equals(operation.type, 'Request') && equals(operation.kind, 'Agent');
       if (equals(workflowState.workflowKind, WorkflowKind.STATELESS) && isA2ATrigger) {
         // Can't switch to A2A if the workflow is stateless
-        dispatch(openKindChangeDialog({ type: 'fromStateless' }));
+        getModalService().openKindChange('fromStateless');
         return;
       }
 
@@ -109,7 +109,7 @@ export const addOperation = createAsyncThunk('addOperation', async (payload: Add
           );
           if (workflowHasHandoffs) {
             // Can't switch to stateful/stateless if there are handoffs in the workflow
-            dispatch(openKindChangeDialog({ type: 'toStateful' }));
+            getModalService().openKindChange('toStateful');
             return;
           }
         }
@@ -123,7 +123,7 @@ export const addOperation = createAsyncThunk('addOperation', async (payload: Add
         });
         if (workflowHasActionsAfterAgent) {
           // Can't switch to A2A if there are actions after an agent
-          dispatch(openKindChangeDialog({ type: 'toA2A' }));
+          getModalService().openKindChange('toA2A');
           return;
         }
       }

libs/designer-v2/src/lib/core/actions/bjsworkflow/agent.ts

@@ -2,10 +2,9 @@
 import type { OperationActionData } from '@microsoft/designer-ui';
 import Constants from '../../../common/constants';
 import type { NodeData, NodeOperation } from '../../state/operation/operationMetadataSlice';
-import { initializeNodes, initializeOperationInfo } from '../../state/operation/operationMetadataSlice';
+import { initializeNodes, initializeOperationInfo, addResultSchema } from '../../state/operation/operationMetadataSlice';
 import type { RelationshipIds } from '../../state/panel/panelTypes';
 import { changePanelNode, setIsPanelLoading } from '../../state/panel/panelSlice';
-import { addResultSchema } from '../../state/staticresultschema/staticresultsSlice';
 import { addNode, setFocusNode } from '../../state/workflow/workflowSlice';
 import type { RootState } from '../../store';
 import {

libs/designer-v2/src/lib/core/actions/bjsworkflow/copypaste.ts

@@ -2,15 +2,20 @@ import type { ConnectionReference, ReferenceKey } from '../../../common/models/w
 import { getTriggerNodeId, setFocusNode, type RootState } from '../..';
 import { initCopiedConnectionMap, initScopeCopiedConnections } from '../../state/connection/connectionSlice';
 import type { NodeData, NodeOperation } from '../../state/operation/operationMetadataSlice';
-import { initializeNodes, initializeOperationInfo } from '../../state/operation/operationMetadataSlice';
+import {
+  initializeNodes,
+  initializeOperationInfo,
+  initScopeCopiedStaticResultProperties,
+  updateOperationDescription,
+} from '../../state/operation/operationMetadataSlice';
 import type { RelationshipIds } from '../../state/panel/panelTypes';
 import { setIsPanelLoading } from '../../state/panel/panelSlice';
-import { pasteNode, pasteScopeNode, setNodeDescription } from '../../state/workflow/workflowSlice';
+import { pasteNode, pasteScopeNode } from '../../state/workflow/workflowSlice';
 import { getNonDuplicateId, getNonDuplicateNodeId, initializeOperationDetails } from './add';
 import { createIdCopy, getRecordEntry, LOCAL_STORAGE_KEYS, removeIdTag, type LogicAppsV2 } from '@microsoft/logic-apps-shared';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { batch } from 'react-redux';
-import { getNodeOperationData } from '../../state/operation/operationSelector';
+import { getNodeOperationData, getStaticResultForNodeId } from '../../state/operation/operationSelector';
 import { serializeOperation } from './serializer';
 import { buildGraphFromActions, getAllActionNames } from '../../parsers/BJSWorkflow/BJSDeserializer';
 import type { ActionDefinition } from '@microsoft/logic-apps-shared/src/utils/src/lib/models/logicAppsV2';
@@ -20,8 +25,6 @@ import { updateAllUpstreamNodes } from './initialize';
 import type { NodeTokens } from '../../state/tokens/tokensSlice';
 import { addDynamicTokens } from '../../state/tokens/tokensSlice';
 import { getConnectionReferenceForNodeId } from '../../state/connection/connectionSelector';
-import { getStaticResultForNodeId } from '../../state/staticresultschema/staitcresultsSelector';
-import { initScopeCopiedStaticResultProperties } from '../../state/staticresultschema/staticresultsSlice';
 
 type CopyOperationPayload = {
   nodeId: string;
@@ -85,7 +88,7 @@ export const copyScopeOperation = createAsyncThunk('copyScopeOperation', async (
         allConnectionData[actionName] = connectionReference;
       }
 
-      const staticResult = getStaticResultForNodeId(state.staticResults, actionName);
+      const staticResult = getStaticResultForNodeId(state.operations, actionName);
       if (staticResult) {
         staticResults[actionName] = staticResult;
       }
@@ -166,7 +169,7 @@ export const pasteOperation = createAsyncThunk('pasteOperation', async (payload:
     dispatch(initCopiedConnectionMap({ connectionReferences: { [nodeId]: connectionData } }));
   }
   if (comment) {
-    dispatch(setNodeDescription({ nodeId, description: comment }));
+    dispatch(updateOperationDescription({ id: nodeId, description: comment }));
   }
 
   dispatch(setIsPanelLoading(false));

libs/designer-v2/src/lib/core/actions/bjsworkflow/delete.ts

@@ -4,10 +4,14 @@ import constants from '../../../common/constants';
 import type { WorkflowNode } from '../../parsers/models/workflowNode';
 import { removeNodeConnectionData } from '../../state/connection/connectionSlice';
 import { deleteCustomCode } from '../../state/customcode/customcodeSlice';
-import { deinitializeNodes, deinitializeOperationInfo, updateNodeParameters } from '../../state/operation/operationMetadataSlice';
+import {
+  deinitializeNodes,
+  deinitializeOperationInfo,
+  updateNodeParameters,
+  deinitializeStaticResultProperty,
+} from '../../state/operation/operationMetadataSlice';
 import { clearPanel, setAlternateSelectedNode } from '../../state/panel/panelSlice';
 import { setValidationError } from '../../state/setting/settingSlice';
-import { deinitializeStaticResultProperty } from '../../state/staticresultschema/staticresultsSlice';
 import { deinitializeTokensAndVariables } from '../../state/tokens/tokensSlice';
 import { clearFocusNode, deleteMcpServer, deleteNode } from '../../state/workflow/workflowSlice';
 import { getParameterFromName } from '../../utils/parameters/helper';

libs/designer-v2/src/lib/core/actions/bjsworkflow/operationdeserializer.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { isCustomCodeParameter } from '@microsoft/designer-ui';
 import type { CustomCodeFileNameMapping } from '../../..';
 import Constants from '../../../common/constants';
@@ -22,8 +21,8 @@ import {
   initializeOperationInfo,
   initializeNodes,
   updateDynamicDataLoadStatus,
+  addResultSchema,
 } from '../../state/operation/operationMetadataSlice';
-import { addResultSchema } from '../../state/staticresultschema/staticresultsSlice';
 import type { NodeTokens, VariableDeclaration } from '../../state/tokens/tokensSlice';
 import { initializeTokensAndVariables } from '../../state/tokens/tokensSlice';
 import type { NodesMetadata, Operations, WorkflowKind } from '../../state/workflow/workflowInterfaces';
@@ -104,11 +103,6 @@ export interface NodeOutputsWithDependencies {
   dynamicOutput?: OutputParameter;
 }
 
-export interface OperationMetadata {
-  iconUri: string;
-  brandColor: string;
-}
-
 export interface PasteScopeAdditionalParams extends PasteScopeParams {
   existingOutputTokens: Record<string, NodeTokens>;
   rootTriggerId: string;
@@ -323,7 +317,11 @@ export const initializeOperationDetailsForManagedMcpServer = async (
         nodeInputs,
         nodeOutputs,
         nodeDependencies,
-        operationMetadata: { brandColor: getBrandColorFromConnector(connector), iconUri: getIconUriFromConnector(connector) },
+        operationMetadata: {
+          brandColor: getBrandColorFromConnector(connector),
+          iconUri: getIconUriFromConnector(connector),
+          description: operation?.description,
+        },
         settings,
         staticResult: operation?.runtimeConfiguration?.staticResult,
       },
@@ -422,7 +420,7 @@ export const initializeOperationDetailsForManifest = async (
         operationInfo: nodeOperationInfo,
         manifest,
         supportedChannels,
-        operationMetadata: { iconUri, brandColor },
+        operationMetadata: { iconUri, brandColor, description: operation?.description },
         staticResult: operation?.runtimeConfiguration?.staticResult,
       },
       ...childGraphInputs,