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
+70 -32
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 &&
@@ -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
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) => {
@@ -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
+50 -28
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
}
@@ -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
+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);
}}