UX: Custom colored cluster menu (kafbat#398)

Leshe4ka · Leshe4ka · Haarolean · web-flow · commit 82ad714ac462 · 2025-03-17T17:46:05.000+04:00
Co-authored-by: Leshe4ka &lt;kozyurov.alexey@google.com&gt;
Co-authored-by: Roman Zabaluev &lt;gpg@haarolean.dev&gt;
Co-authored-by: Vlad Senyuta &lt;vlad.senyuta@gmail.com&gt;
diff --git a/build.gradle b/build.gradle
@@ -28,16 +28,14 @@ subprojects {
 
 boolean resolveBooleanProperty(String propertyName, boolean defaultValue = false) {
     def propertyValueStr = findProperty(propertyName)
-    return propertyValueStr == null ? defaultValue : propertyValueStr.toBoolean();
+    return propertyValueStr == null ? defaultValue : propertyValueStr.toBoolean()
 }
 
 ext {
     release = resolveBooleanProperty("release")
     includeFrontend = resolveBooleanProperty("include-frontend", release)
     buildDockerImages = resolveBooleanProperty("build-docker-images", release)
     runE2e = resolveBooleanProperty("run-e2e")
-    e2eHeadlessOff = resolveBooleanProperty("e2e-headless-off")
-    e2eSelenoidOff = resolveBooleanProperty("e2e-selenoid-off")
 }
 
 sonar {
diff --git a/e2e-tests/README.md b/e2e-tests/README.md
@@ -40,7 +40,7 @@ docker-compose -f documentation/compose/e2e-tests.yaml up -d
 2. To run test suite select its name (options: `regression`, `sanity`, `smoke`) and put it instead %s into command below
 
 ```
-./mvnw -Dsurefire.suiteXmlFiles='src/test/resources/%s.xml' -f 'e2e-tests' test -Pprod
+./gradlew :e2e-tests:test -Prun-e2e=true -Psuite_name=%s
 ```
 
 ### Reporting
diff --git a/e2e-tests/build.gradle b/e2e-tests/build.gradle
@@ -52,8 +52,6 @@ test {
             suiteXmlFiles = [suitePath.toFile()]
         }
 
-        systemProperty "headless", e2eHeadlessOff
-        systemProperty "selenoid", e2eSelenoidOff
         systemProperty "allure.results.directory",
                 project.layout.buildDirectory.dir("allure-results").get().getAsFile().getAbsolutePath()
     }
diff --git a/e2e-tests/src/main/java/io/kafbat/ui/screens/connectors/ConnectorDetails.java b/e2e-tests/src/main/java/io/kafbat/ui/screens/connectors/ConnectorDetails.java
@@ -21,7 +21,7 @@ public class ConnectorDetails extends BasePage {
   @Step
   public ConnectorDetails waitUntilScreenReady() {
     waitUntilSpinnerDisappear();
-    dotMenuBtn.shouldBe(Condition.visible);
+    taskTab.shouldBe(Condition.visible);
     return this;
   }
 
@@ -48,7 +48,7 @@ public ConnectorDetails clickSubmitButton() {
 
   @Step
   public ConnectorDetails openDotMenu() {
-    WebUtil.clickByJavaScript(dotMenuBtn);
+    WebUtil.clickByActions(dotMenuBtn);
     return this;
   }
 
diff --git a/e2e-tests/src/main/java/io/kafbat/ui/screens/schemas/SchemaDetails.java b/e2e-tests/src/main/java/io/kafbat/ui/screens/schemas/SchemaDetails.java
@@ -61,7 +61,7 @@ public SchemaDetails openCompareVersionMenu() {
 
   @Step
   public SchemaDetails removeSchema() {
-    WebUtil.clickByJavaScript(dotMenuBtn);
+    WebUtil.clickByActions(dotMenuBtn);
     removeBtn.shouldBe(Condition.enabled).click();
     schemaConfirmBtn.shouldBe(Condition.visible).click();
     schemaConfirmBtn.shouldBe(Condition.disappear);
diff --git a/e2e-tests/src/main/java/io/kafbat/ui/screens/topics/TopicDetails.java b/e2e-tests/src/main/java/io/kafbat/ui/screens/topics/TopicDetails.java
@@ -91,7 +91,7 @@ public String getSettingsGridValueByKey(String key) {
 
   @Step
   public TopicDetails openDotMenu() {
-    WebUtil.clickByJavaScript(dotMenuBtn);
+    WebUtil.clickByActions(dotMenuBtn);
     return this;
   }
 
diff --git a/e2e-tests/src/main/java/io/kafbat/ui/settings/BaseSource.java b/e2e-tests/src/main/java/io/kafbat/ui/settings/BaseSource.java
@@ -7,11 +7,12 @@
 public abstract class BaseSource {
 
   public static final boolean HEADLESS = parseBoolean(getOptionalString(TRUE, System.getProperty("headless")));
+  public static final boolean SELENOID = parseBoolean(getOptionalString(TRUE, System.getProperty("selenoid")));
   public static final String CLUSTER_NAME = "local";
   public static final String CONNECT_NAME = "first";
   private static final String LOCAL_HOST = "localhost";
   public static final String REMOTE_URL = String.format("http://%s:4444/wd/hub", LOCAL_HOST);
   public static final String BASE_API_URL = String.format("http://%s:8080", LOCAL_HOST);
-  public static final String BASE_HOST = "host.docker.internal";
+  public static final String BASE_HOST = SELENOID ? "host.docker.internal" : LOCAL_HOST;
   public static final String BASE_UI_URL = String.format("http://%s:8080", BASE_HOST);
 }
diff --git a/e2e-tests/src/main/java/io/kafbat/ui/settings/drivers/WebDriver.java b/e2e-tests/src/main/java/io/kafbat/ui/settings/drivers/WebDriver.java
@@ -38,17 +38,17 @@ public static void browserSetup() {
         .addArguments("--disable-gpu")
         .addArguments("--no-sandbox")
         .addArguments("--lang=en_US");
-
-    Configuration.remote = BaseSource.REMOTE_URL;
-    Configuration.remoteConnectionTimeout = 180000;
-    Configuration.remoteReadTimeout = 180000;
-    Map<String, Object> selenoidOptions = new HashMap<>();
-    selenoidOptions.put("enableVNC", true);
-    selenoidOptions.put("enableLog", true);
-    selenoidOptions.put("enableVideo", false);
-    selenoidOptions.put("sessionTimeout", "30m");
-    chromeOptions.setCapability("selenoid:options", selenoidOptions);
-
+    if (BaseSource.SELENOID) {
+      Configuration.remote = BaseSource.REMOTE_URL;
+      Configuration.remoteConnectionTimeout = 180000;
+      Configuration.remoteReadTimeout = 180000;
+      Map<String, Object> selenoidOptions = new HashMap<>();
+      selenoidOptions.put("enableVNC", true);
+      selenoidOptions.put("enableLog", true);
+      selenoidOptions.put("enableVideo", false);
+      selenoidOptions.put("sessionTimeout", "30m");
+      chromeOptions.setCapability("selenoid:options", selenoidOptions);
+    }
     Configuration.browserCapabilities = chromeOptions;
   }
 
diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -20,6 +20,8 @@ import {
   clusterTopicsRelativePath,
 } from 'lib/paths';
 import { useLocation } from 'react-router-dom';
+import { useLocalStorage } from 'lib/hooks/useLocalStorage';
+import { ClusterColorKey } from 'theme/theme';
 
 interface ClusterMenuProps {
   name: Cluster['name'];
@@ -38,17 +40,22 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
     features?.includes(key);
   const [isOpen, setIsOpen] = useState(!!singleMode);
   const location = useLocation();
+  const [colorKey, setColorKey] = useLocalStorage<ClusterColorKey>(
+    `clusterColor-${name}`,
+    'transparent'
+  );
 
   const getIsMenuItemActive = (path: string) =>
     location.pathname.includes(path);
 
   return (
-    <ul role="menu">
+    <S.ClusterList role="menu" $colorKey={colorKey}>
       <MenuTab
         title={name}
         status={status}
         isOpen={isOpen}
         toggleClusterMenu={() => setIsOpen((prev) => !prev)}
+        setColorKey={setColorKey}
       />
       {isOpen && (
         <S.List>
@@ -98,7 +105,7 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
           )}
         </S.List>
       )}
-    </ul>
+    </S.ClusterList>
   );
 };
 
diff --git a/frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.styled.ts b/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;
+        }
+    `}
+`;
diff --git a/frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.tsx b/frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.tsx
@@ -0,0 +1,50 @@
+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
+      aria-label="Color Picker 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;
diff --git a/frontend/src/components/Nav/Menu/MenuColorPicker/__tests__/MenuColorPicker.spec.tsx b/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();
+  });
+});
diff --git a/frontend/src/components/Nav/Menu/MenuTab.tsx b/frontend/src/components/Nav/Menu/MenuTab.tsx
@@ -1,5 +1,7 @@
-import React, { type FC } from 'react';
+import React, { Dispatch, type FC, SetStateAction } from 'react';
 import { ServerStatus } from 'generated-sources';
