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

refactor(editor): create ndv store (#4409)

Browse source 
* refactor ndv module out

* update active node in root state

* simplify

* fix conflict

* fix dragging
This commit is contained in:
Mutasem Aldmour 2022-10-24 11:35:03 +02:00 committed by GitHub
parent f6733cff9d
commit 127f988400
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 331 additions and 308 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
packages/editor-ui/src/Interface.ts
View file

@ -856,7 +856,6 @@ export interface IRootState {
activeWorkflows: string[];
activeActions: string[];
activeCredentialType: string | null;
activeNode: string | null;
baseUrl: string;
defaultLocale: string;
endpointWebhook: string;
@ -936,42 +935,33 @@ export interface TargetItem {
outputIndex: number;
}
export interface IUiState {
sidebarMenuCollapsed: boolean;
modalStack: string[];
modals: {
[key: string]: IModalState;
};
export interface NDVState {
activeNodeName: string | null;
mainPanelDimensions: {[key: string]: {[key: string]: number}};
isPageLoading: boolean;
currentView: string;
ndv: {
sessionId: string;
input: {
displayMode: IRunDataDisplayMode;
nodeName?: string;
run?: number;
branch?: number;
data: {
isEmpty: boolean;
}
};
output: {
branch?: number;
displayMode: IRunDataDisplayMode;
data: {
isEmpty: boolean;
}
editMode: {
enabled: boolean;
value: string;
};
};
focusedMappableInput: string;
mappingTelemetry: {[key: string]: string | number | boolean};
hoveringItem: null | TargetItem;
sessionId: string;
input: {
displayMode: IRunDataDisplayMode;
nodeName?: string;
run?: number;
branch?: number;
data: {
isEmpty: boolean;
}
};
mainPanelPosition: number;
output: {
branch?: number;
displayMode: IRunDataDisplayMode;
data: {
isEmpty: boolean;
}
editMode: {
enabled: boolean;
value: string;
};
};
focusedMappableInput: string;
mappingTelemetry: {[key: string]: string | number | boolean};
hoveringItem: null | TargetItem;
draggable: {
isDragging: boolean;
type: string;
@ -979,6 +969,17 @@ export interface IUiState {
canDrop: boolean;
stickyPosition: null | XYPosition;
};
}
export interface IUiState {
sidebarMenuCollapsed: boolean;
modalStack: string[];
modals: {
[key: string]: IModalState;
};
isPageLoading: boolean;
currentView: string;
fakeDoorFeatures: IFakeDoor[];
}

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

@ -52,7 +52,7 @@ export default mixins(
const executedWorkflow: IExecutionResponse | null = this.$store.getters.getWorkflowExecution;
const workflow = this.getCurrentWorkflow();
const activeNode: INodeUi | null = this.$store.getters.activeNode;
const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
const parentNode = workflow.getParentNodes(activeNode!.name, inputName, 1);
const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]) || {
sourceIndex: 0,

2
packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
View file

@ -206,7 +206,7 @@ export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
getInputNodeName() {
try {
const activeNode = this.$store.getters.activeNode;
const activeNode = this.$store.getters['ndv/activeNode'];
const workflow = this.getCurrentWorkflow();
const input = workflow.connectionsByDestinationNode[activeNode.name];

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

@ -95,7 +95,7 @@ export default mixins(
});
},
node (): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
// Returns all the options which did not get added already
parameterOptions (): Array<INodePropertyOptions | INodeProperties> {

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

@ -195,7 +195,7 @@ export default mixins(restApi).extend({
},
documentationUrl(): string {
const type = this.credentialType as ICredentialType;
const activeNode = this.$store.getters.activeNode;
const activeNode = this.$store.getters['ndv/activeNode'];
const isCommunityNode = activeNode ? isCommunityPackageName(activeNode.type) : false;
if (!type || !type.documentationUrl) {

8
packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View file

@ -236,7 +236,7 @@ export default mixins(showMessage, nodeHelpers).extend({
this.$externalHooks().run('credentialsEdit.credentialModalOpened', {
credentialType: this.credentialTypeName,
isEditingCredential: this.mode === 'edit',
activeNode: this.$store.getters.activeNode,
activeNode: this.$store.getters['ndv/activeNode'],
});
setTimeout(() => {
@ -561,7 +561,7 @@ export default mixins(showMessage, nodeHelpers).extend({
this.activeTab = tab;
const tabName: string = tab.replaceAll('coming-soon/', '');
const credType: string = this.credentialType ? this.credentialType.name : '';
const activeNode: INode | null = this.$store.getters.activeNode;
const activeNode: INode | null = this.$store.getters['ndv/activeNode'];
this.$telemetry.track('User viewed credential tab', {
credential_type: credType,
@ -777,8 +777,8 @@ export default mixins(showMessage, nodeHelpers).extend({
trackProperties.is_valid = !!this.testedSuccessfully;
}
if (this.$store.getters.activeNode) {
trackProperties.node_type = this.$store.getters.activeNode.type;
if (this.$store.getters['ndv/activeNode']) {
trackProperties.node_type = this.$store.getters['ndv/activeNode'].type;
}
if (this.authError && this.authError !== '') {

8
packages/editor-ui/src/components/Draggable.vue
View file

@ -67,10 +67,10 @@ export default Vue.extend({
},
computed: {
canDrop(): boolean {
return this.$store.getters['ui/canDraggableDrop'];
return this.$store.getters['ndv/canDraggableDrop'];
},
stickyPosition(): XYPosition | null {
return this.$store.getters['ui/draggableStickyPos'];
return this.$store.getters['ndv/draggableStickyPos'];
},
},
methods: {
@ -111,7 +111,7 @@ export default Vue.extend({
this.isDragging = true;
const data = this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : (this.data || '');
this.$store.commit('ui/draggableStartDragging', {type: this.type, data });
this.$store.commit('ndv/draggableStartDragging', {type: this.type, data });
this.$emit('dragstart', this.draggingEl);
document.body.style.cursor = 'grabbing';
@ -141,7 +141,7 @@ export default Vue.extend({
this.$emit('dragend', this.draggingEl);
this.isDragging = false;
this.draggingEl = null;
this.$store.commit('ui/draggableStopDragging');
this.$store.commit('ndv/draggableStopDragging');
}, 0);
},
},

10
packages/editor-ui/src/components/DraggableTarget.vue
View file

@ -38,10 +38,10 @@ export default Vue.extend({
},
computed: {
isDragging(): boolean {
return this.$store.getters['ui/isDraggableDragging'];
return this.$store.getters['ndv/isDraggableDragging'];
},
draggableType(): string {
return this.$store.getters['ui/draggableType'];
return this.$store.getters['ndv/draggableType'];
},
droppable(): boolean {
return !this.disabled && this.isDragging && this.draggableType === this.type;
@ -60,20 +60,20 @@ export default Vue.extend({
this.hovering = e.clientX >= dim.left && e.clientX <= dim.right && e.clientY >= dim.top && e.clientY <= dim.bottom;
if (!this.disabled && this.sticky && this.hovering) {
this.$store.commit('ui/setDraggableStickyPos', [dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
this.$store.commit('ndv/setDraggableStickyPos', [dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
}
}
},
onMouseUp(e: MouseEvent) {
if (this.activeDrop) {
const data = this.$store.getters['ui/draggableData'];
const data = this.$store.getters['ndv/draggableData'];
this.$emit('drop', data);
}
},
},
watch: {
activeDrop(active) {
this.$store.commit('ui/setDraggableCanDrop', active);
this.$store.commit('ndv/setDraggableCanDrop', active);
},
},
});

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

@ -126,7 +126,7 @@ export default mixins(
return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE;
},
parameters (): INodeProperties[] {
const node = this.$store.getters.activeNode;
const node = this.$store.getters['ndv/activeNode'];
if (!node) {
return [];
}

8
packages/editor-ui/src/components/ExpressionEdit.vue
View file

@ -120,11 +120,11 @@ export default mixins(
node_name: string;
} = {
event_version: '2',
node_type_dest: this.$store.getters.activeNode.type,
node_type_dest: this.$store.getters['ndv/activeNode'].type,
parameter_name_dest: this.parameter.displayName,
is_immediate_input: false,
variable_expression: eventData.variable,
node_name: this.$store.getters.activeNode.name,
node_name: this.$store.getters['ndv/activeNode'].name,
};
if (eventData.variable) {
@ -144,7 +144,7 @@ export default mixins(
const sourceNodeName = splitVar[0].split('"')[1];
trackProperties.node_type_source = this.$store.getters.getNodeByName(sourceNodeName).type;
const nodeConnections: Array<Array<{ node: string }>> = this.$store.getters.outgoingConnectionsByNodeName(sourceNodeName).main;
trackProperties.is_immediate_input = (nodeConnections && nodeConnections[0] && !!nodeConnections[0].find(({ node }) => node === this.$store.getters.activeNode.name)) ? true : false;
trackProperties.is_immediate_input = (nodeConnections && nodeConnections[0] && !!nodeConnections[0].find(({ node }) => node === this.$store.getters['ndv/activeNode'].name)) ? true : false;
if (splitVar[1].startsWith('parameter')) {
trackProperties.parameter_name_source = splitVar[1].split('"')[1];
@ -175,7 +175,7 @@ export default mixins(
empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
workflow_id: this.$store.getters.workflowId,
source: this.eventSource,
session_id: this.$store.getters['ui/ndvSessionId'],
session_id: this.$store.getters['ndv/ndvSessionId'],
has_parameter: this.value.includes('$parameter'),
has_mapping: hasExpressionMapping(this.value),
};

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

@ -65,7 +65,7 @@ export default mixins(showMessage).extend({
},
computed: {
node(): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
},
methods: {

4
packages/editor-ui/src/components/InputPanel.vue
View file

@ -112,7 +112,7 @@ export default mixins(
},
computed: {
focusedMappableInput(): string {
return this.$store.getters['ui/focusedMappableInput'];
return this.$store.getters['ndv/focusedMappableInput'];
},
isUserOnboarded(): boolean {
return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true';
@ -147,7 +147,7 @@ export default mixins(
return this.workflow as Workflow;
},
activeNode (): INodeUi | null {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
currentNode (): INodeUi | null {
return this.$store.getters.getNodeByName(this.currentNodeName);

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

@ -37,7 +37,7 @@ export default mixins(
return this.$route.name === VIEWS.EXECUTION;
},
activeNode (): INodeUi | null {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
hideMenuBar(): boolean {
return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);

10
packages/editor-ui/src/components/NDVDraggablePanels.vue
View file

@ -121,7 +121,7 @@ export default mixins(debounceHelper).extend({
relativeLeft: number,
relativeRight: number
} {
return this.$store.getters['ui/mainPanelDimensions'](this.currentNodePaneType);
return this.$store.getters['ndv/mainPanelDimensions'](this.currentNodePaneType);
},
supportedResizeDirections() {
const supportedDirections = ['right'];
@ -244,7 +244,7 @@ export default mixins(debounceHelper).extend({
setMainPanelWidth(relativeWidth?: number) {
const mainPanelRelativeWidth = relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]);
this.$store.commit('ui/setMainPanelDimensions', {
this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType,
dimensions: {
relativeWidth: mainPanelRelativeWidth,
@ -260,7 +260,7 @@ export default mixins(debounceHelper).extend({
const isInputless = this.currentNodePaneType === 'inputless';
if(isMinLeft) {
this.$store.commit('ui/setMainPanelDimensions', {
this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType,
dimensions: {
relativeLeft: this.minimumLeftPosition,
@ -271,7 +271,7 @@ export default mixins(debounceHelper).extend({
}
if(isMaxRight) {
this.$store.commit('ui/setMainPanelDimensions', {
this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType,
dimensions: {
relativeLeft: 1 - this.mainPanelDimensions.relativeWidth - this.maximumRightPosition,
@ -281,7 +281,7 @@ export default mixins(debounceHelper).extend({
return;
}
this.$store.commit('ui/setMainPanelDimensions', {
this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType,
dimensions: {
relativeLeft: isInputless ? this.minimumLeftPosition : mainPanelRelativeLeft,

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

@ -442,7 +442,7 @@ export default mixins(
},
setNodeActive () {
this.$store.commit('setActiveNode', this.data.name);
this.$store.commit('ndv/setActiveNodeName', this.data.name);
this.pinDataDiscoveryTooltipVisible = false;
},
touchStart () {

36
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -177,7 +177,7 @@ export default mixins(
};
},
mounted() {
this.$store.commit('ui/setNDVSessionId');
this.$store.commit('ndv/setNDVSessionId');
dataPinningEventBus.$on('data-pinning-discovery', ({ isTooltipVisible }: { isTooltipVisible: boolean }) => {
this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
@ -189,7 +189,7 @@ export default mixins(
computed: {
...mapGetters(['executionWaitingForWebhook']),
sessionId(): string {
return this.$store.getters['ui/ndvSessionId'];
return this.$store.getters['ndv/ndvSessionId'];
},
workflowRunning(): boolean {
return this.$store.getters.isActionActive('workflowRunning');
@ -204,7 +204,7 @@ export default mixins(
);
},
activeNode(): INodeUi | null {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
inputNodeName(): string | undefined {
return this.selectedInput || this.parentNode;
@ -256,7 +256,7 @@ export default mixins(
},
isActiveStickyNode(): boolean {
return (
!!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE
!!this.$store.getters['ndv/activeNode'] && this.$store.getters['ndv/activeNode'].type === STICKY_NODE_TYPE
);
},
workflowExecution(): IExecutionResponse | null {
@ -339,7 +339,7 @@ export default mixins(
return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
},
outputPanelEditMode(): { enabled: boolean; value: string; } {
return this.$store.getters['ui/outputPanelEditMode'];
return this.$store.getters['ndv/outputPanelEditMode'];
},
},
watch: {
@ -354,7 +354,7 @@ export default mixins(
this.avgInputRowHeight = 0;
setTimeout(() => {
this.$store.commit('ui/setNDVSessionId');
this.$store.commit('ndv/setNDVSessionId');
}, 0);
this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()),
@ -375,8 +375,8 @@ export default mixins(
output_first_connector_runs: this.maxOutputRun,
selected_view_inputs: this.isTriggerNode
? 'trigger'
: this.$store.getters['ui/inputPanelDisplayMode'],
selected_view_outputs: this.$store.getters['ui/outputPanelDisplayMode'],
: this.$store.getters['ndv/inputPanelDisplayMode'],
selected_view_outputs: this.$store.getters['ndv/outputPanelDisplayMode'],
input_connectors: this.parentNodes.length,
output_connectors:
outogingConnections && outogingConnections.main && outogingConnections.main.length,
@ -401,12 +401,12 @@ export default mixins(
},
inputNodeName(nodeName: string | undefined) {
setTimeout(() => {
this.$store.commit('ui/setInputNodeName', nodeName);
this.$store.commit('ndv/setInputNodeName', nodeName);
}, 0);
},
inputRun() {
setTimeout(() => {
this.$store.commit('ui/setInputRunIndex', this.inputRun);
this.$store.commit('ndv/setInputRunIndex', this.inputRun);
}, 0);
},
},
@ -416,7 +416,7 @@ export default mixins(
return;
}
if (e === null) {
this.$store.commit('ui/setHoveringItem', null);
this.$store.commit('ndv/setHoveringItem', null);
return;
}
@ -426,11 +426,11 @@ export default mixins(
outputIndex: e.outputIndex,
itemIndex: e.itemIndex,
};
this.$store.commit('ui/setHoveringItem', item);
this.$store.commit('ndv/setHoveringItem', item);
},
onOutputItemHover(e: {itemIndex: number, outputIndex: number} | null) {
if (e === null || !this.activeNode) {
this.$store.commit('ui/setHoveringItem', null);
this.$store.commit('ndv/setHoveringItem', null);
return;
}
@ -440,7 +440,7 @@ export default mixins(
outputIndex: e.outputIndex,
itemIndex: e.itemIndex,
};
this.$store.commit('ui/setHoveringItem', item);
this.$store.commit('ndv/setHoveringItem', item);
},
onInputTableMounted(e: { avgRowHeight: number }) {
this.avgInputRowHeight = e.avgRowHeight;
@ -449,7 +449,7 @@ export default mixins(
this.avgOutputRowHeight = e.avgRowHeight;
},
onWorkflowActivate() {
this.$store.commit('setActiveNode', null);
this.$store.commit('ndv/setActiveNodeName', null);
setTimeout(() => {
this.activateCurrentWorkflow('ndv');
}, 1000);
@ -558,7 +558,7 @@ export default mixins(
this.$store.commit('pinData', { node: this.activeNode, data: jsonParse(value) });
}
this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
}
this.$externalHooks().run('dataDisplay.nodeEditingFinished');
@ -568,8 +568,8 @@ export default mixins(
workflow_id: this.$store.getters.workflowId,
});
this.triggerWaitingWarningEnabled = false;
this.$store.commit('setActiveNode', null);
this.$store.commit('ui/resetNDVSessionId');
this.$store.commit('ndv/setActiveNodeName', null);
this.$store.commit('ndv/resetNDVSessionId');
},
onRunOutputIndexChange(run: number) {
this.runOutputIndex = run;

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

@ -111,7 +111,7 @@ export default mixins(
}
if (this.isTriggerNode && this.hasIssues) {
if (this.$store.getters.activeNode && this.$store.getters.activeNode.name !== this.nodeName) {
if (this.$store.getters['ndv/activeNode'] && this.$store.getters['ndv/activeNode'].name !== this.nodeName) {
return this.$locale.baseText('ndv.execute.fixPrevious');
}

4
packages/editor-ui/src/components/NodeSettings.vue
View file

@ -198,7 +198,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers).extend({
};
},
node(): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
parametersSetting(): INodeProperties[] {
return this.parameters.filter((item) => {
@ -218,7 +218,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers).extend({
return this.nodeType.properties;
},
outputPanelEditMode(): { enabled: boolean; value: string } {
return this.$store.getters['ui/outputPanelEditMode'];
return this.$store.getters['ndv/outputPanelEditMode'];
},
isCommunityNode(): boolean {
return isCommunityPackageName(this.node.type);

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

@ -27,7 +27,7 @@ export default mixins(
},
computed: {
activeNode(): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
documentationUrl (): string {
const nodeType = this.nodeType as INodeTypeDescription | null;

4
packages/editor-ui/src/components/OutputPanel.vue
View file

@ -112,7 +112,7 @@ export default mixins(
},
computed: {
node(): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
nodeType (): INodeTypeDescription | null {
if (this.node) {
@ -202,7 +202,7 @@ export default mixins(
return updatedAt > runAt;
},
outputPanelEditMode(): { enabled: boolean; value: string; } {
return this.$store.getters['ui/outputPanelEditMode'];
return this.$store.getters['ndv/outputPanelEditMode'];
},
canPinData(): boolean {
return this.isPinDataNodeType && !this.isReadOnly;

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

@ -497,7 +497,7 @@ export default mixins(
}
// Get the resolved parameter values of the current node
const currentNodeParameters = this.$store.getters.activeNode.parameters;
const currentNodeParameters = this.$store.getters['ndv/activeNode'].parameters;
try {
const resolvedNodeParameters = this.resolveParameter(currentNodeParameters);
@ -512,7 +512,7 @@ export default mixins(
}
},
node (): INodeUi | null {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
displayTitle (): string {
const interpolation = { interpolate: { shortPath: this.shortPath } };
@ -782,7 +782,7 @@ export default mixins(
// Get the resolved parameter values of the current node
try {
const currentNodeParameters = (this.$store.getters.activeNode as INodeUi).parameters;
const currentNodeParameters = (this.$store.getters['ndv/activeNode'] as INodeUi).parameters;
const resolvedNodeParameters = this.resolveParameter(currentNodeParameters) as INodeParameters;
const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;
@ -826,7 +826,7 @@ export default mixins(
parameter_field_type: this.parameter.type,
new_expression: !this.isValueExpression,
workflow_id: this.$store.getters.workflowId,
session_id: this.$store.getters['ui/ndvSessionId'],
session_id: this.$store.getters['ndv/ndvSessionId'],
source: this.eventSource || 'ndv',
});
}
@ -958,7 +958,7 @@ export default mixins(
node_type: this.node && this.node.type,
resource: this.node && this.node.parameters.resource,
is_custom: value === CUSTOM_API_CALL_KEY,
session_id: this.$store.getters['ui/ndvSessionId'],
session_id: this.$store.getters['ndv/ndvSessionId'],
parameter: this.parameter.name,
});
}

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

@ -121,7 +121,7 @@ export default mixins(
},
computed: {
node (): INodeUi | null {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
hint (): string | null {
return this.$locale.nodeText().hint(this.parameter, this.path);
@ -136,10 +136,10 @@ export default mixins(
return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
},
isInputDataEmpty (): boolean {
return this.$store.getters['ui/getNDVDataIsEmpty']('input');
return this.$store.getters['ndv/getNDVDataIsEmpty']('input');
},
displayMode(): IRunDataDisplayMode {
return this.$store.getters['ui/inputPanelDisplayMode'];
return this.$store.getters['ndv/inputPanelDisplayMode'];
},
showMappingTooltip (): boolean {
return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
@ -149,13 +149,13 @@ export default mixins(
onFocus() {
this.focused = true;
if (!this.parameter.noDataExpression) {
this.$store.commit('ui/setMappableNDVInputFocus', this.parameter.displayName);
this.$store.commit('ndv/setMappableNDVInputFocus', this.parameter.displayName);
}
},
onBlur() {
this.focused = false;
if (!this.parameter.noDataExpression) {
this.$store.commit('ui/setMappableNDVInputFocus', '');
this.$store.commit('ndv/setMappableNDVInputFocus', '');
}
},
onMenuExpanded(expanded: boolean) {
@ -232,7 +232,7 @@ export default mixins(
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
}
this.$store.commit('ui/setMappingTelemetry', {
this.$store.commit('ndv/setMappingTelemetry', {
dest_node_type: this.node.type,
dest_parameter: this.path,
dest_parameter_mode: typeof prevValue === 'string' && prevValue.startsWith('=')? 'expression': 'fixed',

4
packages/editor-ui/src/components/ParameterInputList.vue
View file

@ -157,7 +157,7 @@ export default mixins(
return this.filteredParameters.map(parameter => parameter.name);
},
node (): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
indexToShowSlotAt (): number {
let index = 0;
@ -320,7 +320,7 @@ export default mixins(
if (!newValue.includes(parameter)) {
const parameterData = {
name: `${this.path}.${parameter}`,
node: this.$store.getters.activeNode.name,
node: this.$store.getters['ndv/activeNode'].name,
value: undefined,
};
this.$emit('valueChanged', parameterData);

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

@ -104,7 +104,7 @@ export default mixins(
return isValueExpression(this.parameter, this.value);
},
activeNode(): INodeUi | null {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
selectedRLMode(): INodePropertyMode | undefined {
if (typeof this.value !== 'object' ||this.parameter.type !== 'resourceLocator' || !isResourceLocatorValue(this.value)) {
@ -129,17 +129,17 @@ export default mixins(
return this.hint;
},
targetItem(): TargetItem | null {
return this.$store.getters['ui/hoveringItem'];
return this.$store.getters['ndv/hoveringItem'];
},
expressionValueComputed (): string | null {
const inputNodeName: string | undefined = this.$store.getters['ui/ndvInputNodeName'];
const inputNodeName: string | undefined = this.$store.getters['ndv/ndvInputNodeName'];
const value = isResourceLocatorValue(this.value)? this.value.value: this.value;
if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') {
return null;
}
const inputRunIndex: number | undefined = this.$store.getters['ui/ndvInputRunIndex'];
const inputBranchIndex: number | undefined = this.$store.getters['ui/ndvInputBranchIndex'];
const inputRunIndex: number | undefined = this.$store.getters['ndv/ndvInputRunIndex'];
const inputBranchIndex: number | undefined = this.$store.getters['ndv/ndvInputBranchIndex'];
let computedValue: NodeParameterValue;
try {
@ -160,7 +160,7 @@ export default mixins(
},
expressionOutput(): string | null {
if (this.isValueExpression && this.expressionValueComputed) {
const inputData = this.$store.getters['ui/ndvInputData'];
const inputData = this.$store.getters['ndv/ndvInputData'];
if (!inputData || (inputData && inputData.length <= 1)) {
return this.expressionValueComputed;
}

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

@ -279,7 +279,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
return this.selectedMode === 'list';
},
hasCredential(): boolean {
const node = this.$store.getters.activeNode as INodeUi | null;
const node = this.$store.getters['ndv/activeNode'] as INodeUi | null;
if (!node) {
return false;
}
@ -440,7 +440,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
},
setWidthOnMainPanelResize(mutation: { type: string }) {
// Update the width when main panel dimension change
if(mutation.type === 'ui/setMainPanelDimensions') this.setWidth();
if(mutation.type === 'ndv/setMainPanelDimensions') this.setWidth();
},
getLinkAlt(entity: string) {
if (this.selectedMode === 'list' && entity) {
@ -479,7 +479,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
return parameter.typeOptions[argumentName];
},
openCredential(): void {
const node = this.$store.getters.activeNode as INodeUi | null;
const node = this.$store.getters['ndv/activeNode'] as INodeUi | null;
if (!node || !node.credentials) {
return;
}

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

@ -145,7 +145,7 @@
:value="editMode.value"
:options="{ scrollBeyondLastLine: false }"
type="json"
@input="$store.commit('ui/setOutputPanelEditModeValue', $event)"
@input="$store.commit('ndv/setOutputPanelEditModeValue', $event)"
/>
</div>
<div :class="$style['edit-mode-footer']">
@ -470,7 +470,7 @@ export default mixins(
this.showPinDataDiscoveryTooltip(this.jsonData);
}
}
this.$store.commit('ui/setNDVBranchIndex', {
this.$store.commit('ndv/setNDVBranchIndex', {
pane: this.paneType,
branchIndex: this.currentOutputIndex,
});
@ -482,7 +482,7 @@ export default mixins(
},
computed: {
activeNode(): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
dataPinningDocsUrl(): string {
return DATA_PINNING_DOCS_URL;
@ -491,7 +491,7 @@ export default mixins(
return DATA_EDITING_DOCS_URL;
},
displayMode(): IRunDataDisplayMode {
return this.$store.getters['ui/getPanelDisplayMode'](this.paneType);
return this.$store.getters['ndv/getPanelDisplayMode'](this.paneType);
},
node(): INodeUi | null {
return (this.nodeUi as INodeUi | null) || null;
@ -675,7 +675,7 @@ export default mixins(
editMode(): { enabled: boolean; value: string; } {
return this.isPaneTypeInput
? { enabled: false, value: '' }
: this.$store.getters['ui/outputPanelEditMode'];
: this.$store.getters['ndv/outputPanelEditMode'];
},
isPaneTypeInput(): boolean {
return this.paneType === 'input';
@ -737,8 +737,8 @@ export default mixins(
? inputData
: TEST_PIN_DATA;
this.$store.commit('ui/setOutputPanelEditModeEnabled', true);
this.$store.commit('ui/setOutputPanelEditModeValue', JSON.stringify(data, null, 2));
this.$store.commit('ndv/setOutputPanelEditModeEnabled', true);
this.$store.commit('ndv/setOutputPanelEditModeValue', JSON.stringify(data, null, 2));
this.$telemetry.track('User opened ndv edit state', {
node_type: this.activeNode.type,
@ -751,8 +751,8 @@ export default mixins(
});
},
onClickCancelEdit() {
this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
this.$store.commit('ui/setOutputPanelEditModeValue', '');
this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
this.$store.commit('ndv/setOutputPanelEditModeValue', '');
this.onExitEditMode({ type: 'cancel' });
},
onClickSaveEdit() {
@ -770,7 +770,7 @@ export default mixins(
return;
}
this.$store.commit('ui/setOutputPanelEditModeEnabled', false);
this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
this.$store.commit('pinData', { node: this.node, data: clearJsonKey(value) });
this.onDataPinningSuccess({ source: 'save-edit' });
@ -935,7 +935,7 @@ export default mixins(
},
onDisplayModeChange(displayMode: IRunDataDisplayMode) {
const previous = this.displayMode;
this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: displayMode});
this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: displayMode});
const dataContainer = this.$refs.dataContainer;
if (dataContainer) {
@ -1007,10 +1007,10 @@ export default mixins(
this.refreshDataSize();
this.closeBinaryDataDisplay();
if (this.binaryData.length > 0) {
this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'binary'});
this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: 'binary'});
}
else if (this.displayMode === 'binary') {
this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'table'});
this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: 'table'});
}
},
closeBinaryDataDisplay () {
@ -1096,7 +1096,7 @@ export default mixins(
},
goToErroredNode() {
if (this.node) {
this.$store.commit('setActiveNode', this.node.name);
this.$store.commit('ndv/setActiveNodeName', this.node.name);
}
},
},
@ -1107,7 +1107,7 @@ export default mixins(
inputData:{
handler(data: INodeExecutionData[]) {
if(this.paneType && data){
this.$store.commit('ui/setNDVPanelDataIsEmpty', { panel: this.paneType, isEmpty: data.every(item => isEmpty(item.json)) });
this.$store.commit('ndv/setNDVPanelDataIsEmpty', { panel: this.paneType, isEmpty: data.every(item => isEmpty(item.json)) });
}
},
immediate: true,
@ -1130,7 +1130,7 @@ export default mixins(
}
},
currentOutputIndex(branchIndex: number) {
this.$store.commit('ui/setNDVBranchIndex', {
this.$store.commit('ndv/setNDVBranchIndex', {
pane: this.paneType,
branchIndex,
});

4
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -165,13 +165,13 @@ export default mixins(externalHooks).extend({
this.draggingPath = el.dataset.path;
}
this.$store.commit('ui/resetMappingTelemetry');
this.$store.commit('ndv/resetMappingTelemetry');
},
onDragEnd(el: HTMLElement) {
this.draggingPath = null;
setTimeout(() => {
const mappingTelemetry = this.$store.getters['ui/mappingTelemetry'];
const mappingTelemetry = this.$store.getters['ndv/mappingTelemetry'];
const telemetryPayload = {
src_node_type: this.node.type,
src_field_name: el.dataset.name || '',

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

@ -84,7 +84,7 @@ export default mixins(
},
computed: {
activeNode(): INodeUi {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
normalisedJsonPath(): string {
const isNotSelected = this.selectedJsonPath === nonExistingJsonPath;

10
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -140,7 +140,7 @@
<script lang="ts">
/* eslint-disable prefer-spread */
import { INodeUi, IRootState, ITableData, IUiState } from '@/Interface';
import { INodeUi, IRootState, ITableData, IUiState, NDVState } from '@/Interface';
import { getPairedItemId } from '@/pairedItemUtils';
import Vue, { PropType } from 'vue';
import mixins from 'vue-typed-mixins';
@ -202,8 +202,8 @@ export default mixins(externalHooks).extend({
}
},
computed: {
hoveringItem(): IUiState['ndv']['hoveringItem'] {
return this.$store.getters['ui/hoveringItem'];
hoveringItem(): NDVState['ndv']['hoveringItem'] {
return this.$store.getters['ndv/hoveringItem'];
},
pairedItemMappings(): IRootState['workflowExecutionPairedItemMappings'] {
return this.$store.getters['workflowExecutionPairedItemMappings'];
@ -346,7 +346,7 @@ export default mixins(externalHooks).extend({
onDragStart() {
this.draggedColumn = true;
this.$store.commit('ui/resetMappingTelemetry');
this.$store.commit('ndv/resetMappingTelemetry');
},
onCellDragStart(el: HTMLElement) {
if (el && el.dataset.value) {
@ -369,7 +369,7 @@ export default mixins(externalHooks).extend({
},
onDragEnd(column: string, src: string, depth = '0') {
setTimeout(() => {
const mappingTelemetry = this.$store.getters['ui/mappingTelemetry'];
const mappingTelemetry = this.$store.getters['ndv/mappingTelemetry'];
const telemetryPayload = {
src_node_type: this.node.type,
src_field_name: column,

4
packages/editor-ui/src/components/Sticky.vue
View file

@ -142,10 +142,10 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
},
onEdit(edit: boolean) {
if (edit && !this.isActive && this.node) {
this.$store.commit('setActiveNode', this.node.name);
this.$store.commit('ndv/setActiveNodeName', this.node.name);
}
else if (this.isActive && !edit) {
this.$store.commit('setActiveNode', null);
this.$store.commit('ndv/setActiveNodeName', null);
}
},
onMarkdownClick ( link:HTMLAnchorElement, event: Event ) {

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

@ -369,7 +369,7 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
pane: 'input',
type: 'open-executions-log',
});
this.$store.commit('setActiveNode', null);
this.$store.commit('ndv/setActiveNodeName', null);
this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
} else if (target.dataset.key === 'settings') {
this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);

4
packages/editor-ui/src/components/VariableSelector.vue
View file

@ -406,7 +406,7 @@ export default mixins(
const runIndex = 0;
const returnData: IVariableSelectorOption[] = [];
const activeNode: INodeUi | null = this.$store.getters.activeNode;
const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
if (activeNode === null) {
return returnData;
@ -486,7 +486,7 @@ export default mixins(
getFilterResults (filterText: string, itemIndex: number): IVariableSelectorOption[] {
const inputName = 'main';
const activeNode: INodeUi | null = this.$store.getters.activeNode;
const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
if (activeNode === null) {
return [];

2
packages/editor-ui/src/components/mixins/workflowHelpers.ts
View file

@ -534,7 +534,7 @@ export const workflowHelpers = mixins(
let itemIndex = opts?.targetItem?.itemIndex || 0;
const inputName = 'main';
const activeNode = this.$store.getters.activeNode;
const activeNode = this.$store.getters['ndv/activeNode'];
const workflow = this.getCurrentWorkflow();
const workflowRunData = this.$store.getters.getWorkflowRunData as IRunData | null;
let parentNode = workflow.getParentNodes(activeNode.name, inputName, 1);

170
packages/editor-ui/src/modules/ndv.ts Normal file
View file

@ -0,0 +1,170 @@
import Vue from 'vue';
import { Module } from 'vuex';
import {
IRootState,
IRunDataDisplayMode,
NDVState,
XYPosition,
IExecutionResponse,
INodeUi,
} from '../Interface';
const module: Module<NDVState, IRootState> = {
namespaced: true,
state: {
activeNodeName: null,
mainPanelDimensions: {},
sessionId: '',
input: {
displayMode: 'table',
nodeName: undefined,
run: undefined,
branch: undefined,
data: {
isEmpty: true,
},
},
output: {
displayMode: 'table',
branch: undefined,
data: {
isEmpty: true,
},
editMode: {
enabled: false,
value: '',
},
},
focusedMappableInput: '',
mappingTelemetry: {},
hoveringItem: null,
draggable: {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
},
},
getters: {
activeNodeName: (state: NDVState) => state.activeNodeName,
activeNode: (state, getters, rootState, rootGetters): INodeUi | null => {
return rootGetters.getNodeByName(state.activeNodeName);
},
ndvInputData: (state: NDVState, getters, rootState: IRootState, rootGetters) => {
const executionData = rootGetters.getWorkflowExecution as IExecutionResponse | null;
const inputNodeName: string | undefined = state.input.nodeName;
const inputRunIndex: number = state.input.run ?? 0;
const inputBranchIndex: number = state.input.branch?? 0;
if (!executionData || !inputNodeName || inputRunIndex === undefined || inputBranchIndex === undefined) {
return [];
}
return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
},
ndvSessionId: (state: NDVState): string => state.sessionId,
getPanelDisplayMode: (state: NDVState) => {
return (panel: 'input' | 'output') => state[panel].displayMode;
},
inputPanelDisplayMode: (state: NDVState) => state.input.displayMode,
outputPanelDisplayMode: (state: NDVState) => state.output.displayMode,
outputPanelEditMode: (state: NDVState): NDVState['output']['editMode'] => state.output.editMode,
focusedMappableInput: (state: NDVState) => state.focusedMappableInput,
isDraggableDragging: (state: NDVState) => state.draggable.isDragging,
draggableType: (state: NDVState) => state.draggable.type,
draggableData: (state: NDVState) => state.draggable.data,
canDraggableDrop: (state: NDVState) => state.draggable.canDrop,
mainPanelDimensions: (state: NDVState) => (panelType: string) => {
const defaults = { relativeRight: 1, relativeLeft: 1, relativeWidth: 1 };
return {...defaults, ...state.mainPanelDimensions[panelType]};
},
draggableStickyPos: (state: NDVState) => state.draggable.stickyPosition,
mappingTelemetry: (state: NDVState) => state.mappingTelemetry,
hoveringItem: (state: NDVState) => state.hoveringItem,
ndvInputNodeName: (state: NDVState) => state.input.nodeName,
ndvInputRunIndex: (state: NDVState) => state.input.run,
ndvInputBranchIndex: (state: NDVState) => state.input.branch,
getNDVDataIsEmpty: (state: NDVState) => (panel: 'input' | 'output'): boolean => state[panel].data.isEmpty,
},
mutations: {
setActiveNodeName(state, nodeName: string) {
state.activeNodeName = nodeName;
},
setInputNodeName: (state: NDVState, name: string | undefined) => {
Vue.set(state.input, 'nodeName', name);
},
setInputRunIndex: (state: NDVState, run?: string) => {
Vue.set(state.input, 'run', run);
},
setMainPanelDimensions: (state: NDVState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
Vue.set(
state.mainPanelDimensions,
params.panelType,
{...state.mainPanelDimensions[params.panelType], ...params.dimensions },
);
},
setNDVSessionId: (state: NDVState) => {
Vue.set(state, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
},
resetNDVSessionId: (state: NDVState) => {
Vue.set(state, 'sessionId', '');
},
setPanelDisplayMode: (state: NDVState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
Vue.set(state[params.pane], 'displayMode', params.mode);
},
setOutputPanelEditModeEnabled: (state: NDVState, payload: boolean) => {
Vue.set(state.output.editMode, 'enabled', payload);
},
setOutputPanelEditModeValue: (state: NDVState, payload: string) => {
Vue.set(state.output.editMode, 'value', payload);
},
setMappableNDVInputFocus(state: NDVState, paramName: string) {
Vue.set(state, 'focusedMappableInput', paramName);
},
draggableStartDragging(state: NDVState, {type, data}: {type: string, data: string}) {
state.draggable = {
isDragging: true,
type,
data,
canDrop: false,
stickyPosition: null,
};
},
draggableStopDragging(state: NDVState) {
state.draggable = {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
};
},
setDraggableStickyPos(state: NDVState, position: XYPosition | null) {
Vue.set(state.draggable, 'stickyPosition', position);
},
setDraggableCanDrop(state: NDVState, canDrop: boolean) {
Vue.set(state.draggable, 'canDrop', canDrop);
},
setMappingTelemetry(state: NDVState, telemetry: {[key: string]: string | number | boolean}) {
state.mappingTelemetry = {...state.mappingTelemetry, ...telemetry};
},
resetMappingTelemetry(state: NDVState) {
state.mappingTelemetry = {};
},
setHoveringItem(state: NDVState, item: null | NDVState['hoveringItem']) {
Vue.set(state, 'hoveringItem', item);
},
setNDVBranchIndex(state: NDVState, e: {pane: 'input' | 'output', branchIndex: number}) {
Vue.set(state[e.pane], 'branch', e.branchIndex);
},
setNDVPanelDataIsEmpty(state: NDVState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
Vue.set(state[payload.panel].data, 'isEmpty', payload.isEmpty);
},
},
actions: {
},
};
export default module;

149
packages/editor-ui/src/modules/ui.ts
View file

@ -22,7 +22,6 @@ import {
ONBOARDING_CALL_SIGNUP_MODAL_KEY,
FAKE_DOOR_FEATURES,
COMMUNITY_PACKAGE_MANAGE_ACTIONS,
ALL_NODE_FILTER,
IMPORT_CURL_MODAL_KEY,
} from '@/constants';
import Vue from 'vue';
@ -30,10 +29,8 @@ import { ActionContext, Module } from 'vuex';
import {
IFakeDoorLocation,
IRootState,
IRunDataDisplayMode,
IUiState,
INodeFilterType,
XYPosition,
IFakeDoor,
} from '../Interface';
const module: Module<IUiState, IRootState> = {
@ -109,41 +106,6 @@ const module: Module<IUiState, IRootState> = {
sidebarMenuCollapsed: false,
isPageLoading: true,
currentView: '',
mainPanelDimensions: {},
ndv: {
sessionId: '',
input: {
displayMode: 'table',
nodeName: undefined,
run: undefined,
branch: undefined,
data: {
isEmpty: true,
},
},
output: {
displayMode: 'table',
branch: undefined,
data: {
isEmpty: true,
},
editMode: {
enabled: false,
value: '',
},
},
focusedMappableInput: '',
mappingTelemetry: {},
hoveringItem: null,
},
mainPanelPosition: 0.5,
draggable: {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
},
fakeDoorFeatures: [
{
id: FAKE_DOOR_FEATURES.ENVIRONMENTS,
@ -176,18 +138,6 @@ const module: Module<IUiState, IRootState> = {
],
},
getters: {
ndvInputData: (state: IUiState, getters, rootState: IRootState, rootGetters) => {
const executionData = rootGetters.getWorkflowExecution as IExecutionResponse | null;
const inputNodeName: string | undefined = state.ndv.input.nodeName;
const inputRunIndex: number = state.ndv.input.run ?? 0;
const inputBranchIndex: number = state.ndv.input.branch?? 0;
if (!executionData || !inputNodeName || inputRunIndex === undefined || inputBranchIndex === undefined) {
return [];
}
return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
},
isVersionsOpen: (state: IUiState) => {
return state.modals[VERSIONS_MODAL_KEY].open;
},
@ -213,14 +163,6 @@ const module: Module<IUiState, IRootState> = {
return (name: string) => state.modals[name].data;
},
sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed,
ndvSessionId: (state: IUiState): string => state.ndv.sessionId,
getPanelDisplayMode: (state: IUiState) => {
return (panel: 'input' | 'output') => state.ndv[panel].displayMode;
},
inputPanelDisplayMode: (state: IUiState) => state.ndv.input.displayMode,
outputPanelDisplayMode: (state: IUiState) => state.ndv.output.displayMode,
outputPanelEditMode: (state: IUiState): IUiState['ndv']['output']['editMode'] => state.ndv.output.editMode,
mainPanelPosition: (state: IUiState) => state.mainPanelPosition,
getFakeDoorFeatures: (state: IUiState): IFakeDoor[] => {
return state.fakeDoorFeatures;
},
@ -230,40 +172,11 @@ const module: Module<IUiState, IRootState> = {
getFakeDoorById: (state: IUiState, getters) => (id: string) => {
return getters.getFakeDoorFeatures.find((fakeDoor: IFakeDoor) => fakeDoor.id.toString() === id);
},
focusedMappableInput: (state: IUiState) => state.ndv.focusedMappableInput,
isDraggableDragging: (state: IUiState) => state.draggable.isDragging,
draggableType: (state: IUiState) => state.draggable.type,
draggableData: (state: IUiState) => state.draggable.data,
canDraggableDrop: (state: IUiState) => state.draggable.canDrop,
mainPanelDimensions: (state: IUiState) => (panelType: string) => {
const defaults = { relativeRight: 1, relativeLeft: 1, relativeWidth: 1 };
return {...defaults, ...state.mainPanelDimensions[panelType]};
},
draggableStickyPos: (state: IUiState) => state.draggable.stickyPosition,
mappingTelemetry: (state: IUiState) => state.ndv.mappingTelemetry,
getCurrentView: (state: IUiState) => state.currentView,
isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView),
hoveringItem: (state: IUiState) => state.ndv.hoveringItem,
ndvInputNodeName: (state: IUiState) => state.ndv.input.nodeName,
ndvInputRunIndex: (state: IUiState) => state.ndv.input.run,
ndvInputBranchIndex: (state: IUiState) => state.ndv.input.branch,
getNDVDataIsEmpty: (state: IUiState) => (panel: 'input' | 'output'): boolean => state.ndv[panel].data.isEmpty,
},
mutations: {
setInputNodeName: (state: IUiState, name: string | undefined) => {
Vue.set(state.ndv.input, 'nodeName', name);
},
setInputRunIndex: (state: IUiState, run?: string) => {
Vue.set(state.ndv.input, 'run', run);
},
setMainPanelDimensions: (state: IUiState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
Vue.set(
state.mainPanelDimensions,
params.panelType,
{...state.mainPanelDimensions[params.panelType], ...params.dimensions },
);
},
setMode: (state: IUiState, params: {name: string, mode: string}) => {
const { name, mode } = params;
Vue.set(state.modals[name], 'mode', mode);
@ -318,66 +231,6 @@ const module: Module<IUiState, IRootState> = {
setCurrentView: (state: IUiState, currentView: string) => {
state.currentView = currentView;
},
setNDVSessionId: (state: IUiState) => {
Vue.set(state.ndv, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
},
resetNDVSessionId: (state: IUiState) => {
Vue.set(state.ndv, 'sessionId', '');
},
setPanelDisplayMode: (state: IUiState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
Vue.set(state.ndv[params.pane], 'displayMode', params.mode);
},
setOutputPanelEditModeEnabled: (state: IUiState, payload: boolean) => {
Vue.set(state.ndv.output.editMode, 'enabled', payload);
},
setOutputPanelEditModeValue: (state: IUiState, payload: string) => {
Vue.set(state.ndv.output.editMode, 'value', payload);
},
setMainPanelRelativePosition(state: IUiState, relativePosition: number) {
state.mainPanelPosition = relativePosition;
},
setMappableNDVInputFocus(state: IUiState, paramName: string) {
Vue.set(state.ndv, 'focusedMappableInput', paramName);
},
draggableStartDragging(state: IUiState, {type, data}: {type: string, data: string}) {
state.draggable = {
isDragging: true,
type,
data,
canDrop: false,
stickyPosition: null,
};
},
draggableStopDragging(state: IUiState) {
state.draggable = {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
};
},
setDraggableStickyPos(state: IUiState, position: XYPosition | null) {
Vue.set(state.draggable, 'stickyPosition', position);
},
setDraggableCanDrop(state: IUiState, canDrop: boolean) {
Vue.set(state.draggable, 'canDrop', canDrop);
},
setMappingTelemetry(state: IUiState, telemetry: {[key: string]: string | number | boolean}) {
state.ndv.mappingTelemetry = {...state.ndv.mappingTelemetry, ...telemetry};
},
resetMappingTelemetry(state: IUiState) {
state.ndv.mappingTelemetry = {};
},
setHoveringItem(state: IUiState, item: null | IUiState['ndv']['hoveringItem']) {
Vue.set(state.ndv, 'hoveringItem', item);
},
setNDVBranchIndex(state: IUiState, e: {pane: 'input' | 'output', branchIndex: number}) {
Vue.set(state.ndv[e.pane], 'branch', e.branchIndex);
},
setNDVPanelDataIsEmpty(state: IUiState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
Vue.set(state.ndv[payload.panel].data, 'isEmpty', payload.isEmpty);
},
},
actions: {
openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {

2
packages/editor-ui/src/plugins/i18n/index.ts
View file

@ -189,7 +189,7 @@ export class I18nClass {
* except for `eventTriggerDescription`.
*/
nodeText () {
const activeNode = this.$store.getters.activeNode;
const activeNode = this.$store.getters['ndv/activeNode'];
const nodeType = activeNode ? this.shortNodeType(activeNode.type) : ''; // unused in eventTriggerDescription
const initialKey = `n8n-nodes-base.nodes.${nodeType}.nodeView`;
const context = this;

21
packages/editor-ui/src/store.ts
View file

@ -37,6 +37,7 @@ import {
} from './Interface';
import nodeTypes from './modules/nodeTypes';
import ndv from './modules/ndv';
import credentials from './modules/credentials';
import settings from './modules/settings';
import tags from './modules/tags';
@ -59,7 +60,6 @@ const state: IRootState = {
activeExecutions: [],
activeWorkflows: [],
activeActions: [],
activeNode: null,
activeCredentialType: null,
// @ts-ignore
baseUrl: import.meta.env.VUE_APP_URL_BASE_API ?? window.BASE_PATH ?? '/',
@ -122,6 +122,7 @@ const modules = {
ui,
communityNodes,
nodeCreator,
ndv,
};
export const store = new Vuex.Store({
@ -656,13 +657,9 @@ export const store = new Vuex.Store({
setIsNpmAvailable(state, isNpmAvailable: boolean) {
Vue.set(state, 'isNpmAvailable', isNpmAvailable);
},
setActiveNode(state, nodeName: string) {
state.activeNode = nodeName;
},
setActiveCredentialType(state, activeCredentialType: string) {
state.activeCredentialType = activeCredentialType;
},
setLastSelectedNode(state, nodeName: string) {
state.lastSelectedNode = nodeName;
},
@ -949,7 +946,6 @@ export const store = new Vuex.Store({
/**
* Pin data
*/
pinData: (state): IPinData | undefined => {
return state.workflow.pinData;
},
@ -958,10 +954,11 @@ export const store = new Vuex.Store({
return state.workflow.pinData[nodeName].map(item => item.json);
},
pinDataSize: (state) => {
pinDataSize: (state, getters, rootState, rootGetters) => {
const activeNode = rootGetters['ndv/activeNodeName'];
return state.workflow.nodes
.reduce((acc, node) => {
if (typeof node.pinData !== 'undefined' && node.name !== state.activeNode) {
if (typeof node.pinData !== 'undefined' && node.name !== activeNode) {
acc += stringSizeInBytes(node.pinData);
}
@ -969,6 +966,11 @@ export const store = new Vuex.Store({
}, 0);
},
activeNode: (state, getters, rootState, rootGetters): INodeUi | null => {
// kept here for FE hooks
return rootGetters['ndv/activeNode'];
},
/**
* Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc.
*/
@ -982,9 +984,6 @@ export const store = new Vuex.Store({
return acc;
}, []);
},
activeNode: (state, getters): INodeUi | null => {
return getters.getNodeByName(state.activeNode);
},
lastSelectedNode: (state, getters): INodeUi | null => {
return getters.getNodeByName(state.lastSelectedNode);
},

10
packages/editor-ui/src/views/NodeView.vue
View file

@ -327,7 +327,7 @@ export default mixins(
},
...mapGetters(['nativelyNumberSuffixedDefaults']),
activeNode(): INodeUi | null {
return this.$store.getters.activeNode;
return this.$store.getters['ndv/activeNode'];
},
executionWaitingForWebhook(): boolean {
return this.$store.getters.executionWaitingForWebhook;
@ -817,7 +817,7 @@ export default mixins(
this.createNodeActive = false;
if (this.activeNode) {
this.$externalHooks().run('dataDisplay.nodeEditingFinished');
this.$store.commit('setActiveNode', null);
this.$store.commit('ndv/setActiveNodeName', null);
}
return;
@ -904,7 +904,7 @@ export default mixins(
if (lastSelectedNode.type === STICKY_NODE_TYPE && this.isReadOnly) {
return;
}
this.$store.commit('setActiveNode', lastSelectedNode.name);
this.$store.commit('ndv/setActiveNodeName', lastSelectedNode.name);
}
} else if (e.key === 'ArrowRight' && e.shiftKey === true) {
// Select all downstream nodes
@ -1510,7 +1510,7 @@ export default mixins(
this.newNodeInsertPosition = null;
if (setActive === true) {
this.$store.commit('setActiveNode', node.name);
this.$store.commit('ndv/setActiveNodeName', node.name);
}
},
showMaxNodeTypeError(nodeTypeData: INodeTypeDescription) {
@ -2694,7 +2694,7 @@ export default mixins(
this.nodeSelectedByName(newName);
if (isActive) {
this.$store.commit('setActiveNode', newName);
this.$store.commit('ndv/setActiveNodeName', newName);
this.renamingActive = false;
}
},