Fixed minor bugs and added oauth2 auto-connect buttons for certain apps

.env

@@ -51,6 +51,7 @@ SHUFFLE_PASS_WORKER_PROXY=TRUE
 SHUFFLE_PASS_APP_PROXY=FALSE
 TZ=Europe/Amsterdam 					# Timezone-handler in Orborus, Worker and Apps
 ORBORUS_CONTAINER_NAME=				# Used to FIND the containername. cgroup v2: issue 501
+SHUFFLE_ORBORUS_STARTUP_DELAY= 		# Used for setting up a startup delay for Orborus
 
 SHUFFLE_BASE_IMAGE_NAME=frikky
 SHUFFLE_BASE_IMAGE_REGISTRY=ghcr.io

frontend/src/components/Oauth2Auth.jsx

@@ -53,6 +53,16 @@ const MenuProps = {
   getContentAnchorEl: null,
 };
 
+const registeredApps = [
+	"gmail",
+	"slack",
+	"webex",
+	"zoho_desk",
+	"outlook_graph",
+	"microsoft_teams",
+	"microsoft_teams_user_access",
+]
+
 const AuthenticationOauth2 = (props) => {
   const {
     saveWorkflow,
@@ -65,6 +75,7 @@ const AuthenticationOauth2 = (props) => {
     setSelectedAction,
     setNewAppAuth,
     setAuthenticationModalOpen,
+		isCloud,
   } = props;
   const theme = useTheme();
 
@@ -77,6 +88,7 @@ const AuthenticationOauth2 = (props) => {
       authenticationType.client_secret !== null &&
       authenticationType.client_secret.length > 0
   );
+
   const [clientId, setClientId] = React.useState(
     defaultConfigSet ? authenticationType.client_id : ""
   );
@@ -337,6 +349,87 @@ const AuthenticationOauth2 = (props) => {
           </a>
           <div />
         </span>
+
+				{isCloud && registeredApps.includes(selectedApp.name.toLowerCase()) ? 
+					<span>
+						<Button
+							style={{
+								marginBottom: 20,
+								marginTop: 20,
+								borderRadius: theme.palette.borderRadius,
+							}}
+          		disabled={
+            		clientSecret.length > 0 || clientId.length > 0
+							}
+							variant="contained"
+							fullWidth
+							onClick={() => {
+								// Hardcode some stuff?
+								// This could prolly be added to the app itself with a "default" client ID 
+								console.log("APP: ", selectedApp)
+								if (selectedApp.name.toLowerCase() == "outlook_graph") {
+									handleOauth2Request(
+										"bb4bff85-0d0b-4f5d-8a69-3cee8029b11a",
+										"",
+										"https://graph.microsoft.com",
+										["Mail.ReadWrite"],
+									);
+								} else if (selectedApp.name.toLowerCase() == "gmail") {
+									handleOauth2Request(
+										"253565968129-c0a35knic7q1pdk6i6qk9gdkvr07ci49.apps.googleusercontent.com",
+										"",
+										"https://gmail.googleapis.com",
+										["https://www.googleapis.com/auth/gmail.modify",
+											"https://www.googleapis.com/auth/gmail.send",
+											"https://www.googleapis.com/auth/gmail.insert",
+											"https://www.googleapis.com/auth/gmail.compose"]
+									)
+								} else if (selectedApp.name.toLowerCase() == "zoho_desk") {
+									handleOauth2Request(
+										"1000.ZR5MHUW6B0L6W1VUENFGIATFS0TOJT",
+										"",
+										"https://desk.zoho.com",
+										["Desk.tickets.READ",
+										"Desk.tickets.UPDATE",
+										"Desk.tickets.DELETE",
+										"Desk.tickets.CREATE"]
+									)
+								} else if (selectedApp.name.toLowerCase() == "slack") {
+									handleOauth2Request(
+										"151779186901.2448678750935",
+										"",
+										"https://slack.com",
+										["admin", "chat:write", "im:read", "im:write", "search:read", "usergroups:read", "usergroups:write"]
+									)
+								} else if (selectedApp.name.toLowerCase() == "webex") {
+									handleOauth2Request(
+										"Cab184f3d7271f540443c79b5b79845e3387abbbdb3db4233a87ea3a5432fb3d5",
+										"",
+										"https://webexapis.com",
+										["spark:all"]
+									)
+								} else if (selectedApp.name.toLowerCase().includes("microsoft_teams")) {
+									handleOauth2Request(
+										"31cb4c84-658e-43d5-ae84-22c9142e967a",
+										"",
+										"https://graph.microsoft.com",
+										["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read"]
+									)
+								}
+							}}
+							color="primary"
+						>
+							{buttonClicked ? (
+								<CircularProgress style={{ color: "white" }} />
+							) : (
+								"Auto-authenticate"
+							)}
+						</Button>
+						<Typography style={{textAlign: "center", marginTop: 0, marginBottom: 10, }}>
+							OR
+						</Typography>
+					</span>
+				: null}
         {/*<TextField
 						style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}} 
 						InputProps={{
@@ -580,10 +673,12 @@ const AuthenticationOauth2 = (props) => {
           {buttonClicked ? (
             <CircularProgress style={{ color: "white" }} />
           ) : (
-            "Oauth2 request"
+            "Manually Authenticate"
           )}
         </Button>
 
+
+
         {defaultConfigSet ? (
           <span style={{}}>
             ... or

frontend/src/components/ParsedAction.jsx

@@ -1301,6 +1301,10 @@ const ParsedAction = (props) => {
                 data.value = data.example;
               }
 
+							// In case of data.example
+							if (data.value === undefined || data.value === null) {
+								data.value = ""
+							}
 
 							if (data.value.length === 0) {
               	if (data.name.toLowerCase() === "headers") {

frontend/src/components/ShuffleCodeEditor.jsx

@@ -227,6 +227,34 @@ const CodeEditor = (props) => {
 		// console.log(dollar_occurences)
 	}
 
+	const fixVariable = (inputvariable) => {
+		if (inputvariable === undefined || inputvariable === null) {
+			return inputvariable
+		}
+
+		if (!inputvariable.includes(".")) {
+			return inputvariable
+		}
+
+		const itemsplit = inputvariable.split(".")
+		var newitem = []
+		var removedIndexes = 0
+		for (var key in itemsplit) {
+			var tmpitem = itemsplit[key]
+			if (tmpitem.startsWith("#")) {
+				removedIndexes += tmpitem.length-1
+				tmpitem = "#"
+			}
+
+			newitem.push(tmpitem)
+		}
+
+		//console.log("Fixed item: ", newitem, "removed length: ", removedIndexes)
+
+		return newitem.join(".")
+		//return inputvariable
+	}
+
 	const highlight_variables = (value) => {
 		// value.markText({line:0, ch:2}, {line:0, ch:8}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"})
 		// value.markText({line:0, ch:13}, {line:0, ch:15}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"})
@@ -253,6 +281,12 @@ const CodeEditor = (props) => {
 
 			var variable_occurence = current_code_line.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
 
+			if (variable_occurence === null || variable_occurence === undefined) {
+				console.log("No variables found. Returning")
+				continue
+				//return
+			}
+
 			// console.log(variable_occurence)
 			// console.log()
 
@@ -280,15 +314,16 @@ const CodeEditor = (props) => {
 				}
 			} catch (e) {}
 
-			//console.log(dollar_occurence_len)
+			//console.log("VARIABLES: ", availableVariables)
+
 
 			try{
 				// console.log(variable_occurence)
 				for (var occ = 0; occ < variable_occurence.length; occ++){
 					// value.markText({line:i, ch:dollar_occurence[occ]}, {line:i, ch:dollar_occurence_len[occ]+dollar_occurence[occ]}, {"css": "background-color: #8b8e26; border-radius: 4px; color: white"})
 					// var correctVariable = actionlist.find(action => action.autocomplete.toLowerCase() === variable_occurence[occ].slice(1,).toLowerCase())
-					var correctVariable = availableVariables.includes(variable_occurence[occ].toLowerCase())
+					const fixedVariable = fixVariable(variable_occurence[occ])
-					// console.log(actionlist)
+					var correctVariable = availableVariables.includes(fixedVariable)
 					if(!correctVariable) {
 						value.markText({line:i, ch:dollar_occurence[occ]}, {line:i, ch:dollar_occurence_len[occ]+dollar_occurence[occ]}, {"css": "background-color: rgb(248, 106, 62, 0.9); padding-top: 2px; padding-bottom: 2px; color: white"})
 					}
@@ -297,7 +332,9 @@ const CodeEditor = (props) => {
 					}
 					// console.log(correctVariables)
 				}
-			} catch (e) {}
+			} catch (e) {
+				console.log("Error in color highlighting: ", e)
+			}
 		}
 	}
 
@@ -342,6 +379,10 @@ const CodeEditor = (props) => {
 	const expectedOutput = (input) => {
 		
 		const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
+		if (found === null || found === undefined) {
+			console.log("No output found!")
+			return
+		}
 
 		//console.log(found)
 
@@ -350,22 +391,24 @@ const CodeEditor = (props) => {
 		try { 
 			for (var i = 0; i < found.length; i++) {
 				try {
-					found[i] = found[i].toLowerCase()
+					//found[i] = found[i].toLowerCase()
+					const fixedVariable = fixVariable(found[i])
+					//var correctVariable = availableVariables.includes(fixedVariable)
 
 					var valuefound = false
 					for (var j = 0; j < actionlist.length; j++) {
-						if(found[i].slice(1,).toLowerCase() === actionlist[j].autocomplete.toLowerCase()){
+						if(fixedVariable.slice(1,).toLowerCase() === actionlist[j].autocomplete.toLowerCase()){
 							valuefound = true 
 							try {
-								input = input.replace(found[i], JSON.stringify(actionlist[j].example));
+								input = input.replace(fixedVariable, JSON.stringify(actionlist[j].example));
 							} catch (e) { 
-								input = input.replace(found[i], actionlist[j].example)
+								input = input.replace(fixedVariable, actionlist[j].example)
 							}
 						} else {
 						}
 					}
 
-					if (!valuefound && availableVariables.includes(found[i])) {
+					if (!valuefound && availableVariables.includes(fixedVariable)) {
 						var shouldbreak = false
 						for (var k=0; k < actionlist.length; k++){
 							var parsedPaths = []
@@ -375,7 +418,7 @@ const CodeEditor = (props) => {
 
 							for (var key in parsedPaths) {
 								const fullpath = "$"+actionlist[k].autocomplete.toLowerCase()+parsedPaths[key].autocomplete
-								if (fullpath === found[i]) {
+								if (fullpath === fixedVariable) {
 									//if (actionlist[k].example === undefined) {
 									//	actionlist[k].example = "TMP"
 									//}
@@ -396,7 +439,7 @@ const CodeEditor = (props) => {
 										}
 									}
 
-									input = input.replace(found[i], new_input)
+									input = input.replace(fixedVariable, new_input)
 
 									//} catch (e) {
 									//	input = input.replace(found[i], actionlist[k].example)
@@ -417,6 +460,7 @@ const CodeEditor = (props) => {
 				}
 			}
 		} catch (e) {
+			console.log("Outer replace error: ", e)
 
 		}
 
@@ -1106,7 +1150,7 @@ const CodeEditor = (props) => {
 								color: "white"
 							}}
 						>
-							Output
+							Expected Output
 						</span>
 					</DialogTitle>
 				}

frontend/src/views/AngularWorkflow.jsx

@@ -14268,6 +14268,7 @@ const AngularWorkflow = (defaultprops) => {
               setSelectedAction={setSelectedAction}
               setNewAppAuth={setNewAppAuth}
               setAuthenticationModalOpen={setAuthenticationModalOpen}
+							isCloud={isCloud}
             />
           ) : (
             <AuthenticationData app={selectedApp} />

frontend/src/views/Workflows.jsx

@@ -410,6 +410,11 @@ export const validateJson = (showResult) => {
   try {
     if (!showResult.includes("{") && !showResult.includes("[")) {
       jsonvalid = false
+
+			return {
+				valid: jsonvalid,
+				result: showResult,
+			};
     }
   } catch (e) {
     showResult = showResult.split("'").join('"');
@@ -1127,12 +1132,12 @@ const Workflows = (props) => {
   const exportAllWorkflows = (allWorkflows) => {
 		for (var i = 0; i < allWorkflows.length; i++) {
 			setTimeout(() => {
-				console.log(workflows[i].name)
+				console.log(allWorkflows[i].name)
-      	exportWorkflow(workflows[i], false)
+      	exportWorkflow(allWorkflows[i], false)
 			}, i * 200);
     }
 
-    alert.info(`exporting and keeping original for all ${workflows.length} workflows`);
+    alert.info(`exporting and keeping original for all ${allWorkflows.length} workflows`);
   };
 
   const deduplicateIds = (data) => {

functions/onprem/orborus/build.sh

@@ -1,5 +1,5 @@
 NAME=shuffle-orborus
-VERSION=1.0.5
+VERSION=1.0.6
 
 echo "Running docker build with $NAME:$VERSION"
 #docker rmi frikky/shuffle:$NAME --force