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

packages/editor-ui/src/Interface.ts

@@ -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;

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

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

packages/editor-ui/src/components/FeatureComingSoon.vue

@@ -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: {

packages/editor-ui/src/components/GenerateCurlModal.vue

@@ -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 initialServiceValue = uiStore.modalsById[GENERATE_CURL_MODAL_KEY].data?.service as string;
-const initialRequestValue = uiStore.getModalData(GENERATE_CURL_MODAL_KEY)?.request as string;
+const initialRequestValue = uiStore.modalsById[GENERATE_CURL_MODAL_KEY].data?.request as string;
 
 const formInputs: IFormInput[] = [
 	{

packages/editor-ui/src/components/ImportCurlModal.vue

@@ -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();

packages/editor-ui/src/components/InputPanel.vue

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

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

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

packages/editor-ui/src/components/Modal.vue

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

packages/editor-ui/src/components/ModalDrawer.vue

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

packages/editor-ui/src/components/ModalRoot.vue

@@ -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)"
+			:active="uiStore.isModalActiveById[name]"
-			:open="uiStore.isModalOpen(name)"
+			:open="uiStore.modalsById[name].open"
-			:active-id="uiStore.getModalActiveId(name)"
+			:active-id="uiStore.modalsById[name].activeId"
-			:mode="uiStore.getModalMode(name)"
+			:mode="uiStore.modalsById[name].mode"
-			:data="uiStore.getModalData(name)"
+			:data="uiStore.modalsById[name].data"
 		></slot>
 	</div>
 </template>

packages/editor-ui/src/components/Node.vue

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

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -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);
 

packages/editor-ui/src/components/NodeExecuteButton.vue

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

packages/editor-ui/src/components/OutputPanel.vue

@@ -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;

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

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

packages/editor-ui/src/components/SettingsSidebar.vue

@@ -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[] = [

packages/editor-ui/src/components/SourceControlPushModal.ee.vue

@@ -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/')) {

packages/editor-ui/src/components/Sticky.vue

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

packages/editor-ui/src/components/TriggerPanel.vue

@@ -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;

packages/editor-ui/src/components/WorkflowLMChat.vue

@@ -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() {

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

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

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

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

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

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

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

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

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

@@ -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) {

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

@@ -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');

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

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

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

@@ -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);

packages/editor-ui/src/composables/useCanvasMouseSelect.ts

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

packages/editor-ui/src/composables/useCanvasPanning.ts

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

packages/editor-ui/src/composables/useNodeBase.ts

@@ -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);

packages/editor-ui/src/composables/usePushConnection.ts

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

packages/editor-ui/src/composables/useRunWorkflow.ts

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

packages/editor-ui/src/composables/useToast.ts

@@ -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) => {

packages/editor-ui/src/hooks/utils/hooksAddFakeDoorFeatures.ts

@@ -4,8 +4,8 @@ import { FAKE_DOOR_FEATURES } from '@/constants';
 import type { BaseTextKey } from '@/plugins/i18n';
 
 export function compileFakeDoorFeatures(): IFakeDoor[] {
-	const store = useUIStore();
+	const uiStore = useUIStore();
-	const fakeDoorFeatures: IFakeDoor[] = store.fakeDoorFeatures.map((feature) => ({ ...feature }));
+	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();
 };

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

@@ -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,

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

@@ -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();

packages/editor-ui/src/stores/__tests__/ui.test.ts

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

packages/editor-ui/src/stores/canvas.store.ts

@@ -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');
 						}
 					}

packages/editor-ui/src/views/NodeView.vue

@@ -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;

packages/editor-ui/src/views/SettingsFakeDoorView.vue

@@ -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: {