fix(DesignerV2): Added forceSave on run button, fixed connection panel issue (v5.961)

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

@@ -490,10 +490,7 @@ const DesignerEditorConsumption = () => {
                   if (newWorkflow.parameters) {
                     setParameters(newWorkflow.parameters);
                   }
-                  setWorkflow({
-                    ...newWorkflow,
-                    id: guid(),
-                  });
+                  setWorkflow({ ...newWorkflow });
                   DesignerStore.dispatch(setIsWorkflowDirty(true));
                   if (changes) {
                     const nodeIds = changes.flatMap((change) => change.nodeIds);

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

@@ -2,7 +2,14 @@ import { environment } from '../../../environments/environment';
 import type { AppDispatch, RootState } from '../../state/store';
 import { changeRunId, setIsChatBotEnabled, setMonitoringView, setReadOnly, setRunHistoryEnabled } from '../../state/workflowLoadingSlice';
 import { DesignerCommandBar } from './DesignerCommandBarV2';
-import type { ConnectionAndAppSetting, ConnectionReferenceModel, ConnectionsData, NotesData, ParametersData } from './Models/Workflow';
+import type {
+  ConnectionAndAppSetting,
+  ConnectionReferenceModel,
+  ConnectionsData,
+  NotesData,
+  ParametersData,
+  WorkflowJson,
+} from './Models/Workflow';
 import { Artifact, VfsArtifact } from './Models/Workflow';
 import type { WorkflowApp } from './Models/WorkflowApp';
 import { ArtifactService } from './Services/Artifact';
@@ -127,7 +134,7 @@ const DesignerEditor = () => {
 
   // State props
   const [designerID, setDesignerID] = useState(guid());
-  const [workflow, setWorkflow] = useState<Workflow>(); // Current workflow on the designer
+  const [workflow, setWorkflow] = useState<WorkflowJson>(); // Current workflow on the designer
   const [isDesignerView, setIsDesignerView] = useState(true);
   const [isCodeView, setIsCodeView] = useState(false);
   const [isDraftMode, setIsDraftMode] = useState(true);
@@ -193,7 +200,7 @@ const DesignerEditor = () => {
     setIsDraftMode(draftMode);
   }, []);
 
-  const getConnectionConfiguration = async (connectionId: string, _manifest: any, useMcpConnections?: boolean): Promise<any> => {
+  const getConnectionConfiguration = async (connectionId: string, _manifest?: any, useMcpConnections?: boolean): Promise<any> => {
     if (!connectionId) {
       return Promise.resolve();
     }
@@ -291,10 +298,8 @@ const DesignerEditor = () => {
   const hideMonitoringView = useCallback(() => {
     if (isMonitoringView) {
       toggleMonitoringView();
-      setWorkflow({
-        ...artifactData?.properties.files[Artifact.WorkflowFile],
-        id: guid(),
-      });
+      const wf = artifactData?.properties.files[Artifact.WorkflowFile];
+      setWorkflow({ definition: wf?.definition, kind: wf?.kind, metadata: wf?.metadata });
     }
   }, [artifactData?.properties.files, isMonitoringView, toggleMonitoringView]);
 
@@ -354,9 +359,6 @@ const DesignerEditor = () => {
         kind,
       };
 
-      delete workflowToSave.id;
-      delete workflowToSave.notes;
-
       const newManagedApiConnections = {
         ...(connectionsData?.managedApiConnections ?? {}),
       };
@@ -565,8 +567,6 @@ const DesignerEditor = () => {
           ...prevState,
           definition: codeToConvert.definition,
           kind: codeToConvert.kind,
-          connectionReferences: codeToConvert.connectionReferences ?? {},
-          id: guid(),
         }));
         setIsDesignerView(true);
         setIsCodeView(false);
@@ -589,7 +589,7 @@ const DesignerEditor = () => {
 
   useEffect(() => {
     if (isMonitoringView && runInstanceData) {
-      setWorkflow((previousWorkflow?: Workflow) => {
+      setWorkflow((previousWorkflow?: WorkflowJson) => {
         if (!previousWorkflow) {
           // Do not update the workflow if previousWorkflow is undefined; return previous value unchanged
           return previousWorkflow;
@@ -640,7 +640,7 @@ const DesignerEditor = () => {
   return (
     <div key={designerID} style={{ height: 'inherit', width: 'inherit' }}>
       <DesignerProvider
-        id={workflow?.id}
+        id={designerID}
         key={designerID}
         locale={language}
         options={{
@@ -667,7 +667,7 @@ const DesignerEditor = () => {
               notes: currentNotes,
               kind: workflow?.kind,
             }}
-            workflowId={workflow?.id}
+            workflowId={designerID}
             customCode={customCodeData}
             runInstance={runInstanceData as any}
             appSettings={settingsData?.properties}
@@ -720,8 +720,9 @@ const DesignerEditor = () => {
                       setCurrentParameters(newWorkflow.parameters as unknown as ParametersData);
                     }
                     setWorkflow({
-                      ...newWorkflow,
-                      id: guid(),
+                      definition: newWorkflow.definition,
+                      kind: newWorkflow.kind ?? 'stateful',
+                      metadata: (newWorkflow as any)?.metadata ?? workflow?.metadata,
                     });
                     DesignerStore.dispatch(setIsWorkflowDirty(true));
                     if (changes) {

libs/designer-v2/src/lib/ui/FloatingRunButton/index.tsx

@@ -87,6 +87,7 @@ export interface FloatingRunButtonProps {
     tooltipText?: string;
   };
   isConsumption?: boolean;
+  forceSave?: boolean;
 }
 
 export const FloatingRunButton = ({
@@ -101,6 +102,7 @@ export const FloatingRunButton = ({
   tooltipOverride,
   chatProps,
   isConsumption,
+  forceSave,
 }: FloatingRunButtonProps) => {
   const intl = useIntl();
 
@@ -209,7 +211,7 @@ export const FloatingRunButton = ({
     });
 
     // If workflowReadOnly is true, skip the actual save and just return the serialized workflow
-    if (workflowReadOnly || !isDirty) {
+    if (workflowReadOnly || (!isDirty && !forceSave)) {
       return serializedWorkflow;
     }
 
@@ -242,7 +244,7 @@ export const FloatingRunButton = ({
         isDraftMode
       );
     }
-  }, [workflowReadOnly, dispatch, saveDraftWorkflow, isDraftMode, isDirty]);
+  }, [workflowReadOnly, dispatch, saveDraftWorkflow, isDraftMode, isDirty, forceSave]);
 
   const {
     mutate: runMutate,

libs/designer-v2/src/lib/ui/panel/connectionsPanel/allConnections/nodeLinkButton.tsx

@@ -14,8 +14,9 @@ export const NodeLinkButton = ({ nodeId, iconUri }: { nodeId: string; iconUri?:
   return (
     <Button
       appearance="transparent"
-      icon={<img className="msla-action-icon" src={iconUri} alt="" style={{ position: 'absolute', left: '4px' }} />}
+      icon={<img className="msla-action-icon" src={iconUri} alt="" />}
       onClick={nodeClick}
+      style={{ justifyContent: 'flex-start', gap: '8px' }}
     >
       {id}
     </Button>

libs/designer/src/lib/ui/panel/connectionsPanel/allConnections/nodeLinkButton.tsx

@@ -14,8 +14,9 @@ export const NodeLinkButton = ({ nodeId, iconUri }: { nodeId: string; iconUri?:
   return (
     <Button
       appearance="transparent"
-      icon={<img className="msla-action-icon" src={iconUri} alt="" style={{ position: 'absolute', left: '4px' }} />}
+      icon={<img className="msla-action-icon" src={iconUri} alt="" />}
       onClick={nodeClick}
+      style={{ justifyContent: 'flex-start', gap: '18px' }}
     >
       {id}
     </Button>

libs/designer/src/lib/ui/panel/connectionsPanel/connectionsPanel.less

@@ -20,12 +20,12 @@
 
 .msla-action-icon {
   width: 24px;
-  height: 60px;
+  height: 24px;
   border-radius: 2px;
 
   &.large {
     width: 32px;
-    height: 52px;
+    height: 32px;
   }
 }