mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 05:17:28 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix SQL editor issue (#7236)

Browse source 
Github issue / Community forum post (link here to close automatically):
This commit is contained in:
Michael Kret 2023-09-22 14:17:54 +03:00 committed by GitHub
parent e8e44f6b6e
commit 647fc6c555
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 153 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
cypress/e2e/13-pinning.cy.ts
View file

@ -1,9 +1,9 @@
// import {
// HTTP_REQUEST_NODE_NAME,
// MANUAL_TRIGGER_NODE_NAME,
// PIPEDRIVE_NODE_NAME,
// EDIT_FIELDS_SET_NODE_NAME,
// } from '../constants';
import {
HTTP_REQUEST_NODE_NAME,
MANUAL_TRIGGER_NODE_NAME,
PIPEDRIVE_NODE_NAME,
EDIT_FIELDS_SET_NODE_NAME,
} from '../constants';
import { WorkflowPage, NDV } from '../pages';
const workflowPage = new WorkflowPage();
@ -69,35 +69,33 @@ describe('Data pinning', () => {
ndv.getters.outputTbodyCell(1, 0).should('include.text', 1);
});
//TODO: Update Edit Fields (Set) node to a new version
// it('Should be able to reference paired items in a node located before pinned data', () => {
// workflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
// workflowPage.actions.addNodeToCanvas(HTTP_REQUEST_NODE_NAME, true, true);
// ndv.actions.setPinnedData([{ http: 123 }]);
// ndv.actions.close();
it('Should be able to reference paired items in a node located before pinned data', () => {
workflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
workflowPage.actions.addNodeToCanvas(HTTP_REQUEST_NODE_NAME, true, true);
ndv.actions.setPinnedData([{ http: 123 }]);
ndv.actions.close();
// workflowPage.actions.addNodeToCanvas(PIPEDRIVE_NODE_NAME, true, true);
// ndv.actions.setPinnedData(Array(3).fill({ pipedrive: 123 }));
// ndv.actions.close();
workflowPage.actions.addNodeToCanvas(PIPEDRIVE_NODE_NAME, true, true);
ndv.actions.setPinnedData(Array(3).fill({ pipedrive: 123 }));
ndv.actions.close();
// workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME, true, true);
// setExpressionOnStringValueInSet(`{{ $('${HTTP_REQUEST_NODE_NAME}').item`);
workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME, true, true);
setExpressionOnStringValueInSet(`{{ $('${HTTP_REQUEST_NODE_NAME}').item`);
// const output = '[Object: {"json": {"http": 123}, "pairedItem": {"item": 0}}]';
const output = '[Object: {"json": {"http": 123}, "pairedItem": {"item": 0}}]';
// cy.get('div').contains(output).should('be.visible');
// });
cy.get('div').contains(output).should('be.visible');
});
});
// function setExpressionOnStringValueInSet(expression: string) {
// cy.get('button').contains('Execute node').click();
// cy.get('input[placeholder="Add Value"]').click();
// cy.get('span').contains('String').click();
function setExpressionOnStringValueInSet(expression: string) {
cy.get('button').contains('Execute node').click();
cy.get('.fixed-collection-parameter > :nth-child(2) > .button > span').click();
// ndv.getters.nthParam(3).contains('Expression').invoke('show').click();
ndv.getters.nthParam(4).contains('Expression').invoke('show').click();
// ndv.getters
// .inlineExpressionEditorInput()
// .clear()
// .type(expression, { parseSpecialCharSequences: false });
// }
ndv.getters
.inlineExpressionEditorInput()
.clear()
.type(expression, { parseSpecialCharSequences: false });
}

179
cypress/e2e/16-webhook-node.cy.ts
View file

