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

feat(editor): Add support for schema view in the NDV output (#5688)

Browse source 
* feat(editor): Add support for schema view in the NDV output

* Make intercepts waiting optional in waitForLoad method

* Update RunDataSchema snapshots

* Do not reset output panel view on execution, properly key run RunDataSchemaItem to make sure they are unique across panels

* Update snapshot tests

* Make adding of schema view button option more readable
This commit is contained in:
OlegIvaniv 2023-03-16 10:19:12 +01:00 committed by GitHub
parent 58232bec61
commit 541850f95f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 202 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -89,4 +89,42 @@ describe('NDV', () => {
cy.get('[class*=hasIssues]').should('have.length', 1);
});
});
describe('test output schema view', () => {
const schemaKeys = ['id', 'name', 'email', 'notes', 'country', 'created', 'objectValue', 'prop1', 'prop2'];
beforeEach(() => {
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', () => {
ndv.getters.outputDisplayMode().children().should('have.length', 3);
ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Table');
ndv.getters.outputDisplayMode().contains('Schema').click();
ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Schema');
schemaKeys.forEach((key) => {
ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('exist');
});
});
it('should preserve schema view after execution', () => {
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', () => {
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();
expandedObjectProps.forEach((key) => {
ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('be.visible');
});
getObjectValueItem().find('label').click();
expandedObjectProps.forEach((key) => {
ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('not.be.visible');
});
})
})
});

2
cypress/e2e/7-workflow-actions.cy.ts
View file

