mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* ✨ 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
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
View File

@@ -43,12 +43,14 @@
<script lang="ts">
import mixins from "vue-typed-mixins";
import { IExecutionResponse } from "../../../Interface";
import { IExecutionResponse, IExecutionsSummary } from "../../../Interface";
import { titleChange } from "@/components/mixins/titleChange";
import ShortenName from "@/components/ShortenName.vue";
import ReadOnly from "@/components/MainHeader/ExecutionDetails/ReadOnly.vue";
import { mapStores } from "pinia";
import { useWorkflowsStore } from "@/stores/workflows";
export default mixins(titleChange).extend({
name: "ExecutionDetails",
@@ -57,24 +59,27 @@ export default mixins(titleChange).extend({
ReadOnly,
},
computed: {
...mapStores(
useWorkflowsStore,
),
executionId(): string | undefined {
return this.$route.params.id;
},
executionFinished(): boolean {
const fullExecution = this.$store.getters.getWorkflowExecution;
const fullExecution = this.workflowsStore.getWorkflowExecution;
return !!fullExecution && fullExecution.finished;
},
executionWaiting(): boolean {
const fullExecution = this.$store.getters.getWorkflowExecution;
const fullExecution = this.workflowsStore.getWorkflowExecution as IExecutionsSummary;
return !!fullExecution && !!fullExecution.waitTill;
},
workflowExecution(): IExecutionResponse | null {
return this.$store.getters.getWorkflowExecution;
return this.workflowsStore.getWorkflowExecution;
},
workflowName(): string {
return this.$store.getters.workflowName;
return this.workflowsStore.workflowName;
},
},
methods: {

28
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div :class="{'main-header': true, expanded: !sidebarMenuCollapsed}">
<div :class="{'main-header': true, expanded: !this.uiStore.sidebarMenuCollapsed}">
<div v-show="!hideMenuBar" class="top-menu">
<ExecutionDetails v-if="isExecutionPage" />
<WorkflowDetails v-else />
@@ -12,7 +12,6 @@
<script lang="ts">
import mixins from 'vue-typed-mixins';
import { mapGetters } from 'vuex';
import { pushConnection } from '@/components/mixins/pushConnection';
import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
import ExecutionDetails from '@/components/MainHeader/ExecutionDetails/ExecutionDetails.vue';
@@ -21,6 +20,9 @@ import { MAIN_HEADER_TABS, PLACEHOLDER_EMPTY_WORKFLOW_ID, STICKY_NODE_TYPE, VIEW
import { IExecutionsSummary, INodeUi, ITabBarItem } from '@/Interface';
import { workflowHelpers } from '../mixins/workflowHelpers';
import { Route } from 'vue-router';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useNDVStore } from '@/stores/ndv';
export default mixins(
pushConnection,
@@ -36,13 +38,14 @@ export default mixins(
return {
activeHeaderTab: MAIN_HEADER_TABS.WORKFLOW,
workflowToReturnTo: '',
dirtyState: this.$store.getters.getStateIsDirty,
dirtyState: false,
};
},
computed: {
...mapGetters('ui', [
'sidebarMenuCollapsed',
]),
...mapStores(
useNDVStore,
useUIStore,
),
tabBarItems(): ITabBarItem[] {
return [
{ value: MAIN_HEADER_TABS.WORKFLOW, label: this.$locale.baseText('generic.workflow') },
@@ -53,25 +56,26 @@ export default mixins(
return this.$route.name === VIEWS.EXECUTION;
},
activeNode (): INodeUi | null {
return this.$store.getters['ndv/activeNode'];
return this.ndvStore.activeNode;
},
hideMenuBar(): boolean {
return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);
},
workflowName (): string {
return this.$store.getters.workflowName;
return this.workflowsStore.workflowName;
},
currentWorkflow (): string {
return this.$route.params.name || this.$store.getters.workflowId;
return this.$route.params.name || this.workflowsStore.workflowId;
},
onWorkflowPage(): boolean {
return this.$route.meta && (this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true);
},
activeExecution(): IExecutionsSummary {
return this.$store.getters['workflows/getActiveWorkflowExecution'];
return this.workflowsStore.activeWorkflowExecution as IExecutionsSummary;
},
},
mounted() {
this.dirtyState = this.uiStore.stateIsDirty;
this.syncTabsWithRoute(this.$route);
// Initialize the push connection
this.pushConnect();
@@ -109,13 +113,13 @@ export default mixins(
} else {
if (this.$route.name !== VIEWS.NEW_WORKFLOW) {
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
this.$store.commit('setStateDirty', this.dirtyState);
this.uiStore.stateIsDirty = this.dirtyState;
}
}
this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
break;
case MAIN_HEADER_TABS.EXECUTIONS:
this.dirtyState = this.$store.getters.getStateIsDirty;
this.dirtyState = this.uiStore.stateIsDirty;
this.workflowToReturnTo = this.currentWorkflow;
const routeWorkflowId = this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
if (this.activeExecution) {

7
packages/editor-ui/src/components/MainHeader/TabBar.vue
View File

@@ -12,6 +12,8 @@
import Vue, { PropType } from 'vue';
import { ITabBarItem } from '@/Interface';
import { MAIN_HEADER_TABS } from '@/constants';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
export default Vue.extend({
name: 'tab-bar',
@@ -31,8 +33,11 @@ export default Vue.extend({
},
},
computed: {
...mapStores(
useUIStore,
),
mainSidebarCollapsed(): boolean {
return this.$store.getters['ui/sidebarMenuCollapsed'];
return this.uiStore.sidebarMenuCollapsed;
},
},
methods: {

57
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View File

@@ -23,7 +23,7 @@
</template>
</BreakpointsObserver>
<span v-if="areTagsEnabled" class="tags">
<span v-if="settingsStore.areTagsEnabled" class="tags">
<div
v-if="isTagsEditEnabled">
<TagsDropdown
@@ -105,6 +105,11 @@ import { IWorkflowDataUpdate, IWorkflowToShare } from "@/Interface";
import { saveAs } from 'file-saver';
import { titleChange } from "../mixins/titleChange";
import type { MessageBoxInputData } from 'element-ui/types/message-box';
import { mapStores } from "pinia";
import { useUIStore } from "@/stores/ui";
import { useSettingsStore } from "@/stores/settings";
import { useWorkflowsStore } from "@/stores/workflows";
import { useRootStore } from "@/stores/n8nRootStore";
const hasChanged = (prev: string[], curr: string[]) => {
if (prev.length !== curr.length) {
@@ -138,24 +143,32 @@ export default mixins(workflowHelpers, titleChange).extend({
};
},
computed: {
...mapGetters({
isWorkflowActive: "isActive",
workflowName: "workflowName",
isDirty: "getStateIsDirty",
currentWorkflowTagIds: "workflowTags",
}),
...mapGetters('settings', ['areTagsEnabled']),
...mapStores(
useRootStore,
useSettingsStore,
useUIStore,
useWorkflowsStore,
),
isWorkflowActive(): boolean {
return this.workflowsStore.isWorkflowActive;
},
workflowName(): string {
return this.workflowsStore.workflowName;
},
isDirty(): boolean {
return this.uiStore.stateIsDirty;
},
currentWorkflowTagIds(): string[] {
return this.workflowsStore.workflowTags;
},
isNewWorkflow(): boolean {
return !this.currentWorkflowId || (this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || this.currentWorkflowId === 'new');
},
isWorkflowSaving(): boolean {
return this.$store.getters.isActionActive("workflowSaving");
return this.uiStore.isActionActive('workflowSaving');
},
currentWorkflowId(): string {
return this.$store.getters.workflowId;
},
workflowName (): string {
return this.$store.getters.workflowName;
return this.workflowsStore.workflowId;
},
onWorkflowPage(): boolean {
return this.$route.meta && (this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true);
@@ -209,7 +222,7 @@ export default mixins(workflowHelpers, titleChange).extend({
currentId = this.$route.params.name;
}
const saved = await this.saveCurrentWorkflow({ id: currentId, name: this.workflowName, tags: this.currentWorkflowTagIds });
if (saved) this.$store.dispatch('settings/fetchPromptsData');
if (saved) await this.settingsStore.fetchPromptsData();
},
onTagsEditEnable() {
this.$data.appliedTagIds = this.currentWorkflowTagIds;
@@ -314,12 +327,12 @@ export default mixins(workflowHelpers, titleChange).extend({
async onWorkflowMenuSelect(action: string): Promise<void> {
switch (action) {
case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
await this.$store.dispatch('ui/openModalWithData', {
this.uiStore.openModalWithData({
name: DUPLICATE_MODAL_KEY,
data: {
id: this.$store.getters.workflowId,
name: this.$store.getters.workflowName,
tags: this.$store.getters.workflowTags,
id: this.workflowsStore.workflowId,
name: this.workflowsStore.workflowName,
tags: this.workflowsStore.workflowTags,
},
});
break;
@@ -334,7 +347,7 @@ export default mixins(workflowHelpers, titleChange).extend({
const exportData: IWorkflowToShare = {
...data,
meta: {
instanceId: this.$store.getters.instanceId,
instanceId: this.rootStore.instanceId,
},
tags: (tags || []).map(tagId => {
const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
@@ -347,7 +360,7 @@ export default mixins(workflowHelpers, titleChange).extend({
type: 'application/json;charset=utf-8',
});
let workflowName = this.$store.getters.workflowName || 'unsaved_workflow';
let workflowName = this.workflowName || 'unsaved_workflow';
workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
@@ -376,7 +389,7 @@ export default mixins(workflowHelpers, titleChange).extend({
break;
}
case WORKFLOW_MENU_ACTIONS.SETTINGS: {
this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
break;
}
case WORKFLOW_MENU_ACTIONS.DELETE: {
@@ -404,7 +417,7 @@ export default mixins(workflowHelpers, titleChange).extend({
);
return;
}
this.$store.commit('setStateDirty', false);
this.uiStore.stateIsDirty = false;
// Reset tab title since workflow is deleted.
this.$titleReset();
this.$showMessage({