Completed Removing Duplicate actions button #1076

Author: brian-kim31

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { DropdownMenuItem } 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(`downloads`);
+      toast.success("File requested.");
+    } else {
+      toast.error(
+        `Error downloading file: ${(resp.errorMessage as any).message}`
+      );
+    }
+  };
+
+  return (
+    <>
+      <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>
+    </>
+  );
+}

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

@@ -9,7 +9,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
 import { Suspense } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -21,6 +21,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 +42,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 +56,7 @@ export default async function ScanReportLayout(
     items.push({
       name: "Edit Details",
       slug: "details",
-      iconName: "Edit",
+      iconName: "Edit"
     });
   }
 
@@ -138,8 +139,8 @@ export default async function ScanReportLayout(
               ...items.map((x) => ({
                 text: x.name,
                 slug: x.slug,
-                iconName: x.iconName,
-              })),
+                iconName: x.iconName
+              }))
             ]}
           />
         </div>
@@ -158,6 +159,7 @@ export default async function ScanReportLayout(
                 scanReportName={scanreport.dataset}
               />
               <DeleteDialog id={Number(params.id)} redirect needTrigger />
+              <ActionsDownloadMenu scanreportId={params.id} />
             </DropdownMenuContent>
           </DropdownMenu>
         </div>

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>
   );
 }