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

Fixed most of the textfield and button problems from mui 18. Next is autocomplete

Browse Source
This commit is contained in:
Frikky
2023-08-15 21:58:00 +02:00
parent 2c140d23bd
commit bb8b14be64
4 changed files with 158 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/EditWorkflow.jsx
+53 -40
View File
@@ -26,6 +26,7 @@ import {
Typography, Typography,
Zoom, Zoom,
CircularProgress, CircularProgress,
Drawer,
Dialog, Dialog,
DialogTitle, DialogTitle,
DialogActions, DialogActions,
@@ -58,6 +59,7 @@ const EditWorkflow = (props) => {
const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props
const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
const [submitLoading, setSubmitLoading] = React.useState(false); const [submitLoading, setSubmitLoading] = React.useState(false);
const [showMoreClicked, setShowMoreClicked] = React.useState(false); const [showMoreClicked, setShowMoreClicked] = React.useState(false);
const [innerWorkflow, setInnerWorkflow] = React.useState(workflow) const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
@@ -144,18 +146,17 @@ const EditWorkflow = (props) => {
var total_count = 0 var total_count = 0
return ( return (
<Dialog <Drawer
open={modalOpen} open={modalOpen}
onClose={() => { onClose={() => {
setModalOpen(false); setModalOpen(false);
}} }}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
minWidth: isMobile ? "90%" : 550, minWidth: isMobile ? "90%" : 550,
maxWidth: isMobile ? "90%" : 550, maxWidth: isMobile ? "90%" : 550,
minHeight: 400, minHeight: 400,
//minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550, //minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
//maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550, //maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
}, },
@@ -220,11 +221,11 @@ const EditWorkflow = (props) => {
</DialogTitle> </DialogTitle>
<FormControl> <FormControl>
<DialogContent style={{paddingTop: 10, display: "flex", minHeight: 350, zIndex: 1001, }}> <DialogContent style={{paddingTop: 10, display: "flex", minHeight: 350, zIndex: 1001, }}>
<div style={{minWidth: newWorkflow ? 450 : 500, maxWidth: newWorkflow ? 450 : 500, }}> <div style={{minWidth: newWorkflow ? 450 : 500, maxWidth: newWorkflow ? 450 : 500, }}>
<TextField <TextField
onBlur={(event) => { onChange={(event) => {
setName(event.target.value) setName(event.target.value)
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white", color: "white",
@@ -261,7 +262,7 @@ const EditWorkflow = (props) => {
</div> </div>
<div style={{display: "flex", marginTop: 10, }}> <div style={{display: "flex", marginTop: 10, }}>
<MuiChipsInput <MuiChipsInput
style={{ flex: 1, maxHeight: 40, marginTop: 12, overflow: "auto", }} style={{ flex: 1, maxHeight: 40, }}
InputProps={{ InputProps={{
style: { style: {
color: "white", color: "white",
@@ -271,6 +272,11 @@ const EditWorkflow = (props) => {
color="primary" color="primary"
fullWidth fullWidth
value={newWorkflowTags} value={newWorkflowTags}
onChange={(chip) => {
console.log("Chip: ", chip)
//newWorkflowTags.push(chip);
setNewWorkflowTags(chip);
}}
onAdd={(chip) => { onAdd={(chip) => {
newWorkflowTags.push(chip); newWorkflowTags.push(chip);
setNewWorkflowTags(newWorkflowTags); setNewWorkflowTags(newWorkflowTags);
@@ -486,41 +492,48 @@ const EditWorkflow = (props) => {
<Button <Button
variant="contained" variant="contained"
style={{}} style={{}}
disabled={name.length === 0} disabled={name.length === 0 || submitLoading === true}
onClick={() => { onClick={() => {
innerWorkflow.name = name setSubmitLoading(true)
innerWorkflow.description = description
if (newWorkflowTags.length > 0) {
innerWorkflow.tags = newWorkflowTags
}
if (selectedUsecases.length > 0) { innerWorkflow.name = name
innerWorkflow.usecase_ids = selectedUsecases innerWorkflow.description = description
} if (newWorkflowTags.length > 0) {
innerWorkflow.tags = newWorkflowTags
}
if (dueDate > 0) { if (selectedUsecases.length > 0) {
innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"]+1}-${dueDate["$D"]}`).getTime()/1000 innerWorkflow.usecase_ids = selectedUsecases
} }
if (setNewWorkflow !== undefined) { if (dueDate > 0) {
setNewWorkflow( innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"]+1}-${dueDate["$D"]}`).getTime()/1000
innerWorkflow.name, }
innerWorkflow.description,
innerWorkflow.tags, if (setNewWorkflow !== undefined) {
innerWorkflow.default_return_value, setNewWorkflow(
innerWorkflow, innerWorkflow.name,
newWorkflow, innerWorkflow.description,
innerWorkflow.usecase_ids, innerWorkflow.tags,
innerWorkflow.blogpost, innerWorkflow.default_return_value,
innerWorkflow.status, innerWorkflow,
) newWorkflow,
setWorkflow({}) innerWorkflow.usecase_ids,
} else { innerWorkflow.blogpost,
setWorkflow(innerWorkflow) innerWorkflow.status,
console.log("editing workflow: ", innerWorkflow) )
} setWorkflow({})
} else {
setModalOpen(false) setWorkflow(innerWorkflow)
console.log("editing workflow: ", innerWorkflow)
}
setSubmitLoading(true)
// If new workflow, don't close it
if (isEditing) {
setModalOpen(false)
}
}} }}
color="primary" color="primary"
> >
@@ -528,7 +541,7 @@ const EditWorkflow = (props) => {
</Button> </Button>
</DialogActions> </DialogActions>
</FormControl> </FormControl>
</Dialog> </Drawer>
) )
} }
frontend/src/theme.jsx
+2 -1
View File
@@ -17,8 +17,8 @@ const theme = createTheme(adaptV4Theme({
secondary: "rgba(255,255,255,0.7)", secondary: "rgba(255,255,255,0.7)",
}, },
type: "dark", type: "dark",
surfaceColor: "#27292d",
inputColor: "#383B40", inputColor: "#383B40",
surfaceColor: "#27292d",
platformColor: "#1c1c1d", platformColor: "#1c1c1d",
backgroundColor: "#1a1a1a", backgroundColor: "#1a1a1a",
borderRadius: 5, borderRadius: 5,
@@ -34,6 +34,7 @@ const theme = createTheme(adaptV4Theme({
borderRadius: 5, borderRadius: 5,
}, },
innerTextfieldStyle: { innerTextfieldStyle: {
// Removed since upgrading to mui 18
//color: "white", //color: "white",
//minHeight: 50, //minHeight: 50,
//marginLeft: "5px", //marginLeft: "5px",
frontend/src/views/AngularWorkflow.jsx
+102 -217
View File
@@ -22,6 +22,8 @@ import algoliasearch from 'algoliasearch/lite';
import { import {
Zoom, Zoom,
Fade,
Avatar, Avatar,
Popover, Popover,
TextField, TextField,
@@ -46,7 +48,6 @@ import {
IconButton, IconButton,
Menu, Menu,
Input, Input,
Fade,
FormGroup, FormGroup,
FormControlLabel, FormControlLabel,
Typography, Typography,
@@ -221,9 +222,6 @@ export const triggers = [
]; ];
// is_valid: cloudSyncEnabled || isCloud ? true : false, // is_valid: cloudSyncEnabled || isCloud ? true : false,
const surfaceColor = "#27292D";
const inputColor = "#383B40";
// http://apps.cytoscape.org/apps/yfileslayoutalgorithms // http://apps.cytoscape.org/apps/yfileslayoutalgorithms
cytoscape.use(edgehandles); cytoscape.use(edgehandles);
//cytoscape.use(clipboard); //cytoscape.use(clipboard);
@@ -5899,7 +5897,7 @@ const AngularWorkflow = (defaultprops) => {
maxWidth: isMobile ? 50 : "100%", maxWidth: isMobile ? 50 : "100%",
marginTop: "5px", marginTop: "5px",
color: "white", color: "white",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
cursor: "pointer", cursor: "pointer",
display: "flex", display: "flex",
}; };
@@ -5912,7 +5910,7 @@ const AngularWorkflow = (defaultprops) => {
maxWidth: "100%", maxWidth: "100%",
marginTop: "5px", marginTop: "5px",
color: "white", color: "white",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
cursor: "pointer", cursor: "pointer",
display: "flex", display: "flex",
}; };
@@ -6014,7 +6012,7 @@ const AngularWorkflow = (defaultprops) => {
open={open} open={open}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
}, },
}} }}
onClose={() => { onClose={() => {
@@ -6024,7 +6022,7 @@ const AngularWorkflow = (defaultprops) => {
> >
<MenuItem <MenuItem
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: "white",
}} }}
onClick={() => { onClick={() => {
@@ -6050,7 +6048,7 @@ const AngularWorkflow = (defaultprops) => {
</MenuItem> </MenuItem>
<MenuItem <MenuItem
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: "white",
}} }}
onClick={() => { onClick={() => {
@@ -6259,7 +6257,7 @@ const AngularWorkflow = (defaultprops) => {
<Grid item> <Grid item>
<FavoriteBorderIcon style={iconStyle} /> <FavoriteBorderIcon style={iconStyle} />
</Grid> </Grid>
{isMobile ? null : <Grid item>Variables</Grid>} {isMobile ? null : <Grid item>Vars</Grid>}
</Grid> </Grid>
} }
style={tabStyle} style={tabStyle}
@@ -6992,10 +6990,6 @@ const AngularWorkflow = (defaultprops) => {
style={{ backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, maxWidth: leftBarSize - 20, }} style={{ backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, maxWidth: leftBarSize - 20, }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
fontSize: "1em",
height: 50,
margin: 0,
}, },
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
@@ -7202,18 +7196,13 @@ const AngularWorkflow = (defaultprops) => {
<div style={{ flex: "1" }}> <div style={{ flex: "1" }}>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
marginTop: 5, marginTop: 5,
marginRight: 10, marginRight: 10,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
minHeight: 50,
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
@@ -7254,11 +7243,13 @@ const AngularWorkflow = (defaultprops) => {
delay += 75 delay += 75
return ( return (
runDelay ? runDelay ?
<Zoom key={index} in={true} style={{ transitionDelay: `${delay}ms` }}> <span>
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${delay}ms` }}>*/}
<div> <div>
<ParsedAppPaper key={index} app={app} /> <ParsedAppPaper key={index} app={app} />
</div> </div>
</Zoom> {/*</Zoom>*/}
</span>
: :
<div key={index}> <div key={index}>
{extraMessage} {extraMessage}
@@ -7902,16 +7893,11 @@ const AngularWorkflow = (defaultprops) => {
var datafield = ( var datafield = (
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
minHeight: 50,
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -8068,7 +8054,7 @@ const AngularWorkflow = (defaultprops) => {
return ( return (
<MenuItem <MenuItem
key={data.name} key={data.name}
style={{ backgroundColor: inputColor, color: "white" }} style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
value={data} value={data}
onMouseOver={() => { onMouseOver={() => {
if (data.type === "Execution Argument") { if (data.type === "Execution Argument") {
@@ -8106,7 +8092,7 @@ const AngularWorkflow = (defaultprops) => {
const menuItemStyle = { const menuItemStyle = {
color: "white", color: "white",
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
}; };
const conditionsModal = ( const conditionsModal = (
@@ -8122,7 +8108,7 @@ const AngularWorkflow = (defaultprops) => {
PaperProps={{ PaperProps={{
style: { style: {
pointerEvents: "auto", pointerEvents: "auto",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
minWidth: isMobile ? "90%" : 800, minWidth: isMobile ? "90%" : 800,
border: theme.palette.defaultBorder, border: theme.palette.defaultBorder,
@@ -8227,7 +8213,7 @@ const AngularWorkflow = (defaultprops) => {
anchorEl={variableAnchorEl} anchorEl={variableAnchorEl}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
}, },
}} }}
onClose={() => { onClose={() => {
@@ -8460,7 +8446,7 @@ const AngularWorkflow = (defaultprops) => {
maxWidth: "100%", maxWidth: "100%",
marginTop: "5px", marginTop: "5px",
color: "white", color: "white",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
cursor: "pointer", cursor: "pointer",
display: "flex", display: "flex",
}; };
@@ -8571,7 +8557,7 @@ const AngularWorkflow = (defaultprops) => {
open={open} open={open}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
}, },
}} }}
onClose={() => { onClose={() => {
@@ -8580,7 +8566,7 @@ const AngularWorkflow = (defaultprops) => {
}} }}
> >
<MenuItem <MenuItem
style={{ backgroundColor: inputColor, color: "white" }} style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={() => { onClick={() => {
duplicateCondition(index); duplicateCondition(index);
}} }}
@@ -8589,7 +8575,7 @@ const AngularWorkflow = (defaultprops) => {
{"Duplicate"} {"Duplicate"}
</MenuItem> </MenuItem>
<MenuItem <MenuItem
style={{ backgroundColor: inputColor, color: "white" }} style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
deleteCondition(index); deleteCondition(index);
@@ -9158,7 +9144,7 @@ const AngularWorkflow = (defaultprops) => {
<option <option
key={folder.displayName} key={folder.displayName}
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
fontSize: "1.2em", fontSize: "1.2em",
}} }}
value={folder.displayName} value={folder.displayName}
@@ -9259,16 +9245,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Name</div> <div>Name</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -9281,16 +9262,11 @@ const AngularWorkflow = (defaultprops) => {
Environment: Environment:
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
required required
@@ -10019,16 +9995,11 @@ const AngularWorkflow = (defaultprops) => {
<Typography>Name</Typography> <Typography>Name</Typography>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -10049,11 +10020,7 @@ const AngularWorkflow = (defaultprops) => {
<TextField <TextField
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, maxWidth: 50,
color: "white",
width: 50,
height: 50,
fontSize: "1em",
}} }}
InputProps={{ InputProps={{
style: theme.palette.innerTextfieldStyle, style: theme.palette.innerTextfieldStyle,
@@ -10378,10 +10345,6 @@ const AngularWorkflow = (defaultprops) => {
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
@@ -10440,11 +10403,6 @@ const AngularWorkflow = (defaultprops) => {
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
height: 50,
}, },
}} }}
fullWidth fullWidth
@@ -10525,15 +10483,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Name</div> <div>Name</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
}} }}
multiline multiline
@@ -10552,16 +10506,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Height</div> <div>Height</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -10578,16 +10527,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Width</div> <div>Width</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -10606,16 +10550,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Background</div> <div>Background</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -10632,16 +10571,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Text Color</div> <div>Text Color</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -10658,16 +10592,11 @@ const AngularWorkflow = (defaultprops) => {
<div style={{ marginTop: 15, }}>Background-Image</div> <div style={{ marginTop: 15, }}>Background-Image</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -10769,16 +10698,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Name</div> <div>Name</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -10800,7 +10724,7 @@ const AngularWorkflow = (defaultprops) => {
}, },
}} }}
filterOptions={(options, { inputValue }) => { filterOptions={(options, { inputValue }) => {
//console.log("Option contains?: ", inputValue, options) console.log("Option contains?: ", inputValue, options)
const lowercaseValue = inputValue.toLowerCase() const lowercaseValue = inputValue.toLowerCase()
options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue)) options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
@@ -10928,7 +10852,7 @@ const AngularWorkflow = (defaultprops) => {
setUpdate(Math.random()); setUpdate(Math.random());
}} }}
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: "white",
height: 50, height: 50,
}} }}
@@ -10941,7 +10865,7 @@ const AngularWorkflow = (defaultprops) => {
return ( return (
<MenuItem <MenuItem
key={data} key={data}
style={{ backgroundColor: inputColor, color: "white" }} style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
value={data} value={data}
> >
{data} {data}
@@ -10984,7 +10908,7 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
id="webhook_uri_field" id="webhook_uri_field"
@@ -11009,11 +10933,6 @@ const AngularWorkflow = (defaultprops) => {
} }
InputProps={{ InputProps={{
style: { style: {
color: "white",
height: 50,
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
endAdornment: endAdornment:
<InputAdornment position="end"> <InputAdornment position="end">
@@ -11121,17 +11040,13 @@ const AngularWorkflow = (defaultprops) => {
<div> <div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
id="webhook_uri_header" id="webhook_uri_header"
onClick={() => { }} onClick={() => { }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -11178,17 +11093,13 @@ const AngularWorkflow = (defaultprops) => {
<div style={{ marginBottom: 20, }}> <div style={{ marginBottom: 20, }}>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
id="webhook_uri_header" id="webhook_uri_header"
onClick={() => { }} onClick={() => { }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -11213,7 +11124,7 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
{isCloud && workflow.triggers[selectedTriggerIndex].parameters.length > 4 ? {isCloud && workflow.triggers[selectedTriggerIndex].parameters.length > 4 ?
<FormGroup <FormGroup
style={{ paddingLeft: 10, backgroundColor: inputColor, marginBottom: 50, }} style={{ paddingLeft: 10, backgroundColor: theme.palette.inputColor, marginBottom: 50, }}
row row
> >
<FormControlLabel <FormControlLabel
@@ -11589,16 +11500,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Name</div> <div>Name</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -11611,7 +11517,7 @@ const AngularWorkflow = (defaultprops) => {
Environment: Environment:
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
@@ -11663,16 +11569,11 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
marginTop: "3px",
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -11708,7 +11609,7 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
</div> </div>
<FormGroup <FormGroup
style={{ paddingLeft: 10, backgroundColor: inputColor }} style={{ paddingLeft: 10, backgroundColor: theme.palette.inputColor }}
row row
> >
<FormControlLabel <FormControlLabel
@@ -11844,7 +11745,7 @@ const AngularWorkflow = (defaultprops) => {
workflow.triggers[selectedTriggerIndex].parameters[2].value.includes("email") ? ( workflow.triggers[selectedTriggerIndex].parameters[2].value.includes("email") ? (
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
marginTop: 10, marginTop: 10,
}} }}
@@ -11877,17 +11778,12 @@ const AngularWorkflow = (defaultprops) => {
].parameters[2].value.includes("sms") ? ( ].parameters[2].value.includes("sms") ? (
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
marginTop: 10, marginTop: 10,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -11967,16 +11863,11 @@ const AngularWorkflow = (defaultprops) => {
<div>Name</div> <div>Name</div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -12016,7 +11907,7 @@ const AngularWorkflow = (defaultprops) => {
setUpdate(Math.random()); setUpdate(Math.random());
}} }}
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: "white",
height: 50, height: 50,
}} }}
@@ -12029,7 +11920,7 @@ const AngularWorkflow = (defaultprops) => {
return ( return (
<MenuItem <MenuItem
key={data} key={data}
style={{ backgroundColor: inputColor, color: "white" }} style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
value={data} value={data}
> >
{data} {data}
@@ -12071,16 +11962,11 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
height: 50,
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -12126,16 +12012,11 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
marginTop: "3px",
fontSize: "1em",
}, },
}} }}
disabled={ disabled={
@@ -12562,9 +12443,6 @@ const AngularWorkflow = (defaultprops) => {
id="execution_argument_input_field" id="execution_argument_input_field"
style={theme.palette.textFieldStyle} style={theme.palette.textFieldStyle}
disabled={workflow.public} disabled={workflow.public}
InputProps={{
style: theme.palette.innerTextfieldStyle,
}}
color="secondary" color="secondary"
placeholder={"Execution Argument"} placeholder={"Execution Argument"}
defaultValue={executionText} defaultValue={executionText}
@@ -12986,11 +12864,12 @@ const AngularWorkflow = (defaultprops) => {
{defaultReturn} {defaultReturn}
</SwipeableDrawer> </SwipeableDrawer>
: :
<Fade in={true} style={{ transitionDelay: `$0ms` }}> <span>
{/*<Fade in={true} style={{ transitionDelay: `$0ms` }}>*/}
<div id="rightside_actions" style={rightsidebarStyle}> <div id="rightside_actions" style={rightsidebarStyle}>
{defaultReturn} {defaultReturn}
</div> </div>
</Fade> </span>
); );
//return null; //return null;
@@ -13316,11 +13195,11 @@ const AngularWorkflow = (defaultprops) => {
color: "white", color: "white",
marginBottom: 10, marginBottom: 10,
padding: 5, padding: 5,
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
cursor: "pointer", cursor: "pointer",
display: "flex", display: "flex",
minHeight: 40, minHeight: 50,
maxHeight: 40, maxHeight: 50,
}; };
const parsedExecutionArgument = () => { const parsedExecutionArgument = () => {
@@ -13766,7 +13645,6 @@ const AngularWorkflow = (defaultprops) => {
overflow: "auto", overflow: "auto",
minWidth: isMobile ? "100%" : 420, minWidth: isMobile ? "100%" : 420,
maxWidth: isMobile ? "100%" : 420, maxWidth: isMobile ? "100%" : 420,
backgroundColor: "#1F2023",
color: "white", color: "white",
fontSize: 18, fontSize: 18,
zIndex: 10005, zIndex: 10005,
@@ -13864,7 +13742,8 @@ const AngularWorkflow = (defaultprops) => {
} }
return ( return (
<Zoom key={index} in={true} style={{ transitionDelay: `${executionDelay}ms` }}> <span>
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${executionDelay}ms` }}>*/}
<div> <div>
<Tooltip <Tooltip
key={data.execution_id} key={data.execution_id}
@@ -14020,16 +13899,32 @@ const AngularWorkflow = (defaultprops) => {
</Paper> </Paper>
</Tooltip> </Tooltip>
</div> </div>
</Zoom> </span>
); );
})} })}
</div> </div>
) : ( ) : (
<div>There are no executions yet, or they are not loaded.</div> <div>
<Typography>
There are no executions yet, or they are not loaded.
</Typography>
<Button
variant="contained"
style={{
marginTop: 30,
marginLeft: 50,
}}
onClick={() => {
executeWorkflow(executionText, workflow.start, lastSaved);
}}
>
Test Workflow <PlayArrowIcon style={{marginLeft: 15, }} />
</Button>
</div>
)} )}
</div> </div>
) : ( ) : (
<div style={{ padding: isMobile ? "0px 10px 25px 10px" : "25px 15px 25px 15px", maxWidth: isMobile ? "100%" : 365, overflowX: "hidden" }}> <div style={{ padding: isMobile ? "0px 10px 25px 10px" : "25px 15px 25px 15px", maxWidth: isMobile ? "100%" : 400, overflowX: "hidden" }}>
<Breadcrumbs <Breadcrumbs
aria-label="breadcrumb" aria-label="breadcrumb"
separator="›" separator="›"
@@ -14071,7 +13966,7 @@ const AngularWorkflow = (defaultprops) => {
}} }}
/> />
<div style={{ display: "flex", marginLeft: 10, }}> <div style={{ display: "flex", marginLeft: 10, }}>
<h2>Execution info</h2> <h2>Details</h2>
<Tooltip <Tooltip
color="primary" color="primary"
title="Rerun workflow" title="Rerun workflow"
@@ -14206,7 +14101,7 @@ const AngularWorkflow = (defaultprops) => {
style={{ style={{
backgroundColor: "rgba(255,255,255,0.6)", backgroundColor: "rgba(255,255,255,0.6)",
marginTop: 15, marginTop: 15,
marginBottom: 30, marginBottom: 20,
}} }}
/> />
{executionData.results !== undefined && {executionData.results !== undefined &&
@@ -14241,14 +14136,14 @@ const AngularWorkflow = (defaultprops) => {
executionData.status !== "FAILURE" && executionData.status !== "FAILURE" &&
executionData.status !== "WAITING" && executionData.status !== "WAITING" &&
!(executionData.results === undefined || executionData.results === null || (executionData.results.length === 0 && executionData.status === "EXECUTING")) ? ( !(executionData.results === undefined || executionData.results === null || (executionData.results.length === 0 && executionData.status === "EXECUTING")) ? (
<div style={{ display: "flex" }}> <div style={{}}>
<CircularProgress style={{ height: 45, width: 45, marginLeft: 20, marginRight: 20, }} onClick={() => { <CircularProgress style={{marginLeft: 145, marginBottom: 10, }} onClick={() => {
console.log(environments, defaultEnvironmentIndex, nonskippedResults) console.log(environments, defaultEnvironmentIndex, nonskippedResults)
}} /> }} />
{environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ? {environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
<Typography variant="body2" color="textSecondary" style={{}}> <Typography variant="body2" color="textSecondary" style={{}}>
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=environments" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a> No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=environments" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Find out here</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a>
</Typography> </Typography>
: null} : null}
</div> </div>
@@ -14256,12 +14151,12 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
</div> </div>
{ {
executionData.results === undefined || executionData.results === undefined ||
executionData.results === null || executionData.results === null ||
(executionData.results.length === 0 && executionData.status === "EXECUTING") ? ( (executionData.results.length === 0 && executionData.status === "EXECUTING") ? (
<div style={{ display: "flex" }}> <div style={{}}>
<CircularProgress style={{ height: 45, width: 45, marginLeft: 20, marginRight: 20, }} /> <CircularProgress style={{marginLeft: 145, marginBottom: 10, }} />
{environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ? {environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
<Typography variant="body2" color="textSecondary" style={{}}> <Typography variant="body2" color="textSecondary" style={{}}>
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=environments" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a> No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=environments" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a>
@@ -14755,7 +14650,7 @@ const AngularWorkflow = (defaultprops) => {
PaperProps={{ PaperProps={{
style: { style: {
pointerEvents: "auto", pointerEvents: "auto",
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: "white",
minWidth: isMobile ? "90%" : 650, minWidth: isMobile ? "90%" : 650,
padding: 30, padding: 30,
@@ -15066,7 +14961,8 @@ const AngularWorkflow = (defaultprops) => {
</Typography> </Typography>
</div> </div>
) : ( ) : (
<Fade in={true} timeout={1000} style={{ transitionDelay: `${150}ms` }}> <span>
{/*<Fade in={true} timeout={1000} style={{ transitionDelay: `${150}ms` }}>*/}
<CytoscapeComponent <CytoscapeComponent
elements={elements} elements={elements}
minZoom={0.35} minZoom={0.35}
@@ -15075,7 +14971,7 @@ const AngularWorkflow = (defaultprops) => {
style={{ style={{
width: cytoscapeWidth, width: cytoscapeWidth,
height: bodyHeight - appBarSize - 5, height: bodyHeight - appBarSize - 5,
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
}} }}
stylesheet={cystyle} stylesheet={cystyle}
boxSelectionEnabled={true} boxSelectionEnabled={true}
@@ -15089,7 +14985,7 @@ const AngularWorkflow = (defaultprops) => {
setCy(incy); setCy(incy);
}} }}
/> />
</Fade> </span>
)} )}
</div> </div>
{executionModal} {executionModal}
@@ -15165,7 +15061,7 @@ const AngularWorkflow = (defaultprops) => {
PaperProps={{ PaperProps={{
style: { style: {
pointerEvents: "auto", pointerEvents: "auto",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
border: theme.palette.defaultBorder, border: theme.palette.defaultBorder,
maxWidth: isMobile ? bodyWidth - 100 : 800, maxWidth: isMobile ? bodyWidth - 100 : 800,
@@ -15343,7 +15239,7 @@ const AngularWorkflow = (defaultprops) => {
PaperProps={{ PaperProps={{
style: { style: {
pointerEvents: "auto", pointerEvents: "auto",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
border: theme.palette.defaultBorder, border: theme.palette.defaultBorder,
maxWidth: isMobile ? bodyWidth - 100 : "100%", maxWidth: isMobile ? bodyWidth - 100 : "100%",
@@ -15632,16 +15528,11 @@ const AngularWorkflow = (defaultprops) => {
<b>Name - what is this used for?</b> <b>Name - what is this used for?</b>
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -15714,16 +15605,11 @@ const AngularWorkflow = (defaultprops) => {
) : ( ) : (
<TextField <TextField
style={{ style={{
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
InputProps={{ InputProps={{
style: { style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
}, },
}} }}
fullWidth fullWidth
@@ -15780,7 +15666,6 @@ const AngularWorkflow = (defaultprops) => {
open={configureWorkflowModalOpen} open={configureWorkflowModalOpen}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: surfaceColor,
color: "white", color: "white",
minWidth: 650, minWidth: 650,
border: theme.palette.defaultBorder, border: theme.palette.defaultBorder,
@@ -15844,7 +15729,7 @@ const AngularWorkflow = (defaultprops) => {
PaperProps={{ PaperProps={{
style: { style: {
pointerEvents: "auto", pointerEvents: "auto",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
minWidth: 1100, minWidth: 1100,
minHeight: 700, minHeight: 700,
@@ -15965,7 +15850,7 @@ const AngularWorkflow = (defaultprops) => {
<div <div
style={{ style={{
flex: 3, flex: 3,
borderLeft: `1px solid ${inputColor}`, borderLeft: `1px solid ${theme.palette.inputColor}`,
padding: "70px 30px 30px 30px", padding: "70px 30px 30px 30px",
maxHeight: 630, maxHeight: 630,
minHeight: 630, minHeight: 630,
@@ -15987,7 +15872,7 @@ const AngularWorkflow = (defaultprops) => {
style={{ style={{
marginTop: 25, marginTop: 25,
marginBottom: 25, marginBottom: 25,
backgroundColor: inputColor, backgroundColor: theme.palette.inputColor,
}} }}
/> />
<Typography variant="h6"> <Typography variant="h6">
@@ -16721,7 +16606,7 @@ const AngularWorkflow = (defaultprops) => {
: null} : null}
{/*selectionOpen === true ? {/*selectionOpen === true ?
<div style={{ borderRadius: theme.palette.borderRadius, backgroundColor: surfaceColor, zIndex: 12501,position:"fixed", left: 190, bottom: 20,top:70, width: 950, overflowY: "scroll"}}> <div style={{ borderRadius: theme.palette.borderRadius, backgroundColor: theme.palette.surfaceColor, zIndex: 12501,position:"fixed", left: 190, bottom: 20,top:70, width: 950, overflowY: "scroll"}}>
<div> <div>
<IconButton <IconButton
style={{ style={{
frontend/src/views/Workflows.jsx
+1 -1
View File
@@ -1263,12 +1263,12 @@ const Workflows = (props) => {
overflow: "hidden", overflow: "hidden",
width: "100%", width: "100%",
color: "white", color: "white",
backgroundColor: theme.palette.surfaceColor,
padding: "12px 12px 0px 15px", padding: "12px 12px 0px 15px",
borderRadius: 5, borderRadius: 5,
display: "flex", display: "flex",
boxSizing: "border-box", boxSizing: "border-box",
position: "relative", position: "relative",
backgroundColor: theme.palette.surfaceColor,
}; };
const gridContainer = { const gridContainer = {