[Nu-1780] Add advanced search options

designer/client/cypress/e2e/process2.cy.ts

@@ -22,7 +22,7 @@ describe("Process view", () => {
     it("should have node search toolbar", () => {
         cy.get("[data-testid=search-panel]").should("be.visible");
         cy.get("[data-testid=search-panel]").contains(/^search$/i);
-        cy.get("[data-testid=search-panel] input").click();
+        cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").click();
         cy.realType("en");
         cy.get("[data-testid=search-panel]").contains(/sms/i).click();
         cy.getNode("enricher")
@@ -41,7 +41,7 @@ describe("Process view", () => {
         cy.get("[data-testid=window]")
             .contains(/^cancel$/i)
             .click();
-        cy.get("[data-testid=search-panel] input").click().clear();
+        cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").click().clear();
         cy.realType("source");
         cy.wait(750); //wait for animation
         cy.getNode("enricher")

designer/client/cypress/e2e/search.cy.ts

@@ -0,0 +1,144 @@
+describe("Search Panel View", () => {
+    const seed = "process";
+
+    before(() => {
+        cy.deleteAllTestProcesses({
+            filter: seed,
+            force: true,
+        });
+    });
+
+    after(() => {
+        cy.deleteAllTestProcesses({
+            filter: seed,
+            force: true,
+        });
+    });
+
+    beforeEach(() => {
+        cy.visitNewProcess(seed, "testProcess");
+    });
+
+    it("should collapse advanced search filters", () => {
+        cy.get("[data-testid=search-panel]").should("be.visible");
+        cy.get("[data-testid=search-panel]").contains(/^search$/i);
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        //cy.realType("se");
+        cy.get("[data-testid=search-panel]").contains("Advanced Search");
+        cy.get("[data-testid=search-panel]").contains("Name");
+        cy.get("[data-testid=search-panel]").contains("Description");
+        cy.get("[data-testid=search-panel]").contains("Label");
+        cy.get("[data-testid=search-panel]").contains("Value");
+        cy.get("[data-testid=search-panel]").contains("Output");
+        cy.get("[data-testid=search-panel]").contains("Type");
+        cy.get("[data-testid=search-panel]").contains("Edge");
+    });
+
+    it("should filter nodes when typing search query with selectors manually and editing it later in form", () => {
+        cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").click();
+
+        cy.realType("type:(sink) se");
+
+        cy.get("[data-testid=search-panel]").contains("dynamicService").should("not.exist");
+        cy.get("[data-testid=search-panel]").contains("sendSms");
+
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        cy.get("[data-testid=search-panel]").find("input[name='type']").should("have.value", "sink");
+
+        cy.get("[data-testid=search-panel]").find("input[name='type']").click();
+        cy.realType(",processor");
+
+        cy.get("[data-testid=search-panel]").find("button[type='submit']").click();
+
+        cy.get("[data-testid=search-panel]").contains("dynamicService");
+        cy.get("[data-testid=search-panel]").contains("sendSms");
+    });
+
+    it("should filter nodes when performing simple search and adding selectors using form", () => {
+        cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").click();
+        cy.realType("se");
+
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        cy.get("[data-testid=search-panel]").find("input[name='type']").click();
+
+        cy.realType("sink,processor");
+
+        cy.get("[data-testid=search-panel]").find("button[type='submit']").click();
+
+        cy.get("[data-testid=search-panel]")
+            .find("input[data-selector='NODES_IN_SCENARIO']")
+            .should("have.value", "type:(sink,processor) se");
+
+        cy.get("[data-testid=search-panel]").contains("dynamicService");
+        cy.get("[data-testid=search-panel]").contains("sendSms");
+    });
+
+    it("should filter nodes when setting up multiple selectors using form", () => {
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+
+        cy.get("[data-testid=search-panel]").find("input[name='id']").click();
+        cy.realType("bounded,dynamic,send,enricher");
+
+        cy.get("[data-testid=search-panel]").find("input[name='type']").click();
+        cy.realType("sink,enricher");
+
+        cy.get("[data-testid=search-panel]").find("button[type='submit']").click();
+
+        cy.get("[data-testid=search-panel]")
+            .find("input[data-selector='NODES_IN_SCENARIO']")
+            .should("have.value", "id:(bounded,dynamic,send,enricher) type:(sink,enricher) ");
+
+        cy.get("[data-testid=search-panel]").contains("enricher");
+        cy.get("[data-testid=search-panel]").contains("sendSms");
+    });
+
+    it("should synchronize the form input state with manually provided query with selectors", () => {
+        cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").click();
+        cy.realType("type:(sink)");
+
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        cy.get("[data-testid=search-panel]").find("input[name='type']").should("have.value", "sink");
+
+        cy.get("[data-testid=search-panel]")
+            .find("input[data-selector='NODES_IN_SCENARIO']")
+            .click()
+            .type("{moveToEnd}")
+            .type("{leftArrow}")
+            .type(",source");
+
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        cy.get("[data-testid=search-panel]").find("input[name='type']").should("have.value", "sink,source");
+    });
+
+    it("should clear search filters", () => {
+        cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").click();
+        cy.realType("type:(sink) se");
+
+        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[data-selector='NODES_IN_SCENARIO']").should("have.value", "se");
+        cy.get("[data-testid=search-panel]").find("input[name='type']").should("have.value", "");
+
+        cy.get("[data-testid=search-panel]").contains("dynamicService");
+        cy.get("[data-testid=search-panel]").contains("sendSms");
+    });
+
+    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");
+
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        cy.get("[data-testid=search-panel]").find("input[name='type']").click();
+
+        cy.realType("sink,processor");
+
+        cy.get("[data-testid=search-panel]").find("button[type='submit']").click();
+        cy.get("[data-testid=search-panel]").find("svg[id='clear-icon']").click();
+
+        cy.get("[data-testid=search-panel]").find("input[data-selector='NODES_IN_SCENARIO']").should("have.value", "");
+
+        cy.get("[data-testid=search-panel]").find("svg[id='advanced-search-icon']").click();
+        cy.get("[data-testid=search-panel]").find("input[name='type']").should("have.value", "");
+    });
+});

designer/client/src/components/sidePanels/SearchLabel.tsx

@@ -0,0 +1,10 @@
+import { FieldLabel } from "../graph/node-modal/FieldLabel";
+import React from "react";
+
+interface Props {
+    label: string;
+}
+
+export const SearchLabel = (props: Props) => {
+    return <FieldLabel title={props.label} label={props.label} />;
+};

designer/client/src/components/sidePanels/SearchLabeledInput.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, PropsWithChildren } from "react";
+import { FormControl } from "@mui/material";
+import { nodeInput } from "../graph/node-modal/NodeDetailsContent/NodeTableStyled";
+import React from "react";
+
+export type SearchLabeledInputProps = PropsWithChildren<{
+    name: string;
+}>;
+
+export const SearchLabeledInput = forwardRef<HTMLInputElement, SearchLabeledInputProps>(({ children, ...props }, ref) => {
+    return (
+        <FormControl sx={{ display: "flex", flexDirection: "column", m: 0, gap: 1, width: "100%" }}>
+            {children}
+            <input ref={ref} {...props} className={nodeInput} />
+        </FormControl>
+    );
+});
+
+SearchLabeledInput.displayName = "SearchLabeledInput";

designer/client/src/components/table/SearchFilter.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from "@emotion/css";
 import React from "react";
 import SearchSvg from "../../assets/img/search.svg";
+import AdvancedSearchSvg from "../../assets/img/advanced-search.svg";
 import DeleteSvg from "../../assets/img/toolbarButtons/delete.svg";
 import { useTheme } from "@mui/material";
 
@@ -9,13 +10,43 @@ const flex = css({
     flex: 1,
 });
 
+export function AdvancedOptionsIcon(props: {
+    isActive?: boolean;
+    collapseHandler: React.Dispatch<React.SetStateAction<boolean>>;
+}): JSX.Element {
+    const theme = useTheme();
+
+    const toggleCollapseHandler = () => {
+        props.collapseHandler((p) => !p);
+    };
+
+    return (
+        <AdvancedSearchSvg
+            id="advanced-search-icon"
+            onClick={toggleCollapseHandler}
+            className={cx(
+                flex,
+                css({
+                    cursor: "pointer",
+                    transform: "scale(1.5)",
+                    ".icon-fill": {
+                        fill: "none",
+                        stroke: !props.isActive ? theme.palette.text.secondary : theme.palette.primary.main,
+                    },
+                }),
+            )}
+        />
+    );
+}
+
 export function SearchIcon(props: { isEmpty?: boolean }): JSX.Element {
     const theme = useTheme();
     return (
         <SearchSvg
             className={cx(
                 flex,
                 css({
+                    transform: "scale(0.8)",
                     ".icon-fill": {
                         fill: props.isEmpty ? theme.palette.text.secondary : theme.palette.primary.main,
                     },
@@ -30,6 +61,7 @@ export function ClearIcon(): JSX.Element {
 
     return (
         <DeleteSvg
+            id="clear-icon"
             className={cx(
                 flex,
                 css({

designer/client/src/components/themed/InputWithIcon.tsx

@@ -1,12 +1,13 @@
 import { css, cx } from "@emotion/css";
-import { styled, useTheme } from "@mui/material";
-import React, { forwardRef, PropsWithChildren, ReactElement, useCallback, useImperativeHandle, useRef } from "react";
+import { Box, styled, useTheme } from "@mui/material";
+import React, { forwardRef, PropsWithChildren, ReactElement, ReactNode, useCallback, useImperativeHandle, useRef } from "react";
 import { ClearIcon } from "../table/SearchFilter";
 import { InputProps, ThemedInput } from "./ThemedInput";
 
 type Props = PropsWithChildren<InputProps> & {
     onClear?: () => void;
     onAddonClick?: () => void;
+    endAdornment?: ReactNode;
 };
 
 export type Focusable = {
@@ -23,6 +24,9 @@ export const InputWithIcon = forwardRef<Focusable, Props>(function InputWithIcon
 
     const wrapperWithAddonStyles = css({
         position: "relative",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
     });
 
     const addonWrapperStyles = css({
@@ -59,18 +63,19 @@ export const InputWithIcon = forwardRef<Focusable, Props>(function InputWithIcon
 
     return (
         <div className={cx(children && wrapperWithAddonStyles)}>
+            {children && (
+                <div className={addonStyles} onClick={onAddonClick ?? (() => focus())}>
+                    {children}
+                </div>
+            )}
             <ThemedInput ref={ref} {...props} />
             <div className={addonWrapperStyles}>
                 {!!props.value && onClear && (
                     <div className={addonStyles} onClick={onClear}>
                         <ClearIcon />
                     </div>
                 )}
-                {children && (
-                    <div className={addonStyles} onClick={onAddonClick ?? (() => focus())}>
-                        {children}
-                    </div>
-                )}
+                {props.endAdornment && <div className={addonStyles}>{props.endAdornment}</div>}
             </div>
         </div>
     );

designer/client/src/components/themed/SearchInput.tsx

@@ -3,7 +3,7 @@ import { InputWithIcon } from "./InputWithIcon";
 
 export const SearchInputWithIcon = styled(InputWithIcon)(({ theme }) => ({
     ...theme.typography.body2,
-    width: "100%",
+    width: "75%",
     borderRadius: 0,
     height: "36px !important",
     color: theme.palette.text.secondary,

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),
+}));