feat: extraction side panel

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

@@ -93,6 +93,7 @@ export default function CreateOrUpdateExtractionRule({
       }),
     });
     if (response.ok) {
+      exitEditOrCreateMode();
       clearForm();
       mutate();
       toast.success("Extraction rule created successfully");
@@ -126,7 +127,7 @@ export default function CreateOrUpdateExtractionRule({
       }
     );
     if (response.ok) {
-      exitEditMode();
+      exitEditOrCreateMode();
       mutate();
       toast.success("Extraction updated successfully");
     } else {
@@ -136,7 +137,7 @@ export default function CreateOrUpdateExtractionRule({
     }
   };
 
-  const exitEditMode = async () => {
+  const exitEditOrCreateMode = async () => {
     editCallback(null);
     clearForm();
   };
@@ -301,19 +302,14 @@ export default function CreateOrUpdateExtractionRule({
         </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)/extraction/extraction.tsx

@@ -1,46 +1,92 @@
 "use client";
-import { Badge, Callout, Card } from "@tremor/react";
+import { Callout, Card, Title, Subtitle } from "@tremor/react";
 import CreateOrUpdateExtractionRule from "./create-or-update-extraction-rule";
 import ExtractionsTable from "./extractions-table";
 import { useExtractions } from "utils/hooks/useExtractionRules";
 import Loading from "@/app/(keep)/loading";
 import { MdWarning } from "react-icons/md";
-import { useState } from "react";
 import { ExtractionRule } from "./model";
+import React, { useEffect, useState } from "react";
+import { Button } from "@tremor/react";
+import SidePanel from "@/components/SidePanel";
 
 export default function Extraction() {
   const { data: extractions, isLoading } = useExtractions();
   const [extractionToEdit, setExtractionToEdit] =
     useState<ExtractionRule | null>(null);
+
+  const [isSidePanelOpen, setIsSidePanelOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (extractionToEdit) {
+      setIsSidePanelOpen(true);
+    }
+  }, [extractionToEdit]);
+
+  function handleSidePanelExit(extraction: ExtractionRule | null) {
+    if (extraction) {
+      setExtractionToEdit(extraction);
+    } else {
+      setExtractionToEdit(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">
-          <CreateOrUpdateExtractionRule
-            extractionToEdit={extractionToEdit}
-            editCallback={setExtractionToEdit}
-          />
+    <>
+      <div className="flex flex-row items-center justify-between">
+        <div className="p-4 md:p-4">
+          <Title>Extractions</Title>
+          <Subtitle>
+            Easily extract more attributes from your alerts using Regex
+          </Subtitle>
         </div>
-        <div className="w-2/3 pl-2.5">
-          {isLoading ? (
-            <Loading />
-          ) : extractions && extractions.length > 0 ? (
-            <ExtractionsTable
-              extractions={extractions}
-              editCallback={setExtractionToEdit}
-            />
-          ) : (
-            <Callout
-              color="orange"
-              title="Extraction rules does not exist"
-              icon={MdWarning}
-            >
-              No extraction rules found. Configure new extraction rule using the
-              extration rules wizard to the left.
-            </Callout>
-          )}
+        <div>
+          <Button
+            color="orange"
+            size="xs"
+            type="submit"
+            onClick={() => setIsSidePanelOpen(true)}
+          >
+            + Create Extraction
+          </Button>
         </div>
       </div>
-    </Card>
+
+      <Card className="mt-5 p-4 md:p-10 mx-auto">
+        <SidePanel
+          isOpen={isSidePanelOpen}
+          onClose={() => handleSidePanelExit(null)}
+        >
+          <div className="pt-6 px-6">
+            <CreateOrUpdateExtractionRule
+              extractionToEdit={extractionToEdit}
+              editCallback={handleSidePanelExit}
+            />
+          </div>
+        </SidePanel>
+        <div className="">
+          <div className="">
+            {isLoading ? (
+              <Loading />
+            ) : extractions && extractions.length > 0 ? (
+              <ExtractionsTable
+                extractions={extractions}
+                editCallback={handleSidePanelExit}
+              />
+            ) : (
+              <Callout
+                color="orange"
+                title="Extraction rules does not exist"
+                icon={MdWarning}
+              >
+                No extraction rules found. Configure new extraction rule using
+                the + Create Extraction
+              </Callout>
+            )}
+          </div>
+        </div>
+      </Card>
+    </>
   );
 }

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

@@ -1,14 +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>Extractions</Title>
-      <Subtitle>
-        Easily extract more attributes from your alerts using Regex
-      </Subtitle>
-
-      {children}
-    </main>
-  );
+  return <main>{children}</main>;
 }

keep-ui/components/SidePanel.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+
+interface SidePanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  panelWidth?: string;
+  overlayOpacity?: string;
+}
+
+const SidePanel: React.FC<SidePanelProps> = ({
+  isOpen,
+  onClose,
+  children,
+  panelWidth = 'w-1/2', // Default width
+  overlayOpacity = 'bg-black/30', // Default overlay opacity
+}) => {
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className={`fixed inset-0 ${overlayOpacity}`} aria-hidden="true" />
+        </Transition.Child>
+        <Transition.Child
+          as={Fragment}
+          enter="transition ease-in-out duration-300 transform"
+          enterFrom="translate-x-full"
+          enterTo="translate-x-0"
+          leave="transition ease-in-out duration-300 transform"
+          leaveFrom="translate-x-0"
+          leaveTo="translate-x-full"
+        >
+          <Dialog.Panel className={`fixed right-0 inset-y-0 ${panelWidth} bg-white z-30 flex flex-col`}>
+            {children}
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition>
+  );
+};
+
+export default SidePanel;