From e331d06b8a0dfaaa88b10968a0e6173b65ca64c7 Mon Sep 17 00:00:00 2001
From: Frikky <frikky@shuffler.io>
Date: Wed, 16 Aug 2023 00:07:02 +0200
Subject: [PATCH] Fixed Select and Autocomplete prompts to properly select and
 work with mui18

---
 frontend/src/components/EditWorkflow.jsx |   2 +-
 frontend/src/components/ParsedAction.jsx | 270 +++++++++++++----------
 frontend/src/views/AngularWorkflow.jsx   | 114 ++++++----
 frontend/src/views/AppCreator.jsx        |   8 +
 frontend/src/views/Workflows.jsx         |   3 +
 5 files changed, 234 insertions(+), 163 deletions(-)

diff --git a/frontend/src/components/EditWorkflow.jsx b/frontend/src/components/EditWorkflow.jsx
index 41bdffea..c862f22b 100644
--- a/frontend/src/components/EditWorkflow.jsx
+++ b/frontend/src/components/EditWorkflow.jsx
@@ -475,7 +475,7 @@ const EditWorkflow = (props) => {
 		</div>
 
         </DialogContent>
-        <DialogActions>
+        <DialogActions style={{paddingRight: 20, }}>
           <Button
             style={{}}
             onClick={() => {
diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index 67a8642c..4843bfc7 100755
--- a/frontend/src/components/ParsedAction.jsx
+++ b/frontend/src/components/ParsedAction.jsx
@@ -1146,7 +1146,7 @@ const ParsedAction = (props) => {
           		    //  setNewSelectedAction({ target: { value: newValue.name } });
           		    //}
           		  }}
-          		  renderOption={(data) => {
+            	  renderOption={(props, data, state) => {
           		    var newActionname = data.app_name;
           		    if (
           		      data.label !== undefined &&
@@ -1696,10 +1696,10 @@ const ParsedAction = (props) => {
 										null : null	
                 }
                 onBlur={(event) => {
-									baseHelperText = calculateHelpertext(event.target.value)
-									if (setLastSaved !== undefined) {
-										setLastSaved(false)
-									}
+					baseHelperText = calculateHelpertext(event.target.value)
+					if (setLastSaved !== undefined) {
+						setLastSaved(false)
+					}
                 }}
               />
             );
@@ -2003,12 +2003,11 @@ const ParsedAction = (props) => {
 
               datafield = (
                 <Select
-									MenuProps={{
-										disableScrollLock: true,
-									}}
+					MenuProps={{
+						disableScrollLock: true,
+					}}
                   SelectDisplayProps={{
                     style: {
-                      marginLeft: 10,
                     },
                   }}
                   value={selectedActionParameters[count].value}
@@ -2587,7 +2586,6 @@ const ParsedAction = (props) => {
                       labelId="action-autocompleter"
                       SelectDisplayProps={{
                         style: {
-                          marginLeft: 10,
                         },
                       }}
                       onClose={() => {
@@ -2680,6 +2678,62 @@ const ParsedAction = (props) => {
     return null;
   };
 
+
+	const ActionSelectOption = (actionprops) => {
+		const { data, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
+  		const [hover, setHover] = React.useState(false);
+
+		console.log("Extra desc: ", extraDescription)
+
+		return (
+			<Tooltip
+			  color="secondary"
+			  title={newActiondescription}
+			  placement="left"
+			>
+				<div style={{
+					cursor: "pointer", 
+					padding: 8, 
+					paddingLeft: 14, 
+					paddingBottom: 4,
+					backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor,
+				}} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+				onClick={() => {
+					//setSelectedAction(actionprops)
+					//setShowActionList(false)
+					//setUpdate(Math.random())
+					//
+					if (data !== undefined && data !== null) { 
+                		setNewSelectedAction({ 
+							target: { 
+								value: data.name 
+							} 
+						});
+              		}
+				}}
+				>
+					<div style={{ display: "flex", marginBottom: 0,}}>
+						<span
+							style={{
+								marginRight: 10,
+								marginTop: "auto",
+								marginBottom: 0,
+							}}
+						>
+							{useIcon}
+						</span>
+						<span style={{marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
+					</div>
+					{extraDescription.length > 0 ? 
+						<Typography variant="body2" color="textSecondary" style={{marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block",}}>
+							{extraDescription}	
+						</Typography>
+					: null}
+				</div>
+			</Tooltip>
+		)
+	}
+
   //const CustomPopper = function (props) {
   //	const classes = useStyles()
   //	return <Popper {...props} className={classes.root} placement="bottom" />
@@ -2906,7 +2960,6 @@ const ParsedAction = (props) => {
                   }}
                   SelectDisplayProps={{
                     style: {
-                      marginLeft: 10,
                     },
                   }}
                 >
@@ -2941,6 +2994,7 @@ const ParsedAction = (props) => {
 						<div style={{flex: 5}}>
 							<Typography style={{color: "rgba(255,255,255,0.7)"}}>Name</Typography>
 							<TextField
+
 								style={theme.palette.textFieldStyle}
 								InputProps={{
 									style: theme.palette.innerTextfieldStyle,
@@ -3227,8 +3281,7 @@ const ParsedAction = (props) => {
               }
               SelectDisplayProps={{
                 style: {
-                  marginLeft: 10,
-									maxWidth: 250,
+					maxWidth: 250,
                 },
               }}
               fullWidth
@@ -3329,7 +3382,6 @@ const ParsedAction = (props) => {
             }
             SelectDisplayProps={{
               style: {
-                marginLeft: 10,
               },
             }}
             fullWidth
@@ -3375,9 +3427,9 @@ const ParsedAction = (props) => {
         <div style={{ marginTop: "20px" }}>
           <Typography>Execution variable (optional)</Typography>
           <Select
-						MenuProps={{
-							disableScrollLock: true,
-						}}
+			MenuProps={{
+				disableScrollLock: true,
+			}}
             value={
               selectedAction.execution_variable !== undefined
               && selectedAction.execution_variable !== null 
@@ -3389,7 +3441,6 @@ const ParsedAction = (props) => {
             }
             SelectDisplayProps={{
               style: {
-                marginLeft: 10,
               },
             }}
             fullWidth
@@ -3458,20 +3509,20 @@ const ParsedAction = (props) => {
             autoHighlight
             value={selectedAction}
             classes={{ inputRoot: classes.inputRoot }}
-						groupBy={(option) => {
-							// Most popular
-							// Is categorized
-							// Uncategorized
-							return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
-						}}
-						renderGroup={(params) => {
-							return (
-								<li key={params.key}>
-									<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
-									<Typography variant="body2">{params.children}</Typography>
-								</li>
-							)	
-  					}}
+			groupBy={(option) => {
+				// Most popular
+				// Is categorized
+				// Uncategorized
+				return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
+			}}
+			renderGroup={(params) => {
+				return (
+					<li key={params.key}>
+						<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
+						<Typography variant="body2">{params.children}</Typography>
+					</li>
+				)	
+			}}
             options={selectedApp.actions === undefined || selectedApp.actions === null ? [] : selectedApp.actions.filter((a) => a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(selectedApp.actions, "label"))}
             ListboxProps={{
               style: {
@@ -3509,10 +3560,10 @@ const ParsedAction = (props) => {
               // Workaround with event lol
               if (newValue !== undefined && newValue !== null) {
                 setNewSelectedAction({ 
-									target: { 
-										value: newValue.name 
-									} 
-								});
+					target: { 
+						value: newValue.name 
+					} 
+				});
               }
             }}
             renderOption={(props, data, state) => {
@@ -3560,100 +3611,87 @@ const ParsedAction = (props) => {
 					method = "CONNECT"
 				}
 
-							// FIXME: Should it require a base URL?
-							if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {
-								var extraUrl = ""
-								const descSplit = data.description.split("\n")
-								// Last line of descSplit
-								if (descSplit.length > 0) {
-									extraUrl = descSplit[descSplit.length-1]
-								} 
+				// FIXME: Should it require a base URL?
+				if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {
+					var extraUrl = ""
+					const descSplit = data.description.split("\n")
+					// Last line of descSplit
+					if (descSplit.length > 0) {
+						extraUrl = descSplit[descSplit.length-1]
+					} 
 
-								//for (let [line,lineval] in Object.entries(descSplit)) {
-								//	if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
-								//		const urlsplit = descSplit[line].split("/")
-								//		try {
-								//			extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/")
-								//		} catch (e) {
-								//			//console.log("Failed - running with -1")
-								//			extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/")
-								//		}
+					//for (let [line,lineval] in Object.entries(descSplit)) {
+					//	if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
+					//		const urlsplit = descSplit[line].split("/")
+					//		try {
+					//			extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/")
+					//		} catch (e) {
+					//			//console.log("Failed - running with -1")
+					//			extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/")
+					//		}
 
 
-								//		//console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line])
-								//		//break
-								//	} 
-								//}
+					//		//console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line])
+					//		//break
+					//	} 
+					//}
 
-								if (extraUrl.length > 0) {
-									if (extraUrl.includes(" ")) {
-										extraUrl = extraUrl.split(" ")[0]
-									}
+					if (extraUrl.length > 0) {
+						if (extraUrl.includes(" ")) {
+							extraUrl = extraUrl.split(" ")[0]
+						}
 
-									if (extraUrl.includes("#")) {
-										extraUrl = extraUrl.split("#")[0]
-									}
+						if (extraUrl.includes("#")) {
+							extraUrl = extraUrl.split("#")[0]
+						}
 
-									extraDescription = `${method} ${extraUrl}`
-								} else {
-									//console.log("No url found. Check again :)")
-								}
-							}
+						extraDescription = `${method} ${extraUrl}`
+					} else {
+						//console.log("No url found. Check again :)")
+					}
+				}
 
               return (
-                <Tooltip
-                  color="secondary"
-                  title={newActiondescription}
-                  placement="left"
-                >
-									<div>
-										<div style={{ display: "flex", marginBottom: 0,}}>
-											<span
-												style={{
-													marginRight: 10,
-													marginTop: "auto",
-													marginBottom: 0,
-												}}
-											>
-												{useIcon}
-											</span>
-											<span style={{marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
-										</div>
-										{extraDescription.length > 0 ? 
-											<Typography variant="body2" color="textSecondary" style={{marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block",}}>
-												{extraDescription}	
-											</Typography>
-										: null}
-									</div>
-								</Tooltip>
+			  	<ActionSelectOption
+					data={data}
+					newActiondescription={newActiondescription}
+					useIcon={useIcon}
+					newActionname={newActionname}
+					extraDescription={extraDescription}
+				/>
               );
             }}
             renderInput={(params) => {
-							if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) {
-								const prefixes = ["Post", "Put", "Patch"]
-								for (let [key,keyval] in Object.entries(prefixes)) {
-									if (params.inputProps.value.startsWith(prefixes[key])) {
-										params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1)
-										if (params.inputProps.value.length > 1) {
-											params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1)
-										}
-										break
-									}
-								}
+				if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) {
+					const prefixes = ["Post", "Put", "Patch"]
+					for (let [key,keyval] in Object.entries(prefixes)) {
+						if (params.inputProps.value.startsWith(prefixes[key])) {
+							params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1)
+							if (params.inputProps.value.length > 1) {
+								params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1)
 							}
+							break
+						}
+					}
+				}
 
               return (
-								<TextField
-									color="primary"
-									variant="body1"
-									style={{
-										backgroundColor: theme.palette.inputColor,
-										borderRadius: theme.palette.borderRadius,
-									}}
-									{...params}
-									label="Find Actions"
-									variant="outlined"
-								/>
+					<TextField
+						data-lpignore="true"
+						autocomplete="off"
+						dataLPIgnore="true"
+
+						color="primary"
+						id="checkbox-search"
+						variant="body1"
+						style={{
+							backgroundColor: theme.palette.inputColor,
+							borderRadius: theme.palette.borderRadius,
+						}}
+						{...params}
+						label="Find Actions"
+						variant="outlined"
+					/>
               );
             }}
           />
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index f5ccd244..72f53d74 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -7647,6 +7647,7 @@ const AngularWorkflow = (defaultprops) => {
     zIndex: 1000,
     resize: "vertical",
     overflow: "auto",
+	paddingBottom: 100, 
   };
 
   var rightsidebarStyle = {
@@ -7967,7 +7968,6 @@ const AngularWorkflow = (defaultprops) => {
               labelId="action-autocompleter"
               SelectDisplayProps={{
                 style: {
-                  marginLeft: 10,
                 },
               }}
               onClose={() => {
@@ -9129,7 +9129,6 @@ const AngularWorkflow = (defaultprops) => {
                     disabled={selectedTrigger.status === "running"}
                     SelectDisplayProps={{
                       style: {
-                        marginLeft: 10,
                       },
                     }}
                     onChange={(e) => {
@@ -9340,7 +9339,7 @@ const AngularWorkflow = (defaultprops) => {
 		setUpdate(Math.random());
 
 		if (e.target.value === undefined || e.target.value === null || e.target.value.id === undefined) {
-			console.log("Returning as there's no id")
+			console.log("Returning as there's no id. Value: ", e.target.value);
 			return null
 		}
 
@@ -10163,27 +10162,27 @@ const AngularWorkflow = (defaultprops) => {
                     borderRadius: theme.palette.borderRadius,
                   }}
                   onChange={(event, newValue) => {
-										console.log("Found value: ", newValue)
+					console.log("Found value: ", newValue)
 
-										var parsedinput = { target: { value: newValue } }
+					var parsedinput = { target: { value: newValue } }
 
-										// For variables
-										if (typeof newValue === 'string' && newValue.startsWith("$")) {
-											parsedinput = { 
-												target: { 
-													value: {
-														"name": newValue, 
-														"id": newValue,
-														"actions": [],
-														"triggers": [],
-													} 
-												} 
-											}
-										}
+					// For variables
+					if (typeof newValue === 'string' && newValue.startsWith("$")) {
+						parsedinput = { 
+							target: { 
+								value: {
+									"name": newValue, 
+									"id": newValue,
+									"actions": [],
+									"triggers": [],
+								} 
+							} 
+						}
+					}
 
                     handleWorkflowSelectionUpdate(parsedinput)
                   }}
-                  renderOption={(data, index) => {
+            	  renderOption={(props, data, state) => {
                     if (data.id === workflow.id) {
                       data = workflow;
                     }
@@ -10205,9 +10204,16 @@ const AngularWorkflow = (defaultprops) => {
                             backgroundColor: theme.palette.inputColor,
                             color: data.id === workflow.id ? "red" : "white",
                           }}
-                          key={index}
                           value={data}
+						  onClick={() => {	
+							handleWorkflowSelectionUpdate({
+								target: {
+									value: data
+								}
+							})
+						  }}
                         >
+						  <PolylineIcon style={{ marginRight: 8 }} />
                           {data.name}
                         </MenuItem>
                       </Tooltip>
@@ -10283,7 +10289,7 @@ const AngularWorkflow = (defaultprops) => {
                     onChange={(event, newValue) => {
                       handleSubflowStartnodeSelection({ target: { value: newValue } })
                     }}
-                    renderOption={(action) => {
+            		renderOption={(props, action, state) => {
                       const isParent = getParents(selectedTrigger).find(
                         (parent) => parent.id === action.id
                       )
@@ -10301,6 +10307,13 @@ const AngularWorkflow = (defaultprops) => {
                             }
                           }}
                           disabled={isCloud && isParent}
+						  onClick={() => {
+                      		handleSubflowStartnodeSelection({ 
+								target: { 
+									value: action 
+								} 
+							})
+						  }}
                           style={{
                             backgroundColor: theme.palette.inputColor,
                             color: isParent ? "red" : "white",
@@ -10319,7 +10332,7 @@ const AngularWorkflow = (defaultprops) => {
                             borderRadius: theme.palette.borderRadius,
                           }}
                           {...params}
-                          label="Find your start-node"
+                          label="Select a start-node (optional)"
                           variant="outlined"
                         />
                       );
@@ -10669,9 +10682,6 @@ const AngularWorkflow = (defaultprops) => {
 
       return (
         <div style={appApiViewStyle}>
-          <div
-            style={{ display: "flex", height: "40px", marginBottom: "30px" }}
-          >
             <div style={{ flex: "1" }}>
               <h3 style={{ marginBottom: "5px" }}>
                 {selectedTrigger.app_name}: {selectedTrigger.status}
@@ -10685,7 +10695,6 @@ const AngularWorkflow = (defaultprops) => {
                 What are webhooks?
               </a>
             </div>
-          </div>
           <Divider
             style={{
               marginBottom: "10px",
@@ -10770,7 +10779,7 @@ const AngularWorkflow = (defaultprops) => {
                   //	});
                   //}
                 }}
-                renderOption={(app) => {
+            	renderOption={(props, app, state) => {
                   var appname = app.name.replaceAll("_", " ")
                   appname = appname.charAt(0).toUpperCase() + appname.substring(1)
 
@@ -10780,7 +10789,19 @@ const AngularWorkflow = (defaultprops) => {
                       title={appname}
                       placement="left"
                     >
-                      <div>
+                      <MenuItem 
+					  	onClick={() => {
+							const newValue = app
+
+                  			if (newValue !== undefined && newValue !== null) {
+                  			  var parsedvalue = JSON.parse(JSON.stringify(newValue))
+                  			  parsedvalue.actions = []
+                  			  parsedvalue.authentication = {}
+                  			  selectedTrigger.app_association = parsedvalue
+                  			  setUpdate(Math.random());
+                  			}
+						}}
+					  >
                         <div style={{ display: "flex", marginBottom: 0, }}>
                           <Avatar variant="rounded">
                             <img
@@ -10793,7 +10814,7 @@ const AngularWorkflow = (defaultprops) => {
                             {appname}
                           </Typography>
                         </div>
-                      </div>
+                      </MenuItem>
                     </Tooltip>
                   )
                 }}
@@ -10817,7 +10838,7 @@ const AngularWorkflow = (defaultprops) => {
             </div>
             : null}
           {selectedTrigger.status === "running" ? null :
-            <div style={{ marginTop: "20px" }}>
+            <div style={{ marginTop: 20 }}>
               <Typography>Environment</Typography>
               <Select
                 MenuProps={{
@@ -10827,7 +10848,6 @@ const AngularWorkflow = (defaultprops) => {
                 disabled={selectedTrigger.status === "running"}
                 SelectDisplayProps={{
                   style: {
-                    marginLeft: 10,
                   },
                 }}
                 fullWidth
@@ -11471,9 +11491,6 @@ const AngularWorkflow = (defaultprops) => {
 
       return (
         <div style={appApiViewStyle}>
-          <div
-            style={{ display: "flex", height: "40px", marginBottom: "30px" }}
-          >
             <div style={{ flex: "1" }}>
               <h3 style={{ marginBottom: "5px" }}>
                 {selectedTrigger.app_name}
@@ -11487,7 +11504,6 @@ const AngularWorkflow = (defaultprops) => {
                 What is the user input trigger?
               </a>
             </div>
-          </div>
           <Divider
             style={{
               marginBottom: "10px",
@@ -11686,19 +11702,18 @@ const AngularWorkflow = (defaultprops) => {
               	      backgroundColor: theme.palette.inputColor,
               	      height: 50,
               	      borderRadius: theme.palette.borderRadius,
-											marginTop: 15,
-											marginBottom: 15,
+						marginTop: 15,
+						marginBottom: 15,
               	    }}
               	    onChange={(event, newValue) => {
-											console.log("Changed autocomplete!")
+					  console.log("Changed autocomplete!")
               	      handleWorkflowSelectionUpdate({ target: { value: newValue } }, true)
               	    }}
-              	    renderOption={(data, index) => {
+            		renderOption={(props, data, state) => {
               	      if (data.id === workflow.id) {
               	        data = workflow;
               	      }
 
-              	      //key={index}
               	      return (
               	        <Tooltip arrow placement="left" title={
               	          <span style={{}}>
@@ -11712,12 +11727,18 @@ const AngularWorkflow = (defaultprops) => {
               	        } placement="bottom">
               	          <MenuItem
               	            style={{
-              	              backgroundColor: theme.palette.inputColor,
               	              color: data.id === workflow.id ? "red" : "white",
               	            }}
-              	            key={index}
               	            value={data}
+							onClick={() => {
+								handleWorkflowSelectionUpdate({ 
+									target: { 
+										value: data,
+									}}, 
+								true)
+							}}
               	          >
+						  	<PolylineIcon style={{ marginRight: 8 }} />
               	            {data.name}
               	          </MenuItem>
               	        </Tooltip>
@@ -11885,7 +11906,6 @@ const AngularWorkflow = (defaultprops) => {
               disabled={selectedTrigger.status === "running"}
               SelectDisplayProps={{
                 style: {
-                  marginLeft: 10,
                 },
               }}
               fullWidth
@@ -15566,7 +15586,6 @@ const AngularWorkflow = (defaultprops) => {
                     }}
                     SelectDisplayProps={{
                       style: {
-                        marginLeft: 10,
                       },
                     }}
                     defaultValue={"false"}
@@ -16310,7 +16329,10 @@ const AngularWorkflow = (defaultprops) => {
 
 		  // Make unix timestamp into ISO timestamp in the format July 27th, 3:05 AM
 		  // Format: July 27th, 3:05 AM	
-		  const translatedDate = new Date(revision.edited).toLocaleString('en-US', { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
+		  console.log("Edited time: ", revision.edited)
+		  // Convert 1692128391 to valid timestamp
+		  const validTimestamp = revision.edited.toString().length === 10 ? revision.edited * 1000 : revision.edited
+		  const translatedDate = new Date(validTimestamp).toLocaleString('en-US', { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
 
 		  var workflowStatus = revision.status !== undefined  && revision.status !== null && revision.status !== "" ? revision.status : "test"
 		  if (revision.name !== undefined && revision.name !== null && revision.name !== "") {
@@ -16329,7 +16351,7 @@ const AngularWorkflow = (defaultprops) => {
 
 		  return (
 		  	<Paper 
-				style={{padding: "15px 15px 15px 25px", minHeight: 75, maxHeight: 75, cursor: "pointer", backgroundColor: revision.edited === selectedRevision.edited ? "rgba(255,255,255,0.3)" : theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.3)", marginBottom: 10, 
+				style={{padding: "15px 15px 15px 25px", minHeight: 105, maxHeight: 105, cursor: "pointer", backgroundColor: revision.edited === selectedRevision.edited ? "rgba(255,255,255,0.3)" : theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.3)", marginBottom: 10, 
 				}} onClick={(e) => {
 					if (revision.edited === selectedRevision.edited) {
 						console.log("Same revision! No setting.")
diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx
index 26ad2553..cb77cf0e 100755
--- a/frontend/src/views/AppCreator.jsx
+++ b/frontend/src/views/AppCreator.jsx
@@ -2939,6 +2939,10 @@ const AppCreator = (defaultprops) => {
           color="primary"
           fullWidth
           value={oauth2Scopes}
+		  onChange={(chips) => {
+			  setOauth2Scopes(chips)
+			  setUpdate(Math.random())
+		  }}
           onAdd={(chip) => {
             oauth2Scopes.push(chip);
             console.log(oauth2Scopes);
@@ -4407,6 +4411,10 @@ const AppCreator = (defaultprops) => {
         color="primary"
         fullWidth
         value={newWorkflowTags}
+	    onChange={(chips) => {
+			setNewWorkflowTags(chips)
+			setUpdate("added "+chips)
+	    }}
         onAdd={(chip) => {
           newWorkflowTags.push(chip);
           setNewWorkflowTags(newWorkflowTags);
diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx
index 0c4f9ea7..ab6eddd6 100755
--- a/frontend/src/views/Workflows.jsx
+++ b/frontend/src/views/Workflows.jsx
@@ -3250,6 +3250,9 @@ const Workflows = (props) => {
 										color="primary"
 										fullWidth
 										value={filters}
+										onChange={(chips) => {
+											setFilters(chips);
+										}}
 										onAdd={(chip) => {
 											addFilter(chip);
 										}}