mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Prevent NDV schema view pagination (#5844)

Browse source 
* fix(editor): Prevent NDV schema view pagination

* Linting fixes
This commit is contained in:
OlegIvaniv 2023-03-31 08:31:19 +02:00 committed by GitHub
parent b7a20dd3a2
commit 1eba4788f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 615 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
cypress/e2e/5-ndv.cy.ts
View file

@ -92,13 +92,15 @@ describe('NDV', () => {
describe('test output schema view', () => {
const schemaKeys = ['id', 'name', 'email', 'notes', 'country', 'created', 'objectValue', 'prop1', 'prop2'];
beforeEach(() => {
function setupSchemaWorkflow() {
cy.createFixtureWorkflow('Test_workflow_schema_test.json', `NDV test schema view ${uuid()}`);
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.actions.execute();
});
}
it('should switch to output schema view and validate it', () => {
setupSchemaWorkflow()
ndv.getters.outputDisplayMode().children().should('have.length', 3);
ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Table');
ndv.getters.outputDisplayMode().contains('Schema').click();
@ -109,11 +111,13 @@ describe('NDV', () => {
});
});
it('should preserve schema view after execution', () => {
setupSchemaWorkflow()
ndv.getters.outputDisplayMode().contains('Schema').click();
ndv.actions.execute();
ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Schema');
})
it('should collapse and expand nested schema object', () => {
setupSchemaWorkflow()
const expandedObjectProps = ['prop1', 'prop2'];;
const getObjectValueItem = () => ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').filter(':contains("objectValue")');
ndv.getters.outputDisplayMode().contains('Schema').click();
@ -126,5 +130,29 @@ describe('NDV', () => {
ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('not.be.visible');
});
})
it('should not display pagination for schema', () => {
setupSchemaWorkflow()
ndv.getters.backToCanvas().click();
workflowPage.getters.canvasNodeByName('Set').click();
workflowPage.actions.addNodeToCanvas('Customer Datastore (n8n training)', true, true, 'Get All People');
ndv.actions.execute();
ndv.getters.outputPanel().contains('25 items').should('exist');
ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
ndv.getters.outputDisplayMode().contains('Schema').click();
ndv.getters.outputPanel().find('[class*=_pagination]').should('not.exist');
ndv.getters.outputDisplayMode().contains('JSON').click();
ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
})
it('should display large schema', () => {
cy.createFixtureWorkflow('Test_workflow_schema_test_pinned_data.json', `NDV test schema view ${uuid()}`);
workflowPage.actions.zoomToFit();
workflowPage.actions.openNode('Set');
ndv.getters.outputPanel().contains('20 items').should('exist');
ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
ndv.getters.outputDisplayMode().contains('Schema').click();
ndv.getters.outputPanel().find('[class*=_pagination]').should('not.exist');
ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item] [data-test-id=run-data-schema-item]').should('have.length', 20);
})
})
});

574
cypress/fixtures/Test_workflow_schema_test_pinned_data.json Normal file
View file

@ -0,0 +1,574 @@
{
"name": "My workflow",
"nodes": [
{
"parameters": {
"operation": "getAllPeople",
"limit": 10
},
"id": "441afcbf-a678-4463-bc89-7e0b6693af5c",
"name": "Customer Datastore (n8n training)",
"type": "n8n-nodes-base.n8nTrainingCustomerDatastore",
"typeVersion": 1,
"position": [
720,
440
]
},
{
"parameters": {
"values": {
"number": [
{
"name": "objectValue.prop1",
"value": 123
}
],
"string": [
{
"name": "objectValue.prop2",
"value": "someText"
}
]
},
"options": {
"dotNotation": true
}
},
"id": "44094a05-b3b7-49bf-bfbf-a711e6ba45d8",
"name": "Set",
"type": "n8n-nodes-base.set",
"typeVersion": 1,
"position": [
1080,
440
]
},
{
"parameters": {},
"id": "3dc7cf26-ff25-4437-b9fd-0e8b127ebec9",
"name": "When clicking \"Execute Workflow\"",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
500,
440
]
}
],
"pinData": {
"Set": [
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
},
{
"json": {
"key0": 0,
"key1": 1,
"key2": 2,
"key3": 3,
"key4": 4,
"key5": 5,
"key6": 6,
"key7": 7,
"key8": 8,
"key9": 9,
"key10": 10,
"key11": 11,
"key12": 12,
"key13": 13,
"key14": 14,
"key15": 15,
"key16": 16,
"key17": 17,
"key18": 18,
"key19": 19
}
}
]
},
"connections": {
"Customer Datastore (n8n training)": {
"main": [
[
{
"node": "Set",
"type": "main",
"index": 0
}
]
]
},
"When clicking \"Execute Workflow\"": {
"main": [
[
{
"node": "Customer Datastore (n8n training)",
"type": "main",
"index": 0
}
]
]
}
},
"active": false,
"settings": {},
"versionId": "",
"meta": {
"instanceId": "363581be2c2581d1b11e189456a090887e137f8393a4b5cb85641b1ee4fae479"
},
"tags": []
}

2
cypress/pages/ndv.ts
View file

@ -20,7 +20,7 @@ export class NDV extends BasePage {
editPinnedDataButton: () => cy.getByTestId('ndv-edit-pinned-data'),
pinnedDataEditor: () => this.getters.outputPanel().find('.monaco-editor[role=code]'),
runDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
savePinnedDataButton: () => this.getters.runDataPaneHeader().find('button').contains('Save'),
savePinnedDataButton: () => this.getters.runDataPaneHeader().find('button').filter(':visible').contains('Save'),
outputTableRows: () => this.getters.outputDataContainer().find('table tr'),
outputTableHeaders: () => this.getters.outputDataContainer().find('table thead th'),
outputTableRow: (row: number) => this.getters.outputTableRows().eq(row),

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

@ -322,7 +322,7 @@
/>
<run-data-schema
v-else-if="hasNodeRun && displayMode === 'schema'"
v-else-if="hasNodeRun && isSchemaView"
:data="jsonData"
:mappingEnabled="mappingEnabled"
:distanceFromActive="distanceFromActive"
@ -422,7 +422,7 @@
</div>
<div
:class="$style.pagination"
v-if="hasNodeRun && !hasRunError && dataCount > pageSize"
v-if="hasNodeRun && !hasRunError && dataCount > pageSize && !isSchemaView"
v-show="!editMode.enabled"
>
<el-pagination
@ -635,6 +635,9 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
}
return null;
},
isSchemaView(): boolean {
return this.displayMode === 'schema';
},
isTriggerNode(): boolean {
return this.nodeTypesStore.isTriggerNode(this.node.type);
},
@ -789,6 +792,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
];
}
// We don't want to paginate the schema view
if (this.isSchemaView) {
return inputData;
}
const offset = this.pageSize * (this.currentPage - 1);
inputData = inputData.slice(offset, offset + this.pageSize);