streamlined list pages

eirikhanasand · Feb 18, 2025 · c871a4a · c871a4a
1 parent 527f186
commit c871a4a
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 143 deletions.
diff --git a/ui/src/app/dashboard/blacklist/clientPage.tsx b/ui/src/app/dashboard/blacklist/clientPage.tsx
diff --git a/ui/src/app/dashboard/blacklist/page.tsx b/ui/src/app/dashboard/blacklist/page.tsx
@@ -1,9 +1,8 @@
 import getPackages from "@/utils/filtering/getPackage"
-import ClientPage from "./clientPage"
+import AddPage from "@/components/addPage"
 
 export default async function page() {
-    const packages = await getPackages({list: 'blacklist', side: 'server'})
-    return (
-        <ClientPage packages={packages} />
-    )
-}
+    const list = 'blacklist'
+    const packages = await getPackages({list, side: 'server'})
+    return <AddPage list={list} packages={packages} />
+}
diff --git a/ui/src/app/dashboard/whitelist/page.tsx b/ui/src/app/dashboard/whitelist/page.tsx
@@ -1,9 +1,8 @@
 import getPackages from "@/utils/filtering/getPackage"
-import ClientPage from "./clientPage"
+import AddPage from "@/components/addPage"
 
 export default async function page() {
-    const packages = await getPackages({list: 'whitelist', side: 'server'})
-    return (
-        <ClientPage packages={packages} />
-    )
+    const list = 'whitelist'
+    const packages = await getPackages({list, side: 'server'})
+    return <AddPage list={list} packages={packages} />
 }
diff --git a/...rc/app/dashboard/whitelist/clientPage.tsx → ui/src/components/addPage.tsx b/...rc/app/dashboard/whitelist/clientPage.tsx → ui/src/components/addPage.tsx
@@ -2,9 +2,10 @@
 import addPackage from "@/utils/filtering/addPackage"
 import removePackage from "@/utils/filtering/removePackage"
 import { useState } from "react"
+import Trash from "./svg/trash"
 