@ -94,6 +94,7 @@ describe('Workflow Actions', () => {
cy.get('.el-message-box').should('be.visible');
cy.get('.el-message-box').find('input').type(IMPORT_WORKFLOW_URL);
cy.get('body').type('{enter}');
cy.waitForLoad(false)
WorkflowPage.actions.zoomToFit();
WorkflowPage.getters.canvasNodes().should('have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);
@ -103,6 +104,7 @@ describe('Workflow Actions', () => {
WorkflowPage.getters
.workflowImportInput()
.selectFile('cypress/fixtures/Test_workflow-actions_paste-data.json', { force: true });
cy.waitForLoad(false)
WorkflowPage.actions.zoomToFit();
WorkflowPage.getters.canvasNodes().should('have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1);

92
cypress/fixtures/Test_workflow_schema_test.json Normal file
View file

@ -0,0 +1,92 @@
{
"name": "My workflow 8",
"nodes": [
{
"parameters": {
"operation": "getAllPeople",
"limit": 10
},
"id": "39cd80ce-5a8f-4339-b3d5-c4af969dd330",
"name": "Customer Datastore (n8n training)",
"type": "n8n-nodes-base.n8nTrainingCustomerDatastore",
"typeVersion": 1,
"position": [
940,
680
]
},
{
"parameters": {
"values": {
"number": [
{
"name": "objectValue.prop1",
"value": 123
}
],
"string": [
{
"name": "objectValue.prop2",
"value": "someText"
}
]
},
"options": {
"dotNotation": true
}
},
"id": "6e4490f6-ba95-4400-beec-2caefdd4895a",
"name": "Set",
"type": "n8n-nodes-base.set",
"typeVersion": 1,
"position": [
1300,
680
]
},
{
"parameters": {},
"id": "58512a93-dabf-4584-817f-27c608c1bdd5",
"name": "When clicking \"Execute Workflow\"",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
720,
680
]
}
],
"pinData": {},
"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": "4a4f292a-92be-427c-848a-9582527f5ed3",
"id": "8",
"meta": {
"instanceId": "032eceae7493054b723340499be69ecbf4cbe28a7ec6df676b759000750b968d"
},
"tags": []
}

5
cypress/pages/ndv.ts
View file

@ -13,10 +13,9 @@ export class NDV extends BasePage {
outputPanel: () => cy.getByTestId('output-panel'),
executingLoader: () => cy.getByTestId('ndv-executing'),
inputDataContainer: () => this.getters.inputPanel().findChildByTestId('ndv-data-container'),
inputDisplayMode: () => this.getters.inputPanel().getByTestId('ndv-run-data-display-mode'),
inputDisplayMode: () => this.getters.inputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
outputDataContainer: () => this.getters.outputPanel().findChildByTestId('ndv-data-container'),
outputDisplayMode: () => this.getters.outputPanel().getByTestId('ndv-run-data-display-mode'),
digital: () => cy.getByTestId('ndv-run-data-display-mode'),
outputDisplayMode: () => this.getters.outputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
pinDataButton: () => cy.getByTestId('ndv-pin-data'),
editPinnedDataButton: () => cy.getByTestId('ndv-edit-pinned-data'),
pinnedDataEditor: () => this.getters.outputPanel().find('.monaco-editor[role=code]'),

8
cypress/support/commands.ts
View file

@ -39,6 +39,8 @@ Cypress.Commands.add('createFixtureWorkflow', (fixtureKey, workflowName) => {
workflowPage.getters
.workflowImportInput()
.selectFile(`cypress/fixtures/${fixtureKey}`, { force: true });
cy.waitForLoad(false);
workflowPage.actions.setWorkflowName(workflowName);
workflowPage.getters.saveButton().should('contain', 'Saved');
@ -52,11 +54,13 @@ Cypress.Commands.add(
},
);
Cypress.Commands.add('waitForLoad', () => {
Cypress.Commands.add('waitForLoad', (waitForIntercepts = true) => {
// These aliases are set-up before each test in cypress/support/e2e.ts
// we can't set them up here because at this point it would be too late
// and the requests would already have been made
cy.wait(['@loadSettings', '@loadLogin'])
if(waitForIntercepts) {
cy.wait(['@loadSettings', '@loadLogin'])
}
cy.getByTestId('node-view-loader', { timeout: 20000 }).should('not.exist');
cy.get('.el-loading-mask', { timeout: 20000 }).should('not.exist');
});

2
cypress/support/index.ts
View file

@ -43,7 +43,7 @@ declare global {
skipSetup(): void;
resetAll(): void;
enableFeature(feature: string): void;
waitForLoad(): void;
waitForLoad(waitForIntercepts?: boolean): void;
grantBrowserPermissions(...permissions: string[]): void;
readClipboard(): Chainable<string>;
paste(pastePayload: string): void;

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

@ -4,7 +4,7 @@
v-if="canPinData && hasPinData && !editMode.enabled && !isProductionExecutionPreview"
theme="secondary"
icon="thumbtack"
:class="$style['pinned-data-callout']"
:class="$style.pinnedDataCallout"
>
{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
<span class="ml-4xs" v-if="!isReadOnly">
@ -78,7 +78,7 @@
:manual="isControlledPinDataTooltip"
>
<template #content v-if="!isControlledPinDataTooltip">
<div :class="$style['tooltip-container']">
<div :class="$style.tooltipContainer">
<strong>{{ $locale.baseText('ndv.pinData.pin.title') }}</strong>
<n8n-text size="small" tag="p">
{{ $locale.baseText('ndv.pinData.pin.description') }}
@ -90,12 +90,12 @@
</div>
</template>
<template #content v-else>
<div :class="$style['tooltip-container']">
<div :class="$style.tooltipContainer">
{{ $locale.baseText('node.discovery.pinData.ndv') }}
</div>
</template>
<n8n-icon-button
:class="['ml-2xs', $style['pin-data-button']]"
:class="['ml-2xs', $style.pinDataButton]"
type="tertiary"
:active="hasPinData"
icon="thumbtack"
@ -105,7 +105,7 @@
/>
</n8n-tooltip>
<div :class="$style['edit-mode-actions']" v-show="editMode.enabled">
<div :class="$style.editModeActions" v-show="editMode.enabled">
<n8n-button
type="tertiary"
:label="$locale.baseText('runData.editor.cancel')"
@ -171,14 +171,14 @@
</n8n-text>
</div>
<div :class="$style['data-container']" ref="dataContainer" data-test-id="ndv-data-container">
<div :class="$style.dataContainer" ref="dataContainer" data-test-id="ndv-data-container">
<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
<n8n-text>{{ executingMessage }}</n8n-text>
</div>
<div v-else-if="editMode.enabled" :class="$style['edit-mode']">
<div :class="[$style['edit-mode-body'], 'ignore-key-press']">
<div v-else-if="editMode.enabled" :class="$style.editMode">
<div :class="[$style.editModeBody, 'ignore-key-press']">
<code-editor
:value="editMode.value"
:options="{ scrollBeyondLastLine: false }"
@ -186,8 +186,8 @@
@input="ndvStore.setOutputPanelEditModeValue($event)"
/>
</div>
<div :class="$style['edit-mode-footer']">
<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
<div :class="$style.editModeFooter">
<n8n-info-tip :bold="false" :class="$style.editModeFooterInfotip">
{{ $locale.baseText('runData.editor.copyDataInfo') }}
<n8n-link :to="dataEditingDocsUrl" size="small">
{{ $locale.baseText('generic.learnMore') }}
@ -329,6 +329,7 @@
:mappingEnabled="mappingEnabled"
:distanceFromActive="distanceFromActive"
:node="node"
:paneType="paneType"
:runIndex="runIndex"
:totalRuns="maxRunIndex"
/>
@ -656,8 +657,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
defaults.push({ label: this.$locale.baseText('runData.binary'), value: 'binary' });
}
const schemaView = { label: this.$locale.baseText('runData.schema'), value: 'schema' };
if (this.isPaneTypeInput) {
defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema' });
defaults.unshift(schemaView);
} else {
defaults.push(schemaView);
}
if (
@ -1305,10 +1309,12 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
this.activeNode.type === HTML_NODE_TYPE &&
this.activeNode.parameters.operation === 'generateHtmlTemplate';
this.ndvStore.setPanelDisplayMode({
pane: 'output',
mode: shouldDisplayHtml ? 'html' : 'table',
});
if (shouldDisplayHtml) {
this.ndvStore.setPanelDisplayMode({
pane: 'output',
mode: 'html',
});
}
},
},
watch: {
@ -1380,7 +1386,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
flex-direction: column;
}
.pinned-data-callout {
.pinnedDataCallout {
border-radius: inherit;
border-bottom-right-radius: 0;
border-top: 0;
@ -1403,7 +1409,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
}
}
.data-container {
.dataContainer {
position: relative;
height: 100%;
@ -1421,7 +1427,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
padding: 0 var(--spacing-s) var(--spacing-3xl) var(--spacing-s);
right: 0;
overflow-y: auto;
line-height: 1.5;
line-height: var(--font-line-height-xloose);
word-break: normal;
height: 100%;
}
@ -1500,10 +1506,10 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
.binaryHeader {
color: $color-primary;
font-weight: 600;
font-weight: var(--font-weight-bold);
font-size: 1.2em;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
padding-bottom: var(--spacing-2xs);
margin-bottom: var(--spacing-2xs);
border-bottom: 1px solid var(--color-text-light);
}
@ -1529,12 +1535,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
justify-content: flex-end;
flex-grow: 1;
}
.tooltip-container {
.tooltipContain {
max-width: 240px;
}
.pin-data-button {
.pinDataButton {
svg {
transition: transform 0.3s ease;
}
@ -1552,7 +1557,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
margin-bottom: var(--spacing-s);
}
.edit-mode {
.editMode {
height: calc(100% - var(--spacing-s));
display: flex;
flex-direction: column;
@ -1562,14 +1567,14 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
padding-right: var(--spacing-s);
}
.edit-mode-body {
.editModeBody {
flex: 1 1 auto;
width: 100%;
height: 100%;
overflow: hidden;
}
.edit-mode-footer {
.editModeFooter {
display: flex;
width: 100%;
justify-content: space-between;
@ -1577,13 +1582,13 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
padding-top: var(--spacing-s);
}
.edit-mode-footer-infotip {
.editModeFooterInfotip {
display: flex;
flex: 1;
width: 100%;
}
.edit-mode-actions {
.editModeActions {
display: flex;
justify-content: flex-end;
align-items: center;

1
packages/editor-ui/src/components/RunDataSchema.test.ts
View file

@ -24,6 +24,7 @@ describe('RunDataJsonSchema.vue', () => {
distanceFromActive: 1,
runIndex: 1,
totalRuns: 2,
paneType: 'input',
node: {
parameters: {
keepOnlySet: false,

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

@ -18,6 +18,7 @@ type Props = {
distanceFromActive: number;
runIndex: number;
totalRuns: number;
paneType: 'input' | 'output';
node: INodeUi | null;
};
@ -92,6 +93,7 @@ const onDragEnd = (el: HTMLElement) => {
:schema="schema"
:level="0"
:parent="null"
:paneType="paneType"
:subKey="`${schema.type}-0-0`"
:mappingEnabled="mappingEnabled"
:draggingPath="draggingPath"

6
packages/editor-ui/src/components/RunDataSchemaItem.vue
View file

@ -9,6 +9,7 @@ type Props = {
level: number;
parent: Schema | null;
subKey: string;
paneType: 'input' | 'output';
mappingEnabled: boolean;
draggingPath: string;
distanceFromActive: number;
@ -72,7 +73,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
</script>
<template>
<div :class="$style.item">
<div :class="$style.item" data-test-id="run-data-schema-item">
<div
v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
:title="schema.type"
@ -107,7 +108,8 @@ const getIconBySchemaType = (type: Schema['type']): string => {
:schema="s"
:level="level + 1"
:parent="schema"
:subKey="`${s.type}-${level}-${i}`"
:paneType="paneType"
:subKey="`${paneType}_${s.type}-${level}-${i}`"
:mappingEnabled="mappingEnabled"
:draggingPath="draggingPath"
:distanceFromActive="distanceFromActive"

28
packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
View file

@ -13,6 +13,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
>
<!---->
<!---->
@ -23,6 +24,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0s;"
>
<div
@ -60,6 +62,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</div>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0.033s;"
>
<div
@ -97,6 +100,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</div>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0.066s;"
>
<div
@ -126,12 +130,12 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
<!---->
<input
checked="checked"
id="array-0-2"
id="input_array-0-2"
type="checkbox"
/>
<label
class="toggle"
for="array-0-2"
for="input_array-0-2"
>
<font-awesome-icon-stub
icon="angle-up"
@ -142,6 +146,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0s;"
>
<div
@ -181,6 +186,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</div>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0.033s;"
>
<div
@ -273,6 +279,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
>
<!---->
<!---->
@ -283,6 +290,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0s;"
>
<div
@ -312,12 +320,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
<!---->
<input
checked="checked"
id="array-0-0"
id="input_array-0-0"
type="checkbox"
/>
<label
class="toggle"
for="array-0-0"
for="input_array-0-0"
>
<font-awesome-icon-stub
icon="angle-up"
@ -328,6 +336,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0s;"
>
<div
@ -359,12 +368,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
<!---->
<input
checked="checked"
id="object-1-0"
id="input_object-1-0"
type="checkbox"
/>
<label
class="toggle"
for="object-1-0"
for="input_object-1-0"
>
<font-awesome-icon-stub
icon="angle-up"
@ -375,6 +384,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0s;"
>
<div
@ -404,12 +414,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
<!---->
<input
checked="checked"
id="object-2-0"
id="input_object-2-0"
type="checkbox"
/>
<label
class="toggle"
for="object-2-0"
for="input_object-2-0"
>
<font-awesome-icon-stub
icon="angle-up"
@ -420,6 +430,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0s;"
>
<div
@ -459,6 +470,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
</div>
<div
class="item"
data-test-id="run-data-schema-item"
style="transition-delay: 0.033s;"
>
<div