From be11d9a1231a4bc3711609c71b8bc9ac4e0fe760 Mon Sep 17 00:00:00 2001 From: Damian Stasik <920747+damianstasik@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:50:51 +0200 Subject: [PATCH] Implement the version from the design Signed-off-by: Damian Stasik <920747+damianstasik@users.noreply.github.com> --- frontend/src/icons/lock.ts | 2 + frontend/src/icons/warning.ts | 2 + frontend/src/routes/Module/TabLink.tsx | 53 ++++++++++++++----- .../src/routes/Module/components/Header.tsx | 17 +++--- .../routes/Module/components/SchemaError.tsx | 14 +++++ .../src/routes/Module/components/SideMenu.tsx | 38 ++++++++----- 6 files changed, 95 insertions(+), 31 deletions(-) create mode 100644 frontend/src/icons/lock.ts create mode 100644 frontend/src/icons/warning.ts create mode 100644 frontend/src/routes/Module/components/SchemaError.tsx diff --git a/frontend/src/icons/lock.ts b/frontend/src/icons/lock.ts new file mode 100644 index 00000000..6ee49c16 --- /dev/null +++ b/frontend/src/icons/lock.ts @@ -0,0 +1,2 @@ +export const lock = + "M19.998 11h-16a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V13a2 2 0 0 0-2-2Zm-8 9a2 2 0 1 1-.001-4 2 2 0 0 1 .001 4ZM18 9h-2V7a3.959 3.959 0 0 0-3.911-4h-.042A3.978 3.978 0 0 0 8 6.908V9H6V6.9A5.96 5.96 0 0 1 11.949 1h.061A5.98 5.98 0 0 1 18 6.968V9Z"; diff --git a/frontend/src/icons/warning.ts b/frontend/src/icons/warning.ts new file mode 100644 index 00000000..10fa7141 --- /dev/null +++ b/frontend/src/icons/warning.ts @@ -0,0 +1,2 @@ +export const warning = + "M23.641 18.485 14.732 1.643a3.093 3.093 0 0 0-5.464 0L.359 18.485A3.079 3.079 0 0 0 3.092 23h17.816a3.079 3.079 0 0 0 2.733-4.515ZM12 20a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5h-2l-.5-8h3l-.5 8Z"; diff --git a/frontend/src/routes/Module/TabLink.tsx b/frontend/src/routes/Module/TabLink.tsx index 0908b4e3..57055ca0 100644 --- a/frontend/src/routes/Module/TabLink.tsx +++ b/frontend/src/routes/Module/TabLink.tsx @@ -1,25 +1,52 @@ import { NavLink } from "react-router-dom"; import { TreeViewItem } from "../../components/TreeView"; import { ReactNode } from "react"; +import clsx from "clsx"; +import { Icon } from "@/components/Icon"; +import { lock } from "@/icons/lock"; interface ModuleTabLinkProps { to: string; children: ReactNode; end?: boolean; + count?: number; + disabled?: boolean; } -export function ModuleTabLink({ to, children, end }: ModuleTabLinkProps) { - return ( - - - `flex px-4 py-2 ${isActive ? "bg-brand-500 text-brand-600 text-inherit dark:bg-brand-800" : "text-inherit hover:bg-gray-100 dark:hover:bg-blue-900"}` - } - > - {children} - - +export function ModuleTabLink({ + to, + children, + end, + count, + disabled, +}: ModuleTabLinkProps) { + const sharedClasses = "flex px-4 py-2"; + + const component = disabled ? ( + + ) : ( + + clsx( + sharedClasses, + isActive + ? "bg-brand-500 text-brand-600 text-inherit dark:bg-brand-800" + : "text-inherit hover:bg-gray-100 dark:hover:bg-blue-900", + ) + } + > + {children} + {count !== undefined && ` (${count})`} + ); + + return {component}; } diff --git a/frontend/src/routes/Module/components/Header.tsx b/frontend/src/routes/Module/components/Header.tsx index a32e01c6..56640351 100644 --- a/frontend/src/routes/Module/components/Header.tsx +++ b/frontend/src/routes/Module/components/Header.tsx @@ -3,10 +3,11 @@ import { Paragraph } from "@/components/Paragraph"; import { InfoSection, InfoSectionItem } from "@/components/InfoSection"; import { Breadcrumbs, BreadcrumbsSkeleton } from "@/components/Breadcrumbs"; import { ReactNode } from "react"; -import { useSuspenseQuery } from "@tanstack/react-query"; -import { getModuleDataQuery } from "../query"; +import { useSuspenseQueries } from "@tanstack/react-query"; +import { getModuleDataQuery, getModuleVersionDataQuery } from "../query"; import { formatDate } from "@/utils/formatDate"; import { useModuleParams } from "../hooks/useModuleParams"; +import { ModuleSchemaError } from "./SchemaError"; interface WrapperProps { children: ReactNode; @@ -21,11 +22,14 @@ function Wrapper({ children }: WrapperProps) { } export function ModuleHeader() { - const { namespace, name, target } = useModuleParams(); + const { namespace, name, target, version } = useModuleParams(); - const { data } = useSuspenseQuery( - getModuleDataQuery(namespace, name, target), - ); + const [{ data }, { data: versionData }] = useSuspenseQueries({ + queries: [ + getModuleDataQuery(namespace, name, target), + getModuleVersionDataQuery(namespace, name, target, version), + ], + }); return ( @@ -35,6 +39,7 @@ export function ModuleHeader() { {data.addr.namespace}/{data.addr.name} {data.description && {data.description}} + {!!versionData.schema_error && } {data.addr.namespace} diff --git a/frontend/src/routes/Module/components/SchemaError.tsx b/frontend/src/routes/Module/components/SchemaError.tsx new file mode 100644 index 00000000..84298e47 --- /dev/null +++ b/frontend/src/routes/Module/components/SchemaError.tsx @@ -0,0 +1,14 @@ +import { Icon } from "@/components/Icon"; +import { warning } from "@/icons/warning"; + +export function ModuleSchemaError() { + return ( +
+ + We were unable to parse the schema for this module. +
+ ); +} diff --git a/frontend/src/routes/Module/components/SideMenu.tsx b/frontend/src/routes/Module/components/SideMenu.tsx index d9bc6a79..2ea7d0b6 100644 --- a/frontend/src/routes/Module/components/SideMenu.tsx +++ b/frontend/src/routes/Module/components/SideMenu.tsx @@ -16,23 +16,37 @@ export function ModuleSideMenu() { const dependenciesCount = data.dependencies.length; const resourcesCount = data.resources.length; + const hasSchemaError = !!data.schema_error; + return ( Readme - {!data.schema_error && ( - <> - Inputs ({inputsCount}) - Outputs ({outputsCount}) - - Dependencies ({dependenciesCount}) - - - Resources ({resourcesCount}) - - - )} + + Inputs + + + Outputs + + + Dependencies + + + Resources + ); }