From de7d0792671acddccc6a35b5e2f03b8b8890cf1e Mon Sep 17 00:00:00 2001 From: gohil-jay Date: Sat, 13 Nov 2021 17:22:31 +0530 Subject: [PATCH] Updated text field with popping code editor --- docker-compose.yml | 2 +- frontend/src/components/ParsedAction.jsx | 53 +++++-- frontend/src/components/ShuffleCodeEditor.jsx | 132 ++++++++++++++---- frontend/src/views/AngularWorkflow.jsx | 24 ++++ 4 files changed, 164 insertions(+), 47 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 069fedad..edb20333 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -66,7 +66,7 @@ services: - CLEANUP=${SHUFFLE_CONTAINER_AUTO_CLEANUP} restart: unless-stopped opensearch: - image: opensearchproject/opensearch:1.1.0 + image: opensearchproject/opensearch:1.0.0 hostname: shuffle-opensearch container_name: shuffle-opensearch environment: diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 2cf5ea39..5db0a74e 100644 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -58,6 +58,7 @@ const ParsedAction = (props) => { const classes = useStyles() const [expansionModalOpen, setExpansionModalOpen] = React.useState(false); + const [fieldCount, setFieldCount] = React.useState(0); const keywords = ["len(", "lower(", "upper(", "trim(", "split(", "length(", "number(", "parse(", "join("] const getParents = (action) => { @@ -490,9 +491,12 @@ const ParsedAction = (props) => { //setUpdate(event.target.value) } - const changeActionParameterCodemirror = (event, count, data) => { - console.log(event) - if (data.name.startsWith("${") && data.name.endsWith("}")) { + const changeActionParameterCodeMirror = (event, count, data) => { + // console.log(event) + // if (data.name.startsWith("${") && data.name.endsWith("}")) { + // console.log(data) + // console.log(count) + if (data.startsWith("${") && data.endsWith("}")) { // PARAM FIX - Gonna use the ID field, even though it's a hack const paramcheck = selectedAction.parameters.find(param => param.name === "body") if (paramcheck !== undefined) { @@ -542,7 +546,7 @@ const ParsedAction = (props) => { } } - if (event.display.maxLine.text[event.display.maxLine.text.length-1] === "$") { + if (event.target.value[event.target.value.length-1] === "$") { if (!showDropdown) { setShowAutocomplete(false) setShowDropdown(true) @@ -555,7 +559,7 @@ const ParsedAction = (props) => { } // bad detection mechanism probably - if (event.display.maxLine.text[event.display.maxLine.text.length-1] === "." && actionlist.length > 0) { + if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) { console.log("GET THE LAST ARGUMENT FOR NODE!") // THIS IS AN EXAMPLE OF SHOWING IT /* @@ -627,8 +631,8 @@ const ParsedAction = (props) => { } } - selectedActionParameters[count].value = event.display.maxLine.text - selectedAction.parameters[count].value = event.display.maxLine.text + selectedActionParameters[count].value = data + selectedAction.parameters[count].value = data setSelectedAction(selectedAction) //setUpdate(Math.random()) //setUpdate(event.target.value) @@ -841,7 +845,21 @@ const ParsedAction = (props) => { const clickedFieldId = "rightside_field_"+count // + + var datafield = { multiline={multiline} onClick={() => { console.log("Clicked field: ", clickedFieldId) + setFieldCount(count) + setcodedata(data.value) setExpansionModalOpen(true) if (setScrollConfig !== undefined && scrollConfig !== null && scrollConfig !== undefined && scrollConfig.selected !== clickedFieldId) { scrollConfig.selected = clickedFieldId @@ -868,17 +888,17 @@ const ParsedAction = (props) => { id={clickedFieldId} rows={rows} color="primary" - value={codedata} - //defaultValue={data.value} - //height={multiline ? 50 : 150} + // value={codedata} + defaultValue={data.value} + // height={multiline ? 50 : 150} type={placeholder.includes("***") || (data.configuration && (data.name.toLowerCase().includes("api") || data.name.toLowerCase().includes("key") || data.name.toLowerCase().includes("pass"))) ? "password" : "text"} placeholder={placeholder} onChange={(event) => { - changeActionParameter(event, count, data) + // changeActionParameter(event, count, data) }} - + helperText={selectedApp.generated && selectedApp.activated && data.name === "body" ? {openApiHelperText} @@ -1335,6 +1355,7 @@ const ParsedAction = (props) => { */} {datafield} + {shufflecode} {showDropdown && showDropdownNumber === count && data.variant === "STATIC_VALUE" && jsonList.length > 0 ? Autocomplete @@ -1411,14 +1432,16 @@ const ParsedAction = (props) => { const baselabel = selectedAction.label return (
- {} + />} */} {hideExtraTypes === true ? null :
diff --git a/frontend/src/components/ShuffleCodeEditor.jsx b/frontend/src/components/ShuffleCodeEditor.jsx index f4a207d6..4faa1790 100644 --- a/frontend/src/components/ShuffleCodeEditor.jsx +++ b/frontend/src/components/ShuffleCodeEditor.jsx @@ -7,10 +7,12 @@ import 'codemirror/keymap/sublime'; import 'codemirror/theme/gruvbox-dark.css'; const Textfield = (props) => { - + const {fieldCount, setFieldCount} = props + // const {editorData} = props + const {changeActionParameterCodeMirror} = props const {expansionModalOpen, setExpansionModalOpen} = props const {codedata, setcodedata} = props - const [localcodedata, setlocalcodedata] = React.useState("print('Hello')"); + const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata); // const {codelang, setcodelang} = props const theme = useTheme(); @@ -32,30 +34,64 @@ const Textfield = (props) => {
- + + Code Editor + + + Python + + +
+ +
- Code Editor { // setcodedata(value.getValue()) @@ -68,21 +104,55 @@ const Textfield = (props) => { // mode: {codelang}, }} /> - +
+ +
+
+ +
+
) } diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index 8c4558db..a6c81a96 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -1,6 +1,7 @@ import React, {useRef, useState, useEffect, useLayoutEffect} from 'react'; import { useInterval } from 'react-powerhooks'; import { useTheme } from '@material-ui/core/styles'; +import ShuffleCodeEditor from "../components/ShuffleCodeEditor.jsx"; import { v4 as uuidv4 } from 'uuid'; import {Link} from 'react-router-dom'; @@ -169,6 +170,9 @@ const AngularWorkflow = (props) => { selected: "", }) + const [codedata, setcodedata] = React.useState("print('Hello')"); + const [expansionModalOpen, setExpansionModalOpen] = React.useState(false); + const [history, setHistory] = React.useState([]) const [historyIndex, setHistoryIndex] = React.useState(history.length) @@ -7828,6 +7832,12 @@ const AngularWorkflow = (props) => { globalUrl={globalUrl} setSelectedActionEnvironment={setSelectedActionEnvironment} requiresAuthentication={requiresAuthentication} + + // onClick={() => { + // // console.log("Clicked field: ", clickedFieldId) + // setExpansionModalOpen(true) + // } + // } />
) @@ -9439,6 +9449,20 @@ const AngularWorkflow = (props) => { ) + + // const baselabel = selectedAction.label + // return ( + //
+ // {} + //
+ // ) } export default AngularWorkflow