Completed Removing Duplicate actions button

Author: brian-kim31

app/next-client-app/app/(protected)/scanreports/[id]/actions-download-menu.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import {
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuGroup
+} from "@/components/ui/dropdown-menu";
+import { FileJson, FileSpreadsheet } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { requestFile } from "@/api/files";
+
+type Props = { scanreportId: string };
+
+export function ActionsDownloadMenu({ scanreportId }: Props) {
+  const router = useRouter();
+
+  const handleDownload = async (fileType: FileTypeFormat) => {
+    const resp = await requestFile(Number(scanreportId), fileType);
+    if (resp.success) {
+      router.push(`/scanreports/${scanreportId}/downloads`);
+      toast.success("File requested.");
+    } else {
+      toast.error(
+        `Error downloading file: ${(resp.errorMessage as any).message}`
+      );
+    }
+  };
+
+  return (
+    <DropdownMenuGroup>
+      <DropdownMenuLabel>Downloads</DropdownMenuLabel>
+      <DropdownMenuItem onSelect={() => handleDownload("application/json")}>
+        <FileJson className="mr-2 size-4" />
+        Mapping JSON
+      </DropdownMenuItem>
+      <DropdownMenuItem onSelect={() => handleDownload("text/csv")}>
+        <FileSpreadsheet className="mr-2 size-4" />
+        Mapping CSV
+      </DropdownMenuItem>
+    </DropdownMenuGroup>
+  );
+}

app/next-client-app/app/(protected)/scanreports/[id]/layout.tsx

@@ -8,8 +8,10 @@ import { Boundary } from "@/components/core/boundary";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+
 } from "@/components/ui/dropdown-menu";
 import { Suspense } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -21,6 +23,7 @@ import { MappingStatus } from "@/components/scanreports/MappingStatus";
 import { StatusIcon } from "@/components/core/StatusIcon";
 import { UploadStatusOptions } from "@/constants/scanReportStatus";
 import ExportScanReport from "@/components/scanreports/ExportScanReport";
+import { ActionsDownloadMenu } from "./actions-download-menu";
 
 export default async function ScanReportLayout(
   props: Readonly<{
@@ -41,11 +44,11 @@ export default async function ScanReportLayout(
   const items = [
     {
       name: "Tables",
-      iconName: "TableProperties",
+      iconName: "TableProperties"
     },
     { name: "Rules", slug: "mapping_rules", iconName: "Waypoints" },
     { name: "Review Rules", slug: "review_rules", iconName: "SearchCheck" },
-    { name: "Downloads", slug: "downloads", iconName: "Download" },
+    { name: "Downloads", slug: "downloads", iconName: "Download" }
   ];
 
   {
@@ -55,7 +58,7 @@ export default async function ScanReportLayout(
     items.push({
       name: "Edit Details",
       slug: "details",
-      iconName: "Edit",
+      iconName: "Edit"
     });
   }
 
@@ -138,8 +141,8 @@ export default async function ScanReportLayout(
               ...items.map((x) => ({
                 text: x.name,
                 slug: x.slug,
-                iconName: x.iconName,
-              })),
+                iconName: x.iconName
+              }))
             ]}
           />
         </div>
