new top/bottom place for buttons only toolbars (#7750)

* removed unnecessary dependency

* unused code removed

* top small toolbar

* layout

* layout

* externalLayerWrapper prop

* fixed imports after rebase

* fixed imports after rebase

* rebase fixed

* user-settings

add reset button to "user-settings-panel".
revert "debug.userSettingsVisible" on reset.

* top toolbar layout

* Updated snapshots (#7753)

Co-authored-by: JulianWielga <[email protected]>

* Updated snapshots (#7756)

Co-authored-by: JulianWielga <[email protected]>

* fixed sql alias usage highlight and test

* Updated snapshots (#7772)

Co-authored-by: JulianWielga <[email protected]>

* Updated snapshots (#7775)

Co-authored-by: JulianWielga <[email protected]>

* Updated snapshots (#7777)

Co-authored-by: JulianWielga <[email protected]>

* test fixed

* Updated snapshots (#7778)

Co-authored-by: JulianWielga <[email protected]>

* Updated snapshots (#7790)

Co-authored-by: JulianWielga <[email protected]>

* Updated snapshots (#7791)

Co-authored-by: JulianWielga <[email protected]>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: JulianWielga <[email protected]>

Author: JulianWielga

designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Compare should fill window #0.png

@@ -7,29 +7,27 @@ describe("Sql editor", () => {
     });
 
     after(() => {
-        cy.deleteAllTestProcesses({ filter: seed });
+        // cy.deleteAllTestProcesses({ filter: seed });
     });
 
     it("should display colorfull sql code", () => {
         cy.visitNewProcess(seed, "withSqlEditor");
-        cy.layoutScenario();
         cy.get("[model-id=sql-source]").should("be.visible").trigger("dblclick");
         cy.get("[data-testid=window]").should("be.visible");
+        cy.get("#ace-editor").should("have.class", "tokenizer-working");
         cy.get("#ace-editor").should("not.have.class", "tokenizer-working");
-        cy.wait(1000);
         cy.get("#ace-editor").parent().matchImage({ maxDiffThreshold });
         cy.get("[data-testid=window]").matchImage();
     });
 
     it("should display advanced colors", () => {
         cy.viewport("macbook-15");
         cy.visitNewProcess(seed, "withSqlEditor2");
-        cy.layoutScenario();
 
         cy.wrap(["sql-source", "sql-source2", "sql-source3"]).each((name) => {
             cy.get(`[model-id=${name}]`).should("be.visible").trigger("dblclick");
+            cy.get("#ace-editor").should("have.class", "tokenizer-working");
             cy.get("#ace-editor").should("not.have.class", "tokenizer-working");
-            cy.wait(1000);
             cy.get("#ace-editor").parent().matchImage({ maxDiffThreshold });
             cy.get("[data-testid=window]")
                 .contains(/^cancel$/i)

designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Compare should fill window #2.png

@@ -38,14 +38,9 @@ describe("Expression suggester", () => {
         cy.visitNewProcess(seed, "variables");
         cy.get("[model-id=kafka-string]").trigger("dblclick");
         cy.get("[data-testid=window]").as("modal");
-        cy.intercept("POST", "/api/nodes/*/validation", (request) => {
-            if (request.body.nodeData.ref?.parameters[1]?.expression.expression == "#DATE.parseDat") {
-                request.alias = "validation";
-            }
-        });
         cy.get("[title=Value]").next().find(".ace_editor").click().type("{selectall}#DATE.parseDat");
         // 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);
+        cy.contains("Failed to parse expression").should("exist");
         cy.get(".ace_autocomplete").should("be.visible");
         cy.get("[data-testid=window]").matchImage();
         cy.get(".ace_editor .ace_tooltip").matchImage();