OSAC-2932: [UI] Catalog management list page with resource type tabs

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

@@ -1,21 +1,11 @@
 import { Route, Routes } from 'react-router-dom';
 
-import ListPage from '@osac/ui-components/components/Page/ListPage';
-import { useTranslation } from '@osac/ui-components/hooks/useTranslation';
+import CatalogManagementListPage from '@osac/ui-components/pages/admin/CatalogManagementListPage';
 
 export const AdminCatalogRoutes = () => {
-  const { t } = useTranslation();
-
   return (
     <Routes>
-      <Route
-        index
-        element={
-          <ListPage title={t('Catalog management')}>
-            <div />
-          </ListPage>
-        }
-      />
+      <Route index element={<CatalogManagementListPage />} />
       <Route path=":type/create" element={<div />} />
       <Route path=":type/:id" element={<div />} />
       <Route path=":type/:id/edit" element={<div />} />

libs/i18n/locales/en/translation.json

@@ -23,6 +23,7 @@
   "Catalog configuration is unavailable for this virtual machine.": "Catalog configuration is unavailable for this virtual machine.",
   "Catalog item": "Catalog item",
   "Catalog management": "Catalog management",
+  "Catalog management resource type tabs": "Catalog management resource type tabs",
   "catalogProvision.actions.back": "Back",
   "catalogProvision.actions.cancel": "Cancel",
   "catalogProvision.actions.create": "Create",
@@ -146,6 +147,7 @@
   "Failed to load security groups": "Failed to load security groups",
   "Failed to load subnets": "Failed to load subnets",
   "Filter bare metal instances by name": "Filter bare metal instances by name",
+  "Filter by publication status": "Filter by publication status",
   "Filter catalog by keyword": "Filter catalog by keyword",
   "Filter catalog by resource type": "Filter catalog by resource type",
   "Fixed": "Fixed",
@@ -184,6 +186,8 @@
   "No bare metal instances match your search.": "No bare metal instances match your search.",
   "No bare metal instances yet.": "No bare metal instances yet.",
   "No catalog items found": "No catalog items found",
+  "No catalog items have been created yet.": "No catalog items have been created yet.",
+  "No catalog items match your search or filter.": "No catalog items match your search or filter.",
   "No catalog items match your search.": "No catalog items match your search.",
   "No inbound rules yet. Add one to allow incoming traffic.": "No inbound rules yet. Add one to allow incoming traffic.",
   "No node sets added yet.": "No node sets added yet.",
@@ -202,6 +206,8 @@
   "Nodes": "Nodes",
   "Open catalog item details for {{title}}": "Open catalog item details for {{title}}",
   "Optional cloud-init user data (max 64 KB).": "Optional cloud-init user data (max 64 KB).",
+  "Organization": "Organization",
+  "Organization: {{name}}": "Organization: {{name}}",
   "Outbound Rules": "Outbound Rules",
   "Overview": "Overview",
   "Parent virtual network": "Parent virtual network",
@@ -218,6 +224,7 @@
   "Port To": "Port To",
   "Port To is required for TCP/UDP": "Port To is required for TCP/UDP",
   "Port To must be >= Port From": "Port To must be >= Port From",
+  "Project: {{name}}": "Project: {{name}}",
   "Protocol": "Protocol",
   "Protocol is required": "Protocol is required",
   "Provision a bare metal instance from a catalog item.": "Provision a bare metal instance from a catalog item.",
@@ -226,6 +233,7 @@
   "Provisioning failed": "Provisioning failed",
   "Public IP": "Public IP",
   "Public SSH key is required": "Public SSH key is required",
+  "Published": "Published",
   "Pull secret": "Pull secret",
   "Pull secret is required": "Pull secret is required",
   "Pull secrets download OpenShift components and connect clusters to your Red Hat account. Copy the full JSON from OpenShift Cluster Manager (console.redhat.com/openshift/install/pull-secret).": "Pull secrets download OpenShift components and connect clusters to your Red Hat account. Copy the full JSON from OpenShift Cluster Manager (console.redhat.com/openshift/install/pull-secret).",
@@ -270,6 +278,7 @@
   "UDP": "UDP",
   "Unauthorized": "Unauthorized",
   "Unknown": "Unknown",
+  "Unpublished": "Unpublished",
   "Use IPv4 CIDR notation (for example 10.128.0.0/14).": "Use IPv4 CIDR notation (for example 10.128.0.0/14).",
   "Use IPv4 CIDR notation (for example 172.30.0.0/16).": "Use IPv4 CIDR notation (for example 172.30.0.0/16).",
   "User data": "User data",

libs/ui-components/src/api/types.ts

@@ -24,7 +24,10 @@ export type ApiRoute =
   | 'v1/baremetal_instance_catalog_items'
   | 'v1/baremetal_instances'
   | 'v1/public_ips'
-  | 'v1/public_ip_attachments';
+  | 'v1/public_ip_attachments'
+  | 'v1/compute_instance_catalog_items_private'
+  | 'v1/cluster_catalog_items_private'
+  | 'v1/baremetal_instance_catalog_items_private';
 
 /**
  * Strict 3-part tuple that encodes an API address.

libs/ui-components/src/api/v1/baremetal-instance.test.ts

@@ -0,0 +1,201 @@
+import { createRouterTransport } from '@connectrpc/connect';
+import { act, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import type { BareMetalInstanceCatalogItem } from '@osac/types';
+import { BareMetalInstanceCatalogItems } from '@osac/types';
+import type { BareMetalInstanceCatalogItem as PrivateBareMetalInstanceCatalogItem } from '@osac/types/private';
+import { BareMetalInstanceCatalogItems as PrivateBareMetalInstanceCatalogItems } from '@osac/types/private';
+
+import {
+  useAdminBareMetalInstanceCatalogItems,
+  useAdminSetBareMetalInstanceCatalogItemPublished,
+} from './baremetal-instance';
+import { renderHookWithProviders } from '../../test-utils/TestProviders';
+
+const publicItem: BareMetalInstanceCatalogItem = {
+  $typeName: 'osac.public.v1.BareMetalInstanceCatalogItem',
+  id: 'public-1',
+  title: 'Public bare metal item',
+  description: '',
+  template: '',
+  published: true,
+  fieldDefinitions: [],
+};
+
+const privateItem: PrivateBareMetalInstanceCatalogItem = {
+  $typeName: 'osac.private.v1.BareMetalInstanceCatalogItem',
+  id: 'private-1',
+  title: 'Private bare metal item',
+  description: '',
+  template: '',
+  published: true,
+  tenant: '',
+  fieldDefinitions: [],
+};
+
+const createTestTransport = (options: {
+  onPublicList?: () => void;
+  onPrivateList?: () => void;
+  onPublicUpdate?: (req: unknown) => void;
+  onPrivateUpdate?: (req: unknown) => void;
+}) =>
+  createRouterTransport((router) => {
+    router.service(BareMetalInstanceCatalogItems, {
+      list: () => {
+        options.onPublicList?.();
+        return { items: [publicItem] };
+      },
+      update: (req) => {
+        options.onPublicUpdate?.(req);
+        return { object: publicItem };
+      },
+    });
+
+    router.service(PrivateBareMetalInstanceCatalogItems, {
+      list: () => {
+        options.onPrivateList?.();
+        return { items: [privateItem] };
+      },
+      update: (req) => {
+        options.onPrivateUpdate?.(req);
+        return { object: privateItem };
+      },
+    });
+  });
+
+const renderWithSession = <TResult>(
+  hook: () => TResult,
+  role: 'providerAdmin' | 'tenantAdmin',
+  transport: ReturnType<typeof createRouterTransport>,
+) => renderHookWithProviders(hook, { role, transport });
+
+describe('useAdminBareMetalInstanceCatalogItems', () => {
+  it('calls the private List endpoint for providerAdmin', async () => {
+    let privateListCalled = false;
+    let publicListCalled = false;
+    const transport = createTestTransport({
+      onPrivateList: () => {
+        privateListCalled = true;
+      },
+      onPublicList: () => {
+        publicListCalled = true;
+      },
+    });
+
+    const { result } = renderWithSession(
+      () => useAdminBareMetalInstanceCatalogItems(),
+      'providerAdmin',
+      transport,
+    );
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([privateItem]);
+    expect(privateListCalled).toBe(true);
+    expect(publicListCalled).toBe(false);
+  });
+
+  it('calls the public List endpoint for tenantAdmin', async () => {
+    let privateListCalled = false;
+    let publicListCalled = false;
+    const transport = createTestTransport({
+      onPrivateList: () => {
+        privateListCalled = true;
+      },
+      onPublicList: () => {
+        publicListCalled = true;
+      },
+    });
+
+    const { result } = renderWithSession(
+      () => useAdminBareMetalInstanceCatalogItems(),
+      'tenantAdmin',
+      transport,
+    );
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([publicItem]);
+    expect(publicListCalled).toBe(true);
+    expect(privateListCalled).toBe(false);
+  });
+
+  it('does not call either endpoint when disabled', async () => {
+    let privateListCalled = false;
+    let publicListCalled = false;
+    const transport = createTestTransport({
+      onPrivateList: () => {
+        privateListCalled = true;
+      },
+      onPublicList: () => {
+        publicListCalled = true;
+      },
+    });
+
+    renderWithSession(
+      () => useAdminBareMetalInstanceCatalogItems({}, false),
+      'providerAdmin',
+      transport,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(privateListCalled).toBe(false);
+    expect(publicListCalled).toBe(false);
+  });
+});
+
+describe('useAdminSetBareMetalInstanceCatalogItemPublished', () => {
+  it('sends the update with a published field mask to the private client for providerAdmin', async () => {
+    let lastReq: unknown;
+    const transport = createTestTransport({
+      onPrivateUpdate: (req) => {
+        lastReq = req;
+      },
+    });
+
+    const { result } = renderWithSession(
+      () => useAdminSetBareMetalInstanceCatalogItemPublished(),
+      'providerAdmin',
+      transport,
+    );
+
+    act(() => {
+      result.current.mutate({ id: 'private-1', published: false });
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(lastReq).toMatchObject({
+      object: { id: 'private-1', published: false },
+      updateMask: { paths: ['published'] },
+    });
+  });
+
+  it('sends the update to the public client for tenantAdmin', async () => {
+    let lastReq: unknown;
+    let privateCalled = false;
+    const transport = createTestTransport({
+      onPublicUpdate: (req) => {
+        lastReq = req;
+      },
+      onPrivateUpdate: () => {
+        privateCalled = true;
+      },
+    });
+
+    const { result } = renderWithSession(
+      () => useAdminSetBareMetalInstanceCatalogItemPublished(),
+      'tenantAdmin',
+      transport,
+    );
+
+    act(() => {
+      result.current.mutate({ id: 'public-1', published: true });
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(lastReq).toMatchObject({
+      object: { id: 'public-1', published: true },
+      updateMask: { paths: ['published'] },
+    });
+    expect(privateCalled).toBe(false);
+  });
+});

libs/ui-components/src/api/v1/baremetal-instance.ts

@@ -7,9 +7,11 @@ import {
   BareMetalInstanceSchema,
   BareMetalInstances,
 } from '@osac/types';
+import { BareMetalInstanceCatalogItems as PrivateBareMetalInstanceCatalogItems } from '@osac/types/private';
 
+import { useSession } from '../../hooks/use-session';
 import { useApiFetch } from '../api-context';
-import { apiQueryKey } from '../types';
+import { type ListParams, apiQueryKey } from '../types';
 import { type ApiQueryClient, useApiQuery, useApiQueryClient } from '../use-api-query';
 
 export const useBareMetalInstances = () => {
@@ -31,16 +33,60 @@ export const useBareMetalInstance = (id: string) => {
   });
 };
 
-export const useBareMetalInstanceCatalogItems = (enabled = true) => {
+export const useBareMetalInstanceCatalogItems = (params: ListParams = {}, enabled = true) => {
   const client = useApiFetch(BareMetalInstanceCatalogItems);
   return useApiQuery({
-    queryKey: apiQueryKey('v1/baremetal_instance_catalog_items'),
-    queryFn: () => client.list({}),
+    queryKey: apiQueryKey('v1/baremetal_instance_catalog_items', undefined, params),
+    queryFn: () => client.list(params),
     select: (data) => data.items,
     enabled,
   });
 };
 
+/**
+ * Admin list hook for the catalog management pages. CSP Admin (`providerAdmin`) sees all items via
+ * the private API (including unpublished). Tenant Admin sees their tenant's items via the public API —
+ * this currently returns only published items regardless of caller role; unpublished items scoped to
+ * the Tenant Admin's own tenant are not visible through this hook (tracked as a backend limitation in
+ * OSAC-3121).
+ */
+export const useAdminBareMetalInstanceCatalogItems = (params: ListParams = {}, enabled = true) => {
+  const { role } = useSession();
+  const isProviderAdmin = role === 'providerAdmin';
+  const publicResult = useBareMetalInstanceCatalogItems(params, enabled && !isProviderAdmin);
+  const privateClient = useApiFetch(PrivateBareMetalInstanceCatalogItems);
+  const privateResult = useApiQuery({
+    queryKey: apiQueryKey('v1/baremetal_instance_catalog_items_private', undefined, params),
+    queryFn: () => privateClient.list(params),
+    select: (data) => data.items,
+    enabled: enabled && isProviderAdmin,
+  });
+  return isProviderAdmin ? privateResult : publicResult;
+};
+
+export const useAdminSetBareMetalInstanceCatalogItemPublished = () => {
+  const { role } = useSession();
+  const isProviderAdmin = role === 'providerAdmin';
+  const publicClient = useApiFetch(BareMetalInstanceCatalogItems);
+  const privateClient = useApiFetch(PrivateBareMetalInstanceCatalogItems);
+  const qc = useApiQueryClient();
+  return useMutation({
+    mutationFn: ({ id, published }: { id: string; published: boolean }): Promise<void> =>
+      (isProviderAdmin
+        ? privateClient.update({ object: { id, published }, updateMask: { paths: ['published'] } })
+        : publicClient.update({ object: { id, published }, updateMask: { paths: ['published'] } })
+      ).then(() => undefined),
+    onSuccess: () =>
+      qc.invalidateQueries({
+        queryKey: apiQueryKey(
+          isProviderAdmin
+            ? 'v1/baremetal_instance_catalog_items_private'
+            : 'v1/baremetal_instance_catalog_items',
+        ),
+      }),
+  });
+};
+
 export const invalidateBareMetalInstancesQueries = async (qc: ApiQueryClient) => {
   await qc.invalidateQueries({ queryKey: apiQueryKey('v1/baremetal_instances') });
 };