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

Fix lint errors and warnings

Browse source
This commit is contained in:
michalcesek 2023-04-28 10:48:33 +07:00
parent e87e45d03b
commit f310a0c360
6 changed files with 86 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,21 @@
import React from 'react';
import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
import { ActiveMessageFilter, 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';
export interface FilterModalProps {
toggleIsOpen(): void;
filters?: MessageFilters[];
addFilter?(values: MessageFilters): void;
deleteFilter?(index: number): void;
activeFilterHandler?(activeFilter: MessageFilters, index: number): void;
filters: MessageFilters[];
addFilter(values: MessageFilters): void;
deleteFilter(index: number): void;
activeFilterHandler(activeFilter: MessageFilters, index: number): void;
editSavedFilter(filter: FilterEdit): void;
activeFilter?: ActiveMessageFilter;
quickEditMode?: boolean
activeFilter: ActiveMessageFilter;
quickEditMode?: boolean;
}
export interface FilterEdit {
@ -29,8 +32,9 @@ const FilterModal: React.FC<FilterModalProps> = ({
editSavedFilter,
activeFilter,
quickEditMode = false,
}) => {
const [isInEditMode, setIsInEditMode] = React.useState<boolean>(quickEditMode);
}) => {
const [isInEditMode, setIsInEditMode] =
React.useState<boolean>(quickEditMode);
const [isSavedFiltersOpen, setIsSavedFiltersOpen] =
React.useState<boolean>(false);
@ -38,9 +42,11 @@ const FilterModal: React.FC<FilterModalProps> = ({
setIsInEditMode(!isInEditMode);
};
const [editFilter, setEditFilter] = React.useState<FilterEdit>( () => {
const {index, name, code} = activeFilter!;
return quickEditMode ? { index, filter: { name, code } } : { 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);
@ -52,18 +58,18 @@ const FilterModal: React.FC<FilterModalProps> = ({
return (
<S.MessageFilterModal data-testid="messageFilterModal">
{isInEditMode ? (
<EditFilter
editFilter={editFilter}
toggleEditModal={toggleEditModalHandler}
editSavedFilter={editSavedFilter}
/>
<EditFilter
editFilter={editFilter}
toggleEditModal={toggleEditModalHandler}
editSavedFilter={editSavedFilter}
/>
) : (
<AddFilter
toggleIsOpen={toggleIsOpen}
filters={filters!}
addFilter={addFilter!}
deleteFilter={deleteFilter!}
activeFilterHandler={activeFilterHandler!}
filters={filters}
addFilter={addFilter}
deleteFilter={deleteFilter}
activeFilterHandler={activeFilterHandler}
toggleEditModal={toggleEditModal}
editFilter={editFilterHandler}
isSavedFiltersOpen={isSavedFiltersOpen}

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

@ -291,13 +291,11 @@ export const ActiveSmartFilter = styled.div`
border-radius: 4px;
font-size: 14px;
line-height: 20px;
`;
export const EditSmartFilterIcon = styled.div(
({ theme: { icons } }) => css`
color: ${({ theme }) => theme.icons.editIcon.normal};
color: ${icons.editIcon.normal};
display: flex;
align-items: center;
justify-content: center;
@ -320,35 +318,35 @@ export const EditSmartFilterIcon = styled.div(
`
);
export const SmartFilterName = styled.div(
({ theme: { icons } }) => css`
padding: 0 8px;
min-width: 32px;
`);
export const SmartFilterName = styled.div`
padding: 0 8px;
min-width: 32px;
`;
export const DeleteSmartFilterIcon = styled.div(
({ theme: { icons } }) => css`
color: ${({ theme }) => theme.icons.closeIcon.normal};
display: flex;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
cursor: pointer;
border-left: 1px solid ${icons.closeIcon.border};
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};
&:hover {
${closeIcon} {
fill: ${icons.closeIcon.hover};
&:hover {
${closeIcon} {
fill: ${icons.closeIcon.hover};
}
}
}
&:active {
${closeIcon} {
fill: ${icons.closeIcon.active};
&:active {
${closeIcon} {
fill: ${icons.closeIcon.active};
}
}
}
`);
`
);
export const MessageLoading = styled.div.attrs({
role: 'contentLoader',

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

@ -311,7 +311,7 @@ const Filters: React.FC<FiltersProps> = ({
setQueryType(MessageFilterType.GROOVY_SCRIPT);
};
const composeMessageFilter = (filter: FilterEdit) : ActiveMessageFilter => ({
const composeMessageFilter = (filter: FilterEdit): ActiveMessageFilter => ({
index: filter.index,
name: filter.filter.name,
code: filter.filter.code,
@ -320,7 +320,7 @@ const Filters: React.FC<FiltersProps> = ({
const storeAsActiveFilter = (filter: FilterEdit) => {
const messageFilter = JSON.stringify(composeMessageFilter(filter));
localStorage.setItem('activeFilter', messageFilter);
}
};
const editSavedFilter = (filter: FilterEdit) => {
const filters = [...savedFilters];
@ -555,9 +555,7 @@ const Filters: React.FC<FiltersProps> = ({
</Button>
{activeFilter.name && (
<S.ActiveSmartFilter data-testid="activeSmartFilter">
<S.SmartFilterName>
{activeFilter.name}
</S.SmartFilterName>
<S.SmartFilterName>{activeFilter.name}</S.SmartFilterName>
<S.EditSmartFilterIcon onClick={toggleQuickEdit}>
<EditIcon />
</S.EditSmartFilterIcon>
@ -567,14 +565,18 @@ const Filters: React.FC<FiltersProps> = ({
</S.ActiveSmartFilter>
)}
</S.ActiveSmartFilterWrapper>
{isQuickEditOpen &&
{isQuickEditOpen && (
<FilterModal
quickEditMode
activeFilter={activeFilter}
toggleIsOpen={toggleQuickEdit}
editSavedFilter={editCurrentFilter}
filters={[]}
addFilter={() => null}
deleteFilter={() => null}
activeFilterHandler={() => null}
/>
}
)}
{isOpen && (
<FilterModal

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

@ -1,21 +1,24 @@
import React from "react";
import styled, { useTheme } from "styled-components";
import React from 'react';
import styled, { useTheme } from 'styled-components';
const CloseIcon: React.FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg width="9"
height="9"
viewBox="0 0 9 9"
className={className}
fill={theme.icons.closeIcon.normal}
xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd"
clipRule="evenodd"
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
width="9"
height="9"
viewBox="0 0 9 9"
className={className}
fill={theme.icons.closeIcon.normal}
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
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 styled(CloseIcon)``;

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

@ -4,12 +4,14 @@ import styled, { useTheme } from 'styled-components';
const EditIcon: React.FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg width="13"
height="14"
viewBox="0 0 13 14"
className={className}
fill={theme.icons.editIcon.normal}
xmlns="http://www.w3.org/2000/svg">
<svg
width="13"
height="14"
viewBox="0 0 13 14"
className={className}
fill={theme.icons.editIcon.normal}
xmlns="http://www.w3.org/2000/svg"
>
<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>

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

@ -165,13 +165,13 @@ const baseTheme = {
normal: Colors.neutral[30],
hover: Colors.neutral[90],
active: Colors.neutral[100],
border: Colors.neutral[10]
border: Colors.neutral[10],
},
closeIcon: {
normal: Colors.neutral[30],
hover: Colors.neutral[90],
active: Colors.neutral[100],
border: Colors.neutral[10]
border: Colors.neutral[10],
},
cancelIcon: Colors.neutral[30],
autoIcon: Colors.neutral[95],
@ -1123,13 +1123,13 @@ export const darkTheme: ThemeType = {
normal: Colors.neutral[50],
hover: Colors.neutral[30],
active: Colors.neutral[40],
border: Colors.neutral[70]
border: Colors.neutral[70],
},
closeIcon: {
normal: Colors.neutral[50],
hover: Colors.neutral[30],
active: Colors.neutral[40],
border: Colors.neutral[70]
border: Colors.neutral[70],
},
cancelIcon: Colors.neutral[0],
autoIcon: Colors.neutral[0],