fixing bugs in rule editing

frontend/src/views/Detection.jsx

@@ -7,7 +7,7 @@ import {
   Typography,
   Button,
 } from "@mui/material";
-import RuleCard from "./RuleCard"; 
+import RuleCard from "./RuleCard";
 import { styled } from "@mui/system";
 
 const ConnectedButton = styled(Button)({
@@ -18,7 +18,7 @@ const ConnectedButton = styled(Button)({
 const Detection = ({ globalUrl, ruleInfo, openEditBar }) => {
   return (
     <Container sx={{ mt: 4 }}>
-      <Box sx={{ border: "1px solid #ccc", borderRadius: 2, p: 3 }}>
+      <Box sx={{ border: "1px solid #ccc", borderRadius: 2, p: 3}}>
         <Box
           sx={{
             display: "flex",
@@ -50,18 +50,28 @@ const Detection = ({ globalUrl, ruleInfo, openEditBar }) => {
             <Switch defaultChecked />
           </Box>
         </Box>
-        {ruleInfo.length > 0 &&
+        <Box
-          ruleInfo.map((card) => (
+          sx={{
-            <RuleCard
+            height: "500px",
-              key={card.file_id}
+            width: "100%",  
-              ruleName={card.title}
+            overflowY: "auto",  
-              description={card.description}
+            border: "1px solid #ddd",
-              file_id={card.file_id}
+            p: 1,
-              globalUrl={globalUrl}
+          }}
-              openEditBar={() => openEditBar(card)}
+        >
-              {...card}
+          {ruleInfo.length > 0 &&
-            />
+            ruleInfo.map((card) => (
-          ))}
+              <RuleCard
+                key={card.file_id}
+                ruleName={card.title}
+                description={card.description}
+                file_id={card.file_id}
+                globalUrl={globalUrl}
+                openEditBar={() => openEditBar(card)}
+                {...card}
+              />
+            ))}
+        </Box>
       </Box>
     </Container>
   );

frontend/src/views/DetectionDashboard.jsx

@@ -39,6 +39,12 @@ const DetectionDashBoard = (props) => {
     getSigmaInfo(globalUrl, setRuleInfo);
   }, [globalUrl]);
 
+  useEffect(() => {
+    if (ruleInfo.length > 0) {
+      openEditBar(ruleInfo[0]);
+    }
+  }, [ruleInfo]);
+
   const openEditBar = (rule) => {
     setSelectedRule(rule);
     getFileContent(rule.file_id)
@@ -50,6 +56,7 @@ const DetectionDashBoard = (props) => {
   };
 
   const getFileContent = (file_id) => {
+    setFileData("");
     fetch(globalUrl + "/api/v1/files/" + file_id + "/content", {
       method: "GET",
       headers: {
@@ -82,10 +89,10 @@ const DetectionDashBoard = (props) => {
   };
 
   return (
-    <Container style={{display: "flex", width: "100%"}}>
+    <Container style={{display: "flex"}}>
       {selectedRule ? (
         <EditComponent
-          ruleName={selectedRule.ruleName}
+          ruleName={selectedRule.title}
           description={selectedRule.description}
           content={fileData}
           setContent={setFileData}

frontend/src/views/EditRules.jsx

@@ -8,12 +8,9 @@ const EditComponent = ({ ruleName, description, content, setContent, lastEdited,
   };
 
   return (
-    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: 2, width: '100%' }}>
+    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: 2, height: '100%', width: '100%', marginTop:'30px'}}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-      <Typography variant="body2" style={{ marginTop: '2%' }}>{ruleName}</Typography>
+      <Typography variant="h6">{ruleName}</Typography>
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Switch checked={true} />
-        </Box>
       </Box>
       <Typography variant="body2" style={{ marginTop: '2%' }}>
           {description}