moves download sbom button to dependency graph

l3montree-dev · Jul 19, 2024 · fa01f04 · fa01f04
1 parent 0738f29
commit fa01f04
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 113 deletions.
diff --git a/src/components/project/ProjectForm.tsx b/src/components/project/ProjectForm.tsx
@@ -1,44 +1,49 @@
 import { ProjectDTO } from "@/types/api/api";
-import { UseFormReturn } from "react-hook-form";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { FunctionComponent } from "react";
+import { UseFormReturn } from "react-hook-form";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form";
 import { Input } from "../ui/input";
 
 interface Props {
-    form: UseFormReturn<ProjectDTO, any, undefined>;
-  }
-
-
+  form: UseFormReturn<ProjectDTO, any, undefined>;
+}
 
-export const ProjectForm: FunctionComponent<Props> = ({ form}) =>  (
- <>
-            <FormField
-                name="name"
-                control={form.control}
-                render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Name</FormLabel>
-                        <FormControl>
-                            <Input {...field} />
-                        </FormControl>
-                        <FormDescription>The name of the project.</FormDescription>
-                        <FormMessage />
-                    </FormItem>
-                )}
-            />
-            <FormField
-                name="description"
-                control={form.control}
-                render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Description</FormLabel>
-                        <FormControl>
-                            <Input {...field} />
-                        </FormControl>
-                        <FormDescription>The description of the project.</FormDescription>
-                        <FormMessage />
-                    </FormItem>
-                )}
-            />
-      </>
-);
+export const ProjectForm: FunctionComponent<Props> = ({ form }) => (
+  <>
+    <FormField
+      name="name"
+      control={form.control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>Name</FormLabel>
+          <FormControl>
+            <Input {...field} />
+          </FormControl>
+          <FormDescription>The name of the project.</FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+    <FormField
+      name="description"
+      control={form.control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>Description</FormLabel>
+          <FormControl>
+            <Input {...field} />
+          </FormControl>
+          <FormDescription>The description of the project.</FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  </>
+);
diff --git a/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/dependency-graph.tsx b/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/dependency-graph.tsx
@@ -17,6 +17,13 @@ import Section from "@/components/common/Section";
 import DependencyGraph from "@/components/DependencyGraph";
 import Page from "@/components/Page";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Select,
   SelectContent,
@@ -25,7 +32,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "@/const/viewConstants";
 import { middleware } from "@/decorators/middleware";
 import { withAsset } from "@/decorators/withAsset";
@@ -44,6 +51,7 @@ import { ViewDependencyTreeNode } from "@/types/view/assetTypes";
 import { toSearchParams } from "@/utils/common";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useRouter } from "next/router";
 import { FunctionComponent } from "react";
 
@@ -58,6 +66,8 @@ const DependencyGraphPage: FunctionComponent<{
   const dimensions = useDimensions();
 
   const router = useRouter();
+  const pathname = usePathname();
+
   const all = router.query.all === "1";
   const menu = useAssetMenu();
   return (
@@ -111,7 +121,73 @@ const DependencyGraphPage: FunctionComponent<{
         forceVertical
         title="Dependency Graph"
         description="This graph shows the dependencies of the asset. The risk of each dependency is calculated based on the risk of the affected package."
-        Button={
+      >
+        <div className="flex flex-row justify-between">
+          <div className="flex flex-row gap-4">
+            <Tabs
+              defaultValue={
+                (router.query.scanType as string | undefined) ?? "sca"
+              }
+            >
+              <TabsList>
+                <TabsTrigger
+                  onClick={() =>
+                    router.push({
+                      query: {
+                        ...router.query,
+                        scanType: "sca",
+                      },
+                    })
+                  }
+                  value="sca"
+                >
+                  Application
+                </TabsTrigger>
+                <TabsTrigger
+                  onClick={() =>
+                    router.push({
+                      query: {
+                        ...router.query,
+                        scanType: "container-scanning",
+                      },
+                    })
+                  }
+                  value="container-scanning"
+                >
+                  Container Image
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant={"secondary"}>Download SBOM</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <Link
+                  download
+                  target="_blank"
+                  prefetch={false}
+                  href={
+                    pathname + `/../sbom.json?scanType=${router.query.scanType}`
+                  }
+                  className="!text-foreground hover:no-underline"
+                >
+                  <DropdownMenuItem>JSON-Format</DropdownMenuItem>
+                </Link>
+                <Link
+                  download
+                  target="_blank"
+                  prefetch={false}
+                  href={
+                    pathname + `/../sbom.xml?scanType=${router.query.scanType}`
+                  }
+                  className="!text-foreground hover:no-underline"
+                >
+                  <DropdownMenuItem>XML-Format</DropdownMenuItem>
+                </Link>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
           <div className="flex flex-row items-center gap-4">
             <div className="flex flex-row items-center gap-4">
               <label
@@ -153,6 +229,7 @@ const DependencyGraphPage: FunctionComponent<{
                 </SelectContent>
               </Select>
             </div>
+
             {graph.root.risk !== 0 && (
               <div className="flex flex-row items-center gap-4 whitespace-nowrap text-sm">
                 <label htmlFor="allDependencies">
@@ -177,40 +254,7 @@ const DependencyGraphPage: FunctionComponent<{
               </div>
             )}
           </div>
-        }
-      >
-        <Tabs
-          defaultValue={(router.query.scanType as string | undefined) ?? "sca"}
-        >
-          <TabsList>
-            <TabsTrigger
-              onClick={() =>
-                router.push({
-                  query: {
-                    ...router.query,
-                    scanType: "sca",
-                  },
-                })
-              }
-              value="sca"
-            >
-              Application
-            </TabsTrigger>
-            <TabsTrigger
-              onClick={() =>
-                router.push({
-                  query: {
-                    ...router.query,
-                    scanType: "container-scanning",
-                  },
-                })
-              }
-              value="container-scanning"
-            >
-              Container Image
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
+        </div>
         <div className="h-screen w-full rounded-lg border bg-white dark:bg-black">
           <DependencyGraph
             flaws={flaws}

diff --git a/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/index.tsx b/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/index.tsx
@@ -80,33 +80,7 @@ const Index: FunctionComponent = () => {
           </Link>
         </span>
       }
-    >
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant={"secondary"}>Download SBOM</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <Link
-            download
-            target="_blank"
-            prefetch={false}
-            href={router.asPath + `/sbom.json`}
-            className="!text-foreground hover:no-underline"
-          >
-            <DropdownMenuItem>JSON-Format</DropdownMenuItem>
-          </Link>
-          <Link
-            download
-            target="_blank"
-            prefetch={false}
-            href={router.asPath + `/sbom.xml`}
-            className="!text-foreground hover:no-underline"
-          >
-            <DropdownMenuItem>XML-Format</DropdownMenuItem>
-          </Link>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </Page>
+    ></Page>
   );
 };
 

diff --git a/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/sbom.json.tsx b/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/sbom.json.tsx
@@ -18,12 +18,13 @@ export const getServerSideProps: GetServerSideProps = middleware(
     const apiClient = getApiClientFromContext(context);
     const uri =
       "/organizations/" +
-      organizationSlug +
-      "/projects/" +
-      projectSlug +
-      "/assets/" +
-      assetSlug +
-      "/sbom.json";
+        organizationSlug +
+        "/projects/" +
+        projectSlug +
+        "/assets/" +
+        assetSlug +
+        "/sbom.json?scanType=" +
+        context.query.scanType ?? "sca";
 
     const sbom = await apiClient(uri + (version ? "?version=" + version : ""));
     if (!sbom.ok) {

diff --git a/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/sbom.xml.tsx b/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/sbom.xml.tsx
@@ -20,12 +20,13 @@ export const getServerSideProps: GetServerSideProps = middleware(
     const apiClient = getApiClientFromContext(context);
     const uri =
       "/organizations/" +
-      organizationSlug +
-      "/projects/" +
-      projectSlug +
-      "/assets/" +
-      assetSlug +
-      "/sbom.xml";
+        organizationSlug +
+        "/projects/" +
+        projectSlug +
+        "/assets/" +
+        assetSlug +
+        "/sbom.xml?scanType=" +
+        context.query.scanType ?? "sca";
 
     const sbom = await apiClient(uri + (version ? "?version=" + version : ""));
     if (!sbom.ok) {