UX: Custom colored cluster menu

frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx

@@ -20,6 +20,7 @@ import {
   clusterTopicsRelativePath,
 } from 'lib/paths';
 import { useLocation } from 'react-router-dom';
+import { useLocalStorage } from 'lib/hooks/useLocalStorage';
 
 interface ClusterMenuProps {
   name: Cluster['name'];
@@ -38,17 +39,22 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
     features?.includes(key);
   const [isOpen, setIsOpen] = useState(!!singleMode);
   const location = useLocation();
+  const [colorKey, setColorKey] = useLocalStorage(
+    `clusterColor-${name}`,
+    'transparent'
+  );
 
   const getIsMenuItemActive = (path: string) =>
     location.pathname.includes(path);
 
   return (
-    <ul role="menu">
+    <S.ClusterList $colorKey={colorKey}>
       <MenuTab
         title={name}
         status={status}
         isOpen={isOpen}
         toggleClusterMenu={() => setIsOpen((prev) => !prev)}
+        setColorKey={setColorKey}
       />
       {isOpen && (
         <S.List>
@@ -98,7 +104,7 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
           )}
         </S.List>
       )}
-    </ul>
+    </S.ClusterList>
   );
 };
 

frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.styled.ts

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { ClusterColorKey } from 'theme/theme';
+
+export const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(2, auto);
+  padding: 0 8px;
+  gap: 8px;
+  border-radius: 8px;
+  cursor: auto;
+`;
+
+export const ColorCircle = styled.div<{ $colorKey: ClusterColorKey }>`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin: 4px;
+  background-color: ${({ $colorKey, theme }) =>
+    theme.clusterColorPicker.backgroundColor[$colorKey]};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    outline: ${({ theme }) => `1px solid ${theme.clusterColorPicker.outline}`};
+  }
+
+  &:active {
+    outline: ${({ theme }) => `2px solid ${theme.clusterColorPicker.outline}`};
+  }
+
+  ${({ $colorKey, theme }) =>
+    $colorKey === 'transparent' &&
+    `
+        border: 1px solid ${theme.clusterColorPicker.transparentCircle.border};
+        &:before {
+            content: '\\2716';
+            font-size: 8px;
+            color: ${theme.clusterColorPicker.transparentCircle.cross};
+        }
+        &:hover {
+            border: none;
+        }
+        &:active {
+            border: none;
+        }
+    `}
+`;

frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Dropdown } from 'components/common/Dropdown';
+import ColorPickerIcon from 'components/common/Icons/ColorPickerIcon';
+import { ClusterColorKey } from 'theme/theme';
+
+import * as S from './MenuColorPicker.styled';
+
+export interface MenuColorPickerProps {
+  setColorKey: (key: ClusterColorKey) => void;
+}
+
+const COLOR_KEYS: ClusterColorKey[] = [
+  'transparent',
+  'gray',
+  'red',
+  'orange',
+  'lettuce',
+  'green',
+  'turquoise',
+  'blue',
+  'violet',
+  'pink',
+];
+
+const MenuColorPicker = ({ setColorKey }: MenuColorPickerProps) => {
+  const handleCircleCLick = (colorKey: ClusterColorKey) => () => {
+    setColorKey(colorKey);
+  };
+
+  return (
+    <Dropdown offsetY={5} label={<ColorPickerIcon />}>
+      <S.Container>
+        {COLOR_KEYS.map((key) => (
+          <S.ColorCircle
+            data-testid={`color-circle-${key}`}
+            onClick={handleCircleCLick(key)}
+            $colorKey={key}
+            key={key}
+          />
+        ))}
+      </S.Container>
+    </Dropdown>
+  );
+};
+
+export default MenuColorPicker;

frontend/src/components/Nav/Menu/MenuColorPicker/__tests__/MenuColorPicker.spec.tsx

@@ -0,0 +1,49 @@
+import { fireEvent, screen } from '@testing-library/react';
+import MenuColorPicker, {
+  MenuColorPickerProps,
+} from 'components/Nav/Menu/MenuColorPicker/MenuColorPicker';
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { ClusterColorKey } from 'theme/theme';
+
+describe('MenuColorPicker component', () => {
+  const setupWrapper = (props?: Partial<MenuColorPickerProps>) => (
+    <MenuColorPicker setColorKey={jest.fn()} {...props} />
+  );
+
+  it('renders all color circles', () => {
+    render(setupWrapper());
+
+    const colorKeys: ClusterColorKey[] = [
+      'transparent',
+      'gray',
+      'red',
+      'orange',
+      'lettuce',
+      'green',
+      'turquoise',
+      'blue',
+      'violet',
+      'pink',
+    ];
+
+    colorKeys.forEach((key) => {
+      expect(screen.getByTestId(`color-circle-${key}`)).toBeInTheDocument();
+    });
+  });
+
+  it('calls setColorKey with the correct color key when a color circle is clicked', () => {
+    const setColorKeyMock = jest.fn();
+    render(setupWrapper({ setColorKey: setColorKeyMock }));
+
+    const colorCircle = screen.getByTestId('color-circle-red');
+    fireEvent.click(colorCircle);
+
+    expect(setColorKeyMock).toHaveBeenCalledWith('red');
+  });
+
+  it('renders the Dropdown component', () => {
+    render(setupWrapper());
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});

frontend/src/components/Nav/Menu/MenuTab.tsx

@@ -1,5 +1,6 @@
 import React, { type FC } from 'react';
 import { ServerStatus } from 'generated-sources';
+import MenuColorPicker from 'components/Nav/Menu/MenuColorPicker/MenuColorPicker';
 
 import * as S from './styled';
 
@@ -8,13 +9,15 @@ export interface MenuTabProps {
   status: ServerStatus;
   isOpen: boolean;
   toggleClusterMenu: () => void;
+  setColorKey: () => void;
 }
 
 const MenuTab: FC<MenuTabProps> = ({
   title,
   toggleClusterMenu,
   status,
   isOpen,
+  setColorKey,
 }) => (
   <S.MenuItem $variant="primary" onClick={toggleClusterMenu}>
     <S.ContentWrapper>
@@ -27,9 +30,15 @@ const MenuTab: FC<MenuTabProps> = ({
       <S.Title title={title}>{title}</S.Title>
     </S.ContentWrapper>
 
-    <S.ChevronWrapper>
-      <S.ChevronIcon $isOpen={isOpen} />
-    </S.ChevronWrapper>
+    <S.ActionsWrapper>
+      <S.ColorPickerWrapper>
+        <MenuColorPicker setColorKey={setColorKey} />
+      </S.ColorPickerWrapper>
+
+      <S.ChevronWrapper>
+        <S.ChevronIcon $isOpen={isOpen} />
+      </S.ChevronWrapper>
+    </S.ActionsWrapper>
   </S.MenuItem>
 );
 

frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx

@@ -11,6 +11,7 @@ const toggleClusterMenuMock = jest.fn();
 describe('MenuTab component', () => {
   const setupWrapper = (props?: Partial<MenuTabProps>) => (
     <MenuTab
+      setColorKey={() => {}}
       status={ServerStatus.ONLINE}
       isOpen
       title={testClusterName}

frontend/src/components/Nav/Menu/styled.ts

@@ -1,14 +1,19 @@
 import styled, { css } from 'styled-components';
 import { ServerStatus } from 'generated-sources';
 
+export const ColorPickerWrapper = styled.div`
+  display: flex;
+  visibility: hidden;
+`;
+
 export const MenuItem = styled('li').attrs({ role: 'menuitem' })<{
   $variant: 'primary' | 'secondary';
   $isActive?: boolean;
 }>(
   ({ theme, $variant, $isActive }) => css`
     font-size: 14px;
     font-weight: ${theme.menu[$isActive ? 'primary' : $variant].fontWeight};
