frontend: Activity: Improve panel UX with close options and pin feature #3975

jaehanbyun · 2025-09-30T14:40:18Z

Summary

This PR significantly enhances the user experience of activity panels (resource detail views) by adding multiple intuitive ways to close/minimize panels and introducing a pin feature to keep frequently-accessed resources readily available.

Key Features:

ESC key support: Close/minimize panels with ESC key
Click-outside to close: Click anywhere outside to close panels
Pin functionality: Pin important resources to keep them accessible

Related Issue

Closes #3947

Changes

New Features

1. ESC Key Handler

Press ESC to close/minimize the currently active activity panel
Respects pinned state:
- Unpinned activities: close completely
- Pinned activities: minimize to ActivityBar

2. Click-Outside Detection

Click anywhere outside the panel to close/minimize it
Ignores clicks on UI controls to prevent accidental closures:
- Resource links: Allows smooth transitions between resources
- ActivityBar: For activity management
- Pagination controls: First/Previous/Next/Last buttons
- Table controls: Sort, filter, search functionality
- Show/Hide buttons: Search bar, columns visibility
- Namespace selector: Dropdown and options
- MUI components: Select, Autocomplete, Menu, Popover, Dialog
- Other activity panels: Prevents cascade closures

3. Toggle Behavior

Re-clicking the same resource in a table triggers different actions based on pin state:
- Unpinned activities: Close completely (removed from ActivityBar)
- Pinned activities: Minimize only (kept in ActivityBar)

4. Pin Functionality

New pin button (📌) in ActivityBar for each activity
Visual indicators:
- Unpinned: Gray outline pin icon (mdi:pin-outline)
- Pinned: Blue filled pin icon (mdi:pin)
Pinned activity behavior:
- Outside click → Minimize (not close)
- ESC key → Minimize (not close)
- Re-click resource → Minimize (not close)
- Only closes via explicit X button in ActivityBar
Use cases:
- Keep important resources accessible
- Quick switching between multiple resources
- Compare resources side-by-side

Modified Files

frontend/src/components/activity/Activity.tsx
- Added pinned property to Activity interface
- Implemented click-outside detection with comprehensive exceptions
- Added ESC key handler with pinned state awareness
- Added pin button to ActivityBar with visual feedback
- Added closeOrMinimize() helper function
frontend/src/components/common/Link.tsx
- Modified click handler to support toggle behavior
- Added logic to restore minimized activities
- Integrated with closeOrMinimize() helper
- Detects pinned state for proper close/minimize action

Steps to Test

Basic Close Functionality

Click any resource (e.g., Pod) in a table
- Details panel opens on the right
Press ESC key
- Panel closes
Click the resource again → Click outside the panel
- Panel closes
Click the resource → Click the same resource again
- Panel closes (toggle)
Click Resource A → Click Resource B
- Panel switches to Resource B

Pin Functionality

