From 18eadfca287f3a8004aedfa449f63a5d7e57fd27 Mon Sep 17 00:00:00 2001 From: Kirill Morozov Date: Tue, 17 May 2022 15:10:41 +0300 Subject: [PATCH] 1865 implement a tooltip with smart filters documentation (#1952) * Added QuestionIcon * Added Info button functionality and tests * Styled component renamed * Info button testing moved to AddFilter spec * Styled paragraph renamed --- .../Details/Messages/Filters/AddFilter.tsx | 18 +++++- .../Messages/Filters/Filters.styled.ts | 46 ++++++++++++++ .../Details/Messages/Filters/InfoModal.tsx | 60 +++++++++++++++++++ .../Filters/__tests__/AddFilter.spec.tsx | 14 ++++- .../Filters/__tests__/InfoModal.spec.tsx | 14 +++++ .../components/common/Icons/QuestionIcon.tsx | 23 +++++++ 6 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx create mode 100644 kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/InfoModal.spec.tsx create mode 100644 kafka-ui-react-app/src/components/common/Icons/QuestionIcon.tsx diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/AddFilter.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/AddFilter.tsx index 995e3d7666..d877654e59 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/AddFilter.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/AddFilter.tsx @@ -4,8 +4,11 @@ import { MessageFilters } from 'components/Topics/Topic/Details/Messages/Filters import { FilterEdit } from 'components/Topics/Topic/Details/Messages/Filters/FilterModal'; import SavedFilters from 'components/Topics/Topic/Details/Messages/Filters/SavedFilters'; import SavedIcon from 'components/common/Icons/SavedIcon'; +import QuestionIcon from 'components/common/Icons/QuestionIcon'; +import useModal from 'lib/hooks/useModal'; import AddEditFilterContainer from './AddEditFilterContainer'; +import InfoModal from './InfoModal'; export interface FilterModalProps { toggleIsOpen(): void; @@ -32,6 +35,7 @@ const AddFilter: React.FC = ({ }) => { const [savedFilterState, setSavedFilterState] = React.useState(false); + const { isOpen, toggle } = useModal(); const onSubmit = React.useCallback( async (values: AddMessageFilters) => { @@ -52,7 +56,19 @@ const AddFilter: React.FC = ({ ); return ( <> - Add filter + + Add filter +
+ + + + {isOpen && } +
+ {savedFilterState ? ( theme.table.td.color.normal}; +`; + +export const InfoParagraph = styled.p` + font-size: 12px; + font-weight: 400; + line-height: 1.5; + margin-bottom: 10px; + color: ${({ theme }) => theme.table.td.color.normal}; +`; + export const MessageFilterModal = styled.div` height: auto; width: 560px; @@ -115,11 +138,34 @@ export const MessageFilterModal = styled.div` z-index: 1; `; +export const InfoModal = styled.div` + height: auto; + width: 560px; + border-radius: 8px; + background: ${({ theme }) => theme.modal.backgroundColor}; + position: absolute; + left: 25%; + border: 1px solid ${({ theme }) => theme.breadcrumb}; + box-shadow: ${({ theme }) => theme.modal.shadow}; + padding: 32px; + z-index: 1; +`; + +export const QuestionIconContainer = styled.button` + cursor: pointer; + padding: 0; + background: none; + border: none; +`; + export const FilterTitle = styled.h3` line-height: 32px; font-size: 20px; margin-bottom: 40px; position: relative; + display: flex; + align-items: center; + justify-content: space-between; &:after { content: ''; width: calc(100% + 32px); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx new file mode 100644 index 0000000000..d3036cd137 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/InfoModal.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import * as S from 'components/Topics/Topic/Details/Messages/Filters/Filters.styled'; +import { Button } from 'components/common/Button/Button'; + +export interface InfoModalProps { + toggleIsOpen(): void; +} + +const InfoModal: React.FC = ({ toggleIsOpen }) => { + return ( + + + Variables bound to groovy context: partition, timestampMs, + keyAsText, valueAsText, header, key (json if possible), value (json if + possible). + + + JSON parsing logic: + + + Key and Value (if they can be parsed to JSON) they are bound as JSON + objects, otherwise bound as nulls. + + + Sample filters: + +
    + + `keyAsText != null && keyAsText ~"([Gg])roovy"` - regex for + key as a string + + + `value.name == "iS.ListItemax" && value.age > 30` - in + case value is json + + + `value == null && valueAsText != null` - search for values that are + not nulls and are not json + + + `headers.sentBy == "some system" && + headers["sentAt"] == "2020-01-01"` + + multiS.ListItemne filters are also allowed: +
+ + + + + ); +}; + +export default InfoModal; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddFilter.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddFilter.spec.tsx index 6e659de446..4569c81e64 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddFilter.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddFilter.spec.tsx @@ -36,6 +36,18 @@ describe('AddFilter component', () => { expect(screen.getAllByRole('savedFilter')).toHaveLength(2); }); + it('info button to be in the document', () => { + renderComponent(); + expect(screen.getByRole('button', { name: 'info' })).toBeInTheDocument(); + }); + + it('renders InfoModal', () => { + renderComponent(); + userEvent.click(screen.getByRole('button', { name: 'info' })); + expect(screen.getByRole('button', { name: 'Ok' })).toBeInTheDocument(); + expect(screen.getByRole('list', { name: 'info-list' })).toBeInTheDocument(); + }); + it('should test click on return to custom filter redirects to Add filters', async () => { renderComponent(); userEvent.click(screen.getByRole('savedFilterText')); @@ -159,7 +171,7 @@ describe('AddFilter component', () => { it('OnSubmit condition with checkbox on functionality', async () => { await act(() => { userEvent.click(screen.getByRole('checkbox')); - userEvent.click(screen.getAllByRole('button')[1]); + userEvent.click(screen.getAllByRole('button')[2]); }); expect(activeFilterHandlerMock).not.toHaveBeenCalled(); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/InfoModal.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/InfoModal.spec.tsx new file mode 100644 index 0000000000..1721c48915 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/InfoModal.spec.tsx @@ -0,0 +1,14 @@ +import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; +import { render } from 'lib/testHelpers'; +import React from 'react'; +import InfoModal from 'components/Topics/Topic/Details/Messages/Filters/InfoModal'; + +describe('InfoModal component', () => { + it('closes InfoModal', () => { + const toggleInfoModal = jest.fn(); + render(); + userEvent.click(screen.getByRole('button', { name: 'Ok' })); + expect(toggleInfoModal).toHaveBeenCalledTimes(1); + }); +}); diff --git a/kafka-ui-react-app/src/components/common/Icons/QuestionIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/QuestionIcon.tsx new file mode 100644 index 0000000000..11490b100d --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Icons/QuestionIcon.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { useTheme } from 'styled-components'; + +const QuestionIcon: React.FC = () => { + const theme = useTheme(); + return ( + + + + + ); +}; + +export default QuestionIcon;