[wip] CONSOLE-5015: Refactor pinned nav to react-drag-drop

[logonoff]

After

Screencast.From.2026-03-13.16-04-45.mp4

Summary by CodeRabbit

• New Features

  • Improved drag-and-drop functionality for reordering pinned resources in the navigation sidebar.

• Style

  • Updated visual styling for pinned resource items with improved spacing and layout.

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-5015 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 "4.22.0" version, but no target version was set.

Details

In response to this:

After

Screencast.From.2026-03-13.16-04-45.mp4

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.

[logonoff]

/label px-approved
/label docs-approved

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff

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

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request refactors the pinned resources drag-and-drop functionality in the perspective navigation component. The @patternfly/react-drag-drop dependency is updated from version ~6.4.0 to ~6.5.0-prerelease.38. The implementation shifts from a drag-drop context wrapper to an inline DragDropSort component. CSS changes remove drag state styles and add a new .co-pinned-resource-item class. PinnedResource component props are simplified to remove draggable, onReorder, and onDrag parameters, eliminating internal drag state management. Test assertions are updated to reflect renamed button labels.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main change: refactoring the pinned navigation component to use react-drag-drop instead of the previous approach.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

[logonoff]

Needed to pick up patternfly/patternfly-react#12217 / patternfly/patternfly-react#12240. no impact on plugins as this is not a shared module and does not provide CSS

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-5015 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 "4.22.0" version, but no target version was set.

Details

In response to this:

After

Screencast.From.2026-03-13.16-04-45.mp4

Summary by CodeRabbit

• New Features

• Improved drag-and-drop functionality for reordering pinned resources in the navigation sidebar.

• Style

• Updated visual styling for pinned resource items with improved spacing and layout.

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]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/packages/console-app/src/components/nav/PinnedResource.tsx`:
- Line 50: The component PinnedResource uses the optional prop navResources
directly with .filter(), which can throw if navResources is undefined; update
the PinnedResource component to guard navResources before calling .filter() by
either defaulting navResources to an empty array in the function signature or
using a safe access (e.g., (navResources || []).filter(...) or
navResources?.filter(...) with a fallback) so all uses in the component
(including where navResources is iterated/filtered) cannot cause a runtime
crash.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ded4e51a-762c-4927-97f0-f5de30d0c000

📥 Commits

Reviewing files that changed from the base of the PR and between 9f13e88 and bd4980b.

⛔ Files ignored due to path filters (1)

• frontend/yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (5)

• frontend/package.json
• frontend/packages/console-app/src/components/nav/PerspectiveNav.scss
• frontend/packages/console-app/src/components/nav/PerspectiveNav.tsx
• frontend/packages/console-app/src/components/nav/PinnedResource.tsx
• frontend/packages/console-app/src/components/nav/__tests__/PerspectiveNav.spec.tsx

[openshift-ci]

@logonoff: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	a0b30ff	link	true	/test e2e-gcp-console

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.