n8n/packages/editor-ui/src/stores/ui.store.ts
Michael Auerswald c3ba0123ad
feat: Migrate integer primary keys to nanoids (#6345)
* first commit for postgres migration

* (not working)

* sqlite migration

* quicksave

* fix tests

* fix pg test

* fix postgres

* fix variables import

* fix execution saving

* add user settings fix

* change migration to single lines

* patch preferences endpoint

* cleanup

* improve variable import

* cleanup unusued code

* Update packages/cli/src/PublicApi/v1/handlers/workflows/workflows.handler.ts

Co-authored-by: Omar Ajoue <krynble@gmail.com>

* address review notes

* fix var update/import

* refactor: Separate execution data to its own table (#6323)

* wip: Temporary migration process

* refactor: Create boilerplate repository methods for executions

* fix: Lint issues

* refactor: Added search endpoint to repository

* refactor: Make the execution list work again

* wip: Updating how we create and update executions everywhere

* fix: Lint issues and remove most of the direct access to execution model

* refactor: Remove includeWorkflowData flag and fix more tests

* fix: Lint issues

* fix: Fixed ordering of executions for FE, removed transaction when saving execution and removed unnecessary update

* refactor: Add comment about missing feature

* refactor: Refactor counting executions

* refactor: Add migration for other dbms and fix issues found

* refactor: Fix lint issues

* refactor: Remove unnecessary comment and auto inject repo to internal hooks

* refactor: remove type assertion

* fix: Fix broken tests

* fix: Remove unnecessary import

* Remove unnecessary toString() call

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* fix: Address comments after review

* refactor: Remove unused import

* fix: Lint issues

* fix: Add correct migration files

---------

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* remove null values from credential export

* fix: Fix an issue with queue mode where all running execution would be returned

* fix: Update n8n node to allow for workflow ids with letters

* set upstream on set branch

* remove typo

* add nodeAccess to credentials

* fix unsaved run check for undefined id

* fix(core): Rename version control feature to source control (#6480)

* rename versionControl to sourceControl

* fix source control tooltip wording

---------

Co-authored-by: Romain Minaud <romain.minaud@gmail.com>

* fix(editor): Pay 548 hide the set up version control button (#6485)

* feat(DebugHelper Node): Fix and include in main app (#6406)

* improve node a bit

* fixing continueOnFail() ton contain error in json

* improve pairedItem

* fix random data returning object results

* fix nanoId length typo

* update pnpm-lock file

---------

Co-authored-by: Marcus <marcus@n8n.io>

* fix(editor): Remove setup source control CTA button

* fix(editor): Remove setup source control CTA button

---------

Co-authored-by: Michael Auerswald <michael.auerswald@gmail.com>
Co-authored-by: Marcus <marcus@n8n.io>

* fix(editor): Update source control docs links (#6488)

* feat(DebugHelper Node): Fix and include in main app (#6406)

* improve node a bit

* fixing continueOnFail() ton contain error in json

* improve pairedItem

* fix random data returning object results

* fix nanoId length typo

* update pnpm-lock file

---------

Co-authored-by: Marcus <marcus@n8n.io>

* feat(editor): Replace root events with event bus events (no-changelog) (#6454)

* feat: replace root events with event bus events

* fix: prevent cypress from replacing global with globalThis in import path

* feat: remove emitter mixin

* fix: replace component events with event bus

* fix: fix linting issue

* fix: fix breaking expression switch

* chore: prettify ndv e2e suite code

* fix(editor): Update source control docs links

---------

Co-authored-by: Michael Auerswald <michael.auerswald@gmail.com>
Co-authored-by: Marcus <marcus@n8n.io>
Co-authored-by: Alex Grozav <alex@grozav.com>

* fix tag endpoint regex

---------

Co-authored-by: Omar Ajoue <krynble@gmail.com>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Romain Minaud <romain.minaud@gmail.com>
Co-authored-by: Csaba Tuncsik <csaba@n8n.io>
Co-authored-by: Marcus <marcus@n8n.io>
Co-authored-by: Alex Grozav <alex@grozav.com>
2023-06-20 19:13:18 +02:00

534 lines
15 KiB
TypeScript

import {
applyForOnboardingCall,
fetchNextOnboardingPrompt,
submitEmailOnSignup,
} from '@/api/workflow-webhooks';
import {
ABOUT_MODAL_KEY,
ASK_AI_MODAL_KEY,
CHANGE_PASSWORD_MODAL_KEY,
COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
COMMUNITY_PACKAGE_MANAGE_ACTIONS,
CONTACT_PROMPT_MODAL_KEY,
CREDENTIAL_EDIT_MODAL_KEY,
CREDENTIAL_SELECT_MODAL_KEY,
DELETE_USER_MODAL_KEY,
DUPLICATE_MODAL_KEY,
EXECUTIONS_MODAL_KEY,
FAKE_DOOR_FEATURES,
IMPORT_CURL_MODAL_KEY,
INVITE_USER_MODAL_KEY,
LOG_STREAM_MODAL_KEY,
ONBOARDING_CALL_SIGNUP_MODAL_KEY,
PERSONALIZATION_MODAL_KEY,
STORES,
TAGS_MANAGER_MODAL_KEY,
VALUE_SURVEY_MODAL_KEY,
VERSIONS_MODAL_KEY,
VIEWS,
WORKFLOW_ACTIVE_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
WORKFLOW_SHARE_MODAL_KEY,
SOURCE_CONTROL_PUSH_MODAL_KEY,
} from '@/constants';
import type {
CurlToJSONResponse,
IFakeDoorLocation,
IMenuItem,
INodeUi,
IOnboardingCallPrompt,
IUser,
UIState,
XYPosition,
} from '@/Interface';
import { defineStore } from 'pinia';
import { useRootStore } from './n8nRoot.store';
import { getCurlToJson } from '@/api/curlHelper';
import { useWorkflowsStore } from './workflows.store';
import { useSettingsStore } from './settings.store';
import { useCloudPlanStore } from './cloudPlan.store';
import type { BaseTextKey } from '@/plugins/i18n';
import { i18n as locale } from '@/plugins/i18n';
import type { Modals, NewCredentialsModal } from '@/Interface';
import { useTelemetryStore } from '@/stores/telemetry.store';
export const useUIStore = defineStore(STORES.UI, {
state: (): UIState => ({
activeActions: [],
activeCredentialType: null,
modals: {
[ABOUT_MODAL_KEY]: {
open: false,
},
[ASK_AI_MODAL_KEY]: {
open: false,
},
[CHANGE_PASSWORD_MODAL_KEY]: {
open: false,
},
[CONTACT_PROMPT_MODAL_KEY]: {
open: false,
},
[CREDENTIAL_SELECT_MODAL_KEY]: {
open: false,
},
[DELETE_USER_MODAL_KEY]: {
open: false,
activeId: null,
},
[DUPLICATE_MODAL_KEY]: {
open: false,
},
[ONBOARDING_CALL_SIGNUP_MODAL_KEY]: {
open: false,
},
[PERSONALIZATION_MODAL_KEY]: {
open: false,
},
[INVITE_USER_MODAL_KEY]: {
open: false,
},
[TAGS_MANAGER_MODAL_KEY]: {
open: false,
},
[VALUE_SURVEY_MODAL_KEY]: {
open: false,
},
[VERSIONS_MODAL_KEY]: {
open: false,
},
[WORKFLOW_SETTINGS_MODAL_KEY]: {
open: false,
},
[EXECUTIONS_MODAL_KEY]: {
open: false,
},
[WORKFLOW_SHARE_MODAL_KEY]: {
open: false,
},
[WORKFLOW_ACTIVE_MODAL_KEY]: {
open: false,
},
[COMMUNITY_PACKAGE_INSTALL_MODAL_KEY]: {
open: false,
},
[COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY]: {
open: false,
mode: '',
activeId: null,
},
[IMPORT_CURL_MODAL_KEY]: {
open: false,
curlCommand: '',
httpNodeParameters: '',
},
[LOG_STREAM_MODAL_KEY]: {
open: false,
data: undefined,
},
[CREDENTIAL_EDIT_MODAL_KEY]: {
open: false,
mode: '',
activeId: null,
showAuthSelector: false,
},
[SOURCE_CONTROL_PUSH_MODAL_KEY]: {
open: false,
},
},
modalStack: [],
sidebarMenuCollapsed: true,
isPageLoading: true,
currentView: '',
mainPanelPosition: 0.5,
fakeDoorFeatures: [
{
id: FAKE_DOOR_FEATURES.ENVIRONMENTS,
featureName: 'fakeDoor.settings.environments.name',
icon: 'server',
infoText: 'fakeDoor.settings.environments.infoText',
actionBoxTitle: 'fakeDoor.settings.environments.actionBox.title',
actionBoxDescription: 'fakeDoor.settings.environments.actionBox.description',
linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=environments',
uiLocations: ['settings'],
},
{
id: FAKE_DOOR_FEATURES.SSO,
featureName: 'fakeDoor.settings.sso.name',
icon: 'key',
actionBoxTitle: 'fakeDoor.settings.sso.actionBox.title',
actionBoxDescription: 'fakeDoor.settings.sso.actionBox.description',
linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=sso',
uiLocations: ['settings/users'],
},
],
draggable: {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
},
stateIsDirty: false,
lastSelectedNode: null,
lastSelectedNodeOutputIndex: null,
nodeViewOffsetPosition: [0, 0],
nodeViewMoveInProgress: false,
selectedNodes: [],
sidebarMenuItems: [],
nodeViewInitialized: false,
addFirstStepOnLoad: false,
executionSidebarAutoRefresh: true,
}),
getters: {
contextBasedTranslationKeys() {
const settingsStore = useSettingsStore();
const deploymentType = settingsStore.deploymentType;
let contextKey = '';
if (deploymentType === 'cloud') {
contextKey = '.cloud';
} else if (deploymentType === 'desktop_mac' || deploymentType === 'desktop_win') {
contextKey = '.desktop';
}
return {
upgradeLinkUrl: `contextual.upgradeLinkUrl${contextKey}`,
credentials: {
sharing: {
unavailable: {
title: `contextual.credentials.sharing.unavailable.title${contextKey}`,
description: `contextual.credentials.sharing.unavailable.description${contextKey}`,
action: `contextual.credentials.sharing.unavailable.action${contextKey}`,
button: `contextual.credentials.sharing.unavailable.button${contextKey}`,
},
},
},
workflows: {
sharing: {
title: 'contextual.workflows.sharing.title',
unavailable: {
title: `contextual.workflows.sharing.unavailable.title${contextKey}`,
description: {
modal: `contextual.workflows.sharing.unavailable.description.modal${contextKey}`,
tooltip: `contextual.workflows.sharing.unavailable.description.tooltip${contextKey}`,
},
action: `contextual.workflows.sharing.unavailable.action${contextKey}`,
button: `contextual.workflows.sharing.unavailable.button${contextKey}`,
},
},
},
variables: {
unavailable: {
title: `contextual.variables.unavailable.title${contextKey}`,
description: 'contextual.variables.unavailable.description',
action: `contextual.variables.unavailable.action${contextKey}`,
button: `contextual.variables.unavailable.button${contextKey}`,
},
},
users: {
settings: {
unavailable: {
title: `contextual.users.settings.unavailable.title${contextKey}`,
description: `contextual.users.settings.unavailable.description${contextKey}`,
button: `contextual.users.settings.unavailable.button${contextKey}`,
},
},
},
};
},
getLastSelectedNode(): INodeUi | null {
const workflowsStore = useWorkflowsStore();
if (this.lastSelectedNode) {
return workflowsStore.getNodeByName(this.lastSelectedNode);
}
return null;
},
getCurlCommand(): string | undefined {
return this.modals[IMPORT_CURL_MODAL_KEY].curlCommand;
},
getHttpNodeParameters(): string | undefined {
return this.modals[IMPORT_CURL_MODAL_KEY].httpNodeParameters;
},
areExpressionsDisabled(): boolean {
return this.currentView === VIEWS.DEMO;
},
isVersionsOpen(): boolean {
return this.modals[VERSIONS_MODAL_KEY].open;
},
isModalOpen() {
return (name: string) => this.modals[name].open;
},
isModalActive() {
return (name: string) => this.modalStack.length > 0 && name === this.modalStack[0];
},
getModalActiveId() {
return (name: string) => this.modals[name].activeId;
},
getModalMode() {
return (name: string) => this.modals[name].mode;
},
getModalData() {
return (name: string) => this.modals[name].data;
},
getFakeDoorByLocation() {
return (location: IFakeDoorLocation) =>
this.fakeDoorFeatures.filter((fakeDoor) => fakeDoor.uiLocations.includes(location));
},
getFakeDoorById() {
return (id: string) =>
this.fakeDoorFeatures.find((fakeDoor) => fakeDoor.id.toString() === id);
},
isReadOnlyView(): boolean {
return ![VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW].includes(this.currentView as VIEWS);
},
isNodeView(): boolean {
return [
VIEWS.NEW_WORKFLOW.toString(),
VIEWS.WORKFLOW.toString(),
VIEWS.WORKFLOW_EXECUTIONS.toString(),
].includes(this.currentView);
},
isActionActive() {
return (action: string) => this.activeActions.includes(action);
},
getSelectedNodes(): INodeUi[] {
const seen = new Set();
return this.selectedNodes.filter((node: INodeUi) => {
// dedupe for instances when same node is selected in different ways
if (!seen.has(node.id)) {
seen.add(node.id);
return true;
}
return false;
});
},
isNodeSelected() {
return (nodeName: string): boolean => {
let index;
for (index in this.selectedNodes) {
if (this.selectedNodes[index].name === nodeName) {
return true;
}
}
return false;
};
},
upgradeLinkUrl() {
return (source: string, utm_campaign: string): string => {
const linkUrlTranslationKey = this.contextBasedTranslationKeys
.upgradeLinkUrl as BaseTextKey;
let linkUrl = locale.baseText(linkUrlTranslationKey);
if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
linkUrl = `${linkUrl}?ref=${source}`;
} else if (linkUrlTranslationKey.endsWith('.desktop')) {
linkUrl = `${linkUrl}&utm_campaign=${utm_campaign || source}`;
}
return linkUrl;
};
},
},
actions: {
setMode(name: keyof Modals, mode: string): void {
this.modals[name] = {
...this.modals[name],
mode,
};
},
setActiveId(name: keyof Modals, activeId: string): void {
this.modals[name] = {
...this.modals[name],
activeId,
};
},
setShowAuthSelector(name: keyof Modals, showAuthSelector: boolean) {
this.modals[name] = {
...this.modals[name],
showAuthSelector,
} as NewCredentialsModal;
},
setModalData(payload: { name: keyof Modals; data: Record<string, unknown> }) {
this.modals[payload.name] = {
...this.modals[payload.name],
data: payload.data,
};
},
openModal(name: keyof Modals): void {
this.modals[name] = {
...this.modals[name],
open: true,
};
this.modalStack = [name].concat(this.modalStack) as string[];
},
openModalWithData(payload: { name: keyof Modals; data: Record<string, unknown> }): void {
this.setModalData(payload);
this.openModal(payload.name);
},
closeModal(name: keyof Modals): void {
this.modals[name] = {
...this.modals[name],
open: false,
};
this.modalStack = this.modalStack.filter((openModalName: string) => {
return name !== openModalName;
});
},
closeAllModals(): void {
Object.keys(this.modals).forEach((name) => {
if (this.modals[name].open) {
this.modals[name] = {
...this.modals[name],
open: false,
};
}
});
this.modalStack = [];
},
draggableStartDragging(type: string, data: string): void {
this.draggable = {
isDragging: true,
type,
data,
canDrop: false,
stickyPosition: null,
};
},
draggableStopDragging(): void {
this.draggable = {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
};
},
setDraggableStickyPos(position: XYPosition): void {
this.draggable = {
...this.draggable,
stickyPosition: position,
};
},
setDraggableCanDrop(canDrop: boolean): void {
this.draggable = {
...this.draggable,
canDrop,
};
},
openDeleteUserModal(id: string): void {
this.setActiveId(DELETE_USER_MODAL_KEY, id);
this.openModal(DELETE_USER_MODAL_KEY);
},
openExistingCredential(id: string): void {
this.setActiveId(CREDENTIAL_EDIT_MODAL_KEY, id);
this.setMode(CREDENTIAL_EDIT_MODAL_KEY, 'edit');
this.openModal(CREDENTIAL_EDIT_MODAL_KEY);
},
openNewCredential(type: string, showAuthOptions = false): void {
this.setActiveId(CREDENTIAL_EDIT_MODAL_KEY, type);
this.setShowAuthSelector(CREDENTIAL_EDIT_MODAL_KEY, showAuthOptions);
this.setMode(CREDENTIAL_EDIT_MODAL_KEY, 'new');
this.openModal(CREDENTIAL_EDIT_MODAL_KEY);
},
async getNextOnboardingPrompt(): Promise<IOnboardingCallPrompt> {
const rootStore = useRootStore();
const instanceId = rootStore.instanceId;
// TODO: current USER
const currentUser = {} as IUser;
return fetchNextOnboardingPrompt(instanceId, currentUser);
},
async applyForOnboardingCall(email: string): Promise<string> {
const rootStore = useRootStore();
const instanceId = rootStore.instanceId;
// TODO: current USER
const currentUser = {} as IUser;
return applyForOnboardingCall(instanceId, currentUser, email);
},
async submitContactEmail(email: string, agree: boolean): Promise<string> {
const rootStore = useRootStore();
const instanceId = rootStore.instanceId;
// TODO: current USER
const currentUser = {} as IUser;
return submitEmailOnSignup(instanceId, currentUser, email || currentUser.email, agree);
},
openCommunityPackageUninstallConfirmModal(packageName: string) {
this.setActiveId(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, packageName);
this.setMode(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL);
this.openModal(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
},
openCommunityPackageUpdateConfirmModal(packageName: string) {
this.setActiveId(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, packageName);
this.setMode(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE);
this.openModal(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
},
addActiveAction(action: string): void {
if (!this.activeActions.includes(action)) {
this.activeActions.push(action);
}
},
removeActiveAction(action: string): void {
const actionIndex = this.activeActions.indexOf(action);
if (actionIndex !== -1) {
this.activeActions.splice(actionIndex, 1);
}
},
addSelectedNode(node: INodeUi): void {
this.selectedNodes.push(node);
},
removeNodeFromSelection(node: INodeUi): void {
let index;
for (index in this.selectedNodes) {
if (this.selectedNodes[index].name === node.name) {
this.selectedNodes.splice(parseInt(index, 10), 1);
break;
}
}
},
resetSelectedNodes(): void {
this.selectedNodes = [];
},
addSidebarMenuItems(menuItems: IMenuItem[]) {
const updated = this.sidebarMenuItems.concat(menuItems);
this.sidebarMenuItems = updated;
},
setCurlCommand(payload: { name: string; command: string }): void {
this.modals[payload.name] = {
...this.modals[payload.name],
curlCommand: payload.command,
};
},
setHttpNodeParameters(payload: { name: string; parameters: string }): void {
this.modals[payload.name] = {
...this.modals[payload.name],
httpNodeParameters: payload.parameters,
};
},
toggleSidebarMenuCollapse(): void {
this.sidebarMenuCollapsed = !this.sidebarMenuCollapsed;
},
async getCurlToJson(curlCommand: string): Promise<CurlToJSONResponse> {
const rootStore = useRootStore();
return getCurlToJson(rootStore.getRestApiContext, curlCommand);
},
goToUpgrade(source: string, utm_campaign: string, mode: 'open' | 'redirect' = 'open'): void {
const { usageLeft, trialDaysLeft, userIsTrialing } = useCloudPlanStore();
const { executionsLeft, workflowsLeft } = usageLeft;
useTelemetryStore().track('User clicked upgrade CTA', {
source,
isTrial: userIsTrialing,
deploymentType: useSettingsStore().deploymentType,
trialDaysLeft,
executionsLeft,
workflowsLeft,
});
if (mode === 'open') {
window.open(this.upgradeLinkUrl(source, utm_campaign), '_blank');
} else {
location.href = this.upgradeLinkUrl(source, utm_campaign);
}
},
},
});