BUG: Fixed app dragging and hovering stopper in workflow

frontend/src/components/ParsedAction.jsx

@@ -2486,7 +2486,7 @@ const ParsedAction = (props) => {
         </div>
       ) : null}
 
-      {showEnvironment !== undefined && showEnvironment ? (
+      {showEnvironment !== undefined && showEnvironment && environments.length > 1 ? (
         <div style={{ marginTop: "20px" }}>
           <Typography>Environment</Typography>
           <Select
@@ -2515,13 +2515,14 @@ const ParsedAction = (props) => {
               borderRadius: theme.palette.borderRadius,
             }}
           >
-            {environments.map((data) => {
+            {environments.map((data, index) => {
-              if (data.archived) {
+              if (data.archived === true) {
                 return null;
               }
 
               return (
                 <MenuItem
+									key={index}
                   key={data.Name}
                   style={{
                     backgroundColor: theme.palette.inputColor,
@@ -2663,6 +2664,16 @@ const ParsedAction = (props) => {
                 newActionname = data.label;
               }
 
+              var newActiondescription = data.description;
+							console.log("DESC: ", newActiondescription)
+              if (
+                data.description === undefined || data.description === null
+              ) {
+								newActiondescription = "Description: No description defined for this action"
+              } else {
+								newActiondescription = "Description: "+newActiondescription
+							}
+
               const iconInfo = GetIconInfo({ name: data.name });
               const useIcon = iconInfo.originalIcon;
 
@@ -2671,7 +2682,14 @@ const ParsedAction = (props) => {
                 newActionname.substring(1)
               ).replaceAll("_", " ");
 
+
+
               return (
+                <Tooltip
+                  color="secondary"
+                  title={newActiondescription}
+                  placement="left"
+                >
 									<div style={{ display: "flex" }}>
 										<span
 											style={{
@@ -2684,6 +2702,7 @@ const ParsedAction = (props) => {
 										</span>
 										<span style={{}}>{newActionname}</span>
 									</div>
+								</Tooltip>
               );
             }}
             renderInput={(params) => {

frontend/src/views/AngularWorkflow.jsx

@@ -2132,6 +2132,7 @@ const AngularWorkflow = (props) => {
 				if (data.id !== undefined && data.app_name !== undefined) {
 					//newapps.push(data)
 					workflow.actions.push(data)
+					setWorkflow(workflow)
 					curaction = data
 				} else {
         	alert.error("Action not found. Please remake it.");
@@ -2257,10 +2258,16 @@ const AngularWorkflow = (props) => {
         cy.on("free", "node", (e) => onNodeDragStop(e, curaction));
       }
 
-      if (environments !== undefined && environments !== null) {
+			console.log("Object: ", environments)
-        var env = environments.find((a) => a.Name === curaction.environment);
+      if (environments !== undefined && environments !== null && (typeof environments === "array" || typeof environments === "object")) {
+				var parsedenv = environments
+				if (typeof environments === "object") {
+					parsedenv = [environments]
+				}
+
+        var env = parsedenv.find((a) => a.Name === curaction.environment);
         if (!env || env === undefined) {
-          env = environments[defaultEnvironmentIndex];
+          env = parsedenv[defaultEnvironmentIndex];
         }
 
         setSelectedActionEnvironment(env);
@@ -2384,7 +2391,13 @@ const AngularWorkflow = (props) => {
 
         // Finds the FIRST json only
         if (jsonvalid) {
-          exampledata = JSON.parse(foundResult.result);
+					try {
+          	exampledata = JSON.parse(foundResult.result)
+    			} catch (e) {
+						console.log("Result: ", exampledata)
+
+					}
+
           break;
         }
       }
@@ -2596,10 +2609,17 @@ const AngularWorkflow = (props) => {
       }
     }
 
+		const eventTarget = event.target.target()
+		console.log("BUTTON! Find parent from: ", eventTarget)
+    if (eventTarget.data("isButton") === true) {
+			console.log("ACTUALLY A BUTTON!")
+		}
+
     if (
-      event.target.target().data("isButton") === true ||
+      eventTarget.data("isDescriptor") === true ||
-      event.target.target().data("isDescriptor") === true
+			eventTarget.data("type") === "COMMENT" 
     ) {
+			console.log("Removing because of descriptor or comment")
       event.target.remove();
       return;
     }
@@ -3152,9 +3172,9 @@ const AngularWorkflow = (props) => {
         if (response.status !== 200) {
           console.log("Status not 200 for apps :O!");
           if (isCloud) {
-            setEnvironments({ name: "Cloud", type: "cloud" });
+            setEnvironments([{ Name: "Cloud", Type: "cloud" }]);
           } else {
-            setEnvironments({ name: "Onprem", type: "onprem" });
+            setEnvironments([{ Name: "Onprem", Type: "onprem" }]);
           }
 
           return;
@@ -3191,7 +3211,7 @@ const AngularWorkflow = (props) => {
 
 				// FIXME: Don't allow multiple in cloud yet. Cloud -> Onprem isn't stable.
 				if (isCloud) {
-          setEnvironments({ name: "Cloud", type: "cloud" });
+          setEnvironments([{ Name: "Cloud", Type: "cloud" }]);
 				} else {
         	setEnvironments(responseJson);
 				}
@@ -3505,9 +3525,11 @@ const AngularWorkflow = (props) => {
 
   const onNodeHover = (event) => {
     const nodedata = event.target.data();
-    if (nodedata.finished === false) {
+
-      return;
+		//console.log("NODE: ", nodedata)
-    }
+    //if (nodedata.finished === false) {
+    //  return;
+    //}
 
     //var parentNode = cy.$("#" + event.target.data("id"));
     //if (parentNode.data("isButton") || parentNode.data("buttonId")) return;
@@ -10141,6 +10163,9 @@ const AngularWorkflow = (props) => {
 
       /* Copy the text inside the text field */
       document.execCommand("copy");
+
+      console.log("COPYING!");
+			alert.info("Copied value to clipboard, NOT json path.")
     } else {
       console.log("Failed to copy from " + elementName + ": ", copyText);
     }
@@ -10208,7 +10233,7 @@ const AngularWorkflow = (props) => {
       /* Copy the text inside the text field */
       document.execCommand("copy");
       console.log("COPYING!");
-			alert.info("Copied value to clipboard.")
+			alert.info("Copied JSON path to clipboard.")
     } else {
       console.log("Couldn't find element ", elementName);
     }

frontend/src/views/AppCreator.jsx

@@ -1332,6 +1332,7 @@ const AppCreator = (props) => {
         }
       }
 
+
       if (data.servers !== undefined && data.servers.length > 0) {
         var firstUrl = data.servers[0].url;
         if (
@@ -1366,6 +1367,7 @@ const AppCreator = (props) => {
       //console.log("SECURITY: ", securitySchemes)
       //if (Object.entries(securitySchemes) > 1 &&
       var newauth = [];
+			try {
       	for (const [key, value] of Object.entries(securitySchemes)) {
       	  console.log(key, value);
       	  if (key === "jwt") {
@@ -1455,7 +1457,7 @@ const AppCreator = (props) => {
       	        basekey
       	      );
       	    }
-        } else if (key === "ApiKeyAuth") {
+      	  } else if (key === "ApiKeyAuth" || key === "Token") {
       	    setAuthenticationOption("API key");
 
       	    value.in = value.in.charAt(0).toUpperCase() + value.in.slice(1);
@@ -1483,6 +1485,10 @@ const AppCreator = (props) => {
       	    //})
       	  }
       	}
+			} catch (e) {
+				alert.error("Failed to handle auth")
+				console.log("Error: ", e)
+			}
 
       if (newauth.length > 0) {
         setExtraAuth(newauth);
@@ -2192,7 +2198,7 @@ const AppCreator = (props) => {
   //console.log("Location: ", parameterLocation)
   //console.log("Name: ", parameterName)
   const extraKeys = (
-    <div style={{ marginTop: 50 }}>
+    <div style={{ marginTop: 50, marginRight: 25, }}>
       <div style={{ display: "flex" }}>
         <Typography variant="body1">Extra authentication</Typography>
         {extraAuth.length === 0 ? (
@@ -4394,7 +4400,7 @@ const AppCreator = (props) => {
 
   const imageInfo = (
     <img
-      crossorigin="anonymous"
+      crossOrigin="anonymous"
       src={imageData}
       id="logo"
       style={{

frontend/src/views/Docs.jsx

@@ -18,8 +18,8 @@ import {
 import { Link as LinkIcon, Edit as EditIcon } from "@material-ui/icons";
 
 const Body = {
-  maxWidth: "1000px",
+  maxWidth: 1000,
-  minWidth: "768px",
+  minWidth: 768,
   margin: "auto",
   display: "flex",
   height: "100%",
@@ -81,6 +81,9 @@ const Docs = (props) => {
     maxWidth: 250,
     flex: 1,
     position: "fixed",
+		maxHeight: "83vh",
+		overflowX: "hidden",
+		overflowY: "auto",
   };
 
   const fetchDocList = () => {