fix: updated keyboard shortcuts display to use tooltips #4208

Akhileshait · 2025-10-30T20:03:15Z

What does this PR do?

This PR improves the UX of keyboard shortcuts in the dashboard by replacing hover-revealed containers with proper tooltip components.

Changes

Replaced hover-revealed keyboard shortcuts with tooltips in:

LiveSwitchButton (live-switch-button/index.tsx)
- Removed the group class and animated hover-revealed container
- Wrapped button with InfoTooltip displaying "Toggle live updates ⌥+⇧+Q"
- Tooltip appears on hover with 300ms delay
RefreshButton (refresh-button.tsx)
- Enhanced existing InfoTooltip to show keyboard shortcut when enabled
- Displays "Refresh data ⌥+⇧+W" when enabled
- Maintains existing error message when disabled
- Removed hover-revealed container and group class

Benefits

More consistent with standard UI patterns
Better accessibility with proper ARIA attributes
Cleaner implementation leveraging existing InfoTooltip component
Improved discoverability of keyboard shortcuts

Fixes #4086

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
Enhancement (small improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How should this be tested?

Navigate to Gateway Logs page
- Go to any workspace → project → gateway logs
Test Live Switch Button
- Hover over the "Live" button
- Verify tooltip appears showing "Toggle live updates ⌥+⇧+Q"
- Confirm keyboard shortcut ⌥+⇧+Q (Option+Shift+Q) still toggles live mode
- Test on both live and paused states
Test Refresh Button
- When enabled (with relative time filter selected):
  - Hover over the "Refresh" button
  - Verify tooltip shows "Refresh data ⌥+⇧+W"
  - Confirm keyboard shortcut ⌥+⇧+W (Option+Shift+W) triggers refresh
- When disabled (with absolute time range):
  - Hover over the "Refresh" button
  - Verify tooltip shows error message about selecting relative time filter
  - Confirm button is disabled and shortcut doesn't work
Accessibility Testing
- Tab to buttons and verify tooltips appear on focus
- Test with screen reader to ensure keyboard shortcuts are announced properly
Visual Verification
- Confirm no visual regressions in button appearance
- Verify tooltip styling matches other tooltips in the application
- Check tooltip positioning (should appear below buttons, centered)

Checklist

Required

Appreciated

If a UI change was made: Added a screen recording or screenshots to this PR
Updated the Unkey Docs if changes were necessary

changeset-bot · 2025-10-30T20:03:19Z

⚠️ No Changeset found

Latest commit: ca9879d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-10-30T20:03:20Z

@Akhileshait is attempting to deploy a commit to the Unkey Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-10-30T20:03:29Z

📝 Walkthrough

Walkthrough

Replaces hover-revealed keyboard shortcut displays with InfoTooltip wrappers around buttons. Tooltip content now shows a label plus a KeyboardButton shortcut (⌥+⇧+Q / ⌥+⇧+W); button click behavior and public props remain unchanged. Tooltip delay set to 300ms and positioned bottom-center.

Changes

Cohort / File(s)	Summary
Live switch button `apps/dashboard/components/logs/live-switch-button/index.tsx`	Wraps the existing ghost `Button` in an `InfoTooltip` (asChild). Tooltip shows label + `KeyboardButton` shortcut (⌥+⇧+Q), positioned bottom-center with 300ms delay. Keeps `onToggle` click wiring, preserves `isLive` styling and conditional ping indicator rendered inside the Button. Removed previous hover-revealed keyboard hint markup.
Refresh button `internal/ui/src/components/buttons/refresh-button.tsx`	Replaces inline hover keyboard hint with tooltipContent that varies by `isEnabled`: enabled shows "Refresh data" + `KeyboardButton` (⌥+⇧+W), disabled shows guidance text. Tooltip uses 300ms delay, is disabled while loading, and adjusts tooltip variant (primary when enabled, inverted when disabled). Removed title attribute and inline keyboard hint block. Public API unchanged.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as InfoTooltip / Button
    participant App as Component (onToggle / onRefresh)

    Note over User,UI: Hover (300ms delay)
    User->>UI: hover
    UI-->>User: show tooltip (label + KeyboardButton shortcut)

    Note over User,App: Click action
    User->>UI: click button (asChild)
    UI->>App: invoke handler (onToggle / onRefresh)
    App-->>UI: update state (isLive / loading)
    UI-->>User: reflect new visual state (active styling, ping, disabled states)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Inspect InfoTooltip usage and props (position, delay, disabled) in both components.
Verify conditional tooltipContent logic in refresh-button.tsx and variant selection.
Confirm no regressions in click handlers, live-state styling, and ping indicator rendering.
Check keyboard shortcut text accuracy and accessibility attributes.

Possibly related PRs

chore: Move keyboard button to UI #3289 — related changes that moved KeyboardButton into the UI and consolidated imports used by the live-switch refactor.
chore: Move refresh button to UI #3407 — edits to internal/ui/src/components/buttons/refresh-button.tsx that overlap with the tooltip/keyboard-hint changes.

Suggested labels

Bug

Pre-merge checks and finishing touches

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "fix: updated keyboard shortcuts display to use tooltips" accurately reflects the primary change in the changeset. It clearly and specifically describes the main objective: replacing hover-revealed keyboard shortcuts with tooltip components in the LiveSwitchButton and RefreshButton components. The title is concise, readable, and would help teammates understand the purpose when scanning history.
Linked Issues Check	✅ Passed	The PR directly addresses all requirements from linked issue #4086, which requests replacing hover-revealed keyboard shortcut displays with proper tooltip components. The changes to LiveSwitchButton and RefreshButton implement exactly this objective by wrapping components with InfoTooltip and removing hover-revealed containers. The PR also delivers the listed benefits: consistency with standard UI patterns, improved accessibility through proper ARIA attributes in tooltips, and a cleaner implementation using the existing InfoTooltip component rather than custom hover solutions.
Out of Scope Changes Check	✅ Passed	All changes in the PR are directly scoped to the requirements in issue #4086. The modifications to LiveSwitchButton and RefreshButton are focused specifically on replacing hover-revealed keyboard shortcuts with tooltip components, which is the exact change requested. No unrelated refactoring, feature additions, or auxiliary changes are present; the PR maintains backward compatibility with no changes to public component signatures or APIs, keeping the scope tightly aligned with the linked issue.
Description Check	✅ Passed	The PR description comprehensively follows the required template structure with all mandatory sections properly filled out. It includes a clear summary of changes with specific file references and line numbers, identifies the linked issue (#4086), marks the appropriate change type categories (bug fix, chore, enhancement), provides detailed testing instructions covering normal operation, edge cases, accessibility, and visual verification, and completes all required checklist items. The description exceeds the minimum requirements with thorough technical detail and actionable testing steps.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

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

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5ec8e5b and 1d402c4.

📒 Files selected for processing (1)

internal/ui/src/components/buttons/refresh-button.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 2825
File: apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-datetime/index.tsx:0-0
Timestamp: 2025-01-30T20:38:00.058Z
Learning: In the logs dashboard, keyboard shortcuts that toggle UI elements (like popovers) should be implemented in the component that owns the state being toggled, not in the presentational wrapper components. For example, the 'T' shortcut for toggling the datetime filter is implemented in DatetimePopover, not in LogsDateTime.

📚 Learning: 2025-08-25T13:05:22.441Z

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 3834
File: internal/ui/src/components/form/input.tsx:130-131
Timestamp: 2025-08-25T13:05:22.441Z
Learning: The Input component in internal/ui/src/components/form/input.tsx is designed to support interactive right icons (like X buttons for deletion) by enabling pointer events on the right icon container, allowing clicks to be handled by the icon rather than passed through to the input.

Applied to files:

internal/ui/src/components/buttons/refresh-button.tsx

🔇 Additional comments (1)

internal/ui/src/components/buttons/refresh-button.tsx (1)

52-69: Tooltip content handling looks solid.

Dynamic content cleanly differentiates enabled and disabled states, keeps the shortcut discoverable, and folds into the existing InfoTooltip API without regressions.

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 and usage tips.}

github-actions · 2025-10-30T20:03:54Z

Thank you for following the naming conventions for pull request titles! 🙏

vercel · 2025-11-03T12:55:49Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dashboard	Ready	Preview	Comment	Nov 3, 2025 0:59am

ogzhanolguncu

Can we do show something like this in the tooltip instead of what we have right now?
Press 'XXXXXX' to toggle. Please, address

Clear filters: ⌥+⇧+A
Focus filters: ⌥+⇧+S

Those two as well

updated keyboard shortcuts display to use tooltips

5ec8e5b

Akhileshait requested review from Flo4604, MichaelUnkey, chronark, mcstepp, ogzhanolguncu and perkinsjr as code owners October 30, 2025 20:03

Akhileshait changed the title ~~updated keyboard shortcuts display to use tooltips~~ fix: updated keyboard shortcuts display to use tooltips Oct 30, 2025

unkeyed deleted a comment from Akhileshait Nov 2, 2025

autofix-ci bot and others added 2 commits November 2, 2025 23:03

[autofix.ci] apply automated fixes

1d402c4

Merge branch 'main' into fix-kerboard-shortcuts-tooltips-unkeyed#4089

ca9879d

ogzhanolguncu self-assigned this Nov 3, 2025

vercel bot deployed to Preview – dashboard November 3, 2025 12:59 View deployment

ogzhanolguncu reviewed Nov 3, 2025

View reviewed changes

chronark closed this Jan 16, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: updated keyboard shortcuts display to use tooltips #4208

fix: updated keyboard shortcuts display to use tooltips #4208

Uh oh!

Akhileshait commented Oct 30, 2025

Uh oh!

changeset-bot bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

vercel bot commented Oct 30, 2025

Uh oh!

coderabbitai bot commented Oct 30, 2025 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Uh oh!

github-actions bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 3, 2025 •

edited

Loading

Uh oh!

ogzhanolguncu left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: updated keyboard shortcuts display to use tooltips #4208

fix: updated keyboard shortcuts display to use tooltips #4208

Uh oh!

Conversation

Akhileshait commented Oct 30, 2025

What does this PR do?

Changes

Benefits

Type of change

How should this be tested?

Checklist

Required

Appreciated

Uh oh!

changeset-bot bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Oct 30, 2025

Uh oh!

coderabbitai bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ogzhanolguncu left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Oct 30, 2025 •

edited

Loading

coderabbitai bot commented Oct 30, 2025 •

edited

Loading

github-actions bot commented Oct 30, 2025 •

edited

Loading

vercel bot commented Nov 3, 2025 •

edited

Loading