frontend: Add cluster chooser action for the cluster sidebar item

And disable the cluster chooser button. The logic for the cluster
chooser button however remains, in order to support the plugin-registered
chooser components.

Signed-off-by: Joaquim Rocha <[email protected]>

Author: joaquimrocha

frontend/src/components/Sidebar/ClusterChooserAction.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2025 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Icon } from '@iconify/react';
+import Button from '@mui/material/Button';
+import React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useTypedSelector } from '../../redux/hooks';
+import ClusterChooserPopup from '../cluster/ClusterChooserPopup';
+
+/**
+ * Action component for cluster sidebar items.
+ * This shows an ellipsis icon that opens the cluster chooser popup.
+ * Only displays when no plugin has registered a custom cluster chooser button,
+ * whose default button component used to be displayed at the top bar.
+ */
+export const ClusterChooserAction: React.FC = () => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const ChooserButton = useTypedSelector(state => state.ui.clusterChooserButtonComponent);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+  useHotkeys(
+    'ctrl+shift+l',
+    () => {
+      // Only open popup if no plugin has registered a custom cluster chooser button
+      if (!ChooserButton) {
+        setAnchorEl(buttonRef.current);
+      }
+    },
+    { preventDefault: true }
+  );
+
+  // Don't render if a plugin has registered a custom cluster chooser button
+  if (ChooserButton) {
+    return null;
+  }
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    // Prevent both default action and event propagation to avoid sidebar navigation
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        variant="outlined"
+        sx={{
+          minWidth: 'unset',
+          px: 0.5,
+        }}
+        onClick={handleClick}
+      >
+        <Icon icon="mdi:dots-horizontal" width={16} height={16} />
+      </Button>
+      <ClusterChooserPopup anchor={anchorEl} onClose={handleClose} />
+    </>
+  );
+};

frontend/src/components/Sidebar/useSidebarItems.ts

@@ -22,6 +22,7 @@ import { useSelectedClusters } from '../../lib/k8s';
 import { createRouteURL } from '../../lib/router';
 import { useTypedSelector } from '../../redux/hooks';
 import { DefaultSidebars, SidebarItemProps } from '.';
