admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues 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

78
packages/editor-ui/src/components/NodeCredentials.vue
View File

@@ -69,7 +69,6 @@ import {
ICredentialType,
INodeCredentialDescription,
INodeCredentialsDetails,
INodeTypeDescription,
} from 'n8n-workflow';
import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -78,8 +77,6 @@ import { showMessage } from '@/components/mixins/showMessage';
import TitledList from '@/components/TitledList.vue';
import { mapGetters } from "vuex";
import mixins from 'vue-typed-mixins';
import {getCredentialPermissions} from "@/permissions";
import { mapStores } from 'pinia';
@@ -87,6 +84,7 @@ import { useUIStore } from '@/stores/ui';
import { useUsersStore } from '@/stores/users';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
export default mixins(
genericHelpers,
@@ -105,20 +103,23 @@ export default mixins(
data () {
return {
NEW_CREDENTIALS_TEXT: `- ${this.$locale.baseText('nodeCredentials.createNew')} -`,
newCredentialUnsubscribe: null as null | (() => void),
subscribedToCredentialType: '',
};
},
mounted() {
this.listenForNewCredentials();
},
computed: {
...mapStores(
useCredentialsStore,
useNodeTypesStore,
useUIStore,
useUsersStore,
useWorkflowsStore,
),
...mapGetters('credentials', {
allCredentialsByType: 'allCredentialsByType',
getCredentialTypeByName: 'getCredentialTypeByName',
}),
allCredentialsByType(): {[type: string]: ICredentialsResponse[]} {
return this.credentialsStore.allCredentialsByType;
},
currentUser (): IUser {
return this.usersStore.currentUser || {} as IUser;
},
@@ -135,7 +136,7 @@ export default mixins(
credentialTypesNodeDescription (): INodeCredentialDescription[] {
const node = this.node as INodeUi;
const credType = this.getCredentialTypeByName(this.overrideCredType);
const credType = this.credentialsStore.getCredentialTypeByName(this.overrideCredType);
if (credType) return [credType];
@@ -152,7 +153,7 @@ export default mixins(
} = {};
let credentialType: ICredentialType | null;
for (const credentialTypeName of this.credentialTypesNode) {
credentialType = this.$store.getters['credentials/getCredentialTypeByName'](credentialTypeName);
credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeName);
returnData[credentialTypeName] = credentialType !== null ? credentialType.displayName : credentialTypeName;
}
return returnData;
@@ -165,7 +166,7 @@ export default mixins(
methods: {
getCredentialOptions(type: string): ICredentialsResponse[] {
return (this.allCredentialsByType as Record<string, ICredentialsResponse[]>)[type].filter((credential) => {
const permissions = getCredentialPermissions(this.currentUser, credential, this.$store);
const permissions = getCredentialPermissions(this.currentUser, credential);
return permissions.use;
});
@@ -191,27 +192,31 @@ export default mixins(
return styles;
},
listenForNewCredentials(credentialType: string) {
this.stopListeningForNewCredentials();
this.newCredentialUnsubscribe = this.$store.subscribe((mutation, state) => {
if (mutation.type === 'credentials/upsertCredential' || mutation.type === 'credentials/enableOAuthCredential'){
this.onCredentialSelected(credentialType, mutation.payload.id);
}
if (mutation.type === 'credentials/deleteCredential') {
this.clearSelectedCredential(credentialType);
this.stopListeningForNewCredentials();
// TODO: Investigate if this can be solved using only the store data (storing selected flag in credentials objects, ...)
listenForNewCredentials() {
// Listen for credentials store changes so credential selection can be updated if creds are changed from the modal
this.credentialsStore.$subscribe((mutation, state) => {
// This data pro stores credential type that the component is currently interested in
const credentialType = this.subscribedToCredentialType;
const credentialsOfType = this.credentialsStore.allCredentialsByType[credentialType].sort((a, b) => (a.id < b.id ? -1 : 1));
if (credentialsOfType.length > 0) {
// If nothing has been selected previously, select the first one (newly added)
if (!this.selected[credentialType]) {
this.onCredentialSelected(credentialType, credentialsOfType[0].id);
} else {
// Else, check id currently selected cred has been updated
const newSelected = credentialsOfType.find(cred => cred.id === this.selected[credentialType].id);
// If it has changed, select it
if (newSelected && newSelected.name !== this.selected[credentialType].name) {
this.onCredentialSelected(credentialType, newSelected.id);
} else { // Else select the last cred with that type since selected has been deleted or a new one has been added
this.onCredentialSelected(credentialType, credentialsOfType[credentialsOfType.length - 1].id);
}
}
}
this.subscribedToCredentialType = '';
});
},
stopListeningForNewCredentials() {
if (this.newCredentialUnsubscribe) {
this.newCredentialUnsubscribe();
}
},
clearSelectedCredential(credentialType: string) {
const node: INodeUi = this.node;
@@ -233,7 +238,10 @@ export default mixins(
onCredentialSelected (credentialType: string, credentialId: string | null | undefined) {
if (credentialId === this.NEW_CREDENTIALS_TEXT) {
this.listenForNewCredentials(credentialType);
// this.listenForNewCredentials(credentialType);
this.subscribedToCredentialType = credentialType;
}
if (!credentialId || credentialId === this.NEW_CREDENTIALS_TEXT) {
this.uiStore.openNewCredential(credentialType);
this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: true, workflow_id: this.workflowsStore.workflowId });
return;
@@ -250,13 +258,13 @@ export default mixins(
},
);
const selectedCredentials = this.$store.getters['credentials/getCredentialById'](credentialId);
const selectedCredentials = this.credentialsStore.getCredentialById(credentialId);
const oldCredentials = this.node.credentials && this.node.credentials[credentialType] ? this.node.credentials[credentialType] : {};
const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
// if credentials has been string or neither id matched nor name matched uniquely
if (oldCredentials.id === null || (oldCredentials.id && !this.$store.getters['credentials/getCredentialByIdAndType'](oldCredentials.id, credentialType))) {
if (oldCredentials.id === null || (oldCredentials.id && !this.credentialsStore.getCredentialByIdAndType(oldCredentials.id, credentialType))) {
// update all nodes in the workflow with the same old/invalid credentials
this.workflowsStore.replaceInvalidWorkflowCredentials({
credentials: selected,
@@ -333,13 +341,9 @@ export default mixins(
this.uiStore.openExistingCredential(id);
this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: false, workflow_id: this.workflowsStore.workflowId });
this.listenForNewCredentials(credentialType);
this.subscribedToCredentialType = credentialType;
},
},
beforeDestroy () {
this.stopListeningForNewCredentials();
},
});
</script>