+import MenuColorPicker from 'components/Nav/Menu/MenuColorPicker/MenuColorPicker';
+import { ClusterColorKey } from 'theme/theme';
 
 import * as S from './styled';
 
@@ -8,15 +10,17 @@ export interface MenuTabProps {
   status: ServerStatus;
   isOpen: boolean;
   toggleClusterMenu: () => void;
+  setColorKey: Dispatch<SetStateAction<ClusterColorKey>>;
 }
 
 const MenuTab: FC<MenuTabProps> = ({
   title,
   toggleClusterMenu,
   status,
   isOpen,
+  setColorKey,
 }) => (
-  <S.MenuItem $variant="primary" onClick={toggleClusterMenu}>
+  <S.MenuItem $variant="secondary" onClick={toggleClusterMenu}>
     <S.ContentWrapper>
       <S.StatusIconWrapper>
         <S.StatusIcon status={status} aria-label="status">
@@ -27,9 +31,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>
 );
 
diff --git a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx b/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}
diff --git a/frontend/src/components/Nav/Menu/styled.ts b/frontend/src/components/Nav/Menu/styled.ts
diff --git a/frontend/src/components/Nav/Nav.styled.ts b/frontend/src/components/Nav/Nav.styled.ts
diff --git a/frontend/src/components/common/Dropdown/Dropdown.styled.ts b/frontend/src/components/common/Dropdown/Dropdown.styled.ts
diff --git a/frontend/src/components/common/Dropdown/Dropdown.tsx b/frontend/src/components/common/Dropdown/Dropdown.tsx
diff --git a/frontend/src/components/common/Icons/ColorPickerIcon.tsx b/frontend/src/components/common/Icons/ColorPickerIcon.tsx
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts

