Loads of minor fixes

frontend/src/components/AppGrid.jsx

@@ -79,6 +79,7 @@ const AppGrid = (props) => {
   const [formMail, setFormMail] = React.useState("");
   const [message, setMessage] = React.useState("");
   const [formMessage, setFormMessage] = React.useState("");
+  const [deactivatedIndexes, setDeactivatedIndexes] = React.useState([]);
 
   const buttonStyle = {
     borderRadius: 30,
@@ -352,7 +353,7 @@ const AppGrid = (props) => {
           if (responseJson.success === false) {
             toast.error(responseJson.reason);
           } else {
-            toast.success(`App ${type}d Successfully!`);
+            //toast.success(`App ${type}d Successfully!`);
             if (type === 'activate') {
               setAllActivatedAppIds(prev => [...prev, data.objectID]);
               setIsAnyAppActivated(true);
@@ -395,7 +396,7 @@ const AppGrid = (props) => {
         {!isLoading ? (
           <div>
             {hits.length === 0 && searchQuery.length >= 0 && showNoAppFound ? (
-              <Typography variant="body1" style={{ marginTop: '30%' }}>No App Found</Typography>
+              <Typography variant="body1" style={{ marginTop: '30%' }}>No Apps Found</Typography>
             ) : (
               <Grid item spacing={2} justifyContent="flex-start">
                 <div
@@ -1551,9 +1552,13 @@ const AppGrid = (props) => {
             <Typography variant="h5" style={{ marginBottom: 30, marginTop: 30, fontWeight: "400", fontSize: 24 }}>
               Filter By
             </Typography>
+
             <FilterUsersAndOrgsAppByCategory selectedCategoryForUsersAndOgsApps={selectedCategoryForUsersAndOgsApps} setselectedCategoryForUsersAndOgsApps={setselectedCategoryForUsersAndOgsApps} />
+
             <FilterUsersAndOrgsAppByActionLabel selectedTagsForUserAndOrgApps={selectedTagsForUserAndOrgApps} setSelectedTagsForUserAndOrgApps={setSelectedTagsForUserAndOrgApps} />
+
             <FilterUsersAndOrgsAppByCreatedWith selectedOptionOfCreatedWith={selectedOptionOfCreatedWith} setSelectedOptionOfCreatedWith={setSelectedOptionOfCreatedWith} />
+
             <FilterUsersAndOrgsAppCreatedBy />
           </div>
         )}
@@ -1722,6 +1727,10 @@ const AppGrid = (props) => {
                                 ? `/apps/${data.id}`
                                 : `https://shuffler.io/apps/${data.id}`;
 
+							if (data.name === "" && data.id === "") {
+								return null
+							}
+
                             return (
                               <Zoom
                                 key={index}
@@ -1818,17 +1827,71 @@ const AppGrid = (props) => {
                                               width: 230,
                                               textAlign: 'start',
                                               marginLeft: 8,
-                                              color: "rgba(158, 158, 158, 1)"
+                                              color: "rgba(158, 158, 158, 1)",
+											  display: "flex", 
                                             }}
                                           >
+											<div style={{minWidth: 120, overflow: "hidden", }}>
+												{data.generated !== true ?
+													<div>
 													{data.tags &&
-                                              data.tags.map((tag, tagIndex) => (
+													  data.tags.slice(0,2).map((tag, tagIndex) => (
 														<span key={tagIndex}>
 														  {normalizedString(tag)}
 														  {tagIndex < data.tags.length - 1 ? ", " : ""}
 														</span>
-                                              ))}
+													  ))
+													}
 													</div>
+												: null}
+											</div>
+                                            {currTab === 1 &&  !deactivatedIndexes.includes(index) && mouseHoverIndex === index && data.generated === true ? 
+												<Button style={{
+													marginLeft: 15, 
+												  width: 102,
+												  height: 35,
+												  borderRadius: 200,
+												  backgroundColor: "rgba(73, 73, 73, 1)",
+												  color: "rgba(241, 241, 241, 1)",
+												  textTransform: "none",
+												}}
+												  onClick={(event) => {
+													//deactivatedIndexes.push(index)
+													//setDeactivatedIndexes(deactivatedIndexes)
+
+													event.preventDefault();
+													event.stopPropagation();
+													//handleActivateButton(event, data, "deactivate");
+													// FIXME: Put this in a function lol
+      												const url = `${globalUrl}/api/v1/apps/${data.id}/deactivate`;
+
+      												fetch(url, {
+      												  method: 'GET',
+      												  headers: {
+      												    'Content-Type': 'application/json',
+      												    'Accept': 'application/json',
+      												  },
+      												  credentials: "include",
+      												})
+      												  .then((response) => response.json())
+      												  .then((responseJson) => {
+      												    if (responseJson.success === false) {
+      												      toast.error(responseJson.reason);
+      												    } else {
+															toast.success("App Deactivated Successfully. Reload UI to see updated changes.")
+      												        //const updatedIds = allActivatedAppIds.filter(id => id !== data.objectID);
+      												        //setAllActivatedAppIds(updatedIds);
+      												    }
+      												  })
+      												  .catch(error => {
+      												    console.log("app error: ", error.toString());
+      												  })
+												  }}>
+												  Deactivate
+												</Button>
+											: null}
+										  </div>
+
                                           {/* )} */}
                                         </div>
                                       </ButtonBase>
@@ -1946,6 +2009,7 @@ const AppGrid = (props) => {
                 selectedOptionOfCreatedWith={selectedOptionOfCreatedWith}
               />
             )}
+
             <AppTab
               selectedCategoryForUsersAndOgsApps={selectedCategoryForUsersAndOgsApps}
               selectedTagsForUserAndOrgApps={selectedTagsForUserAndOrgApps}
@@ -1954,6 +2018,7 @@ const AppGrid = (props) => {
               setSelectedTagsForUserAndOrgApps={setSelectedTagsForUserAndOrgApps}
               setSelectedOptionOfCreatedWith={setSelectedOptionOfCreatedWith}
             />
+
           </div>
           <Configure clickAnalytics />
         </InstantSearch>

frontend/src/components/Billing.jsx

@@ -1623,12 +1623,12 @@ const Billing = (props) => {
 			{userdata.support === true ?
 				<div style={{ marginBottom: 10, marginTop: clickedFromOrgTab ? 16 : null, color: clickedFromOrgTab ? "#F1F1F1" : null }}>
 					For sales: Create&nbsp;
-					<a href={"https://docs.google.com/document/d/1OeJSi42812EMg7fUAw1HAj1ymOG8rfp8Ma_DGJKvwgI/copy?usp=sharing&organization=" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
+					<a href={"https://docs.google.com/document/d/1N-ZJNn8lWaqiXITrqYcnTt53oXGLNYFEzc5PU-tdAps/copy" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
-						New Cloud Contract
+						EU contract
 					</a>
 					&nbsp;or&nbsp;
-					<a href={"https://docs.google.com/document/d/1IguxpeV4Wwwr9C0MPyUNhhajEu_PxjRfP7f0hYyRYOI/copy?usp=sharing&organization=" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
+					<a href={"https://docs.google.com/document/d/1cF-Cwxt1TcahlLrpl1GH2hFZO4gxppLeYjHW6QB0EzQ/copy" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
-						New Onprem Contract
+						NOT EU contract
 					</a>
 					&nbsp; - &nbsp;
 					<a href={"https://drive.google.com/drive/folders/1zVvwwkbQXW3p-DJYa0GBDzFo_ZnV_I_5"} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
@@ -1636,7 +1636,7 @@ const Billing = (props) => {
 					</a>
 					&nbsp; - &nbsp;
 					<a href={"https://github.com/Shuffle/Shuffle-docs/tree/master/handbook/Sales"} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
-						Sales Process
+						Sales Process (old)
 					</a>
 				</div>
 				:

frontend/src/components/EditWorkflow.jsx

@@ -6,6 +6,7 @@ import UsecaseSearch from "../components/UsecaseSearch.jsx"
 import WorkflowGrid from "../components/WorkflowGrid.jsx"
 import dayjs from 'dayjs';
 import WorkflowTemplatePopup from "./WorkflowTemplatePopup.jsx";
+import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx"
 
 import {
   Badge,
@@ -206,6 +207,16 @@ const EditWorkflow = (props) => {
 				<Typography variant="body2" color="textSecondary" style={{marginTop: 20, maxWidth: 440,}}>
 					Workflows can be built from scratch, or from templates. <a href="/usecases" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
 				</Typography>
+
+				<div style={{marginTop: 10, marginBottom: 10, marginRight: 50, }}>
+					<WorkflowValidationTimeline 
+					  originalWorkflow={workflow}
+					
+					  apps={apps}
+					  workflow={workflow}
+					/>
+				</div>
+
 				{showUpload === true ? 
 					<div style={{ float: "right" }}>
 						<Tooltip color="primary" title={"Import manually"} placement="top">
@@ -957,7 +968,7 @@ const EditWorkflow = (props) => {
 					}}
 				>
 					{showMoreClicked ? <ExpandLessIcon /> : <ExpandMoreIcon/>}
-					{showMoreClicked ? "Collapse": "Expand"}
+					{showMoreClicked ? "Less Options": "More Options"}
 				</Button>
 			</Tooltip>
 		</div>

frontend/src/components/LicencePopup.jsx

@@ -518,10 +518,10 @@ const LicencePopup = (props) => {
 		console.log("New variant: ", shuffleVariant)
 
 		if (shuffleVariant === 1) {
-            setCalculatedCost("$600")
+			setCalculatedCost("$960")
 			setSelectedValue(8)
 		} else {
-            setCalculatedCost("$540")
+			setCalculatedCost("$960")
 			setSelectedValue(300)
 		}
 	}, [shuffleVariant])
@@ -680,7 +680,7 @@ const LicencePopup = (props) => {
         color: "white",
     }
 
-
+    console.log("Priceitem: ", shuffleVariant)
     const isLoggedInHandler = () => {
         if (calculatedCost === payasyougo) {
             handlePayasyougo(props.userdata)
@@ -690,7 +690,7 @@ const LicencePopup = (props) => {
         const priceItem = window.location.origin === "https://shuffler.io" ?
             shuffleVariant === 0 ? "app_executions" : "cores"
             :
-            shuffleVariant === 0 ? "price_1MROFrDzMUgUjxHShcSxgHO1" : "price_1NXjQqDzMUgUjxHSg690R4FP"
+            shuffleVariant === 0 ? "price_1PWI5zDzMUgUjxHSKkz0fGdN" : "price_1NXjQqDzMUgUjxHSg690R4FP"
 
         const successUrl = `${window.location.origin}/admin?admin_tab=billing&payment=success`
         const failUrl = `${window.location.origin}/pricing?admin_tab=billing&payment=failure`

frontend/src/components/NewHeader.jsx

@@ -517,12 +517,11 @@ const Header = (props) => {
 				window.location.href = responseJson["url"]
 				return
 			}, 2000)
-          }
+          } else {
-
           setTimeout(() => {
             window.location.reload()
           }, 2000);
-
+          }
           toast("Successfully changed active organization - refreshing!");
         } else {
           if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.length > 0) {
@@ -1547,7 +1546,7 @@ const Header = (props) => {
         <div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
           <Typography variant="body1" style={{ paddingTop: 7, margin: "auto", textAlign: "center", color: "white", }}>
             {/* Shuffle 1.4.0 is out! Read more about&nbsp; */}
-            Shuffle now offers&nbsp;
+            Early Success! More&nbsp;
             {/* <u>
               <a href="https://github.com/Shuffle/Shuffle/releases/tag/v1.4.0" target="_blank" style={{ color: "inherit", }} onClick={() => {
                 ReactGA.event({
@@ -1596,10 +1595,11 @@ const Header = (props) => {
 
                 navigate("/training")
 
-              }} style={{ cursor: "pointer", textDecoration: "none", color: "rgba(255,255,255,0.8)" }}>
+              }} style={{ cursor: "pointer", textDecoration: "none", fontWeight:600, color: "rgba(255,255,255,0.8)" }}>
-                Public Training!
+               Public Trainings
               </span>
             </u>
+            &nbsp;Ahead!
           </Typography>
           <IconButton color="secondary" style={{ position: "absolute", top: -3, right: 20, }} onClick={(event) => { 
 			  setShowTopbar(false) 

frontend/src/components/OrgHeaderexpanded.jsx

@@ -308,6 +308,7 @@ const OrgHeaderexpanded = (props) => {
 								client_secret: openidClientSecret,
 								openid_authorization: openidAuthorization,
 								openid_token: openidToken,
+								SSORequired: SSORequired,
 							}
 						)
 					}

frontend/src/components/ParsedAction.jsx

@@ -307,7 +307,6 @@ const ParsedAction = (props) => {
             (action) =>
               action.name.toLowerCase() === selectedAction.name.toLowerCase()
           );
-          console.log("FOUNDACTION: ", foundAction);
           if (foundAction !== null && foundAction !== undefined) {
             var foundparams = [];
             for (let [paramkey,paramkeyval] in Object.entries(foundAction.parameters)) {
@@ -549,6 +548,11 @@ const ParsedAction = (props) => {
                                 }
                             }
                         }
+
+						if (parentNode.label === undefined) {
+							parentNode.label = ""
+						}
+
                         newActionList.push({
                             type: "action",
                             id: parentNode.id,

frontend/src/views/Admin.jsx

@@ -5385,13 +5385,17 @@ If you're interested, please let me know a time that works for you, or set up a
 	  <ListItem key={index} style={{ backgroundColor: bgColor }}>
 		<ListItemText
 			primary=
-				<Tooltip title={data.validation.valid === true ? "Valid. Click to explore." : "Configuration failed. Click to learn why"} placement="top">
+				<Tooltip title={data.validation !== null && data.validation !== undefined && data.validation.valid === true ? "Valid. Click to explore." : "Configuration failed. Click to learn why"} placement="top">
 					<IconButton>
 						{validIcon}
 					</IconButton>
 				</Tooltip>
 		  	style={{ minWidth: 65, maxWidth: 65, }}
 			onClick={() => {
+				if (data.validation === null || data.validation === undefined) {
+					return
+				}
+
 				if (data.validation.workflow_id === undefined || data.validation.workflow_id === null || data.validation.workflow_id.length === 0) {
 					toast.warn("No workflow runs found for this auth yet. Check back later.")
 					return

frontend/src/views/AngularWorkflow.jsx

@@ -139,6 +139,7 @@ import Draggable from "react-draggable";
 import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
 import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
 
+import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx"
 import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
 import { GetParsedPaths, internalIds, } from "../views/Apps.jsx";
 import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
@@ -319,6 +320,7 @@ export function SetJsonDotnotation(jsonInput, inputKey) {
 
 export const green = "#86c142";
 export const yellow = "#FECC00";
+export const red = "red";
 
 export function removeParam(key, sourceURL) {
   if (sourceURL === undefined) {
@@ -1641,7 +1643,6 @@ const releaseToConnectLabel = "Release to Connect"
             setExecutionData(responseJson)
           } else {
       		if (responseJson.status === "ABORTED" || responseJson.status === "STOPPED" || responseJson.status === "FAILURE" || responseJson.status === "WAITING" || responseJson.status === "FINISHED") {
-				console.log("DONE!")
 				stop()
 			}
 
@@ -6732,7 +6733,6 @@ const releaseToConnectLabel = "Release to Connect"
 	  const parentlabel = parentNode.data("label").toLowerCase().replace(" ", "_")
 	  const parentname = parentNode.data("app_name").toLowerCase().replace(" ", "_")
 	  if (!parentlabel.startsWith(parentname)+"_") {
-		  console.log("Return 1")
 		  return
 	  }
 
@@ -7135,7 +7135,6 @@ const releaseToConnectLabel = "Release to Connect"
 				// Find how many executions it has 
 				var executions = 0
 				const matchingExecutions = workflowExecutions.filter((execution => execution.execution_source === nodedata.app_name.toLowerCase()))
-				console.log("Matches: ", matchingExecutions.length)
 				const color = matchingExecutions.length > 0 ? "#34a853" : "#ea4436"
 				const decoratorNode = {
 					position: {
@@ -10204,6 +10203,7 @@ const releaseToConnectLabel = "Release to Connect"
 
   // Starts on current node and climbs UP the tree to the root object.
   // Sends back everything in it's path
+  // FIXME: Use the GetParentNodes in WorkflowValidationTimeline.jsx instead
   const getParents = (action) => {
     if (action === undefined || action === null) {
       return []
@@ -18717,6 +18717,7 @@ const releaseToConnectLabel = "Release to Connect"
              : null}
 
           </div>
+
           {executionData.workflow !== undefined && executionData.workflow !== null && executionData.workflow.actions !== undefined && executionData.workflow.actions !== null && executionData.workflow.actions.length > 0  ?
             <div style={{ display: "flex", marginLeft: 10, }}>
               <Typography variant="body1">
@@ -18828,12 +18829,31 @@ const releaseToConnectLabel = "Release to Connect"
                 {new Date(executionData.completed_at * 1000).toLocaleString("en-GB")}
               </Typography>
             </div>
+
           ) : null}
-          <div style={{ marginTop: 10 }} />
+
-          {executionData.execution_argument !== undefined &&
+		  {executionData.workflow !== undefined && executionData.workflow !== null && executionData.status !== "EXECUTING" ? 
-            executionData.execution_argument.length > 0
+			  <div style={{marginTop: 5, marginBottom: 5, }}>
-            ? parsedExecutionArgument()
+				  <WorkflowValidationTimeline 
+			  		originalWorkflow={workflow}
+
+			  		apps={apps}
+					workflow={executionData.workflow}
+			  		getParents={getParents}
+
+			  		execution={executionData}
+				  />
+			  </div>
 		  : null}
+
+          <div style={{ marginTop: 10 }} />
+
+          {executionData.execution_argument !== undefined && executionData.execution_argument !== null && 
+            executionData.execution_argument.length > 1
+            ? parsedExecutionArgument()
+            : 
+			null}
+
           <Divider
             style={{
               backgroundColor: "rgba(255,255,255,0.6)",
@@ -18841,6 +18861,7 @@ const releaseToConnectLabel = "Release to Connect"
               marginBottom: 20,
             }}
           />
+
           {executionData.results !== undefined &&
             executionData.results !== null &&
             executionData.results.length > 1 &&
@@ -19534,7 +19555,7 @@ const releaseToConnectLabel = "Release to Connect"
 				  if (stringjson.includes("\n") && !stringjson.includes("\n")) {
 					return "Looks like you have a newline problem. Consider using the | replace: '\n', '\\n' }} filter in Liquid."
 				  } else {
-					return "The result looks like it should be JSON, but is invalid. Look for potential"
+					return "The result looks like it should be JSON, but is invalid. Look for potential single quotes instead of double quotes, missing commas or newlines"
 				  }
 			  }
 		  }