OSAC-2934: [UI] Catalog item detail page - #106
Conversation
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
… kind Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
…gination Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
…oggle Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
…ty comment Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
…C-2933 lands Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
…stance kinds Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
|
@ElayAharoni: This pull request references OSAC-2934 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "5.0.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: ElayAharoni The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository: osac-project/coderabbit/.coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (14)
WalkthroughCatalog management now supports typed detail routing, catalog-scoped resource queries, sanitized Markdown, field-definition summaries, action controls, provisioned-resource tabs, and role-aware detail pages for clusters, compute instances, and bare-metal instances. ChangesCatalog detail routing
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant AdminCatalogRoutes
participant CatalogItemDetailPage
participant CatalogItemAPI
participant CatalogItemDetails
participant ProvisionedResourcesAPI
AdminCatalogRoutes->>CatalogItemDetailPage: dispatch type and id
CatalogItemDetailPage->>CatalogItemAPI: fetch public or private item
CatalogItemDetailPage->>CatalogItemDetails: provide item and template data
CatalogItemDetails->>ProvisionedResourcesAPI: fetch catalog-scoped resources
ProvisionedResourcesAPI-->>CatalogItemDetails: return items and total
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 11✅ Passed checks (11 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…rnally Replaces the single kind-switching CatalogItemProvisionedResourcesTab with three per-kind components (Cluster/ComputeInstance/BareMetalInstance), each calling only its own hook — matching the per-kind convention used elsewhere in catalog management (list panels, create wizard pages). CatalogItemDetails now derives its kind from catalogItem.$typeName via catalogItemDetailKind() instead of requiring callers to pass a redundant kind prop. Addresses review feedback from rawagner on PR osac-project#106. Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
…rnary CatalogItemDetailActionButtons duplicated the same "isDisabled ? <Tooltip>...</Tooltip> : <Component>" branch for the publish toggle and the Delete button. Extracts a shared WithTooltip primitive (mirroring flightctl-ui's component of the same name) that conditionally wraps children in a Tooltip, with an opt-in span wrapper for controls that don't fire hover/focus events while disabled (e.g. a disabled Switch). Addresses review feedback from rawagner on PR osac-project#106. Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@libs/ui-components/src/api/v1/baremetal-instance-templates.ts`:
- Around line 7-15: Both template hooks must trim IDs before query gating and
RPC use. In libs/ui-components/src/api/v1/baremetal-instance-templates.ts lines
7-15, update useBareMetalInstanceTemplate to derive trimmedId, then use it for
queryKey, client.get, and enabled. Apply the same change to
useComputeInstanceTemplate in
libs/ui-components/src/api/v1/compute-instance-templates.ts lines 7-15.
In `@libs/ui-components/src/api/v1/private/cluster-catalog-item.ts`:
- Around line 17-25: The private hooks use public generated services, so their
get() calls reach published-only endpoints. Update usePrivateClusterCatalogItem
in libs/ui-components/src/api/v1/private/cluster-catalog-item.ts lines 17-25,
usePrivateBaremetalInstanceCatalogItem in
libs/ui-components/src/api/v1/private/baremetal-instance-catalog-item.ts lines
20-30, and usePrivateComputeInstanceCatalogItem in
libs/ui-components/src/api/v1/private/compute-instance-catalog-item.ts lines
17-28 to pass the corresponding private RPC client or route to useApiFetch,
while preserving their existing query keys and enabled conditions.
In `@libs/ui-components/src/components/catalog/catalogItemDisplay.ts`:
- Around line 190-196: Update the integer hint logic in catalog item display so
schema.type === 'integer' always adds the “whole number” summary text, including
when minimum or maximum bounds are present. Remove the bound-type guard while
preserving the existing bound summary behavior and update the related
catalogItemDisplay test expectation.
In
`@libs/ui-components/src/components/catalogManagement/CatalogItemDetailActionButtons.test.tsx`:
- Around line 69-99: Update the catalogItem metadata fixtures in both
tenantAdmin tests to use complete osac.public.v1.Metadata objects, including
required fields such as name, creator, labels, annotations, and version. Remove
both as never casts while preserving the tenant and project scope values used by
each test.
In
`@libs/ui-components/src/components/catalogManagement/catalogItemDetailKind.ts`:
- Around line 16-20: Update the default branch of the item type mapping around
exhaustiveCheck so unrecognized $typeName values no longer return
'compute-instance'. Preserve the compile-time never check, and instead emit a
warning or return the established unsupported catalog-item state so unexpected
backend types are visible and cannot select the compute-instance route.
In
`@libs/ui-components/src/components/catalogManagement/CatalogItemOverviewTab.tsx`:
- Around line 51-66: Preserve Markdown-significant whitespace in the description
rendering within CatalogItemOverviewTab by using a trimmed value only for the
emptiness check, while passing the original catalogItem.description to
SanitizedMarkdown. Keep displayValue() for empty descriptions and add a
regression test covering an indented code block or trailing-space hard line
break.
In `@libs/ui-components/src/pages/admin/cluster/ClusterCatalogItemDetailPage.tsx`:
- Around line 9-37: Extract the duplicated role-gated catalog-item and template
resolution into a shared generic hook, such as useCatalogItemDetailData,
preserving the active query result, loading/error state, retry function, and
resolved template. Update ClusterCatalogItemDetailPage.tsx lines 9-37,
ComputeInstanceCatalogItemDetailPage.tsx lines 9-37, and
BareMetalInstanceCatalogItemDetailPage.tsx lines 9-37 to call the shared hook
with their respective public, private, and template hooks, then pass its results
to each existing shell.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: osac-project/coderabbit/.coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c9958d86-d6bd-4e75-8072-25a70ec75f73
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (60)
apps/app-frontend/src/shell/AdminCatalogRoutes.test.tsxapps/app-frontend/src/shell/AdminCatalogRoutes.tsxlibs/i18n/locales/en/translation.jsonlibs/types/src/index.tslibs/ui-components/package.jsonlibs/ui-components/src/api/cel.test.tslibs/ui-components/src/api/cel.tslibs/ui-components/src/api/types.tslibs/ui-components/src/api/v1/baremetal-instance-templates.test.tslibs/ui-components/src/api/v1/baremetal-instance-templates.tslibs/ui-components/src/api/v1/baremetal-instance.test.tslibs/ui-components/src/api/v1/baremetal-instance.tslibs/ui-components/src/api/v1/cluster.test.tslibs/ui-components/src/api/v1/cluster.tslibs/ui-components/src/api/v1/compute-instance-templates.test.tslibs/ui-components/src/api/v1/compute-instance-templates.tslibs/ui-components/src/api/v1/compute-instance.test.tslibs/ui-components/src/api/v1/compute-instance.tslibs/ui-components/src/api/v1/networking.test.tslibs/ui-components/src/api/v1/networking.tslibs/ui-components/src/api/v1/private/baremetal-instance-catalog-item.test.tslibs/ui-components/src/api/v1/private/baremetal-instance-catalog-item.tslibs/ui-components/src/api/v1/private/cluster-catalog-item.test.tslibs/ui-components/src/api/v1/private/cluster-catalog-item.tslibs/ui-components/src/api/v1/private/compute-instance-catalog-item.test.tslibs/ui-components/src/api/v1/private/compute-instance-catalog-item.tslibs/ui-components/src/components/Primitives/SanitizedMarkdown.test.tsxlibs/ui-components/src/components/Primitives/SanitizedMarkdown.tsxlibs/ui-components/src/components/Primitives/WithTooltip.test.tsxlibs/ui-components/src/components/Primitives/WithTooltip.tsxlibs/ui-components/src/components/catalog/catalogItemDisplay.test.tslibs/ui-components/src/components/catalog/catalogItemDisplay.tslibs/ui-components/src/components/catalogManagement/BareMetalInstanceProvisionedResourcesTab.test.tsxlibs/ui-components/src/components/catalogManagement/BareMetalInstanceProvisionedResourcesTab.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemDetailActionButtons.test.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemDetailActionButtons.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemDetails.test.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemDetails.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemFieldDefinitionsTab.test.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemFieldDefinitionsTab.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemOverviewTab.test.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemOverviewTab.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemPublishToggle.test.tsxlibs/ui-components/src/components/catalogManagement/CatalogItemPublishToggle.tsxlibs/ui-components/src/components/catalogManagement/ClusterProvisionedResourcesTab.test.tsxlibs/ui-components/src/components/catalogManagement/ClusterProvisionedResourcesTab.tsxlibs/ui-components/src/components/catalogManagement/ComputeInstanceProvisionedResourcesTab.test.tsxlibs/ui-components/src/components/catalogManagement/ComputeInstanceProvisionedResourcesTab.tsxlibs/ui-components/src/components/catalogManagement/ProvisionedResourcesTable.test.tsxlibs/ui-components/src/components/catalogManagement/ProvisionedResourcesTable.tsxlibs/ui-components/src/components/catalogManagement/catalogItemDetailKind.test.tslibs/ui-components/src/components/catalogManagement/catalogItemDetailKind.tslibs/ui-components/src/pages/admin/CatalogItemDetailPageShell.test.tsxlibs/ui-components/src/pages/admin/CatalogItemDetailPageShell.tsxlibs/ui-components/src/pages/admin/baremetal-instance/BareMetalInstanceCatalogItemDetailPage.test.tsxlibs/ui-components/src/pages/admin/baremetal-instance/BareMetalInstanceCatalogItemDetailPage.tsxlibs/ui-components/src/pages/admin/cluster/ClusterCatalogItemDetailPage.test.tsxlibs/ui-components/src/pages/admin/cluster/ClusterCatalogItemDetailPage.tsxlibs/ui-components/src/pages/admin/compute-instance/ComputeInstanceCatalogItemDetailPage.test.tsxlibs/ui-components/src/pages/admin/compute-instance/ComputeInstanceCatalogItemDetailPage.tsx
💤 Files with no reviewable changes (1)
- libs/ui-components/src/api/v1/networking.test.ts
useComputeInstanceTemplate and useBareMetalInstanceTemplate checked Boolean(id) directly instead of trimming first, so a whitespace-only id slipped past the enabled guard and reached the Get RPC. Addresses CodeRabbit review feedback on PR osac-project#106. Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
formatCatalogFieldValidationSummary suppressed the "whole number" hint whenever minimum/maximum was also present, silently dropping the integer constraint from the summary shown next to a bounded integer field. Addresses CodeRabbit review feedback on PR osac-project#106. Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
…tests CatalogItemDetailActionButtons.test.tsx cast partial metadata objects to never to satisfy the public Metadata type, bypassing type checking on the fixtures entirely. Adds a publicMetadata() builder providing the full required shape (name, creator, labels, annotations, version) instead. Addresses CodeRabbit review feedback on PR osac-project#106. Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
CatalogItemOverviewTab trimmed the description before handing it to SanitizedMarkdown, which strips leading indentation needed for indented code blocks and trailing hard-line-break spaces. Trim only to decide whether a description is present; render the original string. Addresses CodeRabbit review feedback on PR osac-project#106. Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
The three kind-specific catalog item detail pages duplicated identical role-gated public/private hook selection plus template resolution, with only the hook triplet swapped per kind. Collapses that into a single generic useCatalogItemDetailData hook so the role-gating logic lives in one place. Addresses CodeRabbit review feedback on PR osac-project#106. Assisted-by: Claude Code <noreply@anthropic.com> Signed-off-by: Elay Aharoni <elayaha@gmail.com>
|
PR needs rebase. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
OSAC-2934: [UI] Catalog item detail page
Jira: https://redhat.atlassian.net/browse/OSAC-2934
Story type: [UI]
Summary
Adds a catalog item detail page at
/admin/catalog/:type/:idfor Cluster, ComputeInstance, and BareMetalInstance catalog items. The page shows a header (name, publication status, breadcrumb, role/scope-gated action buttons) above three tabs: Overview, Field Definitions (read-only table), and Provisioned Resources (server-side-paginated list, filtered via CEL to resources created from the catalog item). This is the first story to introduce server-side pagination and Markdown rendering in this codebase.Changes
API hooks (
libs/ui-components/src/api/)cel.ts(new) — shared CEL string-escaping and catalog-item filter builder, extracted fromnetworking.tsuse*ForCatalogItempaginated provisioned-resources hooks (Cluster/ComputeInstance/BareMetalInstance)useComputeInstanceTemplate/useBareMetalInstanceTemplatehooks, mirroring the existinguseClusterTemplate— required wiringBareMetalInstanceTemplatesinto the shared@osac/typesbarrel export, which was missing for that kindComponents (
libs/ui-components/src/components/)Primitives/SanitizedMarkdown.tsx—react-markdown+rehype-sanitizewrapper for descriptionscatalog/catalogItemDisplay.ts—formatCatalogFieldValidationSummary(i18n-aware)catalogManagement/CatalogItem{OverviewTab,FieldDefinitionsTab,ProvisionedResourcesTab,PublishToggle,DetailActionButtons,Details}.tsx— the tab content, header actions, and composing detail componentPages/routing
pages/admin/{cluster,compute-instance,baremetal-instance}/, sharing a commonCatalogItemDetailPageShellfor loading/error/not-found handlingAdminCatalogRoutes.tsx— wires:type/:idto the three pagesKnown, deliberate scope boundary
The header's Delete button and publish/unpublish toggle are disabled with an explanatory tooltip ("Deleting and publishing catalog items is not yet available."). Wiring real delete/publish mutations is OSAC-2933's scope — these components already expose
onDeleteClick/onTogglePublishcallback props so OSAC-2933 can supply real implementations without touching these files.Testing
javascript:URLs, i18n interpolation).pnpm test), lint, and typecheck all pass.Acceptance Criteria
/admin/catalog/:type/:idthis.spec.catalog_item == "<id>"CEL filterFlex justifyContentSpaceBetweenlayoutjavascript:URLsSummary by CodeRabbit