@@ -153,10 +156,14 @@ export default async function ScanReportLayout(
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
+              <ActionsDownloadMenu scanreportId={params.id} />
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Scan Report</DropdownMenuLabel>
               <ExportScanReport
                 scanReportId={params.id}
                 scanReportName={scanreport.dataset}
               />
+              
               <DeleteDialog id={Number(params.id)} redirect needTrigger />
             </DropdownMenuContent>
           </DropdownMenu>

app/next-client-app/app/(protected)/scanreports/[id]/mapping_rules/rules-buttons.tsx

@@ -2,23 +2,9 @@
 
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import {
-  BarChartHorizontalBig,
-  ChevronDown,
-  FileJson,
-  FileSpreadsheet,
-} from "lucide-react";
+import { BarChartHorizontalBig } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { GetFile } from "@/app/(protected)/scanreports/[id]/mapping_rules/get-file";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { requestFile } from "@/api/files";
-import { toast } from "sonner";
-import { useRouter } from "next/navigation";
 
 export function RulesButton({
   scanreportId,
@@ -29,19 +15,7 @@ export function RulesButton({
   query: string;
   filename: string;
 }) {
-  const router = useRouter();
-
-  const handleDownload = async (fileType: FileTypeFormat) => {
-    const resp = await requestFile(Number(scanreportId), fileType);
-    if (resp.success) {
-      router.push(`downloads`);
-      toast.success("File requested.");
-    } else {
-      toast.error(
-        `Error downloading file: ${(resp.errorMessage as any).message}`
-      );
-    }
-  };
+ 
   return (
     <div className="hidden md:flex gap-2 justify-end w-full mr-2">
       <div>
@@ -66,37 +40,6 @@ export function RulesButton({
           </DialogContent>
         </Dialog>
       </div>
-      <div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">
-              Request Download <ChevronDown className="ml-2 size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-[180px]">
-            <DropdownMenuItem>
-              <Button
-                onClick={() => handleDownload("application/json")}
-                variant={"ghost"}
-                size={"sm"}
-              >
-                Mapping JSON
-                <FileJson className="ml-2 size-4" />
-              </Button>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Button
-                onClick={() => handleDownload("text/csv")}
-                variant={"ghost"}
-                size={"sm"}
-              >
-                Mapping CSV
-                <FileSpreadsheet className="ml-2 size-4" />
-              </Button>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
     </div>
   );
 }

app/next-client-app/app/globals.css

@@ -216,3 +216,22 @@ input[data-slot="input"]:focus-visible {
   border-color: hsl(var(--ring)) !important;
   box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
 }
+
+/* DropdownMenuSeparator: black in light mode, white in dark mode */
+[data-radix-dropdown-menu-separator],
+.dropdown-menu-separator,
+[role="separator"] {
+  display: block !important;
+  height: 0.5px !important;
+  width: 100% !important;
+  background-color: #000 !important; /* Black for light mode */
+  margin: 8px 0 !important;
+  border: none !important;
+  opacity: 1 !important;
+}
+
+.dark [data-radix-dropdown-menu-separator],
+.dark .dropdown-menu-separator,
+.dark [role="separator"] {
+  background-color: #fff !important; /* White for dark mode */
+}

app/next-client-app/components/scanreports/DeleteDialog.tsx

@@ -14,6 +14,7 @@ import { deleteScanReport } from "@/api/scanreports";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useRouter } from "next/navigation";
 import { TrashIcon } from "lucide-react";
+import { DropdownMenuItem } from "../ui/dropdown-menu";
 
 interface DeleteDialogProps {
   id: number;
@@ -47,10 +48,13 @@ const DeleteDialog = ({
     <Dialog open={isOpen} onOpenChange={() => setOpen(false)}>
       {needTrigger && (
         <DialogTrigger asChild>
-          <div className="text-black dark:text-white hover:text-destructive hover:dark:text-destructive hover:bg-accent relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-destructive data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
-            <TrashIcon className="mr-2 size-4" />
-            Delete Scan Report
-          </div>
+          <DropdownMenuItem
+            variant="destructive"
+            onSelect={(e) => e.preventDefault()}
+          >
+            <TrashIcon className="mr-2 size-4"/>
+            Delete
+          </DropdownMenuItem>
         </DialogTrigger>
       )}
       <DialogContent>

app/next-client-app/components/scanreports/ExportScanReport.tsx

@@ -3,8 +3,9 @@
 import { downloadFile } from "@/api/files";
 import { toast } from "sonner";
 import { saveAs } from "file-saver";
-import { Download } from "lucide-react";
+import { HardDriveDownload } from "lucide-react";
 import { convertBase64toBlob } from "@/lib/client-utils";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 
 interface ExportProps {
   scanReportId: string;
@@ -18,7 +19,7 @@ const ExportScanReport = ({ scanReportId, scanReportName }: ExportProps) => {
       // Convert back Base64 to Blob
       const blobArray = convertBase64toBlob(response.data);
       const blob = new Blob([blobArray], {
-        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
       });
       saveAs(blob, `${scanReportName.replace(/[^a-zA-Z0-9]/g, "_")}.xlsx`);
     } else {
@@ -28,14 +29,10 @@ const ExportScanReport = ({ scanReportId, scanReportName }: ExportProps) => {
     }
   };
   return (
-    <div
-      role="button"
-      onClick={handleDownload}
-      className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-    >
-      <Download className="mr-2 size-4" />
-      Export Scan Report
-    </div>
+    <DropdownMenuItem onSelect={handleDownload}>
+      <HardDriveDownload className="mr-2 size-4" />
+      Export
+    </DropdownMenuItem>
   );
 };