Fixed code editor coloring again

This commit is contained in:
frikky
2023-03-23 22:34:19 +01:00
parent 04b626c254
commit 165f6c6f86
8 changed files with 72 additions and 55 deletions
+1 -1
View File
@@ -2597,7 +2597,7 @@ func executeSingleAction(resp http.ResponseWriter, request *http.Request) {
if user.Role == "org-reader" { if user.Role == "org-reader" {
log.Printf("[WARNING] Org-reader doesn't have access to execute single action: %s (%s)", user.Username, user.Id) log.Printf("[WARNING] Org-reader doesn't have access to execute single action: %s (%s)", user.Username, user.Id)
resp.WriteHeader(401) resp.WriteHeader(403)
resp.Write([]byte(`{"success": false, "reason": "Read only user"}`)) resp.Write([]byte(`{"success": false, "reason": "Read only user"}`))
return return
} }
+2 -1
View File
@@ -1,10 +1,11 @@
{ {
"name": "shuffler", "name": "shuffler",
"homepage": "https://shuffler.io", "homepage": "https://shuffler.io",
"version": "1.1.0", "version": "1.1.4",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@babel/core": "^7.15.8", "@babel/core": "^7.15.8",
"@codemirror/commands": "^6.2.2",
"@emotion/is-prop-valid": "^1.1.1", "@emotion/is-prop-valid": "^1.1.1",
"@emotion/react": "^11.7.0", "@emotion/react": "^11.7.0",
"@emotion/styled": "^11.6.0", "@emotion/styled": "^11.6.0",
+2 -1
View File
@@ -35,7 +35,7 @@ import CodeEditor from "../components/ShuffleCodeEditor.jsx";
import theme from "../theme"; import theme from "../theme";
const Files = (props) => { const Files = (props) => {
const { globalUrl, userdata, serverside, selectedOrganization, } = props; const { globalUrl, userdata, serverside, selectedOrganization, isCloud, } = props;
const [files, setFiles] = React.useState([]); const [files, setFiles] = React.useState([]);
const [selectedNamespace, setSelectedNamespace] = React.useState("default"); const [selectedNamespace, setSelectedNamespace] = React.useState("default");
@@ -504,6 +504,7 @@ const Files = (props) => {
/>}</div> />}</div>
<CodeEditor <CodeEditor
isCloud={isCloud}
expansionModalOpen={openEditor} expansionModalOpen={openEditor}
setExpansionModalOpen={setOpenEditor} setExpansionModalOpen={setOpenEditor}
setcodedata = {setFileContent} setcodedata = {setFileContent}
+1 -1
View File
@@ -153,7 +153,7 @@ const AuthenticationOauth2 = (props) => {
"efe4c3fe-84a1-4821-a84f-23a6cfe8e72d", "efe4c3fe-84a1-4821-a84f-23a6cfe8e72d",
"", "",
"https://graph.microsoft.com", "https://graph.microsoft.com",
["Mail.ReadWrite"], ["Mail.ReadWrite", "Mail.Send"],
admin_consent, admin_consent,
); );
} else if (selectedApp.name.toLowerCase() == "gmail") { } else if (selectedApp.name.toLowerCase() == "gmail") {
+3
View File
@@ -166,6 +166,7 @@ const ParsedAction = (props) => {
lastSaved, lastSaved,
setLastSaved, setLastSaved,
setShowVideo, setShowVideo,
toolsAppId,
//expansionModalOpen, //expansionModalOpen,
//setExpansionModalOpen, //setExpansionModalOpen,
} = props; } = props;
@@ -1520,6 +1521,8 @@ const ParsedAction = (props) => {
const shufflecode = fieldCount !== count ? null : const shufflecode = fieldCount !== count ? null :
( (
<ShuffleCodeEditor <ShuffleCodeEditor
isCloud={isCloud}
toolsAppId={toolsAppId}
fieldCount = {fieldCount} fieldCount = {fieldCount}
setFieldCount = {setFieldCount} setFieldCount = {setFieldCount}
actionlist = {actionlist} actionlist = {actionlist}
+53 -45
View File
@@ -49,6 +49,7 @@ import 'codemirror/keymap/sublime';
import 'codemirror/addon/selection/mark-selection.js' import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/theme/gruvbox-dark.css'; import 'codemirror/theme/gruvbox-dark.css';
import 'codemirror/theme/duotone-light.css'; import 'codemirror/theme/duotone-light.css';
import {indentWithTab} from "@codemirror/commands"
import { padding, textAlign } from '@mui/system'; import { padding, textAlign } from '@mui/system';
import data from '../frameworkStyle.jsx'; import data from '../frameworkStyle.jsx';
import { useNavigate, Link, useParams } from "react-router-dom"; import { useNavigate, Link, useParams } from "react-router-dom";
@@ -79,44 +80,45 @@ const pythonFilters = [
{"name": "Handle JSON", "value": `{% python %}\nimport json\njsondata = json.loads(r"""$nodename""")\n{% endpython %}`, "example": ``}, {"name": "Handle JSON", "value": `{% python %}\nimport json\njsondata = json.loads(r"""$nodename""")\n{% endpython %}`, "example": ``},
] ]
const shuffleTheme = createTheme({ //const shuffleTheme = createTheme({
theme: 'dark', // theme: 'dark',
settings: { // settings: {
background: '#282828', // background: '#282828',
foreground: '#282828', // foreground: '#282828',
caret: '#5d00ff', // caret: '#5d00ff',
selection: '#036dd626', // selection: '#036dd626',
selectionMatch: '#036dd626', // selectionMatch: '#036dd626',
lineHighlight: '#8a91991a', // lineHighlight: '#8a91991a',
gutterBackground: '#282828', // gutterBackground: '#282828',
gutterForeground: '#8a919966', // gutterForeground: '#8a919966',
fontSize: 18, // fontSize: 18,
borderRadius: theme.palette.borderRadius, // borderRadius: theme.palette.borderRadius,
border: `2px solid ${theme.palette.inputColor}`, // border: `2px solid ${theme.palette.inputColor}`,
}, // },
styles: [ // styles: [
{ tag: tags.comment, color: '#787b8099' }, // { tag: tags.comment, color: '#787b8099' },
{ tag: tags.variableName, color: '#0080ff' }, // { tag: tags.variableName, color: '#0080ff' },
{ tag: [tags.string, tags.special(tags.brace)], color: '#5c6166' }, // { tag: [tags.string, tags.special(tags.brace)], color: '#5c6166' },
{ tag: tags.number, color: '#5c6166' }, // { tag: tags.number, color: '#5c6166' },
{ tag: tags.bool, color: '#5c6166' }, // { tag: tags.bool, color: '#5c6166' },
{ tag: tags.null, color: '#5c6166' }, // { tag: tags.null, color: '#5c6166' },
{ tag: tags.keyword, color: '#5c6166' }, // { tag: tags.keyword, color: '#5c6166' },
{ tag: tags.operator, color: '#5c6166' }, // { tag: tags.operator, color: '#5c6166' },
{ tag: tags.className, color: '#5c6166' }, // { tag: tags.className, color: '#5c6166' },
{ tag: tags.definition(tags.typeName), color: '#5c6166' }, // { tag: tags.definition(tags.typeName), color: '#5c6166' },
{ tag: tags.typeName, color: '#5c6166' }, // { tag: tags.typeName, color: '#5c6166' },
{ tag: tags.angleBracket, color: '#5c6166' }, // { tag: tags.angleBracket, color: '#5c6166' },
{ tag: tags.tagName, color: '#5c6166' }, // { tag: tags.tagName, color: '#5c6166' },
{ tag: tags.attributeName, color: '#5c6166' }, // { tag: tags.attributeName, color: '#5c6166' },
], // ],
}); //});
const CodeEditor = (props) => { const CodeEditor = (props) => {
const { globalUrl, fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata, isFileEditor, runUpdateText } = props const { globalUrl, fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata, isFileEditor, runUpdateText, toolsAppId } = props
const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata); const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
// const {codelang, setcodelang} = props // const {codelang, setcodelang} = props
const [validation, setValidation] = React.useState(false); const [validation, setValidation] = React.useState(false);
const [expOutput, setExpOutput] = React.useState(" "); const [expOutput, setExpOutput] = React.useState(" ");
const [linewrap, setlinewrap] = React.useState(true); const [linewrap, setlinewrap] = React.useState(true);
@@ -607,8 +609,9 @@ const CodeEditor = (props) => {
} }
// Shuffle Tools 1.2.0 (in most cases?) // Shuffle Tools 1.2.0 (in most cases?)
const appid = "3e2bdf9d5069fe3f4746c29d68785a6a" const appid = toolsAppId !== undefined && toolsAppId !== null && toolsAppId.length > 0 ? toolsAppId : "3e2bdf9d5069fe3f4746c29d68785a6a"
const actiondata = {"description":"Repeats the call parameter","id":"","name":"repeat_back_to_me","label":"","node_type":"","environment":"","sharing":false,"private_id":"","public_id":"","app_id":"3e2bdf9d5069fe3f4746c29d68785a6a","tags":null,"authentication":[],"tested":false,"parameters":[{"description":"The message to repeat","id":"","name":"call","example":"REPEATING: Hello world","value":inputdata,"multiline":true,"options":null,"action_field":"","variant":"STATIC_VALUE","required":true,"configuration":false,"tags":null,"schema":{"type":"string"},"skip_multicheck":false,"value_replace":null,"unique_toggled":false,"autocompleted":false}],"execution_variable":{"description":"","id":"","name":"","value":""},"returns":{"description":"","example":"","id":"","schema":{"type":"string"}},"authentication_id":"","example":"","auth_not_required":false,"source_workflow":"","run_magic_output":false,"run_magic_input":false,"execution_delay":0,"app_name":"Shuffle Tools","app_version":"1.2.0","selectedAuthentication":{}}
const actiondata = {"description":"Repeats the call parameter","id":"","name":"repeat_back_to_me","label":"","node_type":"","environment":"","sharing":false,"private_id":"","public_id":"","app_id": appid,"tags":null,"authentication":[],"tested":false,"parameters":[{"description":"The message to repeat","id":"","name":"call","example":"REPEATING: Hello world","value":inputdata,"multiline":true,"options":null,"action_field":"","variant":"STATIC_VALUE","required":true,"configuration":false,"tags":null,"schema":{"type":"string"},"skip_multicheck":false,"value_replace":null,"unique_toggled":false,"autocompleted":false}],"execution_variable":{"description":"","id":"","name":"","value":""},"returns":{"description":"","example":"","id":"","schema":{"type":"string"}},"authentication_id":"","example":"","auth_not_required":false,"source_workflow":"","run_magic_output":false,"run_magic_input":false,"execution_delay":0,"app_name":"Shuffle Tools","app_version":"1.2.0","selectedAuthentication":{}}
setExecutionResult({ setExecutionResult({
"valid": false, "valid": false,
@@ -618,7 +621,7 @@ const CodeEditor = (props) => {
setExecuting(true) setExecuting(true)
fetch(globalUrl+"/api/v1/apps/"+appid+"/execute", { fetch(`${globalUrl}/api/v1/apps/${appid}/execute`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@@ -1148,18 +1151,19 @@ const CodeEditor = (props) => {
</div> </div>
} }
<span style={{ <span style={{
border: `2px solid ${theme.palette.inputColor}`, border: `2px solid red`,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
position: "relative", position: "relative",
}}> }}>
<CodeMirror <CodeMirror
theme={shuffleTheme}
value = {localcodedata} value = {localcodedata}
height={isFileEditor ? 450 : 700} height={isFileEditor ? 450 : 525}
width={isFileEditor ? 650 : 550} width={isFileEditor ? 650 : 600}
style={{ style={{
maxWidth: isFileEditor ? 450 : 500, maxWidth: isFileEditor ? 450 : 500,
wordBreak: "break-word", wordBreak: "break-word",
marginTop: 0,
paddingTop: 0,
}} }}
onCursorActivity = {(value) => { onCursorActivity = {(value) => {
// console.log(value.getCursor()) // console.log(value.getCursor())
@@ -1182,13 +1186,14 @@ const CodeEditor = (props) => {
// console.log(findIndex(value.getValue())) // console.log(findIndex(value.getValue()))
// highlight_variables(value) // highlight_variables(value)
}} }}
extensions={[indentWithTab]}
options={{ options={{
styleSelectedText: true, styleSelectedText: true,
theme: codeTheme,
keyMap: 'sublime', keyMap: 'sublime',
mode: 'python', mode: validation === true ? "json" : "python",
lineWrapping: true, lineWrapping: linewrap,
//theme: codeTheme,
// mode: {codelang},
}} }}
/> />
</span> </span>
@@ -1360,7 +1365,7 @@ const CodeEditor = (props) => {
id='expOutput' id='expOutput'
style={{ style={{
whiteSpace: "pre-wrap", whiteSpace: "pre-wrap",
color: "#f85a3e", color: "#ebdbb2",
fontFamily: "monospace", fontFamily: "monospace",
backgroundColor: "#282828", backgroundColor: "#282828",
padding: 10, padding: 10,
@@ -1369,7 +1374,10 @@ const CodeEditor = (props) => {
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
maxHeight: 500, maxHeight: 500,
minHeight: 500, minHeight: 500,
minWidth: 500,
maxWidth: 500,
overflow: "auto", overflow: "auto",
whiteSpace: "pre-wrap",
}} }}
> >
{expOutput} {expOutput}
+1
View File
@@ -3519,6 +3519,7 @@ const Admin = (props) => {
const filesView = curTab !== 3 ? null : const filesView = curTab !== 3 ? null :
<Files <Files
isCloud={isCloud}
globalUrl={globalUrl} globalUrl={globalUrl}
userdata={userdata} userdata={userdata}
serverside={serverside} serverside={serverside}
+9 -6
View File
@@ -274,6 +274,7 @@ const AngularWorkflow = (defaultprops) => {
const [cystyle] = useState(cytoscapestyle); const [cystyle] = useState(cytoscapestyle);
const [cy, setCy] = React.useState(); const [cy, setCy] = React.useState();
const [toolsApp, setToolsApp] = React.useState({});
const [currentView, setCurrentView] = React.useState(0); const [currentView, setCurrentView] = React.useState(0);
const [triggerAuthentication, setTriggerAuthentication] = React.useState({}); const [triggerAuthentication, setTriggerAuthentication] = React.useState({});
const [triggerFolders, setTriggerFolders] = React.useState([]); const [triggerFolders, setTriggerFolders] = React.useState([]);
@@ -1701,11 +1702,12 @@ const AngularWorkflow = (defaultprops) => {
return return
} }
// FIXME - handle versions on left bar // Used for e.g. Liquid testing
//handleAppVersioning(responseJson) const foundTools = responseJson.find((app) => app.name === "Shuffle Tools")
//var tmpapps = [] if (foundTools !== undefined && foundTools !== null) {
//tmpapps = tmpapps.concat(getExtraApps()) setToolsApp(foundTools)
//tmpapps = tmpapps.concat(responseJson) }
setApps(responseJson); setApps(responseJson);
if (isCloud) { if (isCloud) {
@@ -12554,9 +12556,10 @@ const AngularWorkflow = (defaultprops) => {
defaultReturn = <ParsedAction defaultReturn = <ParsedAction
id="rightside_subactions" id="rightside_subactions"
files={files} files={files}
setShowVideo={setShowVideo}
isCloud={isCloud} isCloud={isCloud}
getParents={getParents} getParents={getParents}
toolsAppId={toolsApp.id}
setShowVideo={setShowVideo}
actionDelayChange={actionDelayChange} actionDelayChange={actionDelayChange}
getAppAuthentication={getAppAuthentication} getAppAuthentication={getAppAuthentication}
appAuthentication={appAuthentication} appAuthentication={appAuthentication}