From 7b1da909c681002ef9f9c2d4ea758a2897ee820e Mon Sep 17 00:00:00 2001 From: Damian Stasik <920747+damianstasik@users.noreply.github.com> Date: Wed, 4 Sep 2024 10:04:28 +0200 Subject: [PATCH] Group licenses detected in the same file (#126) Signed-off-by: Damian Stasik <920747+damianstasik@users.noreply.github.com> Co-authored-by: abstractionfactory <179820029+abstractionfactory@users.noreply.github.com> --- frontend/src/components/Icon/index.tsx | 12 ++- .../components/LicenseSidebarBlock/index.tsx | 72 +++++++++++++++++ .../components/MetadataSidebarBlock/index.tsx | 41 ---------- .../RepoMetadataSidebarBlock/index.tsx | 77 ------------------- .../src/components/RepoSidebarBlock/index.tsx | 38 +++++++++ .../src/components/SidebarBlock/index.tsx | 4 +- .../components/MetadataSidebarBlock.tsx | 23 ++++-- .../components/MetadataSidebarBlock.tsx | 23 ++++-- frontend/tsconfig.app.json | 2 +- 9 files changed, 159 insertions(+), 133 deletions(-) create mode 100644 frontend/src/components/LicenseSidebarBlock/index.tsx delete mode 100644 frontend/src/components/MetadataSidebarBlock/index.tsx delete mode 100644 frontend/src/components/RepoMetadataSidebarBlock/index.tsx create mode 100644 frontend/src/components/RepoSidebarBlock/index.tsx diff --git a/frontend/src/components/Icon/index.tsx b/frontend/src/components/Icon/index.tsx index 14694179..2556f067 100644 --- a/frontend/src/components/Icon/index.tsx +++ b/frontend/src/components/Icon/index.tsx @@ -4,16 +4,24 @@ interface IconProps { viewBox?: string; width?: number; height?: number; + title?: string; } -export function Icon({ path, className, width = 24, height = 24 }: IconProps) { +export function Icon({ + title, + path, + className, + width = 24, + height = 24, +}: IconProps) { return ( ); diff --git a/frontend/src/components/LicenseSidebarBlock/index.tsx b/frontend/src/components/LicenseSidebarBlock/index.tsx new file mode 100644 index 00000000..97e7f368 --- /dev/null +++ b/frontend/src/components/LicenseSidebarBlock/index.tsx @@ -0,0 +1,72 @@ +import { SidebarBlock } from "../SidebarBlock"; +import { Fragment, ReactNode } from "react"; +import { definitions } from "@/api"; +import { Icon } from "../Icon"; +import { info } from "@/icons/info"; + +interface BlockProps { + license?: definitions["LicenseList"]; +} + +function LicenseSidebarBlockTitle() { + return ( + <> + License + + + ); +} + +export function LicenseSidebarBlock(props: BlockProps) { + let content: ReactNode; + + if (props.license === undefined) { + content = ; + } else if (props.license === null || props.license.length === 0) { + content = "None detected"; + } else { + const sortedLicenses = [...props.license].sort( + (a, b) => b.confidence - a.confidence, + ); + + const groupedLicenses = Object.groupBy( + sortedLicenses, + (license) => license.link, + ); + + const licenses = Object.entries(groupedLicenses).map(([link, license]) => ( +
  • + + {license[0].file} + + + {license?.map((license, index, arr) => ( + + {license.spdx} + {index < arr.length - 1 && ", "} + + ))} + +
    • + )); + + content = ; + } + + return ( + }>{content} + ); +} + +export function LicenceSidebarBlockSkeleton() { + return ; +} diff --git a/frontend/src/components/MetadataSidebarBlock/index.tsx b/frontend/src/components/MetadataSidebarBlock/index.tsx deleted file mode 100644 index eb4fd332..00000000 --- a/frontend/src/components/MetadataSidebarBlock/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { ReactNode } from "react"; -import { SidebarBlock } from "../SidebarBlock"; -import { Icon } from "../Icon"; - -interface MetadataSidebarBlockProps { - children: ReactNode; - title: string; -} - -export function MetadataSidebarBlock({ - children, - title, -}: MetadataSidebarBlockProps) { - return ( - -
    {children}
    -     - ); -} - -interface MetadataSidebarBlockItemProps { - title: string; - children: ReactNode; - icon: string; -} - -export function MetadataSidebarBlockItem({ - icon, - title, - children, -}: MetadataSidebarBlockItemProps) { - return ( -
    -
    - - {title} -
    -
    {children}
    -
    - ); -} diff --git a/frontend/src/components/RepoMetadataSidebarBlock/index.tsx b/frontend/src/components/RepoMetadataSidebarBlock/index.tsx deleted file mode 100644 index 4d25e01f..00000000 --- a/frontend/src/components/RepoMetadataSidebarBlock/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { - MetadataSidebarBlock, - MetadataSidebarBlockItem, -} from "../MetadataSidebarBlock"; -import { github } from "@/icons/github"; -import { document } from "@/icons/document"; -import { Fragment, ReactNode } from "react"; -import { definitions } from "@/api"; - -function getLinkLabel(url: string) { - const match = url.match(/github\.com\/([^/]+)\/([^/]+)/); - - if (!match) { - return null; - } - - return `${match[1]}/${match[2]}`; -} - -interface BlockProps { - license?: definitions["LicenseList"]; - link?: string | undefined; -} - -export function RepoMetadataSidebarBlock(props: BlockProps) { - let license: ReactNode = ( - - ); - - if (props.license !== undefined) { - license = - props.license === null - ? "Unavailable" - : props.license.map((license, index, arr) => ( - - - {license.spdx} - - {index < arr.length - 1 && ", "} - - )); - } - - const link = props.link ? ( - - {getLinkLabel(props.link)} - - ) : ( - - ); - - return ( - - - {license} - - - {link} - - - ); -} - -export function RepoMetadataSidebarBlockSkeleton() { - return ; -} diff --git a/frontend/src/components/RepoSidebarBlock/index.tsx b/frontend/src/components/RepoSidebarBlock/index.tsx new file mode 100644 index 00000000..eb7f89c8 --- /dev/null +++ b/frontend/src/components/RepoSidebarBlock/index.tsx @@ -0,0 +1,38 @@ +import { SidebarBlock } from "../SidebarBlock"; + +function getLinkLabel(url: string) { + const match = url.match(/github\.com\/([^/]+)\/([^/]+)/); + + if (!match) { + return null; + } + + return `${match[1]}/${match[2]}`; +} + +interface BlockProps { + link?: string | undefined; +} + +export function RepoSidebarBlock(props: BlockProps) { + return ( + + {props.link ? ( + + {getLinkLabel(props.link)} + + ) : ( + + )} + + ); +} + +export function RepoSidebarBlockSkeleton() { + return ; +} diff --git a/frontend/src/components/SidebarBlock/index.tsx b/frontend/src/components/SidebarBlock/index.tsx index bab6cc09..9648ca99 100644 --- a/frontend/src/components/SidebarBlock/index.tsx +++ b/frontend/src/components/SidebarBlock/index.tsx @@ -1,14 +1,14 @@ import { ReactNode } from "react"; interface SidebarBlockProps { - title: string; + title: ReactNode; children: ReactNode; } export function SidebarBlock({ title, children }: SidebarBlockProps) { return (
    -

    +

    {title}

    diff --git a/frontend/src/routes/Module/components/MetadataSidebarBlock.tsx b/frontend/src/routes/Module/components/MetadataSidebarBlock.tsx index 4dd57f00..81211d8c 100644 --- a/frontend/src/routes/Module/components/MetadataSidebarBlock.tsx +++ b/frontend/src/routes/Module/components/MetadataSidebarBlock.tsx @@ -3,9 +3,10 @@ import { getModuleVersionDataQuery } from "../query"; import { useModuleParams } from "../hooks/useModuleParams"; import { - RepoMetadataSidebarBlock, - RepoMetadataSidebarBlockSkeleton, -} from "@/components/RepoMetadataSidebarBlock"; + RepoSidebarBlock, + RepoSidebarBlockSkeleton, +} from "@/components/RepoSidebarBlock"; +import { LicenseSidebarBlock } from "@/components/LicenseSidebarBlock"; export function ModuleMetadataSidebarBlock() { const { namespace, name, target, version } = useModuleParams(); @@ -14,7 +15,19 @@ export function ModuleMetadataSidebarBlock() { getModuleVersionDataQuery(namespace, name, target, version), ); - return ; + return ( + <> + + + + ); } -export { RepoMetadataSidebarBlockSkeleton as ModuleMetadataSidebarBlockSkeleton }; +export function ModuleMetadataSidebarBlockSkeleton() { + return ( + <> + + + + ); +} diff --git a/frontend/src/routes/Provider/components/MetadataSidebarBlock.tsx b/frontend/src/routes/Provider/components/MetadataSidebarBlock.tsx index 01e9420e..3884d0a0 100644 --- a/frontend/src/routes/Provider/components/MetadataSidebarBlock.tsx +++ b/frontend/src/routes/Provider/components/MetadataSidebarBlock.tsx @@ -3,9 +3,10 @@ import { getProviderVersionDataQuery } from "../query"; import { useProviderParams } from "../hooks/useProviderParams"; import { - RepoMetadataSidebarBlock, - RepoMetadataSidebarBlockSkeleton, -} from "@/components/RepoMetadataSidebarBlock"; + RepoSidebarBlock, + RepoSidebarBlockSkeleton, +} from "@/components/RepoSidebarBlock"; +import { LicenseSidebarBlock } from "@/components/LicenseSidebarBlock"; export function ProviderMetadataSidebarBlock() { const { namespace, provider, version } = useProviderParams(); @@ -14,7 +15,19 @@ export function ProviderMetadataSidebarBlock() { getProviderVersionDataQuery(namespace, provider, version), ); - return ; + return ( + <> + + + + ); } -export { RepoMetadataSidebarBlockSkeleton as ProviderMetadataSidebarBlockSkeleton }; +export function ProviderMetadataSidebarBlockSkeleton() { + return ( + <> + + + + ); +} diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json index 4113938b..91714a62 100644 --- a/frontend/tsconfig.app.json +++ b/frontend/tsconfig.app.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": ["ESNext", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "paths": {