Skip to content

Commit

Permalink
fix(editor): Prevent expression editor focus being lost when user is …
Browse files Browse the repository at this point in the history 
…selecting (#9525)
  • Loading branch information
@elsmr
elsmr authored May 29, 2024
1 parent 3be7bb8 commit 6698179
Show file tree
Hide file tree
Showing 6 changed files with 238 additions and 176 deletions.
28 changes: 14 additions & 14 deletions cypress/e2e/11-inline-expression-editor.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,33 @@ describe('Inline expression editor', () => {

it('should resolve primitive resolvables', () => {
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('1 + 2');
WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^3$/);
WorkflowPage.getters.inlineExpressionEditorInput().clear();

WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('"ab"');
WorkflowPage.getters.inlineExpressionEditorInput().type('{rightArrow}+');
WorkflowPage.getters.inlineExpressionEditorInput().type('"cd"');
WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^abcd$/);
WorkflowPage.getters.inlineExpressionEditorInput().clear();

WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('true && false');
WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^false$/);
});

it('should resolve object resolvables', () => {
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters
.inlineExpressionEditorInput()
.type('{ a: 1 }', { parseSpecialCharSequences: false });
WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^\[Object: \{"a": 1\}\]$/);
WorkflowPage.getters.inlineExpressionEditorInput().clear();

WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters
.inlineExpressionEditorInput()
.type('{ a: 1 }.a', { parseSpecialCharSequences: false });
Expand All @@ -55,13 +55,13 @@ describe('Inline expression editor', () => {

it('should resolve array resolvables', () => {
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]');
WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^\[Array: \[1,2,3\]\]$/);

WorkflowPage.getters.inlineExpressionEditorInput().clear();

WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]');
WorkflowPage.getters.inlineExpressionEditorInput().type('[0]');
WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^1$/);
Expand All @@ -81,7 +81,7 @@ describe('Inline expression editor', () => {

it('should resolve $parameter[]', () => {
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
// Resolving $parameter is slow, especially on CI runner
WorkflowPage.getters.inlineExpressionEditorInput().type('$parameter["operation"]');
WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'getAll');
Expand All @@ -90,19 +90,19 @@ describe('Inline expression editor', () => {
it('should resolve input: $json,$input,$(nodeName)', () => {
// Previous nodes have not run, input is empty
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('$json.myStr');
WorkflowPage.getters
.inlineExpressionEditorOutput()
.should('have.text', '[Execute previous nodes for preview]');
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('$input.item.json.myStr');
WorkflowPage.getters
.inlineExpressionEditorOutput()
.should('have.text', '[Execute previous nodes for preview]');
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters
.inlineExpressionEditorInput()
.type("$('Schedule Trigger').item.json.myStr");
Expand All @@ -118,15 +118,15 @@ describe('Inline expression editor', () => {

// Previous nodes have run, input can be resolved
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('$json.myStr');
WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'Monday');
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().type('$input.item.json.myStr');
WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'Monday');
WorkflowPage.getters.inlineExpressionEditorInput().clear();
WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
WorkflowPage.getters.inlineExpressionEditorInput().click().type('{{');
WorkflowPage.getters
.inlineExpressionEditorInput()
.type("$('Schedule Trigger').item.json.myStr");
Expand Down
32 changes: 20 additions & 12 deletions cypress/e2e/9-expression-editor-modal.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,42 +20,44 @@ describe('Expression editor modal', () => {

it('should resolve primitive resolvables', () => {
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{ 1 + 2');
WorkflowPage.getters.expressionModalInput().click().type('{{ 1 + 2');
WorkflowPage.getters.expressionModalOutput().contains(/^3$/);
WorkflowPage.getters.expressionModalInput().clear();

WorkflowPage.getters.expressionModalInput().type('{{ "ab" + "cd"');
WorkflowPage.getters.expressionModalInput().click().type('{{ "ab" + "cd"');
WorkflowPage.getters.expressionModalOutput().contains(/^abcd$/);

WorkflowPage.getters.expressionModalInput().clear();

WorkflowPage.getters.expressionModalInput().type('{{ true && false');
WorkflowPage.getters.expressionModalInput().click().type('{{ true && false');
WorkflowPage.getters.expressionModalOutput().contains(/^false$/);
});

it('should resolve object resolvables', () => {
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters
.expressionModalInput()
.click()
.type('{{ { a : 1 }', { parseSpecialCharSequences: false });
WorkflowPage.getters.expressionModalOutput().contains(/^\[Object: \{"a": 1\}\]$/);

WorkflowPage.getters.expressionModalInput().clear();

WorkflowPage.getters
.expressionModalInput()
.click()
.type('{{ { a : 1 }.a', { parseSpecialCharSequences: false });
WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
});

it('should resolve array resolvables', () => {
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{ [1, 2, 3]');
WorkflowPage.getters.expressionModalInput().click().type('{{ [1, 2, 3]');
WorkflowPage.getters.expressionModalOutput().contains(/^\[Array: \[1,2,3\]\]$/);

WorkflowPage.getters.expressionModalInput().clear();

WorkflowPage.getters.expressionModalInput().type('{{ [1, 2, 3][0]');
WorkflowPage.getters.expressionModalInput().click().type('{{ [1, 2, 3][0]');
WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
});
});
Expand All @@ -73,24 +75,27 @@ describe('Expression editor modal', () => {

it('should resolve $parameter[]', () => {
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{ $parameter["operation"]');
WorkflowPage.getters.expressionModalInput().click().type('{{ $parameter["operation"]');
WorkflowPage.getters.expressionModalOutput().should('have.text', 'getAll');
});

it('should resolve input: $json,$input,$(nodeName)', () => {
// Previous nodes have not run, input is empty
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{ $json.myStr');
WorkflowPage.getters.expressionModalInput().click().type('{{ $json.myStr');
WorkflowPage.getters
.expressionModalOutput()
.should('have.text', '[Execute previous nodes for preview]');
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{ $input.item.json.myStr');
WorkflowPage.getters.expressionModalInput().click().type('{{ $input.item.json.myStr');
WorkflowPage.getters
.expressionModalOutput()
.should('have.text', '[Execute previous nodes for preview]');
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type("{{ $('Schedule Trigger').item.json.myStr");
WorkflowPage.getters
.expressionModalInput()
.click()
.type("{{ $('Schedule Trigger').item.json.myStr");
WorkflowPage.getters
.expressionModalOutput()
.should('have.text', '[Execute previous nodes for preview]');
Expand All @@ -104,13 +109,16 @@ describe('Expression editor modal', () => {

// Previous nodes have run, input can be resolved
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{ $json.myStr');
WorkflowPage.getters.expressionModalInput().click().type('{{ $json.myStr');
WorkflowPage.getters.expressionModalOutput().should('have.text', 'Monday');
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type('{{ $input.item.json.myStr');
WorkflowPage.getters.expressionModalInput().click().type('{{ $input.item.json.myStr');
WorkflowPage.getters.expressionModalOutput().should('have.text', 'Monday');
WorkflowPage.getters.expressionModalInput().clear();
WorkflowPage.getters.expressionModalInput().type("{{ $('Schedule Trigger').item.json.myStr");
WorkflowPage.getters
.expressionModalInput()
.click()
.type("{{ $('Schedule Trigger').item.json.myStr");
WorkflowPage.getters.expressionModalOutput().should('have.text', 'Monday');
});
});
Expand Down
16 changes: 8 additions & 8 deletions packages/editor-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@
"test:dev": "vitest"
},
"dependencies": {
"@codemirror/autocomplete": "^6.11.1",
"@codemirror/commands": "^6.3.2",
"@codemirror/lang-javascript": "^6.2.1",
"@codemirror/autocomplete": "^6.16.0",
"@codemirror/commands": "^6.5.0",
"@codemirror/lang-javascript": "^6.2.2",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-python": "^6.1.3",
"@codemirror/language": "^6.9.3",
"@codemirror/lint": "^6.4.2",
"@codemirror/state": "^6.3.3",
"@codemirror/view": "^6.22.3",
"@codemirror/lang-python": "^6.1.6",
"@codemirror/language": "^6.10.1",
"@codemirror/lint": "^6.8.0",
"@codemirror/state": "^6.4.1",
"@codemirror/view": "^6.26.3",
"@fontsource/open-sans": "^4.5.0",
"@jsplumb/browser-ui": "^5.13.2",
"@jsplumb/common": "^5.13.2",
Expand Down
Loading

0 comments on commit 6698179

Please sign in to comment.