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

Fixed cache frontend issues related to editing/viewing

Browse Source
This commit is contained in:
Frikky
2024-01-30 01:37:46 +01:00
parent 5421a35c57
commit 42e5c7822a
7 changed files with 133 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CacheView.jsx
+3 -1
View File
@@ -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
frontend/src/components/ShuffleCodeEditor.jsx
+98 -190
View File
@@ -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",}}>
frontend/src/views/AngularWorkflow.jsx
+6
View File
@@ -9267,15 +9267,21 @@ const AngularWorkflow = (defaultprops) => {
break
}
const execution = workflowExecutions[executionKey]
if (execution.execution_argument === undefined || execution.execution_argument === null || execution.execution_argument.length < 2) {
continue
}
if (execution.execution_argument.includes("too large ")) {
continue
}
if (availableArguments.includes(execution.execution_argument)) {
continue
}
availableArguments.push(execution.execution_argument)
}
}
frontend/src/views/SettingsPage.jsx
-53
View File
@@ -290,59 +290,6 @@ const Settings = (props) => {
}
};
// const registerProviders = (userdata) => {
// // Register hooks here
// detectEthereumProvider().then((provider) => {
// if (provider) {
// if (!provider.isMetaMask) {
// toast("Only MetaMask is supported as of now.");
// return;
// }
// // Find the ethereum network
// // Get the users' account(s)
// //toast("Connecting to MetaMask")
// //console.log("Connected: ", provider.isConnected())
// if (!provider.isConnected()) {
// toast("Metamask is not connected.");
// return;
// }
// provider.on("message", (event) => {
// toast("Ethereum message: ", event);
// });
// provider.on("chainChanged", (chainId) => {
// console.log("Changed chain to: ", chainId);
// const method = "eth_getBalance";
// const params = [userdata.eth_info.account, "latest"];
// provider
// .request({
// method: method,
// params,
// })
// .then((result) => {
// console.log("Got result: ", result);
// if (result !== undefined && result !== null) {
// userdata.eth_info.balance = result;
// userdata.eth_info.parsed_balance = result / 1000000000000000000;
// console.log("INFO: ", userdata);
// setUserData(userdata);
// } else {
// toast("Couldn't find balance: ", result);
// }
// })
// .catch((error) => {
// // If the request fails, the Promise will reject with an error.
// toast("Failed getting info from ethereum API: " + error);
// });
// });
// }
// });
// };
// This should "always" have data
useEffect(() => {
if (firstrequest) {
frontend/src/views/Workflows.jsx
+20 -10
View File
@@ -1336,16 +1336,21 @@ const Workflows = (props) => {
};
const exportAllWorkflows = (allWorkflows) => {
for (var i = 0; i < allWorkflows.length; i++) {
console.log(allWorkflows[i])
setTimeout(() => {
console.log(allWorkflows[i])
exportWorkflow(allWorkflows[i], false)
}, i * 200);
}
for (var i = 0; i < allWorkflows.length; i++) {
const wf = allWorkflows[i]
toast(`Exporting and keeping original for all ${allWorkflows.length} workflows`);
};
if (wf === undefined || wf.id === undefined) {
continue
}
console.log("Exporting workflow: ", wf)
setTimeout(() => {
exportWorkflow(JSON.parse(JSON.stringify(wf)), false)
}, i * 100);
}
toast(`Exporting and keeping original for all ${allWorkflows.length} workflows`);
}
const deduplicateIds = (data, skip_sanitize) => {
if (data.triggers !== null && data.triggers !== undefined) {
@@ -1498,7 +1503,12 @@ const Workflows = (props) => {
};
const exportWorkflow = (data, sanitize) => {
data = JSON.parse(JSON.stringify(data));
try {
data = JSON.parse(JSON.stringify(data));
} catch (e) {
console.log("Failed to parse JSON: ", e);
}
let exportFileDefaultName = data.name + ".json";
if (sanitize === true) {