Fixed Select and Autocomplete prompts to properly select and work with mui18

frontend/src/components/EditWorkflow.jsx

@@ -475,7 +475,7 @@ const EditWorkflow = (props) => {
 		</div>
 
         </DialogContent>
-        <DialogActions>
+        <DialogActions style={{paddingRight: 20, }}>
           <Button
             style={{}}
             onClick={() => {

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 &&
@@ -2008,7 +2008,6 @@ const ParsedAction = (props) => {
 					}}
                   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,7 +3281,6 @@ const ParsedAction = (props) => {
               }
               SelectDisplayProps={{
                 style: {
-                  marginLeft: 10,
 					maxWidth: 250,
                 },
               }}
@@ -3329,7 +3382,6 @@ const ParsedAction = (props) => {
             }
             SelectDisplayProps={{
               style: {
-                marginLeft: 10,
               },
             }}
             fullWidth
@@ -3389,7 +3441,6 @@ const ParsedAction = (props) => {
             }
             SelectDisplayProps={{
               style: {
-                marginLeft: 10,
               },
             }}
             fullWidth
@@ -3601,31 +3652,13 @@ const ParsedAction = (props) => {
 				}
 
               return (
-                <Tooltip
+			  	<ActionSelectOption
-                  color="secondary"
+					data={data}
-                  title={newActiondescription}
+					newActiondescription={newActiondescription}
-                  placement="left"
+					useIcon={useIcon}
-                >
+					newActionname={newActionname}
-									<div>
+					extraDescription={extraDescription}
-										<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>
               );
             }}
             renderInput={(params) => {
@@ -3644,7 +3677,12 @@ const ParsedAction = (props) => {
 
               return (
 					<TextField
+						data-lpignore="true"
+						autocomplete="off"
+						dataLPIgnore="true"
+
 						color="primary"
+						id="checkbox-search"
 						variant="body1"
 						style={{
 							backgroundColor: theme.palette.inputColor,

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
 		}
 
@@ -10183,7 +10182,7 @@ const AngularWorkflow = (defaultprops) => {
 
                     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",
@@ -11693,12 +11709,11 @@ const AngularWorkflow = (defaultprops) => {
 					  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.")

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);

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);
 										}}