n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-08-17 09:00:30 +03:00
Code Issues Projects Releases Wiki Activity

refactor(editor): Migrate ui.store to use composition API (no-changelog) (#9892)

Browse Source
This commit is contained in:
Ricardo Espinoza 2024-07-03 15:11:40 -04:00 committed by GitHub
parent 22990342df
commit f64ca621e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
42 changed files with 710 additions and 649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/editor-ui/src/Interface.ts
View File

@ -6,7 +6,6 @@ import type {
TRIGGER_NODE_CREATOR_VIEW,
REGULAR_NODE_CREATOR_VIEW,
AI_OTHERS_NODE_CREATOR_VIEW,
VIEWS,
ROLE,
} from '@/constants';
import type { IMenuItem, NodeCreatorTag } from 'n8n-design-system';
@ -1264,41 +1263,6 @@ export interface NotificationOptions extends Partial<ElementNotificationOptions>
message: string | ElementNotificationOptions['message'];
}
export interface UIState {
activeActions: string[];
activeCredentialType: string | null;
sidebarMenuCollapsed: boolean;
modalStack: string[];
modals: Modals;
isPageLoading: boolean;
currentView: string;
mainPanelPosition: number;
fakeDoorFeatures: IFakeDoor[];
draggable: {
isDragging: boolean;
type: string;
data: string;
canDrop: boolean;
stickyPosition: null | XYPosition;
};
stateIsDirty: boolean;
lastSelectedNode: string | null;
lastSelectedNodeOutputIndex: number | null;
lastSelectedNodeEndpointUuid: string | null;
nodeViewOffsetPosition: XYPosition;
nodeViewMoveInProgress: boolean;
selectedNodes: INodeUi[];
nodeViewInitialized: boolean;
addFirstStepOnLoad: boolean;
bannersHeight: number;
bannerStack: BannerName[];
theme: ThemeOption;
pendingNotificationsForViews: {
[key in VIEWS]?: NotificationOptions[];
};
isCreateNodeActive: boolean;
}
export type IFakeDoor = {
id: FAKE_DOOR_FEATURES;
featureName: BaseTextKey;

4
packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View File

@ -448,8 +448,8 @@ const showSharingContent = computed(() => activeTab.value === 'sharing' && !!cre
onMounted(async () => {
requiredCredentials.value =
isCredentialModalState(uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY]) &&
uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].showAuthSelector === true;
isCredentialModalState(uiStore.modalsById[CREDENTIAL_EDIT_MODAL_KEY]) &&
uiStore.modalsById[CREDENTIAL_EDIT_MODAL_KEY].showAuthSelector === true;
if (props.mode === 'new' && credentialTypeName.value) {
credentialName.value = await credentialsStore.getNewCredentialName({

2
packages/editor-ui/src/components/FeatureComingSoon.vue
View File

@ -56,7 +56,7 @@ export default defineComponent({
return this.rootStore.instanceId;
},
featureInfo(): IFakeDoor | undefined {
return this.uiStore.getFakeDoorById(this.featureId);
return this.uiStore.fakeDoorsById[this.featureId];
},
},
methods: {

4
packages/editor-ui/src/components/GenerateCurlModal.vue
View File

@ -61,8 +61,8 @@ const ndvStore = useNDVStore();
const modalBus = createEventBus();
const formBus = createEventBus();
const initialServiceValue = uiStore.getModalData(GENERATE_CURL_MODAL_KEY)?.service as string;
const initialRequestValue = uiStore.getModalData(GENERATE_CURL_MODAL_KEY)?.request as string;
const initialServiceValue = uiStore.modalsById[GENERATE_CURL_MODAL_KEY].data?.service as string;
const initialRequestValue = uiStore.modalsById[GENERATE_CURL_MODAL_KEY].data?.request as string;
const formInputs: IFormInput[] = [
{

2
packages/editor-ui/src/components/ImportCurlModal.vue
View File

@ -66,7 +66,7 @@ const { importCurlCommand } = useImportCurlCommand({
});
onMounted(() => {
curlCommand.value = (uiStore.getModalData(IMPORT_CURL_MODAL_KEY)?.curlCommand as string) ?? '';
curlCommand.value = (uiStore.modalsById[IMPORT_CURL_MODAL_KEY].data?.curlCommand as string) ?? '';
setTimeout(() => {
inputRef.value?.focus();

2
packages/editor-ui/src/components/InputPanel.vue
View File

@ -304,7 +304,7 @@ export default defineComponent({
return false;
},
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
activeNode(): INodeUi | null {

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

@ -111,7 +111,7 @@ const isNewWorkflow = computed(() => {
});
const isWorkflowSaving = computed(() => {
return uiStore.isActionActive('workflowSaving');
return uiStore.isActionActive['workflowSaving'];
});
const onWorkflowPage = computed(() => {

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

@ -1,6 +1,6 @@
<template>
<el-dialog
:model-value="uiStore.isModalOpen(name)"
:model-value="uiStore.modalsById[name].open"
:before-close="closeDialog"
:class="{
'dialog-wrapper': true,
@ -169,7 +169,7 @@ export default defineComponent({
},
methods: {
onWindowKeydown(event: KeyboardEvent) {
if (!this.uiStore.isModalActive(this.name)) {
if (!this.uiStore.isModalActiveById[this.name]) {
return;
}
@ -178,7 +178,7 @@ export default defineComponent({
}
},
handleEnter() {
if (this.uiStore.isModalActive(this.name)) {
if (this.uiStore.isModalActiveById[this.name]) {
this.$emit('enter');
}
},

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

@ -1,7 +1,7 @@
<template>
<ElDrawer
:direction="direction"
:model-value="uiStore.isModalOpen(name)"
:model-value="uiStore.modalsById[name].open"
:size="width"
:before-close="close"
:modal="modal"
@ -74,7 +74,7 @@ export default defineComponent({
},
methods: {
onWindowKeydown(event: KeyboardEvent) {
if (!this.uiStore.isModalActive(this.name)) {
if (!this.uiStore.isModalActiveById[this.name]) {
return;
}
@ -83,7 +83,7 @@ export default defineComponent({
}
},
handleEnter() {
if (this.uiStore.isModalActive(this.name)) {
if (this.uiStore.isModalActiveById[this.name]) {
this.$emit('enter');
}
},

12
packages/editor-ui/src/components/ModalRoot.vue
View File

@ -1,12 +1,12 @@
<template>
<div v-if="uiStore.isModalOpen(name) || keepAlive">
<div v-if="uiStore.modalsById[name].open || keepAlive">
<slot
:modal-name="name"
:active="uiStore.isModalActive(name)"
:open="uiStore.isModalOpen(name)"
:active-id="uiStore.getModalActiveId(name)"
:mode="uiStore.getModalMode(name)"
:data="uiStore.getModalData(name)"
:active="uiStore.isModalActiveById[name]"
:open="uiStore.modalsById[name].open"
:active-id="uiStore.modalsById[name].activeId"
:mode="uiStore.modalsById[name].mode"
:data="uiStore.modalsById[name].data"
></slot>
</div>
</template>

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

@ -592,7 +592,7 @@ export default defineComponent({
return undefined;
},
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
nodeStyle() {
const returnStyles: {

4
packages/editor-ui/src/components/NodeDetailsView.vue
View File

@ -242,7 +242,7 @@ const activeNodeType = computed(() => {
return null;
});
const workflowRunning = computed(() => uiStore.isActionActive('workflowRunning'));
const workflowRunning = computed(() => uiStore.isActionActive['workflowRunning']);
const showTriggerWaitingWarning = computed(
() =>
@ -432,7 +432,7 @@ const featureRequestUrl = computed(() => {
const outputPanelEditMode = computed(() => ndvStore.outputPanelEditMode);
const isWorkflowRunning = computed(() => uiStore.isActionActive('workflowRunning'));
const isWorkflowRunning = computed(() => uiStore.isActionActive['workflowRunning']);
const isExecutionWaitingForWebhook = computed(() => workflowsStore.executionWaitingForWebhook);

2
packages/editor-ui/src/components/NodeExecuteButton.vue
View File

@ -128,7 +128,7 @@ export default defineComponent({
);
},
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
isTriggerNode(): boolean {
if (!this.node) {

2
packages/editor-ui/src/components/OutputPanel.vue
View File

@ -230,7 +230,7 @@ export default defineComponent({
return !!this.node && this.workflowsStore.isNodeExecuting(this.node.name);
},
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
workflowExecution(): IExecutionResponse | null {
return this.workflowsStore.getWorkflowExecution;

4
packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.test.ts
View File

@ -8,7 +8,9 @@ import { useTelemetry } from '@/composables/useTelemetry';
vi.mock('@/stores/ui.store', () => ({
useUIStore: vi.fn().mockReturnValue({
isModalOpen: vi.fn().mockReturnValue(() => true),
modalsById: vi.fn().mockReturnValue(() => {
open: true;
}),
closeModal: vi.fn(),
}),
}));

4
packages/editor-ui/src/components/SettingsSidebar.vue
View File

@ -46,7 +46,9 @@ export default defineComponent({
computed: {
...mapStores(useRootStore, useSettingsStore, useUIStore),
settingsFakeDoorFeatures(): IFakeDoor[] {
return this.uiStore.getFakeDoorByLocation('settings');
return Object.keys(this.uiStore.fakeDoorsByLocation)
.filter((location: string) => location.includes('settings'))
.map((location) => this.uiStore.fakeDoorsByLocation[location]);
},
sidebarMenuItems(): IMenuItem[] {
const menuItems: IMenuItem[] = [

2
packages/editor-ui/src/components/SourceControlPushModal.ee.vue
View File

@ -141,7 +141,7 @@ function getContext() {
return 'workflows';
} else if (
route.fullPath.startsWith('/credentials') ||
uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].open
uiStore.modalsById[CREDENTIAL_EDIT_MODAL_KEY].open
) {
return 'credentials';
} else if (route.fullPath.startsWith('/workflow/')) {

2
packages/editor-ui/src/components/Sticky.vue
View File

@ -288,7 +288,7 @@ export default defineComponent({
);
},
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
},
mounted() {

2
packages/editor-ui/src/components/TriggerPanel.vue
View File

@ -264,7 +264,7 @@ export default defineComponent({
);
},
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
isActivelyPolling(): boolean {
const triggeredNode = this.workflowsStore.executedNode;

2
packages/editor-ui/src/components/WorkflowLMChat.vue
View File

@ -219,7 +219,7 @@ export default defineComponent({
computed: {
...mapStores(useWorkflowsStore, useUIStore, useNodeTypesStore),
isLoading(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
},
async mounted() {

2
packages/editor-ui/src/components/__tests__/ChatEmbedModal.test.ts
View File

@ -12,7 +12,7 @@ const renderComponent = createComponentRenderer(ChatEmbedModal, {
pinia: createTestingPinia({
initialState: {
[STORES.UI]: {
modals: {
modalsById: {
[CHAT_EMBED_MODAL_KEY]: { open: true },
},
},

2
packages/editor-ui/src/components/__tests__/CommunityPackageInstallModal.spec.ts
View File

@ -17,7 +17,7 @@ const renderComponent = createComponentRenderer(CommunityPackageInstallModal, {
pinia: createTestingPinia({
initialState: {
[STORES.UI]: {
modals: {
modalsById: {
[COMMUNITY_PACKAGE_INSTALL_MODAL_KEY]: { open: true },
},
},

2
packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts
View File

@ -11,7 +11,7 @@ import { useUsageStore } from '@/stores/usage.store';
const pinia = createTestingPinia({
initialState: {
[STORES.UI]: {
modals: {
modalsById: {
[PERSONALIZATION_MODAL_KEY]: { open: true },
},
},

2
packages/editor-ui/src/components/__tests__/WorkflowSettings.spec.ts
View File

@ -53,7 +53,7 @@ describe('WorkflowSettingsVue', () => {
versionId: '123',
} as IWorkflowDb);
uiStore.modals[WORKFLOW_SETTINGS_MODAL_KEY] = {
uiStore.modalsById[WORKFLOW_SETTINGS_MODAL_KEY] = {
open: true,
};
});

2
packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue
View File

@ -11,7 +11,7 @@ defineEmits<{
const uiStore = useUIStore();
const locale = useI18n();
const workflowRunning = computed(() => uiStore.isActionActive('workflowRunning'));
const workflowRunning = computed(() => uiStore.isActionActive['workflowRunning']);
const runButtonText = computed(() => {
if (!workflowRunning.value) {

4
packages/editor-ui/src/composables/__tests__/useCanvasPanning.test.ts
View File

@ -8,7 +8,7 @@ vi.mock('@/stores/ui.store', () => ({
useUIStore: vi.fn(() => ({
nodeViewOffsetPosition: [0, 0],
nodeViewMoveInProgress: false,
isActionActive: vi.fn(),
isActionActive: vi.fn().mockReturnValue(() => true),
})),
}));
@ -62,7 +62,7 @@ describe('useCanvasPanning()', () => {
vi.mocked(useUIStore).mockReturnValueOnce({
nodeViewOffsetPosition: [0, 0],
nodeViewMoveInProgress: true,
isActionActive: vi.fn(),
isActionActive: vi.fn().mockReturnValue(() => true),
} as unknown as ReturnType<typeof useUIStore>);
const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');

10
packages/editor-ui/src/composables/__tests__/useNodeBase.spec.ts
View File

@ -140,21 +140,15 @@ describe('useNodeBase', () => {
it('should handle mouse left click correctly', () => {
const { mouseLeftClick } = nodeBase;
const isActionActiveFn = vi.fn().mockReturnValue(false);
// @ts-expect-error Pinia has a known issue when mocking getters, will be solved when migrating the uiStore to composition api
vi.spyOn(uiStore, 'isActionActive', 'get').mockReturnValue(isActionActiveFn);
// @ts-expect-error Pinia has a known issue when mocking getters, will be solved when migrating the uiStore to composition api
vi.spyOn(uiStore, 'isNodeSelected', 'get').mockReturnValue(() => false);
const event = new MouseEvent('click', {
bubbles: true,
cancelable: true,
});
uiStore.addActiveAction('notDragActive');
mouseLeftClick(event);
expect(isActionActiveFn).toHaveBeenCalledWith('dragActive');
expect(emit).toHaveBeenCalledWith('deselectAllNodes');
expect(emit).toHaveBeenCalledWith('nodeSelected', node.name);
});

16
packages/editor-ui/src/composables/__tests__/useRunWorkflow.spec.ts
View File

@ -25,14 +25,6 @@ vi.mock('@/stores/workflows.store', () => ({
}),
}));
vi.mock('@/stores/ui.store', () => ({
useUIStore: vi.fn().mockReturnValue({
isActionActive: vi.fn().mockReturnValue(false),
addActiveAction: vi.fn(),
removeActiveAction: vi.fn(),
}),
}));
vi.mock('@/composables/useTelemetry', () => ({
useTelemetry: vi.fn().mockReturnValue({ track: vi.fn() }),
}));
@ -103,6 +95,10 @@ describe('useRunWorkflow({ router })', () => {
workflowHelpers = useWorkflowHelpers({ router });
});
beforeEach(() => {
uiStore.activeActions = [];
});
describe('runWorkflowApi()', () => {
it('should throw an error if push connection is not active', async () => {
const { runWorkflowApi } = useRunWorkflow({ router });
@ -157,7 +153,7 @@ describe('useRunWorkflow({ router })', () => {
describe('runWorkflow()', () => {
it('should return undefined if UI action "workflowRunning" is active', async () => {
const { runWorkflow } = useRunWorkflow({ router });
vi.mocked(uiStore).isActionActive.mockReturnValue(true);
uiStore.addActiveAction('workflowRunning');
const result = await runWorkflow({});
expect(result).toBeUndefined();
});
@ -166,7 +162,7 @@ describe('useRunWorkflow({ router })', () => {
const mockExecutionResponse = { executionId: '123' };
const { runWorkflow } = useRunWorkflow({ router });
vi.mocked(uiStore).isActionActive.mockReturnValue(false);
vi.mocked(uiStore).activeActions = [''];
vi.mocked(workflowHelpers).getCurrentWorkflow.mockReturnValue({
name: 'Test Workflow',
} as unknown as Workflow);

2
packages/editor-ui/src/composables/useCanvasMouseSelect.ts
View File

@ -167,7 +167,7 @@ export default function useCanvasMouseSelect() {
return;
}
if (uiStore.isActionActive('dragActive')) {
if (uiStore.isActionActive['dragActive']) {
// If a node does currently get dragged we do not activate the selection
return;
}

4
packages/editor-ui/src/composables/useCanvasPanning.ts
View File

@ -49,7 +49,7 @@ export function useCanvasPanning(
return;
}
if (uiStore.isActionActive('dragActive')) {
if (uiStore.isActionActive['dragActive']) {
// If a node does currently get dragged we do not activate the selection
return;
}
@ -95,7 +95,7 @@ export function useCanvasPanning(
return;
}
if (uiStore.isActionActive('dragActive')) {
if (uiStore.isActionActive['dragActive']) {
return;
}

6
packages/editor-ui/src/composables/useNodeBase.ts
View File

@ -621,7 +621,7 @@ export function useNodeBase({
}
function touchEnd(_e: MouseEvent) {
if (deviceSupport.isTouchDevice && uiStore.isActionActive('dragActive')) {
if (deviceSupport.isTouchDevice && uiStore.isActionActive['dragActive']) {
uiStore.removeActiveAction('dragActive');
}
}
@ -640,14 +640,14 @@ export function useNodeBase({
}
if (!deviceSupport.isTouchDevice) {
if (uiStore.isActionActive('dragActive')) {
if (uiStore.isActionActive['dragActive']) {
uiStore.removeActiveAction('dragActive');
} else {
if (!deviceSupport.isCtrlKeyPressed(e)) {
emit('deselectAllNodes');
}
if (uiStore.isNodeSelected(data.value?.name ?? '')) {
if (uiStore.isNodeSelected[data.value?.name ?? '']) {
emit('deselectNode', name);
} else {
emit('nodeSelected', name);

6
packages/editor-ui/src/composables/usePushConnection.ts
View File

@ -149,7 +149,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
}
if (receivedData.type === 'nodeExecuteAfter' || receivedData.type === 'nodeExecuteBefore') {
if (!uiStore.isActionActive('workflowRunning')) {
if (!uiStore.isActionActive['workflowRunning']) {
// No workflow is running so ignore the messages
return false;
}
@ -169,7 +169,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
let recoveredPushData: IPushDataExecutionFinished | undefined = undefined;
if (receivedData.type === 'executionRecovered') {
const recoveredExecutionId = receivedData.data?.executionId;
const isWorkflowRunning = uiStore.isActionActive('workflowRunning');
const isWorkflowRunning = uiStore.isActionActive['workflowRunning'];
if (isWorkflowRunning && workflowsStore.activeExecutionId === recoveredExecutionId) {
// pull execution data for the recovered execution from the server
const executionData = await workflowsStore.fetchExecutionDataById(
@ -262,7 +262,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
workflowsStore.finishActiveExecution(pushData);
}
if (!uiStore.isActionActive('workflowRunning')) {
if (!uiStore.isActionActive['workflowRunning']) {
// No workflow is running so ignore the messages
return false;
}

2
packages/editor-ui/src/composables/useRunWorkflow.ts
View File

@ -91,7 +91,7 @@ export function useRunWorkflow(useRunWorkflowOpts: { router: ReturnType<typeof u
}): Promise<IExecutionPushResponse | undefined> {
const workflow = workflowHelpers.getCurrentWorkflow();
if (uiStore.isActionActive('workflowRunning')) {
if (uiStore.isActionActive['workflowRunning']) {
return;
}

2
packages/editor-ui/src/composables/useToast.ts
View File

@ -175,7 +175,7 @@ export function useToast() {
function showNotificationForViews(views: VIEWS[]) {
const notifications: NotificationOptions[] = [];
views.forEach((view) => {
notifications.push(...uiStore.getNotificationsForView(view));
notifications.push(...(uiStore.pendingNotificationsForViews[view] ?? []));
});
if (notifications.length) {
notifications.forEach(async (notification) => {

8
packages/editor-ui/src/hooks/utils/hooksAddFakeDoorFeatures.ts
View File

@ -4,8 +4,8 @@ import { FAKE_DOOR_FEATURES } from '@/constants';
import type { BaseTextKey } from '@/plugins/i18n';
export function compileFakeDoorFeatures(): IFakeDoor[] {
const store = useUIStore();
const fakeDoorFeatures: IFakeDoor[] = store.fakeDoorFeatures.map((feature) => ({ ...feature }));
const uiStore = useUIStore();
const fakeDoorFeatures: IFakeDoor[] = uiStore.fakeDoorFeatures.map((feature) => ({ ...feature }));
const environmentsFeature = fakeDoorFeatures.find(
(feature) => feature.id === FAKE_DOOR_FEATURES.ENVIRONMENTS,
@ -28,7 +28,7 @@ export function compileFakeDoorFeatures(): IFakeDoor[] {
}
export const hooksAddFakeDoorFeatures = () => {
const store = useUIStore();
const uiStore = useUIStore();
store.fakeDoorFeatures = compileFakeDoorFeatures();
uiStore.fakeDoorFeatures = compileFakeDoorFeatures();
};

4
packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
View File

@ -357,7 +357,7 @@ describe('Resolution-based completions', () => {
vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].open = true;
uiStore.modalsById[CREDENTIAL_EDIT_MODAL_KEY].open = true;
set(settingsStore.settings, ['enterprise', EnterpriseEditionFeature.ExternalSecrets], true);
externalSecretsStore.state.secrets = {
[provider]: secrets,
@ -380,7 +380,7 @@ describe('Resolution-based completions', () => {
vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue($input);
uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].open = true;
uiStore.modalsById[CREDENTIAL_EDIT_MODAL_KEY].open = true;
set(settingsStore.settings, ['enterprise', EnterpriseEditionFeature.ExternalSecrets], true);
externalSecretsStore.state.secrets = {
[provider]: secrets,

2
packages/editor-ui/src/plugins/codemirror/completions/utils.ts
View File

@ -108,7 +108,7 @@ export function hasNoParams(toResolve: string) {
// state-based utils
// ----------------------------------
export const isCredentialsModalOpen = () => useUIStore().modals[CREDENTIAL_EDIT_MODAL_KEY].open;
export const isCredentialsModalOpen = () => useUIStore().modalsById[CREDENTIAL_EDIT_MODAL_KEY].open;
export const isInHttpNodePagination = () => {
const ndvStore = useNDVStore();

6
packages/editor-ui/src/stores/__tests__/ui.test.ts
View File

@ -1,5 +1,5 @@
import { createPinia, setActivePinia } from 'pinia';
import { useUIStore } from '@/stores/ui.store';
import { generateUpgradeLinkUrl, useUIStore } from '@/stores/ui.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useUsersStore } from '@/stores/users.store';
import { merge } from 'lodash-es';
@ -98,7 +98,7 @@ describe('UI store', () => {
'https://n8n.io/pricing?utm_campaign=utm-test-campaign&source=test_source',
],
])(
'"upgradeLinkUrl" should generate the correct URL for "%s" deployment and "%s" license environment and user role "%s"',
'"generateUpgradeLinkUrl" should generate the correct URL for "%s" deployment and "%s" license environment and user role "%s"',
async (type, environment, role, expectation) => {
setUser(role as IRole);
@ -115,7 +115,7 @@ describe('UI store', () => {
}),
);
const updateLinkUrl = await uiStore.upgradeLinkUrl('test_source', 'utm-test-campaign', type);
const updateLinkUrl = await generateUpgradeLinkUrl('test_source', 'utm-test-campaign', type);
expect(updateLinkUrl).toBe(expectation);
},

6
packages/editor-ui/src/stores/canvas.store.ts
View File

@ -236,7 +236,7 @@ export const useCanvasStore = defineStore('canvas', () => {
if (!nodeName) return;
isDragging.value = true;
const isSelected = uiStore.isNodeSelected(nodeName);
const isSelected = uiStore.isNodeSelected[nodeName];
if (params.e && !isSelected) {
// Only the node which gets dragged directly gets an event, for all others it is
@ -255,7 +255,7 @@ export const useCanvasStore = defineStore('canvas', () => {
if (!nodeName) return;
const nodeData = workflowStore.getNodeByName(nodeName);
isDragging.value = false;
if (uiStore.isActionActive('dragActive') && nodeData) {
if (uiStore.isActionActive['dragActive'] && nodeData) {
const moveNodes = uiStore.getSelectedNodes.slice();
const selectedNodeNames = moveNodes.map((node: INodeUi) => node.name);
if (!selectedNodeNames.includes(nodeData.name)) {
@ -300,7 +300,7 @@ export const useCanvasStore = defineStore('canvas', () => {
if (moveNodes.length > 1) {
historyStore.stopRecordingUndo();
}
if (uiStore.isActionActive('dragActive')) {
if (uiStore.isActionActive['dragActive']) {
uiStore.removeActiveAction('dragActive');
}
}

725
packages/editor-ui/src/stores/ui.store.ts
View File

@ -1,8 +1,4 @@
import {
applyForOnboardingCall,
fetchNextOnboardingPrompt,
submitEmailOnSignup,
} from '@/api/workflow-webhooks';
import * as onboardingApi from '@/api/workflow-webhooks';
import {
ABOUT_MODAL_KEY,
CHAT_EMBED_MODAL_KEY,
@ -44,24 +40,21 @@ import {
} from '@/constants';
import type {
CloudUpdateLinkSourceType,
CurlToJSONResponse,
IFakeDoorLocation,
INodeUi,
IOnboardingCallPrompt,
UIState,
UTMCampaign,
XYPosition,
Modals,
NewCredentialsModal,
ThemeOption,
AppliedThemeOption,
NotificationOptions,
ModalState,
ModalKey,
IFakeDoor,
} from '@/Interface';
import { defineStore } from 'pinia';
import { useRootStore } from '@/stores/root.store';
import { getCurlToJson } from '@/api/curlHelper';
import * as curlParserApi from '@/api/curlHelper';
import { useCloudPlanStore } from '@/stores/cloudPlan.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useSettingsStore } from '@/stores/settings.store';
@ -77,6 +70,7 @@ import {
isValidTheme,
updateTheme,
} from './ui.utils';
import { computed, ref } from 'vue';
let savedTheme: ThemeOption = 'system';
try {
@ -87,14 +81,21 @@ try {
}
} catch (e) {}
export type UiStore = ReturnType<typeof useUIStore>;
type UiStore = ReturnType<typeof useUIStore>;
export const useUIStore = defineStore(STORES.UI, {
state: (): UIState => ({
activeActions: [],
activeCredentialType: null,
theme: savedTheme,
modals: {
type Draggable = {
isDragging: boolean;
type: string;
data: string;
canDrop: boolean;
stickyPosition: null | XYPosition;
};
export const useUIStore = defineStore(STORES.UI, () => {
const activeActions = ref<string[]>([]);
const activeCredentialType = ref<string | null>(null);
const theme = ref<ThemeOption>(savedTheme);
const modalsById = ref<Record<string, ModalState>>({
...Object.fromEntries(
[
ABOUT_MODAL_KEY,
@ -157,13 +158,12 @@ export const useUIStore = defineStore(STORES.UI, {
activeId: null,
showAuthSelector: false,
} as ModalState,
},
modalStack: [],
sidebarMenuCollapsed: true,
isPageLoading: true,
currentView: '',
mainPanelPosition: 0.5,
fakeDoorFeatures: [
});
const modalStack = ref<string[]>([]);
const sidebarMenuCollapsed = ref<boolean>(true);
const currentView = ref<string>('');
const fakeDoorFeatures = ref<IFakeDoor[]>([
{
id: FAKE_DOOR_FEATURES.SSO,
featureName: 'fakeDoor.settings.sso.name',
@ -173,44 +173,50 @@ export const useUIStore = defineStore(STORES.UI, {
linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=sso',
uiLocations: ['settings/users'],
},
],
draggable: {
]);
const draggable = ref<Draggable>({
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
},
stateIsDirty: false,
lastSelectedNode: null,
lastSelectedNodeOutputIndex: null,
lastSelectedNodeEndpointUuid: null,
nodeViewOffsetPosition: [0, 0],
nodeViewMoveInProgress: false,
selectedNodes: [],
nodeViewInitialized: false,
addFirstStepOnLoad: false,
bannersHeight: 0,
bannerStack: [],
// Notifications that should show when a view is initialized
// This enables us to set a queue of notifications form outside (another component)
// and then show them when the view is initialized
pendingNotificationsForViews: {},
isCreateNodeActive: false,
}),
getters: {
appliedTheme(): AppliedThemeOption {
return this.theme === 'system' ? getPreferredTheme() : this.theme;
},
logo(): string {
const { releaseChannel } = useSettingsStore().settings;
const suffix = this.appliedTheme === 'dark' ? '-dark.svg' : '.svg';
});
const stateIsDirty = ref<boolean>(false);
const lastSelectedNode = ref<string | null>(null);
const lastSelectedNodeOutputIndex = ref<number | null>(null);
const lastSelectedNodeEndpointUuid = ref<string | null>(null);
const nodeViewOffsetPosition = ref<[number, number]>([0, 0]);
const nodeViewMoveInProgress = ref<boolean>(false);
const selectedNodes = ref<INodeUi[]>([]);
const nodeViewInitialized = ref<boolean>(false);
const addFirstStepOnLoad = ref<boolean>(false);
const bannersHeight = ref<number>(0);
const bannerStack = ref<BannerName[]>([]);
const pendingNotificationsForViews = ref<{ [key in VIEWS]?: NotificationOptions[] }>({});
const isCreateNodeActive = ref<boolean>(false);
const settingsStore = useSettingsStore();
const workflowsStore = useWorkflowsStore();
const rootStore = useRootStore();
const telemetryStore = useTelemetryStore();
const cloudPlanStore = useCloudPlanStore();
const userStore = useUsersStore();
const appliedTheme = computed(() => {
return theme.value === 'system' ? getPreferredTheme() : theme.value;
});
const logo = computed(() => {
const { releaseChannel } = settingsStore.settings;
const suffix = appliedTheme.value === 'dark' ? '-dark.svg' : '.svg';
return `static/logo/${
releaseChannel === 'stable' ? 'expanded' : `channel/${releaseChannel}`
}${suffix}`;
},
contextBasedTranslationKeys() {
const settingsStore = useSettingsStore();
});
const contextBasedTranslationKeys = computed(() => {
const deploymentType = settingsStore.deploymentType;
let contextKey: '' | '.cloud' | '.desktop' = '';
@ -268,291 +274,283 @@ export const useUIStore = defineStore(STORES.UI, {
},
},
} as const;
},
getLastSelectedNode(): INodeUi | null {
const workflowsStore = useWorkflowsStore();
if (this.lastSelectedNode) {
return workflowsStore.getNodeByName(this.lastSelectedNode);
});
const getLastSelectedNode = computed(() => {
if (lastSelectedNode.value) {
return workflowsStore.getNodeByName(lastSelectedNode.value);
}
return null;
},
areExpressionsDisabled(): boolean {
return this.currentView === VIEWS.DEMO;
},
isVersionsOpen(): boolean {
return this.modals[VERSIONS_MODAL_KEY].open;
},
isModalOpen() {
return (name: ModalKey) => this.modals[name].open;
},
isModalActive() {
return (name: ModalKey) => this.modalStack.length > 0 && name === this.modalStack[0];
},
getModalActiveId() {
return (name: ModalKey) => this.modals[name].activeId;
},
getModalMode() {
return (name: ModalKey) => this.modals[name].mode;
},
getModalData() {
return (name: ModalKey) => 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, VIEWS.EXECUTION_DEBUG].includes(
this.currentView as VIEWS,
});
const isVersionsOpen = computed(() => {
return modalsById.value[VERSIONS_MODAL_KEY].open;
});
const isModalActiveById = computed(() =>
Object.keys(modalsById.value).reduce((acc: { [key: string]: boolean }, name) => {
acc[name] = name === modalStack.value[0];
return acc;
}, {}),
);
},
isNodeView(): boolean {
return [
VIEWS.NEW_WORKFLOW.toString(),
const fakeDoorsByLocation = computed(() =>
fakeDoorFeatures.value.reduce((acc: { [uiLocation: string]: IFakeDoor }, fakeDoor) => {
fakeDoor.uiLocations.forEach((uiLocation: IFakeDoorLocation) => {
acc[uiLocation] = fakeDoor;
});
return acc;
}, {}),
);
const fakeDoorsById = computed(() =>
fakeDoorFeatures.value.reduce((acc: { [id: string]: IFakeDoor }, fakeDoor) => {
acc[fakeDoor.id.toString()] = fakeDoor;
return acc;
}, {}),
);
const isReadOnlyView = computed(() => {
return ![
VIEWS.WORKFLOW.toString(),
VIEWS.WORKFLOW_EXECUTIONS.toString(),
].includes(this.currentView);
},
isActionActive() {
return (action: string) => this.activeActions.includes(action);
},
getSelectedNodes(): INodeUi[] {
VIEWS.NEW_WORKFLOW.toString(),
VIEWS.EXECUTION_DEBUG.toString(),
].includes(currentView.value);
});
const isActionActive = computed(() =>
activeActions.value.reduce((acc: { [action: string]: boolean }, action) => {
acc[action] = true;
return acc;
}, {}),
);
const getSelectedNodes = computed(() => {
const seen = new Set();
return this.selectedNodes.filter((node: INodeUi) => {
return selectedNodes.value.filter((node) => {
// dedupe for instances when same node is selected in different ways
if (!seen.has(node.id)) {
seen.add(node.id);
if (!seen.has(node)) {
seen.add(node);
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 async (source: string, utm_campaign: string, deploymentType: string) => {
let linkUrl = '';
});
const searchParams = new URLSearchParams();
const isNodeSelected = computed(() =>
selectedNodes.value.reduce((acc: { [nodeName: string]: true }, node) => {
acc[node.name] = true;
return acc;
}, {}),
);
if (deploymentType === 'cloud' && hasPermission(['instanceOwner'])) {
const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.');
const { code } = await useCloudPlanStore().getAutoLoginCode();
linkUrl = `https://${adminPanelHost}/login`;
searchParams.set('code', code);
searchParams.set('returnPath', '/account/change-plan');
} else {
linkUrl = N8N_PRICING_PAGE_URL;
}
if (utm_campaign) {
searchParams.set('utm_campaign', utm_campaign);
}
if (source) {
searchParams.set('source', source);
}
return `${linkUrl}?${searchParams.toString()}`;
};
},
headerHeight() {
const headerHeight = computed(() => {
const style = getComputedStyle(document.body);
return Number(style.getPropertyValue('--header-height'));
},
isAnyModalOpen(): boolean {
return this.modalStack.length > 0;
},
},
actions: {
setTheme(theme: ThemeOption): void {
this.theme = theme;
updateTheme(theme);
},
setMode(name: keyof Modals, mode: string): void {
this.modals[name] = {
...this.modals[name],
});
const isAnyModalOpen = computed(() => {
return modalStack.value.length > 0;
});
// Methods
const setTheme = (newTheme: ThemeOption): void => {
theme.value = newTheme;
updateTheme(newTheme);
};
const setMode = (name: keyof Modals, mode: string): void => {
modalsById.value[name] = {
...modalsById.value[name],
mode,
};
},
setActiveId(name: keyof Modals, activeId: string): void {
this.modals[name] = {
...this.modals[name],
};
const setActiveId = (name: keyof Modals, activeId: string | null): void => {
modalsById.value[name] = {
...modalsById.value[name],
activeId,
};
},
setShowAuthSelector(name: keyof Modals, showAuthSelector: boolean) {
this.modals[name] = {
...this.modals[name],
};
const setShowAuthSelector = (name: keyof Modals, showAuthSelector: boolean): void => {
modalsById.value[name] = {
...modalsById.value[name],
showAuthSelector,
} as NewCredentialsModal;
},
setModalData(payload: { name: keyof Modals; data: Record<string, unknown> }) {
this.modals[payload.name] = {
...this.modals[payload.name],
};
const setModalData = (payload: { name: keyof Modals; data: Record<string, unknown> }) => {
modalsById.value[payload.name] = {
...modalsById.value[payload.name],
data: payload.data,
};
},
openModal(name: keyof Modals): void {
this.modals[name] = {
...this.modals[name],
};
const openModal = (name: ModalKey) => {
modalsById.value[name] = {
...modalsById.value[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],
modalStack.value = [name].concat(modalStack.value) as string[];
};
const openModalWithData = (payload: { name: ModalKey; data: Record<string, unknown> }) => {
setModalData(payload);
openModal(payload.name);
};
const closeModal = (name: ModalKey) => {
modalsById.value[name] = {
...modalsById.value[name],
open: false,
};
this.modalStack = this.modalStack.filter((openModalName: string) => {
return name !== openModalName;
});
},
draggableStartDragging(type: string, data: string): void {
this.draggable = {
modalStack.value = modalStack.value.filter((openModalName) => name !== openModalName);
};
const draggableStartDragging = (type: string, data: string) => {
draggable.value = {
isDragging: true,
type,
data,
canDrop: false,
stickyPosition: null,
};
},
draggableStopDragging(): void {
this.draggable = {
};
const draggableStopDragging = () => {
draggable.value = {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
};
},
setDraggableStickyPos(position: XYPosition): void {
this.draggable = {
...this.draggable,
};
const setDraggableStickyPos = (position: XYPosition) => {
draggable.value = {
...draggable.value,
stickyPosition: position,
};
},
setDraggableCanDrop(canDrop: boolean): void {
this.draggable = {
...this.draggable,
};
const setDraggableCanDrop = (canDrop: boolean) => {
draggable.value = {
...draggable.value,
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 | null> {
const rootStore = useRootStore();
};
const openDeleteUserModal = (id: string) => {
setActiveId(DELETE_USER_MODAL_KEY, id);
openModal(DELETE_USER_MODAL_KEY);
};
const openExistingCredential = (id: string) => {
setActiveId(CREDENTIAL_EDIT_MODAL_KEY, id);
setMode(CREDENTIAL_EDIT_MODAL_KEY, 'edit');
openModal(CREDENTIAL_EDIT_MODAL_KEY);
};
const openNewCredential = (type: string, showAuthOptions = false) => {
setActiveId(CREDENTIAL_EDIT_MODAL_KEY, type);
setShowAuthSelector(CREDENTIAL_EDIT_MODAL_KEY, showAuthOptions);
setMode(CREDENTIAL_EDIT_MODAL_KEY, 'new');
openModal(CREDENTIAL_EDIT_MODAL_KEY);
};
const getNextOnboardingPrompt = async () => {
const instanceId = rootStore.instanceId;
const { currentUser } = useUsersStore();
const { currentUser } = userStore;
if (currentUser) {
return await fetchNextOnboardingPrompt(instanceId, currentUser);
return await onboardingApi.fetchNextOnboardingPrompt(instanceId, currentUser);
}
return null;
},
async applyForOnboardingCall(email: string): Promise<string | null> {
const rootStore = useRootStore();
};
const applyForOnboardingCall = async (email: string) => {
const instanceId = rootStore.instanceId;
const { currentUser } = useUsersStore();
const { currentUser } = userStore;
if (currentUser) {
return await applyForOnboardingCall(instanceId, currentUser, email);
return await onboardingApi.applyForOnboardingCall(instanceId, currentUser, email);
}
return null;
},
async submitContactEmail(email: string, agree: boolean): Promise<string | null> {
const rootStore = useRootStore();
};
const submitContactEmail = async (email: string, agree: boolean) => {
const instanceId = rootStore.instanceId;
const { currentUser } = useUsersStore();
const { currentUser } = userStore;
if (currentUser) {
return await submitEmailOnSignup(
return await onboardingApi.submitEmailOnSignup(
instanceId,
currentUser,
email ?? currentUser?.email,
email ?? currentUser.email,
agree,
);
}
return null;
},
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);
};
const openCommunityPackageUninstallConfirmModal = (packageName: string) => {
setMode(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, packageName);
setActiveId(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL);
openModal(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
};
const openCommunityPackageUpdateConfirmModal = (packageName: string) => {
setMode(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, packageName);
setActiveId(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE);
openModal(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
};
const addActiveAction = (action: string) => {
if (!activeActions.value.includes(action)) {
activeActions.value.push(action);
}
},
removeActiveAction(action: string): void {
const actionIndex = this.activeActions.indexOf(action);
};
const removeActiveAction = (action: string) => {
const actionIndex = activeActions.value.indexOf(action);
if (actionIndex !== -1) {
this.activeActions.splice(actionIndex, 1);
activeActions.value.splice(actionIndex, 1);
}
},
addSelectedNode(node: INodeUi): void {
const isAlreadySelected = this.selectedNodes.some((n) => n.name === node.name);
};
const addSelectedNode = (node: INodeUi) => {
const isAlreadySelected = selectedNodes.value.some((n) => n.name === node.name);
if (!isAlreadySelected) {
this.selectedNodes.push(node);
selectedNodes.value.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);
};
const removeNodeFromSelection = (node: INodeUi) => {
for (const [index] of selectedNodes.value.entries()) {
if (selectedNodes.value[index].name === node.name) {
selectedNodes.value.splice(Number(index), 1);
break;
}
}
},
resetSelectedNodes(): void {
this.selectedNodes = [];
},
setCurlCommand(payload: { name: string; command: string }): void {
this.modals[payload.name] = {
...this.modals[payload.name],
};
const resetSelectedNodes = () => {
selectedNodes.value = [];
};
const setCurlCommand = (payload: { name: string; command: string }) => {
modalsById.value[payload.name] = {
...modalsById.value[payload.name],
curlCommand: payload.command,
};
},
toggleSidebarMenuCollapse(): void {
this.sidebarMenuCollapsed = !this.sidebarMenuCollapsed;
},
async getCurlToJson(curlCommand: string): Promise<CurlToJSONResponse> {
const rootStore = useRootStore();
const parameters = await getCurlToJson(rootStore.restApiContext, curlCommand);
};
const toggleSidebarMenuCollapse = () => {
sidebarMenuCollapsed.value = !sidebarMenuCollapsed.value;
};
const getCurlToJson = async (curlCommand: string) => {
const parameters = await curlParserApi.getCurlToJson(rootStore.restApiContext, curlCommand);
// Normalize placeholder values
if (parameters['parameters.url']) {
@ -562,17 +560,18 @@ export const useUIStore = defineStore(STORES.UI, {
}
return parameters;
},
async goToUpgrade(
};
const goToUpgrade = async (
source: CloudUpdateLinkSourceType,
utm_campaign: UTMCampaign,
mode: 'open' | 'redirect' = 'open',
): Promise<void> {
const { usageLeft, trialDaysLeft, userIsTrialing } = useCloudPlanStore();
) => {
const { usageLeft, trialDaysLeft, userIsTrialing } = cloudPlanStore;
const { executionsLeft, workflowsLeft } = usageLeft;
const deploymentType = useSettingsStore().deploymentType;
const deploymentType = settingsStore.deploymentType;
useTelemetryStore().track('User clicked upgrade CTA', {
telemetryStore.track('User clicked upgrade CTA', {
source,
isTrial: userIsTrialing,
deploymentType,
@ -581,51 +580,124 @@ export const useUIStore = defineStore(STORES.UI, {
workflowsLeft,
});
const upgradeLink = await this.upgradeLinkUrl(source, utm_campaign, deploymentType);
const upgradeLink = await generateUpgradeLinkUrl(source, utm_campaign, deploymentType);
if (mode === 'open') {
window.open(upgradeLink, '_blank');
} else {
location.href = upgradeLink;
}
},
async dismissBanner(
name: BannerName,
type: 'temporary' | 'permanent' = 'temporary',
): Promise<void> {
};
const removeBannerFromStack = (name: BannerName) => {
bannerStack.value = bannerStack.value.filter((bannerName) => bannerName !== name);
};
const dismissBanner = async (name: BannerName, type: 'temporary' | 'permanent' = 'temporary') => {
if (type === 'permanent') {
await dismissBannerPermanently(useRootStore().restApiContext, {
await dismissBannerPermanently(rootStore.restApiContext, {
bannerName: name,
dismissedBanners: useSettingsStore().permanentlyDismissedBanners,
dismissedBanners: settingsStore.permanentlyDismissedBanners,
});
this.removeBannerFromStack(name);
removeBannerFromStack(name);
return;
}
this.removeBannerFromStack(name);
},
updateBannersHeight(newHeight: number): void {
this.bannersHeight = newHeight;
},
pushBannerToStack(name: BannerName) {
if (this.bannerStack.includes(name)) return;
this.bannerStack.push(name);
},
removeBannerFromStack(name: BannerName) {
this.bannerStack = this.bannerStack.filter((bannerName) => bannerName !== name);
},
clearBannerStack() {
this.bannerStack = [];
},
getNotificationsForView(view: VIEWS): NotificationOptions[] {
return this.pendingNotificationsForViews[view] ?? [];
},
setNotificationsForView(view: VIEWS, notifications: NotificationOptions[]) {
this.pendingNotificationsForViews[view] = notifications;
},
deleteNotificationsForView(view: VIEWS) {
delete this.pendingNotificationsForViews[view];
},
},
removeBannerFromStack(name);
};
const updateBannersHeight = (newHeight: number) => {
bannersHeight.value = newHeight;
};
const pushBannerToStack = (name: BannerName) => {
if (bannerStack.value.includes(name)) return;
bannerStack.value.push(name);
};
const clearBannerStack = () => {
bannerStack.value = [];
};
const setNotificationsForView = (view: VIEWS, notifications: NotificationOptions[]) => {
pendingNotificationsForViews.value[view] = notifications;
};
const deleteNotificationsForView = (view: VIEWS) => {
delete pendingNotificationsForViews.value[view];
};
return {
appliedTheme,
logo,
contextBasedTranslationKeys,
getLastSelectedNode,
isVersionsOpen,
isModalActiveById,
fakeDoorsByLocation,
isReadOnlyView,
isActionActive,
activeActions,
getSelectedNodes,
isNodeSelected,
headerHeight,
stateIsDirty,
lastSelectedNodeOutputIndex,
activeCredentialType,
lastSelectedNode,
selectedNodes,
bannersHeight,
lastSelectedNodeEndpointUuid,
nodeViewOffsetPosition,
nodeViewMoveInProgress,
nodeViewInitialized,
addFirstStepOnLoad,
isCreateNodeActive,
sidebarMenuCollapsed,
fakeDoorFeatures,
bannerStack,
theme,
modalsById,
currentView,
isAnyModalOpen,
fakeDoorsById,
pendingNotificationsForViews,
setTheme,
setMode,
setActiveId,
setShowAuthSelector,
setModalData,
openModalWithData,
openModal,
closeModal,
draggableStartDragging,
draggableStopDragging,
setDraggableStickyPos,
setDraggableCanDrop,
openDeleteUserModal,
openExistingCredential,
openNewCredential,
getNextOnboardingPrompt,
applyForOnboardingCall,
submitContactEmail,
openCommunityPackageUninstallConfirmModal,
openCommunityPackageUpdateConfirmModal,
addActiveAction,
removeActiveAction,
addSelectedNode,
removeNodeFromSelection,
resetSelectedNodes,
setCurlCommand,
toggleSidebarMenuCollapse,
getCurlToJson,
goToUpgrade,
removeBannerFromStack,
dismissBanner,
updateBannersHeight,
pushBannerToStack,
clearBannerStack,
setNotificationsForView,
deleteNotificationsForView,
};
});
/**
@ -668,3 +740,34 @@ export const listenForModalChanges = (opts: {
});
});
};
export const generateUpgradeLinkUrl = async (
source: string,
utm_campaign: string,
deploymentType: string,
) => {
let linkUrl = '';
const searchParams = new URLSearchParams();
const cloudPlanStore = useCloudPlanStore();
if (deploymentType === 'cloud' && hasPermission(['instanceOwner'])) {
const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.');
const { code } = await cloudPlanStore.getAutoLoginCode();
linkUrl = `https://${adminPanelHost}/login`;
searchParams.set('code', code);
searchParams.set('returnPath', '/account/change-plan');
} else {
linkUrl = N8N_PRICING_PAGE_URL;
}
if (utm_campaign) {
searchParams.set('utm_campaign', utm_campaign);
}
if (source) {
searchParams.set('source', source);
}
return `${linkUrl}?${searchParams.toString()}`;
};

2
packages/editor-ui/src/views/NodeView.vue
View File

@ -678,7 +678,7 @@ export default defineComponent({
return this.workflowsStore.getWorkflowExecution;
},
workflowRunning(): boolean {
return this.uiStore.isActionActive('workflowRunning');
return this.uiStore.isActionActive['workflowRunning'];
},
currentWorkflow(): string {
return this.$route.params.name?.toString() || this.workflowsStore.workflowId;

2
packages/editor-ui/src/views/SettingsFakeDoorView.vue
View File

@ -23,7 +23,7 @@ export default defineComponent({
computed: {
...mapStores(useUIStore),
featureInfo(): IFakeDoor | undefined {
return this.uiStore.getFakeDoorById(this.featureId);
return this.uiStore.fakeDoorsById[this.featureId];
},
},
methods: {