Wrap CustomButton component with React.forwardRef

app/(prowler)/scans/page.tsx

@@ -11,9 +11,9 @@ import {
 import {
   ColumnGetScans,
   ColumnGetScansSchedule,
-  ColumnProviderScans,
   SkeletonTableScans,
 } from "@/components/scans/table";
+import { ColumnProviderScans } from "@/components/scans/table/provider-scans";
 import { Header } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
 import { SearchParamsProps } from "@/types";
@@ -33,7 +33,7 @@ export default async function Scans({
       <FilterControls search date providers />
       <Spacer y={8} />
 
-      <div className="grid grid-cols-12 items-start gap-6">
+      <div className="grid grid-cols-12 items-start gap-4">
         <div className="col-span-12 lg:col-span-4">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableProviders searchParams={searchParams} />

components/scans/table/index.ts

@@ -1,5 +1,4 @@
 export * from "./column-get-scans";
 export * from "./column-get-scans-schedule";
-export * from "./column-provider-scans";
 export * from "./data-table-row-actions";
 export * from "./skeleton-table-scans";

components/scans/table/provider-scans/column-provider-scans.tsx

@@ -2,11 +2,11 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
-import { AddIcon } from "@/components/icons/Icons";
-import { CustomButton } from "@/components/ui/custom";
 import { EntityInfoShort } from "@/components/ui/entities";
 import { ProviderProps } from "@/types";
 
+import { DataTableRowActions } from "./data-table-row-actions";
+
 const getProviderData = (row: { original: ProviderProps }) => {
   return row.original;
 };
@@ -33,21 +33,7 @@ export const ColumnProviderScans: ColumnDef<ProviderProps>[] = [
     accessorKey: "launchScan",
     header: "Launch Scan",
     cell: ({ row }) => {
-      return (
-        <CustomButton
-          className="w-full"
-          ariaLabel="Start Scan"
-          variant="solid"
-          color="action"
-          size="md"
-          endContent={<AddIcon size={20} />}
-          onPress={() => {
-            console.log(row.original.id);
-          }}
-        >
-          Start
-        </CustomButton>
-      );
+      return <DataTableRowActions row={row} />;
     },
   },
 ];

components/scans/table/provider-scans/data-table-row-actions.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import {
+  AddNoteBulkIcon,
+  DeleteDocumentBulkIcon,
+  EditDocumentBulkIcon,
+} from "@nextui-org/shared-icons";
+import { Row } from "@tanstack/react-table";
+import clsx from "clsx";
+import { useState } from "react";
+
+import { AddIcon } from "@/components/icons";
+import { CustomAlertModal, CustomButton } from "@/components/ui/custom";
+
+// import { EditForm } from "../forms";
+// import { DeleteForm } from "../forms/delete-form";
+
+interface DataTableRowActionsProps<ProviderProps> {
+  row: Row<ProviderProps>;
+}
+const iconClasses =
+  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+
+export function DataTableRowActions<ProviderProps>({
+  row,
+}: DataTableRowActionsProps<ProviderProps>) {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const providerId = (row.original as { id: string }).id;
+  return (
+    <>
+      {/* <CustomAlertModal
+        isOpen={isEditOpen}
+        onOpenChange={setIsEditOpen}
+        title="Edit Provider"
+        description={"Edit the provider details"}
+      >
+        <EditForm
+          providerId={providerId}
+          providerAlias={providerAlias}
+          setIsOpen={setIsEditOpen}
+        />
+      </CustomAlertModal> */}
+      {/* <CustomAlertModal
+        isOpen={isDeleteOpen}
+        onOpenChange={setIsDeleteOpen}
+        title="Are you absolutely sure?"
+        description="This action cannot be undone. This will permanently delete your provider account and remove your data from the server."
+      >
+        <DeleteForm providerId={providerId} setIsOpen={setIsDeleteOpen} />
+      </CustomAlertModal> */}
+
+      <div className="relative flex items-center justify-end gap-2">
+        <Dropdown className="shadow-xl" placement="bottom">
+          <DropdownTrigger>
+            <CustomButton
+              className="w-full"
+              ariaLabel="Start Scan"
+              variant="solid"
+              color="action"
+              size="md"
+              endContent={<AddIcon size={20} />}
+            >
+              Start
+            </CustomButton>
+            {/* <Button radius="full" size="sm" variant="light">
+              bueno
+            </Button> */}
+          </DropdownTrigger>
+          <DropdownMenu
+            closeOnSelect
+            aria-label="Actions"
+            color="default"
+            variant="flat"
+          >
+            <DropdownSection title="Actions">
+              <DropdownItem
+                key="new"
+                description="Check the connection to the provider"
+                shortcut="⌘N"
+                textValue="Check Connection"
+                startContent={<AddNoteBulkIcon className={iconClasses} />}
+              >
+                {/* <CheckConnectionProvider id={providerId} /> */}
+              </DropdownItem>
+              <DropdownItem
+                key="edit"
+                description="Allows you to edit the provider"
+                shortcut="⌘⇧E"
+                textValue="Edit Provider"
+                startContent={<EditDocumentBulkIcon className={iconClasses} />}
+                onClick={() => setIsEditOpen(true)}
+              >
+                Edit Provider
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSection title="Danger zone">
+              <DropdownItem
+                key="delete"
+                className="text-danger"
+                color="danger"
+                description="Delete the provider permanently"
+                textValue="Delete Provider"
+                shortcut="⌘⇧D"
+                startContent={
+                  <DeleteDocumentBulkIcon
+                    className={clsx(iconClasses, "!text-danger")}
+                  />
+                }
+                onClick={() => setIsDeleteOpen(true)}
+              >
+                Delete Provider
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}

components/scans/table/provider-scans/index.ts

@@ -0,0 +1,2 @@
+export * from "./column-provider-scans";
+export * from "./data-table-row-actions";

components/ui/custom/custom-button.tsx

@@ -1,6 +1,7 @@
 import { Button, CircularProgress } from "@nextui-org/react";
 import type { PressEvent } from "@react-types/shared";
 import clsx from "clsx";
+import React from "react";
 
 import { NextUIColors, NextUIVariants } from "@/types";
 
@@ -16,7 +17,7 @@ export const buttonClasses = {
   hover: "hover:shadow-md",
 };
 
-interface ButtonProps {
+interface CustomButtonProps {
   type?: "button" | "submit" | "reset";
   ariaLabel: string;
   ariaDisabled?: boolean;
@@ -48,64 +49,76 @@ interface ButtonProps {
   disabled?: boolean;
   isLoading?: boolean;
   isIconOnly?: boolean;
+  ref?: React.RefObject<HTMLButtonElement>;
 }
 
-export const CustomButton = ({
-  type = "button",
-  ariaLabel,
-  ariaDisabled,
-  className,
-  variant = "solid",
-  color = "primary",
-  onPress,
-  children,
-  startContent,
-  endContent,
-  size = "md",
-  radius = "sm",
-  disabled = false,
-  isLoading = false,
-  isIconOnly,
-  ...props
-}: ButtonProps) => (
-  <Button
-    type={type}
-    aria-label={ariaLabel}
-    aria-disabled={ariaDisabled}
-    onPress={onPress}
-    variant={variant as NextUIVariants}
-    color={color as NextUIColors}
-    className={clsx(
-      buttonClasses.base,
-      {
-        [buttonClasses.primary]: color === "primary",
-        [buttonClasses.secondary]: color === "secondary",
-        [buttonClasses.action]: color === "action",
-        [buttonClasses.dashed]: variant === "dashed",
-        [buttonClasses.transparent]: color === "transparent",
-        [buttonClasses.disabled]: disabled,
-        [buttonClasses.hover]: color !== "transparent" && !disabled,
-      },
+export const CustomButton = React.forwardRef<
+  HTMLButtonElement,
+  CustomButtonProps
+>(
+  (
+    {
+      type = "button",
+      ariaLabel,
+      ariaDisabled,
       className,
-    )}
-    startContent={startContent}
-    endContent={endContent}
-    size={size}
-    radius={radius}
-    spinner={
-      <CircularProgress
-        classNames={{
-          svg: "w-6 h-6 drop-shadow-md",
-          indicator: "stroke-white",
-          track: "stroke-white/10",
-        }}
-        aria-label="Loading..."
-      />
-    }
-    isLoading={isLoading}
-    isIconOnly={isIconOnly}
-    {...props}
-  >
-    {children}
-  </Button>
+      variant = "solid",
+      color = "primary",
+      onPress,
+      children,
+      startContent,
+      endContent,
+      size = "md",
+      radius = "sm",
+      disabled = false,
+      isLoading = false,
+      isIconOnly,
+      ...props
+    },
+    ref,
+  ) => (
+    <Button
+      type={type}
+      aria-label={ariaLabel}
+      aria-disabled={ariaDisabled}
+      onPress={onPress}
+      variant={variant as NextUIVariants}
+      color={color as NextUIColors}
+      className={clsx(
+        buttonClasses.base,
+        {
+          [buttonClasses.primary]: color === "primary",
+          [buttonClasses.secondary]: color === "secondary",
+          [buttonClasses.action]: color === "action",
+          [buttonClasses.dashed]: variant === "dashed",
+          [buttonClasses.transparent]: color === "transparent",
+          [buttonClasses.disabled]: disabled,
+          [buttonClasses.hover]: color !== "transparent" && !disabled,
+        },
+        className,
+      )}
+      startContent={startContent}
+      endContent={endContent}
+      size={size}
+      radius={radius}
+      spinner={
+        <CircularProgress
+          classNames={{
+            svg: "w-6 h-6 drop-shadow-md",
+            indicator: "stroke-white",
+            track: "stroke-white/10",
+          }}
+          aria-label="Loading..."
+        />
+      }
+      ref={ref}
+      isLoading={isLoading}
+      isIconOnly={isIconOnly}
+      {...props}
+    >
+      {children}
+    </Button>
+  ),
 );
+
+CustomButton.displayName = "CustomButton";