added code editor and component restructure

frontend/src/views/RuleCard.jsx

@@ -8,11 +8,22 @@ import {
 } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import { toast } from "react-toastify";
+import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
 
-const RuleCard = ({ ruleName, description, file_id, globalUrl, openEditBar, ...otherProps }) => {
+const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, ...otherProps }) => {
   const [additionalProps, setAdditionalProps] = React.useState(otherProps);
+  const [openCodeEditor, setOpenCodeEditor] = React.useState(false);
+  const [fileData, setFileData] = React.useState("");
+
+  const isCloud =
+  window.location.host === "localhost:3002" ||
+  window.location.host === "shuffler.io";
 
   const handleSwitchChange = (event) => {
+    if(folderDisabled) {
+      toast("enable the directory to enable individual rules");
+      return;
+    }
     const isEnabled = event.target.checked;
     toggleRule(file_id, !isEnabled, globalUrl, () => {
       setAdditionalProps((prevProps) => ({
@@ -21,7 +32,31 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, openEditBar, ...o
       }));
     });
   };
-
+  const UpdateText = (text) =>{
+    fetch(`${globalUrl}/api/v1/files/${file_id}/edit`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body:text,
+      credentials: "include",
+    })
+	.then((response) => {
+        if (response.status !== 200) {
+          console.log("Can't update file");
+        }
+        return response.json();
+    })
+	.then((responseJson) => {
+		if (responseJson.success === true) {
+			toast("Successfully updated file");
+		}
+	})
+    .catch((error) => {
+		toast("Error updating file: " + error.toString());
+	})
+  }
   return (
     <Card variant="outlined" sx={{ mb: 2 }}>
       <CardContent>
@@ -35,11 +70,11 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, openEditBar, ...o
         >
           <Typography variant="h6">{ruleName}</Typography>
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <IconButton onClick={() => openEditBar({ ruleName, description, file_id, ...additionalProps })}>
+            <IconButton onClick={() => openEditBar(file_id, setOpenCodeEditor, setFileData, globalUrl)}>
               <EditIcon />
             </IconButton>
             <Switch
-              checked={additionalProps.is_enabled}
+              checked={additionalProps.is_enabled && !folderDisabled}
               onChange={handleSwitchChange}
             />
           </div>
@@ -47,6 +82,17 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, openEditBar, ...o
         <Typography variant="body2" style={{ marginTop: '2%' }}>
           {description}
         </Typography>
+
+        <ShuffleCodeEditor
+					isCloud={isCloud}
+					expansionModalOpen={openCodeEditor}
+					setExpansionModalOpen={setOpenCodeEditor}
+					setcodedata = {setFileData}
+					codedata={fileData}
+					isFileEditor = {true}
+					key = {fileData} //https://reactjs.org/docs/reconciliation.html#recursing-on-children
+					runUpdateText = {UpdateText}
+				/>
       </CardContent>
     </Card>
   );
@@ -54,7 +100,7 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, openEditBar, ...o
 
 const toggleRule = (fileId, isCurrentlyEnabled, globalUrl, callback) => {
   const action = isCurrentlyEnabled ? "disable" : "enable";
-  const url = `${globalUrl}/api/v1/files/${fileId}/${action}_rule`;
+  const url = `${globalUrl}/api/v1/files/detection/${fileId}/${action}_rule`;
 
   fetch(url, {
     method: "PUT",
@@ -78,5 +124,42 @@ const toggleRule = (fileId, isCurrentlyEnabled, globalUrl, callback) => {
       toast(`An error occurred while ${action}ing the rule`);
     });
 };
+  const openEditBar = (file_id, setOpenCodeEditor, setFileData, globalUrl) => {
+    getFileContent(file_id, setFileData, globalUrl);
+    setOpenCodeEditor(true);
+  };
+
+  const getFileContent = (file_id, setFileData, globalUrl) => {
+    setFileData("");
+    fetch(globalUrl + "/api/v1/files/" + file_id + "/content", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for file :O!");
+          return "";
+        }
+        return response.text();
+      })
+      .then((respdata) => {    
+        if (respdata.length === 0) {
+          toast("Failed getting file. Is it deleted?");
+          return;
+        }
+        return respdata
+      })
+      .then((responseData) => {
+      
+      setFileData(responseData);
+      })
+      .catch((error) => {
+        toast(error.toString());
+      });
+  };
 
 export default RuleCard;