From 3bd84a0efd5a80d3ff1f408b72ff1c9063bcdcba Mon Sep 17 00:00:00 2001
From: Sophia Dao <sophia@prowler.com>
Date: Tue, 16 Jul 2024 15:50:37 -0500
Subject: [PATCH 1/6] feat(modal): Add in modal component v1

---
 app/(prowler)/providers/page.tsx | 24 ++++++++++++-
 components/Navbar.tsx            | 60 --------------------------------
 components/index.ts              |  1 +
 components/ui/modal/Modal.tsx    | 54 ++++++++++++++++++++++++++++
 package.json                     |  1 -
 5 files changed, 78 insertions(+), 62 deletions(-)
 delete mode 100644 components/Navbar.tsx
 create mode 100644 components/ui/modal/Modal.tsx

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index d2e924c571..6a3f11163b 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -1,13 +1,35 @@
+"use client";
+
+import { Button, useDisclosure } from "@nextui-org/react";
 import React from "react";
 
-import { Header } from "@/components";
+import { Header, Modal } from "@/components";
 
 export default function Providers() {
+  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+
+  const onAction = () => {
+    onClose();
+  };
+
   return (
     <>
       <Header title="Providers" icon="tabler:zoom-scan" />
 
       <p>Hi hi from Providers page</p>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        title="Overview Modal"
+        body={
+          <>
+            <p>Modal body content</p>
+          </>
+        }
+        actionText="Save"
+        onAction={onAction}
+      />
     </>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
deleted file mode 100644
index 2471830968..0000000000
--- a/components/Navbar.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-
-import {
-  Link,
-  Navbar as NextUINavbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  NavbarMenu,
-  NavbarMenuItem,
-  NavbarMenuToggle,
-} from "@nextui-org/react";
-import React from "react";
-
-export const Navbar = () => {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-  const menuItems = ["Test Link", "Log Out"];
-
-  return (
-    <NextUINavbar onMenuOpenChange={setIsMenuOpen}>
-      <NavbarContent>
-        <NavbarMenuToggle
-          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-        />
-        <NavbarBrand>
-          <p className="font-bold text-inherit">PROWLER</p>
-        </NavbarBrand>
-      </NavbarContent>
-
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="/">
-            Login
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="/clouds">
-            Cloud Accounts
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="/about">
-            About
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarMenu>
-        {menuItems.map((item, index) => (
-          <NavbarMenuItem key={`${item}-${index}`}>
-            <Link color="foreground" className="w-full" href="#" size="lg">
-              {item}
-            </Link>
-          </NavbarMenuItem>
-        ))}
-      </NavbarMenu>
-    </NextUINavbar>
-  );
-};
diff --git a/components/index.ts b/components/index.ts
index 97ad46bc7f..3b12cae205 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,2 +1,3 @@
 export * from "./ui/header/Header";
+export * from "./ui/modal/Modal";
 export * from "./ui/sidebar";
diff --git a/components/ui/modal/Modal.tsx b/components/ui/modal/Modal.tsx
new file mode 100644
index 0000000000..d450c6e858
--- /dev/null
+++ b/components/ui/modal/Modal.tsx
@@ -0,0 +1,54 @@
+import {
+  Button,
+  Modal as ModalContainer,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@nextui-org/react";
+import React from "react";
+
+interface ModalProps {
+  title: string;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  body: React.ReactNode;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  title,
+  isOpen,
+  onOpenChange,
+  body,
+  actionText,
+  onAction,
+}) => {
+  const hasActionButton = actionText && onAction;
+
+  return (
+    <>
+      <ModalContainer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
+              <ModalBody>{body}</ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                {hasActionButton && (
+                  <Button color="primary" onPress={onAction}>
+                    {actionText}
+                  </Button>
+                )}
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </ModalContainer>
+    </>
+  );
+};
diff --git a/package.json b/package.json
index 3756a3d8e8..7fabe0be89 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@heroicons/react": "^2.1.4",
     "@nextui-org/react": "^2.4.2",
     "@nextui-org/system": "2.2.1",
     "@nextui-org/theme": "2.2.5",

From bfa98646c1df8fb2f72f8f3c87ad0931c50ef500 Mon Sep 17 00:00:00 2001
From: Sophia Dao <sophia@prowler.com>
Date: Tue, 16 Jul 2024 15:51:58 -0500
Subject: [PATCH 2/6] feat(modal): Change name of modal

---
 app/(prowler)/providers/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index 6a3f11163b..60af8b9e49 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -21,7 +21,7 @@ export default function Providers() {
       <Modal
         isOpen={isOpen}
         onOpenChange={onOpenChange}
-        title="Overview Modal"
+        title="Providers Modal"
         body={
           <>
             <p>Modal body content</p>

From ec7df134b48e08ea8930498b1acb9e8a97fa7556 Mon Sep 17 00:00:00 2001
From: Sophia Dao <sophia@prowler.com>
Date: Wed, 17 Jul 2024 12:43:33 -0500
Subject: [PATCH 3/6] feat(modal): make code review changes

---
 components/ui/modal/Modal.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/ui/modal/Modal.tsx b/components/ui/modal/Modal.tsx
index d450c6e858..7c18d750a6 100644
--- a/components/ui/modal/Modal.tsx
+++ b/components/ui/modal/Modal.tsx
@@ -15,6 +15,7 @@ interface ModalProps {
   body: React.ReactNode;
   actionText?: string;
   onAction?: () => void;
+  isDismissable?: boolean;
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -24,12 +25,20 @@ export const Modal: React.FC<ModalProps> = ({
   body,
   actionText,
   onAction,
+  isDismissable = true,
 }) => {
   const hasActionButton = actionText && onAction;
 
   return (
     <>
-      <ModalContainer isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContainer
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        backdrop="blur"
+        isDismissable={isDismissable}
+        isKeyboardDismissDisabled={!isDismissable}
+        hideCloseButton={!isDismissable}
+      >
         <ModalContent>
           {(onClose) => (
             <>

From 7093261f8409cc17e52ddd341254c1f5dafab97c Mon Sep 17 00:00:00 2001
From: Sophia Dao <sophia@prowler.com>
Date: Wed, 17 Jul 2024 12:47:25 -0500
Subject: [PATCH 4/6] feat(modal): Add in prop for Close button text

---
 app/(prowler)/providers/page.tsx | 1 -
 components/ui/modal/Modal.tsx    | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index 60af8b9e49..edb487b987 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -27,7 +27,6 @@ export default function Providers() {
             <p>Modal body content</p>
           </>
         }
-        actionText="Save"
         onAction={onAction}
       />
     </>
diff --git a/components/ui/modal/Modal.tsx b/components/ui/modal/Modal.tsx
index 7c18d750a6..1344ec9ecf 100644
--- a/components/ui/modal/Modal.tsx
+++ b/components/ui/modal/Modal.tsx
@@ -13,6 +13,7 @@ interface ModalProps {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   body: React.ReactNode;
+  onCloseText?: string;
   actionText?: string;
   onAction?: () => void;
   isDismissable?: boolean;
@@ -23,7 +24,8 @@ export const Modal: React.FC<ModalProps> = ({
   isOpen,
   onOpenChange,
   body,
-  actionText,
+  onCloseText = "Close",
+  actionText = "Save",
   onAction,
   isDismissable = true,
 }) => {
@@ -46,7 +48,7 @@ export const Modal: React.FC<ModalProps> = ({
               <ModalBody>{body}</ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>
-                  Close
+                  {onCloseText && onCloseText}
                 </Button>
                 {hasActionButton && (
                   <Button color="primary" onPress={onAction}>

From 1c5859d93cd7904bc18d7e4be2c431ae92a5e0bf Mon Sep 17 00:00:00 2001
From: Sophia Dao <sophia@prowler.com>
Date: Tue, 23 Jul 2024 22:40:54 -0500
Subject: [PATCH 5/6] feat(modal): Use server to pass event handler

---
 app/(prowler)/providers/page.tsx  | 18 +++++++++++-
 components/index.ts               |  2 +-
 components/ui/modal/Modal.tsx     | 14 ++++-----
 components/ui/modal/ModalWrap.tsx | 48 +++++++++++++++++++++++++++++++
 components/ui/modal/index.ts      |  2 ++
 5 files changed, 75 insertions(+), 9 deletions(-)
 create mode 100644 components/ui/modal/ModalWrap.tsx
 create mode 100644 components/ui/modal/index.ts

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index 687eca0ed6..7e876da05d 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -1,7 +1,7 @@
 import { Spacer } from "@nextui-org/react";
 import React from "react";
 
-import { CustomTable, Header } from "@/components";
+import { CustomTable, Header, ModalWrap } from "@/components";
 
 const visibleColumns: string[] = [
   "account",
@@ -15,6 +15,11 @@ const visibleColumns: string[] = [
 ];
 
 export default function Providers() {
+  const onSave = async () => {
+    "use server";
+    // event we want to pass down, ex. console.log("### hello");
+  };
+
   return (
     <>
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
@@ -25,6 +30,17 @@ export default function Providers() {
         selectionMode={"none"}
       />
       <Spacer />
+      <ModalWrap
+        title="Modal Title"
+        body={
+          <>
+            <p>Modal body content</p>
+          </>
+        }
+        actionText="Save"
+        onAction={onSave}
+        triggerText="Open Modal"
+      />
     </>
   );
 }
diff --git a/components/index.ts b/components/index.ts
index cec3a70f4b..8bc5c4d608 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,4 +1,4 @@
 export * from "./ui/header/Header";
-export * from "./ui/modal/Modal";
+export * from "./ui/modal";
 export * from "./ui/sidebar";
 export * from "./ui/table/CustomTable";
diff --git a/components/ui/modal/Modal.tsx b/components/ui/modal/Modal.tsx
index 1344ec9ecf..eabfa171c8 100644
--- a/components/ui/modal/Modal.tsx
+++ b/components/ui/modal/Modal.tsx
@@ -10,12 +10,12 @@ import React from "react";
 
 interface ModalProps {
   title: string;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
   body: React.ReactNode;
-  onCloseText?: string;
+  closeText?: string;
   actionText?: string;
   onAction?: () => void;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
   isDismissable?: boolean;
 }
 
@@ -24,10 +24,10 @@ export const Modal: React.FC<ModalProps> = ({
   isOpen,
   onOpenChange,
   body,
-  onCloseText = "Close",
-  actionText = "Save",
+  closeText,
+  actionText,
   onAction,
-  isDismissable = true,
+  isDismissable,
 }) => {
   const hasActionButton = actionText && onAction;
 
@@ -48,7 +48,7 @@ export const Modal: React.FC<ModalProps> = ({
               <ModalBody>{body}</ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>
-                  {onCloseText && onCloseText}
+                  {closeText && closeText}
                 </Button>
                 {hasActionButton && (
                   <Button color="primary" onPress={onAction}>
diff --git a/components/ui/modal/ModalWrap.tsx b/components/ui/modal/ModalWrap.tsx
new file mode 100644
index 0000000000..d2eca3491f
--- /dev/null
+++ b/components/ui/modal/ModalWrap.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { Button, useDisclosure } from "@nextui-org/react";
+import React from "react";
+
+import { Modal } from "@/components";
+
+interface ModalWrapProps {
+  title: string;
+  body: React.ReactNode;
+  closeText?: string;
+  actionText?: string;
+  onAction?: () => void;
+  triggerText?: string;
+  isDismissable?: boolean;
+}
+
+export const ModalWrap: React.FC<ModalWrapProps> = ({
+  title,
+  body,
+  closeText = "Close",
+  actionText = "Save",
+  onAction,
+  isDismissable = true,
+  triggerText = "Open",
+}) => {
+  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+  const closeOnAction = () => {
+    onAction && onAction();
+    onClose();
+  };
+
+  return (
+    <>
+      <Button onPress={onOpen}>{triggerText}</Button>
+      <Modal
+        title={title}
+        body={body}
+        closeText={closeText}
+        actionText={actionText}
+        onAction={closeOnAction}
+        isDismissable={isDismissable}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      />
+    </>
+  );
+};
diff --git a/components/ui/modal/index.ts b/components/ui/modal/index.ts
new file mode 100644
index 0000000000..c33df2971c
--- /dev/null
+++ b/components/ui/modal/index.ts
@@ -0,0 +1,2 @@
+export * from "./Modal";
+export * from "./ModalWrap";

From 842608afa08134eabbe9e4efbcdef79789740d48 Mon Sep 17 00:00:00 2001
From: Sophia Dao <sophia@prowler.com>
Date: Thu, 25 Jul 2024 09:01:49 -0500
Subject: [PATCH 6/6] feat(modal): Code review feedback

---
 app/(prowler)/providers/page.tsx  |  8 +++----
 components/ui/modal/Modal.tsx     | 40 +++++++++++++++----------------
 components/ui/modal/ModalWrap.tsx | 34 +++++++++++++-------------
 3 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index 7e876da05d..d3cd8c1611 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -31,15 +31,15 @@ export default function Providers() {
       />
       <Spacer />
       <ModalWrap
-        title="Modal Title"
-        body={
+        modalTitle="Modal Title"
+        modalBody={
           <>
             <p>Modal body content</p>
           </>
         }
-        actionText="Save"
+        actionButtonLabel="Save"
         onAction={onSave}
-        triggerText="Open Modal"
+        openButtonLabel="Open Modal"
       />
     </>
   );
diff --git a/components/ui/modal/Modal.tsx b/components/ui/modal/Modal.tsx
index eabfa171c8..ca7754a96e 100644
--- a/components/ui/modal/Modal.tsx
+++ b/components/ui/modal/Modal.tsx
@@ -9,28 +9,28 @@ import {
 import React from "react";
 
 interface ModalProps {
-  title: string;
-  body: React.ReactNode;
-  closeText?: string;
-  actionText?: string;
-  onAction?: () => void;
+  modalTitle: string;
+  modalBody: React.ReactNode;
+  closeButtonLabel?: string;
+  actionButtonLabel?: string;
+  onAction: () => void;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   isDismissable?: boolean;
+  isKeyboardDismissDisabled?: boolean;
+  hideCloseButton?: boolean;
 }
 
 export const Modal: React.FC<ModalProps> = ({
-  title,
+  modalTitle,
+  modalBody,
+  closeButtonLabel,
+  actionButtonLabel,
+  onAction,
   isOpen,
   onOpenChange,
-  body,
-  closeText,
-  actionText,
-  onAction,
   isDismissable,
 }) => {
-  const hasActionButton = actionText && onAction;
-
   return (
     <>
       <ModalContainer
@@ -44,17 +44,17 @@ export const Modal: React.FC<ModalProps> = ({
         <ModalContent>
           {(onClose) => (
             <>
-              <ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
-              <ModalBody>{body}</ModalBody>
+              <ModalHeader className="flex flex-col gap-1">
+                {modalTitle}
+              </ModalHeader>
+              <ModalBody>{modalBody}</ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>
-                  {closeText && closeText}
+                  {closeButtonLabel}
+                </Button>
+                <Button color="primary" onPress={onAction}>
+                  {actionButtonLabel}
                 </Button>
-                {hasActionButton && (
-                  <Button color="primary" onPress={onAction}>
-                    {actionText}
-                  </Button>
-                )}
               </ModalFooter>
             </>
           )}
diff --git a/components/ui/modal/ModalWrap.tsx b/components/ui/modal/ModalWrap.tsx
index d2eca3491f..42318210bf 100644
--- a/components/ui/modal/ModalWrap.tsx
+++ b/components/ui/modal/ModalWrap.tsx
@@ -6,38 +6,38 @@ import React from "react";
 import { Modal } from "@/components";
 
 interface ModalWrapProps {
-  title: string;
-  body: React.ReactNode;
-  closeText?: string;
-  actionText?: string;
-  onAction?: () => void;
-  triggerText?: string;
+  modalTitle: string;
+  modalBody: React.ReactNode;
+  closeButtonLabel?: string;
+  actionButtonLabel?: string;
+  onAction: () => void;
+  openButtonLabel?: string;
   isDismissable?: boolean;
 }
 
 export const ModalWrap: React.FC<ModalWrapProps> = ({
-  title,
-  body,
-  closeText = "Close",
-  actionText = "Save",
+  modalTitle,
+  modalBody,
+  closeButtonLabel = "Close",
+  actionButtonLabel = "Save",
   onAction,
+  openButtonLabel = "Open",
   isDismissable = true,
-  triggerText = "Open",
 }) => {
   const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
   const closeOnAction = () => {
-    onAction && onAction();
+    onAction?.();
     onClose();
   };
 
   return (
     <>
-      <Button onPress={onOpen}>{triggerText}</Button>
+      <Button onPress={onOpen}>{openButtonLabel}</Button>
       <Modal
-        title={title}
-        body={body}
-        closeText={closeText}
-        actionText={actionText}
+        modalTitle={modalTitle}
+        modalBody={modalBody}
+        closeButtonLabel={closeButtonLabel}
+        actionButtonLabel={actionButtonLabel}
         onAction={closeOnAction}
         isDismissable={isDismissable}
         isOpen={isOpen}