From c871a4a5309319871f821e0451113562f690848c Mon Sep 17 00:00:00 2001
From: eirikhanasand <eirik.hanasand@gmail.com>
Date: Tue, 18 Feb 2025 13:41:10 +0100
Subject: [PATCH] streamlined list pages

---
 ui/src/app/dashboard/blacklist/clientPage.tsx | 104 ------------------
 ui/src/app/dashboard/blacklist/page.tsx       |  11 +-
 ui/src/app/dashboard/whitelist/page.tsx       |   9 +-
 .../clientPage.tsx => components/addPage.tsx} |  32 +++---
 ui/src/components/svg/trash.tsx               |  20 ++++
 ui/src/utils/filtering/addPackage.ts          |  12 +-
 ui/src/utils/filtering/deletePackage.ts       |   7 +-
 ui/src/utils/filtering/removePackage.ts       |  12 +-
 ui/types.d.ts                                 |  11 +-
 9 files changed, 75 insertions(+), 143 deletions(-)
 delete mode 100644 ui/src/app/dashboard/blacklist/clientPage.tsx
 rename ui/src/{app/dashboard/whitelist/clientPage.tsx => components/addPage.tsx} (71%)
 create mode 100644 ui/src/components/svg/trash.tsx

diff --git a/ui/src/app/dashboard/blacklist/clientPage.tsx b/ui/src/app/dashboard/blacklist/clientPage.tsx
deleted file mode 100644
index 27ce75e..0000000
--- a/ui/src/app/dashboard/blacklist/clientPage.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client"
-import addPackage from "@/utils/filtering/addPackage"
-import removePackage from "@/utils/filtering/removePackage"
-import { useState } from "react"
-
-export default function ClientPage({packages: serverPackages}: ClientPageProps) {
-    const [packages, setPackages] = useState<Package[]>([...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>({
-        name: "",
-        version: "",
-        ecosystem: "",
-        repository: null,
-        comment: "",
-    })
-
-    return (
-        <main className="flex min-h-full flex-col items-center justify-center p-6">
-            <h1 className="text-3xl font-bold text-blue-600">Blacklisted Packages</h1>
-            <p className="mt-2 text-foreground">Manage the list of unsafe packages.</p>
-
-            {!showForm && (
-                <button
-                    onClick={() => setShowForm(true)}
-                    className="mt-4 rounded-lg bg-blue-500 px-6 py-2 text-white hover:bg-blue-600"
-                >
-                    + Add Package
-                </button>
-            )}
-
-            {showForm && (
-                <div className="mt-4 w-96 bg-background p-4 rounded-lg shadow-md border border-dark">
-                    <h2 className="text-lg font-semibold text-foreground">Add New Package</h2>
-                    <input
-                        type="text"
-                        placeholder="Package Name"
-                        value={newPackage.name}
-                        onChange={(e) => setNewPackage({ ...newPackage, name: e.target.value })}
-                        className={formStyle}
-                    />
-                    <input
-                        type="text"
-                        placeholder="Version"
-                        value={newPackage.version}
-                        onChange={(e) => setNewPackage({ ...newPackage, version: e.target.value })}
-                        className={formStyle}
-                    />
-                    <input
-                        type="text"
-                        placeholder="Ecosystem (e.g., npm, pip, maven)"
-                        value={newPackage.ecosystem}
-                        onChange={(e) => setNewPackage({ ...newPackage, ecosystem: e.target.value })}
-                        className={formStyle}
-                    />
-                    <input
-                        type="text"
-                        placeholder="Artifactory Repository (or leave empty for all)"
-                        value={newPackage.repository || ""}
-                        onChange={(e) => setNewPackage({ ...newPackage, repository: e.target.value })}
-                        className={formStyle}
-                    />
-                    <textarea
-                        placeholder="Comment / Reasoning"
-                        value={newPackage.comment}
-                        onChange={(e) => setNewPackage({ ...newPackage, comment: e.target.value })}
-                        className={formStyle}
-                    />
-                    <div className="mt-4 flex justify-between">
-                        <button 
-                            onClick={() => addPackage({newPackage, setPackages, setShowForm, setNewPackage, packages, list:'blacklist'})}
-                            className="bg-green-500 px-4 py-2 rounded-md text-white hover:bg-green-600"
-                        >
-                            Add
-                        </button>
-                        <button onClick={() => setShowForm(false)} className="bg-red-500 px-4 py-2 rounded-md text-white hover:bg-red-600">
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            )}
-
-            <ul className="mt-6 w-96">
-                {packages.length === 0 ? (
-                    <p className="text-gray-500 text-center">No 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>
-                            <button
-                                onClick={() => removePackage({setPackages, packages, newPackage, list:'blacklist'})}
-                                className="mt-2 text-red-500 hover:underline self-end"
-                            >
-                                Remove
-                            </button>
-                        </li>
-                    ))
-                )}
-            </ul>
-        </main>
-    )
-}
diff --git a/ui/src/app/dashboard/blacklist/page.tsx b/ui/src/app/dashboard/blacklist/page.tsx
index bc99500..ae16c57 100644
--- 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} />
-    )
-}
\ No newline at end of file
+    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
index b6057cc..f77efe8 100644
--- 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/ui/src/app/dashboard/whitelist/clientPage.tsx b/ui/src/components/addPage.tsx
similarity index 71%
rename from ui/src/app/dashboard/whitelist/clientPage.tsx
rename to ui/src/components/addPage.tsx
index 7e857a5..5544f7e 100644
--- a/ui/src/app/dashboard/whitelist/clientPage.tsx
+++ b/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
new file mode 100644
index 0000000..b25818f
--- /dev/null
+++ 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
index 2cf6978..d74364c 100644
--- 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
index d09dd51..93ffd6a 100644
--- 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
index f1ea783..37a5e57 100644
--- 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
index 998f373..013af9b 100644
--- 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[]
 }