OSAC-2936: add catalog item create wizard for Cluster, VM, and Bare Metal

apps/app-frontend/src/main.tsx

@@ -8,10 +8,12 @@ import { ApiProvider, connectErrorInterceptor } from '@osac/ui-components/api/ap
 
 import App from './App';
 import './i18n';
+import { wellKnownTypeRegistry } from './wellKnownTypeRegistry';
 
 const connectTransport = createConnectTransport({
   baseUrl: '/api/fulfillment',
   interceptors: [connectErrorInterceptor],
+  jsonOptions: { registry: wellKnownTypeRegistry },
 });
 
 // CSS load order is intentional: base → addons → local overrides

apps/app-frontend/src/shell/AdminCatalogRoutes.test.tsx

@@ -0,0 +1,65 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { AdminCatalogRoutes } from './AdminCatalogRoutes';
+
+vi.mock('@osac/ui-components/pages/admin/cluster/ClusterCatalogItemCreatePage', () => ({
+  default: () => <div>Cluster create page</div>,
+}));
+vi.mock(
+  '@osac/ui-components/pages/admin/compute-instance/ComputeInstanceCatalogItemCreatePage',
+  () => ({
+    default: () => <div>Compute instance create page</div>,
+  }),
+);
+vi.mock(
+  '@osac/ui-components/pages/admin/baremetal-instance/BareMetalInstanceCatalogItemCreatePage',
+  () => ({
+    default: () => <div>Bare metal create page</div>,
+  }),
+);
+vi.mock('@osac/ui-components/pages/admin/CatalogManagementListPage', () => ({
+  default: () => <div>Catalog management list page</div>,
+}));
+vi.mock('@osac/ui-components/hooks/useTranslation', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+// Mounted at /admin/catalog/* to match the real route registered in AppShell.tsx, so
+// AdminCatalogRoutes' internal <Navigate to="/admin/catalog" /> fallback resolves correctly.
+const renderAt = (path: string) =>
+  render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path="/admin/catalog/*" element={<AdminCatalogRoutes />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+
+describe('AdminCatalogRoutes', () => {
+  it('renders the cluster create page for :type = cluster', () => {
+    renderAt('/admin/catalog/cluster/create');
+
+    expect(screen.getByText('Cluster create page')).toBeInTheDocument();
+  });
+
+  it('renders the compute instance create page for :type = compute-instance', () => {
+    renderAt('/admin/catalog/compute-instance/create');
+
+    expect(screen.getByText('Compute instance create page')).toBeInTheDocument();
+  });
+
+  it('renders the bare metal create page for :type = baremetal-instance', () => {
+    renderAt('/admin/catalog/baremetal-instance/create');
+
+    expect(screen.getByText('Bare metal create page')).toBeInTheDocument();
+  });
+
+  it('redirects to the list page for an unrecognized :type', () => {
+    renderAt('/admin/catalog/not-a-real-type/create');
+
+    expect(screen.getByText('Catalog management list page')).toBeInTheDocument();
+    expect(screen.queryByText('Cluster create page')).not.toBeInTheDocument();
+  });
+});

apps/app-frontend/src/shell/AdminCatalogRoutes.tsx

@@ -1,12 +1,30 @@
-import { Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes, useParams } from 'react-router-dom';
 
+import BareMetalInstanceCatalogItemCreatePage from '@osac/ui-components/pages/admin/baremetal-instance/BareMetalInstanceCatalogItemCreatePage';
 import CatalogManagementListPage from '@osac/ui-components/pages/admin/CatalogManagementListPage';
+import ClusterCatalogItemCreatePage from '@osac/ui-components/pages/admin/cluster/ClusterCatalogItemCreatePage';
+import ComputeInstanceCatalogItemCreatePage from '@osac/ui-components/pages/admin/compute-instance/ComputeInstanceCatalogItemCreatePage';
+
+const CatalogItemCreateRoute = () => {
+  const { type } = useParams<{ type: string }>();
+
+  switch (type) {
+    case 'cluster':
+      return <ClusterCatalogItemCreatePage />;
+    case 'compute-instance':
+      return <ComputeInstanceCatalogItemCreatePage />;
+    case 'baremetal-instance':
+      return <BareMetalInstanceCatalogItemCreatePage />;
+    default:
+      return <Navigate to="/admin/catalog" replace />;
+  }
+};
 
 export const AdminCatalogRoutes = () => {
   return (
     <Routes>
       <Route index element={<CatalogManagementListPage />} />
-      <Route path=":type/create" element={<div />} />
+      <Route path=":type/create" element={<CatalogItemCreateRoute />} />
       <Route path=":type/:id" element={<div />} />
       <Route path=":type/:id/edit" element={<div />} />
     </Routes>

apps/app-frontend/src/wellKnownTypeRegistry.test.ts

@@ -0,0 +1,41 @@
+import { fromJson } from '@bufbuild/protobuf';
+import { AnySchema } from '@bufbuild/protobuf/wkt';
+import { describe, expect, it } from 'vitest';
+
+import { wellKnownTypeRegistry } from './wellKnownTypeRegistry';
+
+describe('wellKnownTypeRegistry', () => {
+  it.each([
+    ['google.protobuf.BoolValue', true],
+    ['google.protobuf.BytesValue', 'AQI='],
+    ['google.protobuf.StringValue', 'hello'],
+    ['google.protobuf.Int32Value', 42],
+    ['google.protobuf.Int64Value', '42'],
+    ['google.protobuf.UInt32Value', 42],
+    ['google.protobuf.UInt64Value', '42'],
+    ['google.protobuf.DoubleValue', 4.2],
+    ['google.protobuf.FloatValue', 4.2],
+    ['google.protobuf.Value', { nested: true }],
+    ['google.protobuf.Struct', { nested: true }],
+    ['google.protobuf.ListValue', [1, 2, 3]],
+    ['google.protobuf.Timestamp', '2026-01-01T00:00:00Z'],
+    ['google.protobuf.Duration', '5s'],
+  ])('resolves %s packed in a google.protobuf.Any', (typeName, value) => {
+    const decode = () =>
+      fromJson(
+        AnySchema,
+        { '@type': `type.googleapis.com/${typeName}`, value },
+        { registry: wellKnownTypeRegistry },
+      );
+    expect(decode).not.toThrow();
+  });
+
+  it('fails to resolve an Any-packed well-known type without the registry', () => {
+    const decode = () =>
+      fromJson(AnySchema, {
+        '@type': 'type.googleapis.com/google.protobuf.BoolValue',
+        value: true,
+      });
+    expect(decode).toThrow(/not in the type registry/);
+  });
+});

apps/app-frontend/src/wellKnownTypeRegistry.ts

@@ -0,0 +1,42 @@
+import { createRegistry } from '@bufbuild/protobuf';
+import {
+  BoolValueSchema,
+  BytesValueSchema,
+  DoubleValueSchema,
+  DurationSchema,
+  FloatValueSchema,
+  Int32ValueSchema,
+  Int64ValueSchema,
+  ListValueSchema,
+  StringValueSchema,
+  StructSchema,
+  TimestampSchema,
+  UInt32ValueSchema,
+  UInt64ValueSchema,
+  ValueSchema,
+} from '@bufbuild/protobuf/wkt';
+
+// google.protobuf.Any is decoded by looking up its packed type by name in a registry — unlike a
+// field with a static well-known type (e.g. metadata.creation_timestamp), Any's packed type is
+// only known at runtime from its "@type" URL. Without an entry here, @bufbuild/protobuf throws
+// "cannot decode message google.protobuf.Any from JSON: <type> is not in the type registry".
+//
+// ClusterTemplateParameterDefinition.default (and the equivalent field on other template types) is
+// documented to pack one of these well-known types, so all of them must be registered for the
+// catalog item wizards' template dropdowns to decode successfully.
+export const wellKnownTypeRegistry = createRegistry(
+  BoolValueSchema,
+  BytesValueSchema,
+  DoubleValueSchema,
+  DurationSchema,
+  FloatValueSchema,
+  Int32ValueSchema,
+  Int64ValueSchema,
+  ListValueSchema,
+  StringValueSchema,
+  StructSchema,
+  TimestampSchema,
+  UInt32ValueSchema,
+  UInt64ValueSchema,
+  ValueSchema,
+);