Fixed visuals and targeting during onboarding

frontend/src/views/AngularWorkflow.jsx

@@ -6903,8 +6903,8 @@ const AngularWorkflow = (defaultprops) => {
                 </div>
                 {outlookButton}
                 {gmailButton}
-								<Typography variant="body2" color="textSecondary">
-									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
+								<Typography variant="body2" color="textSecondary" style={{marginTop: 5}}>
+									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>
-				)
-			},
-			{
-				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>
-				)
+				), 
+				tutorial: "find_integrations",
 			},
 			{
 				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}>