[release-4.21] OCPBUGS-86427: Fix Shipwright detail pages crashing with React error #310

[sg00dwin]

Analysis / Root cause:

useShipwrightBreadcrumbsFor is a React hook containing 6 sub-hooks (useActivePerspective, useParams, useLocation, useTranslation, useConsoleSelector, useMemo) that was incorrectly passed as a plain callback via the breadcrumbsFor prop to DetailsPage.

Inside ConnectedPageHeading, breadcrumbsFor is called conditionally based on data loading state:

breadcrumbs={!_.isEmpty(data) ? breadcrumbsFor(data) : null}

This violates React's Rules of Hooks. On the first render (data empty), 0 hooks are invoked via breadcrumbsFor; on re-render (data loaded), 6 hooks are invoked.

This bug was latent since commit e98f1e58b1 (Aug 2024, ODC-7632). On OCP 4.19, ConnectedPageHeading had no hooks of its own, so React couldn't detect the violation. On OCP 4.20+, commit f803a25cb7 added 3 hooks to ConnectedPageHeading, causing React to detect the hook count mismatch (3 → 9) and throw error #310: "Rendered more hooks than during the previous render."

All 4 Shipwright detail pages are affected: Build, BuildRun, BuildStrategy, and ClusterBuildStrategy.

Linked Jira: https://issues.redhat.com/browse/OCPBUGS-86427
Parent Jira: https://issues.redhat.com/browse/OCPBUGS-84214
Support Cases: 04362500, 04425432, 04430794

Solution description:

Refactored all 4 affected detail pages to call useShipwrightBreadcrumbsFor unconditionally at the component level using their existing use*Model() hooks, and pass the result as a closure:

// Before (broken — hook passed as callback, called conditionally)
<DetailsPage breadcrumbsFor={useShipwrightBreadcrumbsFor} />

// After (fixed — hook called at top level, result passed as closure)
const model = useBuildModel();
const breadcrumbs = useShipwrightBreadcrumbsFor(model);
<DetailsPage breadcrumbsFor={() => breadcrumbs} />

This follows the established pattern used by the knative plugin (ServiceDetailsPage.tsx).

Also changed useShipwrightBreadcrumbsFor to accept a K8sModel directly instead of a K8sResourceKind, and removed the now-dead resourceToModel function (30 lines).

This is a manual backport of #16474 to release-4.21.

Test setup:

1. OCP 4.21 cluster with the Builds for Red Hat OpenShift Operator installed (v1.7.1 or v1.7.2)
2. At least one ClusterBuildStrategy deployed (e.g., buildah — typically installed by the operator automatically)

Test cases:

1. Navigate to /k8s/cluster/shipwright.io~v1beta1~ClusterBuildStrategy/buildah — page should render without crash, breadcrumbs should show correctly
2. Navigate to a namespaced BuildStrategy, Build, and BuildRun detail page — all should render without crash
3. Verify breadcrumb links navigate back to the correct list pages
4. Verify tab switching (Details, YAML, BuildRuns, Events, Logs) works without errors
5. Verify no React warnings or errors in the browser console

Browser conformance:

• Chrome
• Firefox
• Safari

Backport plan

4.22 (#16485 - merged), 4.21 (this PR), 4.20

Additional info:

• 5 files changed, 21 insertions, 41 deletions — all changes confined to shipwright-plugin
• Zero console core changes
• TypeScript compiles clean with zero new errors

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 30862331-39e1-4526-8f05-ef507cf43eb4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-86427, which is invalid:

• expected Jira Issue OCPBUGS-86427 to depend on a bug targeting a version in 4.22.0 and in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA), but no dependents were found

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Analysis / Root cause:

useShipwrightBreadcrumbsFor is a React hook containing 6 sub-hooks (useActivePerspective, useParams, useLocation, useTranslation, useConsoleSelector, useMemo) that was incorrectly passed as a plain callback via the breadcrumbsFor prop to DetailsPage.

Inside ConnectedPageHeading, breadcrumbsFor is called conditionally based on data loading state:

breadcrumbs={!_.isEmpty(data) ? breadcrumbsFor(data) : null}

