From f766435accd5a2f15dc555af4cde32de1dd5a764 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Wed, 25 Jan 2023 18:56:15 +0530 Subject: [PATCH] feat: popover is added in the trace tag search (#2118) * feat: popover is updated * chore: arrow is removed and padding is removed * chore: width is updated --- .../container/Trace/Search/AllTags/index.tsx | 46 ++++---- .../container/Trace/Search/AllTags/styles.ts | 23 +--- frontend/src/container/Trace/Search/config.ts | 1 + frontend/src/container/Trace/Search/index.tsx | 101 +++++++----------- frontend/src/hooks/useClickOutside.ts | 27 ----- 5 files changed, 66 insertions(+), 132 deletions(-) create mode 100644 frontend/src/container/Trace/Search/config.ts delete mode 100644 frontend/src/hooks/useClickOutside.ts diff --git a/frontend/src/container/Trace/Search/AllTags/index.tsx b/frontend/src/container/Trace/Search/AllTags/index.tsx index a872fbfd1d..f37209eccb 100644 --- a/frontend/src/container/Trace/Search/AllTags/index.tsx +++ b/frontend/src/container/Trace/Search/AllTags/index.tsx @@ -16,7 +16,6 @@ import { Container, CurrentTagsContainer, ErrorContainer, - Wrapper, } from './styles'; import Tags from './Tag'; @@ -90,33 +89,30 @@ function AllTags({ return ( - - Tags + Tags - - {localSelectedTags.map((tags, index) => ( - onCloseHandler(index)} - setLocalSelectedTags={setLocalSelectedTags} - localSelectedTags={localSelectedTags} - /> - ))} - + + {localSelectedTags.map((tags, index) => ( + onCloseHandler(index)} + setLocalSelectedTags={setLocalSelectedTags} + localSelectedTags={localSelectedTags} + /> + ))} + - - + + - - Results will include spans with ALL the specified tags ( Rows are `ANDed` - ) - - - + + Results will include spans with ALL the specified tags ( Rows are `ANDed` ) + + diff --git a/frontend/src/container/Trace/Search/AllTags/styles.ts b/frontend/src/container/Trace/Search/AllTags/styles.ts index 3ce74315e1..a56eb33dd3 100644 --- a/frontend/src/container/Trace/Search/AllTags/styles.ts +++ b/frontend/src/container/Trace/Search/AllTags/styles.ts @@ -2,25 +2,15 @@ import { Card } from 'antd'; import styled from 'styled-components'; export const Container = styled(Card)` - top: 120%; min-height: 20vh; width: 100%; - z-index: 2; - position: absolute !important; - - .ant-card-body { - padding-bottom: 0; - padding-right: 0; - padding-left: 0; - } + min-width: 81.5vw; `; export const ErrorContainer = styled(Card)` - top: 120%; min-height: 20vh; width: 100%; z-index: 2; - position: absolute; display: flex; justify-content: center; @@ -28,13 +18,6 @@ export const ErrorContainer = styled(Card)` flex-direction: column; `; -export const Wrapper = styled.div` - &&& { - padding-right: 2rem; - padding-left: 2rem; - } -`; - export const ButtonContainer = styled(Card)` display: flex; justify-content: flex-end; @@ -45,6 +28,10 @@ export const ButtonContainer = styled(Card)` padding-right: 38.01px !important; margin-top: 1rem !important; + + .ant-card-body { + padding: 0; + } `; export const CurrentTagsContainer = styled.div` diff --git a/frontend/src/container/Trace/Search/config.ts b/frontend/src/container/Trace/Search/config.ts new file mode 100644 index 0000000000..52d8acf3d8 --- /dev/null +++ b/frontend/src/container/Trace/Search/config.ts @@ -0,0 +1 @@ +export const contentStyle = { padding: 0 }; diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx index 890f69a6c4..adcb59f6eb 100644 --- a/frontend/src/container/Trace/Search/index.tsx +++ b/frontend/src/container/Trace/Search/index.tsx @@ -1,5 +1,5 @@ import { CaretRightFilled } from '@ant-design/icons'; -import useClickOutside from 'hooks/useClickOutside'; +import { Popover } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; @@ -13,6 +13,7 @@ import { UPDATE_ALL_FILTERS } from 'types/actions/trace'; import { TraceReducer } from 'types/reducer/trace'; import Tags from './AllTags'; +import { contentStyle } from './config'; import { Container, SearchComponent } from './styles'; import { parseQueryToTags, parseTagsToQuery } from './util'; @@ -42,33 +43,6 @@ function Search({ const tagRef = useRef(null); - useClickOutside(tagRef, (e: HTMLElement) => { - // using this hack as overlay span is voilating this condition - if ( - e.nodeName === 'svg' || - e.nodeName === 'path' || - e.nodeName === 'span' || - e.nodeName === 'button' - ) { - return; - } - - if ( - e.nodeName === 'DIV' && - ![ - 'ant-select-item-option-content', - 'ant-empty-image', - 'ant-select-item', - 'ant-col', - 'ant-select-item-option-active', - ].find((p) => p.indexOf(e.className) !== -1) && - !(e.ariaSelected === 'true') && - traces.isTagModalOpen - ) { - updateTagVisibility(false); - } - }); - const onChangeHandler = (search: string): void => { setValue(search); }; @@ -77,11 +51,6 @@ function Search({ updateTagVisibility(value); }; - const onFocusHandler: React.FocusEventHandler = (e) => { - e.preventDefault(); - setIsTagsModalHandler(true); - }; - const updateFilters = async ( selectedTags: TraceReducer['selectedTags'], ): Promise => { @@ -116,37 +85,45 @@ function Search({ return ( - onChangeHandler(event.target.value)} - value={value} - allowClear - disabled={traces.filterLoading} - onFocus={onFocusHandler} - placeholder="Click to filter by tags" - type="search" - enterButton={} - onSearch={(string): void => { - if (string.length === 0) { - updateTagVisibility(false); - updateFilters([]); - return; - } + + } + > + onChangeHandler(event.target.value)} + value={value} + allowClear + disabled={traces.filterLoading} + placeholder="Click to filter by tags" + type="search" + enterButton={} + onSearch={(string): void => { + if (string.length === 0) { + updateTagVisibility(false); + updateFilters([]); + return; + } - const { isError, payload } = parseQueryToTags(string); + const { isError, payload } = parseQueryToTags(string); - if (isError) { - updateTagIsError(true); - } else { - updateTagIsError(false); - updateTagVisibility(false); - updateFilters(payload); - } - }} - /> - - {traces.isTagModalOpen && ( - - )} + if (isError) { + updateTagIsError(true); + } else { + updateTagIsError(false); + updateTagVisibility(false); + updateFilters(payload); + } + }} + /> + ); } diff --git a/frontend/src/hooks/useClickOutside.ts b/frontend/src/hooks/useClickOutside.ts deleted file mode 100644 index 48294c45eb..0000000000 --- a/frontend/src/hooks/useClickOutside.ts +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useCallback, useEffect } from 'react'; - -const useClickOutside = ( - ref: React.RefObject, - callback: (e: HTMLElement) => void | null, -): void => { - const listener = useCallback( - (e: Event) => { - const node = e?.target as HTMLElement; - - if (ref.current && !ref.current.contains(node) && callback) { - callback(node); - } - }, - [callback, ref], - ); - - useEffect(() => { - document.addEventListener('click', listener); - - return (): void => { - document.removeEventListener('click', listener); - }; - }, [ref, callback, listener]); -}; - -export default useClickOutside;