@ -1,7 +1,7 @@
import { WorkflowPage, NDV, CredentialsModal } from '../pages';
import { v4 as uuid } from 'uuid';
// import { cowBase64 } from '../support/binaryTestFiles';
import { BACKEND_BASE_URL } from '../constants';
import { cowBase64 } from '../support/binaryTestFiles';
import { BACKEND_BASE_URL, EDIT_FIELDS_SET_NODE_NAME } from '../constants';
import { getVisibleSelect } from '../utils';
const workflowPage = new WorkflowPage();
@ -102,39 +102,31 @@ describe('Webhook Trigger node', async () => {
simpleWebhookCall({ method: 'PUT', webhookPath: uuid(), executeNow: true });
});
//TODO: Update Edit Fields (Set) node to a new version
// it('should listen for a GET request and respond with Respond to Webhook node', () => {
// const webhookPath = uuid();
// simpleWebhookCall({
// method: 'GET',
// webhookPath,
// executeNow: false,
// respondWith: 'Respond to Webhook',
// });
it('should listen for a GET request and respond with Respond to Webhook node', () => {
const webhookPath = uuid();
simpleWebhookCall({
method: 'GET',
webhookPath,
executeNow: false,
respondWith: 'Respond to Webhook',
});
// ndv.getters.backToCanvas().click();
ndv.getters.backToCanvas().click();
// workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
// workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
// cy.get('.add-option').click();
// getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click();
// cy.get('.fixed-collection-parameter')
// .getByTestId('parameter-input-name')
// .clear()
// .type('MyValue');
// cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234');
// ndv.getters.backToCanvas().click({ force: true });
addEditFields();
// workflowPage.actions.addNodeToCanvas('Respond to Webhook');
ndv.getters.backToCanvas().click({ force: true });
// workflowPage.actions.executeWorkflow();
// cy.wait(waitForWebhook);
workflowPage.actions.addNodeToCanvas('Respond to Webhook');
// cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => {
// expect(response.status).to.eq(200);
// expect(response.body.MyValue).to.eq(1234);
// });
// });
workflowPage.actions.executeWorkflow();
cy.wait(waitForWebhook);
cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => {
expect(response.status).to.eq(200);
expect(response.body.MyValue).to.eq(1234);
});
});
it('should listen for a GET request and respond custom status code 201', () => {
const webhookPath = uuid();
@ -153,83 +145,64 @@ describe('Webhook Trigger node', async () => {
});
});
//TODO: Update Edit Fields (Set) node to a new version
// it('should listen for a GET request and respond with last node', () => {
// const webhookPath = uuid();
// simpleWebhookCall({
// method: 'GET',
// webhookPath,
// executeNow: false,
// respondWith: 'Last Node',
// });
// ndv.getters.backToCanvas().click();
it('should listen for a GET request and respond with last node', () => {
const webhookPath = uuid();
simpleWebhookCall({
method: 'GET',
webhookPath,
executeNow: false,
respondWith: 'Last Node',
});
ndv.getters.backToCanvas().click();
// workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
// workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
// cy.get('.add-option').click();
// getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click();
// cy.get('.fixed-collection-parameter')
// .getByTestId('parameter-input-name')
// .find('input')
// .clear()
// .type('MyValue');
// cy.get('.fixed-collection-parameter')
// .getByTestId('parameter-input-value')
// .find('input')
// .clear()
// .type('1234');
// ndv.getters.backToCanvas().click({ force: true });
addEditFields();
// workflowPage.actions.executeWorkflow();
// cy.wait(waitForWebhook);
ndv.getters.backToCanvas().click({ force: true });
// cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => {
// expect(response.status).to.eq(200);
// expect(response.body.MyValue).to.eq(1234);
// });
// });
workflowPage.actions.executeWorkflow();
cy.wait(waitForWebhook);
//TODO: Update Edit Fields (Set) node to a new version
// it('should listen for a GET request and respond with last node binary data', () => {
// const webhookPath = uuid();
// simpleWebhookCall({
// method: 'GET',
// webhookPath,
// executeNow: false,
// respondWith: 'Last Node',
// responseData: 'First Entry Binary',
// });
// ndv.getters.backToCanvas().click();
cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => {
expect(response.status).to.eq(200);
expect(response.body.MyValue).to.eq(1234);
});
});
// workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
// workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
// cy.get('.add-option').click();
// getVisibleSelect().find('.el-select-dropdown__item').contains('String').click();
// cy.get('.fixed-collection-parameter').getByTestId('parameter-input-name').clear().type('data');
// cy.get('.fixed-collection-parameter')
// .getByTestId('parameter-input-value')
// .clear()
// .find('input')
// .invoke('val', cowBase64)
// .trigger('blur');
// ndv.getters.backToCanvas().click();
it('should listen for a GET request and respond with last node binary data', () => {
const webhookPath = uuid();
simpleWebhookCall({
method: 'GET',
webhookPath,
executeNow: false,
respondWith: 'Last Node',
responseData: 'First Entry Binary',
});
ndv.getters.backToCanvas().click();
// workflowPage.actions.addNodeToCanvas('Move Binary Data');
// workflowPage.actions.zoomToFit();
workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
cy.get('.fixed-collection-parameter > :nth-child(2) > .button > span').click();
ndv.getters.nthParam(2).type('data');
ndv.getters.nthParam(4).invoke('val', cowBase64).trigger('blur');
// workflowPage.actions.openNode('Move Binary Data');
// cy.getByTestId('parameter-input-mode').click();
// getVisibleSelect().find('.option-headline').contains('JSON to Binary').click();
// ndv.getters.backToCanvas().click();
ndv.getters.backToCanvas().click();
// workflowPage.actions.executeWorkflow();
// cy.wait(waitForWebhook);
workflowPage.actions.addNodeToCanvas('Move Binary Data');
workflowPage.actions.zoomToFit();
// cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => {
// expect(response.status).to.eq(200);
// expect(Object.keys(response.body).includes('data')).to.be.true;
// });
// });
workflowPage.actions.openNode('Move Binary Data');
cy.getByTestId('parameter-input-mode').click();
getVisibleSelect().find('.option-headline').contains('JSON to Binary').click();
ndv.getters.backToCanvas().click();
workflowPage.actions.executeWorkflow();
cy.wait(waitForWebhook);
cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => {
expect(response.status).to.eq(200);
expect(Object.keys(response.body).includes('data')).to.be.true;
});
});
it('should listen for a GET request and respond with an empty body', () => {
const webhookPath = uuid();
@ -332,3 +305,13 @@ describe('Webhook Trigger node', async () => {
});
});
});
const addEditFields = () => {
workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
cy.get('.fixed-collection-parameter > :nth-child(2) > .button > span').click();
ndv.getters.nthParam(2).type('MyValue');
ndv.getters.nthParam(3).click();
cy.get('div').contains('Number').click();
ndv.getters.nthParam(4).type('1234');
};

