Skip to content

Commit

Permalink
[Nu-1780] Add advanced search options (#6700)
Browse files Browse the repository at this point in the history
* [Nu-1780] Expand search options

---------

Co-authored-by: Piotr Rudnicki <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DeamonDev <[email protected]>
  • Loading branch information
4 people authored Sep 13, 2024
1 parent d54c0d3 commit def9d3b
Show file tree
Hide file tree
Showing 20 changed files with 538 additions and 49 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 13 additions & 13 deletions designer/client/cypress/e2e/autoScreenshotChangeDocs.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand All @@ -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();
});

Expand All @@ -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();
});

Expand All @@ -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();
});

Expand All @@ -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();
});

Expand All @@ -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();
});

Expand All @@ -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();
});

Expand All @@ -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();
});

Expand Down
3 changes: 2 additions & 1 deletion designer/client/cypress/e2e/description.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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**.`);

Expand Down
9 changes: 7 additions & 2 deletions designer/client/cypress/e2e/fragment.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
6 changes: 3 additions & 3 deletions designer/client/cypress/e2e/process.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 () {
Expand Down
4 changes: 2 additions & 2 deletions designer/client/cypress/e2e/process2.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand All @@ -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")
Expand Down
144 changes: 144 additions & 0 deletions designer/client/cypress/e2e/search.cy.ts
Original file line number Diff line number Diff line change
@@ -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", "");
});
});
1 change: 1 addition & 0 deletions designer/client/src/assets/img/advanced-search.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions designer/client/src/components/sidePanels/SearchLabel.tsx
Original file line number Diff line number Diff line change
@@ -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} />;
};
19 changes: 19 additions & 0 deletions designer/client/src/components/sidePanels/SearchLabeledInput.tsx
Original file line number Diff line number Diff line change
@@ -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";
Loading

0 comments on commit def9d3b

Please sign in to comment.