Minor fixes to e.g. creator grid

backend/app_sdk/build.sh

@@ -2,7 +2,7 @@
 
 ### DEFAULT 
 NAME=shuffle-app_sdk
-VERSION=1.0.5
+VERSION=1.0.6
 
 docker rmi docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION --force
 docker build . -f Dockerfile -t frikky/shuffle:app_sdk -t frikky/$NAME:$VERSION -t docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION -t ghcr.io/frikky/$NAME:$VERSION -t ghcr.io/frikky/$NAME:nightly

frontend/src/components/CreatorGrid.jsx

@@ -26,6 +26,11 @@ import {
 	CardActionArea,
 } from '@material-ui/core';
 
+import {
+	Avatar,
+  AvatarGroup,
+} from "@mui/material"
+
 import {
 	SkipNext as SkipNextIcon,
 	SkipPrevious as SkipPreviousIcon,
@@ -143,7 +148,6 @@ const CreatorGrid = props => {
     marginTop: 5,
   }
 	
-	var workflowDelay = -50
 	const Hits = ({ hits }) => {
 		const [mouseHoverIndex, setMouseHoverIndex] = useState(-1) 
 		var counted = 0
@@ -151,8 +155,6 @@ const CreatorGrid = props => {
 		return (
       <Grid container spacing={4} style={paperAppContainer}>
 				{hits.map((data, index) => {
-					workflowDelay += 50
-
 					if (counted === 12/xs*rowHandler) {
 						return null
 					}
@@ -160,16 +162,48 @@ const CreatorGrid = props => {
 					counted += 1
 
 					return (
-						<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+						<Zoom key={index} in={true} style={{}}>
 							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px" }}>
-								<Card>
+								<Card style={{border: "1px solid rgba(255,255,255,0.3)"}}>
-						  		<CardActionArea component={Link} to={"/creators/"+data.username} style={{padding: "5px 10px 5px 10px", display: "flex"}}>
+						  		<CardActionArea component={Link} to={"/creators/"+data.username} style={{padding: "5px 10px 5px 10px", }}>
 										<CardContent sx={{ flex: '1 0 auto', minWidth: 160, maxWidth: 160, overflow: "hidden", padding: 0, }}>
-											<Typography component="div" variant="h6">
+											<div style={{display: "flex"}}>
-												{data.username}
+												<img style={{height: 74, width: 74, borderRadius: 100, }} alt={"Creator profile of "+data.username} src={data.image} />
+												<Typography component="div" variant="body1" style={{marginTop: 20, marginLeft: 15, }}>
+													@{data.username}
 												</Typography>
+											</div>
+											<Typography variant="body1" color="textSecondary" style={{marginTop: 10, }}>
+												<b>10</b> apps <span style={{marginLeft: 15, }}/><b>23</b> workflows
+											</Typography> 
+										{data.specialized_apps !== undefined && data.specialized_apps !== null && data.specialized_apps.length > 0 ? 
+											<AvatarGroup max={10} style={{flexDirection: "row", padding: 0, margin: 0, itemAlign: "left", textAlign: "left",}}>
+												{data.specialized_apps.map((app, index) => {
+													// Putting all this in secondary of ListItemText looked weird.
+													return (
+														<div
+															key={index}
+															style={{
+																height: 24,
+																width: 24,
+																filter: "brightness(0.6)",
+																cursor: "pointer",
+															}}
+															onClick={() => {
+																console.log("Click")
+																//navigate("/apps/"+app.id)
+															}}
+														>
+															<Tooltip color="primary" title={app.name} placement="bottom">
+																<Avatar alt={app.name} src={app.image} style={{width: 24, height: 24}}/>
+															</Tooltip>
+														</div>
+													)
+												})}
+											</AvatarGroup>
+											: 
+											null}
 										</CardContent>
-										<img style={{height: 100, width: 100, borderRadius: 100, }} alt={"Creator profile of "+data.username} src={data.image} />
 									</CardActionArea>
 								</Card>
 
@@ -251,15 +285,6 @@ const CreatorGrid = props => {
 				</div>
 				: null
 			}
-
-			<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
-				<Typography variant="body2" color="textSecondary" style={{}}>
-					Search by 
-				</Typography>
-				<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
-					<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
-				</a>
-			</span>
 		</div>
 	)
 }

frontend/src/components/EditWorkflow.jsx

@@ -15,7 +15,6 @@ import {
   Divider,
   Button,
   TextField,
-  FormControl,
   IconButton,
   Menu,
   MenuItem,
@@ -32,6 +31,11 @@ import {
 	OutlinedInput,
 	Checkbox,
 	ListItemText,
+	Radio,
+	RadioGroup,
+	FormControl,
+	FormLabel,
+
 } from "@material-ui/core";
 
 import {
@@ -107,6 +111,7 @@ const EditWorkflow = (props) => {
 						required
             margin="dense"
             defaultValue={innerWorkflow.name}
+						label="Name"
             autoFocus
             fullWidth
           />
@@ -124,6 +129,7 @@ const EditWorkflow = (props) => {
             defaultValue={innerWorkflow.description}
             placeholder="Description"
             multiline
+						label="Description"
             margin="dense"
             fullWidth
           />
@@ -206,30 +212,50 @@ const EditWorkflow = (props) => {
 
   				{showMoreClicked === true ? 
 						<span style={{marginTop: 25, }}>
-							<TextField
-								onBlur={(event) => {
-									if (event.target.value.toLowerCase() === "test") {
-										innerWorkflow.status = "test"
-									} else if (event.target.value.toLowerCase() === "production" || event.target.value.toLowerCase() === "prod") {
-										innerWorkflow.status = "production"
-									} else {
-										innerWorkflow.status = "test"
-									}
 
+							<FormControl style={{marginTop: 15, }}>
+								<FormLabel id="demo-row-radio-buttons-group-label">Status</FormLabel>
+									<RadioGroup
+										row
+										aria-labelledby="demo-row-radio-buttons-group-label"
+										name="row-radio-buttons-group"
+										defaultValue={innerWorkflow.status}
+										onChange={(e) => {
+											console.log("Data: ", e.target.value)
+											
+											innerWorkflow.workflow_type = e.target.value
 											setInnerWorkflow(innerWorkflow)
 										}}
-								InputProps={{
+									>
-									style: {
+										<FormControlLabel value="test" control={<Radio />} label="Test" />
-										color: "white",
+										<FormControlLabel value="production" control={<Radio />} label="Production" />
-									},
+
+									</RadioGroup>
+							</FormControl>
+							<div />
+
+							<FormControl style={{marginTop: 15, }}>
+								<FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
+									<RadioGroup
+										row
+										aria-labelledby="demo-row-radio-buttons-group-label"
+										name="row-radio-buttons-group"
+										defaultValue={innerWorkflow.workflow_type}
+										onChange={(e) => {
+											console.log("Data: ", e.target.value)
+											
+											innerWorkflow.workflow_type = e.target.value
+											setInnerWorkflow(innerWorkflow)
 										}}
-								color="primary"
+									>
-								defaultValue={innerWorkflow.status}
+										<FormControlLabel value="trigger" control={<Radio />} label="Trigger" />
-								placeholder="The status of the workflow. Can be test or production."
+										<FormControlLabel value="subflow" control={<Radio />} label="Subflow" />
-								rows="1"
+										<FormControlLabel value="standalone" control={<Radio />} label="Standalone" />
-								margin="dense"
+
-								fullWidth
+									</RadioGroup>
-							/>
+							</FormControl>
+
+
 							<TextField
 								onBlur={(event) => {
 									innerWorkflow.blogpost = event.target.value
@@ -244,6 +270,7 @@ const EditWorkflow = (props) => {
 								defaultValue={innerWorkflow.blogpost}
 								placeholder="A blogpost or other reference for how this work workflow was built, and what it's for."
 								rows="1"
+								label="blogpost"
 								margin="dense"
 								fullWidth
 							/>
@@ -261,6 +288,7 @@ const EditWorkflow = (props) => {
 								defaultValue={innerWorkflow.video}
 								placeholder="A youtube or loom link to the video"
 								rows="1"
+								label="Video"
 								margin="dense"
 								fullWidth
 							/>
@@ -279,6 +307,7 @@ const EditWorkflow = (props) => {
 								placeholder="Default return value (used for Subflows if the subflow fails)"
 								rows="3"
 								multiline
+								label="Default return value"
 								margin="dense"
 								fullWidth
 							/>

frontend/src/components/Oauth2Auth.jsx

@@ -59,6 +59,7 @@ const registeredApps = [
 	"webex",
 	"zoho_desk",
 	"outlook_graph",
+	"outlook_office365",
 	"microsoft_teams",
 	"microsoft_teams_user_access",
 ]
@@ -367,9 +368,9 @@ const AuthenticationOauth2 = (props) => {
 								// 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") {
+								if (selectedApp.name.toLowerCase() == "outlook_graph" || selectedApp.name.toLowerCase() == "outlook_office365") {
 									handleOauth2Request(
-										"bb4bff85-0d0b-4f5d-8a69-3cee8029b11a",
+										"efe4c3fe-84a1-4821-a84f-23a6cfe8e72d",
 										"",
 										"https://graph.microsoft.com",
 										["Mail.ReadWrite"],

frontend/src/components/Searchfield.js

@@ -535,7 +535,8 @@ const SearchField = props => {
 						}
 
 						var name = hit.name === undefined ? 
-							hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title : 
+							hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title 
+							: 
 							(hit.name.charAt(0).toUpperCase()+hit.name.slice(1)).replaceAll("_", " ")
 
 						if (name.length > 30) {
@@ -552,6 +553,11 @@ const SearchField = props => {
 
 						var parsedUrl = hit.urlpath !== undefined ? hit.urlpath : ""
 						parsedUrl += `?queryID=${hit.__queryID}`
+						if (parsedUrl.includes("/apps/")) {
+							const extraHash = hit.url_hash === undefined ? "" : `#${hit.url_hash}`
+
+							parsedUrl = `/apps/${hit.filename}?tab=docs&queryID=${hit.__queryID}${extraHash}`
+						}
 
 						return (
 							<Link key={hit.objectID} to={parsedUrl} style={{textDecoration: "none", color: "white",}} onClick={(event) => {

frontend/src/components/ShuffleCodeEditor.jsx

@@ -379,10 +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) {
+		//if (found === null || found === undefined) {
-			console.log("No output found!")
+		//	console.log("No output found!")
-			return
+		//	return
-		}
+		//}
 
 		//console.log(found)
 

frontend/src/views/AngularWorkflow.jsx

@@ -11277,7 +11277,7 @@ const AngularWorkflow = (defaultprops) => {
       group: "nodes",
       data: {
         id: newId,
-        label: "Your comment :)",
+        label: "Click to write a comment",
         type: "COMMENT",
         is_valid: true,
         decorator: true,

frontend/src/views/Docs.jsx

@@ -29,7 +29,6 @@ const Body = {
   //minWidth: 768,
   maxWidth: "100%",
   minWidth: "100%",
-  margin: "auto",
   display: "flex",
   height: "100%",
   color: "white",
@@ -105,17 +104,19 @@ const Docs = (defaultprops) => {
     padding: 30,
     paddingTop: 15,
     marginTop: 15,
-		minHeight: "50vh",
+		minHeight: "80vh",
     //height: "50vh",
   };
 
   const SideBar = {
     minWidth: 250,
     maxWidth: 300,
-    position: "absolute",
+		borderRight: "1px solid rgba(255,255,255,0.3)",
-		top: 15,
 		left: 0,
-		maxHeight: "83vh",
+		position: "sticky",
+		top: 50,
+		minHeight: "90vh",
+		maxHeight: "90vh",
 		overflowX: "hidden",
 		overflowY: "auto",
 		zIndex: 1000,
@@ -155,7 +156,11 @@ const Docs = (defaultprops) => {
       .then((responseJson) => {
         if (responseJson.success) {
           setData(responseJson.reason);
+					if (docId === undefined) {
+          	document.title = "Shuffle documentation introduction";
+					} else {
           	document.title = "Shuffle " + docId + " documentation";
+					}
 
 					if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.includes("404: Not Found")) {
 						navigate("/docs")
@@ -349,11 +354,8 @@ const Docs = (defaultprops) => {
 
   const markdownStyle = {
     color: "rgba(255, 255, 255, 0.65)",
-    maxWidth: mobile ? "100%" : 750,
     overflow: "hidden",
     paddingBottom: 100,
-		maxWidth: 750,
-		minWidth: 750,
 		margin: "auto",
   };
 
@@ -419,7 +421,7 @@ const Docs = (defaultprops) => {
             display: "flex",
           }}
         >
-          <div style={{ flex: 3, display: "flex", vAlign: "center" }}>
+          <div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50,  }}>
             {mobile ? null : (
               <Typography style={{ display: "inline", marginTop: 6 }}>
                 <a
@@ -599,8 +601,6 @@ const Docs = (defaultprops) => {
 			marginTop: 50, 
 			textAlign: "center",
 			margin: "auto",
-			maxWidth: mobile ? "100%" : 900,
-			maxWidth: mobile ? "100%" : 900,
 			marginTop: 50, 
 		}}>
 				<Typography variant="h4" style={{textAlign: "center",}}>
@@ -766,11 +766,11 @@ const Docs = (defaultprops) => {
             </List>
           </Paper>
         </div>
+				<div style={{maxWidth: 750, minWidth: 750, margin: "auto", overflow: "hidden", marginTop: 50, }}>
 					{props.match.params.key === undefined ?
 						mainpageInfo
 					:
 						<div id="markdown_wrapper_outer" style={markdownStyle}>
-						<div style={{maxWidth: 750, minWidth: 750, marginTop: 50, }}>
 							<ReactMarkdown
 								id="markdown_wrapper"
 								escapeHtml={false}
@@ -784,9 +784,9 @@ const Docs = (defaultprops) => {
 								}}
 							/>
 						</div>
-					</div>
 					}
 				</div>
+      </div>
     );
 
   const mobileStyle = {