Updated text field with popping code editor

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:

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) => {
+		const changeActionParameterCodeMirror = (event, count, data) => {
-			console.log(event)
+			// console.log(event)
-			if (data.name.startsWith("${") && data.name.endsWith("}")) {
+			// 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
+			selectedActionParameters[count].value = data
-			selectedAction.parameters[count].value = event.display.maxLine.text
+			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
 						//<TextareaAutosize
 						// <CodeMirror
-						var datafield = 
+
+						const shufflecode = <ShuffleCodeEditor
+							fieldCount = {fieldCount}
+							setFieldCount = {setFieldCount}
+							// editorData = {data.value.valueOf()}
+							changeActionParameterCodeMirror = {changeActionParameterCodeMirror}
+							codedata={codedata}
+							setcodedata={setcodedata}
+							setExpansionModalOpen={setExpansionModalOpen}
+							expansionModalOpen={expansionModalOpen}
+							// codelang={codelang}
+							// setcodelang={setcodelang}
+						/>
+
+						var datafield =
 							<TextField
 								disabled={disabled}
 								style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, border: selectedActionParameters[count].required || selectedActionParameters[count].configuration ? "2px solid #f85a3e" : "", color: "white", width: "100%", fontSize: "1em", }} 
@@ -858,6 +876,8 @@ const ParsedAction = (props) => {
 								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}
+								// value={codedata}
-								//defaultValue={data.value}
+								defaultValue={data.value}
-								//height={multiline ? 50 : 150}
+								// 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" ? 
 									<span style={{color:"white", marginBottom: 5, marginleft: 5,}}>
 										{openApiHelperText}
@@ -1335,6 +1355,7 @@ const ParsedAction = (props) => {
 							*/}
 							</div>	
 							{datafield}
+							{shufflecode}
 							{showDropdown && showDropdownNumber === count && data.variant === "STATIC_VALUE" && jsonList.length > 0 ?
 							  <FormControl fullWidth style={{marginTop: 0}}>
 									<InputLabel id="action-autocompleter" style={{marginLeft: 10, color: "white"}}>Autocomplete</InputLabel>
@@ -1411,14 +1432,16 @@ const ParsedAction = (props) => {
 	const baselabel = selectedAction.label
 	return ( 
 		<div style={appApiViewStyle} id="parsed_action_view">
-			{<ShuffleCodeEditor
+			{/* {<ShuffleCodeEditor
+				count = {count}
+				changeActionParameter = {changeActionParameter}
 				codedata={codedata}
 				setcodedata={setcodedata}
 				setExpansionModalOpen={setExpansionModalOpen}
 				expansionModalOpen={expansionModalOpen}
 				// codelang={codelang}
 				// setcodelang={setcodelang}
-			/>}
+			/>} */}
 			{hideExtraTypes === true ? null : 
 				<span>
 				<div style={{display: "flex", minHeight: 40, marginBottom: 30}}>

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) => {
 			<div
 				style={{
 					display: 'flex',
-					justifyContent: 'right',
 				}}
 			>
-				<button
+				<DialogTitle
 					style={{
-						color: "white",
+						paddingBottom:20,
-						background: "#27292d",
-						border: "2px solid white",
-						borderRadius: '50%',
-						fontSize: 15,
-						width: 40,
-						height: 40,
-						cursor: "pointer"
-					}}
-					onClick={() => {
-						setExpansionModalOpen(false)
 					}}
 				>
-					╳
+					<span
-				</button>
+						style={{
+							color: "white"
+						}}
+					>
+						Code Editor
+					</span>
+					<span
+						style={{
+							backgroundColor: "#f85a3e",
+							padding: 6,
+							paddingBottom: 6,
+							marginLeft: 20,
+							marginBottom: 50,
+							borderRadius: 10,
+							color: "white",
+							fontSize: "75%"
+						}}
+					>
+						Python
+					</span>
+				</DialogTitle>
+				<div
+					style={{
+						width: 60,
+						marginLeft: 320,
+						display: 'flex',
+						justifyContent: 'right',
+					}}
+				>
+					<button
+						style={{
+							color: "white",
+							background: "#27292d",
+							border: "2px solid white",
+							borderRadius: '50%',
+							fontSize: 15,
+							width: 40,
+							height: 40,
+							cursor: "pointer"
+						}}
+						onClick={() => {
+							setExpansionModalOpen(false)
+						}}
+					>
+						╳
+					</button>
+				</div>
 			</div>
-			<DialogTitle><span style={{color: "white"}}>Code Editor</span></DialogTitle>
 			<CodeMirror
-				value = {codedata}
+				value = {localcodedata}
 				height="200px"
 				onChange={(value) => {
 					// setcodedata(value.getValue())
@@ -68,21 +104,55 @@ const Textfield = (props) => {
 					// mode: {codelang},
 				}}
 			/>
-			<button
+			<div
 				style={{
-					color: "white",
+					display: 'flex',
-					background: "#f85a3e",
+					// justifyContent: 'left',
-					border: "none",
-					height: 35,
-					cursor: "pointer"
-				}}
-				onClick={() => {
-                    setcodedata(localcodedata)
-					setExpansionModalOpen(false)
 				}}
 			>
-				DONE
+				<div>
-			</button>
+					<button
+						style={{
+							color: "white",
+							background: "#383b49",
+							border: "none",
+							height: 35,
+							width: 290,
+							marginLeft: 5,
+							marginTop: 20,
+							cursor: "pointer"
+						}}
+						onClick={() => {
+							setExpansionModalOpen(false)
+						}}
+					>
+						CANCEL
+					</button>
+				</div>
+				<div>
+					<button
+						style={{
+							color: "white",
+							background: "#f85a3e",
+							border: "none",
+							height: 35,
+							width: 290,
+							marginLeft: 10,
+							marginTop: 20,
+							cursor: "pointer"
+						}}
+						onClick={(event) => {
+							console.log(codedata)
+							console.log(fieldCount)
+							changeActionParameterCodeMirror(event, fieldCount, localcodedata)
+							setExpansionModalOpen(false)
+							setcodedata(localcodedata)
+						}}
+					>
+						DONE
+					</button>
+				</div>
+			</div>
 		</Dialog>)
 }
 

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)
+						// 	}
+						// }
 					/>
 				</div>
 			)
@@ -9439,6 +9449,20 @@ const AngularWorkflow = (props) => {
 			</ScrollElement>
 		</div>	
 	)
+
+	// const baselabel = selectedAction.label
+	// return ( 
+	// 	<div style={appApiViewStyle} id="parsed_action_view">
+	// 		{<ShuffleCodeEditor
+	// 			codedata={codedata}
+	// 			setcodedata={setcodedata}
+	// 			setExpansionModalOpen={setExpansionModalOpen}
+	// 			expansionModalOpen={expansionModalOpen}
+	// 			// codelang={codelang}
+	// 			// setcodelang={setcodelang}
+	// 		/>}
+	// 	</div>
+	// )
 }
 
 export default AngularWorkflow