Added many new usecases and and a way to show vid os within workflows

2022-05-26 01:03:08 +02:00
parent 0b71fbf232
commit 9e3e86f1b0
7 changed files with 234 additions and 58 deletions
@@ -607,7 +607,7 @@ const OrgHeader = (props) => {
 						{/*isCloud ? null : */}
 						<Grid item xs={12} style={{marginTop: 50,}}>
            	<Typography variant="h4" style={{textAlign: "center",}}>SAML SSO (v1.1)</Typography>
-							<Grid container style={{marginTop: 10, }}>
+							<Grid container style={{marginTop: 20, }}>
            		<Grid item xs={6} style={{}}>
            		  <span>
            		    <Typography>SSO Entrypoint (IdP)</Typography>
@@ -682,6 +682,11 @@ const OrgHeader = (props) => {
            		  </span>
            		</Grid>
            	</Grid>
+							{isCloud ? 
+								<Typography variant="body2" style={{textAlign: "left",}} color="textSecondary">
+									IdP URL for Shuffle: https://shuffler.io/api/v1/login_sso
+								</Typography>
+							: null}
 						</Grid>
 						{isCloud ? null : (
              <Grid item xs={6} style={{}}>
@@ -83,6 +83,7 @@ import {
  ExpandMore as ExpandMoreIcon,
  VpnKey as VpnKeyIcon,
 	AutoFixHigh as AutoFixHighIcon,
+	SquareFoot as SquareFootIcon,
 } from '@mui/icons-material';
 //} from "@material-ui/icons";

@@ -167,6 +168,7 @@ const ParsedAction = (props) => {
 		isCloud,
 		lastSaved,
 		setLastSaved,
+		setShowVideo,
 		//expansionModalOpen,
 		//setExpansionModalOpen,
  } = props;
@@ -525,8 +527,12 @@ const ParsedAction = (props) => {

 									const valid = validateJson(foundResult)
 									if (valid.valid) {
-        	          exampledata = valid.result;
-        	          break;
+										if (valid.result.success === false) {
+											//console.log("Skipping success false autocomplete")
+										} else {
+        	          	exampledata = valid.result;
+        	          	break;
+										}
        	        } else {
        	          exampledata = foundResult;
 									}
@@ -777,6 +783,10 @@ const ParsedAction = (props) => {
      selectedAction.parameters[count].value = event.target.value;

 			var forceUpdate = false 
+			if (isCloud && (selectedAction.app_name === "Shuffle Tools" || selectedAction.app_name === "email") && (selectedAction.name === "send_email_shuffle" || selectedAction.name === "send_sms_shuffle") && data.name === "apikey") {
+				console.log("APIKEY - this shouldn't show up!")
+			}
+
 			if (selectedAction.app_name === "Shuffle Tools" && selectedAction.name === "filter_list" && data.name === "input_list") {
 				//console.log("FILTER LIST!: ", event, count, data)
 				const parsedvalue = event.target.value
@@ -1140,6 +1150,16 @@ const ParsedAction = (props) => {
              );
            }

+						// Added autofill to make this ALOT simpler
+						if (isCloud && (selectedAction.app_name === "Shuffle Tools" || selectedAction.app_name === "email") && (selectedAction.name === "send_email_shuffle" || selectedAction.name === "send_sms_shuffle") && data.name === "apikey") {
+							if (selectedActionParameters[count].length === 0) {
+								selectedAction.parameters[count].value = "TMP: Will be replaced during execution if cloud"
+								setSelectedAction(selectedAction)
+							}
+
+							return null
+						}
+
            var staticcolor = "inherit";
            var actioncolor = "inherit";
            var varcolor = "inherit";
@@ -1429,8 +1449,15 @@ const ParsedAction = (props) => {
                multiline={multiline}
                helperText={returnHelperText(data.name, data.value)}
                onClick={() => {
+                  console.log("Clicked field: ", clickedFieldId, data.name)
+									if (data.name === "file_id") {
+										console.log("show file video?")
+										if (setShowVideo !== undefined) {
+											setShowVideo("https://www.youtube.com/embed/DPYowyTbsSk")
+										}
+									}
+                  //(data.name.toLowerCase().includes("api") ||
 									/*
-                  console.log("Clicked field: ", clickedFieldId);
                  setExpansionModalOpen(false);
                  if (
                    setScrollConfig !== undefined &&
@@ -1689,6 +1716,7 @@ const ParsedAction = (props) => {
                  .endsWith("$")
                  ? values[0].autocomplete
                  : "$" + values[0].autocomplete;
+
                toComplete = toComplete.toLowerCase().replaceAll(" ", "_");
                console.log("AUTOCOMPLETE: ", toComplete);
                for (var key in values) {
@@ -1951,7 +1979,30 @@ const ParsedAction = (props) => {
 																				baseIndent
 																			)
 																		})}
-                        	          {icon} {newname}
+                        	          {icon} {newname} 
+																		{pathdata.type === "list" ? <SquareFootIcon style={{marginleft: 10, }} onClick={(e) => {
+																			e.preventDefault()
+																			e.stopPropagation()
+
+																			console.log("INNER: ", innerdata, pathdata)
+                											
+																			// Removing .list from autocomplete
+																			var newname = pathdata.name
+																			if (newname.length > 5) {
+																				newname = newname.slice(0, newname.length-5)
+																			}
+																			selectedActionParameters[count].value += `{{ $${innerdata.name}.${newname} | size }}`
+                											selectedAction.parameters[count].value = selectedActionParameters[count].value;
+                											setSelectedAction(selectedAction);
+                											setUpdate(Math.random());
+                											setShowDropdown(false);
+                											setMenuPosition(null);
+
+																			// innerdata.name
+																			// pathdata.name
+              												//handleItemClick([innerdata, newpathdata])
+																			//console.log("CLICK LENGTH!")
+																		}} /> : null}
                        	        </div>
                        	      </Tooltip>
                        	    </MenuItem>
@@ -2036,6 +2087,10 @@ const ParsedAction = (props) => {
            {
              /*<div style={{width: 17, height: 17, borderRadius: 17 / 2, backgroundColor: itemColor, marginRight: 10, marginTop: 2, marginTop: "auto", marginBottom: "auto",}}/>*/
            }
+
+						//console.log(data.configuration)
+
+						const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
            return (
              <div key={data.name}>
                {hideBodyButton}
@@ -2044,7 +2099,7 @@ const ParsedAction = (props) => {
                >
                  {data.configuration === true ? (
                    <Tooltip
-                      title={`Authenticate ${selectedApp.name}`}
+                      title={buttonTitle}
                      placement="top"
                    >
                      <LockOpenIcon
@@ -48,6 +48,11 @@ const mathFilters = [
 	{"name": "Minus", "value": "minus: 1", "example": `{{ "1" | minus: 1 }}`},
 ]

+const pythonFilters = [
+	{"name": "Hello World", "value": `{% python %}\nprint("hello world")\n{% endpython %}`, "example": ``},
+	{"name": "Handle JSON", "value": `{% python %}\nimport json\njsondata = json.loads("""$nodename""")\n{% endpython %}`, "example": ``},
+]
+
 const CodeEditor = (props) => {
 	const { fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata } = props
 	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
@@ -67,10 +72,12 @@ const CodeEditor = (props) => {
 	const [currentVariable, setCurrentVariable] = React.useState("");
 	const [anchorEl, setAnchorEl] = React.useState(null);
 	const [anchorEl2, setAnchorEl2] = React.useState(null);
+	const [anchorEl3, setAnchorEl3] = React.useState(null);
 	const [mainVariables, setMainVariables] = React.useState([]);
 	const [availableVariables, setAvailableVariables] = React.useState([]);
 	const liquidOpen = Boolean(anchorEl);
 	const mathOpen = Boolean(anchorEl2);
+	const pythonOpen = Boolean(anchorEl3);


 	useEffect(() => {
@@ -337,13 +344,19 @@ const CodeEditor = (props) => {


 	const handleClick = (item) => {
-		if (item === undefined || item.value === undefined) {
+		if (item === undefined || item.value === undefined || item.value === null) {
 			return
 		}

-		setlocalcodedata(localcodedata+" | "+item.value+" }}")
+		if (!item.value.includes("{%")) {
+			setlocalcodedata(localcodedata+" | "+item.value+" }}")
+		} else {
+			setlocalcodedata(localcodedata+item.value)
+		}
+
 		setAnchorEl(null)
 		setAnchorEl2(null)
+		setAnchorEl3(null)
 	}

 	return (
@@ -479,6 +492,41 @@ const CodeEditor = (props) => {
 						)
 					})}
 				</Menu>
+				<Button
+					id="basic-button"
+					aria-haspopup="true"
+					aria-controls={pythonOpen ? 'basic-menu' : undefined}
+					aria-expanded={pythonOpen ? 'true' : undefined}
+					variant="outlined"
+					style={{
+					  textTransform: "none",
+						width: 100, 
+					}}
+					onClick={(event) => {
+						setAnchorEl3(event.currentTarget);
+					}}
+				>
+					Python	
+				</Button>
+				<Menu
+					id="basic-menu"
+					anchorEl={anchorEl3}
+					open={pythonOpen}
+					onClose={() => {
+						setAnchorEl3(null);
+					}}
+					MenuListProps={{
+						'aria-labelledby': 'basic-button',
+					}}
+				>
+					{pythonFilters.map((item, index) => {
+						return (
+							<MenuItem onClick={() => {
+								handleClick(item)
+							}}>{item.name}</MenuItem>
+						)
+					})}
+				</Menu>
 			</div>
 			<span style={{
 				border: `2px solid ${theme.palette.inputColor}`,
@@ -528,7 +576,7 @@ const CodeEditor = (props) => {
 						styleSelectedText: true,
 						theme: codeTheme,
 						keyMap: 'sublime',
-						mode: 'javascript',
+						mode: 'python',
 						lineWrapping: linewrap,
 						// mode: {codelang},
 					}}
@@ -349,6 +349,7 @@ const AngularWorkflow = (defaultprops) => {
  const [executionModalView, setExecutionModalView] = React.useState(0);
  const [executionData, setExecutionData] = React.useState({});
  const [appsLoaded, setAppsLoaded] = React.useState(false);
+  const [showVideo, setShowVideo] = React.useState("");

  const [lastSaved, setLastSaved] = React.useState(true);

@@ -1851,6 +1852,9 @@ const AngularWorkflow = (defaultprops) => {
 			}
 		}

+		// Unselecting all
+		//cy.elements().unselect()
+
 		//if (nodedata.app_name === undefined && nodedata.source === undefined) {
 		//  return;
 		//}
@@ -5882,6 +5886,7 @@ const AngularWorkflow = (defaultprops) => {

  const getNextActionName = (appName) => {
    var highest = "";
+
    const allitems = workflow.actions.concat(workflow.triggers);
    for (var key in allitems) {
      const item = allitems[key];
@@ -5900,6 +5905,8 @@ const AngularWorkflow = (defaultprops) => {
      }
    }

+		appName = appName.replaceAll(" ", "_")
+
    if (highest) {
      return appName + "_" + (parseInt(highest) + 1);
    } else {
@@ -5923,11 +5930,8 @@ const AngularWorkflow = (defaultprops) => {

 		if (workflow.actions !== undefined && workflow.actions !== null) {
 			const foundInfo = workflow.actions.find(ac => ac.id === selectedAction.id)
-			console.log("aigo: ", foundInfo)
 		}

-		console.log("PRe: ", selectedAction)
-
    // Does this one find the wrong one?
    //var newSelectedAction = JSON.parse(JSON.stringify(selectedAction))
    var newSelectedAction = selectedAction
@@ -5940,7 +5944,6 @@ const AngularWorkflow = (defaultprops) => {

 		// Simmple action swap autocompleter
 		if (selectedAction.parameters !== undefined && newSelectedAction.parameters !== undefined && selectedAction.id === newSelectedAction.id) {
-			console.log("OLD: ", selectedAction, "NEW: ", newSelectedAction)
 			for (var paramkey in selectedAction.parameters) {
 				const param = selectedAction.parameters[paramkey];

@@ -5981,14 +5984,12 @@ const AngularWorkflow = (defaultprops) => {
        newSelectedAction.fillGradient.length > 0
      ) {
        newSelectedAction.fillstyle = "linear-gradient";
-        console.log("GRADIENT!: ", newSelectedAction);
      } else {
        newSelectedAction.iconBackground = iconInfo.iconBackgroundColor;
      }

      const foundnode = cy.getElementById(newSelectedAction.id);
      if (foundnode !== null && foundnode !== undefined) {
-        console.log("UPDATING NODE!");
        foundnode.data(newSelectedAction);
      }
    }
@@ -10890,6 +10891,7 @@ const AngularWorkflow = (defaultprops) => {

 			defaultReturn = <ParsedAction
 				id="rightside_subactions"
+				setShowVideo={setShowVideo}
 				isCloud={isCloud}
 				getParents={getParents}
 				actionDelayChange={actionDelayChange}
@@ -11152,7 +11154,7 @@ const AngularWorkflow = (defaultprops) => {
 								frameBorder={false}
 								webkitallowFullscreen={true}
 								mozallowFullscreen={true}
-								allowFullscreen={true}
+								allowFullScreen={true}
 								style={{
 									"top": 0, 
 									"left": 0,
@@ -11170,7 +11172,7 @@ const AngularWorkflow = (defaultprops) => {
 									frameBorder={false}
 									webkitallowFullscreen={true}
 									mozallowFullscreen={true}
-									allowFullscreen={true}
+									allowFullScreen={true}
 									style={{
 										"top": 0, 
 										"left": 0,
@@ -13883,6 +13885,39 @@ const parsedExecutionArgument = () => {
        {codePopoutModal}
        {configureWorkflowModal}
 				{editWorkflowModal}
+
+				{showVideo !== undefined && showVideo.length > 0 ? 
+					<div style={{borderRadius: theme.palette.borderRadius, zIndex: 12501, position: "fixed", left: 40, bottom: 150, width: 300,}}>
+      			<IconButton
+      			  style={{
+      			    zIndex: 12502,
+      			    position: "absolute",
+      			    top: 6,
+      			    right: 6,
+      			    color: "white",
+      			  }}
+      			  onClick={() => {
+      			    setShowVideo("")
+      			  }}
+      			>
+      			  <CloseIcon />
+      			</IconButton>
+						<iframe 
+							src={showVideo}
+							frameBorder={false}
+							webkitallowFullscreen={true}
+							mozallowFullscreen={true}
+							allowFullScreen={true}
+							style={{
+								"top": 0, 
+								"left": 0,
+								"maxWidth": 300,
+								"minWidth": 300,
+							}}
+						/>
+					</div>
+				: null}
+
        <TextField
          id="copy_element_shuffle"
          value={to_be_copied}
@@ -98,6 +98,13 @@ export const GetParsedPaths = (inputdata, basekey) => {
        name: "Node",
        autocomplete: `${basekey.replaceAll(" ", "_")}`,
      });
+
+      //parsedValues.push({
+      //  type: "value",
+      //  name: `${basekey} length`,
+      //  autocomplete: `{{ ${basekey.replaceAll(" ", "_")} | size }}`,
+      //});
+
      parsedValues.push({
        type: "list",
        name: `${splitkey}list`,
@@ -120,6 +127,13 @@ export const GetParsedPaths = (inputdata, basekey) => {
          name: basekeyname,
          autocomplete: `${basekey}.${key.replaceAll(" ", "_")}`,
        });
+
+        //parsedValues.push({
+        //  type: "value",
+        //  name: `${basekeyname} length`,
+        //  autocomplete: "{{ "+`${basekey}.${key.replaceAll(" ", "_")} | size }}`,
+        //});
+
        parsedValues.push({
          type: "list",
          name: `${basekeyname}${splitkey}list`,
@@ -327,7 +327,7 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 											//navigate(curpath + newitem)
 										}
 									}}>
-										<Paper style={{padding: "30px 30px 30px 30px", minHeight: 75, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
+										<Paper style={{padding: 25, minHeight: 75, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
 										}}>
 											{!selectedItem ? 
 												<div style={{textAlign: "left", position: "relative",}}>
@@ -606,9 +606,12 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																	<Typography variant="body1" color="textSecondary">
 																		{subcase.description}
 																	</Typography>
-																	<Typography variant="body1" style={{marginTop: 15, marginBottom: 10, }}>
-																		Select relevant workflows
-																	</Typography>
+
+																	{workflows !== undefined && workflows !== null && workflows.length > 0 ?
+																		<Typography variant="body1" style={{marginTop: 15, marginBottom: 10, }}>
+																			Select relevant workflows
+																		</Typography>
+																	: null}

 																	{workflows !== undefined && workflows !== null && workflows.length > 0 ?
 																		<Autocomplete
@@ -761,7 +764,50 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																			</Typography>
 																		</div>
 																	*/}
-																	<div style={{marginTop: 35}}>
+
+																	{subcase.extra_buttons !== undefined && subcase.extra_buttons !== null && subcase.extra_buttons.length > 0 ?
+																		<div style={{marginTop: 25, }}>
+																			<Typography variant="body1" style={{marginTop: 0,}} onClick={() => {}}>
+																				Examples
+																			</Typography>
+																			<div style={{display: "flex"}}>
+																				{subcase.extra_buttons.map((subdata, index) => {
+																					var highlight = false
+																					var baseTypeInfo = subcase.type !== undefined ? subcase.type : "communication"
+																					if (frameworkData !== undefined && frameworkData !== null) {
+																						if (frameworkData[baseTypeInfo] !== undefined && frameworkData[baseTypeInfo] !== null && subdata.app !== undefined && subdata.app !== null) {
+																							if (frameworkData[baseTypeInfo].name.toLowerCase().replaceAll("_", " ") === subdata.app.toLowerCase().replaceAll("_", " ")) {
+																								highlight = true
+																							}
+																						}
+																					}
+
+																					var marginTop = 6
+																					if (subdata.name.includes(" ") && subdata.name.length > 10) {
+																						marginTop = 0
+																					}
+
+																					return (
+																						<a 
+																							key={index}
+																							href={subdata.link}
+																							rel="noopener noreferrer"
+																							target="_blank"
+																							style={{ textDecoration: "none", color: "rgba(255,255,255,0.7)", marginRight: 5, }}
+																						>
+																							<div style={{width: 160, display: "flex", borderRadius: theme.palette.borderRadius, cursor: "pointer", border: highlight ? "2px solid #f86a3e" : "1px solid rgba(255,255,255,0.7)", backgroundColor: theme.palette.inputColor, padding: "0px 0px 15px 15px", overflow: "hidden",}}>
+																								<img src={subdata.image} style={{width: 40, height: 40, borderRadius: theme.palette.borderRadius, marginTop: 15, }} />
+																								<Typography variant="body1" style={{lineHeight: "95%", marginLeft: 12, marginTop: marginTop === 0 ? 19 : 25, maxHeight: 34, }}>
+																									{subdata.name}
+																								</Typography>
+																							</div>
+																						</a>
+																					)
+																				})}
+																			</div>
+																		</div>
+																	: null}
+																	<div style={{marginTop: 20}}>
 																		<a
 																			href={`https://shuffler.io/search?tab=workflows&q=${subcase.name}`}
 																			rel="noopener noreferrer"
@@ -769,7 +815,7 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																			style={{ textDecoration: "none", color: "white", marginRight: 5, }}
 																		>
 																			<Typography variant="body1" style={{marginTop: 15, cursor: "pointer",}} onClick={() => {}}>
-																				See Public Workflows <OpenInNewIcon style={{marginTop: 5, marginLeft: 15, }}/>
+																				See other Public Workflows for {} <OpenInNewIcon style={{marginTop: 5, marginLeft: 15, }}/>
 																			</Typography>
 																			{/*
 																			<div>
@@ -780,43 +826,11 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																			*/}
 																		</a>
 																	</div>
-
-
-																	<div style={{display: "flex"}}>
-																		{subcase.extra_buttons !== undefined && subcase.extra_buttons !== null && subcase.extra_buttons.length > 0 ?
-																			subcase.extra_buttons.map((subdata, index) => {
-																				var highlight = false
-																				var baseTypeInfo = subcase.type !== undefined ? subcase.type : "communication"
-																				if (frameworkData[baseTypeInfo] !== undefined && frameworkData[baseTypeInfo] !== null && subdata.app !== undefined && subdata.app !== null) {
-																					if (frameworkData[baseTypeInfo].name.toLowerCase().replaceAll("_", " ") === subdata.app.toLowerCase().replaceAll("_", " ")) {
-																						highlight = true
-																					}
-																				}
-
-																				return (
-																					<a 
-																						key={index}
-																						href={subdata.link}
-																						rel="noopener noreferrer"
-																						target="_blank"
-                  													style={{ textDecoration: "none", color: "rgba(255,255,255,0.7)", marginRight: 5, }}
-																					>
-																						<div style={{width: 140, display: "flex", borderRadius: theme.palette.borderRadius, cursor: "pointer", border: highlight ? "2px solid #f86a3e" : "1px solid rgba(255,255,255,0.7)", backgroundColor: theme.palette.inputColor, padding: 15, }}>
-																							<img src={subdata.image} style={{width: 40, height: 40, }} />
-																							<Typography variant="body1" style={{marginLeft: 15, marginTop: 6,}}>
-																								{subdata.name}
-																							</Typography>
-																						</div>
-																					</a>
-																				)
-																		})
-																		: null}
-																		</div>
 																</div>
 															}
 															<div style={{
-																	height: 400, 
-																	width: 400, 
+																	height: 350, 
+																	width: 350, 
 																	borderRadius: theme.palette.borderRadius,
 																	border: "1px solid rgba(255,255,255,0.3)",
 																}}>
@@ -828,7 +842,7 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																	isLoaded={true}
 																	isLoggedIn={true}
 																	globalUrl={globalUrl}
-																	size={0.7}
+																	size={0.6}
 																/>
 															</div>
 														</div>
@@ -3242,6 +3242,11 @@ const Workflows = (props) => {
 							</Zoom>

              {filteredWorkflows.map((data, index) => {
+								// Shouldn't be a part of this list
+								if (data.public === true) {
+									return null
+								}
+
  							if (firstLoad) {
 									workflowDelay += 75
 								} else {