[Nu-1780] better ux

TouK · Sep 11, 2024 · 64e668b · 64e668b
1 parent 0a47634
commit 64e668b
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 37 deletions.
diff --git 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<HTMLInputElement, SearchLabeledInputProps>(({ children, ...props }, ref) => {
     return (
-        <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1 }}>
+        <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1, width: "100%" }}>
             {children}
             <input ref={ref} {...props} className={nodeInput} />
         </FormControl>

diff --git 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
@@ -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
@@ -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<React.SetStateAction<boolean>>;
 }) {
     const { t } = useTranslation();
-    const idRef = useRef<HTMLInputElement>(null);
-    const descriptionRef = useRef<HTMLInputElement>(null);
-    const paramNameRef = useRef<HTMLInputElement>(null);
-    const paramValueRef = useRef<HTMLInputElement>(null);
-    const outputValueRef = useRef<HTMLInputElement>(null);
-    const typeRef = useRef<HTMLInputElement>(null);
-    const edgeExpressionRef = useRef<HTMLInputElement>(null);
+    const refForm = useRef<HTMLFormElement>(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<HTMLFormElement>) => {
         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 (
         <Box
+            ref={refForm}
             component="form"
             onSubmit={handleSubmit}
             sx={{
@@ -98,36 +100,34 @@ export function AdvancedSearchFilters({
                 alignItems: "center",
             }}
         >
-            <Typography fontWeight="bold" sx={{ m: 1 }}>
-                Advanced Search
-            </Typography>
-            <SearchLabeledInput ref={idRef} name="id">
+            <Typography fontWeight="bold">{t("search.panel.advancedFilters.label", "Advanced Search")}</Typography>
+            <SearchLabeledInput name="id">
                 <SearchLabel label={displayNames["id"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput ref={descriptionRef} name="description">
+            <SearchLabeledInput name="description">
                 <SearchLabel label={displayNames["description"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput ref={paramNameRef} name="paramName">
+            <SearchLabeledInput name="paramName">
                 <SearchLabel label={displayNames["paramName"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput ref={paramValueRef} name="paramValue">
+            <SearchLabeledInput name="paramValue">
                 <SearchLabel label={displayNames["paramValue"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput ref={outputValueRef} name="outputValue">
+            <SearchLabeledInput name="outputValue">
                 <SearchLabel label={displayNames["outputValue"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput ref={typeRef} name="type">
+            <SearchLabeledInput name="type">
                 <SearchLabel label={displayNames["type"]} />
             </SearchLabeledInput>
-            <SearchLabeledInput ref={edgeExpressionRef} name="edgeExpression">
+            <SearchLabeledInput name="edgeExpression">
                 <SearchLabel label={displayNames["edgeExpression"]} />
             </SearchLabeledInput>
-            <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "80%", mt: 2, mb: 1 }}>
-                <Button sx={{ width: "45%" }} size="small" variant="outlined" onClick={handleCancel}>
-                    Clear
+            <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "100%", mt: 2, mb: 1 }}>
+                <Button sx={{ width: "45%" }} size="small" variant="outlined" onClick={handleClear}>
+                    {t("search.panel.advancedFilters.clearButton.label", "Clear")}
                 </Button>
                 <Button variant="contained" size="small" sx={{ width: "45%" }} type="submit">
-                    Submit
+                    {t("search.panel.advancedFilters.submitButton.label", "Submit")}
                 </Button>
             </Box>
         </Box>

diff --git 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 {
                 <SearchIcon isEmpty={isEmpty(filter)} />
             </SearchInputWithIcon>
             <Collapse in={advancedOptionsCollapsed} timeout="auto" unmountOnExit={false}>
-                <AdvancedSearchFilters filter={filter} setFilter={setFilter} setCollapsedHandler={setAdvancedOptionsCollapsed} />
+                <SearchPanelStyled>
+                    <AdvancedSearchFilters filter={filter} setFilter={setFilter} setCollapsedHandler={setAdvancedOptionsCollapsed} />
+                </SearchPanelStyled>
             </Collapse>
             <SearchResults filterRawText={filter} />
         </ToolbarWrapper>

diff --git 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 = [];
                         }