-export default function ClientPage({packages: serverPackages}: ClientPageProps) {
-    const [packages, setPackages] = useState<Package[]>([...serverPackages])
+export default function AddPage({list, packages: serverPackages}: ClientPageProps) {
+    const [packages, setPackages] = useState<APIPackage[]>([...serverPackages])
     const [showForm, setShowForm] = useState(false)
     const formStyle = "w-full mt-2 p-3 border border-dark rounded-md text-foreground focus:outline-hidden focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
     const [newPackage, setNewPackage] = useState<Package>({
@@ -17,8 +18,8 @@ export default function ClientPage({packages: serverPackages}: ClientPageProps)
 
     return (
         <main className="flex min-h-full flex-col items-center justify-center p-6">
-            <h1 className="text-3xl font-bold text-blue-600">Whitelisted Packages</h1>
-            <p className="mt-2 text-foreground">Manage the list of safe packages.</p>
+            <h1 className="text-3xl font-bold text-blue-600">{list === 'whitelist' ? "Whitelisted" : "Blacklisted"} Packages</h1>
+            <p className="mt-2 text-foreground">Manage the list of {list === 'whitelist' ? "safe" : "dangerous"} packages.</p>
 
             {!showForm && (
                 <button
@@ -61,7 +62,7 @@ export default function ClientPage({packages: serverPackages}: ClientPageProps)
                         className={formStyle}
                     />
                     <textarea
-                        placeholder="Comment / Reasoning"
+                        placeholder="Reason"
                         value={newPackage.comment}
                         onChange={(e) => setNewPackage({ ...newPackage, comment: e.target.value })}
                         className={formStyle}
@@ -82,18 +83,21 @@ export default function ClientPage({packages: serverPackages}: ClientPageProps)
 
             <ul className="mt-6 w-96">
                 {packages.length === 0 ? (
-                    <p className="text-foreground text-center">No whitelisted packages yet.</p>
+                    <p className="text-foreground text-center">No {list === 'whitelist' ? "whitelisted" : "blacklisted"} packages yet.</p>
                 ) : (
-                    packages.map((pkg) => (
-                        <li key={pkg.name} className="flex flex-col bg-background p-4 my-2 rounded-md shadow-sm border border-dark">
-                            <div className="text-lg font-semibold text-foreground">{pkg.name} ({pkg.version})</div>
-                            <div className="text-sm text-gray-500">{pkg.ecosystem}</div>
-                            <div className="text-sm text-gray-600 italic mt-1">&quot;{pkg.comment}&quot;</div>
+                    packages.map((pkg: APIPackage) => (
+                        <li key={pkg.name} className="flex flex-col bg-background p-4 my-2 rounded-md shadow-sm border border-blue-500">
+                            <div className="text-lg text-foreground flex justify-between">
+                                <h1 className="text-sm text-foreground font-semibold">{pkg.name} ({pkg.versions})</h1>
+                                <h1 className="text-sm text-foreground">{Array.isArray(pkg.repositories) && pkg.repositories.length ? pkg.repositories : "Global"}</h1>
+                            </div>
+                            <h1 className="text-sm text-foreground">{pkg.ecosystems}</h1>
+                            <h1 className="text-sm text-shallow italic mt-1">{Array.isArray(pkg.repositories) && pkg.repositories.length ? `"${pkg.comments}"` : ""}</h1>
                             <button
-                                onClick={() => removePackage({newPackage, setPackages, packages, list:'whitelist'})}
-                                className="mt-2 text-red-500 hover:underline self-end"
+                                onClick={() => removePackage({name: pkg.name, setPackages, packages, list})}
+                                className="h-[20px] w-[20px] self-end"
                             >
-                                Remove
+                                <Trash fill="fill-shallow hover:fill-red-500" className="w-full h-full" />
                             </button>
                         </li>
                     ))

diff --git a/ui/src/components/svg/trash.tsx b/ui/src/components/svg/trash.tsx
@@ -0,0 +1,20 @@
+export default function Trash({className, fill}: {className?: string, fill: string}) {
+    return (
+        <div className={className}>
+            <svg 
+                xmlns="http://www.w3.org/2000/svg" 
+                viewBox="0 0 24 24" 
+                x="0px" 
+                y="0px"
+                className={fill}
+            >
+                <path d="M4.41612 7.47943C4.51111 7.3656 4.65173 7.2998 4.79999 7.2998H19.2C19.3483 7.2998 19.4889 7.3656 19.5839 7.47943C19.6789 7.59326 19.7184 7.74338 19.6919 7.88925L17.4711 20.1039C17.3241 20.9122 16.6201 21.4998 15.7985 21.4998H8.20148C7.3799 21.4998 6.67587 20.9122 6.5289 20.1039L4.30806 7.88925C4.28154 7.74338 4.32112 7.59326 4.41612 7.47943ZM5.3991 8.2998L7.51277 19.925C7.57329 20.2579 7.86318 20.4998 8.20148 20.4998H15.7985C16.1368 20.4998 16.4267 20.2579 16.4872 19.925L18.6009 8.2998H5.3991Z"/>
+                <path d="M3.10001 6.5999C3.10001 5.66102 3.86112 4.8999 4.80001 4.8999H19.2C20.1389 4.8999 20.9 5.66102 20.9 6.5999C20.9 7.53879 20.1389 8.2999 19.2 8.2999H4.80001C3.86112 8.2999 3.10001 7.53879 3.10001 6.5999ZM4.80001 5.8999C4.41341 5.8999 4.10001 6.2133 4.10001 6.5999C4.10001 6.9865 4.41341 7.2999 4.80001 7.2999H19.2C19.5866 7.2999 19.9 6.9865 19.9 6.5999C19.9 6.2133 19.5866 5.8999 19.2 5.8999H4.80001Z" />
+                <path d="M12 9.7002C12.2761 9.7002 12.5 9.92405 12.5 10.2002V17.4002C12.5 17.6763 12.2761 17.9002 12 17.9002C11.7239 17.9002 11.5 17.6763 11.5 17.4002V10.2002C11.5 9.92405 11.7239 9.7002 12 9.7002Z" />
+                <path d="M15.6822 9.70659C15.9546 9.75199 16.1386 10.0096 16.0932 10.282L14.8932 17.482C14.8478 17.7544 14.5902 17.9384 14.3178 17.893C14.0454 17.8476 13.8614 17.59 13.9068 17.3176L15.1068 10.1176C15.1522 9.8452 15.4098 9.66119 15.6822 9.70659Z" />
+                <path d="M8.3178 9.70659C8.04542 9.75199 7.86141 10.0096 7.90681 10.282L9.10681 17.482C9.1522 17.7544 9.40982 17.9384 9.6822 17.893C9.95459 17.8476 10.1386 17.59 10.0932 17.3176L8.8932 10.1176C8.8478 9.8452 8.59019 9.66119 8.3178 9.70659Z" />
+                <path d="M7.89999 4.2C7.89999 3.26111 8.66111 2.5 9.59999 2.5H14.4C15.3389 2.5 16.1 3.26112 16.1 4.2V5.4C16.1 5.67614 15.8761 5.9 15.6 5.9H8.39999C8.12385 5.9 7.89999 5.67614 7.89999 5.4V4.2ZM9.59999 3.5C9.21339 3.5 8.89999 3.8134 8.89999 4.2V4.9H15.1V4.2C15.1 3.8134 14.7866 3.5 14.4 3.5H9.59999Z" />
+            </svg>
+        </div>
+    )
+}
diff --git a/ui/src/utils/filtering/addPackage.ts b/ui/src/utils/filtering/addPackage.ts
@@ -3,10 +3,10 @@ import postPackage from "./postPackage"
 
 type AddPackageProps = {
     newPackage: Package
-    setPackages: (value: SetStateAction<Package[]>) => void
+    setPackages: (value: SetStateAction<APIPackage[]>) => void
     setShowForm: (value: SetStateAction<boolean>) => void
     setNewPackage: (value: SetStateAction<Package>) => void
-    packages: Package[]
+    packages: APIPackage[]
     list: 'whitelist' | 'blacklist'
 }
 
@@ -23,7 +23,13 @@ export default async function addPackage({newPackage, setPackages, setShowForm,
         return
     }
 
-    setPackages([...packages, { ...newPackage }])
+    setPackages([...packages, { 
+        name: newPackage.name,
+        versions: [newPackage.version],
+        ecosystems: [newPackage.ecosystem],
+        repositories: newPackage.repository !== null ? [newPackage.repository] : [],
+        comments: [newPackage.comment]
+    }])
     setShowForm(false)
     setNewPackage({ name: "", version: "", ecosystem: "", comment: "", repository: null })
 }
diff --git a/ui/src/utils/filtering/deletePackage.ts b/ui/src/utils/filtering/deletePackage.ts
@@ -2,18 +2,17 @@ import { API } from "@constants"
 
 type DeleteListProps = {
     list: 'whitelist' | 'blacklist'
-    name?: string
-    version: string
+    name: string
 }
 
-export default async function deletePackage({list, name, version}: DeleteListProps) {
+export default async function deletePackage({list, name}: DeleteListProps) {
     try {
         const response = await fetch(`${API}/${list}`, {
             method: 'DELETE',
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify({name, version})
+            body: JSON.stringify({name})
         })
 
         if (!response.ok) {

diff --git a/ui/src/utils/filtering/removePackage.ts b/ui/src/utils/filtering/removePackage.ts
@@ -2,19 +2,19 @@ import { SetStateAction } from "react"
 import deletePackage from "./deletePackage"
 
 type RemovePackageProps = {
-    newPackage: Package
-    setPackages: (value: SetStateAction<Package[]>) => void
-    packages: Package[]
+    name: string
+    setPackages: (value: SetStateAction<APIPackage[]>) => void
+    packages: APIPackage[]
     list: 'whitelist' | 'blacklist'
 }
 
-export default async function removePackage({newPackage, setPackages, packages, list}: RemovePackageProps) {
-    const response = await deletePackage({list, name: newPackage.name, version: newPackage.version})
+export default async function removePackage({name, setPackages, packages, list}: RemovePackageProps) {
+    const response = await deletePackage({list, name})
 
     if (response === 500) {
         alert("Failed to add package. API error.")
         return
     }
 
-    setPackages(packages.filter((pkg) => pkg.name !== newPackage.name))
+    setPackages(packages.filter((pkg) => pkg.name !== name))
 }
diff --git a/ui/types.d.ts b/ui/types.d.ts
@@ -6,11 +6,20 @@ type Package = {
     comment: string
 }
 
+type APIPackage = {
+    name: string
+    versions: string[]
+    ecosystems: string[]
+    repositories: string[]
+    comments: string[]
+}
+
 type Cookie = {
     name: string
     value: string
 }
 
 type ClientPageProps = {
-    packages: Package[]
+    list: 'whitelist' | 'blacklist'
+    packages: APIPackage[]
 }