+import { ClusterChooserAction } from './ClusterChooserAction';
 
 /** Iterates over every entry in the list, including children */
 const forEachEntry = (items: SidebarItemProps[], cb: (item: SidebarItemProps) => void) => {
@@ -67,6 +68,8 @@ export const useSidebarItems = (sidebarName: string = DefaultSidebars.IN_CLUSTER
           ? '/'
           : createRouteURL('cluster', { cluster: Object.keys(clusters)[0] }),
         divider: !shouldShowHomeItem,
+        // Add cluster chooser action to cluster items (when not showing home)
+        endAction: !shouldShowHomeItem ? ClusterChooserAction : undefined,
       },
       {
         name: 'notifications',
@@ -112,6 +115,7 @@ export const useSidebarItems = (sidebarName: string = DefaultSidebars.IN_CLUSTER
         label: selectedClusters.length ? t('Clusters') : t('glossary|Cluster'),
         subtitle: selectedClusters.join('\n') || undefined,
         icon: 'mdi:hexagon-multiple-outline',
+        endAction: ClusterChooserAction,
         subList: [
           {
             name: 'namespaces',

frontend/src/components/cluster/Chooser.tsx

@@ -33,7 +33,6 @@ import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import _ from 'lodash';
 import React, { isValidElement, PropsWithChildren } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { generatePath } from 'react-router';
@@ -51,32 +50,30 @@ import ActionButton from '../common/ActionButton';
 import { DialogTitle } from '../common/Dialog';
 import ErrorBoundary from '../common/ErrorBoundary';
 import Loader from '../common/Loader';
-import ClusterChooser from './ClusterChooser';
-import ClusterChooserPopup from './ClusterChooserPopup';
 
 export interface ClusterTitleProps {
+  /** @deprecated This prop is not used in the current implementation. */
   clusters?: {
     [clusterName: string]: Cluster;
   };
   cluster?: string;
+  /** @deprecated This prop is not used in the current implementation. */
   onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
+/**
+ * This component renders the cluster chooser button if it's registered by
+ * plugins. Otherwise, it doesn't show anything. This component still exists to
+ * provide compatibility with the plugins that expect a cluster chooser to exist.
+ *
+ * @param props
+ * @returns
+ */
 export function ClusterTitle(props: ClusterTitleProps) {
-  const { cluster, clusters, onClick } = props;
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const { cluster } = props;
   const arePluginsLoaded = useTypedSelector(state => state.plugins.loaded);
   const ChooserButton = useTypedSelector(state => state.ui.clusterChooserButtonComponent);
 
-  useHotkeys(
-    'ctrl+shift+l',
-    () => {
-      setAnchorEl(buttonRef.current);
-    },
-    { preventDefault: true }
-  );
-
   if (!cluster) {
     return null;
   }
@@ -85,37 +82,11 @@ export function ClusterTitle(props: ClusterTitleProps) {
     return null;
   }
 
-  if (!ChooserButton && Object.keys(clusters || {}).length <= 1) {
+  if (!ChooserButton || !isValidElement(ChooserButton)) {
     return null;
   }
 
-  return (
-    <ErrorBoundary>
-      {ChooserButton ? (
-        isValidElement(ChooserButton) ? (
-          ChooserButton
-        ) : (
-          <ChooserButton
-            clickHandler={e => {
-              onClick && onClick(e);
-              e?.currentTarget && setAnchorEl(e.currentTarget);
-            }}
-            cluster={cluster}
-          />
-        )
-      ) : (
-        <ClusterChooser
-          ref={buttonRef}
-          clickHandler={e => {
-            onClick && onClick(e);
-            e?.currentTarget && setAnchorEl(e.currentTarget);
-          }}
-          cluster={cluster}
-        />
-      )}
-      <ClusterChooserPopup anchor={anchorEl} onClose={() => setAnchorEl(null)} />
-    </ErrorBoundary>
-  );
+  return <ErrorBoundary>{ChooserButton}</ErrorBoundary>;
 }
 
 interface ClusterButtonProps extends PropsWithChildren<{}> {

frontend/src/components/cluster/ClusterChooserPopup.tsx

@@ -38,7 +38,11 @@ import { Cluster } from '../../lib/k8s/cluster';
 import { createRouteURL } from '../../lib/router';
 import { getCluster, getClusterPrefixedPath } from '../../lib/util';
 
-function ClusterListItem(props: { cluster: Cluster; onClick: () => void; selected?: boolean }) {
+function ClusterListItem(props: {
+  cluster: Cluster;
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+  selected?: boolean;
+}) {
   const { cluster, selected, onClick } = props;
   const { t } = useTranslation();
   const theme = useTheme();
@@ -209,6 +213,12 @@ function ClusterChooserPopup(props: ChooserPopupPros) {
     }
   }
 
+  function clusterClicked(event: React.MouseEvent<HTMLElement>, cluster: Cluster) {
+    event.stopPropagation();
+    event.preventDefault();
+    selectCluster(cluster);
+  }
+
   if (!anchor) {
     return null;
   }
@@ -290,7 +300,7 @@ function ClusterChooserPopup(props: ChooserPopupPros) {
                 <ClusterListItem
                   key={`recent_cluster_${cluster.name}`}
                   cluster={cluster}
-                  onClick={() => selectCluster(cluster)}
+                  onClick={(event: React.MouseEvent<HTMLElement>) => clusterClicked(event, cluster)}
                   selected={cluster.name === getActiveDescendantCluster()?.name}
                 />
               ))}
@@ -301,7 +311,7 @@ function ClusterChooserPopup(props: ChooserPopupPros) {
             <ClusterListItem
               key={`cluster_button_${cluster.name}`}
               cluster={cluster}
-              onClick={() => selectCluster(cluster)}
+              onClick={(event: React.MouseEvent<HTMLElement>) => clusterClicked(event, cluster)}
               selected={cluster.name === getActiveDescendantCluster()?.name}
             />
           ))}