From 184dcdde0aed398ab5e1e2d8de3cb3832c4da121 Mon Sep 17 00:00:00 2001 From: eirikhanasand Date: Tue, 18 Feb 2025 14:20:55 +0100 Subject: [PATCH] Simplified package structure and added edit icon --- ui/src/components/addPage.css | 8 +++ ui/src/components/addPage.tsx | 71 +++++++++++++++++++------ ui/src/components/svg/pencil.tsx | 20 +++++++ ui/src/utils/filtering/editPackage.ts | 20 +++++++ ui/src/utils/filtering/putPackage.ts | 9 ++-- ui/src/utils/filtering/removePackage.ts | 2 +- 6 files changed, 106 insertions(+), 24 deletions(-) create mode 100644 ui/src/components/addPage.css create mode 100644 ui/src/components/svg/pencil.tsx create mode 100644 ui/src/utils/filtering/editPackage.ts diff --git a/ui/src/components/addPage.css b/ui/src/components/addPage.css new file mode 100644 index 0000000..75a2523 --- /dev/null +++ b/ui/src/components/addPage.css @@ -0,0 +1,8 @@ +.pencil-icon { + fill: var(--color-shallow); + transition: fill 0.2s ease-in-out; +} + +.pencil-icon:hover { + fill: var(--color-bright); +} diff --git a/ui/src/components/addPage.tsx b/ui/src/components/addPage.tsx index 5544f7e..f513651 100644 --- a/ui/src/components/addPage.tsx +++ b/ui/src/components/addPage.tsx @@ -1,8 +1,18 @@ "use client" import addPackage from "@/utils/filtering/addPackage" import removePackage from "@/utils/filtering/removePackage" -import { useState } from "react" +import { SetStateAction, useState } from "react" import Trash from "./svg/trash" +import Pencil from "./svg/pencil" +import editPackage from "@/utils/filtering/editPackage" +import "./addPage.css" + +type PackageProps = { + pkg: APIPackage + list: 'whitelist' | 'blacklist' + setPackages: (value: SetStateAction) => void + packages: APIPackage[] +} export default function AddPage({list, packages: serverPackages}: ClientPageProps) { const [packages, setPackages] = useState([...serverPackages]) @@ -85,24 +95,51 @@ export default function AddPage({list, packages: serverPackages}: ClientPageProp {packages.length === 0 ? (

No {list === 'whitelist' ? "whitelisted" : "blacklisted"} packages yet.

) : ( - packages.map((pkg: APIPackage) => ( -
  • -
    -

    {pkg.name} ({pkg.versions})

    -

    {Array.isArray(pkg.repositories) && pkg.repositories.length ? pkg.repositories : "Global"}

    -
    -

    {pkg.ecosystems}

    -

    {Array.isArray(pkg.repositories) && pkg.repositories.length ? `"${pkg.comments}"` : ""}

    - -
    • - )) + packages.map((pkg: APIPackage) => ) )} ) } + +function Package({pkg, setPackages, packages, list}: PackageProps) { + return ( +
  • +
    +

    + {pkg.name} ({pkg.versions}) +

    +

    + {Array.isArray(pkg.repositories) && pkg.repositories.length ? pkg.repositories : "Global"} +

    +
    +

    {pkg.ecosystems}

    +

    + {Array.isArray(pkg.repositories) && pkg.repositories.length ? `"${pkg.comments}"` : ""} +

    +
    + + +
    +
    • + ) +} diff --git a/ui/src/components/svg/pencil.tsx b/ui/src/components/svg/pencil.tsx new file mode 100644 index 0000000..04a7fe8 --- /dev/null +++ b/ui/src/components/svg/pencil.tsx @@ -0,0 +1,20 @@ +export default function Pencil({className, fill}: {className?: string, fill: string}) { + return ( +
    + + + + + + + +
    + ) +} diff --git a/ui/src/utils/filtering/editPackage.ts b/ui/src/utils/filtering/editPackage.ts new file mode 100644 index 0000000..046c703 --- /dev/null +++ b/ui/src/utils/filtering/editPackage.ts @@ -0,0 +1,20 @@ +import { SetStateAction } from "react" +import putPackage from "./putPackage" + +type RemovePackageProps = { + pkg: APIPackage + setPackages: (value: SetStateAction) => void + packages: APIPackage[] + list: 'whitelist' | 'blacklist' +} + +export default async function editPackage({pkg, setPackages, packages, list}: RemovePackageProps) { + const response = await putPackage({list, pkg}) + + if (response === 500) { + alert("Failed to edit package. API error.") + return + } + + setPackages(packages.filter((p) => p.name !== pkg.name)) +} diff --git a/ui/src/utils/filtering/putPackage.ts b/ui/src/utils/filtering/putPackage.ts index 4b0bb4f..96aa338 100644 --- a/ui/src/utils/filtering/putPackage.ts +++ b/ui/src/utils/filtering/putPackage.ts @@ -2,20 +2,17 @@ import { API } from "@constants" type PutListProps = { list: 'whitelist' | 'blacklist' - name: string - oldVersion: string - newVersion: string - ecosystem: string + pkg: APIPackage } -export default async function putPackage({list, name, oldVersion, newVersion, ecosystem}: PutListProps) { +export default async function putPackage({list, pkg}: PutListProps) { try { const response = await fetch(`${API}/${list}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, - body: JSON.stringify({ecosystem, oldVersion, newVersion, name}) + body: JSON.stringify({...pkg}) }) if (!response.ok) { diff --git a/ui/src/utils/filtering/removePackage.ts b/ui/src/utils/filtering/removePackage.ts index 37a5e57..24d7f1b 100644 --- a/ui/src/utils/filtering/removePackage.ts +++ b/ui/src/utils/filtering/removePackage.ts @@ -12,7 +12,7 @@ export default async function removePackage({name, setPackages, packages, list}: const response = await deletePackage({list, name}) if (response === 500) { - alert("Failed to add package. API error.") + alert("Failed to delete package. API error.") return }