Fixed visuals and targeting during onboarding

frontend/src/components/ParsedAction.jsx

@@ -167,7 +167,7 @@ const ParsedAction = (props) => {
   const classes = useStyles();
 
   const [expansionModalOpen, setExpansionModalOpen] = React.useState(false);
-  const [hideBody, setHideBody] = React.useState(false);
+  const [hideBody, setHideBody] = React.useState(true);
   const [activateHidingBody, setActivateHidingBody] = React.useState(false);
 	const [codedata, setcodedata] = React.useState("");
 	const [fieldCount, setFieldCount] = React.useState(0);
@@ -980,11 +980,13 @@ const ParsedAction = (props) => {
 
 		//console.log("AUTH: ", authenticationType)
     if (authenticationType !== undefined && authenticationType !== null && authenticationType.type === "oauth2") {
+			/*
 			return (
 				<Typography variant="body1" color="textSecondary" style={{marginTop: 15}}> 
 					You must authenticate before using oauth2 apps.
 				</Typography>
 			)
+			*/
 		}
 
     // FIXME: Issue #40 - selectedActionParameters not reset
@@ -1074,7 +1076,7 @@ const ParsedAction = (props) => {
               multiline = true;
             }
 
-            var placeholder = "Static value";
+            var placeholder = "Value";
             if (
               data.example !== undefined &&
               data.example !== null &&
@@ -1163,6 +1165,9 @@ const ParsedAction = (props) => {
 
                           for (var key in selectedActionParameters) {
                             var currentItem = selectedActionParameters[key];
+														if (currentItem.name === "ssl_verify") {
+
+														}
 
                             if (currentItem.description === openApiFieldDesc) {
                               currentItem.field_active = !hideBody;
@@ -1191,7 +1196,7 @@ const ParsedAction = (props) => {
                   setActivateHidingBody(true);
                 }
               } else {
-                console.log("SHOW BUTTON");
+                //console.log("SHOW BUTTON");
 
                 rows = "1";
                 disabled = true;

frontend/src/components/ShuffleCodeEditor.jsx

@@ -23,18 +23,18 @@ const CodeEditor = (props) => {
 	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
   // const {codelang, setcodelang} = props
   const theme = useTheme();
-
 	const [validation, setvalidation] = React.useState(" ");
+	const [expOutput, setexpOutput] = React.useState(" ");
+
 	function IsJsonString(str) {
 		try {
 			var o = JSON.parse(str);
-	        if (o && typeof o === "object") {
+	    if (o && typeof o === "object") {
-				setvalidation("Validation Status: Correct!")
+				setvalidation("Correct!")
 			}
-		} catch (e) {setvalidation("Validation Status: Incorrect!");}
+		} catch (e) {setvalidation("Incorrect!");}
 	}
 	
-	const [expOutput, setexpOutput] = React.useState(" ");
 	function expectedOutput(input) {
 		
 		const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
@@ -96,6 +96,7 @@ const CodeEditor = (props) => {
 				<DialogTitle
 					style={{
 						paddingBottom:20,
+						paddingLeft: 10, 
 					}}
 				>
 						Code Editor
@@ -129,6 +130,7 @@ const CodeEditor = (props) => {
 				<DialogTitle
 					style={{
 						paddingTop: 30,
+						paddingLeft: 10, 
 					}}
 				>
 					<span
@@ -150,6 +152,7 @@ const CodeEditor = (props) => {
 						marginTop: -2,
 						border: `2px solid ${theme.palette.inputColor}`,
 						borderRadius: theme.palette.borderRadius,
+						maxHeight: 400,
 					}}
 				>
 					{expOutput}
@@ -159,10 +162,11 @@ const CodeEditor = (props) => {
 						color: "white",
 						fontFamily: "monospace",
 						padding: 20,
+						paddingLeft: 10, 
 						marginTop: -15,
 					}}
 				>
-					{validation}
+					JSON Validation: {validation}
 				</p>
 			</div>
 

frontend/src/frameworkStyle.jsx

@@ -9,7 +9,7 @@ const data = [{
 				'text-algin': 'center',
 				'width': '85px',
 				'height': '85px',
-				'border-width': '1px',
+				'border-width': '3px',
 				'border-color': '#8a8a8a',
 				'color': '#f85a3e',
 				'text-margin-x': '0px',
@@ -42,6 +42,16 @@ const data = [{
 				'font-size': '13px',
 			},
 		},
+		{
+			selector: `node[!is_valid]`,
+			css: {
+				'height': '20px',
+				'width': '20px',
+				'background-color': '#6d9eeb',
+				'border-color': '#4c6ea4',
+				'border-width': '1px',
+			},
+		},
 		{
 			selector: `edge[?human]`,
 			css: {

frontend/src/theme.js

@@ -66,6 +66,34 @@ const theme = createMuiTheme({
         backgroundColor: "#383B40",
       },
     },
+    MuiCssBaseline: {
+      '@global': {
+				/*
+          scrollbarColor: "#6b6b6b #2b2b2b",
+          "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
+            backgroundColor: "#2b2b2b",
+          },
+          "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
+            borderRadius: 8,
+            backgroundColor: "#6b6b6b",
+            minHeight: 24,
+            border: "3px solid #2b2b2b",
+          },
+          "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
+            backgroundColor: "#959595",
+          },
+          "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
+            backgroundColor: "#959595",
+          },
+          "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
+            backgroundColor: "#959595",
+          },
+          "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
+            backgroundColor: "#2b2b2b",
+          },
+				*/	
+      }
+		},
   },
 });
 

frontend/src/views/AngularWorkflow.jsx

@@ -6903,8 +6903,8 @@ const AngularWorkflow = (defaultprops) => {
                 </div>
                 {outlookButton}
                 {gmailButton}
-								<Typography variant="body2" color="textSecondary">
+								<Typography variant="body2" color="textSecondary" style={{marginTop: 5}}>
-									If you have trouble using the triggers, please <a href="https://shuffler.io/contact" rel="noopener noreferrer" target="_blank">contact us</a> to get access
+									If you have trouble using this trigger, please <a href="https://shuffler.io/contact" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>contact us</a> to get access
 								</Typography>
               </span>
             )}

frontend/src/views/AppCreator.jsx

@@ -1792,7 +1792,7 @@ const AppCreator = (defaultprops) => {
             in: "path",
             name: queryitem,
             description: "Generated by shuffler.io OpenAPI",
-            required: true,
+            required: false,
             schema: {
               type: "string",
             },

frontend/src/views/FrameworkWrapper.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+
+import DetectionFramework from "../components/DetectionFramework.jsx";
+import { useAlert } from "react-alert";
+import { Link, useParams } from "react-router-dom";
+import theme from '../theme';
+
+import {
+	Button,
+} from "@material-ui/core";
+
+const Framework = (props) => {
+  const {globalUrl, isLoaded, isLoggedIn, showOptions, selectedOption, rolling, } = props;
+
+  const alert = useAlert()
+  const [frameworkLoaded, setFrameworkLoaded] = useState(false)
+  const [frameworkData, setFrameworkData] = useState()
+
+  const getFramework = () => {
+    fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for framework!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+				if (responseJson.success === false) {
+					if (responseJson.reason !== undefined) {
+						alert.error("Failed loading: " + responseJson.reason)
+					} else {
+						alert.error("Failed to load framework for your org.")
+
+					}
+				}
+
+				setFrameworkLoaded(true)
+				setFrameworkData(responseJson)
+			})
+      .catch((error) => {
+        alert.error(error.toString());
+				setFrameworkLoaded(true)
+      })
+		}
+
+  useEffect(() => {
+		getFramework()
+  }, [])
+
+	return (
+		<div>
+			<div style={{marginBottom: 25, marginTop: 25, width: 300, margin: "auto", textAlign: "center",}}>
+				<Link style={{textDecoration: "none", }} to="/getting-started">
+					<Button variant="outlined" color="secondary">
+						Back to getting started
+					</Button>
+				</Link>
+			</div>
+			{frameworkLoaded === true ? 
+				<DetectionFramework 
+					frameworkData={frameworkData}
+					selectedOption={"Draw"}
+					showOptions={false}
+
+					isLoaded={isLoaded}
+					isLoggedIn={isLoggedIn}
+					globalUrl={globalUrl}
+				/>
+			: null}
+		</div>
+	)
+}
+
+export default Framework;

frontend/src/views/GettingStarted.jsx

@@ -30,6 +30,7 @@ import {
 } from "@material-ui/core";
 
 import {
+	Check as CheckIcon,
   GridOn as GridOnIcon,
   List as ListIcon,
   Close as CloseIcon,
@@ -2502,34 +2503,55 @@ const GettingStarted = (props) => {
 
 		const textSpacingDiff = 8
 		const textType = "body2"
+						
+		// Discover <a target="_blank" href="https://shuffler.io/creators" style={{textDecoration: "none", color: "#f86a3e",}}>use-cases made by other creators</a>!
 		const steps = [
 			{
 				html: (
 					<Typography variant={textType} style={{marginTop: textSpacingDiff}}>
 						<Link to="/detectionframework" style={{textDecoration: "none", color: "#f86a3e",}}>Find your integrations</Link> by following our simple detection framework!
 					</Typography>
-				)
+				), 
-			},
+				tutorial: "find_integrations",
-			{
-				html: (
-					<Typography variant={textType} style={{marginTop: textSpacingDiff}}>
-						<span style={{cursor: "pointer", color: "#f86a3e",}} onClick={() => {setModalOpen(true)}}>
-							Create your first workflow 
-						</span> and learn the ropes.
-					</Typography>
-				)
 			},
 			{
 				html: 
 					<Typography variant={textType} style={{marginTop: textSpacingDiff}}>
-						<Link target="_blank" to={{pathname: "https://shuffler.io/creators"}} style={{textDecoration: "none", color: "#f86a3e",}}>Discover use-cases</Link> other creators have made!
+								Discover <span style={{cursor: "pointer", textDecoration: "none", color: "#f86a3e",}} onClick={() => {
+								alert.success("TBD: Coming in version 1.0.0");
+
+								const ele = document.getElementById("shuffle_search_field")
+								if (ele !== undefined && ele !== null) {
+									console.log("Found ele: ", ele)
+									ele.focus()
+									ele.style.borderColor = "#f86a3e"
+									ele.style.borderWidth = "2px"
+
+								} else {
+									alert.success("TBD: Coming in version 1.0.0");
+								}
+							}}>
+							use-cases made by other creators</span>!
+					</Typography>,
+				tutorial: "discover_workflows",
+			},
+			{
+				html: (
+					<Typography variant={textType} style={{marginTop: textSpacingDiff}}>
+						Learn to use Shuffle by&nbsp; 
+						<span style={{cursor: "pointer", color: "#f86a3e",}} onClick={() => {setModalOpen(true)}}>
+							creating your first workflow 
+						</span> and <Link to="/docs" style={{textDecoration: "none", color: "#f86a3e",}}>reading the docs.</Link>
 					</Typography>
+				),
+				tutorial: "learn_shuffle",
 			},
 			{
 				html: 
 					<Typography variant={textType} style={{marginTop: textSpacingDiff}}>
 						Configure your organization <Link to="/admin" style={{textDecoration: "none", color: "#f86a3e",}}>in the admin panel</Link>
-					</Typography>
+					</Typography>,
+				tutorial: "configure_organization",
 			}
 		]
 	
@@ -2544,11 +2566,25 @@ const GettingStarted = (props) => {
 					</Typography>
 					<Paper style={{backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.3)", padding: 40, marginTop: 25, }}>
 						{steps.map((data, index) => {
+							var tutorialFound = false
+							if (userdata.tutorials !== undefined && userdata.tutorials !== null && userdata.tutorials.length > 0 && data.tutorial !== undefined) {
+								const foundTutorial = userdata.tutorials.find(tutorial => tutorial === data.tutorial)
+								if (foundTutorial !== undefined && foundTutorial !== null) {
+									console.log("Found tutorial for ", data.tutorial)
+									tutorialFound = true 
+								}
+							}
+
+								
 							return (
 								<div key={index} style={{display: "flex", marginBottom: index === steps.length-1 ? 0 : 20, }}>
 									<div style={{maxWidth: 50, marginRight: 25, }}>
 										<Typography variant="h6">
-											<b>{index+1}</b>
+											{tutorialFound ? 
+												<CheckIcon style={{color: "green", paddingTop: 5,}} />
+												:
+												<b>{index+1}</b>
+											}
 										</Typography>
 									</div>
 									<div style={{}}>
@@ -2593,7 +2629,7 @@ const GettingStarted = (props) => {
 								>
 									Join Discord community
 								</Button>
-							</Link>
+							</a>
 						</div>
 					</div>
           {/*

frontend/src/views/Workflows.jsx

@@ -2540,14 +2540,11 @@ const Workflows = (props) => {
 
   const WorkflowView = () => {
     if (workflows.length === 0) {
-			/*
 			console.log("USER: ", userdata)
 			console.log("PROPS: ", props)
 			if (userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) {
-				//return <Redirect to='/getting-started' />;
 				return <Navigate to="/getting-started" replace />;
 			}
-			*/
 		
       return (
         <div style={emptyWorkflowStyle}>

functions/onprem/worker/worker.go

@@ -859,7 +859,7 @@ func handleExecutionResult(workflowExecution shuffle.WorkflowExecution) {
 			executedIds = append(executedIds, newExecId)
 			toRemove = append(toRemove, index)
 		} else {
-			log.Printf("\n\n[DEBUG] %s is already executed. Continuing.", newExecId)
+			//log.Printf("\n\n[DEBUG] %s is already executed. Continuing.", newExecId)
 			continue
 		}