CONSOLE-5015: Refactor pinned nav to react-drag-drop by logonoff · Pull Request #16146 · openshift/console

logonoff · 2026-03-13T20:05:07Z

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 · 2026-03-13T20:05:12Z

@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 · 2026-03-13T20:05:21Z

/label px-approved
/label docs-approved

coderabbitai · 2026-03-13T20:07:49Z

📝 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 · 2026-03-13T20:07:20Z

    "@patternfly/react-core": "~6.4.0",
    "@patternfly/react-data-view": "~6.3.0",
-    "@patternfly/react-drag-drop": "~6.4.0",
+    "@patternfly/react-drag-drop": "~6.5.0-prerelease.38",


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 · 2026-03-13T20:11:11Z

@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

Replace NavGroup (which renders a <ul role="list">) with a plain <section> to prevent dnd-kit's [role=status] and DragButton [role=button] elements from being invalid children of the list. Add a listItem prop to NavItemResource so pinned resources render as <div> instead of <li>, avoiding the listitem violation where <li> elements were nested inside Draggable <div> wrappers rather than directly inside a <ul>. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

logonoff · 2026-03-22T23:46:08Z

/assign @yapei

yapei · 2026-03-23T06:02:38Z

performed following regression testing

add resource to navigation as pinned resources
remove pinned resources from nav
drag and drop to reorder pinned items
Remove from navigation button is always visible
the drag button is visible when there are more than 1 pinned resources
when resource name is longer we trimmed the name and show ...
verified on Firefox, Chrome and Safari

/verified by @yapei

openshift-ci-robot · 2026-03-23T06:02:50Z

@yapei: This PR has been marked as verified by @yapei.

Details

In response to this:

performed following regression testing

add resource to navigation as pinned resources

remove pinned resources from nav

drag and drop to reorder pinned items

Remove from navigation button is always visible

the drag button is visible when there are more than 1 pinned resources

when resource name is longer we trimmed the name and show ...

verified on Firefox, Chrome and Safari

/verified by @yapei

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.

vikram-raj

/lgtm

openshift-ci · 2026-03-23T16:26:34Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, vikram-raj

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,vikram-raj]

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

logonoff · 2026-03-23T16:27:48Z

/test all

logonoff · 2026-03-23T20:04:19Z

/test all

yapei · 2026-03-24T03:05:58Z

/retest-required

logonoff · 2026-03-25T03:03:50Z

/test all

openshift-ci-robot · 2026-03-25T10:04:58Z

/retest-required

Remaining retests: 0 against base HEAD 1425db6 and 2 for PR HEAD 7e8a055 in total

openshift-ci-robot · 2026-03-26T15:04:48Z

/retest-required

Remaining retests: 0 against base HEAD f2cf862 and 1 for PR HEAD 7e8a055 in total

openshift-ci · 2026-03-26T19:55:37Z

@logonoff: 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.

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Mar 13, 2026

openshift-ci Bot added px-approved Signifies that Product Support has signed off on this PR docs-approved Signifies that Docs has signed off on this PR labels Mar 13, 2026

openshift-ci Bot requested review from sg00dwin and spadgett March 13, 2026 20:05

openshift-ci Bot added component/core Related to console core functionality approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Mar 13, 2026

logonoff force-pushed the CONSOLE-5015-pinned-resource branch from 96ee051 to bd4980b Compare March 13, 2026 20:07

logonoff commented Mar 13, 2026

View reviewed changes

coderabbitai Bot reviewed Mar 13, 2026

View reviewed changes

Comment thread frontend/packages/console-app/src/components/nav/PinnedResource.tsx

logonoff force-pushed the CONSOLE-5015-pinned-resource branch 2 times, most recently from 1efbbaf to 349557a Compare March 13, 2026 20:17

logonoff changed the title ~~CONSOLE-5015: Refactor pinned nav to react-drag-drop~~ [wip] CONSOLE-5015: Refactor pinned nav to react-drag-drop Mar 14, 2026

openshift-ci Bot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 14, 2026

logonoff force-pushed the CONSOLE-5015-pinned-resource branch from 349557a to a0b30ff Compare March 15, 2026 02:23

openshift-ci Bot added the kind/i18n Indicates issue or PR relates to internationalization or has content that needs to be translated label Mar 15, 2026

logonoff and others added 2 commits March 18, 2026 20:33

CONSOLE-5015: Refactor pinned nav to react-drag-drop

0f7a648

logonoff force-pushed the CONSOLE-5015-pinned-resource branch from a0b30ff to 7e8a055 Compare March 19, 2026 00:51

logonoff changed the title ~~[wip] CONSOLE-5015: Refactor pinned nav to react-drag-drop~~ CONSOLE-5015: Refactor pinned nav to react-drag-drop Mar 19, 2026

openshift-ci Bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 19, 2026

openshift-ci Bot assigned yapei Mar 22, 2026

openshift-ci-robot added the verified Signifies that the PR passed pre-merge verification criteria label Mar 23, 2026

vikram-raj reviewed Mar 23, 2026

View reviewed changes

openshift-ci Bot assigned vikram-raj Mar 23, 2026

openshift-ci Bot added the lgtm Indicates that a PR is ready to be merged. label Mar 23, 2026

openshift-merge-bot Bot merged commit 8703624 into openshift:main Mar 28, 2026
8 checks passed

logonoff deleted the CONSOLE-5015-pinned-resource branch March 28, 2026 10:53

Conversation

logonoff commented Mar 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

openshift-ci-robot commented Mar 13, 2026 • edited by openshift-ci Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

logonoff commented Mar 13, 2026

Uh oh!

coderabbitai Bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

logonoff Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

openshift-ci-robot commented Mar 13, 2026 • edited by openshift-ci Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

logonoff commented Mar 22, 2026

Uh oh!

yapei commented Mar 23, 2026

Uh oh!

openshift-ci-robot commented Mar 23, 2026

Uh oh!

vikram-raj left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-ci Bot commented Mar 23, 2026

Uh oh!

logonoff commented Mar 23, 2026

Uh oh!

logonoff commented Mar 23, 2026

Uh oh!

yapei commented Mar 24, 2026

Uh oh!

logonoff commented Mar 25, 2026

Uh oh!

openshift-ci-robot commented Mar 25, 2026

Uh oh!

openshift-ci-robot commented Mar 26, 2026

Uh oh!

openshift-ci Bot commented Mar 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

logonoff commented Mar 13, 2026 •

edited by coderabbitai Bot

Loading

openshift-ci-robot commented Mar 13, 2026 •

edited by openshift-ci Bot

Loading

coderabbitai Bot commented Mar 13, 2026 •

edited

Loading

logonoff Mar 13, 2026 •

edited

Loading

openshift-ci-robot commented Mar 13, 2026 •

edited by openshift-ci Bot

Loading