refactor(editor): Migrate part of the vuex store to pinia (#4484)

*  Added pinia support. Migrated community nodes module.
*  Added ui pinia store, moved some data from root store to it, updated modals to work with pinia stores
*  Added ui pinia store and migrated a part of the root store
*  Migrated `settings` store to pinia
*  Removing vuex store refs from router
*  Migrated `users` module to pinia store
*  Fixing errors after sync with master
*  One more error after merge
*  Created `workflows` pinia store. Moved large part of root store to it. Started updating references.
*  Finished migrating workflows store to pinia
*  Renaming some getters and actions to make more sense
*  Finished migrating the root store to pinia
*  Migrated ndv store to pinia
*  Renaming main panel dimensions getter so it doesn't clash with data prop name
* ✔️ Fixing lint errors
*  Migrated `templates` store to pinia
*  Migrated the `nodeTypes`store
*  Removed unused pieces of code and oold vuex modules
*  Adding vuex calls to pinia store, fi	xing wrong references
* 💄 Removing leftover $store refs
*  Added legacy getters and mutations to store to support webhooks
*  Added missing front-end hooks, updated vuex state subscriptions to pinia
* ✔️ Fixing linting errors
*  Removing vue composition api plugin
*  Fixing main sidebar state when loading node view
* 🐛 Fixing an error when activating workflows
* 🐛 Fixing isses with workflow settings and executions auto-refresh
* 🐛 Removing duplicate listeners which cause import error
* 🐛 Fixing route authentication
*  Updating freshly pulled $store refs
* Adding deleted const
*  Updating store references in ee features. Reseting NodeView credentials update flag when resetting workspace
*  Adding return type to email submission modal
*  Making NodeView only react to paste event when active
* 🐛 Fixing signup view errors
* 👌 Addressing PR review comments
* 👌 Addressing new PR comments
* 👌 Updating invite id logic in signup view
This commit is contained in:
Milorad FIlipović
2022-11-04 14:04:31 +01:00
committed by GitHub
parent c2c7927414
commit 40e413d958
160 changed files with 5141 additions and 4378 deletions

View File

@@ -111,8 +111,13 @@ import mixins from 'vue-typed-mixins';
import { get } from 'lodash';
import { getStyleTokenValue, getTriggerNodeServiceName } from './helpers';
import { INodeUi, XYPosition } from '@/Interface';
import { IExecutionsSummary, INodeUi, XYPosition } from '@/Interface';
import { debounceHelper } from './mixins/debounce';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv';
import { useNodeTypesStore } from '@/stores/nodeTypes';
export default mixins(
externalHooks,
@@ -128,6 +133,12 @@ export default mixins(
NodeIcon,
},
computed: {
...mapStores(
useNodeTypesStore,
useNDVStore,
useUIStore,
useWorkflowsStore,
),
isDuplicatable(): boolean {
if(!this.nodeType) return true;
return this.nodeType.maxNodes === undefined || this.sameTypeNodes.length < this.nodeType.maxNodes;
@@ -136,7 +147,7 @@ export default mixins(
return this.nodeType?.group.includes('schedule') === true;
},
nodeRunData(): ITaskData[] {
return this.$store.getters.getWorkflowResultDataByNodeName(this.data.name);
return this.workflowsStore.getWorkflowResultDataByNodeName(this.data?.name || '') || [];
},
hasIssues (): boolean {
if (this.hasPinData) return false;
@@ -154,7 +165,7 @@ export default mixins(
return workflowResultDataNode.length;
},
canvasOffsetPosition() {
return this.$store.getters.getNodeViewOffsetPosition;
return this.uiStore.nodeViewOffsetPosition;
},
getTriggerNodeTooltip (): string | undefined {
if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) {
@@ -179,11 +190,11 @@ export default mixins(
return !!(this.nodeType && this.nodeType.polling);
},
isExecuting (): boolean {
return this.$store.getters.executingNode === this.data.name;
return this.workflowsStore.executingNode === this.data.name;
},
isSingleActiveTriggerNode (): boolean {
const nodes = this.$store.getters.workflowTriggerNodes.filter((node: INodeUi) => {
const nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
const nodes = this.workflowsStore.workflowTriggerNodes.filter((node: INodeUi) => {
const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled;
});
@@ -193,7 +204,7 @@ export default mixins(
return this.data.type === MANUAL_TRIGGER_NODE_TYPE;
},
isTriggerNode (): boolean {
return this.$store.getters['nodeTypes/isTriggerNode'](this.data.type);
return this.nodeTypesStore.isTriggerNode(this.data?.type || '');
},
isTriggerNodeTooltipEmpty () : boolean {
return this.nodeType !== null ? this.nodeType.eventTriggerDescription === '' : false;
@@ -202,13 +213,13 @@ export default mixins(
return this.node && this.node.disabled;
},
nodeType (): INodeTypeDescription | null {
return this.data && this.$store.getters['nodeTypes/getNodeType'](this.data.type, this.data.typeVersion);
return this.data && this.nodeTypesStore.getNodeType(this.data.type, this.data.typeVersion);
},
node (): INodeUi | undefined { // same as this.data but reactive..
return this.$store.getters.nodesByName[this.name] as INodeUi | undefined;
return this.workflowsStore.nodesByName[this.name] as INodeUi | undefined;
},
sameTypeNodes (): INodeUi[] {
return this.$store.getters.allNodes.filter((node: INodeUi) => node.type === this.data.type);
return this.workflowsStore.allNodes.filter((node: INodeUi) => node.type === this.data.type);
},
nodeClass (): object {
return {
@@ -261,7 +272,7 @@ export default mixins(
return this.data.name;
},
waiting (): string | undefined {
const workflowExecution = this.$store.getters.getWorkflowExecution;
const workflowExecution = this.workflowsStore.getWorkflowExecution as IExecutionsSummary;
if (workflowExecution && workflowExecution.waitTill) {
const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
@@ -285,7 +296,7 @@ export default mixins(
return;
},
workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning');
return this.uiStore.isActionActive('workflowRunning');
},
nodeStyle (): object {
let borderColor = getStyleTokenValue('--color-foreground-xdark');
@@ -312,7 +323,7 @@ export default mixins(
return returnStyles;
},
isSelected (): boolean {
return this.$store.getters.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name);
return this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name) !== undefined;
},
shiftOutputCount (): boolean {
return !!(this.nodeType && this.nodeType.outputs.length > 2);
@@ -408,14 +419,14 @@ export default mixins(
},
disableNode () {
this.disableNodes([this.data]);
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'disable', workflow_id: this.$store.getters.workflowId });
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'disable', workflow_id: this.workflowsStore.workflowId });
},
executeNode () {
this.$emit('runWorkflow', this.data.name, 'Node.executeNode');
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'execute', workflow_id: this.$store.getters.workflowId });
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'execute', workflow_id: this.workflowsStore.workflowId });
},
deleteNode () {
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'delete', workflow_id: this.$store.getters.workflowId });
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'delete', workflow_id: this.workflowsStore.workflowId });
Vue.nextTick(() => {
// Wait a tick else vue causes problems because the data is gone
@@ -423,7 +434,7 @@ export default mixins(
});
},
duplicateNode () {
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'duplicate', workflow_id: this.$store.getters.workflowId });
this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'duplicate', workflow_id: this.workflowsStore.workflowId });
Vue.nextTick(() => {
// Wait a tick else vue causes problems because the data is gone
this.$emit('duplicateNode', this.data.name);
@@ -444,7 +455,7 @@ export default mixins(
},
setNodeActive () {
this.$store.commit('ndv/setActiveNodeName', this.data.name);
this.ndvStore.activeNodeName = this.data ? this.data.name : '';
this.pinDataDiscoveryTooltipVisible = false;
},
touchStart () {