OCPBUGS-84214: 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-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).

Test setup:

1. OCP 4.20+ 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, 4.21, 4.20

Additional info:

• 5 files changed, 21 insertions, 41 deletions — all changes confined to shipwright-plugin
• Zero console core changes
• All existing unit tests pass (49 tests across 9 suites)
• TypeScript compiles clean with zero errors

Summary by CodeRabbit

• Refactor
  • Refactored breadcrumb generation across multiple detail pages for improved consistency and code organization.
  • Streamlined breadcrumb computation logic for better maintainability.

[openshift-ci-robot]

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

• expected the bug to target either version "5.0." or "openshift-5.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.

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-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).

Test setup:

1. OCP 4.20+ 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 (or Epiphany on Linux)

Additional info:

• 5 files changed, 21 insertions, 41 deletions — all changes confined to shipwright-plugin
• Zero console core changes
• All existing unit tests pass (49 tests across 9 suites)
• TypeScript compiles clean with zero errors
• Backport needed to release-4.20 and release-4.21

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-robot]

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

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

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-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).

Test setup:

1. OCP 4.20+ 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 (or Epiphany on Linux)

Additional info:

• 5 files changed, 21 insertions, 41 deletions — all changes confined to shipwright-plugin
• Zero console core changes
• All existing unit tests pass (49 tests across 9 suites)
• TypeScript compiles clean with zero errors
• Backport needed to release-4.20 and release-4.21

Summary by CodeRabbit

• Refactor
• Refactored breadcrumb generation across multiple detail pages for improved consistency and code organization.
• Streamlined breadcrumb computation logic for better maintainability.

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.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refactors breadcrumb generation across the Shipwright plugin by shifting responsibility from the utility hook to the consuming page components. The useShipwrightBreadcrumbsFor hook is simplified to accept a K8sModel parameter directly (removing internal resource-to-model conversion logic), and four detail page components now explicitly call their respective model hooks, derive breadcrumbs, and pass precomputed breadcrumbs to DetailsPage via callbacks instead of passing the hook reference itself. The change consolidates model-dependent logic into pages where the model context originates.

🚥 Pre-merge checks | ✅ 12

✅ Passed checks (12 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main change: fixing a React hooks violation in Shipwright detail pages that caused a crash with error #310.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	No Ginkgo tests modified in this PR; all changes are React/TypeScript frontend components. Check not applicable to the PR scope.
Test Structure And Quality	✅ Passed	PR contains no Ginkgo tests to review; check is inapplicable. PR focuses on React/TypeScript component refactoring (shipwright-plugin) with no test file modifications.
Microshift Test Compatibility	✅ Passed	No Ginkgo e2e tests added. PR modifies only React/TypeScript files in shipwright-plugin frontend code. MicroShift compatibility check is not applicable.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	PR contains only React/TypeScript frontend component changes. No Ginkgo e2e tests or e2e test files added. Check is not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	PR modifies only frontend UI components (React/TS) in shipwright-plugin. No deployment manifests, operator code, or scheduling constraints introduced. Check scope does not apply.
Ote Binary Stdout Contract	✅ Passed	PR contains only TypeScript/React frontend changes. OTE stdout check applies to Go test binaries and process-level code, which are not modified here.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	No Ginkgo e2e tests added. PR modifies only React/TypeScript frontend components (4 .tsx, 1 .ts) in shipwright-plugin; check applies only to Go test files.
Description check	✅ Passed	PR description comprehensively covers root cause analysis, solution design, test setup, test cases, and browser conformance with proper Jira linkage.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[sg00dwin]

/jira refresh

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-84214, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

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]

/cherry-pick release-4.22 release-4.21

[openshift-cherrypick-robot]

@sg00dwin: once the present PR merges, I will cherry-pick it on top of release-4.22 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-4.22 release-4.21

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.

[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]

QA Verification Evidence

	Details
Branch	OCPBUGS-84214-shipwright-bug-investigation
Baseline	main @ 084592fa8c
Candidate	OCPBUGS-84214-shipwright-bug-investigation @ bb94d2d1b3
Verified	2026-05-20
Browser	Playwright 1.60.0 / Chrome for Testing 148.0.7778.96 (playwright chromium v1223)
OS	Darwin 25.5.0
Jira	OCPBUGS-84214

Verification Steps

