added code editor and component restructure

frontend/src/views/DetectionDashboard.jsx

@@ -4,7 +4,7 @@ import { toast } from "react-toastify";
 import Detection from "./Detection";
 import EditComponent from "./EditRules";
 
-const getSigmaInfo = (globalUrl, setRuleInfo) => {
+const getSigmaInfo = (globalUrl, setRuleInfo, setFolderDisabled) => {
   const url = globalUrl + "/api/v1/files/detection/sigma_rules";
 
   fetch(url, {
@@ -19,7 +19,8 @@ const getSigmaInfo = (globalUrl, setRuleInfo) => {
         if (responseJson["success"] === false) {
           toast("Failed to get sigma rules");
         } else {
-          setRuleInfo(responseJson);
+          setRuleInfo(responseJson.sigma_info);
+          setFolderDisabled(responseJson.folder_disabled);
         }
       })
     )
@@ -33,11 +34,13 @@ const DetectionDashBoard = (props) => {
   const { globalUrl } = props;
   const [ruleInfo, setRuleInfo] = useState([]);
   const [selectedRule, setSelectedRule] = useState(null);
-  const [fileData, setFileData] = useState("")
+  const [fileData, setFileData] = React.useState("");
+ 
+  const [folderDisabled, setFolderDisabled] = useState(false);
 
   useEffect(() => {
-    getSigmaInfo(globalUrl, setRuleInfo);
+    getSigmaInfo(globalUrl, setRuleInfo, setFolderDisabled);
-  }, [globalUrl]);
+  }, [folderDisabled]);
 
   useEffect(() => {
     if (ruleInfo.length > 0) {
@@ -89,7 +92,7 @@ const DetectionDashBoard = (props) => {
 
   return (
     <Container style={{display: "flex"}}>
-      {selectedRule ? (
+      {/* {selectedRule ? (
         <EditComponent
           ruleName={selectedRule.title}
           description={selectedRule.description}
@@ -99,8 +102,8 @@ const DetectionDashBoard = (props) => {
           editedBy={selectedRule.editedBy}
           onSave={handleSave}
         />
-      ) : null}
+      ) : null} */}
-      <Detection globalUrl={globalUrl} ruleInfo={ruleInfo} openEditBar={openEditBar} />
+      <Detection globalUrl={globalUrl} ruleInfo={ruleInfo} folderDisabled={folderDisabled} setFolderDisabled={setFolderDisabled} openEditBar={openEditBar} />
     </Container>
   );  
 };

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;