From 64e668b4cefdfa5f11913268e0a7e689f2c752c7 Mon Sep 17 00:00:00 2001 From: Piotr Rudnicki Date: Wed, 11 Sep 2024 13:22:14 +0200 Subject: [PATCH] [Nu-1780] better ux --- .../sidePanels/SearchLabeledInput.tsx | 2 +- .../src/components/table/SearchFilter.tsx | 1 + .../client/src/components/tips/Styled.tsx | 5 ++ .../toolbars/search/AdvancedSearchFilters.tsx | 68 +++++++++---------- .../toolbars/search/SearchPanel.tsx | 5 +- .../src/components/toolbars/search/utils.ts | 4 +- 6 files changed, 48 insertions(+), 37 deletions(-) diff --git a/designer/client/src/components/sidePanels/SearchLabeledInput.tsx b/designer/client/src/components/sidePanels/SearchLabeledInput.tsx index 469395818c6..23e5354edd9 100644 --- a/designer/client/src/components/sidePanels/SearchLabeledInput.tsx +++ b/designer/client/src/components/sidePanels/SearchLabeledInput.tsx @@ -9,7 +9,7 @@ export type SearchLabeledInputProps = PropsWithChildren<{ export const SearchLabeledInput = forwardRef(({ children, ...props }, ref) => { return ( - + {children} diff --git a/designer/client/src/components/table/SearchFilter.tsx b/designer/client/src/components/table/SearchFilter.tsx index d5466a0f670..05698719c0d 100644 --- a/designer/client/src/components/table/SearchFilter.tsx +++ b/designer/client/src/components/table/SearchFilter.tsx @@ -26,6 +26,7 @@ export function AdvancedOptionsIcon(props: { className={cx( flex, css({ + cursor: "pointer", transform: "scale(1.5)", ".icon-fill": { fill: "none", diff --git a/designer/client/src/components/tips/Styled.tsx b/designer/client/src/components/tips/Styled.tsx index 8ce50317ade..93704643536 100644 --- a/designer/client/src/components/tips/Styled.tsx +++ b/designer/client/src/components/tips/Styled.tsx @@ -38,3 +38,8 @@ export const TipPanelStyled = styled("div")<{ outlineOffset: "-2px", }), })); + +export const SearchPanelStyled = styled("div")(({ theme }) => ({ + width: "100%", + padding: theme.spacing(1, 1.25), +})); diff --git a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx index ddb4be71f4e..5155f686057 100644 --- a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx +++ b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx @@ -1,8 +1,10 @@ -import React, { useMemo, useRef } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import { Button, Box, Typography } from "@mui/material"; import { useTranslation } from "react-i18next"; import { SearchLabeledInput } from "../../sidePanels/SearchLabeledInput"; import { SearchLabel } from "../../sidePanels/SearchLabel"; +import { SearchQuery } from "./SearchResults"; +import { resolveSearchQuery } from "./utils"; const transformInput = (input: string, fieldName: string) => { return input === "" ? "" : `${fieldName}:(${input})`; @@ -32,13 +34,7 @@ export function AdvancedSearchFilters({ setCollapsedHandler: React.Dispatch>; }) { const { t } = useTranslation(); - const idRef = useRef(null); - const descriptionRef = useRef(null); - const paramNameRef = useRef(null); - const paramValueRef = useRef(null); - const outputValueRef = useRef(null); - const typeRef = useRef(null); - const edgeExpressionRef = useRef(null); + const refForm = useRef(null); const displayNames = useMemo( () => ({ @@ -53,15 +49,25 @@ export function AdvancedSearchFilters({ [t], ); - console.log(displayNames); + //Here be dragons: direct DOM manipulation + useEffect(() => { + if (refForm.current) { + const searchQuery = resolveSearchQuery(filter); + const formElements = refForm.current.elements; + + Array.from(formElements).forEach((element: HTMLInputElement) => { + if (element.name in searchQuery) { + element.value = (searchQuery[element.name] || []).join(","); + } + }); + } + }, [filter]); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const formData = new FormData(event.currentTarget); - console.log(formData); - const transformedInputs = Array.from(formData.entries()) .map(([fieldName, fieldValue]) => { const input = (fieldValue as string) || ""; @@ -72,22 +78,18 @@ export function AdvancedSearchFilters({ const finalText = transformedInputs.join(" ").trim() + " " + extractSimpleSearchQuery(filter); setFilter(finalText); + setCollapsedHandler(false); }; - const handleCancel = () => { - idRef.current.value = ""; - descriptionRef.current.value = ""; - paramNameRef.current.value = ""; - paramValueRef.current.value = ""; - outputValueRef.current.value = ""; - typeRef.current.value = ""; - edgeExpressionRef.current.value = ""; - + const handleClear = () => { setFilter(extractSimpleSearchQuery(filter)); + + refForm.current.reset(); }; return ( - - Advanced Search - - + {t("search.panel.advancedFilters.label", "Advanced Search")} + - + - + - + - + - + - + - - diff --git a/designer/client/src/components/toolbars/search/SearchPanel.tsx b/designer/client/src/components/toolbars/search/SearchPanel.tsx index 209a8b2d1a4..145033b6561 100644 --- a/designer/client/src/components/toolbars/search/SearchPanel.tsx +++ b/designer/client/src/components/toolbars/search/SearchPanel.tsx @@ -10,6 +10,7 @@ import { SearchInputWithIcon } from "../../themed/SearchInput"; import { EventTrackingSelector, getEventTrackingProps } from "../../../containers/event-tracking"; import { Collapse } from "@mui/material"; import { AdvancedSearchFilters } from "./AdvancedSearchFilters"; +import { SearchPanelStyled, TipPanelStyled } from "../../tips/Styled"; export function SearchPanel(props: ToolbarPanelProps): ReactElement { const { t } = useTranslation(); @@ -37,7 +38,9 @@ export function SearchPanel(props: ToolbarPanelProps): ReactElement { - + + + diff --git a/designer/client/src/components/toolbars/search/utils.ts b/designer/client/src/components/toolbars/search/utils.ts index 51daf7ceef4..e379a699978 100644 --- a/designer/client/src/components/toolbars/search/utils.ts +++ b/designer/client/src/components/toolbars/search/utils.ts @@ -157,7 +157,9 @@ export function useFilteredNodes(searchQuery: SearchQuery): { const allChecksPassed = isEqual(groups, displayKeyNamesRelevantForFiltering); - if (!allChecksPassed || groupsAux.length === 0) { + const hasValidQueryOrGroups = searchQuery.plainQuery === "" ? false : groupsAux.length === 0; + + if (!allChecksPassed || hasValidQueryOrGroups) { edges = []; groups = []; }