minor fixes in AdvancedSearchFilters (#7512)

* minor fixes in AdvancedSearchFilters * clear button behavior fix --------- Co-authored-by: Piotr Fałdrowicz <[email protected]>
TouK · Jan 30, 2025 · 737f406 · 737f406
1 parent c3791aa
commit 737f406
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/designer/client/cypress/e2e/search.cy.ts b/designer/client/cypress/e2e/search.cy.ts
@@ -124,6 +124,18 @@ describe("Search Panel View", () => {
         cy.get("[data-testid=search-panel]").contains("sendSms");
     });
 
+    it("should clear unapplied search filters", () => {
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        cy.get("[data-testid=search-panel]").find("button[type='button']").click();
+
+        cy.get("[data-testid=search-panel]").find("input[name='name']").click();
+        cy.realType("sink");
+
+        cy.get("[data-testid=search-panel]").find("button[type='button']").click();
+
+        cy.get("[data-testid=search-panel]").find("input[name='name']").should("have.value", "");
+    });
+
     it("should clear filters when clear all button clicked", () => {
         cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").click();
         cy.realType("se");

diff --git a/designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx b/designer/client/src/components/sidePanels/SearchLabeledAutocomplete.tsx
@@ -8,18 +8,17 @@ export const SearchLabeledAutocomplete = ({ children, name, options, value, setF
     }
 
     return (
-        <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1, width: "100%" }}>
+        <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1 }} fullWidth={true}>
             {children}
             <Autocomplete
                 freeSolo
                 options={options}
                 value={value.join(",")}
                 onChange={handleChange}
                 onInputChange={handleChange}
-                className={nodeInput}
                 renderInput={(params) => (
                     <div ref={params.InputProps.ref}>
-                        <input name={name} {...params.inputProps} className={nodeInput} />
+                        <input name={name} {...params.inputProps} className={nodeInput} style={{ width: "100%" }} />
                     </div>
                 )}
             />

diff --git a/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx b/designer/client/src/components/toolbars/search/AdvancedSearchFilters.tsx
@@ -59,7 +59,7 @@ export function AdvancedSearchFilters({
             .map((selectorResult) => (typeof selectorResult === "string" ? selectorResult : selectorResult?.expression))
             .filter((type) => componentLabels.has(type.toLowerCase()));
 
-        return uniq(availableTypes);
+        return uniq(availableTypes).sort();
     }, [allNodes, componentLabels]);
 
     useEffect(() => {
@@ -76,6 +76,7 @@ export function AdvancedSearchFilters({
 
     const handleClear = () => {
         setFilter(filterFields?.plainQuery);
+        setFilterFields({ plainQuery: filterFields?.plainQuery });
     };
 
     return (

diff --git a/designer/client/src/components/toolbars/search/SearchResults.tsx b/designer/client/src/components/toolbars/search/SearchResults.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { getScenario, getSelectionState } from "../../../reducers/selectors/graph";
 import { MenuItem, MenuList } from "@mui/material";
 import { FoundNode } from "./FoundNode";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { resolveSearchQuery, useFilteredNodes } from "./utils";
 import { useGraph } from "../../graph/GraphContext";
 import { nodeFound, nodeFoundHover } from "../../graph/graphStyledWrapper";
@@ -22,7 +22,7 @@ export type SearchQuery = {
 };
 
 export function SearchResults({ filterRawText }: { filterRawText?: string }) {
-    const searchQuery: SearchQuery = resolveSearchQuery(filterRawText);
+    const searchQuery: SearchQuery = useMemo(() => resolveSearchQuery(filterRawText), [filterRawText]);
     const nodes = useFilteredNodes(searchQuery);
 
     const [hasFocus, setHasFocus] = useState(false);

diff --git a/designer/client/src/components/toolbars/search/utils.ts b/designer/client/src/components/toolbars/search/utils.ts
@@ -197,7 +197,7 @@ export function searchQueryToString(query: SearchQuery): string {
     const formattedParts = Object.entries(query)
         .filter(([key]) => key !== "plainQuery")
         .map(([key, value]) => {
-            if (Array.isArray(value) && !(value.length === 1 && value[0] === "")) {
+            if (Array.isArray(value) && value.length > 0 && value[0] !== null && value[0] !== "") {
                 return `${key}:(${value})`;
             } else if (typeof value === "string" && value.length > 0) {
                 return `${key}:(${[value]})`;