Original file line number	Diff line number	Diff line change
`@@ -52,8 +52,6 @@ test {`
`52`	`52`	`suiteXmlFiles = [suitePath.toFile()]`
`53`	`53`	`}`
`54`	`54`
`55`		`- systemProperty "headless", e2eHeadlessOff`
`56`		`- systemProperty "selenoid", e2eSelenoidOff`
`57`	`55`	`systemProperty "allure.results.directory",`
`58`	`56`	`project.layout.buildDirectory.dir("allure-results").get().getAsFile().getAbsolutePath()`
`59`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ public class ConnectorDetails extends BasePage {`
`21`	`21`	`@Step`
`22`	`22`	`public ConnectorDetails waitUntilScreenReady() {`
`23`	`23`	`waitUntilSpinnerDisappear();`
`24`		`- dotMenuBtn.shouldBe(Condition.visible);`
	`24`	`+ taskTab.shouldBe(Condition.visible);`
`25`	`25`	`return this;`
`26`	`26`	`}`
`27`	`27`
`@@ -48,7 +48,7 @@ public ConnectorDetails clickSubmitButton() {`
`48`	`48`
`49`	`49`	`@Step`
`50`	`50`	`public ConnectorDetails openDotMenu() {`
`51`		`- WebUtil.clickByJavaScript(dotMenuBtn);`
	`51`	`+ WebUtil.clickByActions(dotMenuBtn);`
`52`	`52`	`return this;`
`53`	`53`	`}`
`54`	`54`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ public String getSettingsGridValueByKey(String key) {`
`91`	`91`
`92`	`92`	`@Step`
`93`	`93`	`public TopicDetails openDotMenu() {`
`94`		`- WebUtil.clickByJavaScript(dotMenuBtn);`
	`94`	`+ WebUtil.clickByActions(dotMenuBtn);`
`95`	`95`	`return this;`
`96`	`96`	`}`
`97`	`97`