fix(vscode): Fix project build cache and designer loading (#4739)

* Fix react query and build project

* Update command name

.vscode/launch.json

@@ -12,7 +12,7 @@
       "trace": false,
       "internalConsoleOptions": "openOnFirstSessionStart",
       "outFiles": ["${workspaceFolder}/apps/vs-code-designer/dist/*.js"],
-      "preLaunchTask": "npm: build",
+      "preLaunchTask": "npm: build:extension",
       "env": {
         "DEBUGTELEMETRY": "v"
       }

Localize/lang/strings.json

@@ -1,6 +1,7 @@
 {
   "++ZVe/": "Testing",
   "+0H8Or": "Warning: input node type does not match the schema node's type",
+  "+0ua83": "Parameters",
   "+0yxlR": "Function display",
   "+3rROX": "Protected",
   "+FcXe9": "Faulted",
@@ -853,6 +854,7 @@
   "Xnn0uj": "Request",
   "XqamWZ": "Delete",
   "XsktQ/": "Limit Logic Apps to not include workflow metadata headers in the response.",
+  "XtVOMn": "Something went wrong",
   "XtuP5e": "Math functions",
   "Xv5CGN": "(UTC-05:00) Indiana (East)",
   "Xx/naD": "Required. The name of the action whose body outputs you want.",
@@ -909,9 +911,11 @@
   "Zi9gQK": "Add new item",
   "ZihyUf": "Close",
   "ZkjTbp": "Learn more about dynamic content.",
+  "ZvAp7m": "Save",
   "ZyDq4/": "Show a different suggestion",
   "_++ZVe/.comment": "Title for testing section",
   "_+0H8Or.comment": "Warning message for when input node type does not match schema node type",
+  "_+0ua83.comment": "Button text for parameters",
   "_+0yxlR.comment": "Label for the function display radio group",
   "_+3rROX.comment": "Label in the chatbot header stating that the users information is protected in this chatbot",
   "_+FcXe9.comment": "The status message to show in monitoring view.",
@@ -1764,6 +1768,7 @@
   "_Xnn0uj.comment": "Header text for request",
   "_XqamWZ.comment": "Label of Delete Token Button",
   "_XsktQ/.comment": "description of workflow headers on response setting",
+  "_XtVOMn.comment": "Something went wrong text",
   "_XtuP5e.comment": "Label for math functions",
   "_Xv5CGN.comment": "Time zone value ",
   "_Xx/naD.comment": "Required string parameter to determine action's body output wanted",
@@ -1820,6 +1825,7 @@
   "_Zi9gQK.comment": "Label to add item to property editor",
   "_ZihyUf.comment": "Label for the close button in the chatbot header",
   "_ZkjTbp.comment": "Text for dynamic content link",
+  "_ZvAp7m.comment": "Button text for save",
   "_ZyDq4/.comment": "Text for the show different suggestion flow button",
   "_a7j3gS.comment": "Required number parameter to divide in mod function",
   "_aAXnqw.comment": "Required number of occurrences to get nthIndexOf function with",
@@ -1938,6 +1944,7 @@
   "_fElufw.comment": "Select an API Management resource",
   "_fKYuwf.comment": "Placeholder description for a newly inserted File parameter",
   "_fVG5aD.comment": "Time zone value ",
+  "_fZJWBR.comment": "Loading designer text",
   "_faUrud.comment": "Message to show under the loading icon when loading connection parameters",
   "_fg/34o.comment": "Label for logical functions",
   "_fifSPb.comment": "Time zone value ",
@@ -2172,6 +2179,7 @@
   "_oWGaw9.comment": "Click to view less token options.",
   "_oZMhX/.comment": "Text of Tooltip to expand",
   "_odQ554.comment": "Response body for test map API",
+  "_ohOaXj.comment": "Button text for errors",
   "_onXUu0.comment": "Text to tell users to click to add comments",
   "_osKNnl.comment": "Error validation message for doubles",
   "_ox2Ou7.comment": "Placeholder for empty collapsed dictionary",
@@ -2255,6 +2263,7 @@
   "_sEqLTV.comment": "An accessability label that describes the testing tab",
   "_sFbnCs.comment": "Time zone value ",
   "_sFwHQc.comment": "aria label description for cancel button",
+  "_sOnphB.comment": "Button text for resubmit",
   "_sQ2vRs.comment": "add a case to switch statement",
   "_sRpETS.comment": "Warning message for when custom value does not match schema node type",
   "_sVQe34.comment": "The description for the test tab parameters.",
@@ -2572,6 +2581,7 @@
   "fElufw": "Select an API Management resource",
   "fKYuwf": "Please select file or image",
   "fVG5aD": "(UTC-05:00) Haiti",
+  "fZJWBR": "Loading designer",
   "faUrud": "Loading connection data...",
   "fg/34o": "Logical functions",
   "fifSPb": "(UTC-03:30) Newfoundland",
@@ -2806,6 +2816,7 @@
   "oWGaw9": "See Less",
   "oZMhX/": "Expand",
   "odQ554": "Response body",
+  "ohOaXj": "Errors",
   "onXUu0": "Add a note",
   "osKNnl": "Enter a valid Double number.",
   "ox2Ou7": "Enter a valid JSON",
@@ -2889,6 +2900,7 @@
   "sEqLTV": "Testing Tab",
   "sFbnCs": "(UTC-05:00) Chetumal",
   "sFwHQc": "Cancel creating a connection",
+  "sOnphB": "Resubmit",
   "sQ2vRs": "Add Case",
   "sRpETS": "Warning: custom value does not match the schema node's type",
   "sVQe34": "Provide parameters to test the output.",

apps/vs-code-designer/package.json

@@ -38,7 +38,7 @@
   },
   "private": true,
   "scripts": {
-    "build": "tsup && pnpm run copyFiles && pnpm -w run build:vscode ",
+    "build:extension": "tsup && pnpm run copyFiles && pnpm -w run build:vscode-react",
     "copyFiles": "node extension-copy-svgs.js",
     "vscode:designer:pack": "pnpm run build && pnpm run vscode:designer:pack:step1 && pnpm run vscode:designer:pack:step2",
     "vscode:designer:pack:step1": "cd ./dist && npm install",

apps/vs-code-react/package.json

@@ -36,7 +36,7 @@
   "private": true,
   "scripts": {
     "build": "vite build",
-    "build:vscode": "vite build --outDir ../../vs-code-designer/dist/vs-code-react",
+    "build:vscode-react": "vite build --outDir ../../vs-code-designer/dist/vs-code-react",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "type": "module"

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

@@ -13,14 +13,12 @@ import {
   useAllSettingsValidationErrors,
   useAllConnectionErrors,
 } from '@microsoft/logic-apps-designer';
-import type { RootState } from '@microsoft/logic-apps-designer';
 import { RUN_AFTER_COLORS, isNullOrEmpty } from '@microsoft/logic-apps-shared';
 import { ExtensionCommand } from '@microsoft/vscode-extension-logic-apps';
-import { createSelector } from '@reduxjs/toolkit';
 import { useContext, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { useMutation } from '@tanstack/react-query';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 export interface DesignerCommandBarProps {
   isRefreshing: boolean;
@@ -33,18 +31,12 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({ isRefres
   const intl = useIntl();
   const vscode = useContext(VSCodeContext);
   const dispatch = useDispatch();
+  const designerState = DesignerStore.getState();
 
-  const isMonitoringView = useSelector(
-    createSelector(
-      (state: RootState) => state.designerOptions,
-      (state: any) => state.isMonitoringView
-    )
-  );
-
+  const isMonitoringView = designerState.designerOptions.isMonitoringView;
   const designerIsDirty = useIsDesignerDirty();
 
   const { isLoading: isSaving, mutate: saveWorkflowMutate } = useMutation(async () => {
-    const designerState = DesignerStore.getState();
     const { definition, parameters, connectionReferences } = await serializeBJSWorkflow(designerState, {
       skipValidation: false,
       ignoreNonCriticalErrors: true,
@@ -124,13 +116,11 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({ isRefres
     disableGrey: [{ color: 'rgb(121, 119, 117)' }, iconClass],
   });
 
-  const allInputErrors = useSelector((state: RootState) => {
-    return (Object.entries(state.operations.inputParameters) ?? []).filter(([_id, nodeInputs]) =>
-      Object.values(nodeInputs.parameterGroups).some((parameterGroup) =>
-        parameterGroup.parameters.some((parameter) => (parameter?.validationErrors?.length ?? 0) > 0)
-      )
-    );
-  });
+  const allInputErrors = (Object.entries(designerState.operations.inputParameters) ?? []).filter(([_id, nodeInputs]) =>
+    Object.values(nodeInputs.parameterGroups).some((parameterGroup) =>
+      parameterGroup.parameters.some((parameter) => (parameter?.validationErrors?.length ?? 0) > 0)
+    )
+  );
 
   const haveInputErrors = allInputErrors.length > 0;
   const allWorkflowParameterErrors = useWorkflowParameterValidationErrors();

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

@@ -9,7 +9,7 @@ import { Spinner, SpinnerSize, Text } from '@fluentui/react';
 import type { ConnectionCreationInfo, LogicAppsV2 } from '@microsoft/logic-apps-shared';
 import type { ConnectionReferences } from '@microsoft/logic-apps-designer';
 import { DesignerProvider, BJSWorkflowProvider, Designer, getTheme, useThemeObserver } from '@microsoft/logic-apps-designer';
-import { isEmptyString, Theme } from '@microsoft/logic-apps-shared';
+import { isEmptyString, isNullOrUndefined, Theme } from '@microsoft/logic-apps-shared';
 import type { FileSystemConnectionInfo, StandardApp } from '@microsoft/vscode-extension-logic-apps';
 import { ExtensionCommand } from '@microsoft/vscode-extension-logic-apps';
 import { useContext, useMemo, useState, useEffect } from 'react';
@@ -103,38 +103,43 @@ export const DesignerApp = () => {
   }, [connectionData]);
 
   const getRunInstance = () => {
-    if (isMonitoringView && !isEmptyString(runId) && panelMetaData !== null) {
-      return services.runService.getRun(runId);
-    }
-    return;
-  };
-
-  const onRunInstanceSuccess = async (runDefinition: LogicAppsV2.RunInstanceDefinition) => {
-    if (isMonitoringView) {
-      const standardAppInstance = {
-        ...standardApp,
-        definition: runDefinition.properties.workflow.properties.definition,
-      } as StandardApp;
-      setRunInstance(runDefinition);
-      setStandardApp(standardAppInstance);
-    }
-  };
-
-  const onRunInstanceError = async () => {
-    setRunInstance(null);
-    setStandardApp(undefined);
+    return services.runService.getRun(runId);
   };
 
-  const { refetch, isError, isFetching, isLoading, isRefetching } = useQuery<any>(['runInstance', { runId }], getRunInstance, {
+  const {
+    refetch,
+    isError,
+    isFetching,
+    isLoading,
+    isRefetching,
+    data: runData,
+  } = useQuery<any>(['runInstance', { runId }], getRunInstance, {
     refetchOnWindowFocus: false,
     refetchOnMount: true,
     initialData: null,
-    onSuccess: onRunInstanceSuccess,
-    onError: onRunInstanceError,
+    enabled: isMonitoringView && !isEmptyString(runId),
   });
 
   useEffect(() => {
-    refetch();
+    if (isMonitoringView) {
+      if (isNullOrUndefined(runData)) {
+        setRunInstance(null);
+        setStandardApp(undefined);
+      } else {
+        const standardAppInstance = {
+          ...standardApp,
+          definition: runData.properties.workflow.properties.definition,
+        } as StandardApp;
+        setRunInstance(runData);
+        setStandardApp(standardAppInstance);
+      }
+    }
+  }, [runData, standardApp, isMonitoringView]);
+
+  useEffect(() => {
+    if (isMonitoringView && !isEmptyString(runId)) {
+      refetch();
+    }
   }, [isMonitoringView, runId, services, refetch]);
 
   useEffect(() => {

package.json

@@ -74,7 +74,8 @@
   "private": true,
   "scripts": {
     "build": "turbo run build",
-    "build:vscode": "turbo run build:vscode",
+    "build:vscode-react": "turbo run build:vscode-react",
+    "build:extension": "turbo run build:extension",
     "bump": "standard-version --no-verify",
     "check": "biome check --apply .",
     "compile:loc": "formatjs compile-folder --ast --format ./format.js \"Localize/lang\" \"libs/logic-apps-shared/src/intl/compiled-lang/\" ",

turbo.json

@@ -23,7 +23,10 @@
                 "build/**"
             ]
         },
-        "build:vscode": {
+        "build:vscode-react": {
+            "cache": false
+        },
+        "build:extension":{
             "cache": false
         },
         "dev": {