0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into ISSUE-3792_sr_serde_contexts_fixes

Browse source
This commit is contained in:
Ilya Kuramshin 2023-05-24 19:23:05 +04:00 • committed by GitHub
commit 39bd558f97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 329 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/TopicDetails.java
View file

@ -37,11 +37,13 @@ public class TopicDetails extends BasePage {
protected SelenideElement addFiltersBtn = $x("//button[text()='Add Filters']");
protected SelenideElement savedFiltersLink = $x("//div[text()='Saved Filters']");
protected SelenideElement addFilterCodeModalTitle = $x("//label[text()='Filter code']");
protected SelenideElement addFilterCodeInput = $x("//div[@id='ace-editor']//textarea");
protected SelenideElement addFilterCodeEditor = $x("//div[@id='ace-editor']");
protected SelenideElement addFilterCodeTextarea = $x("//div[@id='ace-editor']//textarea");
protected SelenideElement saveThisFilterCheckBoxAddFilterMdl = $x("//input[@name='saveFilter']");
protected SelenideElement displayNameInputAddFilterMdl = $x("//input[@placeholder='Enter Name']");
protected SelenideElement cancelBtnAddFilterMdl = $x("//button[text()='Cancel']");
protected SelenideElement addFilterBtnAddFilterMdl = $x("//button[text()='Add filter']");
protected SelenideElement saveFilterBtnEditFilterMdl = $x("//button[text()='Save']");
protected SelenideElement addFiltersBtnMessages = $x("//button[text()='Add Filters']");
protected SelenideElement selectFilterBtnAddFilterMdl = $x("//button[text()='Select filter']");
protected SelenideElement editSettingsMenu = $x("//li[@role][contains(text(),'Edit settings')]");
@ -62,7 +64,8 @@ public class TopicDetails extends BasePage {
protected String savedFilterNameLocator = "//div[@role='savedFilter']/div[contains(text(),'%s')]";
protected String consumerIdLocator = "//a[@title='%s']";
protected String topicHeaderLocator = "//h1[contains(text(),'%s')]";
protected String activeFilterNameLocator = "//div[@data-testid='activeSmartFilter'][contains(text(),'%s')]";
protected String activeFilterNameLocator = "//div[@data-testid='activeSmartFilter']/div[1][contains(text(),'%s')]";
protected String editActiveFilterBtnLocator = "//div[text()='%s']/../div[@data-testid='editActiveSmartFilterBtn']";
protected String settingsGridValueLocator = "//tbody/tr/td/span[text()='%s']//ancestor::tr/td[2]/span";
@Step
@ -184,6 +187,13 @@ public class TopicDetails extends BasePage {
return this;
}
@Step
public TopicDetails clickEditActiveFilterBtn(String filterName) {
$x(String.format(editActiveFilterBtnLocator, filterName))
.shouldBe(Condition.enabled).click();
return this;
}
@Step
public TopicDetails clickNextButton() {
clickNextBtn();
@ -223,11 +233,27 @@ public class TopicDetails extends BasePage {
}
@Step
public TopicDetails setFilterCodeFieldAddFilterMdl(String filterCode) {
addFilterCodeInput.shouldBe(Condition.enabled).sendKeys(filterCode);
public TopicDetails setFilterCodeFldAddFilterMdl(String filterCode) {
addFilterCodeTextarea.shouldBe(Condition.enabled).setValue(filterCode);
return this;
}
@Step
public String getFilterCodeValue() {
addFilterCodeEditor.shouldBe(Condition.enabled).click();
String value = addFilterCodeTextarea.getValue();
if (value == null) {
return null;
} else {
return value.substring(0, value.length() - 2);
}
}
@Step
public String getFilterNameValue() {
return displayNameInputAddFilterMdl.shouldBe(Condition.enabled).getValue();
}
@Step
public TopicDetails selectSaveThisFilterCheckboxMdl(boolean select) {
selectElement(saveThisFilterCheckBoxAddFilterMdl, select);
@ -241,7 +267,7 @@ public class TopicDetails extends BasePage {
@Step
public TopicDetails setDisplayNameFldAddFilterMdl(String displayName) {
displayNameInputAddFilterMdl.shouldBe(Condition.enabled).sendKeys(displayName);
displayNameInputAddFilterMdl.shouldBe(Condition.enabled).setValue(displayName);
return this;
}
@ -256,6 +282,17 @@ public class TopicDetails extends BasePage {
return this;
}
@Step
public TopicDetails clickSaveFilterBtnAndCloseMdl(boolean closeModal) {
saveFilterBtnEditFilterMdl.shouldBe(Condition.enabled).click();
if (closeModal) {
addFilterCodeModalTitle.shouldBe(Condition.hidden);
} else {
addFilterCodeModalTitle.shouldBe(Condition.visible);
}
return this;
}
@Step
public boolean isAddFilterBtnAddFilterMdlEnabled() {
return isEnabled(addFilterBtnAddFilterMdl);
@ -272,8 +309,13 @@ public class TopicDetails extends BasePage {
}
@Step
public boolean isActiveFilterVisible(String activeFilterName) {
return isVisible($x(String.format(activeFilterNameLocator, activeFilterName)));
public boolean isActiveFilterVisible(String filterName) {
return isVisible($x(String.format(activeFilterNameLocator, filterName)));
}
@Step
public String getSearchFieldValue() {
return searchFld.shouldBe(Condition.visible).getValue();
}
public List<SelenideElement> getAllAddFilterModalVisibleElements() {

50
kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/TopicsTest.java
View file

@ -313,14 +313,44 @@ public class TopicsTest extends BaseTest {
verifyElementsCondition(topicDetails.getAllAddFilterModalDisabledElements(), Condition.disabled);
Assert.assertFalse(topicDetails.isSaveThisFilterCheckBoxSelected(), "isSaveThisFilterCheckBoxSelected()");
topicDetails
.setFilterCodeFieldAddFilterMdl(filterName);
.setFilterCodeFldAddFilterMdl(filterName);
Assert.assertTrue(topicDetails.isAddFilterBtnAddFilterMdlEnabled(), "isAddFilterBtnAddFilterMdlEnabled()");
topicDetails.clickAddFilterBtnAndCloseMdl(true);
Assert.assertTrue(topicDetails.isActiveFilterVisible(filterName), "isActiveFilterVisible()");
}
@QaseId(13)
@QaseId(352)
@Test(priority = 13)
public void editActiveSmartFilterCheck() {
String filterName = randomAlphabetic(5);
String filterCode = randomAlphabetic(5);
navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
topicDetails
.openDetailsTab(MESSAGES)
.clickMessagesAddFiltersBtn()
.waitUntilAddFiltersMdlVisible()
.setFilterCodeFldAddFilterMdl(filterCode)
.setDisplayNameFldAddFilterMdl(filterName)
.clickAddFilterBtnAndCloseMdl(true)
.clickEditActiveFilterBtn(filterName)
.waitUntilAddFiltersMdlVisible();
SoftAssert softly = new SoftAssert();
softly.assertEquals(topicDetails.getFilterCodeValue(), filterCode, "getFilterCodeValue()");
softly.assertEquals(topicDetails.getFilterNameValue(), filterName, "getFilterNameValue()");
softly.assertAll();
String newFilterName = randomAlphabetic(5);
String newFilterCode = randomAlphabetic(5);
topicDetails
.setFilterCodeFldAddFilterMdl(newFilterCode)
.setDisplayNameFldAddFilterMdl(newFilterName)
.clickSaveFilterBtnAndCloseMdl(true);
softly.assertTrue(topicDetails.isActiveFilterVisible(newFilterName), "isActiveFilterVisible()");
softly.assertEquals(topicDetails.getSearchFieldValue(), newFilterCode, "getSearchFieldValue()");
softly.assertAll();
}
@QaseId(13)
@Test(priority = 14)
public void checkFilterSavingWithinSavedFilters() {
String displayName = randomAlphabetic(5);
navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
@ -328,7 +358,7 @@ public class TopicsTest extends BaseTest {
.openDetailsTab(MESSAGES)
.clickMessagesAddFiltersBtn()
.waitUntilAddFiltersMdlVisible()
.setFilterCodeFieldAddFilterMdl(randomAlphabetic(4))
.setFilterCodeFldAddFilterMdl(randomAlphabetic(4))
.selectSaveThisFilterCheckboxMdl(true)
.setDisplayNameFldAddFilterMdl(displayName);
Assert.assertTrue(topicDetails.isAddFilterBtnAddFilterMdlEnabled(),
@ -341,7 +371,7 @@ public class TopicsTest extends BaseTest {
}
@QaseId(14)
@Test(priority = 14)
@Test(priority = 15)
public void checkApplyingSavedFilterWithinTopicMessages() {
String displayName = randomAlphabetic(5);
navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
@ -349,7 +379,7 @@ public class TopicsTest extends BaseTest {
.openDetailsTab(MESSAGES)
.clickMessagesAddFiltersBtn()
.waitUntilAddFiltersMdlVisible()
.setFilterCodeFieldAddFilterMdl(randomAlphabetic(4))
.setFilterCodeFldAddFilterMdl(randomAlphabetic(4))
.selectSaveThisFilterCheckboxMdl(true)
.setDisplayNameFldAddFilterMdl(displayName)
.clickAddFilterBtnAndCloseMdl(false)
@ -360,7 +390,7 @@ public class TopicsTest extends BaseTest {
}
@QaseId(11)
@Test(priority = 15)
@Test(priority = 16)
public void checkShowInternalTopicsButton() {
navigateToTopics();
topicsList
@ -378,7 +408,7 @@ public class TopicsTest extends BaseTest {
}
@QaseId(334)
@Test(priority = 16)
@Test(priority = 17)
public void checkInternalTopicsNaming() {
navigateToTopics();
SoftAssert softly = new SoftAssert();
@ -391,7 +421,7 @@ public class TopicsTest extends BaseTest {
}
@QaseId(56)
@Test(priority = 17)
@Test(priority = 18)
public void checkRetentionBytesAccordingToMaxSizeOnDisk() {
navigateToTopics();
topicsList
@ -439,7 +469,7 @@ public class TopicsTest extends BaseTest {
}
@QaseId(247)
@Test(priority = 18)
@Test(priority = 19)
public void recreateTopicFromTopicProfile() {
Topic topicToRecreate = new Topic()
.setName("topic-to-recreate-" + randomAlphabetic(5))
@ -467,7 +497,7 @@ public class TopicsTest extends BaseTest {
}
@QaseId(8)
@Test(priority = 19)
@Test(priority = 20)
public void checkCopyTopicPossibility() {
Topic topicToCopy = new Topic()
.setName("topic-to-copy-" + randomAlphabetic(5))

4
kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx
View file

@ -9,7 +9,7 @@ import {
} from 'react-hook-form';
import { Button } from 'components/common/Button/Button';
import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
import CloseIcon from 'components/common/Icons/CloseIcon';
import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
import { yupResolver } from '@hookform/resolvers/yup';
import yup from 'lib/yupExtended';
import PlusIcon from 'components/common/Icons/PlusIcon';
@ -174,7 +174,7 @@ const QueryForm: React.FC<QueryFormProps> = ({
aria-label="deleteProperty"
onClick={removeProperty(index)}
>
<CloseIcon aria-hidden />
<CloseCircleIcon aria-hidden />
</IconButtonWrapper>
</S.InputsContainer>
))}

2
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx
View file

@ -22,7 +22,7 @@ const EditFilter: React.FC<EditFilterProps> = ({
};
return (
<>
<S.FilterTitle>Edit saved filter</S.FilterTitle>
<S.FilterTitle>Edit filter</S.FilterTitle>
<AddEditFilterContainer
cancelBtnHandler={() => toggleEditModal()}
submitBtnText="Save"

40
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx
View file

@ -1,6 +1,9 @@
import React from 'react';
import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
import {
ActiveMessageFilter,
MessageFilters,
} from 'components/Topics/Topic/Messages/Filters/Filters';
import AddFilter from 'components/Topics/Topic/Messages/Filters/AddFilter';
import EditFilter from 'components/Topics/Topic/Messages/Filters/EditFilter';
@ -11,7 +14,8 @@ export interface FilterModalProps {
deleteFilter(index: number): void;
activeFilterHandler(activeFilter: MessageFilters, index: number): void;
editSavedFilter(filter: FilterEdit): void;
activeFilter?: MessageFilters;
activeFilter: ActiveMessageFilter;
quickEditMode?: boolean;
}
export interface FilterEdit {
@ -27,27 +31,39 @@ const FilterModal: React.FC<FilterModalProps> = ({
activeFilterHandler,
editSavedFilter,
activeFilter,
quickEditMode = false,
}) => {
const [addFilterModal, setAddFilterModal] = React.useState<boolean>(true);
const [isInEditMode, setIsInEditMode] =
React.useState<boolean>(quickEditMode);
const [isSavedFiltersOpen, setIsSavedFiltersOpen] =
React.useState<boolean>(false);
const toggleEditModal = () => {
setAddFilterModal(!addFilterModal);
setIsInEditMode(!isInEditMode);
};
const [editFilter, setEditFilter] = React.useState<FilterEdit>({
index: -1,
filter: { name: '', code: '' },
const [editFilter, setEditFilter] = React.useState<FilterEdit>(() => {
const { index, name, code } = activeFilter;
return quickEditMode
? { index, filter: { name, code } }
: { index: -1, filter: { name: '', code: '' } };
});
const editFilterHandler = (value: FilterEdit) => {
setEditFilter(value);
setAddFilterModal(!addFilterModal);
setIsInEditMode(!isInEditMode);
};
const toggleEditModalHandler = quickEditMode ? toggleIsOpen : toggleEditModal;
return (
<S.MessageFilterModal data-testid="messageFilterModal">
{addFilterModal ? (
{isInEditMode ? (
<EditFilter
editFilter={editFilter}
toggleEditModal={toggleEditModalHandler}
editSavedFilter={editSavedFilter}
/>
) : (
<AddFilter
toggleIsOpen={toggleIsOpen}
filters={filters}
@ -60,12 +76,6 @@ const FilterModal: React.FC<FilterModalProps> = ({
onClickSavedFilters={() => setIsSavedFiltersOpen(!isSavedFiltersOpen)}
activeFilter={activeFilter}
/>
) : (
<EditFilter
editFilter={editFilter}
toggleEditModal={toggleEditModal}
editSavedFilter={editSavedFilter}
/>
)}
</S.MessageFilterModal>
);

82
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
View file

@ -2,6 +2,8 @@ import Input from 'components/common/Input/Input';
import Select from 'components/common/Select/Select';
import styled, { css } from 'styled-components';
import DatePicker from 'react-datepicker';
import EditIcon from 'components/common/Icons/EditIcon';
import closeIcon from 'components/common/Icons/CloseIcon';
interface SavedFilterProps {
selected: boolean;
@ -280,29 +282,77 @@ export const SavedFilter = styled.div.attrs({
`;
export const ActiveSmartFilter = styled.div`
border-radius: 4px;
min-width: 115px;
height: 24px;
background: ${({ theme }) => theme.savedFilter.backgroundColor};
font-size: 14px;
line-height: 20px;
display: flex;
align-items: center;
justify-content: space-between;
color: ${({ theme }) => theme.savedFilter.color};
padding: 16px 8px;
height: 32px;
color: ${({ theme }) => theme.activeFilter.color};
background: ${({ theme }) => theme.activeFilter.backgroundColor};
border-radius: 4px;
font-size: 14px;
line-height: 20px;
`;
export const DeleteSavedFilterIcon = styled.div`
color: ${({ theme }) => theme.icons.closeIcon};
display: flex;
align-items: center;
padding-left: 6px;
height: 24px;
cursor: pointer;
margin-left: 4px;
export const EditSmartFilterIcon = styled.div(
({ theme: { icons } }) => css`
color: ${icons.editIcon.normal};
display: flex;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
cursor: pointer;
border-left: 1px solid ${icons.editIcon.border};
&:hover {
${EditIcon} {
fill: ${icons.editIcon.hover};
}
}
&:active {
${EditIcon} {
fill: ${icons.editIcon.active};
}
}
`
);
export const SmartFilterName = styled.div`
padding: 0 8px;
min-width: 32px;
`;
export const DeleteSmartFilterIcon = styled.div(
({ theme: { icons } }) => css`
color: ${icons.closeIcon.normal};
display: flex;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
cursor: pointer;
border-left: 1px solid ${icons.closeIcon.border};
svg {
height: 14px;
width: 14px;
}
&:hover {
${closeIcon} {
fill: ${icons.closeIcon.hover};
}
}
&:active {
${closeIcon} {
fill: ${icons.closeIcon.active};
}
}
`
);
export const MessageLoading = styled.div.attrs({
role: 'contentLoader',
})<MessageLoadingProps>`

66
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
View file

@ -30,6 +30,7 @@ import useBoolean from 'lib/hooks/useBoolean';
import { RouteParamsClusterTopic } from 'lib/paths';
import useAppParams from 'lib/hooks/useAppParams';
import PlusIcon from 'components/common/Icons/PlusIcon';
import EditIcon from 'components/common/Icons/EditIcon';
import CloseIcon from 'components/common/Icons/CloseIcon';
import ClockIcon from 'components/common/Icons/ClockIcon';
import ArrowDownIcon from 'components/common/Icons/ArrowDownIcon';
@ -67,7 +68,7 @@ export interface MessageFilters {
code: string;
}
interface ActiveMessageFilter {
export interface ActiveMessageFilter {
index: number;
name: string;
code: string;
@ -108,6 +109,8 @@ const Filters: React.FC<FiltersProps> = ({
const { value: isOpen, toggle } = useBoolean();
const { value: isQuickEditOpen, toggle: toggleQuickEdit } = useBoolean();
const source = React.useRef<EventSource | null>(null);
const [selectedPartitions, setSelectedPartitions] = React.useState<Option[]>(
@ -307,27 +310,37 @@ const Filters: React.FC<FiltersProps> = ({
setActiveFilter({ index, ...newActiveFilter });
setQueryType(MessageFilterType.GROOVY_SCRIPT);
};
const composeMessageFilter = (filter: FilterEdit): ActiveMessageFilter => ({
index: filter.index,
name: filter.filter.name,
code: filter.filter.code,
});
const storeAsActiveFilter = (filter: FilterEdit) => {
const messageFilter = JSON.stringify(composeMessageFilter(filter));
localStorage.setItem('activeFilter', messageFilter);
};
const editSavedFilter = (filter: FilterEdit) => {
const filters = [...savedFilters];
filters[filter.index] = filter.filter;
if (activeFilter.name && activeFilter.index === filter.index) {
setActiveFilter({
index: filter.index,
name: filter.filter.name,
code: filter.filter.code,
});
localStorage.setItem(
'activeFilter',
JSON.stringify({
index: filter.index,
name: filter.filter.name,
code: filter.filter.code,
})
);
setActiveFilter(composeMessageFilter(filter));
storeAsActiveFilter(filter);
}
localStorage.setItem('savedFilters', JSON.stringify(filters));
setSavedFilters(filters);
};
const editCurrentFilter = (filter: FilterEdit) => {
if (filter.index < 0) {
setActiveFilter(composeMessageFilter(filter));
storeAsActiveFilter(filter);
} else {
editSavedFilter(filter);
}
};
// eslint-disable-next-line consistent-return
React.useEffect(() => {
if (location.search?.length !== 0) {
@ -542,13 +555,32 @@ const Filters: React.FC<FiltersProps> = ({
</Button>
{activeFilter.name && (
<S.ActiveSmartFilter data-testid="activeSmartFilter">
{activeFilter.name}
<S.DeleteSavedFilterIcon onClick={deleteActiveFilter}>
<S.SmartFilterName>{activeFilter.name}</S.SmartFilterName>
<S.EditSmartFilterIcon
data-testid="editActiveSmartFilterBtn"
onClick={toggleQuickEdit}
>
<EditIcon />
</S.EditSmartFilterIcon>
<S.DeleteSmartFilterIcon onClick={deleteActiveFilter}>
<CloseIcon />
</S.DeleteSavedFilterIcon>
</S.DeleteSmartFilterIcon>
</S.ActiveSmartFilter>
)}
</S.ActiveSmartFilterWrapper>
{isQuickEditOpen && (
<FilterModal
quickEditMode
activeFilter={activeFilter}
toggleIsOpen={toggleQuickEdit}
editSavedFilter={editCurrentFilter}
filters={[]}
addFilter={() => null}
deleteFilter={() => null}
activeFilterHandler={() => null}
/>
)}
{isOpen && (
<FilterModal
toggleIsOpen={toggle}

2
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx
View file

@ -27,7 +27,7 @@ describe('EditFilter component', () => {
await act(() => {
renderComponent();
});
expect(screen.getByText(/edit saved filter/i)).toBeInTheDocument();
expect(screen.getByText(/edit filter/i)).toBeInTheDocument();
});
it('closes editFilter modal', async () => {

12
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx
View file

@ -3,11 +3,16 @@ import FilterModal, {
FilterModalProps,
} from 'components/Topics/Topic/Messages/Filters/FilterModal';
import { render } from 'lib/testHelpers';
import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
import {
ActiveMessageFilter,
MessageFilters,
} from 'components/Topics/Topic/Messages/Filters/Filters';
import { screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
const filters: MessageFilters[] = [{ name: 'name', code: 'code' }];
const filter = { name: 'name', code: 'code' };
const filters: MessageFilters[] = [filter];
const activeFilter: ActiveMessageFilter = { index: -1, ...filter };
const renderComponent = (props?: Partial<FilterModalProps>) =>
render(
@ -18,6 +23,7 @@ const renderComponent = (props?: Partial<FilterModalProps>) =>
deleteFilter={jest.fn()}
activeFilterHandler={jest.fn()}
editSavedFilter={jest.fn()}
activeFilter={activeFilter}
{...props}
/>
);
@ -36,7 +42,7 @@ describe('FilterModal component', () => {
await userEvent.click(screen.getByRole('savedFilterText'));
await userEvent.click(screen.getByText('Edit'));
expect(
screen.getByRole('heading', { name: /edit saved filter/i, level: 3 })
screen.getByRole('heading', { name: /edit filter/i, level: 3 })
).toBeInTheDocument();
});
});

4
kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
View file

@ -8,7 +8,7 @@ import { FormError } from 'components/common/Input/Input.styled';
import Select from 'components/common/Select/Select';
import Input from 'components/common/Input/Input';
import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
import CloseIcon from 'components/common/Icons/CloseIcon';
import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
import * as C from 'components/Topics/shared/Form/TopicForm.styled';
import { ConfigSource } from 'generated-sources';
@ -125,7 +125,7 @@ const CustomParamField: React.FC<Props> = ({
}
title={`Delete customParam field ${index}`}
>
<CloseIcon aria-hidden />
<CloseCircleIcon aria-hidden />
</IconButtonWrapper>
</S.DeleteButtonWrapper>
</C.Column>

4
kafka-ui-react-app/src/components/common/Alert/Alert.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import CloseIcon from 'components/common/Icons/CloseIcon';
import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
import { ToastTypes } from 'lib/errorHandling';
@ -19,7 +19,7 @@ const Alert: React.FC<AlertProps> = ({ title, type, message, onDissmiss }) => (
<S.Message role="contentinfo">{message}</S.Message>
</div>
<IconButtonWrapper role="button" onClick={onDissmiss}>
<CloseIcon />
<CloseCircleIcon />
</IconButtonWrapper>
</S.Alert>
);

24
kafka-ui-react-app/src/components/common/Icons/CloseCircleIcon.tsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import { useTheme } from 'styled-components';
const CloseCircleIcon: React.FC = () => {
const theme = useTheme();
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.707 4.29289C12.0976 4.68342 12.0976 5.31658 11.707 5.70711L9.41415 8L11.707 10.2929C12.0976 10.6834 12.0976 11.3166 11.707 11.7071C11.3165 12.0976 10.6834 12.0976 10.2928 11.7071L7.99994 9.41421L5.70711 11.707C5.31658 12.0976 4.68342 12.0976 4.29289 11.707C3.90237 11.3165 3.90237 10.6834 4.29289 10.2928L6.58573 8L4.29289 5.70717C3.90237 5.31664 3.90237 4.68348 4.29289 4.29295C4.68342 3.90243 5.31658 3.90243 5.70711 4.29295L7.99994 6.58579L10.2928 4.29289C10.6834 3.90237 11.3165 3.90237 11.707 4.29289Z"
fill={theme.icons.closeCircleIcon}
/>
</svg>
);
};
export default CloseCircleIcon;

18
kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx
View file

@ -1,24 +1,24 @@
import React from 'react';
import { useTheme } from 'styled-components';
import styled, { useTheme } from 'styled-components';
const CloseIcon: React.FC = () => {
const CloseIcon: React.FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
width="10"
height="10"
viewBox="0 0 10 10"
className={className}
fill={theme.icons.closeIcon.normal}
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.707 4.29289C12.0976 4.68342 12.0976 5.31658 11.707 5.70711L9.41415 8L11.707 10.2929C12.0976 10.6834 12.0976 11.3166 11.707 11.7071C11.3165 12.0976 10.6834 12.0976 10.2928 11.7071L7.99994 9.41421L5.70711 11.707C5.31658 12.0976 4.68342 12.0976 4.29289 11.707C3.90237 11.3165 3.90237 10.6834 4.29289 10.2928L6.58573 8L4.29289 5.70717C3.90237 5.31664 3.90237 4.68348 4.29289 4.29295C4.68342 3.90243 5.31658 3.90243 5.70711 4.29295L7.99994 6.58579L10.2928 4.29289C10.6834 3.90237 11.3165 3.90237 11.707 4.29289Z"
fill={theme.icons.closeIcon}
d="M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5 4.29289L8.64645 0.646447C8.84171 0.451184 9.15829 0.451184 9.35355 0.646447C9.54882 0.841709 9.54882 1.15829 9.35355 1.35355L5.70711 5L9.35355 8.64645C9.54882 8.84171 9.54882 9.15829 9.35355 9.35355C9.15829 9.54882 8.84171 9.54882 8.64645 9.35355L5 5.70711L1.35355 9.35355C1.15829 9.54881 0.841709 9.54881 0.646447 9.35355C0.451185 9.15829 0.451185 8.84171 0.646447 8.64645L4.29289 5L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z"
/>
</svg>
);
};
export default CloseIcon;
export default styled(CloseIcon)``;

41
kafka-ui-react-app/src/components/common/Icons/EditIcon.tsx
View file

@ -1,42 +1,23 @@
import React, { FC } from 'react';
import { useTheme } from 'styled-components';
import React from 'react';
import styled, { useTheme } from 'styled-components';
const EditIcon: FC = () => {
const EditIcon: React.FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
viewBox="0 0 64 64"
width="12"
height="12"
width="13"
height="14"
viewBox="0 0 13 14"
className={className}
fill={theme.icons.editIcon.normal}
xmlns="http://www.w3.org/2000/svg"
aria-labelledby="title"
aria-describedby="desc"
role="img"
>
<title>Edit</title>
<desc>A line styled icon from Orion Icon Library.</desc>
<path
d="M54.368 17.674l6.275-6.267-8.026-8.025-6.274 6.267"
strokeWidth="2"
strokeMiterlimit="10"
stroke={theme.icons.editIcon}
fill="none"
data-name="layer2"
strokeLinejoin="round"
strokeLinecap="round"
/>
<path
d="M17.766 54.236l36.602-36.562-8.025-8.025L9.74 46.211 3.357 60.618l14.409-6.382zM9.74 46.211l8.026 8.025"
strokeWidth="2"
strokeMiterlimit="10"
stroke={theme.icons.editIcon}
fill="none"
data-name="layer1"
strokeLinejoin="round"
strokeLinecap="round"
/>
<path d="M9.53697 1.15916C10.0914 0.60473 10.9886 0.602975 11.5408 1.15524L12.5408 2.15518C13.093 2.70745 13.0913 3.60461 12.5368 4.15904L10.3564 6.33944L7.35657 3.33956L9.53697 1.15916Z" />
<path d="M6.64946 4.04667L9.53674e-07 10.6961L0 13.696L2.99988 13.696L9.64934 7.04655L6.64946 4.04667Z" />
</svg>
);
};
export default EditIcon;
export default styled(EditIcon)``;

4
kafka-ui-react-app/src/components/common/Search/Search.tsx
View file

@ -2,7 +2,7 @@ import React, { useRef } from 'react';
import { useDebouncedCallback } from 'use-debounce';
import Input from 'components/common/Input/Input';
import { useSearchParams } from 'react-router-dom';
import CloseIcon from 'components/common/Icons/CloseIcon';
import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
import styled from 'styled-components';
interface SearchProps {
@ -66,7 +66,7 @@ const Search: React.FC<SearchProps> = ({
search
clearIcon={
<IconButtonWrapper onClick={clearSearchValue}>
<CloseIcon />
<CloseCircleIcon />
</IconButtonWrapper>
}
/>

38
kafka-ui-react-app/src/theme/theme.ts
View file

@ -162,7 +162,18 @@ const baseTheme = {
},
icons: {
chevronDownIcon: Colors.neutral[0],
editIcon: Colors.neutral[30],
editIcon: {
normal: Colors.neutral[30],
hover: Colors.neutral[90],
active: Colors.neutral[100],
border: Colors.neutral[10],
},
closeIcon: {
normal: Colors.neutral[30],
hover: Colors.neutral[90],
active: Colors.neutral[100],
border: Colors.neutral[10],
},
cancelIcon: Colors.neutral[30],
autoIcon: Colors.neutral[95],
fileIcon: Colors.neutral[90],
@ -171,7 +182,7 @@ const baseTheme = {
moonIcon: Colors.neutral[95],
sunIcon: Colors.neutral[95],
infoIcon: Colors.neutral[30],
closeIcon: Colors.neutral[30],
closeCircleIcon: Colors.neutral[30],
deleteIcon: Colors.red[20],
warningIcon: Colors.yellow[20],
warningRedIcon: {
@ -688,10 +699,13 @@ export const theme = {
color: Colors.neutral[80],
},
},
activeFilter: {
color: Colors.neutral[70],
backgroundColor: Colors.neutral[5],
},
savedFilter: {
filterName: Colors.neutral[90],
color: Colors.neutral[30],
backgroundColor: Colors.neutral[5],
},
editFilter: {
textColor: Colors.brand[50],
@ -1128,10 +1142,13 @@ export const darkTheme: ThemeType = {
color: Colors.neutral[0],
},
},
activeFilter: {
color: Colors.neutral[0],
backgroundColor: Colors.neutral[80],
},
savedFilter: {
filterName: Colors.neutral[0],
color: Colors.neutral[70],
backgroundColor: Colors.neutral[80],
},
editFilter: {
textColor: Colors.brand[30],
@ -1157,7 +1174,18 @@ export const darkTheme: ThemeType = {
},
icons: {
...baseTheme.icons,
editIcon: Colors.neutral[0],
editIcon: {
normal: Colors.neutral[50],
hover: Colors.neutral[30],
active: Colors.neutral[40],
border: Colors.neutral[70],
},
closeIcon: {
normal: Colors.neutral[50],
hover: Colors.neutral[30],
active: Colors.neutral[40],
border: Colors.neutral[70],
},
cancelIcon: Colors.neutral[0],
autoIcon: Colors.neutral[0],
fileIcon: Colors.neutral[0],

4
kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx
View file

@ -3,7 +3,7 @@ import Input from 'components/common/Input/Input';
import { useFieldArray, useFormContext } from 'react-hook-form';
import { FormError, InputHint } from 'components/common/Input/Input.styled';
import { ErrorMessage } from '@hookform/error-message';
import CloseIcon from 'components/common/Icons/CloseIcon';
import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
import { Button } from 'components/common/Button/Button';
import PlusIcon from 'components/common/Icons/PlusIcon';
import * as S from 'widgets/ClusterConfigForm/ClusterConfigForm.styled';
@ -80,7 +80,7 @@ const KafkaCluster: React.FC = () => {
aria-label="deleteProperty"
onClick={() => remove(index)}
>
<CloseIcon aria-hidden />
<CloseCircleIcon aria-hidden />
</S.BootstrapServerActions>
</S.BootstrapServer>
))}

4
kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaConnect.tsx
View file

@ -5,7 +5,7 @@ import Input from 'components/common/Input/Input';
import { useFieldArray, useFormContext } from 'react-hook-form';
import PlusIcon from 'components/common/Icons/PlusIcon';
import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
import CloseIcon from 'components/common/Icons/CloseIcon';
import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
import {
FlexGrow1,
FlexRow,
@ -66,7 +66,7 @@ const KafkaConnect = () => {
</FlexGrow1>
<S.RemoveButton onClick={() => remove(index)}>
<IconButtonWrapper aria-label="deleteProperty">
<CloseIcon aria-hidden />
<CloseCircleIcon aria-hidden />
</IconButtonWrapper>
</S.RemoveButton>
</FlexRow>