feat(editor): Implement new banners framework (#6603)

*  Implemented new grid row - banners
*  Fixing node creator and executions sidebar position after layout update
* 💄 Added configurable round corners to the Callout component
*  Fixing mouse position detection and main tab bar position
*  Implemented basic banner component structure
*  Implemented banner state and dismiss logic
*  Fixing grid layout. Updating banners height state dynamically
*  Fix zoom to fit position, mouse position in demo mode and callout vertical alignment
*  Implementing proper trial banners logic
* 💄 Only showing execution usage data once the sidebar is fully expanded
*  Implemented permanent/temporary dismiss logic for v1 flag
*  Minor refactoring of banner logic
*  Updating permanent dismiss logic to work with all banners
* 👕 Fixing linting errors
* ✔️ Updating Callout component test snapshots
* 💄 Tweaking zoom to fit position
* ✔️ Updating testing endpoints to use new store data
*  Added banners unit tests
* ✔️ Fixing failing banner tests
*  Added more banner tests
*  Updating banners dimensions on resize, removing leftover code
* ✔️ Removing store import from API file
* 👕 Fixing lint errors
*  Updating migration files
*  Using query parameters in migrations
* 👌 Addressing design review feedback
*  Updating upgrade plan button click
*  Updating the migrations syntax
* 👌 Updating permanent banner dismiss endpoint and back-end logic
* 👌 Refactoring trial banner component and ui store
* 👌 Addressing more points from code review
* 👌 Moving DOM logic from the store
* ✔️ Updated callout component snapshots
* 👌 Updating mysql migration file
* ✔️ Updating e2e test canvas coordinates after setting it's position to absolute
* 👌 Addressing back-end review feedback
* 👌 Improving typing around banners
* 👕 Fixing lint errors
This commit is contained in:
Milorad FIlipović
2023-07-14 15:36:17 +02:00
committed by GitHub
parent ff0759530d
commit 4240e76253
47 changed files with 637 additions and 221 deletions

View File

@@ -121,17 +121,17 @@ describe('Undo/Redo', () => {
WorkflowPage.getters
.canvasNodes()
.last()
.should('have.attr', 'style', 'left: 740px; top: 360px;');
.should('have.attr', 'style', 'left: 740px; top: 320px;');
WorkflowPage.actions.hitUndo();
WorkflowPage.getters
.canvasNodes()
.last()
.should('have.attr', 'style', 'left: 640px; top: 260px;');
.should('have.attr', 'style', 'left: 640px; top: 220px;');
WorkflowPage.actions.hitRedo();
WorkflowPage.getters
.canvasNodes()
.last()
.should('have.attr', 'style', 'left: 740px; top: 360px;');
.should('have.attr', 'style', 'left: 740px; top: 320px;');
});
it('should undo/redo deleting a connection by pressing delete button', () => {
@@ -281,7 +281,7 @@ describe('Undo/Redo', () => {
WorkflowPage.getters
.canvasNodes()
.first()
.should('have.attr', 'style', 'left: 420px; top: 260px;');
.should('have.attr', 'style', 'left: 420px; top: 220px;');
// Third undo: Should enable last node
WorkflowPage.actions.hitUndo();
WorkflowPage.getters.disabledNodes().should('have.length', 0);
@@ -294,7 +294,7 @@ describe('Undo/Redo', () => {
WorkflowPage.getters
.canvasNodes()
.first()
.should('have.attr', 'style', 'left: 540px; top: 400px;');
.should('have.attr', 'style', 'left: 540px; top: 360px;');
// Third redo: Should delete the Set node
WorkflowPage.actions.hitRedo();
WorkflowPage.getters.canvasNodes().should('have.length', 3);

View File

@@ -99,7 +99,7 @@ describe('Canvas Actions', () => {
WorkflowPage.getters
.canvasNodes()
.last()
.should('have.attr', 'style', 'left: 860px; top: 260px;');
.should('have.attr', 'style', 'left: 860px; top: 220px;');
});
it('should delete connections by pressing the delete button', () => {

View File

@@ -162,7 +162,7 @@ describe('Canvas Node Manipulation and Navigation', () => {
WorkflowPage.getters
.canvasNodes()
.last()
.should('have.attr', 'style', 'left: 740px; top: 360px;');
.should('have.attr', 'style', 'left: 740px; top: 320px;');
});
it('should zoom in', () => {

View File

@@ -90,66 +90,66 @@ describe('Canvas Actions', () => {
moveSticky({ left: 600, top: 200 });
cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]);
checkStickiesStyle(140, 510, 160, 150);
checkStickiesStyle(100, 510, 160, 150);
cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]);
checkStickiesStyle(140, 466, 160, 194);
checkStickiesStyle(100, 466, 160, 194);
});
it('expands/shrinks sticky from the top edge', () => {
workflowPage.actions.addSticky();
cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button
checkStickiesStyle(360, 620, 160, 240);
checkStickiesStyle(300, 620, 160, 240);
cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]);
checkStickiesStyle(440, 620, 80, 240);
checkStickiesStyle(380, 620, 80, 240);
cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]);
checkStickiesStyle(384, 620, 136, 240);
checkStickiesStyle(324, 620, 136, 240);
});
it('expands/shrinks sticky from the bottom edge', () => {
workflowPage.actions.addSticky();
cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button
checkStickiesStyle(360, 620, 160, 240);
checkStickiesStyle(300, 620, 160, 240);
cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]);
checkStickiesStyle(360, 620, 254, 240);
checkStickiesStyle(300, 620, 254, 240);
cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]);
checkStickiesStyle(360, 620, 198, 240);
checkStickiesStyle(300, 620, 198, 240);
});
it('expands/shrinks sticky from the bottom right edge', () => {
workflowPage.actions.addSticky();
cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button
checkStickiesStyle(160, 420, 160, 240);
checkStickiesStyle(100, 420, 160, 240);
cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]);
checkStickiesStyle(160, 420, 254, 346);
checkStickiesStyle(100, 420, 254, 346);
cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]);
checkStickiesStyle(160, 420, 198, 302);
checkStickiesStyle(100, 420, 198, 302);
});
it('expands/shrinks sticky from the top right edge', () => {
addDefaultSticky();
cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]);
checkStickiesStyle(420, 400, 80, 346);
checkStickiesStyle(360, 400, 80, 346);
cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]);
checkStickiesStyle(364, 400, 136, 302);
checkStickiesStyle(304, 400, 136, 302);
});
it('expands/shrinks sticky from the top left edge, and reach min height/width', () => {
addDefaultSticky();
cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]);
checkStickiesStyle(420, 490, 80, 150);
checkStickiesStyle(360, 490, 80, 150);
cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]);
checkStickiesStyle(264, 346, 236, 294);
checkStickiesStyle(204, 346, 236, 294);
});
it('sets sticky behind node', () => {
@@ -157,7 +157,7 @@ describe('Canvas Actions', () => {
addDefaultSticky();
cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]);
checkStickiesStyle(184, 256, 316, 384, -121);
checkStickiesStyle(124, 256, 316, 384, -121);
workflowPage.getters.canvasNodes().eq(0)
.should(($el) => {
@@ -235,7 +235,7 @@ function addDefaultSticky() {
}
function stickyShouldBePositionedCorrectly(position: Position) {
const yOffset = -60;
const yOffset = -100;
const xOffset = -180;
workflowPage.getters.stickies()
.should(($el) => {

View File

@@ -101,7 +101,7 @@ Cypress.Commands.add('drag', (selector, pos, options) => {
const originalLocation = Cypress.$(selector)[index].getBoundingClientRect();
element.trigger('mousedown');
element.trigger('mousedown', { force: true });
element.trigger('mousemove', {
which: 1,
pageX: options?.abs ? xDiff : originalLocation.right + xDiff,