Open a resource panel
Click the 📌 pin button in ActivityBar
- Icon changes to filled blue pin
Click outside the panel
- Panel minimizes, stays in ActivityBar
Click the same resource in table
- Panel restores
Press ESC key
- Panel minimizes (doesn't close)
Click pin button again to unpin
- Icon changes to outline pin
Click outside
- Panel now closes completely

Table Controls (Should NOT close panel)

Open a panel and test clicking:
- Pagination buttons (◀ ▶ First Last)
- Column headers (sort)
- Show/Hide Search button
- Show/Hide Columns button
- Namespace selector dropdown
- Namespace options in dropdown
- Search input field
- Filter buttons
- All should keep the panel open

Multiple Activities

Open Pod A and pin it
Open Pod B (don't pin)
Click outside
- Pod B closes, Pod A minimizes to ActivityBar
Open Pod C
- Pod C opens (Pod B gone, Pod A in bar)
Click Pod A in ActivityBar
- Pod A restores, Pod C closes
Pin Pod C, open Pod D and pin it
Click outside
- All pinned pods minimize to ActivityBar

Edge Cases

Open Panel A → Open Panel B → Click inside Panel B
- Panel A doesn't close
Open panel → Click ActivityBar overview button
- Panel stays open
Open panel → Rapidly click different resources
- Panels switch smoothly, no flicker
Open panel → Click namespace dropdown → Select option
- Panel stays open throughout

Additional Context

Screen.Recording.Sept.30.2025.mp4

k8s-ci-robot · 2025-09-30T14:40:26Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: jaehanbyun
Once this PR has been reviewed and has the lgtm label, please assign illume for approval. For more information see the Code Review Process.

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

Needs approval from an approver in each of these files:

OWNERS

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

jaehanbyun · 2025-09-30T14:43:02Z

I've implemented several UX improvements based on my personal workflow needs (ESC key, click-outside, pin feature, etc.).
Since I designed many of these features from my own perspective, I'd appreciate your thoughts.

- Add ESC key handler to close/minimize active panels - Add click-outside detection with smart exception handling - Add toggle behavior when re-clicking the same resource - Add pin functionality to keep important resources in ActivityBar - Add pin/unpin button with visual indicator (outline/filled icon) - Pinned activities minimize instead of closing completely - Extract closeOrMinimize helper to reduce code duplication - Prevent panels from closing when clicking other activity panels - Prevent panels from closing when using table controls (pagination, sort, filter, search, show/hide, namespace selector) - Replace setTimeout delay with timestamp comparison for better UX

Signed-off-by: jaehanbyun <[email protected]>

Copilot

Pull Request Overview

This PR enhances the Activity panel user experience by adding multiple intuitive ways to close panels and introducing a pin functionality for keeping frequently-accessed resources available.

Key changes include:

ESC key and click-outside support for closing/minimizing panels
Pin functionality to preserve important resources in the ActivityBar
Toggle behavior when re-clicking the same resource

Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`frontend/src/i18n/locales/*/translation.json`	Added "Pin" and "Unpin" translations for internationalization
`frontend/src/i18n/i18next-parser.config.js`	Fixed Node.js compatibility issue for translation parsing
`frontend/src/components/common/Link.tsx`	Implemented toggle behavior and activity restoration logic
`frontend/src/components/activity/Activity.tsx`	Added pin functionality, ESC key handler, and click-outside detection
`frontend/src/components/App/icons.ts`	Added pin and pin-outline icons for the pin button
`frontend/src/components/activity/__snapshots__/Activity.Basic.stories.storyshot`	Updated test snapshot to include new pin button

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-01T11:20:58Z

frontend/src/i18n/locales/hi/translation.json

  "rules": "",
  "ParentRefs": "",
  "No rules data to be shown.": "दिखाने के लिए कोई नियम डेटा नहीं है।",
+


Empty line added at line 454 appears to be unintentional and should be removed to maintain consistent formatting.

Suggested change

Copilot · 2025-10-01T11:20:58Z

frontend/src/i18n/locales/es/translation.json

  "rules": "reglas",
  "ParentRefs": "Referencias Padre",
  "No rules data to be shown.": "Sin datos de reglas",
+


Empty line added at line 457 appears to be unintentional and should be removed to maintain consistent formatting.

Suggested change

Copilot · 2025-10-01T11:20:59Z

frontend/src/i18n/i18next-parser.config.js


 import fs from 'fs';
 import path from 'path';
+import { fileURLToPath } from 'url';


[nitpick] The import should be moved to the top with other imports (after line 18) to follow consistent import ordering conventions.

joaquimrocha · 2025-10-01T12:30:30Z

Thanks @jaehanbyun !
BTW, the current behavior we have is that the panels do get pinned if you click them. Maybe this is less explicit than your solution, but it's based on what VSCode has.

jaehanbyun · 2025-10-01T13:00:47Z

@joaquimrocha

Personally, when I use VSCode, I tend to keep panels pinned and open for long stretches while working.
In contrast, in Headlamp, the activity panels (Kubernetes resource views) are not something I usually keep open for extended periods;I often return to the overall resource table instead.

In that context, the extra mouse movements required to close or minimize panels can feel a bit cumbersome, which is why I proposed this change.
I realize this may reflect my own workflow, and it may also be influenced by tools I’m used to (e.g., Datadog and Groundcover), which emphasize quick transitions between resource views.

This approach feels more convenient to me than the current behavior, but preferences can vary.
so I’d really appreciate feedback on whether it works well for others.

jaehanbyun · 2025-10-01T13:03:11Z

In any case, I think the ability to close panels with the ESC key would be useful.

illume · 2025-10-01T17:58:14Z

This approach feels more convenient to me than the current behavior, but preferences can vary—so I’d really appreciate feedback on whether it works well for others.

Cool. I can ask a few more people to try this out over the coming days.

k8s-ci-robot added the cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. label Sep 30, 2025

k8s-ci-robot requested review from illume and yolossn September 30, 2025 14:40

k8s-ci-robot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Sep 30, 2025

jaehanbyun force-pushed the feat/activity-panel-ux-improvements branch 2 times, most recently from f62286a to 5d68b26 Compare October 1, 2025 09:37

jaehanbyun force-pushed the feat/activity-panel-ux-improvements branch from 5d68b26 to 239e41f Compare October 1, 2025 09:45

frontend: i18n: fix config

3041fef

Signed-off-by: jaehanbyun <[email protected]>

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Oct 1, 2025

Merge branch 'main' into feat/activity-panel-ux-improvements

5b2bd4e

k8s-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Oct 1, 2025

frontend: style: fix prettier formatting

0cbe85f

Signed-off-by: jaehanbyun <[email protected]>

illume requested a review from Copilot October 1, 2025 11:20

Copilot AI reviewed Oct 1, 2025

View reviewed changes

illume added this to the v0.37.0 milestone Oct 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

frontend: Activity: Improve panel UX with close options and pin feature #3975

frontend: Activity: Improve panel UX with close options and pin feature #3975

jaehanbyun commented Sep 30, 2025

Uh oh!

k8s-ci-robot commented Sep 30, 2025

Uh oh!

jaehanbyun commented Sep 30, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 1, 2025

Uh oh!

Copilot AI Oct 1, 2025

Uh oh!

Copilot AI Oct 1, 2025

Uh oh!

joaquimrocha commented Oct 1, 2025

Uh oh!

jaehanbyun commented Oct 1, 2025 •

edited

Loading

Uh oh!

jaehanbyun commented Oct 1, 2025 •

edited

Loading

Uh oh!

illume commented Oct 1, 2025

Uh oh!

Uh oh!

frontend: Activity: Improve panel UX with close options and pin feature #3975

Are you sure you want to change the base?

frontend: Activity: Improve panel UX with close options and pin feature #3975

Conversation

jaehanbyun commented Sep 30, 2025

Summary

Key Features:

Related Issue

Changes

New Features

1. ESC Key Handler

2. Click-Outside Detection

3. Toggle Behavior

4. Pin Functionality

Modified Files

Steps to Test

Basic Close Functionality

Pin Functionality

Table Controls (Should NOT close panel)

Multiple Activities

Edge Cases

Additional Context

Uh oh!

k8s-ci-robot commented Sep 30, 2025

Uh oh!

jaehanbyun commented Sep 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

joaquimrocha commented Oct 1, 2025

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

illume commented Oct 1, 2025

Uh oh!

Uh oh!

jaehanbyun commented Oct 1, 2025 •

edited

Loading

jaehanbyun commented Oct 1, 2025 •

edited

Loading