Skip to content

Commit

Permalink
FE: Redesign menu (#227)
Browse files Browse the repository at this point in the history
Co-authored-by: Leshe4ka <[email protected]>
Co-authored-by: Roman Zabaluev <[email protected]>
Co-authored-by: VladSenyuta <[email protected]>
  • Loading branch information
4 people authored Apr 30, 2024
1 parent 79553e4 commit fcb007c
Show file tree
Hide file tree
Showing 36 changed files with 653 additions and 507 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
public class NaviSideBar extends BasePage {

protected SelenideElement dashboardMenuItem = $x("//a[@title='Dashboard']");
protected String sideMenuOptionElementLocator = ".//ul/li[contains(.,'%s')]";
protected String sideMenuOptionElementLocator = ".//ul/a[@title='%s']";
protected String clusterElementLocator = "//aside/ul/li[contains(.,'%s')]";

private SelenideElement expandCluster(String clusterName) {
SelenideElement clusterElement = $x(String.format(clusterElementLocator, clusterName)).shouldBe(Condition.visible);
if (clusterElement.parent().$$x(".//ul").size() == 0) {
if (clusterElement.parent().$$x(".//ul").isEmpty()) {
WebUtil.clickByActions(clusterElement);
}
return clusterElement;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import static com.codeborne.selenide.Selenide.$;
import static com.codeborne.selenide.Selenide.$$x;
import static com.codeborne.selenide.Selenide.$x;
import static com.codeborne.selenide.Selenide.sleep;
import static org.openqa.selenium.By.id;

import com.codeborne.selenide.Condition;
Expand Down Expand Up @@ -36,6 +35,7 @@ public class SchemaCreateForm extends BasePage {
protected ElementsCollection visibleMarkers =
$$x("//div[@class='ace_scroller']//div[contains(@class,'codeMarker')]");
protected ElementsCollection elementsCompareVersionDdl = $$x("//ul[@role='listbox']/ul/li");
protected String versionDdlElementLocator = "//ul/li[text()='Version %s']";
protected String ddlElementLocator = "//li[@value='%s']";

@Step
Expand Down Expand Up @@ -96,14 +96,14 @@ public int getVersionsNumberFromList() {

@Step
public SchemaCreateForm selectVersionFromDropDown(int versionNumberDd) {
$x(String.format(ddlElementLocator, versionNumberDd)).shouldBe(Condition.visible).click();
sleep(1000);
$x(String.format(versionDdlElementLocator, versionNumberDd)).shouldBe(Condition.visible).click();
waitUntilSpinnerDisappear(1);
return this;
}

@Step
public int getMarkedLinesNumber() {
return visibleMarkers.size();
return Math.toIntExact(visibleMarkers.asDynamicIterable().stream().count());
}

@Step
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package io.kafbat.ui.screens.topics;

import static com.codeborne.selenide.Condition.enabled;
import static com.codeborne.selenide.Selenide.$;
import static com.codeborne.selenide.Selenide.$$;
import static com.codeborne.selenide.Selenide.$x;
Expand All @@ -17,6 +18,7 @@
import io.kafbat.ui.screens.topics.enums.TimeToRetain;
import io.kafbat.ui.utilities.WebUtil;
import io.qameta.allure.Step;
import org.openqa.selenium.Keys;

public class TopicCreateEditForm extends BasePage {

Expand All @@ -32,7 +34,7 @@ public class TopicCreateEditForm extends BasePage {
protected SelenideElement customParameterDdl = $x("//input[contains(@name, 'customParams')][@role='listitem']");
protected SelenideElement deleteCustomParameterBtn = $x("//span[contains(@title, 'Delete customParam')]");
protected SelenideElement addCustomParameterTypeBtn = $x("//button[contains(text(), 'Add Custom Parameter')]");
protected SelenideElement customParameterValueField = $x("//input[@placeholder='Value']");
protected SelenideElement customParameterValueField = $x("//label[text()='Value *']/..//input");
protected SelenideElement validationCustomParameterValueMsg = $x("//p[contains(text(), 'Value is required')]");
protected String ddlElementLocator = "//li[@value='%s']";
protected String btnTimeToRetainLocator = "//button[@class][text()='%s']";
Expand Down Expand Up @@ -116,20 +118,27 @@ public TopicCreateEditForm setCustomParameterType(CustomParameterType customPara

@Step
public TopicCreateEditForm clearCustomParameterValue() {
WebUtil.clearByKeyboard(customParameterValueField);
customParameterValueField.shouldBe(enabled).sendKeys(Keys.END);
String value = customParameterValueField.getValue();
int valueLength = value != null
? value.length()
: 0;
for (int i = 0; i < valueLength; i++) {
customParameterValueField.sendKeys(Keys.BACK_SPACE);
}
return this;
}

@Step
public TopicCreateEditForm setNumberOfPartitions(int partitions) {
partitionsField.shouldBe(Condition.enabled).clear();
partitionsField.shouldBe(enabled).clear();
partitionsField.sendKeys(String.valueOf(partitions));
return this;
}

@Step
public TopicCreateEditForm setTimeToRetainDataByButtons(TimeToRetain timeToRetain) {
$x(String.format(btnTimeToRetainLocator, timeToRetain.getButton())).shouldBe(Condition.enabled).click();
$x(String.format(btnTimeToRetainLocator, timeToRetain.getButton())).shouldBe(enabled).click();
return this;
}

Expand Down
10 changes: 8 additions & 2 deletions e2e-tests/src/main/java/io/kafbat/ui/utilities/WebUtil.java
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package io.kafbat.ui.utilities;

import static com.codeborne.selenide.Condition.enabled;
import static io.kafbat.ui.variables.Common.LOG_RESULT;

import com.codeborne.selenide.Condition;
Expand Down Expand Up @@ -51,8 +52,13 @@ public static void clickByJavaScript(SelenideElement element) {

public static void clearByKeyboard(SelenideElement field) {
log.debug("\nclearByKeyboard: {{}}", field.getSearchCriteria());
field.shouldBe(Condition.enabled).sendKeys(Keys.END);
field.sendKeys(Keys.chord(Keys.CONTROL + "a"), Keys.DELETE);
field.shouldBe(enabled).sendKeys(Keys.PAGE_DOWN);
Selenide.actions()
.keyDown(Keys.SHIFT)
.sendKeys(Keys.PAGE_UP)
.keyUp(Keys.SHIFT)
.sendKeys(Keys.DELETE)
.perform();
}

public static boolean isVisible(SelenideElement element, int... timeoutInSeconds) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ public void updateSchemaAvroCheck() {
AVRO_SCHEMA.setValuePath(
System.getProperty("user.dir") + "/src/main/resources/testdata/schemas/schema_avro_update.json");
navigateToSchemaRegistryAndOpenDetails(AVRO_SCHEMA.getName());
int latestVersion = schemaDetails
.getLatestVersion();
schemaDetails
.openEditSchema();
schemaCreateForm
Expand All @@ -72,8 +74,10 @@ public void updateSchemaAvroCheck() {
.clickSubmitButton();
schemaDetails
.waitUntilScreenReady();
Assert.assertEquals(schemaDetails.getCompatibility(), CompatibilityLevel.CompatibilityEnum.NONE.toString(),
softly.assertEquals(schemaDetails.getLatestVersion(), latestVersion + 1, "getLatestVersion()");
softly.assertEquals(schemaDetails.getCompatibility(), CompatibilityLevel.CompatibilityEnum.NONE.toString(),
"getCompatibility()");
softly.assertAll();
}

@Test(priority = 3)
Expand All @@ -90,7 +94,9 @@ public void compareVersionsCheck() {
.getVersionsNumberFromList();
Assert.assertEquals(versionsNumberFromDdl, latestVersion, "Versions number is not matched");
schemaCreateForm
.selectVersionFromDropDown(latestVersion);
.selectVersionFromDropDown(latestVersion)
.openRightVersionDdl()
.selectVersionFromDropDown(latestVersion - 1);
Assert.assertEquals(schemaCreateForm.getMarkedLinesNumber(), 42, "getMarkedLinesNumber()");
}

Expand Down
2 changes: 0 additions & 2 deletions frontend/src/components/App.styled.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import styled from 'styled-components';

export const Layout = styled.div`
min-width: 1200px;
@media screen and (max-width: 1023px) {
min-width: initial;
}
Expand Down
71 changes: 0 additions & 71 deletions frontend/src/components/Nav/ClusterMenu.tsx

This file was deleted.

105 changes: 105 additions & 0 deletions frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React, { type FC, useState } from 'react';
import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
import * as S from 'components/Nav/Nav.styled';
import MenuTab from 'components/Nav/Menu/MenuTab';
import MenuItem from 'components/Nav/Menu/MenuItem';
import {
clusterACLPath,
clusterAclRelativePath,
clusterBrokerRelativePath,
clusterBrokersPath,
clusterConnectorsPath,
clusterConnectorsRelativePath,
clusterConsumerGroupsPath,
clusterConsumerGroupsRelativePath,
clusterKsqlDbPath,
clusterKsqlDbRelativePath,
clusterSchemasPath,
clusterSchemasRelativePath,
clusterTopicsPath,
clusterTopicsRelativePath,
} from 'lib/paths';
import { useLocation } from 'react-router-dom';

interface ClusterMenuProps {
name: Cluster['name'];
status: Cluster['status'];
features: Cluster['features'];
singleMode?: boolean;
}

const ClusterMenu: FC<ClusterMenuProps> = ({
name,
status,
features,
singleMode,
}) => {
const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
features?.includes(key);
const [isOpen, setIsOpen] = useState(!!singleMode);
const location = useLocation();

const getIsMenuItemActive = (path: string) =>
location.pathname.includes(path);

return (
<ul role="menu">
<MenuTab
title={name}
status={status}
isOpen={isOpen}
toggleClusterMenu={() => setIsOpen((prev) => !prev)}
/>
{isOpen && (
<S.List>
<MenuItem
isActive={getIsMenuItemActive(clusterBrokerRelativePath)}
to={clusterBrokersPath(name)}
title="Brokers"
/>
<MenuItem
isActive={getIsMenuItemActive(clusterTopicsRelativePath)}
to={clusterTopicsPath(name)}
title="Topics"
/>
<MenuItem
isActive={getIsMenuItemActive(clusterConsumerGroupsRelativePath)}
to={clusterConsumerGroupsPath(name)}
title="Consumers"
/>
{hasFeatureConfigured(ClusterFeaturesEnum.SCHEMA_REGISTRY) && (
<MenuItem
isActive={getIsMenuItemActive(clusterSchemasRelativePath)}
to={clusterSchemasPath(name)}
title="Schema Registry"
/>
)}
{hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_CONNECT) && (
<MenuItem
isActive={getIsMenuItemActive(clusterConnectorsRelativePath)}
to={clusterConnectorsPath(name)}
title="Kafka Connect"
/>
)}
{hasFeatureConfigured(ClusterFeaturesEnum.KSQL_DB) && (
<MenuItem
isActive={getIsMenuItemActive(clusterKsqlDbRelativePath)}
to={clusterKsqlDbPath(name)}
title="KSQL DB"
/>
)}
{(hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_EDIT)) && (
<MenuItem
isActive={getIsMenuItemActive(clusterAclRelativePath)}
to={clusterACLPath(name)}
title="ACL"
/>
)}
</S.List>
)}
</ul>
);
};

export default ClusterMenu;
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
import ClusterMenu from 'components/Nav/ClusterMenu';
import ClusterMenu from 'components/Nav/ClusterMenu/ClusterMenu';
import userEvent from '@testing-library/user-event';
import { clusterConnectorsPath } from 'lib/paths';
import { render } from 'lib/testHelpers';
import { onlineClusterPayload } from 'lib/fixtures/clusters';

describe('ClusterMenu', () => {
const setupComponent = (cluster: Cluster, singleMode?: boolean) => (
<ClusterMenu cluster={cluster} singleMode={singleMode} />
<ClusterMenu
name={cluster.name}
status={cluster.status}
features={cluster.features}
singleMode={singleMode}
/>
);
const getMenuItems = () => screen.getAllByRole('menuitem');
const getMenuItem = () => screen.getByRole('menuitem');
Expand Down
30 changes: 0 additions & 30 deletions frontend/src/components/Nav/ClusterMenuItem.tsx

This file was deleted.

Loading

0 comments on commit fcb007c

Please sign in to comment.