marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/EditWorkflow.jsx
+1 -1
View File
@@ -475,7 +475,7 @@ const EditWorkflow = (props) => {
</div>
</DialogContent>
<DialogActions>
<DialogActions style={{paddingRight: 20, }}>
<Button
style={{}}
onClick={() => {
frontend/src/components/ParsedAction.jsx
+154 -116
View File
@@ -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"
/>
);
}}
/>
frontend/src/views/AngularWorkflow.jsx
+68 -46
View File
@@ -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.")
frontend/src/views/AppCreator.jsx
+8
View File
@@ -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
+3
View File
@@ -3250,6 +3250,9 @@ const Workflows = (props) => {
color="primary"
fullWidth
value={filters}
onChange={(chips) => {
setFilters(chips);
}}
onAdd={(chip) => {
addFilter(chip);
}}