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

refactor(editor): Finish pinia migration, remove all vuex dependancies (#4533)

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, fixing 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
* ✨ Started migrating the `credentials` module to pinia
* 👌 Addressing PR review comments
* ✨ Migrated permissions module to pinia
* ✨ Migrated `nodeCreator`, `tags` and `versions` modules to pinia
* ✨ Implemented webhooks pinia store
* ⚡ Removing all leftover vuex files and references
* ✨ Removing final vuex refs
* ⚡ Updating expected credentialId type
* ⚡ Removing node credentials subscription code, reducing node click debounce timeout
* 🐛 Fixing pushing nodes downstream when inserting new node
* ✔️ Fixing a lint error in new type guard
* ⚡ Updating helper reference
* ✔️ Removing unnecessary awaits
* ⚡ fix(editor): remove unnecessary imports from NDV
* ⚡ Merging mapStores blocks in NodeView
* ⚡ fix(editor): make sure JS Plumb not loaded earlier than needed
* ⚡ Updating type guard nad credentials subscriptions
* ⚡ Updating type guard so it doesn't use `any` type

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>
This commit is contained in:
Milorad FIlipović
2022-11-09 10:01:50 +01:00
committed by GitHub
parent 825637f02a
commit bae3098e4e
69 changed files with 891 additions and 947 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
View File

@@ -96,6 +96,7 @@ import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows';
import { useRootStore } from '@/stores/n8nRootStore';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
export default mixins(externalHooks, globalLinkActions).extend({
name: 'CategorizedItems',
@@ -146,11 +147,12 @@ export default mixins(externalHooks, globalLinkActions).extend({
this.registerCustomAction('showAllNodeCreatorNodes', this.switchToAllTabAndFilter);
},
destroyed() {
this.$store.commit('nodeCreator/setFilter', '');
this.nodeCreatorStore.itemsFilter = '';
this.unregisterCustomAction('showAllNodeCreatorNodes');
},
computed: {
...mapStores(
useNodeCreatorStore,
useNodeTypesStore,
useRootStore,
useWorkflowsStore,
@@ -159,10 +161,10 @@ export default mixins(externalHooks, globalLinkActions).extend({
return this.activeSubcategoryHistory[this.activeSubcategoryHistory.length - 1] || null;
},
nodeFilter(): string {
return this.$store.getters['nodeCreator/itemsFilter'];
return this.nodeCreatorStore.itemsFilter;
},
selectedType(): INodeFilterType {
return this.$store.getters['nodeCreator/selectedType'];
return this.nodeCreatorStore.selectedType;
},
categoriesWithNodes(): ICategoriesWithNodes {
return this.nodeTypesStore.categoriesWithNodes;
@@ -363,14 +365,14 @@ export default mixins(externalHooks, globalLinkActions).extend({
},
switchToAllTabAndFilter() {
const currentFilter = this.nodeFilter;
this.$store.commit('nodeCreator/setShowTabs', true);
this.$store.commit('nodeCreator/setSelectedType', ALL_NODE_FILTER);
this.nodeCreatorStore.showTabs = true;
this.nodeCreatorStore.selectedType = ALL_NODE_FILTER;
this.activeSubcategoryHistory = [];
this.$nextTick(() => this.$store.commit('nodeCreator/setFilter', currentFilter));
this.$nextTick(() => this.nodeCreatorStore.itemsFilter = currentFilter);
},
onNodeFilterChange(filter: string) {
this.$store.commit('nodeCreator/setFilter', filter);
this.nodeCreatorStore.itemsFilter = filter;
},
selectWebhook() {
this.$emit('nodeTypeSelected', WEBHOOK_NODE_TYPE);
@@ -462,7 +464,7 @@ export default mixins(externalHooks, globalLinkActions).extend({
},
onSubcategorySelected(selected: INodeCreateElement) {
this.$emit('onSubcategorySelected', selected);
this.$store.commit('nodeCreator/setShowTabs', false);
this.nodeCreatorStore.showTabs = false;
this.activeSubcategoryIndex = 0;
this.activeSubcategoryHistory.push(selected);
this.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: this.workflowsStore.workflowId });
@@ -472,10 +474,10 @@ export default mixins(externalHooks, globalLinkActions).extend({
this.$emit('subcategoryClose', this.activeSubcategory);
this.activeSubcategoryHistory.pop();
this.activeSubcategoryIndex = 0;
this.$store.commit('nodeCreator/setFilter', '');
this.nodeCreatorStore.itemsFilter = '';
if(!this.$store.getters['nodeCreator/showScrim']) {
this.$store.commit('nodeCreator/setShowTabs', true);
if (!this.nodeCreatorStore.showScrim) {
this.nodeCreatorStore.showTabs = true;
}
},

4
packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
View File

@@ -20,6 +20,7 @@ import { INodeCreateElement, ICategoriesWithNodes } from '@/Interface';
import { NODE_TYPE_COUNT_MAPPER } from '@/constants';
import { mapStores } from 'pinia';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
export default Vue.extend({
@@ -30,10 +31,11 @@ export default Vue.extend({
},
computed: {
...mapStores(
useNodeCreatorStore,
useNodeTypesStore,
),
selectedType(): "Regular" | "Trigger" | "All" {
return this.$store.getters['nodeCreator/selectedType'];
return this.nodeCreatorStore.selectedType;
},
categoriesWithNodes(): ICategoriesWithNodes {
return this.nodeTypesStore.categoriesWithNodes;

8
packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
View File

@@ -35,6 +35,7 @@ import TypeSelector from './TypeSelector.vue';
import { INodeCreateElement } from '@/Interface';
import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
export default mixins(externalHooks).extend({
name: 'NodeCreateList',
@@ -58,10 +59,11 @@ export default mixins(externalHooks).extend({
},
computed: {
...mapStores(
useNodeCreatorStore,
useWorkflowsStore,
),
selectedType(): string {
return this.$store.getters['nodeCreator/selectedType'];
return this.nodeCreatorStore.selectedType;
},
},
watch: {
@@ -80,10 +82,10 @@ export default mixins(externalHooks).extend({
mounted() {
this.$externalHooks().run('nodeCreateList.mounted');
// Make sure tabs are visible on mount
this.$store.commit('nodeCreator/setShowTabs', true);
this.nodeCreatorStore.showTabs = true;
},
destroyed() {
this.$store.commit('nodeCreator/setSelectedType', ALL_NODE_FILTER);
this.nodeCreatorStore.selectedType = ALL_NODE_FILTER;
this.$externalHooks().run('nodeCreateList.destroyed');
this.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: this.workflowsStore.workflowId });
},

6
packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
View File

@@ -32,6 +32,7 @@ import MainPanel from './MainPanel.vue';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
export default Vue.extend({
name: 'NodeCreator',
@@ -46,11 +47,12 @@ export default Vue.extend({
},
computed: {
...mapStores(
useNodeCreatorStore,
useNodeTypesStore,
useUIStore,
),
showScrim(): boolean {
return this.$store.getters['nodeCreator/showScrim'];
return this.nodeCreatorStore.showScrim;
},
visibleNodeTypes(): INodeTypeDescription[] {
return this.nodeTypesStore.visibleNodeTypes;
@@ -104,7 +106,7 @@ export default Vue.extend({
},
watch: {
active(isActive) {
if(isActive === false) this.$store.commit('nodeCreator/setShowScrim', false);
if(isActive === false) this.nodeCreatorStore.showScrim = false;
},
},
});

14
packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
View File

@@ -10,6 +10,9 @@
<script lang="ts">
import { ALL_NODE_FILTER, REGULAR_NODE_FILTER, TRIGGER_NODE_FILTER } from '@/constants';
import { INodeFilterType } from '@/Interface';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
import { mapStores } from 'pinia';
import Vue from 'vue';
export default Vue.extend({
@@ -22,16 +25,19 @@ export default Vue.extend({
};
},
methods: {
setType(type: string) {
this.$store.commit('nodeCreator/setSelectedType', type);
setType(type: INodeFilterType) {
this.nodeCreatorStore.selectedType = type;
},
},
computed: {
...mapStores(
useNodeCreatorStore,
),
showTabs(): boolean {
return this.$store.getters['nodeCreator/showTabs'];
return this.nodeCreatorStore.showTabs;
},
selectedType(): string {
return this.$store.getters['nodeCreator/selectedType'];
return this.nodeCreatorStore.selectedType;
},
},
});