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

jaehanbyun · jaehanbyun · commit 5d68b2690fc0 · 2025-10-01T18:36:57.000+09:00
- 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 &lt;awbrg789@naver.com&gt;
diff --git a/frontend/src/components/App/icons.ts b/frontend/src/components/App/icons.ts
@@ -438,6 +438,12 @@ const mdiIcons = {
     'select-group': {
       body: '\u003Cpath fill="currentColor" d="M5 3a2 2 0 0 0-2 2h2m2-2v2h2V3m2 0v2h2V3m2 0v2h2V3m2 0v2h2a2 2 0 0 0-2-2M3 7v2h2V7m2 0v4h4V7m2 0v4h4V7m2 0v2h2V7M3 11v2h2v-2m14 0v2h2v-2M7 13v4h4v-4m2 0v4h4v-4M3 15v2h2v-2m14 0v2h2v-2M3 19a2 2 0 0 0 2 2v-2m2 0v2h2v-2m2 0v2h2v-2m2 0v2h2v-2m2 0v2a2 2 0 0 0 2-2Z"/\u003E',
     },
+    pin: {
+      body: '\u003Cpath fill="currentColor" d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2z"/\u003E',
+    },
+    'pin-outline': {
+      body: '\u003Cpath fill="currentColor" d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2zm-6 2H8v-.5l2-2V4h4v7.5l2 2v.5z"/\u003E',
+    },
   },
   aliases: {
     'more-vert': {
diff --git a/frontend/src/components/activity/Activity.tsx b/frontend/src/components/activity/Activity.tsx
@@ -72,6 +72,8 @@ export interface Activity {
   temporary?: boolean;
   /** Cluster of the launched activity */
   cluster?: string;
+  /** Whether this activity is pinned (won't close on click-outside) */
+  pinned?: boolean;
 }
 
 export interface ActivityState {
@@ -178,6 +180,21 @@ export const Activity = {
   update(id: string, diff: Partial<Activity>) {
     store.dispatch(activitySlice.actions.update({ ...diff, id }));
   },
+  /**
+   * Closes or minimizes activity based on pinned state
+   * - Pinned activities: minimized (kept in ActivityBar)
+   * - Regular activities: closed completely
+   */
+  closeOrMinimize(id: string) {
+    const state = store.getState();
+    const activity = state.activity.activities[id];
+
+    if (activity?.pinned) {
+      this.update(id, { minimized: true });
+    } else {
+      this.close(id);
+    }
+  },
   reset() {
     store.dispatch(activitySlice.actions.reset());
   },
@@ -335,6 +352,125 @@ export function SingleActivityRenderer({
     };
   }, [location]);
 
+  // Close or minimize activity when clicking outside (only for split modes)
+  useEffect(() => {
+    if (isOverview || minimized || (location !== 'split-left' && location !== 'split-right')) {
+      return;
+    }
+
+    // Record when the listener is registered to ignore immediate clicks
+    const listenerRegistrationTime = Date.now();
+
+    const handleClickOutside = (event: MouseEvent) => {
+      // Ignore clicks that happened within 100ms of listener registration
+      // This prevents the click that opened the activity from closing it
+      if (event.timeStamp && Date.now() - listenerRegistrationTime < 100) {
+        return;
+      }
+
+      const activityElement = activityElementRef.current;
+      if (!activityElement) return;
+
+      // Check if click is outside the activity panel
+      if (!activityElement.contains(event.target as Node)) {
+        const target = event.target as HTMLElement;
+
+        // Don't close if clicking on:
+        // 1. Another activity panel (let that activity handle it)
+        const isAnotherActivity = !!target.closest('[role="complementary"]');
+
+        // 2. Resource links (let Link.tsx handle the transition)
+        const isResourceLink = target.closest('a[href*="/"], a[role="button"]');
+
+        // 3. ActivityBar (taskbar at the bottom)
+        const isInActivityBar = !!target.closest('[data-activity-bar="true"]');
+
+        // 4. Pagination buttons and table controls
+        const isPaginationButton = !!target.closest(
+          'button[aria-label*="page"], button[aria-label*="Page"], ' +
+            'button[title*="page"], button[title*="Page"], ' +
+            '.MuiPagination-root, .MuiPagination-root *, ' +
+            '[role="navigation"], [role="navigation"] *, ' +
+            'button[aria-label*="next"], button[aria-label*="previous"], ' +
+            'button[aria-label*="first"], button[aria-label*="last"]'
+        );
+
+        // 5. Table control buttons (sort, filter, search, etc.)
+        const isTableControl = !!target.closest(
+          // Table header and controls
+          'thead, thead *, ' +
+            '.MuiTableHead-root, .MuiTableHead-root *, ' +
+            // Sort buttons
+            'button[aria-label*="sort"], button[aria-label*="Sort"], ' +
+            '[role="columnheader"], [role="columnheader"] *, ' +
+            // Filter buttons and inputs
+            'button[aria-label*="filter"], button[aria-label*="Filter"], ' +
+            'button[title*="filter"], button[title*="Filter"], ' +
+            '[aria-label*="filter"], [aria-label*="Filter"], ' +
+            '[aria-label*="Namespace"], [aria-label*="namespace"], ' +
+            // Search inputs and toggle buttons
+            'input[type="search"], input[type="text"][placeholder*="Search"], ' +
+            'input[type="text"][placeholder*="search"], ' +
+            'input[type="text"][aria-label*="Search"], ' +
+            'input[type="text"][aria-label*="search"], ' +
+            'button[aria-label*="Search"], button[aria-label*="search"], ' +
+            'button[title*="Search"], button[title*="search"], ' +
+            // Show/Hide buttons (columns, search, etc.)
+            'button[aria-label*="show"], button[aria-label*="Show"], ' +
+            'button[aria-label*="hide"], button[aria-label*="Hide"], ' +
+            'button[title*="show"], button[title*="Show"], ' +
+            'button[title*="hide"], button[title*="Hide"], ' +
+            'button[aria-label*="column"], button[aria-label*="Column"], ' +
+            // MUI Select and Autocomplete components
+            '.MuiSelect-root, .MuiSelect-root *, ' +
+            '.MuiAutocomplete-root, .MuiAutocomplete-root *, ' +
+            '.MuiAutocomplete-popper, .MuiAutocomplete-popper *, ' +
+            '.MuiAutocomplete-listbox, .MuiAutocomplete-listbox *, ' +
+            '[role="combobox"], [role="combobox"] *, ' +
+            '[role="listbox"], [role="listbox"] *, ' +
+            '[role="option"], [role="option"] *, ' +
+            // MUI Input and FormControl
+            '.MuiInputBase-root, .MuiInputBase-root *, ' +
+            '.MuiFormControl-root, .MuiFormControl-root *, ' +
+            '.MuiOutlinedInput-root, .MuiOutlinedInput-root *, ' +
+            // MUI Table components
+            '.MuiTablePagination-root, .MuiTablePagination-root *, ' +
+            '.MuiTableSortLabel-root, .MuiTableSortLabel-root *, ' +
+            // Toolbar and action areas
+            '.MuiToolbar-root, .MuiToolbar-root *, ' +
+            '[role="toolbar"], [role="toolbar"] *, ' +
+            // Popover, Menu, Dialog (for filters, column selection, etc.)
+            '.MuiPopover-root, .MuiPopover-root *, ' +
+            '.MuiMenu-root, .MuiMenu-root *, ' +
+            '.MuiDialog-root, .MuiDialog-root *, ' +
+            '.MuiPaper-root[role="dialog"], .MuiPaper-root[role="dialog"] *, ' +
+            '[role="menu"], [role="menu"] *, ' +
+            '[role="dialog"], [role="dialog"] *, ' +
+            '[role="presentation"], [role="presentation"] *'
+        );
+
+        // If clicking UI controls or another activity panel, don't close
+        // Otherwise, close or minimize based on pinned state
+        if (
+          !isAnotherActivity &&
+          !isResourceLink &&
+          !isInActivityBar &&
+          !isPaginationButton &&
+          !isTableControl
+        ) {
+          Activity.closeOrMinimize(id);
+        }
+      }
+    };
+
+    // Add listener immediately (no delay)
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [id, isOverview, minimized, location, activity.pinned]);
+
   return (
     <ActivityContext.Provider value={activity}>
       <Box
@@ -850,8 +986,16 @@ export const ActivitiesRenderer = React.memo(function ActivitiesRenderer() {
     }
   });
 
+  // Close or minimize the last activity when ESC is pressed
+  useHotkeys('Escape', () => {
+    if (lastElement && !isOverview) {
+      Activity.closeOrMinimize(lastElement);
+    }
+  });
+
   return (
     <>
+      {/* Backdrop for overview mode */}
       <Box
         sx={{
           background: 'rgba(0,0,0,0.1)',
@@ -927,6 +1071,7 @@ export const ActivityBar = React.memo(function ({
 
   return (
     <Box
+      data-activity-bar="true"
       sx={theme => ({
         background: theme.palette.background.muted,
         borderTop: '1px solid',
@@ -1004,6 +1149,26 @@ export const ActivityBar = React.memo(function ({
               </Box>
             </Box>
           </Button>
+          <Tooltip title={it.pinned ? t('Unpin') : t('Pin')}>
+            <IconButton
+              size="small"
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                Activity.update(it.id, { pinned: !it.pinned });
+              }}
+              sx={{
+                width: '42px',
+                height: '100%',
+                borderRadius: 1,
+                flexShrink: 0,
+                color: it.pinned ? 'primary.main' : undefined,
+              }}
+              aria-label={it.pinned ? t('Unpin') : t('Pin')}
+            >
+              <Icon icon={it.pinned ? 'mdi:pin' : 'mdi:pin-outline'} />
+            </IconButton>
+          </Tooltip>
           <IconButton
             size="small"
             onClick={e => {
diff --git a/frontend/src/components/activity/__snapshots__/Activity.Basic.stories.storyshot b/frontend/src/components/activity/__snapshots__/Activity.Basic.stories.storyshot
@@ -166,6 +166,7 @@
       </div>
       <div
         class="MuiBox-root css-3ykv34"
+        data-activity-bar="true"
       >
         <div
           class="MuiBox-root css-16dgwon"
@@ -192,6 +193,17 @@
               class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
           </button>
+          <button
+            aria-label="Pin"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-182yqqz-MuiButtonBase-root-MuiIconButton-root"
+            data-mui-internal-clone-element="true"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
           <button
             aria-label="Close"
             class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-182yqqz-MuiButtonBase-root-MuiIconButton-root"
@@ -228,6 +240,17 @@
               class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
           </button>
+          <button
+            aria-label="Pin"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-182yqqz-MuiButtonBase-root-MuiIconButton-root"
+            data-mui-internal-clone-element="true"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
           <button
             aria-label="Close"
             class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-182yqqz-MuiButtonBase-root-MuiIconButton-root"
diff --git a/frontend/src/components/common/Link.tsx b/frontend/src/components/common/Link.tsx
@@ -143,6 +143,8 @@ function PureLink(
 
 export default function Link(props: React.PropsWithChildren<LinkProps | LinkObjectProps>) {
   const drawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  const activities = useTypedSelector(state => state.activity?.activities || {});
+  const activityHistory = useTypedSelector(state => state.activity?.history || []);
 
   const { tooltip, ...propsRest } = props as LinkObjectProps;
 
@@ -175,33 +177,50 @@ export default function Link(props: React.PropsWithChildren<LinkProps | LinkObje
                 }
               : { kind, metadata: { name, namespace }, cluster };
 
-          Activity.launch({
-            id:
-              'details' +
-              selectedResource.kind +
-              ' ' +
-              selectedResource.metadata.name +
-              selectedResource.cluster,
-            title: selectedResource.kind + ' ' + selectedResource.metadata.name,
-            hideTitleInHeader: true,
-            location: 'split-right',
-            cluster: selectedResource.cluster,
-            temporary: true,
-            content: (
-              <KubeObjectDetails
-                resource={{
-                  kind: selectedResource.kind,
-                  metadata: {
-                    name: selectedResource.metadata.name,
-                    namespace: selectedResource.metadata.namespace,
-                  },
-                  cluster: selectedResource.cluster,
-                }}
-                customResourceDefinition={selectedResource.customResourceDefinition}
-              />
-            ),
-            icon: <KubeIcon kind={selectedResource.kind} width="100%" height="100%" />,
-          });
+          const activityId =
+            'details' +
+            selectedResource.kind +
+            ' ' +
+            selectedResource.metadata.name +
+            selectedResource.cluster;
+
+          // Get the currently active (last) activity
+          const currentActivityId = activityHistory[activityHistory.length - 1];
+          const currentActivity = activities[activityId];
+
+          // Check if clicking the same resource that's currently open
+          if (currentActivityId === activityId && currentActivity) {
+            // Same resource clicked again - close or minimize based on pinned state
+            Activity.closeOrMinimize(activityId);
+          } else if (currentActivity && currentActivity.minimized) {
+            // If the activity exists but is minimized, restore it
+            Activity.update(activityId, { minimized: false });
+          } else {
+            // Different resource or not open - launch it
+            // (Activity.launch will automatically close other temporary activities)
+            Activity.launch({
+              id: activityId,
+              title: selectedResource.kind + ' ' + selectedResource.metadata.name,
+              hideTitleInHeader: true,
+              location: 'split-right',
+              cluster: selectedResource.cluster,
+              temporary: true,
+              content: (
+                <KubeObjectDetails
+                  resource={{
+                    kind: selectedResource.kind,
+                    metadata: {
+                      name: selectedResource.metadata.name,
+                      namespace: selectedResource.metadata.namespace,
+                    },
+                    cluster: selectedResource.cluster,
+                  }}
+                  customResourceDefinition={selectedResource.customResourceDefinition}
+                />
+              ),
+              icon: <KubeIcon kind={selectedResource.kind} width="100%" height="100%" />,
+            });
+          }
         }
       : undefined;
 
diff --git a/frontend/src/lib/k8s/service.ts b/frontend/src/lib/k8s/service.ts
@@ -101,7 +101,35 @@ class Service extends KubeObject<KubeService> {
   }
 
   getPorts() {
-    return this.spec?.ports?.map(port => port.port);
+    const ports = this.spec?.ports ?? [];
+    const serviceType = this.spec?.type;
+    const lbIngresses = this.status?.loadBalancer?.ingress ?? [];
+    const lbPorts = lbIngresses.flatMap(ing => ing?.ports ?? []);
+
+    return ports.map(p => {
+      const protocol = (p.protocol || 'TCP').toUpperCase();
+
+      // NodePort: show <port>:<nodePort>/<protocol>
+      if (serviceType === 'NodePort' && p.nodePort) {
+        return `${p.port}:${p.nodePort}/${protocol}`;
+      }
+
+      // LoadBalancer: prefer status.loadBalancer.ingress[].ports if available
+      if (serviceType === 'LoadBalancer') {
+        const matchingLbPort =
+          lbPorts.find(lp => (lp?.protocol || '').toUpperCase() === protocol) || lbPorts[0];
+        if (matchingLbPort?.port) {
+          return `${p.port}:${matchingLbPort.port}/${protocol}`;
+        }
+        if (p.nodePort) {
+          return `${p.port}:${p.nodePort}/${protocol}`;
+        }
+        return `${p.port}/${protocol}`;
+      }
+
+      // Default: keep previous behavior (just service port number)
+      return p.port;
+    });
   }
 
   getSelector() {
