added new file editor

backend/go-app/main.go

@@ -6086,7 +6086,8 @@ func initHandlers() {
 	r.HandleFunc("/api/v1/files/namespaces/{namespace}", shuffle.HandleGetFileNamespace).Methods("GET", "OPTIONS")
 	r.HandleFunc("/api/v1/files/{fileId}/content", shuffle.HandleGetFileContent).Methods("GET", "OPTIONS")
 	r.HandleFunc("/api/v1/files/create", shuffle.HandleCreateFile).Methods("POST", "OPTIONS")
-	r.HandleFunc("/api/v1/files/{fileId}/upload", shuffle.HandleUploadFile).Methods("POST", "OPTIONS")
+	r.HandleFunc("/api/v1/files/{fileId}/upload", shuffle.HandleUploadFile).Methods("POST", "OPTIONS", "PATCH")
+	r.HandleFunc("/api/v1/files/{fileId}/edit", shuffle.HandleEditFile).Methods("PUT", "OPTIONS")
 	r.HandleFunc("/api/v1/files/{fileId}", shuffle.HandleGetFileMeta).Methods("GET", "OPTIONS")
 	r.HandleFunc("/api/v1/files/{fileId}", shuffle.HandleDeleteFile).Methods("DELETE", "OPTIONS")
 	r.HandleFunc("/api/v1/files", shuffle.HandleGetFiles).Methods("GET", "OPTIONS")

frontend/src/components/ShuffleCodeEditor.jsx

@@ -23,7 +23,7 @@ import {
 } from "@material-ui/icons";
 
 import {
-	AutoFixHigh as AutoFixHighIcon, CompressOutlined,
+	AutoFixHigh as AutoFixHighIcon, CompressOutlined, QrCodeScannerOutlined,
 } from '@mui/icons-material';
 
 import { useTheme } from '@material-ui/core/styles';
@@ -37,6 +37,7 @@ import 'codemirror/addon/selection/mark-selection.js'
 import 'codemirror/theme/gruvbox-dark.css';
 import 'codemirror/theme/duotone-light.css';
 import { padding, textAlign } from '@mui/system';
+import data from '../frameworkStyle.jsx';
 
 const liquidFilters = [
 	{"name": "Size", "value": "size", "example": ""},
@@ -54,7 +55,7 @@ const pythonFilters = [
 ]
 
 const CodeEditor = (props) => {
-	const { fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata } = props
+	const { fieldCount, setFieldCount, actionlist, changeActionParameterCodeMirror, expansionModalOpen, setExpansionModalOpen, codedata, setcodedata, isFileEditor, runUpdateText } = props
 	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
   	// const {codelang, setcodelang} = props
   const theme = useTheme();
@@ -79,11 +80,16 @@ const CodeEditor = (props) => {
 	const mathOpen = Boolean(anchorEl2);
 	const pythonOpen = Boolean(anchorEl3);
 
+	// console.log("is it file editor? - ", isFileEditor);
 
 	useEffect(() => {
 		var allVariables = []
 		var tmpVariables = []
 
+		if (actionlist === undefined || actionlist === null) {
+			return
+		}
+
 		for(var i=0; i < actionlist.length; i++){
 			allVariables.push('$'+actionlist[i].autocomplete.toLowerCase())
 			tmpVariables.push('$'+actionlist[i].autocomplete.toLowerCase())
@@ -366,7 +372,7 @@ const CodeEditor = (props) => {
 			disableEnforceFocus={true}
       //style={{ pointerEvents: "none" }}
 			hideBackdrop={true}
-			open={expansionModalOpen} 
+			open={expansionModalOpen}
 			onClose={() => {
 				console.log("In closer")
 				changeActionParameterCodeMirror({target: {value: ""}}, fieldCount, localcodedata)
@@ -384,6 +390,26 @@ const CodeEditor = (props) => {
 				},
 			}}
 		>
+		{ isFileEditor ? 
+			<div
+			style={{
+				display: 'flex',
+			}}
+		>
+			<div style={{display: "flex"}}>
+				<DialogTitle
+					id="draggable-dialog-title"
+					style={{
+						cursor: "move",
+						paddingBottom:20,
+						paddingLeft: 10, 
+					}}
+				>
+						File Editor
+				</DialogTitle> 
+			</div>
+		</div>	
+			:
 			<div
 				style={{
 					display: 'flex',
@@ -419,8 +445,10 @@ const CodeEditor = (props) => {
 						</Tooltip>
 					</IconButton>
 				</div>
-			</div>
-				
+			</div>   }
+
+		
+			{ isFileEditor ? null :
 			<div style={{display: "flex"}}>
 				<Button
 					id="basic-button"
@@ -526,8 +554,8 @@ const CodeEditor = (props) => {
 							}}>{item.name}</MenuItem>
 						)
 					})}
-				</Menu>
-			</div>
+				</Menu> 
+			</div> }
 			<span style={{
 				border: `2px solid ${theme.palette.inputColor}`,
 				borderRadius: theme.palette.borderRadius,
@@ -535,7 +563,7 @@ const CodeEditor = (props) => {
 			}}>
 				<CodeMirror
 					value = {localcodedata}
-					height="200px"
+					height=	{isFileEditor ? "450px" : "200px"}
 					style={{
 					}}
 					onCursorActivity = {(value) => {
@@ -695,7 +723,7 @@ const CodeEditor = (props) => {
 				*/}
 
 			</div>
-
+				{isFileEditor ? null :
 			<div>
 				{isMobile ? null : 
 					<DialogTitle
@@ -765,11 +793,12 @@ const CodeEditor = (props) => {
 				>
 					JSON Validation: {validation ? "Correct" : "Incorrect"}
 				</p>
-			</div>
+			</div> }
 
 			<div
 				style={{
 					display: 'flex',
+					paddingTop : 30, // maybe handle this as well?
 				}}
 			>
 				<button
@@ -784,7 +813,7 @@ const CodeEditor = (props) => {
 						cursor: "pointer"
 					}}
 					onClick={() => {
-						setExpansionModalOpen(false)
+						setExpansionModalOpen(false);
 					}}
 				>
 					Cancel
@@ -794,6 +823,7 @@ const CodeEditor = (props) => {
 						color: "white",
 						background: "#f85a3e",
 						border: "none",
+
 						height: 35,
 						flex: 1, 
 						marginLeft: 10,
@@ -803,9 +833,15 @@ const CodeEditor = (props) => {
 					onClick={(event) => {
 						// console.log(codedata)
 						// console.log(fieldCount)
+						if (isFileEditor === true){
+							runUpdateText(localcodedata);
+							setcodedata(localcodedata);
+							setExpansionModalOpen(false)
+						}
+						else {
 						changeActionParameterCodeMirror(event, fieldCount, localcodedata)
 						setExpansionModalOpen(false)
-						setcodedata(localcodedata)
+						setcodedata(localcodedata)}
 					}}
 				>
 					Done