1
1
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-19 08:57:09 +03:00

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

*  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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
69 changed files with 891 additions and 947 deletions

View File

@ -76,7 +76,6 @@
"vue2-boring-avatars": "0.3.4",
"vue2-teleport": "^1.0.1",
"vue2-touch-events": "^3.2.1",
"vuex": "^3.6.2",
"xss": "^1.0.10"
},
"devDependencies": {

View File

@ -992,7 +992,7 @@ export interface ICredentialsState {
export interface ITagsState {
tags: { [id: string]: ITag };
isLoading: boolean;
loading: boolean;
fetchedAll: boolean;
fetchedUsageCount: boolean;
}

View File

@ -50,6 +50,7 @@ import dateformat from "dateformat";
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useUsersStore } from '@/stores/users';
import { useCredentialsStore } from '@/stores/credentials';
export const CREDENTIAL_LIST_ITEM_ACTIONS = {
OPEN: 'open',
@ -89,19 +90,24 @@ export default mixins(
},
computed: {
...mapStores(
useCredentialsStore,
useUIStore,
useUsersStore,
),
currentUser (): IUser {
return this.usersStore.currentUser || {} as IUser;
currentUser (): IUser | null {
return this.usersStore.currentUser;
},
credentialType(): ICredentialType {
return this.$store.getters['credentials/getCredentialTypeByName'](this.data.type);
return this.credentialsStore.getCredentialTypeByName(this.data.type);
},
credentialPermissions(): IPermissions {
return getCredentialPermissions(this.currentUser, this.data, this.$store);
credentialPermissions(): IPermissions | null {
return !this.currentUser ? null : getCredentialPermissions(this.currentUser, this.data);
},
actions(): Array<{ label: string; value: string; }> {
if (!this.credentialPermissions) {
return [];
}
return [
{
label: this.$locale.baseText('credentials.item.open'),
@ -136,9 +142,7 @@ export default mixins(
);
if (deleteConfirmed) {
await this.$store.dispatch('credentials/deleteCredential', {
id: this.data.id,
});
this.credentialsStore.deleteCredential({ id: this.data.id });
}
}
},

View File

@ -107,6 +107,7 @@ import { useUIStore } from '@/stores/ui';
import { useWorkflowsStore } from '@/stores/workflows';
import { useRootStore } from '@/stores/n8nRootStore';
import { useNDVStore } from '@/stores/ndv';
import { useCredentialsStore } from '@/stores/credentials';
export default mixins(restApi).extend({
name: 'CredentialConfig',
@ -182,6 +183,7 @@ export default mixins(restApi).extend({
},
computed: {
...mapStores(
useCredentialsStore,
useNDVStore,
useRootStore,
useUIStore,
@ -202,7 +204,7 @@ export default mixins(restApi).extend({
return (this.credentialType as ICredentialType).name;
},
credentialOwnerName(): string {
return this.$store.getters['credentials/getCredentialOwnerName'](this.credentialId);
return this.credentialsStore.getCredentialOwnerName(this.credentialId);
},
documentationUrl(): string {
const type = this.credentialType as ICredentialType;

View File

@ -106,7 +106,6 @@
import Vue from 'vue';
import {
ICredentialsDecryptedResponse,
ICredentialsResponse,
IFakeDoor,
IUser,
@ -150,6 +149,8 @@ import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv';
import { useCredentialsStore } from '@/stores/credentials';
import { isValidCredentialResponse } from '@/typeGuards';
interface NodeAccessMap {
[nodeType: string]: ICredentialNodeAccess | null;
@ -184,7 +185,7 @@ export default mixins(showMessage, nodeHelpers).extend({
return {
activeTab: 'connection',
authError: '',
credentialId: '' as string | number,
credentialId: '',
credentialName: '',
credentialData: {} as ICredentialDataDecryptedObject,
modalBus: new Vue(),
@ -214,18 +215,17 @@ export default mixins(showMessage, nodeHelpers).extend({
{},
);
if (this.mode === 'new') {
this.credentialName = await this.$store.dispatch(
'credentials/getNewCredentialName',
{ credentialTypeName: this.credentialTypeName },
);
if (this.mode === 'new' && this.credentialTypeName) {
this.credentialName = await this.credentialsStore.getNewCredentialName({ credentialTypeName: this.credentialTypeName });
Vue.set(this.credentialData, 'ownedBy', {
id: this.currentUser.id,
firstName: this.currentUser.firstName,
lastName: this.currentUser.lastName,
email: this.currentUser.email,
});
if (this.currentUser) {
Vue.set(this.credentialData, 'ownedBy', {
id: this.currentUser.id,
firstName: this.currentUser.firstName,
lastName: this.currentUser.lastName,
email: this.currentUser.email,
});
}
} else {
await this.loadCurrentCredential();
}
@ -259,23 +259,22 @@ export default mixins(showMessage, nodeHelpers).extend({
},
computed: {
...mapStores(
useCredentialsStore,
useNDVStore,
useSettingsStore,
useUIStore,
useUsersStore,
useWorkflowsStore,
),
currentUser(): IUser {
return this.usersStore.currentUser || {} as IUser;
currentUser(): IUser | null {
return this.usersStore.currentUser;
},
currentCredential(): ICredentialsResponse | null {
if (!this.credentialId) {
return null;
}
return this.$store.getters['credentials/getCredentialById'](
this.credentialId,
);
return this.credentialsStore.getCredentialById(this.credentialId);
},
credentialTypeName(): string | null {
if (this.mode === 'edit') {
@ -293,9 +292,7 @@ export default mixins(showMessage, nodeHelpers).extend({
return null;
}
const type = this.$store.getters['credentials/getCredentialTypeByName'](
this.credentialTypeName,
);
const type = this.credentialsStore.getCredentialTypeByName(this.credentialTypeName);
if (!type) {
return null;
@ -333,9 +330,7 @@ export default mixins(showMessage, nodeHelpers).extend({
},
nodesWithAccess(): INodeTypeDescription[] {
if (this.credentialTypeName) {
return this.$store.getters['credentials/getNodesWithAccess'](
this.credentialTypeName,
);
return this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
}
return [];
@ -408,7 +403,7 @@ export default mixins(showMessage, nodeHelpers).extend({
return {};
}
return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse, this.$store);
return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse);
},
sidebarItems(): IMenuItem[] {
const items: IMenuItem[] = [
@ -502,8 +497,7 @@ export default mixins(showMessage, nodeHelpers).extend({
);
},
getCredentialProperties(name: string): INodeProperties[] {
const credentialTypeData =
this.$store.getters['credentials/getCredentialTypeByName'](name);
const credentialTypeData = this.credentialsStore.getCredentialTypeByName(name);
if (!credentialTypeData) {
return [];
@ -536,9 +530,7 @@ export default mixins(showMessage, nodeHelpers).extend({
this.credentialId = this.activeId;
try {
const currentCredentials: ICredentialsDecryptedResponse = await this.$store.dispatch('credentials/getCredentialData', {
id: this.credentialId,
});
const currentCredentials = await this.credentialsStore.getCredentialData({ id: this.credentialId });
if (!currentCredentials) {
throw new Error(
@ -622,8 +614,7 @@ export default mixins(showMessage, nodeHelpers).extend({
},
getParentTypes(name: string): string[] {
const credentialType =
this.$store.getters['credentials/getCredentialTypeByName'](name);
const credentialType = this.credentialsStore.getCredentialTypeByName(name);
if (
credentialType === undefined ||
@ -691,7 +682,7 @@ export default mixins(showMessage, nodeHelpers).extend({
},
async testCredential(credentialDetails: ICredentialsDecrypted) {
const result: INodeCredentialTestResult = await this.$store.dispatch('credentials/testCredential', credentialDetails);
const result = await this.credentialsStore.testCredential(credentialDetails);
if (result.status === 'Error') {
this.authError = result.message;
this.testedSuccessfully = false;
@ -812,10 +803,7 @@ export default mixins(showMessage, nodeHelpers).extend({
let credential;
try {
credential = (await this.$store.dispatch(
'credentials/createNewCredential',
credentialDetails,
)) as ICredentialsResponse;
credential = await this.credentialsStore.createNewCredential(credentialDetails);
this.hasUnsavedChanges = false;
} catch (error) {
this.$showError(
@ -846,10 +834,7 @@ export default mixins(showMessage, nodeHelpers).extend({
): Promise<ICredentialsResponse | null> {
let credential;
try {
credential = (await this.$store.dispatch(
'credentials/updateCredential',
{ id: this.credentialId, data: credentialDetails },
)) as ICredentialsResponse;
credential = await this.credentialsStore.updateCredential({ id: this.credentialId, data: credentialDetails });
this.hasUnsavedChanges = false;
} catch (error) {
this.$showError(
@ -893,9 +878,7 @@ export default mixins(showMessage, nodeHelpers).extend({
try {
this.isDeleting = true;
await this.$store.dispatch('credentials/deleteCredential', {
id: this.credentialId,
});
this.credentialsStore.deleteCredential({ id: this.credentialId });
this.hasUnsavedChanges = false;
} catch (error) {
this.$showError(
@ -929,22 +912,21 @@ export default mixins(showMessage, nodeHelpers).extend({
const types = this.parentTypes;
try {
const credData = { id: credential.id, ...this.credentialData };
if (
this.credentialTypeName === 'oAuth2Api' ||
types.includes('oAuth2Api')
) {
url = (await this.$store.dispatch('credentials/oAuth2Authorize', {
...this.credentialData,
id: credential.id,
})) as string;
if (isValidCredentialResponse(credData)) {
url = await this.credentialsStore.oAuth2Authorize(credData);
}
} else if (
this.credentialTypeName === 'oAuth1Api' ||
types.includes('oAuth1Api')
) {
url = (await this.$store.dispatch('credentials/oAuth1Authorize', {
...this.credentialData,
id: credential.id,
})) as string;
if (isValidCredentialResponse(credData)) {
url = await this.credentialsStore.oAuth1Authorize(credData);
}
}
} catch (error) {
this.$showError(
@ -971,7 +953,7 @@ export default mixins(showMessage, nodeHelpers).extend({
// Set some kind of data that status changes.
// As data does not get displayed directly it does not matter what data.
Vue.set(this.credentialData, 'oauthTokenData', {});
this.$store.commit('credentials/enableOAuthCredential', credential);
this.credentialsStore.enableOAuthCredential(credential);
// Close the window
if (oauthPopup) {

View File

@ -39,6 +39,7 @@ import mixins from "vue-typed-mixins";
import {showMessage} from "@/components/mixins/showMessage";
import { mapStores } from 'pinia';
import { useUsersStore } from '@/stores/users';
import { useCredentialsStore } from "@/stores/credentials";
export default mixins(
showMessage,
@ -46,7 +47,10 @@ export default mixins(
name: 'CredentialSharing',
props: ['credential', 'credentialId', 'credentialData', 'sharedWith', 'credentialPermissions'],
computed: {
...mapStores(useUsersStore),
...mapStores(
useCredentialsStore,
useUsersStore,
),
usersList(): IUser[] {
return this.usersStore.allUsers.filter((user: IUser) => {
const isCurrentUser = user.id === this.usersStore.currentUser?.id;
@ -64,7 +68,7 @@ export default mixins(
].concat(this.credentialData.sharedWith || []);
},
credentialOwnerName(): string {
return this.$store.getters['credentials/getCredentialOwnerName'](this.credentialId);
return this.credentialsStore.getCredentialOwnerName(this.credentialId);
},
},
methods: {

View File

@ -7,6 +7,7 @@
</template>
<script lang="ts">
import { useCredentialsStore } from '@/stores/credentials';
import { useRootStore } from '@/stores/n8nRootStore';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
@ -21,6 +22,7 @@ export default Vue.extend({
},
computed: {
...mapStores(
useCredentialsStore,
useNodeTypesStore,
useRootStore,
),
@ -42,8 +44,7 @@ export default Vue.extend({
const nodeType = this.credentialWithIcon.icon.replace('node:', '');
return this.nodeTypesStore.getNodeType(nodeType);
}
const nodesWithAccess = this.$store.getters['credentials/getNodesWithAccess'](this.credentialTypeName);
const nodesWithAccess = this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
if (nodesWithAccess.length) {
return nodesWithAccess[0];
@ -53,8 +54,12 @@ export default Vue.extend({
},
},
methods: {
getCredentialWithIcon(name: string): ICredentialType | null {
const type = this.$store.getters['credentials/getCredentialTypeByName'](name);
getCredentialWithIcon(name: string | null): ICredentialType | null {
if (!name) {
return null;
}
const type = this.credentialsStore.getCredentialTypeByName(name);
if (!type) {
return null;
@ -65,9 +70,12 @@ export default Vue.extend({
}
if (type.extends) {
return type.extends.reduce((accu: string | null, type: string) => {
return accu || this.getCredentialWithIcon(type);
}, null);
let parentCred = null;
type.extends.forEach(name => {
parentCred = this.getCredentialWithIcon(name);
if (parentCred !== null) return;
});
return parentCred;
}
return null;

View File

@ -53,9 +53,10 @@
<script lang="ts">
import { ICredentialType } from 'n8n-workflow';
import Vue from 'vue';
import { mapGetters } from 'vuex';
import ScopesNotice from '@/components/ScopesNotice.vue';
import NodeCredentials from '@/components/NodeCredentials.vue';
import { mapStores } from 'pinia';
import { useCredentialsStore } from '@/stores/credentials';
export default Vue.extend({
name: 'CredentialsSelect',
@ -73,11 +74,16 @@ export default Vue.extend({
'displayTitle',
],
computed: {
...mapGetters('credentials', ['allCredentialTypes', 'getScopesByCredentialType']),
...mapStores(
useCredentialsStore,
),
allCredentialTypes(): ICredentialType[] {
return this.credentialsStore.allCredentialTypes;
},
scopes(): string[] {
if (!this.activeCredentialType) return [];
return this.getScopesByCredentialType(this.activeCredentialType);
return this.credentialsStore.getScopesByCredentialType(this.activeCredentialType);
},
supportedCredentialTypes(): ICredentialType[] {
return this.allCredentialTypes.filter((c: ICredentialType) => this.isSupported(c.name));
@ -97,10 +103,10 @@ export default Vue.extend({
isSupported(name: string): boolean {
const supported = this.getSupportedSets(this.parameter.credentialTypes);
const checkedCredType = this.$store.getters['credentials/getCredentialTypeByName'](name);
const checkedCredType = this.credentialsStore.getCredentialTypeByName(name);
for (const property of supported.has) {
if (checkedCredType[property] !== undefined) {
if (checkedCredType[property as keyof ICredentialType] !== undefined) {
// edge case: `httpHeaderAuth` has `authenticate` auth but belongs to generic auth
if (name === 'httpHeaderAuth' && property === 'authenticate') continue;

View File

@ -25,7 +25,7 @@
>
<font-awesome-icon icon="search" slot="prefix" />
<n8n-option
v-for="credential in allCredentialTypes"
v-for="credential in credentialsStore.allCredentialTypes"
:value="credential.name"
:key="credential.name"
:label="credential.displayName"
@ -50,7 +50,6 @@
<script lang="ts">
import Vue from 'vue';
import { mapGetters } from "vuex";
import mixins from 'vue-typed-mixins';
import Modal from './Modal.vue';
@ -59,6 +58,7 @@ import { externalHooks } from '@/components/mixins/externalHooks';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useWorkflowsStore } from '@/stores/workflows';
import { useCredentialsStore } from '@/stores/credentials';
export default mixins(externalHooks).extend({
name: 'CredentialsSelectModal',
@ -67,7 +67,7 @@ export default mixins(externalHooks).extend({
},
async mounted() {
try {
await this.$store.dispatch('credentials/fetchCredentialTypes');
await this.credentialsStore.fetchCredentialTypes(false);
} catch (e) {
}
this.loading = false;
@ -89,10 +89,10 @@ export default mixins(externalHooks).extend({
},
computed: {
...mapStores(
useCredentialsStore,
useUIStore,
useWorkflowsStore,
),
...mapGetters('credentials', ['allCredentialTypes']),
},
methods: {
onSelect(type: string) {

View File

@ -42,6 +42,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
import { useUIStore } from '@/stores/ui';
import { useSettingsStore } from '@/stores/settings';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useTagsStore } from '@/stores/tags';
export default mixins(restApi, showMessage, executionHelpers, debounceHelper, workflowHelpers).extend({
name: 'executions-page',
@ -57,6 +58,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
},
computed: {
...mapStores(
useTagsStore,
useNodeTypesStore,
useSettingsStore,
useUIStore,
@ -374,7 +376,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
this.workflowsStore.setWorkflowTagIds(tagIds || []);
this.workflowsStore.setWorkflowHash(data.hash);
this.$store.commit('tags/upsertTags', tags);
this.tagsStore.upsertTags(tags);
this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
this.uiStore.stateIsDirty = false;

View File

@ -31,7 +31,7 @@ import Modal from "./Modal.vue";
import Vue from "vue";
import { IFormInputs, IInviteResponse } from "@/Interface";
import { VALID_EMAIL_REGEX, INVITE_USER_MODAL_KEY } from "@/constants";
import { ROLE } from "@/modules/userHelpers";
import { ROLE } from "@/stores/userHelpers";
import { mapStores } from "pinia";
import { useUsersStore } from "@/stores/users";

View File

@ -82,7 +82,6 @@
<script lang="ts">
import Vue from "vue";
import mixins from "vue-typed-mixins";
import { mapGetters } from "vuex";
import {
DUPLICATE_MODAL_KEY,
MAX_WORKFLOW_NAME_LENGTH,
@ -110,6 +109,7 @@ import { useUIStore } from "@/stores/ui";
import { useSettingsStore } from "@/stores/settings";
import { useWorkflowsStore } from "@/stores/workflows";
import { useRootStore } from "@/stores/n8nRootStore";
import { useTagsStore } from "@/stores/tags";
const hasChanged = (prev: string[], curr: string[]) => {
if (prev.length !== curr.length) {
@ -144,6 +144,7 @@ export default mixins(workflowHelpers, titleChange).extend({
},
computed: {
...mapStores(
useTagsStore,
useRootStore,
useSettingsStore,
useUIStore,
@ -350,7 +351,7 @@ export default mixins(workflowHelpers, titleChange).extend({
instanceId: this.rootStore.instanceId,
},
tags: (tags || []).map(tagId => {
const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
const {usageCount, ...tag} = this.tagsStore.getTagById(tagId);
return tag;
}),

View File

@ -55,6 +55,7 @@
import {
IExecutionResponse,
IMenuItem,
IVersion,
} from '../Interface';
import ExecutionsList from '@/components/ExecutionsList.vue';
@ -69,7 +70,6 @@ import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { workflowRun } from '@/components/mixins/workflowRun';
import mixins from 'vue-typed-mixins';
import { mapGetters } from 'vuex';
import {
MODAL_CANCEL,
MODAL_CLOSE,
@ -89,6 +89,7 @@ import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';
import { useWorkflowsStore } from '@/stores/workflows';
import { useRootStore } from '@/stores/n8nRootStore';
import { useVersionsStore } from '@/stores/versions';
export default mixins(
genericHelpers,
@ -120,12 +121,15 @@ export default mixins(
useSettingsStore,
useUIStore,
useUsersStore,
useVersionsStore,
useWorkflowsStore,
),
...mapGetters('versions', [
'hasVersionUpdates',
'nextVersions',
]),
hasVersionUpdates(): boolean {
return this.versionsStore.hasVersionUpdates;
},
nextVersions(): IVersion[] {
return this.versionsStore.nextVersions;
},
isCollapsed(): boolean {
return this.uiStore.sidebarMenuCollapsed;
},

View File

@ -442,7 +442,7 @@ export default mixins(
},
onClick(event: MouseEvent) {
this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: true }, event);
this.callDebounced('onClickDebounced', { debounceTime: 50, trailing: true }, event);
},
onClickDebounced(event: MouseEvent) {

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;
}
},

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;

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 });
},

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;
},
},
});

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;
},
},
});

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>

View File

@ -132,7 +132,6 @@ import Vue from 'vue';
import OutputPanel from './OutputPanel.vue';
import InputPanel from './InputPanel.vue';
import TriggerPanel from './TriggerPanel.vue';
import { mapGetters } from 'vuex';
import {
BASE_NODE_SURVEY_URL,
START_NODE_TYPE,

View File

@ -669,7 +669,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
}
// Update the data in vuex
const updateInformation = {
const updateInformation: IUpdateInformation = {
name: node.name,
value: nodeParameters,
};

View File

@ -335,7 +335,6 @@ import { isResourceLocatorValue } from '@/typeGuards';
import mixins from 'vue-typed-mixins';
import { CUSTOM_API_CALL_KEY } from '@/constants';
import { mapGetters } from 'vuex';
import { CODE_NODE_TYPE } from '@/constants';
import { PropType } from 'vue';
import { debounceHelper } from './mixins/debounce';
@ -343,6 +342,7 @@ import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
export default mixins(
externalHooks,
@ -477,11 +477,11 @@ export default mixins(
},
computed: {
...mapStores(
useCredentialsStore,
useNodeTypesStore,
useNDVStore,
useWorkflowsStore,
),
...mapGetters('credentials', ['allCredentialTypes']),
expressionDisplayValue(): string {
if (this.activeDrop || this.forceShowExpression) {
return '';
@ -563,14 +563,14 @@ export default mixins(
returnValue = this.expressionEvaluated;
}
if (this.parameter.type === 'credentialsSelect') {
const credType = this.$store.getters['credentials/getCredentialTypeByName'](this.value);
if (this.parameter.type === 'credentialsSelect' && typeof this.value === 'string') {
const credType = this.credentialsStore.getCredentialTypeByName(this.value);
if (credType) {
returnValue = credType.displayName;
}
}
if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
if (Array.isArray(returnValue) && this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
// Convert the value to rgba that el-color-picker can display it correctly
const bigint = parseInt(returnValue.slice(1), 16);
const h = [];

View File

@ -118,7 +118,7 @@ import { showMessage } from '@/components/mixins/showMessage';
import Modal from './Modal.vue';
import { IFormInputs, IPersonalizationLatestVersion, IPersonalizationSurveyAnswersV3, IUser } from '@/Interface';
import Vue from 'vue';
import { getAccountAge } from '@/modules/userHelpers';
import { getAccountAge } from '@/stores/userHelpers';
import { GenericValue } from 'n8n-workflow';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';

View File

@ -6,8 +6,9 @@
</template>
<script lang="ts">
import { useCredentialsStore } from '@/stores/credentials';
import { mapStores } from 'pinia';
import Vue from 'vue';
import { mapGetters } from 'vuex';
export default Vue.extend({
name: 'ScopesNotice',
@ -16,7 +17,9 @@ export default Vue.extend({
'scopes',
],
computed: {
...mapGetters('credentials', ['getCredentialTypeByName']),
...mapStores(
useCredentialsStore,
),
scopesShortContent (): string {
return this.$locale.baseText(
'nodeSettings.scopes.notice',
@ -46,7 +49,7 @@ export default Vue.extend({
const oauth1Api = this.$locale.baseText('generic.oauth1Api');
const oauth2Api = this.$locale.baseText('generic.oauth2Api');
return this.getCredentialTypeByName(this.activeCredentialType).displayName
return this.credentialsStore.getCredentialTypeByName(this.activeCredentialType).displayName
.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
.trim();
},

View File

@ -44,6 +44,8 @@ import Vue from 'vue';
import { ITag } from '@/Interface';
import IntersectionObserver from './IntersectionObserver.vue';
import IntersectionObserved from './IntersectionObserved.vue';
import { mapStores } from 'pinia';
import { useTagsStore } from '@/stores/tags';
// random upper limit if none is set to minimize performance impact of observers
const DEFAULT_MAX_TAGS_LIMIT = 20;
@ -70,8 +72,11 @@ export default Vue.extend({
};
},
computed: {
...mapStores(
useTagsStore,
),
tags() {
const tags = this.$props.tagIds.map((tagId: string) => this.$store.getters['tags/getTagById'](tagId))
const tags = this.$props.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId))
.filter(Boolean); // if tag has been deleted from store
const limit = this.$props.limit || DEFAULT_MAX_TAGS_LIMIT;

View File

@ -3,7 +3,7 @@
<n8n-select
:popperAppendToBody="false"
:value="appliedTags"
:loading="isLoading"
:loading="tagsStore.isLoading"
:placeholder="placeholder"
:filter-method="filterOptions"
@change="onTagsUpdated"
@ -54,7 +54,6 @@
<script lang="ts">
import mixins from "vue-typed-mixins";
import { mapGetters } from "vuex";
import { ITag } from "@/Interface";
import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
@ -62,6 +61,7 @@ import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
import { showMessage } from "@/components/mixins/showMessage";
import { mapStores } from "pinia";
import { useUIStore } from "@/stores/ui";
import { useTagsStore } from "@/stores/tags";
const MANAGE_KEY = "__manage";
const CREATE_KEY = "__create";
@ -112,11 +112,19 @@ export default mixins(showMessage).extend({
});
}
this.$store.dispatch("tags/fetchAll");
this.tagsStore.fetchAll();
},
computed: {
...mapStores(useUIStore),
...mapGetters("tags", ["allTags", "isLoading", "hasTags"]),
...mapStores(
useTagsStore,
useUIStore,
),
allTags(): ITag[] {
return this.tagsStore.allTags;
},
hasTags(): boolean {
return this.tagsStore.hasTags;
},
options(): ITag[] {
return this.allTags
.filter((tag: ITag) =>
@ -125,7 +133,7 @@ export default mixins(showMessage).extend({
},
appliedTags(): string[] {
return this.$props.currentTagIds.filter((id: string) =>
this.$store.getters['tags/getTagById'](id),
this.tagsStore.getTagById(id),
);
},
},
@ -137,7 +145,7 @@ export default mixins(showMessage).extend({
async onCreate() {
const name = this.$data.filter;
try {
const newTag = await this.$store.dispatch("tags/create", name);
const newTag = await this.tagsStore.create(name);
this.$emit("update", [...this.$props.currentTagIds, newTag.id]);
this.$nextTick(() => this.focusOnTag(newTag.id));

View File

@ -33,7 +33,6 @@
<script lang="ts">
import Vue from "vue";
import mixins from "vue-typed-mixins";
import { mapGetters } from "vuex";
import { ITag } from "@/Interface";
@ -42,16 +41,16 @@ import TagsView from "@/components/TagsManager/TagsView/TagsView.vue";
import NoTagsView from "@/components/TagsManager/NoTagsView.vue";
import Modal from "@/components/Modal.vue";
import { TAGS_MANAGER_MODAL_KEY } from '../../constants';
import { mapStores } from "pinia";
import { useTagsStore } from "@/stores/tags";
export default mixins(showMessage).extend({
name: "TagsManager",
created() {
this.$store.dispatch("tags/fetchAll", {force: true, withUsageCount: true});
this.tagsStore.fetchAll({force: true, withUsageCount: true});
},
data() {
const tagIds = (this.$store.getters['tags/allTags'] as ITag[])
.map((tag) => tag.id);
const tagIds = useTagsStore().allTags.map((tag) => tag.id);
return {
tagIds,
isCreating: false,
@ -65,9 +64,14 @@ export default mixins(showMessage).extend({
Modal,
},
computed: {
...mapGetters("tags", ["isLoading"]),
...mapStores(
useTagsStore,
),
isLoading(): boolean {
return this.tagsStore.isLoading;
},
tags(): ITag[] {
return this.$data.tagIds.map((tagId: string) => this.$store.getters['tags/getTagById'](tagId))
return this.$data.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId))
.filter(Boolean); // if tag is deleted from store
},
hasTags(): boolean {
@ -91,7 +95,7 @@ export default mixins(showMessage).extend({
);
}
const newTag = await this.$store.dispatch("tags/create", name);
const newTag = await this.tagsStore.create(name);
this.$data.tagIds = [newTag.id].concat(this.$data.tagIds);
cb(newTag);
} catch (error) {
@ -109,7 +113,7 @@ export default mixins(showMessage).extend({
},
async onUpdate(id: string, name: string, cb: (tag: boolean, error?: Error) => void) {
const tag = this.$store.getters['tags/getTagById'](id);
const tag = this.tagsStore.getTagById(id);
const oldName = tag.name;
try {
@ -124,7 +128,7 @@ export default mixins(showMessage).extend({
return;
}
const updatedTag = await this.$store.dispatch("tags/rename", { id, name });
const updatedTag = await this.tagsStore.rename({ id, name });
cb(!!updatedTag);
this.$showMessage({
@ -146,11 +150,11 @@ export default mixins(showMessage).extend({
},
async onDelete(id: string, cb: (deleted: boolean, error?: Error) => void) {
const tag = this.$store.getters['tags/getTagById'](id);
const tag = this.tagsStore.getTagById(id);
const name = tag.name;
try {
const deleted = await this.$store.dispatch("tags/delete", id);
const deleted = await this.tagsStore.delete(id);
if (!deleted) {
throw new Error(
this.$locale.baseText('tagsManager.couldNotDeleteTag'),

View File

@ -31,7 +31,6 @@ import Vue from "vue";
import { ITag, ITagRow } from "@/Interface";
import TagsTableHeader from "@/components/TagsManager/TagsView/TagsTableHeader.vue";
import TagsTable from "@/components/TagsManager/TagsView/TagsTable.vue";
import { mapGetters } from 'vuex';
import { mapStores } from "pinia";
import { useUsersStore } from "@/stores/users";

View File

@ -52,7 +52,6 @@ export default mixins(externalHooks).extend({
{
instanceId: this.rootStore.instanceId,
userId: this.currentUserId,
store: this.$store,
versionCli: this.rootStore.versionCli,
},
);

View File

@ -8,7 +8,6 @@
import { format, LocaleFunc, register } from 'timeago.js';
import { convertToHumanReadableDate } from './helpers';
import Vue from 'vue';
import { mapGetters } from 'vuex';
import { mapStores } from 'pinia';
import { useRootStore } from '@/stores/n8nRootStore';

View File

@ -54,12 +54,14 @@
<script lang="ts">
import Vue from 'vue';
import { mapGetters } from 'vuex';
import ModalDrawer from './ModalDrawer.vue';
import TimeAgo from './TimeAgo.vue';
import VersionCard from './VersionCard.vue';
import { VERSIONS_MODAL_KEY } from '../constants';
import { mapStores } from 'pinia';
import { useVersionsStore } from '@/stores/versions';
import { IVersion } from '@/Interface';
export default Vue.extend({
name: 'UpdatesPanel',
@ -69,7 +71,18 @@ export default Vue.extend({
TimeAgo,
},
computed: {
...mapGetters('versions', ['nextVersions', 'currentVersion', 'infoUrl']),
...mapStores(
useVersionsStore,
),
nextVersions(): IVersion[] {
return this.versionsStore.nextVersions;
},
currentVersion(): IVersion | undefined {
return this.versionsStore.currentVersion;
},
infoUrl(): string {
return this.versionsStore.infoUrl;
},
},
data() {
return {

View File

@ -119,7 +119,7 @@ export default mixins(
return this.usersStore.currentUser || {} as IUser;
},
credentialPermissions(): IPermissions {
return getWorkflowPermissions(this.currentUser, this.data, this.$store);
return getWorkflowPermissions(this.currentUser, this.data);
},
actions(): Array<{ label: string; value: string; }> {
return [

View File

@ -220,7 +220,6 @@ import { restApi } from '@/components/mixins/restApi';
import { genericHelpers } from '@/components/mixins/genericHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import {
IN8nUISettings,
ITimeoutHMS,
IWorkflowDataUpdate,
IWorkflowSettings,
@ -232,7 +231,6 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '../c
import mixins from 'vue-typed-mixins';
import { mapGetters } from "vuex";
import { deepCopy } from "n8n-workflow";
import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows';

View File

@ -1,11 +1,13 @@
import { IExternalHooks, IRootState } from '@/Interface';
import { store } from '@/store';
import { useWebhooksStore } from '@/stores/webhooks';
import { IDataObject } from 'n8n-workflow';
import { Store } from 'pinia';
import Vue from 'vue';
import { Store } from 'vuex';
export async function runExternalHook(
eventName: string,
store: Store<IRootState>,
store: Store,
metadata?: IDataObject,
) {
// @ts-ignore
@ -31,7 +33,7 @@ export const externalHooks = Vue.extend({
$externalHooks(): IExternalHooks {
return {
run: async (eventName: string, metadata?: IDataObject): Promise<void> => {
await runExternalHook.call(this, eventName, this.$store, metadata);
await runExternalHook.call(this, eventName, useWebhooksStore(), metadata);
},
};
},

View File

@ -1,29 +1,30 @@
import mixins from 'vue-typed-mixins';
import { showMessage } from './showMessage';
import {
IVersion,
} from '../../Interface';
import { VERSIONS_MODAL_KEY } from '@/constants';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useVersionsStore } from '@/stores/versions';
export const newVersions = mixins(
showMessage,
).extend({
computed: {
...mapStores(useUIStore),
...mapStores(
useUIStore,
useVersionsStore,
),
},
methods: {
async checkForNewVersions() {
const enabled = this.$store.getters['versions/areNotificationsEnabled'];
const enabled = this.versionsStore.areNotificationsEnabled;
if (!enabled) {
return;
}
await this.$store.dispatch('versions/fetchVersions');
await this.versionsStore.fetchVersions();
const currentVersion: IVersion | undefined = this.$store.getters['versions/currentVersion'];
const nextVersions: IVersion[] = this.$store.getters['versions/nextVersions'];
const currentVersion = this.versionsStore.currentVersion;
const nextVersions = this.versionsStore.nextVersions;
if (currentVersion && currentVersion.hasSecurityIssue && nextVersions.length) {
const fixVersion = currentVersion.securityIssueFixVersion;
let message = `Please update to latest version.`;

View File

@ -12,13 +12,11 @@ import {
INodeCredentialsDetails,
INodeExecutionData,
INodeIssues,
INodeIssueData,
INodeIssueObjectProperty,
INodeParameters,
INodeProperties,
INodeTypeDescription,
IRunData,
IRunExecutionData,
ITaskDataConnections,
INode,
INodePropertyOptions,
@ -37,7 +35,6 @@ import { restApi } from '@/components/mixins/restApi';
import { get } from 'lodash';
import mixins from 'vue-typed-mixins';
import { mapGetters } from 'vuex';
import { isObjectLiteral } from '@/utils';
import {getCredentialPermissions} from "@/permissions";
import { mapStores } from 'pinia';
@ -45,6 +42,7 @@ import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
export const nodeHelpers = mixins(
restApi,
@ -52,11 +50,11 @@ export const nodeHelpers = mixins(
.extend({
computed: {
...mapStores(
useCredentialsStore,
useNodeTypesStore,
useSettingsStore,
useWorkflowsStore,
),
...mapGetters('credentials', [ 'getCredentialTypeByName', 'getCredentialsByType' ]),
},
methods: {
hasProxyAuth (node: INodeUi): boolean {
@ -138,7 +136,7 @@ export const nodeHelpers = mixins(
// Set the status on all the nodes which produced an error so that it can be
// displayed in the node-view
hasNodeExecutionIssues (node: INodeUi): boolean {
const workflowResultData: IRunData = this.workflowsStore.getWorkflowRunData;
const workflowResultData = this.workflowsStore.getWorkflowRunData;
if (workflowResultData === null || !workflowResultData.hasOwnProperty(node.name)) {
return false;
@ -247,7 +245,7 @@ export const nodeHelpers = mixins(
let credentialType: ICredentialType | null;
let credentialDisplayName: string;
let selectedCredentials: INodeCredentialsDetails;
const foreignCredentials = this.$store.getters['credentials/allForeignCredentials'];
const foreignCredentials = this.credentialsStore.allForeignCredentials;
// TODO: Check if any of the node credentials is found in foreign credentials
if(foreignCredentials?.some(() => true)){
@ -269,7 +267,7 @@ export const nodeHelpers = mixins(
genericAuthType !== '' &&
selectedCredsAreUnusable(node, genericAuthType)
) {
const credential = this.getCredentialTypeByName(genericAuthType);
const credential = this.credentialsStore.getCredentialTypeByName(genericAuthType);
return this.reportUnsetCredential(credential);
}
@ -279,10 +277,10 @@ export const nodeHelpers = mixins(
nodeCredentialType !== '' &&
node.credentials !== undefined
) {
const stored = this.getCredentialsByType(nodeCredentialType);
const stored = this.credentialsStore.getCredentialsByType(nodeCredentialType);
if (selectedCredsDoNotExist(node, nodeCredentialType, stored)) {
const credential = this.getCredentialTypeByName(nodeCredentialType);
const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
return this.reportUnsetCredential(credential);
}
}
@ -293,7 +291,7 @@ export const nodeHelpers = mixins(
nodeCredentialType !== '' &&
selectedCredsAreUnusable(node, nodeCredentialType)
) {
const credential = this.getCredentialTypeByName(nodeCredentialType);
const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
return this.reportUnsetCredential(credential);
}
@ -304,7 +302,7 @@ export const nodeHelpers = mixins(
}
// Get the display name of the credential type
credentialType = this.$store.getters['credentials/getCredentialTypeByName'](credentialTypeDescription.name);
credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeDescription.name);
if (credentialType === null) {
credentialDisplayName = credentialTypeDescription.name;
} else {
@ -328,9 +326,9 @@ export const nodeHelpers = mixins(
const usersStore = useUsersStore();
const currentUser = usersStore.currentUser || {} as IUser;
userCredentials = this.$store.getters['credentials/getCredentialsByType'](credentialTypeDescription.name)
userCredentials = this.credentialsStore.getCredentialsByType(credentialTypeDescription.name)
.filter((credential: ICredentialsResponse) => {
const permissions = getCredentialPermissions(currentUser, credential, this.$store);
const permissions = getCredentialPermissions(currentUser, credential);
return permissions.use;
});

View File

@ -27,6 +27,7 @@ import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
export const pushConnection = mixins(
externalHooks,
@ -46,6 +47,7 @@ export const pushConnection = mixins(
},
computed: {
...mapStores(
useCredentialsStore,
useNodeTypesStore,
useUIStore,
useWorkflowsStore,
@ -443,7 +445,7 @@ export const pushConnection = mixins(
const nodesToBeRemoved: INodeTypeNameVersion[] = [pushData];
// Force reload of all credential types
this.$store.dispatch('credentials/fetchCredentialTypes')
this.credentialsStore.fetchCredentialTypes()
.then(() => {
this.nodeTypesStore.removeNodeTypes(nodesToBeRemoved);
});

View File

@ -1,5 +1,5 @@
import { IPermissions, IUser } from '@/Interface';
import { isAuthorized } from '@/modules/userHelpers';
import { isAuthorized } from '@/stores/userHelpers';
import { useUsersStore } from '@/stores/users';
import Vue from 'vue';
import { Route } from 'vue-router';

View File

@ -421,4 +421,9 @@ export enum STORES {
NDV = 'ndv',
TEMPLATES = 'templates',
NODE_TYPES = 'nodeTypes',
CREDENTIALS = 'credentials',
TAGS = 'tags',
VERSIONS = 'versions',
NODE_CREATOR = 'nodeCreator',
WEBHOOKS = 'webhooks',
}

View File

@ -24,15 +24,12 @@ import { I18nPlugin, i18nInstance } from './plugins/i18n';
import { createPinia, PiniaVuePlugin } from 'pinia';
import { store } from './store';
import { useWebhooksStore } from './stores/webhooks';
Vue.config.productionTip = false;
router.afterEach((to, from) => {
runExternalHook('main.routeChange', store, { from, to });
});
Vue.use(TelemetryPlugin);
Vue.use((vue) => I18nPlugin(vue, store));
Vue.use((vue) => I18nPlugin(vue));
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
@ -40,11 +37,14 @@ const pinia = createPinia();
new Vue({
i18n: i18nInstance,
router,
store,
pinia,
render: h => h(App),
}).$mount('#app');
router.afterEach((to, from) => {
runExternalHook('main.routeChange', useWebhooksStore(), { from, to });
});
if (import.meta.env.NODE_ENV !== 'production') {
// Make sure that we get all error messages properly displayed
// as long as we are not in production mode

View File

@ -1,54 +0,0 @@
import Vue from 'vue';
import {ActionContext, Module} from 'vuex';
import {
ICredentialsState,
IRootState, IUser,
} from '../Interface';
import {setCredentialSharedWith} from "@/api/credentials.ee";
import {EnterpriseEditionFeature} from "@/constants";
import { useSettingsStore } from '@/stores/settings';
import { useRootStore } from '@/stores/n8nRootStore';
export const credentialsEEModule: Module<ICredentialsState, IRootState> = {
mutations: {
setCredentialOwnedBy(state: ICredentialsState, payload: { credentialId: string, ownedBy: Partial<IUser> }) {
Vue.set(state.credentials[payload.credentialId], 'ownedBy', payload.ownedBy);
},
setCredentialSharedWith(state: ICredentialsState, payload: { credentialId: string, sharedWith: Array<Partial<IUser>> }) {
Vue.set(state.credentials[payload.credentialId], 'sharedWith', payload.sharedWith);
},
addCredentialSharee(state: ICredentialsState, payload: { credentialId: string, sharee: Partial<IUser> }) {
Vue.set(
state.credentials[payload.credentialId],
'sharedWith',
(state.credentials[payload.credentialId].sharedWith || []).concat([payload.sharee]),
);
},
removeCredentialSharee(state: ICredentialsState, payload: { credentialId: string, sharee: Partial<IUser> }) {
Vue.set(
state.credentials[payload.credentialId],
'sharedWith',
(state.credentials[payload.credentialId].sharedWith || [])
.filter((sharee) => sharee.id !== payload.sharee.id),
);
},
},
actions: {
setCredentialSharedWith: async (context: ActionContext<ICredentialsState, IRootState>, payload: { sharedWith: IUser[]; credentialId: string; }) => {
if(useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
await setCredentialSharedWith(
useRootStore().getRestApiContext,
payload.credentialId,
{
shareWithIds: payload.sharedWith.map((sharee) => sharee.id),
},
);
context.commit('setCredentialSharedWith', {
credentialId: payload.credentialId,
sharedWith: payload.sharedWith,
});
}
},
},
};

View File

@ -1,313 +0,0 @@
import {
getCredentialTypes,
getCredentialsNewName,
getAllCredentials,
deleteCredential,
getCredentialData,
createNewCredential,
updateCredential,
oAuth2CredentialAuthorize,
oAuth1CredentialAuthorize,
testCredential,
getForeignCredentials,
} from '@/api/credentials';
import Vue from 'vue';
import { ActionContext, Module } from 'vuex';
import {
ICredentialMap,
ICredentialsResponse,
ICredentialsState,
ICredentialTypeMap,
IRootState,
} from '@/Interface';
import {
ICredentialType,
ICredentialsDecrypted,
INodeCredentialTestResult,
INodeTypeDescription,
INodeProperties,
} from 'n8n-workflow';
import { getAppNameFromCredType } from '@/components/helpers';
import {i18n} from "@/plugins/i18n";
import {credentialsEEModule} from "@/modules/credentials.ee";
import {EnterpriseEditionFeature} from "@/constants";
import { useUsersStore } from '@/stores/users';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useRootStore } from '@/stores/n8nRootStore';
import { useSettingsStore } from '@/stores/settings';
const DEFAULT_CREDENTIAL_NAME = 'Unnamed credential';
const DEFAULT_CREDENTIAL_POSTFIX = 'account';
const TYPES_WITH_DEFAULT_NAME = ['httpBasicAuth', 'oAuth2Api', 'httpDigestAuth', 'oAuth1Api'];
const module: Module<ICredentialsState, IRootState> = {
namespaced: true,
state: {
credentialTypes: {},
credentials: {},
...credentialsEEModule.state,
},
mutations: {
setCredentialTypes: (state: ICredentialsState, credentialTypes: ICredentialType[]) => {
state.credentialTypes = credentialTypes.reduce((accu: ICredentialTypeMap, cred: ICredentialType) => {
accu[cred.name] = cred;
return accu;
}, {});
},
setCredentials: (state: ICredentialsState, credentials: ICredentialsResponse[]) => {
state.credentials = credentials.reduce((accu: ICredentialMap, cred: ICredentialsResponse) => {
if (cred.id) {
accu[cred.id] = cred;
}
return accu;
}, {});
},
setForeignCredentials: (state: ICredentialsState, credentials: ICredentialsResponse[]) => {
state.foreignCredentials = credentials.reduce((accu: ICredentialMap, cred: ICredentialsResponse) => {
if (cred.id) {
accu[cred.id] = cred;
}
return accu;
}, {});
},
upsertCredential(state: ICredentialsState, credential: ICredentialsResponse) {
if (credential.id) {
Vue.set(state.credentials, credential.id, { ...state.credentials[credential.id], ...credential });
}
},
deleteCredential(state: ICredentialsState, id: string) {
Vue.delete(state.credentials, id);
},
enableOAuthCredential(state: ICredentialsState, credential: ICredentialsResponse) {
// enable oauth event to track change between modals
},
...credentialsEEModule.mutations,
},
getters: {
credentialTypesById(state: ICredentialsState): Record<ICredentialType['name'], ICredentialType> {
return state.credentialTypes;
},
allCredentialTypes(state: ICredentialsState): ICredentialType[] {
return Object.values(state.credentialTypes)
.sort((a, b) => a.displayName.localeCompare(b.displayName));
},
allCredentials(state: ICredentialsState): ICredentialsResponse[] {
return Object.values(state.credentials)
.sort((a, b) => a.name.localeCompare(b.name));
},
allForeignCredentials(state: ICredentialsState): ICredentialsResponse[] {
return Object.values(state.foreignCredentials || {})
.sort((a, b) => a.name.localeCompare(b.name));
},
allCredentialsByType(state: ICredentialsState, getters: any): {[type: string]: ICredentialsResponse[]} { // tslint:disable-line:no-any
const credentials = getters.allCredentials as ICredentialsResponse[];
const types = getters.allCredentialTypes as ICredentialType[];
return types.reduce((accu: {[type: string]: ICredentialsResponse[]}, type: ICredentialType) => {
accu[type.name] = credentials.filter((cred: ICredentialsResponse) => cred.type === type.name);
return accu;
}, {});
},
getCredentialTypeByName: (state: ICredentialsState) => {
return (type: string) => state.credentialTypes[type];
},
getCredentialById: (state: ICredentialsState) => {
return (id: string) => state.credentials[id];
},
getCredentialByIdAndType: (state: ICredentialsState) => {
return (id: string, type: string) => {
const credential = state.credentials[id];
return !credential || credential.type !== type ? undefined : credential;
};
},
getCredentialsByType: (state: ICredentialsState, getters: any) => { // tslint:disable-line:no-any
return (credentialType: string): ICredentialsResponse[] => {
return (getters.allCredentialsByType[credentialType] || []);
};
},
getNodesWithAccess (state: ICredentialsState, getters: any, rootState: IRootState, rootGetters: any) { // tslint:disable-line:no-any
return (credentialTypeName: string) => {
const nodeTypesStore = useNodeTypesStore();
const allLatestNodeTypes: INodeTypeDescription[] = nodeTypesStore.allLatestNodeTypes;
return allLatestNodeTypes.filter((nodeType: INodeTypeDescription) => {
if (!nodeType.credentials) {
return false;
}
for (const credentialTypeDescription of nodeType.credentials) {
if (credentialTypeDescription.name === credentialTypeName ) {
return true;
}
}
return false;
});
};
},
getScopesByCredentialType (_: ICredentialsState, getters: any) { // tslint:disable-line:no-any
return (credentialTypeName: string) => {
const credentialType = getters.getCredentialTypeByName(credentialTypeName) as {
properties: INodeProperties[];
};
const scopeProperty = credentialType.properties.find((p) => p.name === 'scope');
if (
!scopeProperty ||
!scopeProperty.default ||
typeof scopeProperty.default !== 'string' ||
scopeProperty.default === ''
) {
return [];
}
let { default: scopeDefault } = scopeProperty;
// disregard expressions for display
scopeDefault = scopeDefault.replace(/^=/, '').replace(/\{\{.*\}\}/, '');
if (/ /.test(scopeDefault)) return scopeDefault.split(' ');
if (/,/.test(scopeDefault)) return scopeDefault.split(',');
return [scopeDefault];
};
},
getCredentialOwnerName: (state: ICredentialsState, getters: any) => // tslint:disable-line:no-any
(credentialId: string): string => {
const credential = getters.getCredentialById(credentialId);
return credential && credential.ownedBy && credential.ownedBy.firstName
? `${credential.ownedBy.firstName} ${credential.ownedBy.lastName} (${credential.ownedBy.email})`
: i18n.baseText('credentialEdit.credentialSharing.info.sharee.fallback');
},
...credentialsEEModule.getters,
},
actions: {
fetchCredentialTypes: async (context: ActionContext<ICredentialsState, IRootState>, forceFetch: boolean) => {
if (context.getters.allCredentialTypes.length > 0 && forceFetch !== true) {
return;
}
const rootStore = useRootStore();
const credentialTypes = await getCredentialTypes(rootStore.getRestApiContext);
context.commit('setCredentialTypes', credentialTypes);
},
fetchAllCredentials: async (context: ActionContext<ICredentialsState, IRootState>): Promise<ICredentialsResponse[]> => {
const rootStore = useRootStore();
const credentials = await getAllCredentials(rootStore.getRestApiContext);
context.commit('setCredentials', credentials);
return credentials;
},
fetchForeignCredentials: async (context: ActionContext<ICredentialsState, IRootState>): Promise<ICredentialsResponse[]> => {
const rootStore = useRootStore();
const credentials = await getForeignCredentials(rootStore.getRestApiContext);
context.commit('setForeignCredentials', credentials);
return credentials;
},
getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
const rootStore = useRootStore();
return await getCredentialData(rootStore.getRestApiContext, id);
},
createNewCredential: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsDecrypted) => {
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const credential = await createNewCredential(rootStore.getRestApiContext, data);
if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
context.commit('upsertCredential', credential);
if (data.ownedBy) {
context.commit('setCredentialOwnedBy', {
credentialId: credential.id,
ownedBy: data.ownedBy,
});
const usersStore = useUsersStore();
if (data.sharedWith && data.ownedBy.id === usersStore.currentUserId) {
await context.dispatch('setCredentialSharedWith', {
credentialId: credential.id,
sharedWith: data.sharedWith,
});
}
}
} else {
context.commit('upsertCredential', credential);
}
return credential;
},
updateCredential: async (context: ActionContext<ICredentialsState, IRootState>, params: {data: ICredentialsDecrypted, id: string}) => {
const { id, data } = params;
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const credential = await updateCredential(rootStore.getRestApiContext, id, data);
if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
context.commit('upsertCredential', credential);
if (data.ownedBy) {
context.commit('setCredentialOwnedBy', {
credentialId: credential.id,
ownedBy: data.ownedBy,
});
const usersStore = useUsersStore();
if (data.sharedWith && data.ownedBy.id === usersStore.currentUserId) {
await context.dispatch('setCredentialSharedWith', {
credentialId: credential.id,
sharedWith: data.sharedWith,
});
}
}
} else {
context.commit('upsertCredential', credential);
}
return credential;
},
deleteCredential: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
const rootStore = useRootStore();
const deleted = await deleteCredential(rootStore.getRestApiContext, id);
if (deleted) {
context.commit('deleteCredential', id);
}
},
oAuth2Authorize: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsResponse) => {
const rootStore = useRootStore();
return oAuth2CredentialAuthorize(rootStore.getRestApiContext, data);
},
oAuth1Authorize: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsResponse) => {
const rootStore = useRootStore();
return oAuth1CredentialAuthorize(rootStore.getRestApiContext, data);
},
testCredential: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsDecrypted): Promise<INodeCredentialTestResult> => {
const rootStore = useRootStore();
return testCredential(rootStore.getRestApiContext, { credentials: data });
},
getNewCredentialName: async (context: ActionContext<ICredentialsState, IRootState>, params: { credentialTypeName: string }) => {
try {
const { credentialTypeName } = params;
let newName = DEFAULT_CREDENTIAL_NAME;
if (!TYPES_WITH_DEFAULT_NAME.includes(credentialTypeName)) {
const { displayName } = context.getters.getCredentialTypeByName(credentialTypeName);
newName = getAppNameFromCredType(displayName);
newName = newName.length > 0 ? `${newName} ${DEFAULT_CREDENTIAL_POSTFIX}` : DEFAULT_CREDENTIAL_NAME;
}
const rootStore = useRootStore();
const res = await getCredentialsNewName(rootStore.getRestApiContext, newName);
return res.name;
} catch (e) {
return DEFAULT_CREDENTIAL_NAME;
}
},
...credentialsEEModule.actions,
},
};
export default module;

View File

@ -1,39 +0,0 @@
import { ALL_NODE_FILTER } from '@/constants';
import { Module } from 'vuex';
import {
IRootState,
INodeCreatorState,
INodeFilterType,
} from '@/Interface';
const module: Module<INodeCreatorState, IRootState> = {
namespaced: true,
state: {
itemsFilter: '',
showTabs: true,
showScrim: false,
selectedType: ALL_NODE_FILTER,
},
getters: {
showTabs: (state: INodeCreatorState) => state.showTabs,
showScrim: (state: INodeCreatorState) => state.showScrim,
selectedType: (state: INodeCreatorState) => state.selectedType,
itemsFilter: (state: INodeCreatorState) => state.itemsFilter,
},
mutations: {
setShowTabs(state: INodeCreatorState, isVisible: boolean) {
state.showTabs = isVisible;
},
setShowScrim(state: INodeCreatorState, isVisible: boolean) {
state.showScrim = isVisible;
},
setSelectedType(state: INodeCreatorState, selectedNodeType: INodeFilterType) {
state.selectedType = selectedNodeType;
},
setFilter(state: INodeCreatorState, search: INodeFilterType) {
state.itemsFilter = search;
},
},
};
export default module;

View File

@ -1,112 +0,0 @@
import { ActionContext, Module } from 'vuex';
import {
ITag,
ITagsState,
IRootState,
} from '../Interface';
import { createTag, deleteTag, getTags, updateTag } from '../api/tags';
import Vue from 'vue';
import { useWorkflowsStore } from '@/stores/workflows';
import { useRootStore } from '@/stores/n8nRootStore';
const module: Module<ITagsState, IRootState> = {
namespaced: true,
state: {
tags: {},
isLoading: false,
fetchedAll: false,
fetchedUsageCount: false,
},
mutations: {
setLoading: (state: ITagsState, isLoading: boolean) => {
state.isLoading = isLoading;
},
setAllTags: (state: ITagsState, tags: ITag[]) => {
state.tags = tags
.reduce((accu: { [id: string]: ITag }, tag: ITag) => {
accu[tag.id] = tag;
return accu;
}, {});
state.fetchedAll = true;
},
upsertTags(state: ITagsState, tags: ITag[]) {
tags.forEach((tag) => {
const tagId = tag.id;
const currentTag = state.tags[tagId];
if (currentTag) {
const newTag = {
...currentTag,
...tag,
};
Vue.set(state.tags, tagId, newTag);
}
else {
Vue.set(state.tags, tagId, tag);
}
});
},
deleteTag(state: ITagsState, id: string) {
Vue.delete(state.tags, id);
},
},
getters: {
allTags(state: ITagsState): ITag[] {
return Object.values(state.tags)
.sort((a, b) => a.name.localeCompare(b.name));
},
isLoading: (state: ITagsState): boolean => {
return state.isLoading;
},
hasTags: (state: ITagsState): boolean => {
return Object.keys(state.tags).length > 0;
},
getTagById: (state: ITagsState) => {
return (id: string) => state.tags[id];
},
},
actions: {
fetchAll: async (context: ActionContext<ITagsState, IRootState>, params?: { force?: boolean, withUsageCount?: boolean }): Promise<ITag[]> => {
const { force = false, withUsageCount = false } = params || {};
if (!force && context.state.fetchedAll && context.state.fetchedUsageCount === withUsageCount) {
return Object.values(context.state.tags);
}
context.commit('setLoading', true);
const rootStore = useRootStore();
const tags = await getTags(rootStore.getRestApiContext, Boolean(withUsageCount));
context.commit('setAllTags', tags);
context.commit('setLoading', false);
return tags;
},
create: async (context: ActionContext<ITagsState, IRootState>, name: string): Promise<ITag> => {
const rootStore = useRootStore();
const tag = await createTag(rootStore.getRestApiContext, { name });
context.commit('upsertTags', [tag]);
return tag;
},
rename: async (context: ActionContext<ITagsState, IRootState>, { id, name }: { id: string, name: string }) => {
const rootStore = useRootStore();
const tag = await updateTag(rootStore.getRestApiContext, id, { name });
context.commit('upsertTags', [tag]);
return tag;
},
delete: async (context: ActionContext<ITagsState, IRootState>, id: string) => {
const rootStore = useRootStore();
const deleted = await deleteTag(rootStore.getRestApiContext, id);
if (deleted) {
context.commit('deleteTag', id);
const workflowsStore = useWorkflowsStore();
workflowsStore.removeWorkflowTagId(id);
}
return deleted;
},
},
};
export default module;

View File

@ -1,64 +0,0 @@
import { getNextVersions } from '@/api/versions';
import { useRootStore } from '@/stores/n8nRootStore';
import { ActionContext, Module } from 'vuex';
import {
IRootState,
IVersion,
IVersionsState,
} from '../Interface';
const module: Module<IVersionsState, IRootState> = {
namespaced: true,
state: {
versionNotificationSettings: {
enabled: false,
endpoint: '',
infoUrl: '',
},
nextVersions: [],
currentVersion: undefined,
},
getters: {
hasVersionUpdates(state: IVersionsState) {
return state.nextVersions.length > 0;
},
nextVersions(state: IVersionsState) {
return state.nextVersions;
},
currentVersion(state: IVersionsState) {
return state.currentVersion;
},
areNotificationsEnabled(state: IVersionsState) {
return state.versionNotificationSettings.enabled;
},
infoUrl(state: IVersionsState) {
return state.versionNotificationSettings.infoUrl;
},
},
mutations: {
setVersions(state: IVersionsState, {versions, currentVersion}: {versions: IVersion[], currentVersion: string}) {
state.nextVersions = versions.filter((version) => version.name !== currentVersion);
state.currentVersion = versions.find((version) => version.name === currentVersion);
},
setVersionNotificationSettings(state: IVersionsState, settings: {enabled: true, endpoint: string, infoUrl: string}) {
state.versionNotificationSettings = settings;
},
},
actions: {
async fetchVersions(context: ActionContext<IVersionsState, IRootState>) {
try {
const { enabled, endpoint } = context.state.versionNotificationSettings;
if (enabled && endpoint) {
const rootStore = useRootStore();
const currentVersion = rootStore.versionCli;
const instanceId = rootStore.instanceId;
const versions = await getNextVersions(endpoint, currentVersion, instanceId);
context.commit('setVersions', {versions, currentVersion});
}
} catch (e) {
}
},
},
};
export default module;

View File

@ -5,7 +5,6 @@
*/
import {IUser, ICredentialsResponse, IRootState, IWorkflowDb} from "@/Interface";
import {Store} from "vuex";
import {EnterpriseEditionFeature} from "@/constants";
import { useSettingsStore } from "./stores/settings";
@ -54,7 +53,7 @@ export const parsePermissionsTable = (user: IUser, table: IPermissionsTable): IP
* User permissions definition
*/
export const getCredentialPermissions = (user: IUser, credential: ICredentialsResponse, store: Store<IRootState>) => {
export const getCredentialPermissions = (user: IUser, credential: ICredentialsResponse) => {
const settingsStore = useSettingsStore();
const table: IPermissionsTable = [
{ name: UserRole.ResourceOwner, test: () => !!(credential && credential.ownedBy && credential.ownedBy.id === user.id) || !settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing) },
@ -72,7 +71,7 @@ export const getCredentialPermissions = (user: IUser, credential: ICredentialsRe
return parsePermissionsTable(user, table);
};
export const getWorkflowPermissions = (user: IUser, workflow: IWorkflowDb, store: Store<IRootState>) => {
export const getWorkflowPermissions = (user: IUser, workflow: IWorkflowDb) => {
const table: IPermissionsTable = [
// { name: UserRole.ResourceOwner, test: () => !!(workflow && workflow.ownedBy && workflow.ownedBy.id === user.id) || !useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing) },
{ name: UserRole.ResourceOwner, test: () => true },

View File

@ -1,7 +1,6 @@
import Vue from 'vue';
import axios from 'axios';
import VueI18n from 'vue-i18n';
import { Store } from "vuex";
import { INodeTranslationHeaders, IRootState } from '@/Interface';
import {
deriveMiddleKey,
@ -23,7 +22,7 @@ locale.use('en');
export let i18n: I18nClass;
export function I18nPlugin(vue: typeof Vue, store: Store<IRootState>): void {
export function I18nPlugin(vue: typeof Vue): void {
i18n = new I18nClass();
Object.defineProperty(vue, '$locale', {

View File

@ -7,9 +7,9 @@ import {
import { Route } from "vue-router";
import type { INodeCreateElement, IRootState } from "@/Interface";
import type { Store } from "vuex";
import type { IUserNodesPanelSession } from "./telemetry.types";
import { useSettingsStore } from "@/stores/settings";
import { useRootStore } from "@/stores/n8nRootStore";
export function TelemetryPlugin(vue: typeof _Vue): void {
const telemetry = new Telemetry();
@ -26,7 +26,6 @@ export class Telemetry {
private pageEventQueue: Array<{route: Route}>;
private previousPath: string;
private store: Store<IRootState> | null;
private get rudderStack() {
return window.rudderanalytics;
@ -44,15 +43,13 @@ export class Telemetry {
constructor() {
this.pageEventQueue = [];
this.previousPath = '';
this.store = null;
}
init(
telemetrySettings: ITelemetrySettings,
{ instanceId, userId, store, versionCli }: {
{ instanceId, userId, versionCli }: {
instanceId: string;
userId?: string;
store: Store<IRootState>;
versionCli: string
},
) {
@ -60,9 +57,8 @@ export class Telemetry {
const { config: { key, url } } = telemetrySettings;
// TODO: Remove this once migration to pinia is done
this.store = store;
const settingsStore = useSettingsStore();
const rootStore = useRootStore();
const logLevel = settingsStore.logLevel;
@ -81,7 +77,7 @@ export class Telemetry {
this.identify(instanceId, userId, versionCli);
this.flushPageEvents();
this.track('Session started', { session_id: store.getters.sessionId });
this.track('Session started', { session_id: rootStore.sessionId });
}
identify(instanceId: string, userId?: string, versionCli?: string) {
@ -100,7 +96,7 @@ export class Telemetry {
const updatedProperties = {
...properties,
version_cli: this.store && this.store.getters.versionCli,
version_cli: useRootStore().versionCli,
};
this.rudderStack.track(event, updatedProperties);
@ -115,7 +111,7 @@ export class Telemetry {
const pageName = route.name;
let properties: {[key: string]: string} = {};
if (this.store && route.meta && route.meta.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
if (route.meta && route.meta.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
properties = route.meta.telemetry.getProperties(route);
}

View File

@ -26,7 +26,7 @@ import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
import CredentialsView from '@/views/CredentialsView.vue';
import WorkflowsView from '@/views/WorkflowsView.vue';
import { IPermissions } from './Interface';
import { LOGIN_STATUS, ROLE } from './modules/userHelpers';
import { LOGIN_STATUS, ROLE } from './stores/userHelpers';
import { RouteConfigSingleView } from 'vue-router/types/router';
import { VIEWS } from './constants';
import { useSettingsStore } from './stores/settings';

View File

@ -1,89 +0,0 @@
import Vue from 'vue';
import Vuex from 'vuex';
import credentials from './modules/credentials';
import tags from './modules/tags';
import nodeCreator from './modules/nodeCreator';
import versions from './modules/versions';
import { IMenuItem } from 'n8n-design-system';
import { useUIStore } from './stores/ui';
import { IFakeDoor, INodeUi, IRootState } from './Interface';
import { useSettingsStore } from './stores/settings';
import { useUsersStore } from './stores/users';
import { useRootStore } from './stores/n8nRootStore';
import { useWorkflowsStore } from './stores/workflows';
import { useNDVStore } from './stores/ndv';
import { IWorkflowSettings } from 'n8n-workflow';
Vue.use(Vuex);
// Everything here is kept just to be used by front-end web hooks
// as long as we have instances that use vuex store
const modules = {
credentials,
tags,
versions,
nodeCreator,
users: {
namespaced: true,
getters: { globalRoleName () { return useUsersStore().globalRoleName; } },
},
ui: {
namespaced: true,
getters: { getFakeDoorFeatures () { return useUIStore().fakeDoorFeatures; } },
},
settings: {
namespaced: true,
getters: { isUserManagementEnabled () { return useSettingsStore().isUserManagementEnabled; } },
},
};
export const store = new Vuex.Store({
strict: import.meta.env.NODE_ENV !== 'production',
modules,
mutations: {
addSidebarMenuItems(state: IRootState, menuItems: IMenuItem[]) {
const uiStore = useUIStore();
const updated = uiStore.sidebarMenuItems.concat(menuItems);
uiStore.sidebarMenuItems = updated;
},
setFakeDoorFeatures(state: IRootState, fakeDoors: IFakeDoor[]): void {
useUIStore().fakeDoorFeatures = fakeDoors;
},
},
getters: {
getFakeDoorItems(): IFakeDoor[] {
return useUIStore().fakeDoorFeatures;
},
isUserManagementEnabled(): boolean {
return useSettingsStore().isUserManagementEnabled;
},
n8nMetadata(): IRootState['n8nMetadata'] {
return useRootStore().n8nMetadata;
},
instanceId(): string {
return useRootStore().instanceId;
},
workflowId(): string {
return useWorkflowsStore().workflowId;
},
workflowName(): string {
return useWorkflowsStore().workflowName;
},
activeNode(): INodeUi | null {
return useNDVStore().activeNode;
},
workflowSettings(): IWorkflowSettings {
return useWorkflowsStore().workflowSettings;
},
activeExecutionId(): string {
return useWorkflowsStore().activeExecutionId || '';
},
nodeByName: (state: IRootState) => (nodeName: string): INodeUi | null => {
return useWorkflowsStore().getNodeByName(nodeName);
},
allNodes(): INodeUi[] {
return useWorkflowsStore().allNodes;
},
},
});

View File

@ -0,0 +1,305 @@
import { createNewCredential, deleteCredential, getAllCredentials, getCredentialData, getCredentialsNewName, getCredentialTypes, getForeignCredentials, oAuth1CredentialAuthorize, oAuth2CredentialAuthorize, testCredential, updateCredential } from "@/api/credentials";
import { setCredentialSharedWith } from "@/api/credentials.ee";
import { getAppNameFromCredType } from "@/components/helpers";
import { EnterpriseEditionFeature, STORES } from "@/constants";
import { ICredentialMap, ICredentialsDecryptedResponse, ICredentialsResponse, ICredentialsState, ICredentialTypeMap } from "@/Interface";
import { i18n } from "@/plugins/i18n";
import { ICredentialsDecrypted, ICredentialType, INodeCredentialTestResult, INodeProperties, INodeTypeDescription, IUser } from "n8n-workflow";
import { defineStore } from "pinia";
import Vue from "vue";
import { useRootStore } from "./n8nRootStore";
import { useNodeTypesStore } from "./nodeTypes";
import { useSettingsStore } from "./settings";
import { useUsersStore } from "./users";
const DEFAULT_CREDENTIAL_NAME = 'Unnamed credential';
const DEFAULT_CREDENTIAL_POSTFIX = 'account';
const TYPES_WITH_DEFAULT_NAME = ['httpBasicAuth', 'oAuth2Api', 'httpDigestAuth', 'oAuth1Api'];
export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
state: (): ICredentialsState => ({
credentialTypes: {},
credentials: {},
}),
getters: {
credentialTypesById(): Record<ICredentialType['name'], ICredentialType> {
return this.credentialTypes;
},
allCredentialTypes(): ICredentialType[] {
return Object.values(this.credentialTypes)
.sort((a, b) => a.displayName.localeCompare(b.displayName));
},
allCredentials(): ICredentialsResponse[] {
return Object.values(this.credentials)
.sort((a, b) => a.name.localeCompare(b.name));
},
allForeignCredentials(): ICredentialsResponse[] {
return Object.values(this.foreignCredentials || {})
.sort((a, b) => a.name.localeCompare(b.name));
},
allCredentialsByType(): {[type: string]: ICredentialsResponse[]} {
const credentials = this.allCredentials;
const types = this.allCredentialTypes;
return types.reduce((accu: {[type: string]: ICredentialsResponse[]}, type: ICredentialType) => {
accu[type.name] = credentials.filter((cred: ICredentialsResponse) => cred.type === type.name);
return accu;
}, {});
},
getCredentialTypeByName() {
return (type: string): ICredentialType => this.credentialTypes[type];
},
getCredentialById() {
return (id: string): ICredentialsResponse => this.credentials[id];
},
getCredentialByIdAndType() {
return (id: string, type: string): ICredentialsResponse | undefined => {
const credential = this.credentials[id];
return !credential || credential.type !== type ? undefined : credential;
};
},
getCredentialsByType() {
return (credentialType: string): ICredentialsResponse[] => {
return (this.allCredentialsByType[credentialType] || []);
};
},
getNodesWithAccess() {
return (credentialTypeName: string) => {
const nodeTypesStore = useNodeTypesStore();
const allLatestNodeTypes: INodeTypeDescription[] = nodeTypesStore.allLatestNodeTypes;
return allLatestNodeTypes.filter((nodeType: INodeTypeDescription) => {
if (!nodeType.credentials) {
return false;
}
for (const credentialTypeDescription of nodeType.credentials) {
if (credentialTypeDescription.name === credentialTypeName ) {
return true;
}
}
return false;
});
};
},
getScopesByCredentialType() {
return (credentialTypeName: string) => {
const credentialType = this.getCredentialTypeByName(credentialTypeName) as {
properties: INodeProperties[];
};
const scopeProperty = credentialType.properties.find((p) => p.name === 'scope');
if (
!scopeProperty ||
!scopeProperty.default ||
typeof scopeProperty.default !== 'string' ||
scopeProperty.default === ''
) {
return [];
}
let { default: scopeDefault } = scopeProperty;
// disregard expressions for display
scopeDefault = scopeDefault.replace(/^=/, '').replace(/\{\{.*\}\}/, '');
if (/ /.test(scopeDefault)) return scopeDefault.split(' ');
if (/,/.test(scopeDefault)) return scopeDefault.split(',');
return [scopeDefault];
};
},
getCredentialOwnerName() {
return (credentialId: string): string => {
const credential = this.getCredentialById(credentialId);
return credential && credential.ownedBy && credential.ownedBy.firstName
? `${credential.ownedBy.firstName} ${credential.ownedBy.lastName} (${credential.ownedBy.email})`
: i18n.baseText('credentialEdit.credentialSharing.info.sharee.fallback');
};
},
},
actions: {
setCredentialTypes(credentialTypes: ICredentialType[]): void {
this.credentialTypes = credentialTypes.reduce((accu: ICredentialTypeMap, cred: ICredentialType) => {
accu[cred.name] = cred;
return accu;
}, {});
},
setCredentials(credentials: ICredentialsResponse[]): void {
this.credentials = credentials.reduce((accu: ICredentialMap, cred: ICredentialsResponse) => {
if (cred.id) {
accu[cred.id] = cred;
}
return accu;
}, {});
},
setForeignCredentials(credentials: ICredentialsResponse[]): void {
this.foreignCredentials = credentials.reduce((accu: ICredentialMap, cred: ICredentialsResponse) => {
if (cred.id) {
accu[cred.id] = cred;
}
return accu;
}, {});
},
upsertCredential(credential: ICredentialsResponse): void {
if (credential.id) {
Vue.set(this.credentials, credential.id, { ...this.credentials[credential.id], ...credential });
}
},
enableOAuthCredential(credential: ICredentialsResponse): void {
// enable oauth event to track change between modals
},
async fetchCredentialTypes(forceFetch: boolean): Promise<void> {
if (this.allCredentialTypes.length > 0 && forceFetch !== true) {
return;
}
const rootStore = useRootStore();
const credentialTypes = await getCredentialTypes(rootStore.getRestApiContext);
this.setCredentialTypes(credentialTypes);
},
async fetchAllCredentials(): Promise<ICredentialsResponse[]> {
const rootStore = useRootStore();
const credentials = await getAllCredentials(rootStore.getRestApiContext);
this.setCredentials(credentials);
return credentials;
},
async fetchForeignCredentials(): Promise<ICredentialsResponse[]> {
const rootStore = useRootStore();
const credentials = await getForeignCredentials(rootStore.getRestApiContext);
this.setForeignCredentials(credentials);
return credentials;
},
async getCredentialData({ id }: {id: string}): Promise<ICredentialsResponse | ICredentialsDecryptedResponse | undefined> {
const rootStore = useRootStore();
return await getCredentialData(rootStore.getRestApiContext, id);
},
async createNewCredential(data: ICredentialsDecrypted): Promise<ICredentialsResponse> {
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const credential = await createNewCredential(rootStore.getRestApiContext, data);
if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
this.upsertCredential(credential);
if (data.ownedBy) {
this.setCredentialOwnedBy({
credentialId: credential.id,
ownedBy: data.ownedBy,
});
const usersStore = useUsersStore();
if (data.sharedWith && data.ownedBy.id === usersStore.currentUserId) {
this.setCredentialSharedWith({
credentialId: credential.id,
sharedWith: data.sharedWith,
});
}
}
} else {
this.upsertCredential(credential);
}
return credential;
},
async updateCredential(params: {data: ICredentialsDecrypted, id: string}): Promise<ICredentialsResponse> {
const { id, data } = params;
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const credential = await updateCredential(rootStore.getRestApiContext, id, data);
if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
this.upsertCredential(credential);
if (data.ownedBy) {
this.setCredentialOwnedBy({
credentialId: credential.id,
ownedBy: data.ownedBy,
});
const usersStore = useUsersStore();
if (data.sharedWith && data.ownedBy.id === usersStore.currentUserId) {
this.setCredentialSharedWith({
credentialId: credential.id,
sharedWith: data.sharedWith,
});
}
}
} else {
this.upsertCredential(credential);
}
return credential;
},
async deleteCredential({ id }: {id: string}): void {
const rootStore = useRootStore();
const deleted = await deleteCredential(rootStore.getRestApiContext, id);
if (deleted) {
Vue.delete(this.credentials, id);
}
},
async oAuth2Authorize(data: ICredentialsResponse): Promise<string> {
const rootStore = useRootStore();
return oAuth2CredentialAuthorize(rootStore.getRestApiContext, data);
},
async oAuth1Authorize(data: ICredentialsResponse): Promise<string> {
const rootStore = useRootStore();
return oAuth1CredentialAuthorize(rootStore.getRestApiContext, data);
},
async testCredential(data: ICredentialsDecrypted): Promise<INodeCredentialTestResult> {
const rootStore = useRootStore();
return testCredential(rootStore.getRestApiContext, { credentials: data });
},
async getNewCredentialName(params: { credentialTypeName: string }): Promise<string> {
try {
const { credentialTypeName } = params;
let newName = DEFAULT_CREDENTIAL_NAME;
if (!TYPES_WITH_DEFAULT_NAME.includes(credentialTypeName)) {
const { displayName } = this.getCredentialTypeByName(credentialTypeName);
newName = getAppNameFromCredType(displayName);
newName = newName.length > 0 ? `${newName} ${DEFAULT_CREDENTIAL_POSTFIX}` : DEFAULT_CREDENTIAL_NAME;
}
const rootStore = useRootStore();
const res = await getCredentialsNewName(rootStore.getRestApiContext, newName);
return res.name;
} catch (e) {
return DEFAULT_CREDENTIAL_NAME;
}
},
// Enterprise edition actions
setCredentialOwnedBy(payload: { credentialId: string, ownedBy: Partial<IUser> }): void {
Vue.set(this.credentials[payload.credentialId], 'ownedBy', payload.ownedBy);
},
async setCredentialSharedWith(payload: { sharedWith: IUser[]; credentialId: string; }): void {
if(useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
await setCredentialSharedWith(
useRootStore().getRestApiContext,
payload.credentialId,
{
shareWithIds: payload.sharedWith.map((sharee) => sharee.id),
},
);
Vue.set(this.credentials[payload.credentialId], 'sharedWith', payload.sharedWith);
}
},
addCredentialSharee(payload: { credentialId: string, sharee: Partial<IUser> }): void {
Vue.set(
this.credentials[payload.credentialId],
'sharedWith',
(this.credentials[payload.credentialId].sharedWith || []).concat([payload.sharee]),
);
},
removeCredentialSharee(payload: { credentialId: string, sharee: Partial<IUser> }): void {
Vue.set(
this.credentials[payload.credentialId],
'sharedWith',
(this.credentials[payload.credentialId].sharedWith || [])
.filter((sharee) => sharee.id !== payload.sharee.id),
);
},
},
});

View File

@ -0,0 +1,12 @@
import { ALL_NODE_FILTER, STORES } from "@/constants";
import { INodeCreatorState } from "@/Interface";
import { defineStore } from "pinia";
export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
state: (): INodeCreatorState => ({
itemsFilter: '',
showTabs: true,
showScrim: false,
selectedType: ALL_NODE_FILTER,
}),
});

View File

@ -1,13 +1,13 @@
import { getNodeParameterOptions, getNodesInformation, getNodeTranslationHeaders, getNodeTypes, getResourceLocatorResults } from "@/api/nodeTypes";
import { DEFAULT_NODETYPE_VERSION, STORES } from "@/constants";
import { ICategoriesWithNodes, INodeCreateElement, INodeTypesState, IResourceLocatorReqParams } from "@/Interface";
import { getCategoriesWithNodes, getCategorizedList } from "@/modules/nodeTypesHelpers";
import { getCategoriesWithNodes, getCategorizedList } from "@/stores/nodeTypesHelpers";
import { addHeaders, addNodeTranslation } from "@/plugins/i18n";
import { store } from "@/store";
import { omit } from "@/utils";
import { ILoadOptions, INodeCredentials, INodeListSearchResult, INodeParameters, INodePropertyOptions, INodeTypeDescription, INodeTypeNameVersion } from 'n8n-workflow';
import { defineStore } from "pinia";
import Vue from "vue";
import { useCredentialsStore } from "./credentials";
import { useRootStore } from "./n8nRootStore";
import { useUsersStore } from "./users";
@ -115,8 +115,8 @@ export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, {
this.setNodeTypes(nodesInformation);
},
async getFullNodesProperties(nodesToBeFetched: INodeTypeNameVersion[]): Promise<void> {
const vuexStore = store;
vuexStore.dispatch('credentials/fetchCredentialTypes', true);
const credentialsStore = useCredentialsStore();
credentialsStore.fetchCredentialTypes(true);
await this.getNodesInformation(nodesToBeFetched);
},
async getNodeTypes(): Promise<void> {

View File

@ -10,6 +10,7 @@ import Vue from "vue";
import { useRootStore } from "./n8nRootStore";
import { useUIStore } from "./ui";
import { useUsersStore } from "./users";
import { useVersionsStore } from "./versions";
export const useSettingsStore = defineStore(STORES.SETTINGS, {
state: (): ISettingsState => ({
@ -129,7 +130,6 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
async getSettings(): Promise<void> {
const rootStore = useRootStore();
const settings = await getSettings(rootStore.getRestApiContext);
const vuexStore = store;
this.setSettings(settings);
this.settings.communityNodesEnabled = settings.communityNodesEnabled;
@ -151,7 +151,7 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
rootStore.setN8nMetadata(settings.n8nMetadata || {});
rootStore.setDefaultLocale(settings.defaultLocale);
rootStore.setIsNpmAvailable(settings.isNpmAvailable);
vuexStore.commit('versions/setVersionNotificationSettings', settings.versionNotifications, {root: true});
useVersionsStore().setVersionNotificationSettings(settings.versionNotifications);
},
stopShowingSetupPage(): void {
Vue.set(this.userManagement, 'showSetupOnFirstLoad', false);

View File

@ -0,0 +1,102 @@
import { createTag, deleteTag, getTags, updateTag } from "@/api/tags";
import { STORES } from "@/constants";
import { ITag, ITagsState } from "@/Interface";
import { defineStore } from "pinia";
import Vue from "vue";
import { useRootStore } from "./n8nRootStore";
import { useWorkflowsStore } from "./workflows";
export const useTagsStore = defineStore(STORES.TAGS, {
state: (): ITagsState => ({
tags: {},
loading: false,
fetchedAll: false,
fetchedUsageCount: false,
}),
getters: {
allTags(): ITag[] {
return Object.values(this.tags)
.sort((a, b) => a.name.localeCompare(b.name));
},
isLoading(): boolean {
return this.loading;
},
hasTags(): boolean {
return Object.keys(this.tags).length > 0;
},
getTagById() {
return (id: string) => this.tags[id];
},
},
actions: {
setAllTags(tags: ITag[]): void {
this.tags = tags
.reduce((accu: { [id: string]: ITag }, tag: ITag) => {
accu[tag.id] = tag;
return accu;
}, {});
this.fetchedAll = true;
},
upsertTags(tags: ITag[]): void {
tags.forEach((tag) => {
const tagId = tag.id;
const currentTag = this.tags[tagId];
if (currentTag) {
const newTag = {
...currentTag,
...tag,
};
Vue.set(this.tags, tagId, newTag);
}
else {
Vue.set(this.tags, tagId, tag);
}
});
},
deleteTag(id: string): void {
Vue.delete(this.tags, id);
},
async fetchAll(params?: { force?: boolean, withUsageCount?: boolean }): Promise<ITag[]> {
const { force = false, withUsageCount = false } = params || {};
if (!force && this.fetchedAll && this.fetchedUsageCount === withUsageCount) {
return Object.values(this.tags);
}
this.loading = true;
const rootStore = useRootStore();
const tags = await getTags(rootStore.getRestApiContext, Boolean(withUsageCount));
this.setAllTags(tags);
this.loading = false;
return tags;
},
async create(name: string): Promise<ITag> {
const rootStore = useRootStore();
const tag = await createTag(rootStore.getRestApiContext, { name });
this.upsertTags([tag]);
return tag;
},
async rename({ id, name }: { id: string, name: string }) {
const rootStore = useRootStore();
const tag = await updateTag(rootStore.getRestApiContext, id, { name });
this.upsertTags([tag]);
return tag;
},
async delete(id: string) {
const rootStore = useRootStore();
const deleted = await deleteTag(rootStore.getRestApiContext, id);
if (deleted) {
this.deleteTag(id);
const workflowsStore = useWorkflowsStore();
workflowsStore.removeWorkflowTagId(id);
}
return deleted;
},
},
});

View File

@ -1,7 +1,7 @@
import { changePassword, deleteUser, getCurrentUser, getUsers, inviteUsers, login, loginCurrentUser, logout, reinvite, sendForgotPasswordEmail, setupOwner, signup, skipOwnerSetup, submitPersonalizationSurvey, updateCurrentUser, updateCurrentUserPassword, validatePasswordToken, validateSignupToken } from "@/api/users";
import { PERSONALIZATION_MODAL_KEY, STORES } from "@/constants";
import { IInviteResponse, IPersonalizationLatestVersion, IUser, IUserResponse, IUsersState } from "@/Interface";
import { getPersonalizedNodeTypes, isAuthorized, PERMISSIONS, ROLE } from "@/modules/userHelpers";
import { getPersonalizedNodeTypes, isAuthorized, PERMISSIONS, ROLE } from "@/stores/userHelpers";
import { defineStore } from "pinia";
import Vue from "vue";
import { useRootStore } from "./n8nRootStore";

View File

@ -0,0 +1,50 @@
import { getNextVersions } from "@/api/versions";
import { STORES } from "@/constants";
import { IVersion, IVersionNotificationSettings, IVersionsState } from "@/Interface";
import { defineStore } from "pinia";
import { useRootStore } from "./n8nRootStore";
export const useVersionsStore = defineStore(STORES.VERSIONS, {
state: (): IVersionsState => ({
versionNotificationSettings: {
enabled: false,
endpoint: '',
infoUrl: '',
},
nextVersions: [],
currentVersion: undefined,
}),
getters: {
hasVersionUpdates(): boolean {
return this.nextVersions.length > 0;
},
areNotificationsEnabled(): boolean {
return this.versionNotificationSettings.enabled;
},
infoUrl(): string {
return this.versionNotificationSettings.infoUrl;
},
},
actions: {
setVersions({versions, currentVersion}: {versions: IVersion[], currentVersion: string}) {
this.nextVersions = versions.filter((version) => version.name !== currentVersion);
this.currentVersion = versions.find((version) => version.name === currentVersion);
},
setVersionNotificationSettings(settings: IVersionNotificationSettings) {
this.versionNotificationSettings = settings;
},
async fetchVersions() {
try {
const { enabled, endpoint } = this.versionNotificationSettings;
if (enabled && endpoint) {
const rootStore = useRootStore();
const currentVersion = rootStore.versionCli;
const instanceId = rootStore.instanceId;
const versions = await getNextVersions(endpoint, currentVersion, instanceId);
this.setVersions({ versions, currentVersion });
}
} catch (e) {
}
},
},
});

View File

@ -0,0 +1,65 @@
import { STORES } from "@/constants";
import { IFakeDoor, INodeUi, IRootState } from "@/Interface";
import { IMenuItem } from "n8n-design-system";
import { IWorkflowSettings } from "n8n-workflow";
import { defineStore } from "pinia";
import { useRootStore } from "./n8nRootStore";
import { useNDVStore } from "./ndv";
import { useSettingsStore } from "./settings";
import { useUIStore } from "./ui";
import { useUsersStore } from "./users";
import { useWorkflowsStore } from "./workflows";
export const useWebhooksStore = defineStore(STORES.WEBHOOKS, {
getters: {
globalRoleName(): string {
return useUsersStore().globalRoleName;
},
getFakeDoorFeatures () {
return useUIStore().fakeDoorFeatures;
},
isUserManagementEnabled () {
return useSettingsStore().isUserManagementEnabled;
},
getFakeDoorItems(): IFakeDoor[] {
return useUIStore().fakeDoorFeatures;
},
n8nMetadata(): IRootState['n8nMetadata'] {
return useRootStore().n8nMetadata;
},
instanceId(): string {
return useRootStore().instanceId;
},
workflowId(): string {
return useWorkflowsStore().workflowId;
},
workflowName(): string {
return useWorkflowsStore().workflowName;
},
activeNode(): INodeUi | null {
return useNDVStore().activeNode;
},
workflowSettings(): IWorkflowSettings {
return useWorkflowsStore().workflowSettings;
},
activeExecutionId(): string {
return useWorkflowsStore().activeExecutionId || '';
},
nodeByName: (state: IRootState) => (nodeName: string): INodeUi | null => {
return useWorkflowsStore().getNodeByName(nodeName);
},
allNodes(): INodeUi[] {
return useWorkflowsStore().allNodes;
},
},
actions: {
addSidebarMenuItems(menuItems: IMenuItem[]) {
const uiStore = useUIStore();
const updated = uiStore.sidebarMenuItems.concat(menuItems);
uiStore.sidebarMenuItems = updated;
},
setFakeDoorFeatures(fakeDoors: IFakeDoor[]): void {
useUIStore().fakeDoorFeatures = fakeDoors;
},
},
});

View File

@ -649,7 +649,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
return node.name === updateInformation.name;
});
if (node === undefined || node === null) {
if (node === undefined || node === null || !updateInformation.key) {
throw new Error(`Node with the name "${updateInformation.name}" could not be found to set parameter.`);
}

View File

@ -1,4 +1,5 @@
import { INodeParameterResourceLocator } from "n8n-workflow";
import { ICredentialsResponse } from "./Interface";
export function isResourceLocatorValue(value: unknown): value is INodeParameterResourceLocator {
return Boolean(typeof value === 'object' && value && 'mode' in value && 'value' in value);
@ -7,3 +8,7 @@ export function isResourceLocatorValue(value: unknown): value is INodeParameterR
export function isNotNull<T>(value: T | null): value is T {
return value !== null;
}
export function isValidCredentialResponse(value: unknown): value is ICredentialsResponse {
return typeof value === 'object' && value !== null && 'id' in value && 'createdAt' in value && 'updatedAt' in value;
}

View File

@ -15,6 +15,8 @@
<script lang="ts">
import Vue from 'vue';
import { XYPosition } from '@/Interface';
import { mapStores } from 'pinia';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
export default Vue.extend({
name: 'CanvasAddButton',
@ -27,6 +29,9 @@ export default Vue.extend({
},
},
computed: {
...mapStores(
useNodeCreatorStore,
),
containerCssVars(): Record<string, string> {
const position = this.position as XYPosition;
return {
@ -35,7 +40,7 @@ export default Vue.extend({
};
},
isScrimActive(): boolean {
return this.$store.getters['nodeCreator/showScrim'];
return this.nodeCreatorStore.showScrim;
},
},
});

View File

@ -44,7 +44,7 @@
<script lang="ts">
import {showMessage} from '@/components/mixins/showMessage';
import {ICredentialsResponse, IUser} from '@/Interface';
import {ICredentialsResponse, ICredentialTypeMap, IUser} from '@/Interface';
import mixins from 'vue-typed-mixins';
import SettingsView from './SettingsView.vue';
@ -63,6 +63,7 @@ import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useUsersStore } from '@/stores/users';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
@ -93,18 +94,19 @@ export default mixins(
},
computed: {
...mapStores(
useCredentialsStore,
useNodeTypesStore,
useUIStore,
useUsersStore,
),
allCredentials(): ICredentialsResponse[] {
return this.$store.getters['credentials/allCredentials'];
return this.credentialsStore.allCredentials;
},
allCredentialTypes(): ICredentialType[] {
return this.$store.getters['credentials/allCredentialTypes'];
return this.credentialsStore.allCredentialTypes;
},
credentialTypesById(): Record<ICredentialType['name'], ICredentialType> {
return this.$store.getters['credentials/credentialTypesById'];
credentialTypesById(): ICredentialTypeMap {
return this.credentialsStore.credentialTypesById;
},
},
methods: {
@ -116,9 +118,10 @@ export default mixins(
});
},
async initialize() {
const loadPromises = [
this.$store.dispatch('credentials/fetchAllCredentials'),
this.$store.dispatch('credentials/fetchCredentialTypes'),
this.credentialsStore.fetchAllCredentials(),
this.credentialsStore.fetchCredentialTypes(false),
];
if (this.nodeTypesStore.allNodeTypes.length === 0) {

View File

@ -12,7 +12,6 @@ import { showMessage } from '@/components/mixins/showMessage';
import mixins from 'vue-typed-mixins';
import { IFormBoxConfig } from '@/Interface';
import { mapGetters } from 'vuex';
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';

View File

@ -128,9 +128,7 @@
<script lang="ts">
import Vue from 'vue';
import { mapStores } from 'pinia';
import {
OnConnectionBindInfo, Connection, Endpoint, N8nPlusEndpoint, jsPlumbInstance,
} from 'jsplumb';
import type { OnConnectionBindInfo, Connection, Endpoint, N8nPlusEndpoint, jsPlumbInstance } from 'jsplumb';
import type { MessageBoxInputData } from 'element-ui/types/message-box';
import once from 'lodash/once';
@ -213,8 +211,8 @@ import {
IUser,
INodeUpdatePropertiesInformation,
} from '@/Interface';
import { getAccountAge } from '@/modules/userHelpers';
import { dataPinningEventBus } from "@/event-bus/data-pinning-event-bus";
import { getAccountAge } from '@/stores/userHelpers';
import { debounceHelper } from '@/components/mixins/debounce';
import { useUIStore } from '@/stores/ui';
import { useSettingsStore } from '@/stores/settings';
@ -226,6 +224,10 @@ import { useRootStore } from '@/stores/n8nRootStore';
import { useNDVStore } from '@/stores/ndv';
import { useTemplatesStore } from '@/stores/templates';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
import { useTagsStore } from '@/stores/tags';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
import { useCanvasStore } from '@/stores/canvas';
interface AddNodeOptions {
@ -379,6 +381,10 @@ export default mixins(
},
computed: {
...mapStores(
useCanvasStore,
useTagsStore,
useCredentialsStore,
useNodeCreatorStore,
useNodeTypesStore,
useNDVStore,
useRootStore,
@ -497,7 +503,6 @@ export default mixins(
getNodeViewOffsetPosition(): XYPosition {
return this.uiStore.nodeViewOffsetPosition;
},
...mapStores(useCanvasStore),
nodeViewScale(): number {
return this.canvasStore.nodeViewScale;
},
@ -662,10 +667,10 @@ export default mixins(
},
showTriggerCreator(source: string) {
if(this.createNodeActive) return;
this.$store.commit('nodeCreator/setSelectedType', TRIGGER_NODE_FILTER);
this.$store.commit('nodeCreator/setShowScrim', true);
this.nodeCreatorStore.selectedType = TRIGGER_NODE_FILTER;
this.nodeCreatorStore.showScrim = true;
this.onToggleNodeCreator({ source, createNodeActive: true });
this.$nextTick(() => this.$store.commit('nodeCreator/setShowTabs', false));
this.nodeCreatorStore.showTabs = false;
},
async openExecution(executionId: string) {
this.startLoading();
@ -832,7 +837,7 @@ export default mixins(
const tags = (data.tags || []) as ITag[];
const tagIds = tags.map((tag) => tag.id);
this.workflowsStore.setWorkflowTagIds(tagIds || []);
this.$store.commit('tags/upsertTags', tags);
this.tagsStore.upsertTags(tags);
await this.addNodes(data.nodes, data.connections);
@ -1149,6 +1154,7 @@ export default mixins(
const childNodes = workflow.getChildNodes(sourceNodeName);
for (const nodeName of childNodes) {
const node = this.workflowsStore.nodesByName[nodeName] as INodeUi;
if (node.position[0] < sourceNode.position[0]) {
continue;
}
@ -1156,7 +1162,7 @@ export default mixins(
const updateInformation: INodeUpdatePropertiesInformation = {
name: nodeName,
properties: {
position: { position: [node.position[0] + margin, node.position[1]] },
position: [node.position[0] + margin, node.position[1]],
},
};
@ -1413,7 +1419,7 @@ export default mixins(
const tagsEnabled = this.settingsStore.areTagsEnabled;
if (importTags && tagsEnabled && Array.isArray(workflowData.tags)) {
const allTags: ITag[] = await this.$store.dispatch('tags/fetchAll');
const allTags = await this.tagsStore.fetchAll();
const tagNames = new Set(allTags.map((tag) => tag.name));
const workflowTags = workflowData.tags as ITag[];
@ -1421,7 +1427,7 @@ export default mixins(
const creatingTagPromises: Array<Promise<ITag>> = [];
for (const tag of notFound) {
const creationPromise = this.$store.dispatch('tags/create', tag.name)
const creationPromise = this.tagsStore.create(tag.name)
.then((tag: ITag) => {
allTags.push(tag);
return tag;
@ -1528,13 +1534,13 @@ export default mixins(
};
const credentialPerType = nodeTypeData.credentials && nodeTypeData.credentials
.map(type => this.$store.getters['credentials/getCredentialsByType'](type.name))
.map(type => this.credentialsStore.getCredentialsByType(type.name))
.flat();
if (credentialPerType && credentialPerType.length === 1) {
const defaultCredential = credentialPerType[0];
const selectedCredentials = this.$store.getters['credentials/getCredentialById'](defaultCredential.id);
const selectedCredentials = this.credentialsStore.getCredentialById(defaultCredential.id);
const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
const credentials = {
[defaultCredential.type]: selected,
@ -2712,7 +2718,7 @@ export default mixins(
return;
}
Object.entries(node.credentials).forEach(([nodeCredentialType, nodeCredentials]: [string, INodeCredentialsDetails]) => {
const credentialOptions = this.$store.getters['credentials/getCredentialsByType'](nodeCredentialType) as ICredentialsResponse[];
const credentialOptions = this.credentialsStore.getCredentialsByType(nodeCredentialType);
// Check if workflows applies old credentials style
if (typeof nodeCredentials === 'string') {
@ -3081,11 +3087,11 @@ export default mixins(
await this.nodeTypesStore.getNodeTypes();
},
async loadCredentialTypes(): Promise<void> {
await this.$store.dispatch('credentials/fetchCredentialTypes', true);
await this.credentialsStore.fetchCredentialTypes(true);
},
async loadCredentials(): Promise<void> {
await this.$store.dispatch('credentials/fetchAllCredentials');
await this.$store.dispatch('credentials/fetchForeignCredentials');
await this.credentialsStore.fetchAllCredentials();
await this.credentialsStore.fetchForeignCredentials();
},
async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
@ -3193,7 +3199,9 @@ export default mixins(
if (createNodeActive === this.createNodeActive) return;
// Default to the trigger tab in node creator if there's no trigger node yet
if (!this.containsTrigger) this.$store.commit('nodeCreator/setSelectedType', TRIGGER_NODE_FILTER);
if (!this.containsTrigger) {
this.nodeCreatorStore.selectedType = TRIGGER_NODE_FILTER;
}
this.createNodeActive = createNodeActive;
this.$externalHooks().run('nodeView.createNodeActiveChanged', { source, createNodeActive });

View File

@ -20,6 +20,7 @@ import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';
import { useCredentialsStore } from '@/stores/credentials';
export default mixins(
@ -103,6 +104,7 @@ export default mixins(
},
computed: {
...mapStores(
useCredentialsStore,
useSettingsStore,
useUIStore,
useUsersStore,
@ -110,7 +112,7 @@ export default mixins(
},
methods: {
async getAllCredentials() {
const credentials = await this.$store.dispatch('credentials/fetchAllCredentials');
const credentials = await this.credentialsStore.fetchAllCredentials();
this.credentialsCount = credentials.length;
},
async getAllWorkflows() {

View File

@ -7,7 +7,7 @@ import {defineConfig, mergeConfig, PluginOption} from "vite";
import { defineConfig as defineVitestConfig } from 'vitest/config';
import packageJSON from './package.json';
const vendorChunks = ['vue', 'vue-router', 'vuex'];
const vendorChunks = ['vue', 'vue-router'];
const ignoreChunks = ['vue2-boring-avatars', 'vue-template-compiler', 'jquery', '@fontsource/open-sans'];
const isScopedPackageToIgnore = (str: string) => /@codemirror\//.test(str);