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

This commit is contained in:
Frikky
2023-08-16 00:07:02 +02:00
parent bb8b14be64
commit e331d06b8a
5 changed files with 234 additions and 163 deletions
+1 -1
View File
@@ -475,7 +475,7 @@ const EditWorkflow = (props) => {
</div> </div>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions style={{paddingRight: 20, }}>
<Button <Button
style={{}} style={{}}
onClick={() => { onClick={() => {
+154 -116
View File
@@ -1146,7 +1146,7 @@ const ParsedAction = (props) => {
// setNewSelectedAction({ target: { value: newValue.name } }); // setNewSelectedAction({ target: { value: newValue.name } });
//} //}
}} }}
renderOption={(data) => { renderOption={(props, data, state) => {
var newActionname = data.app_name; var newActionname = data.app_name;
if ( if (
data.label !== undefined && data.label !== undefined &&
@@ -1696,10 +1696,10 @@ const ParsedAction = (props) => {
null : null null : null
} }
onBlur={(event) => { onBlur={(event) => {
baseHelperText = calculateHelpertext(event.target.value) baseHelperText = calculateHelpertext(event.target.value)
if (setLastSaved !== undefined) { if (setLastSaved !== undefined) {
setLastSaved(false) setLastSaved(false)
} }
}} }}
/> />
); );
@@ -2003,12 +2003,11 @@ const ParsedAction = (props) => {
datafield = ( datafield = (
<Select <Select
MenuProps={{ MenuProps={{
disableScrollLock: true, disableScrollLock: true,
}} }}
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
value={selectedActionParameters[count].value} value={selectedActionParameters[count].value}
@@ -2587,7 +2586,6 @@ const ParsedAction = (props) => {
labelId="action-autocompleter" labelId="action-autocompleter"
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
onClose={() => { onClose={() => {
@@ -2680,6 +2678,62 @@ const ParsedAction = (props) => {
return null; 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 CustomPopper = function (props) {
// const classes = useStyles() // const classes = useStyles()
// return <Popper {...props} className={classes.root} placement="bottom" /> // return <Popper {...props} className={classes.root} placement="bottom" />
@@ -2906,7 +2960,6 @@ const ParsedAction = (props) => {
}} }}
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
> >
@@ -2941,6 +2994,7 @@ const ParsedAction = (props) => {
<div style={{flex: 5}}> <div style={{flex: 5}}>
<Typography style={{color: "rgba(255,255,255,0.7)"}}>Name</Typography> <Typography style={{color: "rgba(255,255,255,0.7)"}}>Name</Typography>
<TextField <TextField
style={theme.palette.textFieldStyle} style={theme.palette.textFieldStyle}
InputProps={{ InputProps={{
style: theme.palette.innerTextfieldStyle, style: theme.palette.innerTextfieldStyle,
@@ -3227,8 +3281,7 @@ const ParsedAction = (props) => {
} }
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10, maxWidth: 250,
maxWidth: 250,
}, },
}} }}
fullWidth fullWidth
@@ -3329,7 +3382,6 @@ const ParsedAction = (props) => {
} }
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
fullWidth fullWidth
@@ -3375,9 +3427,9 @@ const ParsedAction = (props) => {
<div style={{ marginTop: "20px" }}> <div style={{ marginTop: "20px" }}>
<Typography>Execution variable (optional)</Typography> <Typography>Execution variable (optional)</Typography>
<Select <Select
MenuProps={{ MenuProps={{
disableScrollLock: true, disableScrollLock: true,
}} }}
value={ value={
selectedAction.execution_variable !== undefined selectedAction.execution_variable !== undefined
&& selectedAction.execution_variable !== null && selectedAction.execution_variable !== null
@@ -3389,7 +3441,6 @@ const ParsedAction = (props) => {
} }
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
fullWidth fullWidth
@@ -3458,20 +3509,20 @@ const ParsedAction = (props) => {
autoHighlight autoHighlight
value={selectedAction} value={selectedAction}
classes={{ inputRoot: classes.inputRoot }} classes={{ inputRoot: classes.inputRoot }}
groupBy={(option) => { groupBy={(option) => {
// Most popular // Most popular
// Is categorized // Is categorized
// Uncategorized // Uncategorized
return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions"; return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
}} }}
renderGroup={(params) => { renderGroup={(params) => {
return ( return (
<li key={params.key}> <li key={params.key}>
<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography> <Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
<Typography variant="body2">{params.children}</Typography> <Typography variant="body2">{params.children}</Typography>
</li> </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"))} 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={{ ListboxProps={{
style: { style: {
@@ -3509,10 +3560,10 @@ const ParsedAction = (props) => {
// Workaround with event lol // Workaround with event lol
if (newValue !== undefined && newValue !== null) { if (newValue !== undefined && newValue !== null) {
setNewSelectedAction({ setNewSelectedAction({
target: { target: {
value: newValue.name value: newValue.name
} }
}); });
} }
}} }}
renderOption={(props, data, state) => { renderOption={(props, data, state) => {
@@ -3560,100 +3611,87 @@ const ParsedAction = (props) => {
method = "CONNECT" method = "CONNECT"
} }
// FIXME: Should it require a base URL? // FIXME: Should it require a base URL?
if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) { if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {
var extraUrl = "" var extraUrl = ""
const descSplit = data.description.split("\n") const descSplit = data.description.split("\n")
// Last line of descSplit // Last line of descSplit
if (descSplit.length > 0) { if (descSplit.length > 0) {
extraUrl = descSplit[descSplit.length-1] extraUrl = descSplit[descSplit.length-1]
} }
//for (let [line,lineval] in Object.entries(descSplit)) { //for (let [line,lineval] in Object.entries(descSplit)) {
// if (descSplit[line].includes("http") && descSplit[line].includes("://")) { // if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
// const urlsplit = descSplit[line].split("/") // const urlsplit = descSplit[line].split("/")
// try { // try {
// extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/") // extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/")
// } catch (e) { // } catch (e) {
// //console.log("Failed - running with -1") // //console.log("Failed - running with -1")
// extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/") // 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]) // //console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line])
// //break // //break
// } // }
//} //}
if (extraUrl.length > 0) { if (extraUrl.length > 0) {
if (extraUrl.includes(" ")) { if (extraUrl.includes(" ")) {
extraUrl = extraUrl.split(" ")[0] extraUrl = extraUrl.split(" ")[0]
} }
if (extraUrl.includes("#")) { if (extraUrl.includes("#")) {
extraUrl = extraUrl.split("#")[0] extraUrl = extraUrl.split("#")[0]
} }
extraDescription = `${method} ${extraUrl}` extraDescription = `${method} ${extraUrl}`
} else { } else {
//console.log("No url found. Check again :)") //console.log("No url found. Check again :)")
} }
} }
return ( 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) => { renderInput={(params) => {
if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) { if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) {
const prefixes = ["Post", "Put", "Patch"] const prefixes = ["Post", "Put", "Patch"]
for (let [key,keyval] in Object.entries(prefixes)) { for (let [key,keyval] in Object.entries(prefixes)) {
if (params.inputProps.value.startsWith(prefixes[key])) { if (params.inputProps.value.startsWith(prefixes[key])) {
params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1) params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1)
if (params.inputProps.value.length > 1) { if (params.inputProps.value.length > 1) {
params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1) params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1)
}
break
}
}
} }
break
}
}
}
return ( return (
<TextField <TextField
color="primary" data-lpignore="true"
variant="body1" autocomplete="off"
style={{ dataLPIgnore="true"
backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, color="primary"
}} id="checkbox-search"
{...params} variant="body1"
label="Find Actions" style={{
variant="outlined" backgroundColor: theme.palette.inputColor,
/> borderRadius: theme.palette.borderRadius,
}}
{...params}
label="Find Actions"
variant="outlined"
/>
); );
}} }}
/> />
+68 -46
View File
@@ -7647,6 +7647,7 @@ const AngularWorkflow = (defaultprops) => {
zIndex: 1000, zIndex: 1000,
resize: "vertical", resize: "vertical",
overflow: "auto", overflow: "auto",
paddingBottom: 100,
}; };
var rightsidebarStyle = { var rightsidebarStyle = {
@@ -7967,7 +7968,6 @@ const AngularWorkflow = (defaultprops) => {
labelId="action-autocompleter" labelId="action-autocompleter"
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
onClose={() => { onClose={() => {
@@ -9129,7 +9129,6 @@ const AngularWorkflow = (defaultprops) => {
disabled={selectedTrigger.status === "running"} disabled={selectedTrigger.status === "running"}
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
onChange={(e) => { onChange={(e) => {
@@ -9340,7 +9339,7 @@ const AngularWorkflow = (defaultprops) => {
setUpdate(Math.random()); setUpdate(Math.random());
if (e.target.value === undefined || e.target.value === null || e.target.value.id === undefined) { 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 return null
} }
@@ -10163,27 +10162,27 @@ const AngularWorkflow = (defaultprops) => {
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
onChange={(event, newValue) => { 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 // For variables
if (typeof newValue === 'string' && newValue.startsWith("$")) { if (typeof newValue === 'string' && newValue.startsWith("$")) {
parsedinput = { parsedinput = {
target: { target: {
value: { value: {
"name": newValue, "name": newValue,
"id": newValue, "id": newValue,
"actions": [], "actions": [],
"triggers": [], "triggers": [],
} }
} }
} }
} }
handleWorkflowSelectionUpdate(parsedinput) handleWorkflowSelectionUpdate(parsedinput)
}} }}
renderOption={(data, index) => { renderOption={(props, data, state) => {
if (data.id === workflow.id) { if (data.id === workflow.id) {
data = workflow; data = workflow;
} }
@@ -10205,9 +10204,16 @@ const AngularWorkflow = (defaultprops) => {
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: data.id === workflow.id ? "red" : "white", color: data.id === workflow.id ? "red" : "white",
}} }}
key={index}
value={data} value={data}
onClick={() => {
handleWorkflowSelectionUpdate({
target: {
value: data
}
})
}}
> >
<PolylineIcon style={{ marginRight: 8 }} />
{data.name} {data.name}
</MenuItem> </MenuItem>
</Tooltip> </Tooltip>
@@ -10283,7 +10289,7 @@ const AngularWorkflow = (defaultprops) => {
onChange={(event, newValue) => { onChange={(event, newValue) => {
handleSubflowStartnodeSelection({ target: { value: newValue } }) handleSubflowStartnodeSelection({ target: { value: newValue } })
}} }}
renderOption={(action) => { renderOption={(props, action, state) => {
const isParent = getParents(selectedTrigger).find( const isParent = getParents(selectedTrigger).find(
(parent) => parent.id === action.id (parent) => parent.id === action.id
) )
@@ -10301,6 +10307,13 @@ const AngularWorkflow = (defaultprops) => {
} }
}} }}
disabled={isCloud && isParent} disabled={isCloud && isParent}
onClick={() => {
handleSubflowStartnodeSelection({
target: {
value: action
}
})
}}
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: isParent ? "red" : "white", color: isParent ? "red" : "white",
@@ -10319,7 +10332,7 @@ const AngularWorkflow = (defaultprops) => {
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
{...params} {...params}
label="Find your start-node" label="Select a start-node (optional)"
variant="outlined" variant="outlined"
/> />
); );
@@ -10669,9 +10682,6 @@ const AngularWorkflow = (defaultprops) => {
return ( return (
<div style={appApiViewStyle}> <div style={appApiViewStyle}>
<div
style={{ display: "flex", height: "40px", marginBottom: "30px" }}
>
<div style={{ flex: "1" }}> <div style={{ flex: "1" }}>
<h3 style={{ marginBottom: "5px" }}> <h3 style={{ marginBottom: "5px" }}>
{selectedTrigger.app_name}: {selectedTrigger.status} {selectedTrigger.app_name}: {selectedTrigger.status}
@@ -10685,7 +10695,6 @@ const AngularWorkflow = (defaultprops) => {
What are webhooks? What are webhooks?
</a> </a>
</div> </div>
</div>
<Divider <Divider
style={{ style={{
marginBottom: "10px", marginBottom: "10px",
@@ -10770,7 +10779,7 @@ const AngularWorkflow = (defaultprops) => {
// }); // });
//} //}
}} }}
renderOption={(app) => { renderOption={(props, app, state) => {
var appname = app.name.replaceAll("_", " ") var appname = app.name.replaceAll("_", " ")
appname = appname.charAt(0).toUpperCase() + appname.substring(1) appname = appname.charAt(0).toUpperCase() + appname.substring(1)
@@ -10780,7 +10789,19 @@ const AngularWorkflow = (defaultprops) => {
title={appname} title={appname}
placement="left" 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, }}> <div style={{ display: "flex", marginBottom: 0, }}>
<Avatar variant="rounded"> <Avatar variant="rounded">
<img <img
@@ -10793,7 +10814,7 @@ const AngularWorkflow = (defaultprops) => {
{appname} {appname}
</Typography> </Typography>
</div> </div>
</div> </MenuItem>
</Tooltip> </Tooltip>
) )
}} }}
@@ -10817,7 +10838,7 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
: null} : null}
{selectedTrigger.status === "running" ? null : {selectedTrigger.status === "running" ? null :
<div style={{ marginTop: "20px" }}> <div style={{ marginTop: 20 }}>
<Typography>Environment</Typography> <Typography>Environment</Typography>
<Select <Select
MenuProps={{ MenuProps={{
@@ -10827,7 +10848,6 @@ const AngularWorkflow = (defaultprops) => {
disabled={selectedTrigger.status === "running"} disabled={selectedTrigger.status === "running"}
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
fullWidth fullWidth
@@ -11471,9 +11491,6 @@ const AngularWorkflow = (defaultprops) => {
return ( return (
<div style={appApiViewStyle}> <div style={appApiViewStyle}>
<div
style={{ display: "flex", height: "40px", marginBottom: "30px" }}
>
<div style={{ flex: "1" }}> <div style={{ flex: "1" }}>
<h3 style={{ marginBottom: "5px" }}> <h3 style={{ marginBottom: "5px" }}>
{selectedTrigger.app_name} {selectedTrigger.app_name}
@@ -11487,7 +11504,6 @@ const AngularWorkflow = (defaultprops) => {
What is the user input trigger? What is the user input trigger?
</a> </a>
</div> </div>
</div>
<Divider <Divider
style={{ style={{
marginBottom: "10px", marginBottom: "10px",
@@ -11686,19 +11702,18 @@ const AngularWorkflow = (defaultprops) => {
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
height: 50, height: 50,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
marginTop: 15, marginTop: 15,
marginBottom: 15, marginBottom: 15,
}} }}
onChange={(event, newValue) => { onChange={(event, newValue) => {
console.log("Changed autocomplete!") console.log("Changed autocomplete!")
handleWorkflowSelectionUpdate({ target: { value: newValue } }, true) handleWorkflowSelectionUpdate({ target: { value: newValue } }, true)
}} }}
renderOption={(data, index) => { renderOption={(props, data, state) => {
if (data.id === workflow.id) { if (data.id === workflow.id) {
data = workflow; data = workflow;
} }
//key={index}
return ( return (
<Tooltip arrow placement="left" title={ <Tooltip arrow placement="left" title={
<span style={{}}> <span style={{}}>
@@ -11712,12 +11727,18 @@ const AngularWorkflow = (defaultprops) => {
} placement="bottom"> } placement="bottom">
<MenuItem <MenuItem
style={{ style={{
backgroundColor: theme.palette.inputColor,
color: data.id === workflow.id ? "red" : "white", color: data.id === workflow.id ? "red" : "white",
}} }}
key={index}
value={data} value={data}
onClick={() => {
handleWorkflowSelectionUpdate({
target: {
value: data,
}},
true)
}}
> >
<PolylineIcon style={{ marginRight: 8 }} />
{data.name} {data.name}
</MenuItem> </MenuItem>
</Tooltip> </Tooltip>
@@ -11885,7 +11906,6 @@ const AngularWorkflow = (defaultprops) => {
disabled={selectedTrigger.status === "running"} disabled={selectedTrigger.status === "running"}
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
fullWidth fullWidth
@@ -15566,7 +15586,6 @@ const AngularWorkflow = (defaultprops) => {
}} }}
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10,
}, },
}} }}
defaultValue={"false"} defaultValue={"false"}
@@ -16310,7 +16329,10 @@ const AngularWorkflow = (defaultprops) => {
// Make unix timestamp into ISO timestamp in the format July 27th, 3:05 AM // Make unix timestamp into ISO timestamp in the format July 27th, 3:05 AM
// 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" var workflowStatus = revision.status !== undefined && revision.status !== null && revision.status !== "" ? revision.status : "test"
if (revision.name !== undefined && revision.name !== null && revision.name !== "") { if (revision.name !== undefined && revision.name !== null && revision.name !== "") {
@@ -16329,7 +16351,7 @@ const AngularWorkflow = (defaultprops) => {
return ( return (
<Paper <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) => { }} onClick={(e) => {
if (revision.edited === selectedRevision.edited) { if (revision.edited === selectedRevision.edited) {
console.log("Same revision! No setting.") console.log("Same revision! No setting.")
+8
View File
@@ -2939,6 +2939,10 @@ const AppCreator = (defaultprops) => {
color="primary" color="primary"
fullWidth fullWidth
value={oauth2Scopes} value={oauth2Scopes}
onChange={(chips) => {
setOauth2Scopes(chips)
setUpdate(Math.random())
}}
onAdd={(chip) => { onAdd={(chip) => {
oauth2Scopes.push(chip); oauth2Scopes.push(chip);
console.log(oauth2Scopes); console.log(oauth2Scopes);
@@ -4407,6 +4411,10 @@ const AppCreator = (defaultprops) => {
color="primary" color="primary"
fullWidth fullWidth
value={newWorkflowTags} value={newWorkflowTags}
onChange={(chips) => {
setNewWorkflowTags(chips)
setUpdate("added "+chips)
}}
onAdd={(chip) => { onAdd={(chip) => {
newWorkflowTags.push(chip); newWorkflowTags.push(chip);
setNewWorkflowTags(newWorkflowTags); setNewWorkflowTags(newWorkflowTags);
+3
View File
@@ -3250,6 +3250,9 @@ const Workflows = (props) => {
color="primary" color="primary"
fullWidth fullWidth
value={filters} value={filters}
onChange={(chips) => {
setFilters(chips);
}}
onAdd={(chip) => { onAdd={(chip) => {
addFilter(chip); addFilter(chip);
}} }}