Skip to content

fix(Toolbar): add log viewer overflow menu - #12634

Open
mehuljariwala wants to merge 1 commit into
patternfly:mainfrom
mehuljariwala:fix/11708-log-viewer-toolbar-overflow
Open

fix(Toolbar): add log viewer overflow menu#12634
mehuljariwala wants to merge 1 commit into
patternfly:mainfrom
mehuljariwala:fix/11708-log-viewer-toolbar-overflow

Conversation

@mehuljariwala

@mehuljariwala mehuljariwala commented Aug 31, 2026

Copy link
Copy Markdown

What: Closes #11708.

Updates the console log viewer toolbar demo to use PatternFly's responsive OverflowMenu pattern instead of maintaining separate desktop and mobile dropdown implementations.

  • At and above the 2xl breakpoint, the full External logs and Download controls remain visible.
  • Below 2xl, those controls collapse into one accessible Log viewer actions overflow menu.
  • The overflow menu preserves all three external-log actions and both download actions.
  • Search and Expand remain available outside the overflow menu.
  • The docs live context now imports the overflow icon used by the example.
  • The generated demo screenshot is updated.

This also removes the duplicated mobile dropdown state and handlers, so both responsive layouts share the same action callbacks.

Validation:

  • yarn build — passed, including generated assets and ESM/CommonJS TypeScript builds.
  • yarn lint:all — passed; existing repository warnings remain.
  • Jest — 393 suites passed, with 3,848 tests and 914 snapshots passing (3 tests skipped by the repository configuration).
  • Documentation dev build — compiled successfully.
  • Filtered screenshot generation — updated only console-log-viewer-toolbar-demo.png.
  • Browser QA at 800px — full External logs/Download controls hidden; labeled overflow and Expand visible; all five overflow actions visible; selecting an action ran its handler and closed the menu.
  • Browser QA at 1600px — overflow hidden; full External logs/Download controls and Expand visible.

AI assistance: OpenAI Codex assisted with implementation and test orchestration. The generated changes were reviewed, the initially missing docs live-context import was caught during browser QA and corrected, and the final behavior was validated as described above.

Additional issues: None.

Summary by CodeRabbit

  • New Features
    • Updated the toolbar with a responsive overflow menu for secondary actions.
    • Consolidated external logs and download options into a single ellipsis menu on smaller screens.
    • Refreshed the toolbar demo to reflect the new overflow-menu experience.

@coderabbitai

coderabbitai Bot commented Aug 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 5636009a-10b3-4eb7-9346-485e167ad79a

📥 Commits

Reviewing files that changed from the base of the PR and between 60807bf and a78e6c6.

⛔ Files ignored due to path filters (1)
  • packages/react-docs/patternfly-docs/generated/components/toolbar/react-demos/console-log-viewer-toolbar-demo.png is excluded by !**/*.png, !**/generated/**
📒 Files selected for processing (2)
  • packages/react-core/src/demos/Toolbar.md
  • packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.


Walkthrough

The complex toolbar now uses one responsive OverflowMenu for External logs and Download actions. Mobile-specific menu state and handlers were replaced by shared overflow state. The demo documentation uses the ellipsis icon import.

Changes

Responsive toolbar overflow

Layer / File(s) Summary
Overflow state and action definitions
packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
The toolbar adds shared overflow state and handlers. It defines five overflow items for External logs and Download actions.
Responsive overflow rendering
packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx, packages/react-core/src/demos/Toolbar.md
The toolbar renders one OverflowMenu at the 2xl breakpoint with an ellipsis-icon control. The demo imports the ellipsis icon.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to a78e6

The toolbar now uses one responsive overflow menu for existing log actions below the 2xl breakpoint while preserving the existing controls and callbacks. The change is localized and validated, so no actionable merge-blocking risk remains.

Suggested reviewers: rebeccaalpert, thatblindgeye

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the primary change: adding an overflow menu to the Toolbar log viewer demo.
Linked Issues check ✅ Passed The changes address issue #11708 by consolidating toolbar actions into a responsive OverflowMenu below the 2xl breakpoint while preserving the full controls at larger widths.
Out of Scope Changes check ✅ Passed The reviewed changes are limited to the Toolbar demo, its responsive overflow behavior, related state and imports, and the required documentation icon update. No unrelated code changes are evident.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Complex toolbar not mobile-friendly

1 participant