From 78c64aa7474bd917b6f5629e185d3e6107468175 Mon Sep 17 00:00:00 2001 From: Eric Wu <95886809+Eric-B-Wu@users.noreply.github.com> Date: Tue, 2 Apr 2024 16:14:34 -0400 Subject: [PATCH] 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 --- .../app/AzureLogicAppsDesigner/DesignerCommandBar.tsx | 11 +++++------ .../Services/WorkflowAndArtifacts.tsx | 11 +++++++++-- .../src/app/AzureLogicAppsDesigner/laDesigner.tsx | 6 ++++-- .../AzureLogicAppsDesigner/laDesignerConsumption.tsx | 3 ++- libs/designer-ui/src/lib/panel/panelResizer.tsx | 4 +++- libs/designer/src/lib/core/index.ts | 1 - libs/designer/src/lib/core/state/global.ts | 2 ++ libs/designer/src/lib/ui/panel/panelRoot.tsx | 2 +- 8 files changed, 26 insertions(+), 14 deletions(-) diff --git a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/DesignerCommandBar.tsx b/apps/designer-standalone/src/app/AzureLogicAppsDesigner/DesignerCommandBar.tsx index d990533fb17..b621c1345f5 100644 --- a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/DesignerCommandBar.tsx +++ b/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,7 +50,7 @@ export const DesignerCommandBar = ({ location: string; isReadOnly: boolean; discard: () => unknown; - saveWorkflow: (workflow: Workflow, customCodeData: CustomCodeFileNameMapping | undefined) => Promise; + saveWorkflow: (workflow: Workflow, customCodeData: CustomCodeFileNameMapping | undefined, clearDirtyState: () => void) => Promise; isDarkMode: boolean; isConsumption?: boolean; showConnectionsPanel?: boolean; @@ -58,7 +58,7 @@ export const DesignerCommandBar = ({ enableCopilot?: () => void; loggerService?: ILoggerService; }) => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); 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()); } }); diff --git a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts.tsx b/apps/designer-standalone/src/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts.tsx index 40b3ccfa05e..f30c0840a25 100644 --- a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts.tsx +++ b/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 | undefined, - customCodeData: CustomCodeFileNameMapping | undefined + customCodeData: CustomCodeFileNameMapping | undefined, + clearDirtyState: () => void ): Promise => { 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); } diff --git a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesigner.tsx b/apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesigner.tsx index fc99406bf4c..ec9bd0008d0 100644 --- a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesigner.tsx +++ b/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 => { const { definition, connectionReferences, parameters } = workflowFromDesigner; const workflowToSave = { @@ -260,7 +261,8 @@ const DesignerEditor = () => { connectionsToUpdate, parametersToUpdate, settingsToUpdate, - customCode + customCode, + clearDirtyState ); }; diff --git a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx b/apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx index eb6787602c5..fa156bf1cd5 100644 --- a/apps/designer-standalone/src/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx +++ b/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 = () => {
{ const animationFrame = useRef(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); diff --git a/libs/designer/src/lib/core/index.ts b/libs/designer/src/lib/core/index.ts index 9d72e9971a5..d2156892087 100644 --- a/libs/designer/src/lib/core/index.ts +++ b/libs/designer/src/lib/core/index.ts @@ -69,4 +69,3 @@ export { getBrandColorFromManifest, getIconUriFromManifest, } from './utils/card'; -export { resetCustomCode } from './state/customcode/customcodeSlice'; diff --git a/libs/designer/src/lib/core/state/global.ts b/libs/designer/src/lib/core/state/global.ts index 79c9dafbafb..5f44f566fa5 100644 --- a/libs/designer/src/lib/core/state/global.ts +++ b/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()); }); diff --git a/libs/designer/src/lib/ui/panel/panelRoot.tsx b/libs/designer/src/lib/ui/panel/panelRoot.tsx index d1f3c069218..fe2990ffa72 100644 --- a/libs/designer/src/lib/ui/panel/panelRoot.tsx +++ b/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}