#	Route	Action	Status
1	/k8s/cluster/shipwright.iov1beta1ClusterBuildStrategy	Navigate, wait for list	pass
2	/k8s/cluster/shipwright.iov1beta1ClusterBuildStrategy/buildah-shipwright-managed-push	Navigate, wait for render	pass
3	(same page)	Check console for React errors	pass
4	/k8s/cluster/shipwright.iov1beta1ClusterBuildStrategy/buildah-shipwright-managed-push/yaml	Click YAML tab	pass
5	(same page)	Check breadcrumbs	pass
6	/k8s/cluster/shipwright.iov1beta1ClusterBuildStrategy/buildkit	Navigate to second CBS	pass

Animated overview (click to expand)

Baseline	Candidate

Step 1: CBS list page (pass)

Baseline (main)	Candidate (OCPBUGS-84214-shipwright-bug-investigation)

Step 2: CBS detail page (buildah-shipwright-managed-push) (pass)

Baseline (main)	Candidate (OCPBUGS-84214-shipwright-bug-investigation)

Step 4: YAML tab navigation (pass)

Baseline (main)	Candidate (OCPBUGS-84214-shipwright-bug-investigation)

Step 6: CBS detail page (buildkit) (pass)

Baseline (main)	Candidate (OCPBUGS-84214-shipwright-bug-investigation)

---

Warning

This verification was performed by an AI agent. Results may contain false positives or miss
regressions that require human judgment. Always review the screenshots manually before approving.

Automated QA verification by Claude Code

[logonoff]

/lgtm

[logonoff]

/verified by claude

[openshift-ci-robot]

@logonoff: This PR has been marked as verified by claude.

Details

In response to this:

/verified by claude

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]

[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

[openshift-ci-robot]

@sg00dwin: Jira Issue Verification Checks: Jira Issue OCPBUGS-84214
✔️ This pull request was pre-merge verified.
✔️ All associated pull requests have merged.
✔️ All associated, merged pull requests were pre-merge verified.

Jira Issue OCPBUGS-84214 has been moved to the MODIFIED state and will move to the VERIFIED state when the change is available in an accepted nightly payload. 🕓

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-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).

Test setup:

1. OCP 4.20+ 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, 4.21, 4.20

Additional info:

• 5 files changed, 21 insertions, 41 deletions — all changes confined to shipwright-plugin
• Zero console core changes
• All existing unit tests pass (49 tests across 9 suites)
• TypeScript compiles clean with zero errors

Summary by CodeRabbit

• Refactor
• Refactored breadcrumb generation across multiple detail pages for improved consistency and code organization.
• Streamlined breadcrumb computation logic for better maintainability.

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-cherrypick-robot]

@sg00dwin: #16474 failed to apply on top of branch "release-4.22":

Applying: OCPBUGS-84214: Fix Shipwright detail pages crashing with React error #310 useShipwrightBreadcrumbsFor is a React hook (6 sub-hooks) that was incorrectly passed as a plain callback via the breadcrumbsFor prop to DetailsPage. ConnectedPageHeading calls breadcrumbsFor conditionally based on data loading state, violating React's Rules of Hooks. On OCP 4.20+, ConnectedPageHeading gained its own hooks, causing React to detect the hook count mismatch between renders and throw error #310: "Rendered more hooks than during the previous render."
Using index info to reconstruct a base tree...
M	frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsPage.tsx
M	frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx
Falling back to patching base and 3-way merge...
Auto-merging frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx
CONFLICT (content): Merge conflict in frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsPage.tsx
Auto-merging frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsPage.tsx
CONFLICT (content): Merge conflict in frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsPage.tsx
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config set advice.mergeConflict false"
Patch failed at 0001 OCPBUGS-84214: Fix Shipwright detail pages crashing with React error #310 useShipwrightBreadcrumbsFor is a React hook (6 sub-hooks) that was incorrectly passed as a plain callback via the breadcrumbsFor prop to DetailsPage. ConnectedPageHeading calls breadcrumbsFor conditionally based on data loading state, violating React's Rules of Hooks. On OCP 4.20+, ConnectedPageHeading gained its own hooks, causing React to detect the hook count mismatch between renders and throw error #310: "Rendered more hooks than during the previous render."

Details

In response to this:

/cherry-pick release-4.22 release-4.21

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.