-    height: 32px;
+    min-height: 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -28,6 +33,10 @@ export const MenuItem = styled('li').attrs({ role: 'menuitem' })<{
     &:hover {
       background-color: ${theme.menu[$variant].backgroundColor.hover};
       color: ${theme.menu[$variant].color.hover};
+
+      ${ColorPickerWrapper} {
+        visibility: visible;
+      }
     }
 
     &:active {
@@ -39,15 +48,12 @@ export const MenuItem = styled('li').attrs({ role: 'menuitem' })<{
 
 export const ContentWrapper = styled.div`
   display: flex;
-  align-items: center;
+  align-items: baseline;
   column-gap: 4px;
 `;
 
 export const Title = styled.div`
-  white-space: nowrap;
-  max-width: 110px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  width: 100%;
 `;
 
 export const StatusIconWrapper = styled.svg.attrs({
@@ -96,3 +102,8 @@ export const ChevronIcon = styled.path.attrs<ChevronIconProps>(
 )<ChevronIconProps>`
   stroke: ${({ theme }) => theme.menu.primary.chevronIconColor};
 `;
+
+export const ActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;

frontend/src/components/Nav/Nav.styled.ts

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
+import { ClusterColorKey } from 'theme/theme';
 
 export const List = styled.ul.attrs({ role: 'menu' })`
-  padding: 2px 4px 6px 4px;
-
   & > & {
     padding: 0 0 0 8px;
   }
@@ -11,3 +10,13 @@ export const List = styled.ul.attrs({ role: 'menu' })`
     margin-bottom: 2px;
   }
 `;
+
+export const ClusterList = styled.ul.attrs<{ $colorKey: ClusterColorKey }>({
+  role: 'menu',
+})`
+  border-radius: 8px;
+  padding: 4px 4px 4px 4px;
+  margin-bottom: 8px;
+  background-color: ${({ theme, $colorKey }) =>
+    theme.clusterMenu.backgroundColor[$colorKey]};
+`;

frontend/src/components/common/Dropdown/Dropdown.styled.ts

@@ -1,6 +1,6 @@
 import styled, { css, keyframes } from 'styled-components';
 import { ControlledMenu } from '@szhsin/react-menu';
-import { menuSelector, menuItemSelector } from '@szhsin/react-menu/style-utils';
+import { menuItemSelector, menuSelector } from '@szhsin/react-menu/style-utils';
 
 import '@szhsin/react-menu/dist/core.css';
 
@@ -18,6 +18,7 @@ const menuHide = keyframes`
 export const Dropdown = styled(ControlledMenu)(
   ({ theme: { dropdown } }) => css`
     // container for the menu items
+
     ${menuSelector.name} {
       border: 1px solid ${dropdown.borderColor};
       box-shadow: 0 4px 16px ${dropdown.shadow};
@@ -26,6 +27,7 @@ export const Dropdown = styled(ControlledMenu)(
       font-size: 14px;
       background-color: ${dropdown.backgroundColor};
       text-align: left;
+      cursor: auto;
     }
 
     ${menuSelector.stateOpening} {
@@ -34,6 +36,7 @@ export const Dropdown = styled(ControlledMenu)(
 
     // NOTE: animation-fill-mode: forwards is required to
     // prevent flickering with React 18 createRoot()
+
     ${menuSelector.stateClosing} {
       animation: ${menuHide} 0.2s ease-out forwards;
     }
@@ -62,6 +65,8 @@ export const DropdownButton = styled.button`
   display: flex;
   cursor: pointer;
   align-self: center;
+  padding: 0;
+  margin: 0 4px;
 
   &:disabled {
     opacity: 0.5;

frontend/src/components/common/Dropdown/Dropdown.tsx

@@ -10,7 +10,12 @@ interface DropdownProps extends PropsWithChildren<Partial<MenuProps>> {
   disabled?: boolean;
 }
 
-const Dropdown: React.FC<DropdownProps> = ({ label, disabled, children }) => {
+const Dropdown: React.FC<DropdownProps> = ({
+  label,
+  disabled,
+  children,
+  offsetY,
+}) => {
   const ref = useRef(null);
   const { value: isOpen, setFalse, setTrue } = useBoolean(false);
 
@@ -37,8 +42,12 @@ const Dropdown: React.FC<DropdownProps> = ({ label, disabled, children }) => {
         onClose={setFalse}
         align="end"
         direction="bottom"
-        offsetY={10}
+        offsetY={offsetY ?? 10}
         viewScroll="auto"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
       >
         {children}
       </S.Dropdown>