From 6d380bf8a80774300367245092022cfb34512659 Mon Sep 17 00:00:00 2001 From: michalcesek Date: Thu, 27 Apr 2023 17:23:48 +0700 Subject: [PATCH] Allow to edit active smart filter --- .../Topic/Messages/Filters/EditFilter.tsx | 2 +- .../Topic/Messages/Filters/FilterModal.tsx | 52 +++++++------ .../Topic/Messages/Filters/Filters.styled.ts | 75 +++++++++++++++---- .../Topics/Topic/Messages/Filters/Filters.tsx | 61 ++++++++++----- kafka-ui-react-app/src/theme/theme.ts | 38 ++++++++-- 5 files changed, 167 insertions(+), 61 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx index e566870900..04f9c47ee9 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx @@ -22,7 +22,7 @@ const EditFilter: React.FC = ({ }; return ( <> - Edit saved filter + Edit filter toggleEditModal()} submitBtnText="Save" diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx index 88e5adbcae..2765f30765 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx @@ -1,17 +1,18 @@ 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'; 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?: MessageFilters; + activeFilter?: ActiveMessageFilter; + quickEditMode?: boolean } export interface FilterEdit { @@ -27,45 +28,48 @@ const FilterModal: React.FC = ({ activeFilterHandler, editSavedFilter, activeFilter, -}) => { - const [addFilterModal, setAddFilterModal] = React.useState(true); + quickEditMode = false, + }) => { + const [isInEditMode, setIsInEditMode] = React.useState(quickEditMode); const [isSavedFiltersOpen, setIsSavedFiltersOpen] = React.useState(false); const toggleEditModal = () => { - setAddFilterModal(!addFilterModal); + setIsInEditMode(!isInEditMode); }; - const [editFilter, setEditFilter] = React.useState({ - index: -1, - filter: { name: '', code: '' }, + const [editFilter, setEditFilter] = React.useState( () => { + 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 ( - {addFilterModal ? ( + {isInEditMode ? ( + + ) : ( setIsSavedFiltersOpen(!isSavedFiltersOpen)} activeFilter={activeFilter} /> - ) : ( - )} ); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts index bef6f59ff9..051bfd3921 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts +++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts @@ -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,28 +282,73 @@ 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}; + +export const EditSmartFilterIcon = styled.div( + ({ theme: { icons } }) => css` + color: ${({ theme }) => theme.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( + ({ theme: { icons } }) => css` + 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; - padding-left: 6px; - height: 24px; + justify-content: center; + height: 32px; + width: 32px; cursor: pointer; - margin-left: 4px; -`; + border-left: 1px solid ${icons.closeIcon.border}; + + &:hover { + ${closeIcon} { + fill: ${icons.closeIcon.hover}; + } + } + + &:active { + ${closeIcon} { + fill: ${icons.closeIcon.active}; + } + } +`); export const MessageLoading = styled.div.attrs({ role: 'contentLoader', diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx index b3f355f569..6fbfce978f 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx @@ -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 = ({ const { value: isOpen, toggle } = useBoolean(); + const { value: isQuickEditOpen, toggle: toggleQuickEdit } = useBoolean(); + const source = React.useRef(null); const [selectedPartitions, setSelectedPartitions] = React.useState( @@ -307,27 +310,37 @@ const Filters: React.FC = ({ 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,27 @@ const Filters: React.FC = ({ {activeFilter.name && ( - {activeFilter.name} - + + {activeFilter.name} + + + + + - + )} + {isQuickEditOpen && + + } + {isOpen && (