fix - ui issues

frontend/src/views/AngularWorkflow.jsx

@@ -692,6 +692,7 @@ const AngularWorkflow = (defaultprops) => {
   const [workflowExecutions, setWorkflowExecutions] = React.useState([]);
   const [executionTimeline, setExecutionTimeline] = React.useState([]);
   const [workflowExecutionCount, setWorkflowExecutionCount] = React.useState(0);
+  const [executionsLoading, setExecutionsLoading] = React.useState(false);
   const [defaultEnvironmentIndex, setDefaultEnvironmentIndex] = React.useState(0);
   const [workflowRecommendations, setWorkflowRecommendations] = React.useState(undefined);
   const [showErrors, setShowErrors] = React.useState(true);
@@ -2343,6 +2344,8 @@ const AngularWorkflow = (defaultprops) => {
 		return
 	}
 
+    setExecutionsLoading(true);
+
     var url = `${globalUrl}/api/v2/workflows/${id}/executions`
     var method = "GET"
     if (filter === undefined || filter === null || filter.toUpperCase() === "ALL") {
@@ -2413,7 +2416,11 @@ const AngularWorkflow = (defaultprops) => {
           const newkeys = sortByKey(responseJson.executions, "-started_at");
           setWorkflowExecutions(newkeys);
 
-          var tmpView = new URLSearchParams(cursearch).get("execution_id");
+          // If an explicit orgId is passed (suborg context), don't read execution_id from the URL
+          // because that execution_id belongs to a different org's context.
+          var tmpView = (orgId !== undefined && orgId !== null && orgId.length > 0)
+            ? null
+            : new URLSearchParams(window.location.search).get("execution_id");
           if (execution_id !== undefined && execution_id !== null && execution_id.length > 0 && (tmpView === undefined || tmpView === null || tmpView.length === 0)) {
             tmpView = execution_id;
           }
@@ -2422,6 +2429,7 @@ const AngularWorkflow = (defaultprops) => {
           if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
             // Don't clean up if it's already open
             if (executionModalOpen === true) {
+              setExecutionsLoading(false);
               return
             }
 
@@ -2468,8 +2476,8 @@ const AngularWorkflow = (defaultprops) => {
             }
           }
         } else {
-          var tmpView = new URLSearchParams(cursearch).get("execution_id");
+          var tmpView = new URLSearchParams(window.location.search).get("execution_id");
-          if (tmpView === undefined || tmpView === null || tmpView.length === 0) {
+          if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
             const execution_id = tmpView;
             setExecutionModalView(1);
             setExecutionRequest({
@@ -2479,10 +2487,12 @@ const AngularWorkflow = (defaultprops) => {
             start()
           }
         }
+        setExecutionsLoading(false);
       })
       .catch((error) => {
         //toast(error.toString());
         console.log("Get execution error: ", error.toString());
+        setExecutionsLoading(false);
       });
   };
 
@@ -21326,6 +21336,21 @@ const AngularWorkflow = (defaultprops) => {
 	}
 
     if (inputworkflow !== undefined && inputworkflow !== null && inputworkflow.id !== undefined && inputworkflow.id !== null) {
+      const isOrgChange = currentWorkflow.org_id !== undefined && currentWorkflow.org_id !== null && currentWorkflow.org_id.length > 0 && currentWorkflow.org_id !== inputworkflow.org_id;
+
+      if (isOrgChange) {
+        // Switching to a different suborg: clear stale execution state and URL param
+        const currentExecutionId = new URLSearchParams(window.location.search).get("execution_id");
+        if (currentExecutionId) {
+          const newSearch = removeParam("execution_id", window.location.search);
+          navigate(curpath + newSearch);
+        }
+        setExecutionModalView(0);
+        setExecutionData({});
+        setExecutionRunning(false);
+        stop();
+      }
+
       getRevisionHistory(inputworkflow.id, 50, 0, inputworkflow.org_id)
       getWorkflowExecution(inputworkflow.id, "", executionFilter, inputworkflow.org_id)
 	  loadTriggers(inputworkflow.org_id)
@@ -23655,10 +23680,12 @@ const AngularWorkflow = (defaultprops) => {
               onClick={() => {
                 setExecutionRunning(false);
                 stop();
-                // getWorkflowExecution(currentWorkflow.id, "");
-                getWorkflowExecution(props.match.params.key, "");
                 setExecutionModalView(0);
                 setLastExecution(executionData.execution_id);
+                // getWorkflowExecution(currentWorkflow.id, "");
+                setTimeout(() => {
+                  getWorkflowExecution(props.match.params.key, "");
+                }, 100);
               }}
             >
               <IconButton
@@ -23668,6 +23695,8 @@ const AngularWorkflow = (defaultprops) => {
                   marginBottom: "auto",
                 }}
                 onClick={() => {
+                  const newitem = removeParam("execution_id", cursearch);
+                  navigate(curpath + newitem)
                   setExecutionRunning(false);
                   stop()
                 }}
@@ -24086,7 +24115,6 @@ const AngularWorkflow = (defaultprops) => {
                   {environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
                     <Typography variant="body2" color="textSecondary" style={{}}>
                       No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=locations" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Find out here</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href={`mailto:${supportEmail}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>{supportEmail}</a>
-                      No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=locations" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>Find out here</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor}}>support@shuffler.io</a>
                     </Typography>
                     : null}
                 </div>
@@ -24168,6 +24196,14 @@ const AngularWorkflow = (defaultprops) => {
                 }
 
 
+                // Fallback: if large_image is still missing, look up by app_id in the apps state
+                if ((imgSrc === undefined || imgSrc === null || imgSrc.length === 0) && data.action.label && apps.length > 0) {
+                  const appById = apps.find((a) => a.name === data.action.label);
+                  if (appById !== undefined && appById !== null && appById.large_image) {
+                    imgSrc = appById.large_image;
+                  }
+                }
+
                 var actionimg =
                   curapp === null ? null : (
                     <img
@@ -24227,6 +24263,7 @@ const AngularWorkflow = (defaultprops) => {
                 if (data.action.app_name === "Shuffle Tools" && data.action.id !== undefined && cy !== undefined) {
                   const nodedata = cy.getElementById(data.action.id).data();
                   //if (nodedata !== undefined && nodedata !== null && nodedata.fillstyle === "linear-gradient") {
+                  const img = apps.find((a) => a.name === "Shuffle Tools")?.large_image
                   if (nodedata !== undefined && nodedata !== null) {
                     var imgStyle = {
                       marginRight: 20,
@@ -24240,7 +24277,7 @@ const AngularWorkflow = (defaultprops) => {
                     actionimg = (
                       <img
                         alt={nodedata.label}
-                        src={nodedata.large_image}
+                        src={nodedata.large_image || img}
                         style={imgStyle}
                       />
                     );
@@ -24249,7 +24286,7 @@ const AngularWorkflow = (defaultprops) => {
                     actionimg = (
                       <img
                         alt={data.action.app_name}
-                        src={data.action.large_image}
+                        src={data.action.large_image || img}
                         style={{
                           marginRight: 20,
                           width: imgsize,