Move feed into own page, add lookup as main page

vipyrsec · Oct 11, 2024 · d656b54 · d656b54
1 parent fda02c1
commit d656b54
Show file tree

Hide file tree

Showing 6 changed files with 443 additions and 292 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -65,5 +65,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    /* https://github.com/shadcn-ui/ui/issues/1912 */
+    pointer-events: auto !important;
   }
-}
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { UserProvider } from "@auth0/nextjs-auth0/client";
 import { Inter as FontSans } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { getSession } from "@auth0/nextjs-auth0";
+import LoggedInUserWidget from "@/components/user";
 
 const fontSans = FontSans({
     subsets: ["latin"],
@@ -24,7 +25,12 @@ export default async function RootLayout({
     return (
         <html lang="en">
             <UserProvider user={session?.user}>
-                <body className={cn("dark min-h-screen bg-background font-sans antialiased", fontSans.variable)}>{children}</body>
+                <body className={cn("dark min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+                    <div className="flex justify-end p-4">
+                        <LoggedInUserWidget />
+                    </div>
+                    {children}
+                </body>
             </UserProvider>
         </html>
     );

diff --git a/components/feed.tsx b/components/feed.tsx
@@ -5,17 +5,19 @@ import { ColumnDef, flexRender, getCoreRowModel, useReactTable, getSortedRowMode
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
 import { Separator } from "./ui/separator";
 import { useState } from "react";
-import { ArrowUpDown, ExternalLink, MoreHorizontal } from "lucide-react";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 import { Button } from "./ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
 import Link from "next/link";
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs';
 
 var RelativeTime = require("dayjs/plugin/relativeTime");
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 import { Input } from "./ui/input";
 dayjs.extend(RelativeTime);
 dayjs.extend(timezone);
@@ -70,8 +72,6 @@ const columns: ColumnDef<Package>[] = [
             )
         },
         cell: ({row}) => {
-            const temp = row.getValue("finished_at");
-            console.log(row.getValue("name"), row.getValue("version"), temp);
             const date = dayjs.unix(row.getValue("finished_at"));
             const fmt = date.format("MMMM D, YYYY [at] h:mm:ss A");
             return (
@@ -92,38 +92,52 @@ const columns: ColumnDef<Package>[] = [
         cell: ({ row }) => {
             const pkg = row.original;
             return (
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" className="h-8 w-8 p-0">
-                            <span className="sr-only">Open menu</span>
-                            <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuItem>
-                            <Link href={`https://pypi.org/project/${pkg.name}/${pkg.version}/`} target="_blank">View on PyPI</Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                            <Dialog>
-                                <DialogTrigger>Report Package</DialogTrigger>
-                                <DialogContent>
-                                    <DialogHeader>
-                                        <DialogTitle>Report {pkg.name} v{pkg.version}</DialogTitle>
-                                    </DialogHeader>
-                                    <div>
-                                        <p>Additional Information</p>
-                                        <Input />
-                                    </div>
-                                </DialogContent>
-                            </Dialog>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                            View detailed information
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
+                <Dialog>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">Open menu</span>
+                                <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem>
+                                <Link className="w-full" href={`https://pypi.org/project/${pkg.name}/${pkg.version}/`} target="_blank">View on PyPI</Link>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                                {pkg.inspector_url 
+                                    ? <Link className="w-full" href={pkg.inspector_url} target="_blank">View on Inspector</Link> 
+                                    : <></>}
+                            </DropdownMenuItem>
+                            <DialogTrigger asChild>
+                                <DropdownMenuItem disabled={typeof pkg.reported_at === null}>
+                                    <span className="w-full cursor-pointer">Report</span>
+                                </DropdownMenuItem>
+                            </DialogTrigger>
+                            <DropdownMenuItem>
+                                View detailed information
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>Report {pkg.name} v{pkg.version}</DialogTitle>
+                        </DialogHeader>
+                        <div className="space-y-2">
+                            <Label htmlFor="additional-information">Additional Information</Label>
+                            <Textarea id="additional-information"/>
+                        </div>
+
+                        <div className="space-y-2 mt-4">
+                            <Label htmlFor="inspector-url">Inspector URL</Label>
+                            <Input id="inspector-url" defaultValue={pkg.inspector_url || ""}/>
+                        </div>
+                        <DialogFooter>
+                            <Button variant="destructive">Report</Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
             )
         }
     }

diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/components/user.tsx b/components/user.tsx
@@ -0,0 +1,17 @@
+"use client"
+import { useUser } from "@auth0/nextjs-auth0/client";
+import Link from "next/link";
+
+export default function LoggedInUserWidget() {
+    const { user, error, isLoading } = useUser();
+    if(!user || isLoading || error) return;
+
+    return (
+        <div className="grid gap-x-4 gap-y-0 grid-rows-2 grid-cols-2 items-center px-4 py-2">
+            <img src={user.picture || ""} className="w-16 h-16 rounded-full border overflow-hidden row-span-2"/>
+            <p className="text-lg">{user.name}</p>
+            <Link href={"/api/auth/logout"} className="text-sm text-muted-primary hover:underline">Log out</Link>
+        </div>
+    )
+
+}