This violates React's Rules of Hooks. On the first render (data empty), 0 hooks are invoked via breadcrumbsFor; on re-render (data loaded), 6 hooks are invoked.

This bug was latent since commit e98f1e58b1 (Aug 2024, ODC-7632). On OCP 4.19, ConnectedPageHeading had no hooks of its own, so React couldn't detect the violation. On OCP 4.20+, commit f803a25cb7 added 3 hooks to ConnectedPageHeading, causing React to detect the hook count mismatch (3 → 9) and throw error #310: "Rendered more hooks than during the previous render."

All 4 Shipwright detail pages are affected: Build, BuildRun, BuildStrategy, and ClusterBuildStrategy.

Linked Jira: https://issues.redhat.com/browse/OCPBUGS-86427
Parent Jira: https://issues.redhat.com/browse/OCPBUGS-84214
Support Cases: 04362500, 04425432, 04430794

Solution description:

Refactored all 4 affected detail pages to call useShipwrightBreadcrumbsFor unconditionally at the component level using their existing use*Model() hooks, and pass the result as a closure:

// Before (broken — hook passed as callback, called conditionally)
<DetailsPage breadcrumbsFor={useShipwrightBreadcrumbsFor} />

// After (fixed — hook called at top level, result passed as closure)
const model = useBuildModel();
const breadcrumbs = useShipwrightBreadcrumbsFor(model);
<DetailsPage breadcrumbsFor={() => breadcrumbs} />

This follows the established pattern used by the knative plugin (ServiceDetailsPage.tsx).

Also changed useShipwrightBreadcrumbsFor to accept a K8sModel directly instead of a K8sResourceKind, and removed the now-dead resourceToModel function (30 lines).

This is a manual backport of #16474 to release-4.21.

Test setup:

1. OCP 4.21 cluster with the Builds for Red Hat OpenShift Operator installed (v1.7.1 or v1.7.2)
2. At least one ClusterBuildStrategy deployed (e.g., buildah — typically installed by the operator automatically)

Test cases:

1. Navigate to /k8s/cluster/shipwright.io~v1beta1~ClusterBuildStrategy/buildah — page should render without crash, breadcrumbs should show correctly
2. Navigate to a namespaced BuildStrategy, Build, and BuildRun detail page — all should render without crash
3. Verify breadcrumb links navigate back to the correct list pages
4. Verify tab switching (Details, YAML, BuildRuns, Events, Logs) works without errors
5. Verify no React warnings or errors in the browser console

Browser conformance:

• Chrome
• Firefox
• Safari

Backport plan

4.22 (#16485 - merged), 4.21 (this PR), 4.20

Additional info:

• 5 files changed, 21 insertions, 41 deletions — all changes confined to shipwright-plugin
• Zero console core changes
• TypeScript compiles clean with zero new errors

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.

[sg00dwin]

/jira refresh

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-86427, which is invalid:

• expected dependent Jira Issue OCPBUGS-86410 to be in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA), but it is ON_QA instead
• expected dependent Jira Issue OCPBUGS-86410 to target a version in 4.22.0, but it targets "4.22" instead

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

/jira refresh

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.

[sg00dwin]

/jira refresh

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-86427, which is invalid:

• expected dependent Jira Issue OCPBUGS-86410 to be in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA), but it is ON_QA instead

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

/jira refresh

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.

[sg00dwin]

/jira refresh

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-86427, which is valid. The bug has been moved to the POST state.

7 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.21.z) matches configured target version for branch (4.21.z)
• bug is in the state New, which is one of the valid states (NEW, ASSIGNED, POST)
• release note type set to "Release Note Not Required"
• dependent bug Jira Issue OCPBUGS-86410 is in the state Verified, which is one of the valid states (VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), CLOSED (DONE-ERRATA))
• dependent Jira Issue OCPBUGS-86410 targets the "4.22.0" version, which is one of the valid target versions: 4.22.0
• bug has dependents

Details

In response to this:

/jira refresh

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.

[openshift-ci]

@sg00dwin: all tests passed!

Full PR test history. Your PR dashboard.

Details

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 kubernetes-sigs/prow repository. I understand the commands that are listed here.

[logonoff]

/lgtm

[logonoff]

/label backport-risk-assessed

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, sg00dwin

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [logonoff]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment