Implement the version from the design

Signed-off-by: Damian Stasik <[email protected]>

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";

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";

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 (
-    <TreeViewItem>
-      <NavLink
-        end={end}
-        to={to}
-        className={({ isActive }) =>
-          `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}
-      </NavLink>
-    </TreeViewItem>
+export function ModuleTabLink({
+  to,
+  children,
+  end,
+  count,
+  disabled,
+}: ModuleTabLinkProps) {
+  const sharedClasses = "flex px-4 py-2";
+
+  const component = disabled ? (
+    <button
+      disabled
+      className={clsx(sharedClasses, "justify-between text-gray-500")}
+    >
+      {children}
+      <Icon path={lock} className="size-em" />
+    </button>
+  ) : (
+    <NavLink
+      end={end}
+      to={to}
+      className={({ isActive }) =>
+        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})`}
+    </NavLink>
   );
+
+  return <TreeViewItem>{component}</TreeViewItem>;
 }

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 (
     <Wrapper>
@@ -35,6 +39,7 @@ export function ModuleHeader() {
           {data.addr.namespace}/{data.addr.name}
         </PageTitle>
         {data.description && <Paragraph>{data.description}</Paragraph>}
+        {!!versionData.schema_error && <ModuleSchemaError />}
       </div>
       <InfoSection>
         <InfoSectionItem label="Owner">{data.addr.namespace}</InfoSectionItem>

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 (
+    <div className="flex items-center gap-3 bg-brand-500/50 px-4 py-4 dark:bg-brand-800">
+      <Icon
+        path={warning}
+        className="size-em text-brand-800 dark:text-brand-600"
+      />
+      We were unable to parse the schema for this module.
+    </div>
+  );
+}

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 (
     <TreeView className="mr-4 mt-4">
       <ModuleTabLink to="." end>
         Readme
       </ModuleTabLink>
-      {!data.schema_error && (
-        <>
-          <ModuleTabLink to="inputs">Inputs ({inputsCount})</ModuleTabLink>
-          <ModuleTabLink to="outputs">Outputs ({outputsCount})</ModuleTabLink>
-          <ModuleTabLink to="dependencies">
-            Dependencies ({dependenciesCount})
-          </ModuleTabLink>
-          <ModuleTabLink to="resources">
-            Resources ({resourcesCount})
-          </ModuleTabLink>
-        </>
-      )}
+      <ModuleTabLink to="inputs" count={inputsCount} disabled={hasSchemaError}>
+        Inputs
+      </ModuleTabLink>
+      <ModuleTabLink
+        to="outputs"
+        count={outputsCount}
+        disabled={hasSchemaError}
+      >
+        Outputs
+      </ModuleTabLink>
+      <ModuleTabLink
+        to="dependencies"
+        count={dependenciesCount}
+        disabled={hasSchemaError}
+      >
+        Dependencies
+      </ModuleTabLink>
+      <ModuleTabLink
+        to="resources"
+        count={resourcesCount}
+        disabled={hasSchemaError}
+      >
+        Resources
+      </ModuleTabLink>
     </TreeView>
   );
 }