Update Cypress snapshots in nu-1780-add-advanced-filter-search

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

@@ -21,27 +21,27 @@ describe("Auto Screenshot Change Docs -", () => {
         takeGraphScreenshot(); // take screenshot of whole graph
 
         cy.get('[model-id="My first variable declaration"]').dblclick(); // click on node
-        cy.get('[title="Name"]').click(); // click of remove cursor flickering effect
+        cy.get("[data-testid=window]").find('[title="Name"]').click(); // click of remove cursor flickering effect
         takeWindowScreenshot(); // take screenshot of node window
 
         cy.visitNewProcess(seed, "docsBasicComponentsVariable#1"); // load new scenario
         cy.get('[model-id="only financial ops"]').dblclick(); // click on node
-        cy.get('[title="Name"]').click(); // click of remove cursor flickering effect
+        cy.get("[data-testid=window]").find('[title="Name"]').click(); // click of remove cursor flickering effect
         takeWindowScreenshot(); // take screenshot of node window
     });
 
     it("basic components - recordVariable", () => {
         cy.visitNewProcess(seed, "docsBasicComponentsRecordVariable#0");
         cy.layoutScenario();
         cy.get('[model-id="node label goes here"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
         cy.get("[data-testid=window]")
             .contains(/^cancel$/i)
             .click();
 
         cy.get('[model-id="variable"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 
@@ -55,7 +55,7 @@ describe("Auto Screenshot Change Docs -", () => {
         takeGraphScreenshot();
 
         cy.get('[model-id="conditional filter"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 
@@ -68,7 +68,7 @@ describe("Auto Screenshot Change Docs -", () => {
         takeGraphScreenshot();
 
         cy.get('[model-id="choice"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 
@@ -82,7 +82,7 @@ describe("Auto Screenshot Change Docs -", () => {
         cy.visitNewProcess(seed, "docsBasicComponentsForEach#0");
         cy.layoutScenario();
         cy.get('[model-id="for-each"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 
@@ -94,7 +94,7 @@ describe("Auto Screenshot Change Docs -", () => {
         takeGraphScreenshot();
 
         cy.get('[model-id="union"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 
@@ -105,7 +105,7 @@ describe("Auto Screenshot Change Docs -", () => {
         takeGraphScreenshot();
 
         cy.get('[model-id="single-side-join"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 
@@ -114,7 +114,7 @@ describe("Auto Screenshot Change Docs -", () => {
         cy.visitNewProcess(seed, "docsAggregatesFullOuterJoin#0");
         cy.layoutScenario();
         cy.get('[model-id="full-outer-join"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 
@@ -132,16 +132,16 @@ describe("Auto Screenshot Change Docs -", () => {
         cy.visitNewProcess(seed, "docsFragmentsInputs#0");
         cy.layoutScenario();
         cy.get('[model-id="input"]').dblclick();
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
 
         cy.get('[title="Options"]').eq(0).click(); // open parameter1 options
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
 
         cy.get('[title="Options"]').eq(0).click(); // close parameter1 options
         cy.get('[title="Options"]').eq(1).click(); // open parameter2 options
-        cy.get('[title="Name"]').click();
+        cy.get("[data-testid=window]").find('[title="Name"]').click();
         takeWindowScreenshot();
     });
 

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

@@ -27,7 +27,8 @@ describe("Description", () => {
             .dblclick();
         cy.get("[data-testid=window]").should("be.visible").as("window");
 
-        cy.contains("Description").next().find(".ace_editor").should("be.visible").click("center").type(`# description header{enter}
+        cy.get("[data-testid=window]").contains("Description").next().find(".ace_editor").should("be.visible").click("center")
+            .type(`# description header{enter}
 
 *Everything* is going according to **plan**.`);
 

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

@@ -241,13 +241,18 @@ describe("Fragment", () => {
                 request.alias = "suggestions";
             }
         });
-        cy.get('[title="Value"]').siblings().eq(0).should("be.visible").type("{selectall}#fragmentResult.");
+        cy.get("[data-testid=window]").find('[title="Value"]').siblings().eq(0).should("be.visible").type("{selectall}#fragmentResult.");
         // We wait for validation result to be sure that red message below the form field will be visible
         cy.wait("@validation")
             .its("response.statusCode")
             .should("eq", 200)
             .then(() => {
-                cy.get("@window").get("[title='Value']").siblings().eq(0).find("[data-testid='form-helper-text']").should("exist");
+                cy.get("[data-testid=window]")
+                    .find("[title='Value']")
+                    .siblings()
+                    .eq(0)
+                    .find("[data-testid='form-helper-text']")
+                    .should("exist");
             });
         cy.wait("@suggestions").its("response.statusCode").should("eq", 200);
         cy.get(".ace_autocomplete").should("be.visible");

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

@@ -44,8 +44,8 @@ describe("Process", () => {
                 .should("be.enabled")
                 .click();
             cy.get("[data-testid=window]").should("be.visible");
-            cy.get('[title="Name"]').siblings().first().click().type("-renamed");
-            cy.get('[title="Description"]').siblings().first().type("RENAMED");
+            cy.get("[data-testid=window]").find('[title="Name"]').siblings().first().click().type("-renamed");
+            cy.get("[data-testid=window]").find('[title="Description"]').siblings().first().type("RENAMED");
             cy.contains(/^apply/i)
                 .should("be.enabled")
                 .click();
@@ -60,7 +60,7 @@ describe("Process", () => {
             cy.contains(/^properties/i)
                 .should("be.enabled")
                 .click();
-            cy.get('[title="Description"]').siblings().first().should("contain", "RENAMED");
+            cy.get("[data-testid=window]").find('[title="Description"]').siblings().first().should("contain", "RENAMED");
         });
 
         it("should allow archive with redirect to list", function () {

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";