feat: mapping sidebar

keep-ui/app/(keep)/extraction/create-or-update-extraction-rule.tsx

@@ -131,7 +131,7 @@ export default function CreateOrUpdateExtractionRule({
 
   return (
     <form
-      className="py-2"
+      className="py-2 h-full overflow-y-auto"
       onSubmit={editMode ? updateExtraction : addExtraction}
     >
       <Subtitle>Extraction Metadata</Subtitle>

keep-ui/app/(keep)/mapping/create-or-edit-mapping.tsx

@@ -143,7 +143,7 @@ export default function CreateOrEditMapping({ editRule, editCallback }: Props) {
         matchers: selectedLookupAttributes.map((attr) => attr.trim()),
         rows: mappingType === "csv" ? parsedData : null,
       });
-      clearForm();
+      exitEditOrCreateMode();
       mutate();
       toast.success("Mapping created successfully");
     } catch (error) {
@@ -165,16 +165,15 @@ export default function CreateOrEditMapping({ editRule, editCallback }: Props) {
         matchers: selectedLookupAttributes.map((attr) => attr.trim()),
         rows: mappingType === "csv" ? parsedData : null,
       });
-      exitEditMode();
+      exitEditOrCreateMode();
       mutate();
       toast.success("Mapping updated successfully");
     } catch (error) {
       showErrorToast(error, "Failed to update mapping");
     }
   };
 
-  // If the mapping is successfully updated or the user cancels the update we exit the editMode and set the editRule in the mapping.tsx to null.
-  const exitEditMode = async () => {
+  const exitEditOrCreateMode = () => {
     editCallback(null);
     clearForm();
   };
@@ -191,7 +190,10 @@ export default function CreateOrEditMapping({ editRule, editCallback }: Props) {
   };
 
   return (
-    <form className="max-w-lg py-2" onSubmit={editMode ? updateRule : addRule}>
+    <form
+      className="w-full py-2 h-full overflow-y-auto"
+      onSubmit={editMode ? updateRule : addRule}
+    >
       <Subtitle>Mapping Metadata</Subtitle>
       <div className="mt-2.5">
         <Text>
@@ -326,19 +328,15 @@ export default function CreateOrEditMapping({ editRule, editCallback }: Props) {
         </div>
       </div>
       <div className={"space-x-1 flex flex-row justify-end items-center"}>
-        {/*If we are in the editMode we need an extra cancel button option for the user*/}
-        {editMode ? (
-          <Button
-            color="orange"
-            size="xs"
-            variant="secondary"
-            onClick={exitEditMode}
-          >
-            Cancel
-          </Button>
-        ) : (
-          <></>
-        )}
+        <Button
+          color="orange"
+          size="xs"
+          variant="secondary"
+          onClick={exitEditOrCreateMode}
+        >
+          Cancel
+        </Button>
+
         <Button
           disabled={!submitEnabled()}
           color="orange"

keep-ui/app/(keep)/mapping/layout.tsx

@@ -1,12 +1,3 @@
-import { Title, Subtitle } from "@tremor/react";
 export default function Layout({ children }: { children: any }) {
-  return (
-    <main className="p-4 md:p-10 mx-auto max-w-full">
-      <Title>Mapping</Title>
-      <Subtitle>
-        Enrich alerts with more data from Topology, CSV, JSON and YAMLs
-      </Subtitle>
-      {children}
-    </main>
-  );
+  return <main>{children}</main>;
 }

keep-ui/app/(keep)/mapping/mapping.tsx

@@ -1,35 +1,81 @@
 "use client";
-import { Badge, Callout, Card } from "@tremor/react";
+import { Callout, Card, Title, Subtitle } from "@tremor/react";
 import CreateOrEditMapping from "./create-or-edit-mapping";
 import { useMappings } from "utils/hooks/useMappingRules";
 import RulesTable from "./rules-table";
 import { MdWarning } from "react-icons/md";
 import Loading from "@/app/(keep)/loading";
 import { MappingRule } from "./models";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { Button } from "@tremor/react";
+import SidePanel from "@/components/SidePanel";
 
 export default function Mapping() {
   const { data: mappings, isLoading } = useMappings();
 
   // We use this state to pass the rule that needs to be edited between the CreateNewMapping and the RulesTable Component.
   const [editRule, setEditRule] = useState<MappingRule | null>(null);
 
+  const [isSidePanelOpen, setIsSidePanelOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (editRule) {
+      setIsSidePanelOpen(true);
+    }
+  }, [editRule]);
+
+  function handleSidePanelExit(mapping: MappingRule | null) {
+    if (mapping) {
+      setEditRule(mapping);
+    } else {
+      setEditRule(null);
+      setIsSidePanelOpen(false);
+    }
+  }
+
   return (
-    <Card className="mt-10 p-4 md:p-10 mx-auto">
-      <div className="flex divide-x p-2">
-        <div className="w-1/3 pr-2.5">
+    <>
+      <div className="flex flex-row items-center justify-between">
+        <div className="p-4 md:p-4">
+          <Title>Mapping</Title>
+          <Subtitle>
+            Enrich alerts with more data from Topology, CSV, JSON and YAMLs
+          </Subtitle>
+        </div>
+        <div>
+          <Button
+            color="orange"
+            size="xs"
+            type="submit"
+            onClick={() => setIsSidePanelOpen(true)}
+          >
+            + Create Mapping
+          </Button>
+        </div>
+      </div>
+      <Card className="mt-5 p-4 md:p-10 mx-auto">
+        <SidePanel
+          isOpen={isSidePanelOpen}
+          onClose={() => handleSidePanelExit(null)}
+        >
           <h2 className="text-lg">Configure</h2>
           <p className="text-slate-400">
             Add dynamic context to your alerts with mapping rules
           </p>
-          <CreateOrEditMapping editRule={editRule} editCallback={setEditRule} />
-        </div>
+          <CreateOrEditMapping
+            editRule={editRule}
+            editCallback={handleSidePanelExit}
+          />
+        </SidePanel>
 
-        <div className="w-2/3 pl-2.5">
+        <div>
           {isLoading ? (
             <Loading />
           ) : mappings && mappings.length > 0 ? (
-            <RulesTable mappings={mappings} editCallback={setEditRule} />
+            <RulesTable
+              mappings={mappings}
+              editCallback={handleSidePanelExit}
+            />
           ) : (
             <Callout
               color="orange"
@@ -41,7 +87,7 @@ export default function Mapping() {
             </Callout>
           )}
         </div>
-      </div>
-    </Card>
+      </Card>
+    </>
   );
 }