26
cypress/e2e/29-sql-editor.cy.ts Normal file
View file

@ -0,0 +1,26 @@
import { WorkflowPage, NDV } from '../pages';
const workflowPage = new WorkflowPage();
const ndv = new NDV();
describe('SQL editors', () => {
beforeEach(() => {
workflowPage.actions.visit();
});
it('should preserve changes when opening-closing Postgres node', () => {
workflowPage.actions.addInitialNodeToCanvas('Manual');
workflowPage.actions.addNodeToCanvas('Postgres');
workflowPage.actions.openNode('Postgres');
ndv.getters.parameterInput('operation').click();
cy.get('div').contains('Execute Query').click();
cy.get('div.cm-activeLine').type('SELECT * FROM `testTable`');
ndv.actions.close();
workflowPage.actions.openNode('Postgres');
cy.get('div.cm-activeLine').type('{end} LIMIT 10');
ndv.actions.close();
workflowPage.actions.openNode('Postgres');
cy.get('div.cm-activeLine').contains('SELECT * FROM `testTable` LIMIT 10');
});
});

12
packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View file

@ -320,7 +320,7 @@ export default defineComponent({
...readOnlyEditorExtensions,
EditorState.readOnly.of(isReadOnly),
EditorView.editable.of(!isReadOnly),
codeNodeEditorTheme({ isReadOnly }),
codeNodeEditorTheme({ isReadOnly, customMinHeight: this.rows }),
];
if (!isReadOnly) {
@ -354,16 +354,8 @@ export default defineComponent({
const [languageSupport, ...otherExtensions] = this.languageExtensions;
extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
let doc = this.modelValue ?? this.placeholder;
const lines = doc.split('\n');
if (lines.length < this.rows) {
doc += '\n'.repeat(this.rows - lines.length);
}
const state = EditorState.create({
doc,
doc: this.modelValue ?? this.placeholder,
extensions,
});

11
packages/editor-ui/src/components/CodeNodeEditor/theme.ts
View file

@ -32,9 +32,14 @@ const cssStyleDeclaration = getComputedStyle(document.documentElement);
interface ThemeSettings {
isReadOnly?: boolean;
customMaxHeight?: string;
customMinHeight?: number;
}
export const codeNodeEditorTheme = ({ isReadOnly, customMaxHeight }: ThemeSettings) => [
export const codeNodeEditorTheme = ({
isReadOnly,
customMaxHeight,
customMinHeight,
}: ThemeSettings) => [
EditorView.theme({
'&': {
'font-size': BASE_STYLING.fontSize,
@ -82,7 +87,9 @@ export const codeNodeEditorTheme = ({ isReadOnly, customMaxHeight }: ThemeSettin
overflow: 'auto',
maxHeight: customMaxHeight ?? '100%',
...(isReadOnly ? {} : { minHeight: '1.3em' }),
...(isReadOnly
? {}
: { minHeight: customMinHeight ? `${Number(customMinHeight) * 1.3}em` : '10em' }),
},
'.cm-diagnosticAction': {
backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor,

2
packages/editor-ui/src/components/ParameterInput.vue
View file

@ -120,7 +120,7 @@
:dialect="getArgument('sqlDialect')"
:isReadOnly="isReadOnly"
:rows="getArgument('rows')"
@valueChanged="valueChangedDebounced"
@update:modelValue="valueChangedDebounced"
/>
<code-node-editor

16
packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
View file

@ -141,7 +141,11 @@ export default defineComponent({
const extensions = [
sqlWithN8nLanguageSupport(),
expressionInputHandler(),
codeNodeEditorTheme({ isReadOnly: this.isReadOnly, customMaxHeight: '350px' }),
codeNodeEditorTheme({
isReadOnly: this.isReadOnly,
customMaxHeight: '350px',
customMinHeight: this.rows,
}),
lineNumbers(),
EditorView.lineWrapping,
EditorState.readOnly.of(this.isReadOnly),
@ -188,15 +192,7 @@ export default defineComponent({
mounted() {
if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
let doc = this.modelValue;
const lines = doc.split('\n');
if (lines.length < this.rows) {
doc += '\n'.repeat(this.rows - lines.length);
}
const state = EditorState.create({ doc, extensions: this.extensions });
const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
this.editor = new EditorView({ parent: this.$refs.sqlEditor as HTMLDivElement, state });
this.editorState = this.editor.state;