From ae9bc32a47ff82f1197bd28880a68a6c43a8c882 Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Thu, 16 Dec 2021 00:55:39 +0100
Subject: [PATCH] BUG: Fixed app dragging and hovering stopper in workflow

---
 frontend/src/components/ParsedAction.jsx |  67 ++++---
 frontend/src/views/AngularWorkflow.jsx   |  51 ++++--
 frontend/src/views/AppCreator.jsx        | 224 ++++++++++++-----------
 frontend/src/views/Docs.jsx              |   7 +-
 4 files changed, 201 insertions(+), 148 deletions(-)

diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index fd4dd5ab..d4e27bcc 100644
--- a/frontend/src/components/ParsedAction.jsx
+++ b/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) => {
-              if (data.archived) {
+            {environments.map((data, index) => {
+              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,32 +2682,40 @@ const ParsedAction = (props) => {
                 newActionname.substring(1)
               ).replaceAll("_", " ");
 
+
+
               return (
-                <div style={{ display: "flex" }}>
-                  <span
-                    style={{
-                      marginRight: 10,
-                      marginTop: "auto",
-                      marginBottom: "auto",
-                    }}
-                  >
-                    {useIcon}
-                  </span>
-                  <span style={{}}>{newActionname}</span>
-                </div>
+                <Tooltip
+                  color="secondary"
+                  title={newActiondescription}
+                  placement="left"
+                >
+									<div style={{ display: "flex" }}>
+										<span
+											style={{
+												marginRight: 10,
+												marginTop: "auto",
+												marginBottom: "auto",
+											}}
+										>
+											{useIcon}
+										</span>
+										<span style={{}}>{newActionname}</span>
+									</div>
+								</Tooltip>
               );
             }}
             renderInput={(params) => {
               return (
-                <TextField
-                  style={{
-                    backgroundColor: theme.palette.inputColor,
-                    borderRadius: theme.palette.borderRadius,
-                  }}
-                  {...params}
-                  label="Find Actions"
-                  variant="outlined"
-                />
+									<TextField
+										style={{
+											backgroundColor: theme.palette.inputColor,
+											borderRadius: theme.palette.borderRadius,
+										}}
+										{...params}
+										label="Find Actions"
+										variant="outlined"
+                	/>
               );
             }}
           />
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index 979e438b..69ecd26a 100644
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/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) {
-        var env = environments.find((a) => a.Name === curaction.environment);
+			console.log("Object: ", environments)
+      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 ||
-      event.target.target().data("isDescriptor") === true
+      eventTarget.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);
     }
diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx
index c11970d8..c87694dd 100644
--- a/frontend/src/views/AppCreator.jsx
+++ b/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,123 +1367,128 @@ const AppCreator = (props) => {
       //console.log("SECURITY: ", securitySchemes)
       //if (Object.entries(securitySchemes) > 1 &&
       var newauth = [];
-      for (const [key, value] of Object.entries(securitySchemes)) {
-        console.log(key, value);
-        if (key === "jwt") {
-          setAuthenticationOption("JWT");
-          setAuthenticationRequired(true);
+			try {
+      	for (const [key, value] of Object.entries(securitySchemes)) {
+      	  console.log(key, value);
+      	  if (key === "jwt") {
+      	    setAuthenticationOption("JWT");
+      	    setAuthenticationRequired(true);
 
-          if (
-            value.in !== undefined &&
-            value.in !== null &&
-            value.in.length > 0
-          ) {
-            setParameterName(value.in);
-          }
-        } else if (value.scheme === "bearer") {
-          setAuthenticationOption("Bearer auth");
-          setAuthenticationRequired(true);
-        } else if (key === "Oauth2" || key === "Oauth2c") {
-          //alert.info("Can't handle Oauth2 auth yet.")
-          setAuthenticationOption("Oauth2");
-          setAuthenticationRequired(true);
+      	    if (
+      	      value.in !== undefined &&
+      	      value.in !== null &&
+      	      value.in.length > 0
+      	    ) {
+      	      setParameterName(value.in);
+      	    }
+      	  } else if (value.scheme === "bearer") {
+      	    setAuthenticationOption("Bearer auth");
+      	    setAuthenticationRequired(true);
+      	  } else if (key === "Oauth2" || key === "Oauth2c") {
+      	    //alert.info("Can't handle Oauth2 auth yet.")
+      	    setAuthenticationOption("Oauth2");
+      	    setAuthenticationRequired(true);
 
-          //console.log("FLOW-1: ", value)
-          const flowkey = value.flow === undefined ? "flows" : "flow";
-          //console.log("FLOW: ", value[flowkey])
-          const basekey =
-            value[flowkey].authorizationCode !== undefined
-              ? "authorizationCode"
-              : "implicit";
-          //console.log("FLOW2: ", value[flowkey][basekey])
-          if (
-            value[flowkey] !== undefined &&
-            value[flowkey][basekey] !== undefined
-          ) {
-            if (
-              value[flowkey][basekey].authorizationUrl !== undefined &&
-              parameterName.length === 0
-            ) {
-              setParameterName(value[flowkey][basekey].authorizationUrl);
-            }
+      	    //console.log("FLOW-1: ", value)
+      	    const flowkey = value.flow === undefined ? "flows" : "flow";
+      	    //console.log("FLOW: ", value[flowkey])
+      	    const basekey =
+      	      value[flowkey].authorizationCode !== undefined
+      	        ? "authorizationCode"
+      	        : "implicit";
+      	    //console.log("FLOW2: ", value[flowkey][basekey])
+      	    if (
+      	      value[flowkey] !== undefined &&
+      	      value[flowkey][basekey] !== undefined
+      	    ) {
+      	      if (
+      	        value[flowkey][basekey].authorizationUrl !== undefined &&
+      	        parameterName.length === 0
+      	      ) {
+      	        setParameterName(value[flowkey][basekey].authorizationUrl);
+      	      }
 
-            var tokenUrl = "";
-            if (value[flowkey][basekey].tokenUrl !== undefined) {
-              setParameterLocation(value[flowkey][basekey].tokenUrl);
-              tokenUrl = value[flowkey][basekey].tokenUrl;
-            } else {
-              setParameterLocation("");
-            }
+      	      var tokenUrl = "";
+      	      if (value[flowkey][basekey].tokenUrl !== undefined) {
+      	        setParameterLocation(value[flowkey][basekey].tokenUrl);
+      	        tokenUrl = value[flowkey][basekey].tokenUrl;
+      	      } else {
+      	        setParameterLocation("");
+      	      }
 
-            if (value[flowkey][basekey].refreshUrl !== undefined) {
-              setRefreshUrl(value[flowkey][basekey].refreshUrl);
-            } else if (tokenUrl.length > 0) {
-              setRefreshUrl(tokenUrl);
-            }
+      	      if (value[flowkey][basekey].refreshUrl !== undefined) {
+      	        setRefreshUrl(value[flowkey][basekey].refreshUrl);
+      	      } else if (tokenUrl.length > 0) {
+      	        setRefreshUrl(tokenUrl);
+      	      }
 
-            if (
-              value[flowkey][basekey].scopes !== undefined &&
-              value[flowkey][basekey].scopes !== null
-            ) {
-              if (value[flowkey][basekey].scopes.length > 0) {
-                setOauth2Scopes(value[flowkey][basekey].scopes);
-              } else {
-                var newscopes = [];
-                for (let [scopekey, scopevalue] of Object.entries(
-                  value[flowkey][basekey].scopes
-                )) {
-                  if (scopekey.startsWith("http")) {
-                    const scopekeysplit = scopekey.split("/");
-                    if (scopekeysplit.length < 5) {
-                      console.log("Skipping scope: ", scopekey);
-                      alert.info("Skipping scope: " + scopekey);
-                      continue;
-                    }
+      	      if (
+      	        value[flowkey][basekey].scopes !== undefined &&
+      	        value[flowkey][basekey].scopes !== null
+      	      ) {
+      	        if (value[flowkey][basekey].scopes.length > 0) {
+      	          setOauth2Scopes(value[flowkey][basekey].scopes);
+      	        } else {
+      	          var newscopes = [];
+      	          for (let [scopekey, scopevalue] of Object.entries(
+      	            value[flowkey][basekey].scopes
+      	          )) {
+      	            if (scopekey.startsWith("http")) {
+      	              const scopekeysplit = scopekey.split("/");
+      	              if (scopekeysplit.length < 5) {
+      	                console.log("Skipping scope: ", scopekey);
+      	                alert.info("Skipping scope: " + scopekey);
+      	                continue;
+      	              }
 
-                    //console.log("Checking scope for: ", scopekey, scopekeysplit.length)
-                  }
+      	              //console.log("Checking scope for: ", scopekey, scopekeysplit.length)
+      	            }
 
-                  newscopes.push(scopekey);
-                }
+      	            newscopes.push(scopekey);
+      	          }
 
-                setOauth2Scopes(newscopes);
-              }
-            }
-          } else {
-            console.log(
-              "Bad flowkey and basekey for oauth2: ",
-              flowkey,
-              basekey
-            );
-          }
-        } else if (key === "ApiKeyAuth") {
-          setAuthenticationOption("API key");
+      	          setOauth2Scopes(newscopes);
+      	        }
+      	      }
+      	    } else {
+      	      console.log(
+      	        "Bad flowkey and basekey for oauth2: ",
+      	        flowkey,
+      	        basekey
+      	      );
+      	    }
+      	  } else if (key === "ApiKeyAuth" || key === "Token") {
+      	    setAuthenticationOption("API key");
 
-          value.in = value.in.charAt(0).toUpperCase() + value.in.slice(1);
-          setParameterLocation(value.in);
-          if (!apikeySelection.includes(value.in)) {
-            console.log("APIKEY SELECT: ", apikeySelection);
-            alert.error("Might be error in setting up API key authentication");
-          }
+      	    value.in = value.in.charAt(0).toUpperCase() + value.in.slice(1);
+      	    setParameterLocation(value.in);
+      	    if (!apikeySelection.includes(value.in)) {
+      	      console.log("APIKEY SELECT: ", apikeySelection);
+      	      alert.error("Might be error in setting up API key authentication");
+      	    }
 
-          console.log("PARAM NAME: ", value.name);
-          setParameterName(value.name);
-          setAuthenticationRequired(true);
-        } else if (value.scheme === "basic") {
-          setAuthenticationOption("Basic auth");
-          setAuthenticationRequired(true);
-        } else if (value.scheme === "oauth2") {
-          setAuthenticationOption("Oauth2");
-          setAuthenticationRequired(true);
-        } else {
-          alert.error("Couldn't handle AUTH type: ", key);
-          //newauth.push({
-          //	"name": key,
-          //	"type": value.in,
-          //	"example": "",
-          //})
-        }
-      }
+      	    console.log("PARAM NAME: ", value.name);
+      	    setParameterName(value.name);
+      	    setAuthenticationRequired(true);
+      	  } else if (value.scheme === "basic") {
+      	    setAuthenticationOption("Basic auth");
+      	    setAuthenticationRequired(true);
+      	  } else if (value.scheme === "oauth2") {
+      	    setAuthenticationOption("Oauth2");
+      	    setAuthenticationRequired(true);
+      	  } else {
+      	    alert.error("Couldn't handle AUTH type: ", key);
+      	    //newauth.push({
+      	    //	"name": key,
+      	    //	"type": value.in,
+      	    //	"example": "",
+      	    //})
+      	  }
+      	}
+			} 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={{
diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx
index a99f39c4..1c125d21 100644
--- a/frontend/src/views/Docs.jsx
+++ b/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",
-  minWidth: "768px",
+  maxWidth: 1000,
+  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 = () => {