fix(designer): Fix a couple of bugs that occurred with Custom Code (#…

…4521)

* fix dictionary \ issue

* string update

* custom logic for monaco

* wrong word lol

* fix a couple of customcode bugs

apps/designer-standalone/src/app/AzureLogicAppsDesigner/DesignerCommandBar.tsx

@@ -5,7 +5,7 @@ import { CommandBar } from '@fluentui/react/lib/CommandBar';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 import type { ILoggerService } from '@microsoft/logic-apps-shared';
 import { LogEntryLevel, LoggerService, isNullOrEmpty, RUN_AFTER_COLORS } from '@microsoft/logic-apps-shared';
-import type { CustomCodeFileNameMapping, RootState, Workflow } from '@microsoft/logic-apps-designer';
+import type { AppDispatch, CustomCodeFileNameMapping, RootState, Workflow } from '@microsoft/logic-apps-designer';
 import {
   store as DesignerStore,
   serializeBJSWorkflow,
@@ -20,7 +20,7 @@ import {
   openPanel,
   useNodesInitialized,
   getCustomCodeFilesWithData,
-  resetCustomCode,
+  resetDesignerDirtyState,
 } from '@microsoft/logic-apps-designer';
 import { useMemo } from 'react';
 import { useMutation } from 'react-query';
@@ -50,15 +50,15 @@ export const DesignerCommandBar = ({
   location: string;
   isReadOnly: boolean;
   discard: () => unknown;
-  saveWorkflow: (workflow: Workflow, customCodeData: CustomCodeFileNameMapping | undefined) => Promise<void>;
+  saveWorkflow: (workflow: Workflow, customCodeData: CustomCodeFileNameMapping | undefined, clearDirtyState: () => void) => Promise<void>;
   isDarkMode: boolean;
   isConsumption?: boolean;
   showConnectionsPanel?: boolean;
   rightShift?: string;
   enableCopilot?: () => void;
   loggerService?: ILoggerService;
 }) => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const isCopilotReady = useNodesInitialized();
   const { isLoading: isSaving, mutate: saveWorkflowMutate } = useMutation(async () => {
     const designerState = DesignerStore.getState();
@@ -92,9 +92,8 @@ export const DesignerCommandBar = ({
     const customCodeFilesWithData = getCustomCodeFilesWithData(designerState.customCode);
 
     if (!hasParametersErrors) {
-      await saveWorkflow(serializedWorkflow, customCodeFilesWithData);
+      await saveWorkflow(serializedWorkflow, customCodeFilesWithData, () => dispatch(resetDesignerDirtyState()));
       updateCallbackUrl(designerState, DesignerStore.dispatch);
-      DesignerStore.dispatch(resetCustomCode());
     }
   });
 

apps/designer-standalone/src/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts.tsx

@@ -9,6 +9,7 @@ import type { LogicAppsV2, VFSObject } from '@microsoft/logic-apps-shared';
 import axios from 'axios';
 import jwt_decode from 'jwt-decode';
 import { useQuery } from 'react-query';
+import { isSuccessResponse } from './HttpClient';
 
 const baseUrl = 'https://management.azure.com';
 const standardApiVersion = '2020-06-01';
@@ -341,7 +342,8 @@ export const saveWorkflowStandard = async (
   connectionsData: ConnectionsData | undefined,
   parametersData: ParametersData | undefined,
   settings: Record<string, string> | undefined,
-  customCodeData: CustomCodeFileNameMapping | undefined
+  customCodeData: CustomCodeFileNameMapping | undefined,
+  clearDirtyState: () => void
 ): Promise<any> => {
   const data: any = {
     files: {
@@ -373,13 +375,18 @@ export const saveWorkflowStandard = async (
     // saving custom code must happen synchronously with deploying the workflow artifacts as they both cause
     // the host to go soft restart. We may need to look into if there's a race case where this may still happen
     saveCustomCodeStandard(customCodeData);
-    await axios.post(`${baseUrl}${siteResourceId}/deployWorkflowArtifacts?api-version=${standardApiVersion}`, data, {
+    const response = await axios.post(`${baseUrl}${siteResourceId}/deployWorkflowArtifacts?api-version=${standardApiVersion}`, data, {
       headers: {
         'If-Match': '*',
         'Content-Type': 'application/json',
         Authorization: `Bearer ${environment.armToken}`,
       },
     });
+    if (!isSuccessResponse(response.status)) {
+      alert('Failed to save workflow');
+      return;
+    }
+    clearDirtyState();
   } catch (error) {
     console.log(error);
   }

apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesigner.tsx

@@ -194,7 +194,8 @@ const DesignerEditor = () => {
 
   const saveWorkflowFromDesigner = async (
     workflowFromDesigner: Workflow,
-    customCode: CustomCodeFileNameMapping | undefined
+    customCode: CustomCodeFileNameMapping | undefined,
+    clearDirtyState: () => void
   ): Promise<void> => {
     const { definition, connectionReferences, parameters } = workflowFromDesigner;
     const workflowToSave = {
@@ -260,7 +261,8 @@ const DesignerEditor = () => {
       connectionsToUpdate,
       parametersToUpdate,
       settingsToUpdate,
-      customCode
+      customCode,
+      clearDirtyState
     );
   };
 

apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx

@@ -66,6 +66,7 @@ const DesignerEditorConsumption = () => {
     showChatBot,
     hostOptions,
     showConnectionsPanel,
+    language,
   } = useSelector((state: RootState) => state.workflowLoader);
 
   const workflowName = workflowId.split('/').splice(-1)[0];
@@ -201,7 +202,7 @@ const DesignerEditorConsumption = () => {
     <div key={designerID} style={{ height: 'inherit', width: 'inherit' }}>
       <DesignerProvider
         key={designerID}
-        locale={'en-US'}
+        locale={language}
         options={{
           services,
           isDarkMode,

libs/designer-ui/src/lib/panel/panelResizer.tsx

@@ -37,7 +37,9 @@ export const PanelResizer = (props: PanelResizerProps): JSX.Element => {
   const animationFrame = useRef<number>(0);
 
   const resize = useCallback(
-    ({ clientX }: MouseEvent) => {
+    (e: MouseEvent) => {
+      e.preventDefault();
+      const { clientX } = e;
       animationFrame.current = requestAnimationFrame(() => {
         if (isResizing) {
           const newWidth = Math.max(window.innerWidth - clientX, 400);

libs/designer/src/lib/core/index.ts

@@ -69,4 +69,3 @@ export {
   getBrandColorFromManifest,
   getIconUriFromManifest,
 } from './utils/card';
-export { resetCustomCode } from './state/customcode/customcodeSlice';

libs/designer/src/lib/core/state/global.ts

@@ -1,3 +1,4 @@
+import { resetCustomCode } from './customcode/customcodeSlice';
 import { useIsWorkflowDirty } from './workflow/workflowSelectors';
 import { setIsWorkflowDirty } from './workflow/workflowSlice';
 import { setIsWorkflowParametersDirty } from './workflowparameters/workflowparametersSlice';
@@ -17,4 +18,5 @@ export const resetDesignerDirtyState = createAsyncThunk('resetDesignerDirtyState
   const dispatch = thunkAPI.dispatch;
   dispatch(setIsWorkflowDirty(false));
   dispatch(setIsWorkflowParametersDirty(false));
+  dispatch(resetCustomCode());
 });

libs/designer/src/lib/ui/panel/panelRoot.tsx

@@ -84,7 +84,7 @@ export const PanelRoot = (props: PanelRootProps): JSX.Element => {
       className={`msla-panel-root-${currentPanelMode}`}
       isLightDismiss
       isBlocking={!isLoadingPanel && !nonBlockingPanels.includes(currentPanelMode ?? '')}
-      type={panelLocation === PanelLocation.Right ? PanelType.custom : PanelType.customNear}
+      type={commonPanelProps.panelLocation === PanelLocation.Right ? PanelType.custom : PanelType.customNear}
       isOpen={!collapsed}
       onDismiss={dismissPanel}
       hasCloseButton={false}