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/private/compute_instance_catalog_items'
+  | 'v1/private/cluster_catalog_items'
+  | 'v1/private/baremetal_instance_catalog_items';
 
 /**
  * Strict 3-part tuple that encodes an API address.

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

@@ -0,0 +1,55 @@
+import { createRouterTransport } from '@connectrpc/connect';
+import { waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import type { BareMetalInstanceCatalogItem } from '@osac/types';
+import { BareMetalInstanceCatalogItems } from '@osac/types';
+
+import { useBareMetalInstanceCatalogItems } from './baremetal-instance';
+import { renderHookWithProviders } from '../../test-utils/TestProviders';
+
+const item: BareMetalInstanceCatalogItem = {
+  $typeName: 'osac.public.v1.BareMetalInstanceCatalogItem',
+  id: 'public-1',
+  title: 'Public bare metal item',
+  description: '',
+  template: '',
+  published: true,
+  fieldDefinitions: [],
+};
+
+describe('useBareMetalInstanceCatalogItems', () => {
+  it('fetches items from the public BareMetalInstanceCatalogItems List endpoint', async () => {
+    const transport = createRouterTransport((router) => {
+      router.service(BareMetalInstanceCatalogItems, { list: () => ({ items: [item] }) });
+    });
+
+    const { result } = renderHookWithProviders(() => useBareMetalInstanceCatalogItems(), {
+      role: 'tenantAdmin',
+      transport,
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([item]);
+  });
+
+  it('does not fetch when disabled', async () => {
+    let listCalled = false;
+    const transport = createRouterTransport((router) => {
+      router.service(BareMetalInstanceCatalogItems, {
+        list: () => {
+          listCalled = true;
+          return { items: [item] };
+        },
+      });
+    });
+
+    renderHookWithProviders(() => useBareMetalInstanceCatalogItems({}, false), {
+      role: 'tenantAdmin',
+      transport,
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(listCalled).toBe(false);
+  });
+});

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

@@ -9,7 +9,7 @@ import {
 } from '@osac/types';
 
 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,11 +31,11 @@ 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,
   });

libs/ui-components/src/api/v1/cluster-catalog-item.test.ts

@@ -0,0 +1,55 @@
+import { createRouterTransport } from '@connectrpc/connect';
+import { waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import type { ClusterCatalogItem } from '@osac/types';
+import { ClusterCatalogItems } from '@osac/types';
+
+import { useClusterCatalogItems } from './cluster-catalog-item';
+import { renderHookWithProviders } from '../../test-utils/TestProviders';
+
+const item: ClusterCatalogItem = {
+  $typeName: 'osac.public.v1.ClusterCatalogItem',
+  id: 'public-1',
+  title: 'Public cluster item',
+  description: '',
+  template: '',
+  published: true,
+  fieldDefinitions: [],
+};
+
+describe('useClusterCatalogItems', () => {
+  it('fetches items from the public ClusterCatalogItems List endpoint', async () => {
+    const transport = createRouterTransport((router) => {
+      router.service(ClusterCatalogItems, { list: () => ({ items: [item] }) });
+    });
+
+    const { result } = renderHookWithProviders(() => useClusterCatalogItems(), {
+      role: 'tenantAdmin',
+      transport,
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([item]);
+  });
+
+  it('does not fetch when disabled', async () => {
+    let listCalled = false;
+    const transport = createRouterTransport((router) => {
+      router.service(ClusterCatalogItems, {
+        list: () => {
+          listCalled = true;
+          return { items: [item] };
+        },
+      });
+    });
+
+    renderHookWithProviders(() => useClusterCatalogItems({}, false), {
+      role: 'tenantAdmin',
+      transport,
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(listCalled).toBe(false);
+  });
+});

libs/ui-components/src/api/v1/compute-instance-catalog-item.test.ts

@@ -0,0 +1,55 @@
+import { createRouterTransport } from '@connectrpc/connect';
+import { waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import type { ComputeInstanceCatalogItem } from '@osac/types';
+import { ComputeInstanceCatalogItems } from '@osac/types';
+
+import { useComputeInstanceCatalogItems } from './compute-instance-catalog-item';
+import { renderHookWithProviders } from '../../test-utils/TestProviders';
+
+const item: ComputeInstanceCatalogItem = {
+  $typeName: 'osac.public.v1.ComputeInstanceCatalogItem',
+  id: 'public-1',
+  title: 'Public VM item',
+  description: '',
+  template: '',
+  published: true,
+  fieldDefinitions: [],
+};
+
+describe('useComputeInstanceCatalogItems', () => {
+  it('fetches items from the public ComputeInstanceCatalogItems List endpoint', async () => {
+    const transport = createRouterTransport((router) => {
+      router.service(ComputeInstanceCatalogItems, { list: () => ({ items: [item] }) });
+    });
+
+    const { result } = renderHookWithProviders(() => useComputeInstanceCatalogItems(), {
+      role: 'tenantAdmin',
+      transport,
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([item]);
+  });
+
+  it('does not fetch when disabled', async () => {
+    let listCalled = false;
+    const transport = createRouterTransport((router) => {
+      router.service(ComputeInstanceCatalogItems, {
+        list: () => {
+          listCalled = true;
+          return { items: [item] };
+        },
+      });
+    });
+
+    renderHookWithProviders(() => useComputeInstanceCatalogItems({}, false), {
+      role: 'tenantAdmin',
+      transport,
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(listCalled).toBe(false);
+  });
+});

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

@@ -0,0 +1,56 @@
+import { createRouterTransport } from '@connectrpc/connect';
+import { waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import type { BareMetalInstanceCatalogItem } from '@osac/types/private';
+import { BareMetalInstanceCatalogItems } from '@osac/types/private';
+
+import { usePrivateBareMetalInstanceCatalogItems } from './baremetal-instance-catalog-item';
+import { renderHookWithProviders } from '../../../test-utils/TestProviders';
+
+const item: BareMetalInstanceCatalogItem = {
+  $typeName: 'osac.private.v1.BareMetalInstanceCatalogItem',
+  id: 'private-1',
+  title: 'Private bare metal item',
+  description: '',
+  template: '',
+  published: true,
+  tenant: 'acme-corp',
+  fieldDefinitions: [],
+};
+
+describe('usePrivateBareMetalInstanceCatalogItems', () => {
+  it('fetches items from the private BareMetalInstanceCatalogItems List endpoint', async () => {
+    const transport = createRouterTransport((router) => {
+      router.service(BareMetalInstanceCatalogItems, { list: () => ({ items: [item] }) });
+    });
+
+    const { result } = renderHookWithProviders(() => usePrivateBareMetalInstanceCatalogItems(), {
+      role: 'providerAdmin',
+      transport,
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual([item]);
+  });
+
+  it('does not fetch when disabled', async () => {
+    let listCalled = false;
+    const transport = createRouterTransport((router) => {
+      router.service(BareMetalInstanceCatalogItems, {
+        list: () => {
+          listCalled = true;
+          return { items: [item] };
+        },
+      });
+    });
+
+    renderHookWithProviders(() => usePrivateBareMetalInstanceCatalogItems({}, false), {
+      role: 'providerAdmin',
+      transport,
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(listCalled).toBe(false);
+  });
+});

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

@@ -0,0 +1,18 @@
+import { BareMetalInstanceCatalogItems } from '@osac/types/private';
+
+import { useApiFetch } from '../../api-context';
+import { type ListParams, apiQueryKey } from '../../types';
+import { useApiQuery } from '../../use-api-query';
+
+export const usePrivateBareMetalInstanceCatalogItems = (
+  params: ListParams = {},
+  enabled = true,
+) => {
+  const client = useApiFetch(BareMetalInstanceCatalogItems);
+  return useApiQuery({
+    queryKey: apiQueryKey('v1/private/baremetal_instance_catalog_items', undefined, params),
+    queryFn: () => client.list(params),
+    select: (data) => data.items,
+    enabled,
+  });
+};