OCPBUGS-63401: Fix Pod selector links not navigating on Search page

[sg00dwin]

Clicking on the pod selector link was not displaying the associated pods in the search list.

[openshift-ci-robot]

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

• expected the bug to target the "4.21.0" version, but no target version was set

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.

In response to this:

Clicking on the pod selector link was not displaying the associated pods in the search list.

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

The search component is refactored to use react-router-dom's useLocation hook instead of window.location for reading URL query parameters, enabling proper SPA routing behavior with updated effect dependencies.

Changes

Cohort / File(s)	Summary
SPA Routing Integration frontend/public/components/search.tsx	Replaced window.location with useLocation() hook from react-router-dom. Updated state initialization to read kind, q, and name from location.search. Added default empty selection when kind is undefined. Updated effect dependency array to [location.search] for proper re-rendering on URL changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify that location.search parameter parsing correctly extracts kind, q, and name values
• Confirm the effect dependency update properly triggers re-initialization on URL navigation
• Ensure the default empty selection fallback (else branch) handles all edge cases appropriately
• Check that react-router-dom's useLocation is already available in the component's dependency tree

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/public/components/search.tsx (1)

131-146: Avoid mutating selectedItems Set in place to ensure reliable re-renders

Both updateSelectedItems and updateNewItems mutate the existing selectedItems Set and then pass the same reference back into setSelectedItems. Because React state updates can bail out when the new value is referentially equal, this pattern risks missed re-renders and makes behavior harder to reason about.

Consider updating via a fresh Set instead:

-  const updateSelectedItems = (selection: string) => {
-    const updateItems = selectedItems;
+  const updateSelectedItems = (selection: string) => {
+    const updateItems = new Set(selectedItems);
     fireTelemetryEvent('search-resource-selected', {
       resource: selection,
     });
     updateItems.has(selection) ? updateItems.delete(selection) : updateItems.add(selection);
     setSelectedItems(updateItems);
     setQueryArgument('kind', [...updateItems].join(','));
   };
 
   const updateNewItems = (_filter: string, { key }: ToolbarLabel) => {
-    const updateItems = selectedItems;
+    const updateItems = new Set(selectedItems);
     updateItems.has(key) ? updateItems.delete(key) : updateItems.add(key);
     setSelectedItems(updateItems);
     setQueryArgument('kind', [...updateItems].join(','));
   };

This keeps state updates immutable and avoids subtle UI sync issues.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to data retention organization setting

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between b25299c and d579e8d.

📒 Files selected for processing (1)

• frontend/public/components/search.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

• frontend/public/components/search.tsx

🧬 Code graph analysis (1)

frontend/public/components/search.tsx (3)

frontend/public/components/RBAC/role.jsx (2)

• location (344-344)
• location (374-374)

frontend/packages/console-shared/src/hooks/useLocation.ts (1)

• useLocation (4-5)

frontend/public/components/service-account.jsx (1)

• kind (23-23)

🔇 Additional comments (2)

frontend/public/components/search.tsx (2)

6-6: Router-based useLocation + effect dependency correctly address stale query param state

Switching from window.location to react-router-dom’s useLocation and keying the effect off location.search should ensure the search page reacts when only the query string changes (e.g., pod selector links updating ?kind=...), which aligns with SPA routing and fixes the original bug.

One thing to double-check: setQueryArgument must update the same history source that react-router is listening to (not just window.location directly), otherwise changes made via setQueryArgument might not always trigger a new location.search and thus won’t re-run this effect.

Also applies to: 98-105, 121-121

---

114-116: Explicitly clearing selectedItems when kind is absent keeps URL and UI in sync

Adding the else branch to reset selectedItems to an empty Set when kind isn’t present in the URL avoids stale selections and makes the empty-query state consistent with the “No resources selected” empty state below. This looks correct and aligned with the page behavior.

[sg00dwin]

/retest-required

[rhamilto]

/lgtm

Nice work, @sgoodwin!

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

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

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

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [rhamilto]

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

[rhamilto]

/retest

[openshift-ci]

@sg00dwin: all tests passed!

Full PR test history. Your PR dashboard.

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.