Fixed cache frontend issues related to editing/viewing
This commit is contained in:
Frikky
@@ -398,7 +398,7 @@ const CacheView = (props) => {
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Value"
|
||||
style={{ minWidth: 400, maxWidth: 400, }}
|
||||
style={{ minWidth: 400, maxWidth: 400, overflowX: "auto", overflowY: "hidden", }}
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Actions"
|
||||
@@ -433,6 +433,8 @@ const CacheView = (props) => {
|
||||
style={{
|
||||
minWidth: 400,
|
||||
maxWidth: 400,
|
||||
overflowX: "auto",
|
||||
overflowY: "hidden",
|
||||
}}
|
||||
primary={validate.valid ?
|
||||
<ReactJson
|
||||
|
||||
@@ -1013,10 +1013,10 @@ const CodeEditor = (props) => {
|
||||
style: {
|
||||
zIndex: 12501,
|
||||
color: "white",
|
||||
minWidth: isMobile ? "100%" : isFileEditor ? 650 : 1100,
|
||||
minWidth: isMobile ? "100%" : isFileEditor ? 650 : 1165,
|
||||
maxWidth: isMobile ? "100%" : isFileEditor ? 650 : 1100,
|
||||
minHeight: isMobile ? "100%" : 620,
|
||||
maxHeight: isMobile ? "100%" : 620,
|
||||
minHeight: isMobile ? "100%" : 700,
|
||||
maxHeight: isMobile ? "100%" : 700,
|
||||
border: theme.palette.defaultBorder,
|
||||
padding: isMobile ? "25px 10px 25px 10px" : 25,
|
||||
},
|
||||
@@ -1308,7 +1308,7 @@ const CodeEditor = (props) => {
|
||||
handleItemClick([innerdata]);
|
||||
}}
|
||||
>
|
||||
<Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition1.top-200, left: menuPosition1.left-270, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
|
||||
<Paper style={{minHeight: 550, maxHeight: 550, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition1.top-200, left: menuPosition1.left-270, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
|
||||
<MenuItem
|
||||
key={innerdata.name}
|
||||
style={{
|
||||
@@ -1508,7 +1508,7 @@ const CodeEditor = (props) => {
|
||||
value={localcodedata}
|
||||
extensions={[python({ py: true })]}
|
||||
height={isFileEditor ? 450 : 450}
|
||||
width={isFileEditor ? 650 : 600}
|
||||
width={isFileEditor ? 650 : 550}
|
||||
style={{
|
||||
maxWidth: isFileEditor ? 450 : 600,
|
||||
maxHeight: 450,
|
||||
@@ -1548,117 +1548,11 @@ const CodeEditor = (props) => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/*editorPopupOpen ?
|
||||
<Paper
|
||||
style={{
|
||||
margin: 10,
|
||||
padding: 10,
|
||||
width: isMobile ? "100%" : 250,
|
||||
height: 95,
|
||||
overflowY: 'auto',
|
||||
// textOverflow: 'ellipsis'
|
||||
}}
|
||||
>
|
||||
{mainVariables.map((data, index) => {
|
||||
// console.log(data)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
// textOverflow: 'ellipsis'
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
replaceVariables(data.substring(1,))
|
||||
// console.log(currentCharacter, currentLine)
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: 7.5,
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
{data.substring(0, 25)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Paper>
|
||||
: null*/}
|
||||
|
||||
<div
|
||||
style={{
|
||||
}}
|
||||
>
|
||||
{/*
|
||||
<Typography
|
||||
variant = 'body2'
|
||||
color = 'textSecondary'
|
||||
style={{
|
||||
color: "white",
|
||||
paddingLeft: 340,
|
||||
width: 50,
|
||||
display: 'inline',
|
||||
}}
|
||||
>
|
||||
Line Wrap
|
||||
<Checkbox
|
||||
onClick={() => {
|
||||
if (linewrap) {
|
||||
setlinewrap(false)
|
||||
}
|
||||
if (!linewrap){
|
||||
setlinewrap(true)
|
||||
}
|
||||
}}
|
||||
defaultChecked
|
||||
size="small"
|
||||
sx={{
|
||||
color: orange[600],
|
||||
'&.Mui-checked': {
|
||||
color: orange[800],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant = 'body2'
|
||||
color = 'textSecondary'
|
||||
style={{
|
||||
color: "white",
|
||||
paddingLeft: 10,
|
||||
width: 100,
|
||||
display: 'inline',
|
||||
}}
|
||||
>
|
||||
Dark Theme
|
||||
<Checkbox
|
||||
onClick={() => {
|
||||
if (codeTheme === "gruvbox-dark") {
|
||||
setcodeTheme("duotone-light")
|
||||
}
|
||||
if (codeTheme === "duotone-light"){
|
||||
setcodeTheme("gruvbox-dark")
|
||||
}
|
||||
}}
|
||||
defaultChecked
|
||||
size="small"
|
||||
sx={{
|
||||
color: orange[600],
|
||||
'&.Mui-checked': {
|
||||
color: orange[800],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
*/}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1673,88 +1567,93 @@ const CodeEditor = (props) => {
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span style={{color: "white"}}>
|
||||
Expected Output
|
||||
</span>
|
||||
|
||||
<Tooltip title="Try it! This runs the Shuffle Tools 'repeat back to me' or 'execute python' action with what you see in the expected output window. Commonly used to test your Python scripts or Liquid filters, not requiring the full workflow to run again." placement="top">
|
||||
<Button
|
||||
variant="outlined"
|
||||
disabled={executing}
|
||||
color="primary"
|
||||
style={{
|
||||
border: `1px solid ${theme.palette.primary.main}`,
|
||||
marginLeft: 175,
|
||||
maxHeight: 35,
|
||||
minWidth: 70,
|
||||
}}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
executeSingleAction(expOutput)
|
||||
}}
|
||||
>
|
||||
{executing ?
|
||||
<CircularProgress style={{height: 18, width: 18, }} />
|
||||
:
|
||||
<span>Try it <PlayArrowIcon style={{height: 18, width: 18, marginBottom: -4, marginLeft: 5, }} /> </span>
|
||||
}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<div>
|
||||
<span style={{color: "white"}}>
|
||||
Expected Output
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</DialogTitle>
|
||||
}
|
||||
|
||||
{isMobile ? null :
|
||||
validation === true ?
|
||||
<ReactJson
|
||||
src={expOutput}
|
||||
theme={theme.palette.jsonTheme}
|
||||
<div style={{position: "relative", }}>
|
||||
<Tooltip title="Try it! This runs the Shuffle Tools 'repeat back to me' or 'execute python' action with what you see in the expected output window. Commonly used to test your Python scripts or Liquid filters, not requiring the full workflow to run again." placement="top">
|
||||
<Button
|
||||
variant="outlined"
|
||||
disabled={executing}
|
||||
color="primary"
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
border: `2px solid ${theme.palette.inputColor}`,
|
||||
padding: 10,
|
||||
maxHeight: 450,
|
||||
minheight: 450,
|
||||
overflow: "auto",
|
||||
}}
|
||||
collapsed={false}
|
||||
enableClipboard={(copy) => {
|
||||
//handleReactJsonClipboard(copy);
|
||||
}}
|
||||
displayDataTypes={false}
|
||||
onSelect={(select) => {
|
||||
var basename = "exec"
|
||||
if (selectedAction !== undefined && selectedAction !== null && Object.keys(selectedAction).length !== 0) {
|
||||
basename = selectedAction.label.toLowerCase().replaceAll(" ", "_")
|
||||
}
|
||||
|
||||
HandleJsonCopy(expOutput, select, basename)
|
||||
}}
|
||||
name={"JSON autocompletion"}
|
||||
/>
|
||||
:
|
||||
<p
|
||||
id='expOutput'
|
||||
style={{
|
||||
whiteSpace: "pre-wrap",
|
||||
color: "#ebdbb2",
|
||||
fontFamily: "monospace",
|
||||
backgroundColor: "#282828",
|
||||
padding: 10,
|
||||
marginTop: -2,
|
||||
border: `2px solid ${theme.palette.inputColor}`,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
maxHeight: 450,
|
||||
minHeight: 450,
|
||||
minWidth: 480,
|
||||
maxWidth: 480,
|
||||
overflow: "auto",
|
||||
whiteSpace: "pre-wrap",
|
||||
border: `1px solid ${theme.palette.primary.main}`,
|
||||
position: "absolute",
|
||||
top: 10,
|
||||
right: 10,
|
||||
maxHeight: 35,
|
||||
minWidth: 70,
|
||||
}}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
executeSingleAction(expOutput)
|
||||
}}
|
||||
>
|
||||
{expOutput}
|
||||
</p>
|
||||
}
|
||||
{executing ?
|
||||
<CircularProgress style={{height: 18, width: 18, }} />
|
||||
:
|
||||
<span>Try it <PlayArrowIcon style={{height: 18, width: 18, marginBottom: -4, marginLeft: 5, }} /> </span>
|
||||
}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
{isMobile ? null :
|
||||
validation === true ?
|
||||
<ReactJson
|
||||
src={expOutput}
|
||||
theme={theme.palette.jsonTheme}
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
border: `2px solid ${theme.palette.inputColor}`,
|
||||
padding: 10,
|
||||
maxHeight: 450,
|
||||
minheight: 450,
|
||||
overflow: "auto",
|
||||
}}
|
||||
collapsed={false}
|
||||
enableClipboard={(copy) => {
|
||||
//handleReactJsonClipboard(copy);
|
||||
}}
|
||||
displayDataTypes={false}
|
||||
onSelect={(select) => {
|
||||
var basename = "exec"
|
||||
if (selectedAction !== undefined && selectedAction !== null && Object.keys(selectedAction).length !== 0) {
|
||||
basename = selectedAction.label.toLowerCase().replaceAll(" ", "_")
|
||||
}
|
||||
|
||||
HandleJsonCopy(expOutput, select, basename)
|
||||
}}
|
||||
name={"JSON autocompletion"}
|
||||
/>
|
||||
:
|
||||
<p
|
||||
id='expOutput'
|
||||
style={{
|
||||
whiteSpace: "pre-wrap",
|
||||
color: "#ebdbb2",
|
||||
fontFamily: "monospace",
|
||||
backgroundColor: "#282828",
|
||||
padding: 10,
|
||||
marginTop: -2,
|
||||
border: `2px solid ${theme.palette.inputColor}`,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
maxHeight: 450,
|
||||
minHeight: 450,
|
||||
minWidth: 480,
|
||||
maxWidth: "100%",
|
||||
overflow: "auto",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{expOutput}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
{executionResult.valid === true ?
|
||||
<ReactJson
|
||||
@@ -1790,9 +1689,18 @@ const CodeEditor = (props) => {
|
||||
</Typography>
|
||||
</span>
|
||||
:
|
||||
<Typography variant="body2" style={{maxHeight: 150, overflow: "auto", marginTop: 20,}}>
|
||||
No test output yet.
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Typography
|
||||
variant = 'body2'
|
||||
color = 'textSecondary'
|
||||
>
|
||||
Output is based on the last VALID run of the node(s) you are referencing. Only updates when you refresh the Workflow Window.
|
||||
</Typography>
|
||||
<Typography variant="body2" style={{maxHeight: 150, overflow: "auto", marginTop: 20,}}>
|
||||
No test output yet.
|
||||
</Typography>
|
||||
</div>
|
||||
}
|
||||
{executionResult.errors !== undefined && executionResult.errors !== null && executionResult.errors.length > 0 ?
|
||||
<Typography variant="body2" style={{maxHeight: 100, overflow: "auto", color: "#f85a3e",}}>
|
||||
|
||||
Reference in New Issue
Block a user