From 17635d0eaa65c408aa1af8ed2cbb3ed523fb6e13 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 14 Oct 2025 11:04:38 +0300
Subject: [PATCH] refactor(editor): Extract `apiKeys` code into features
 (no-changelog) (#20648)

---
 packages/frontend/editor-ui/src/components/Modals.vue      | 4 ++--
 packages/frontend/editor-ui/src/constants.ts               | 1 -
 .../editor-ui/src/features/apiKeys/apiKeys.constants.ts    | 1 +
 .../src/{stores => features/apiKeys}/apiKeys.store.ts      | 0
 .../src/{ => features/apiKeys}/components/ApiKeyCard.vue   | 0
 .../apiKeys}/components/ApiKeyCreateOrEditModal.test.ts    | 4 ++--
 .../apiKeys}/components/ApiKeyCreateOrEditModal.vue        | 7 ++++---
 .../src/{ => features/apiKeys}/components/ApiKeyScopes.vue | 0
 .../{ => features/apiKeys}/views/SettingsApiView.test.ts   | 2 +-
 .../src/{ => features/apiKeys}/views/SettingsApiView.vue   | 7 ++++---
 packages/frontend/editor-ui/src/router.ts                  | 2 +-
 packages/frontend/editor-ui/src/stores/ui.store.ts         | 2 +-
 12 files changed, 16 insertions(+), 14 deletions(-)
 create mode 100644 packages/frontend/editor-ui/src/features/apiKeys/apiKeys.constants.ts
 rename packages/frontend/editor-ui/src/{stores => features/apiKeys}/apiKeys.store.ts (100%)
 rename packages/frontend/editor-ui/src/{ => features/apiKeys}/components/ApiKeyCard.vue (100%)
 rename packages/frontend/editor-ui/src/{ => features/apiKeys}/components/ApiKeyCreateOrEditModal.test.ts (98%)
 rename packages/frontend/editor-ui/src/{ => features/apiKeys}/components/ApiKeyCreateOrEditModal.vue (97%)
 rename packages/frontend/editor-ui/src/{ => features/apiKeys}/components/ApiKeyScopes.vue (100%)
 rename packages/frontend/editor-ui/src/{ => features/apiKeys}/views/SettingsApiView.test.ts (99%)
 rename packages/frontend/editor-ui/src/{ => features/apiKeys}/views/SettingsApiView.vue (96%)

diff --git a/packages/frontend/editor-ui/src/components/Modals.vue b/packages/frontend/editor-ui/src/components/Modals.vue
index a868202f30a..7f62d526f9d 100644
--- a/packages/frontend/editor-ui/src/components/Modals.vue
+++ b/packages/frontend/editor-ui/src/components/Modals.vue
@@ -2,7 +2,6 @@
 import {
 	ABOUT_MODAL_KEY,
 	ANNOTATION_TAGS_MANAGER_MODAL_KEY,
-	API_KEY_CREATE_OR_EDIT_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
 	CHAT_EMBED_MODAL_KEY,
 	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
@@ -51,9 +50,10 @@ import {
 	SOURCE_CONTROL_PULL_MODAL_KEY,
 	SOURCE_CONTROL_PUSH_MODAL_KEY,
 } from '@/features/sourceControl.ee/sourceControl.constants';
+import { API_KEY_CREATE_OR_EDIT_MODAL_KEY } from '@/features/apiKeys/apiKeys.constants';
 import AboutModal from '@/components/AboutModal.vue';
 import ActivationModal from '@/components/ActivationModal.vue';
-import ApiKeyCreateOrEditModal from '@/components/ApiKeyCreateOrEditModal.vue';
+import ApiKeyCreateOrEditModal from '@/features/apiKeys/components/ApiKeyCreateOrEditModal.vue';
 import NewAssistantSessionModal from '@/features/assistant/components/Chat/NewAssistantSessionModal.vue';
 import ChangePasswordModal from '@/features/auth/components/ChangePasswordModal.vue';
 import ConfirmPasswordModal from '@/features/auth/components/ConfirmPasswordModal.vue';
diff --git a/packages/frontend/editor-ui/src/constants.ts b/packages/frontend/editor-ui/src/constants.ts
index 30a89a325fd..c7271f9a2a8 100644
--- a/packages/frontend/editor-ui/src/constants.ts
+++ b/packages/frontend/editor-ui/src/constants.ts
@@ -52,7 +52,6 @@ export const CHAT_EMBED_MODAL_KEY = 'chatEmbed';
 export const CHANGE_PASSWORD_MODAL_KEY = 'changePassword';
 export const CONFIRM_PASSWORD_MODAL_KEY = 'confirmPassword';
 export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential';
-export const API_KEY_CREATE_OR_EDIT_MODAL_KEY = 'createOrEditApiKey';
 export const CREDENTIAL_SELECT_MODAL_KEY = 'selectCredential';
 export const DELETE_USER_MODAL_KEY = 'deleteUser';
 export const INVITE_USER_MODAL_KEY = 'inviteUser';
diff --git a/packages/frontend/editor-ui/src/features/apiKeys/apiKeys.constants.ts b/packages/frontend/editor-ui/src/features/apiKeys/apiKeys.constants.ts
new file mode 100644
index 00000000000..8857078b463
--- /dev/null
+++ b/packages/frontend/editor-ui/src/features/apiKeys/apiKeys.constants.ts
@@ -0,0 +1 @@
+export const API_KEY_CREATE_OR_EDIT_MODAL_KEY = 'createOrEditApiKey';
diff --git a/packages/frontend/editor-ui/src/stores/apiKeys.store.ts b/packages/frontend/editor-ui/src/features/apiKeys/apiKeys.store.ts
similarity index 100%
rename from packages/frontend/editor-ui/src/stores/apiKeys.store.ts
rename to packages/frontend/editor-ui/src/features/apiKeys/apiKeys.store.ts
diff --git a/packages/frontend/editor-ui/src/components/ApiKeyCard.vue b/packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCard.vue
similarity index 100%
rename from packages/frontend/editor-ui/src/components/ApiKeyCard.vue
rename to packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCard.vue
diff --git a/packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.test.ts b/packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCreateOrEditModal.test.ts
similarity index 98%
rename from packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.test.ts
rename to packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCreateOrEditModal.test.ts
index 2ff859ea307..3821058888c 100644
--- a/packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.test.ts
+++ b/packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCreateOrEditModal.test.ts
@@ -1,12 +1,12 @@
 import { createComponentRenderer } from '@/__tests__/render';
 import { createTestingPinia } from '@pinia/testing';
-import { API_KEY_CREATE_OR_EDIT_MODAL_KEY } from '@/constants';
+import { API_KEY_CREATE_OR_EDIT_MODAL_KEY } from '../apiKeys.constants';
 import { STORES } from '@n8n/stores';
 import { mockedStore, retry } from '@/__tests__/utils';
 import ApiKeyEditModal from './ApiKeyCreateOrEditModal.vue';
 import userEvent from '@testing-library/user-event';
 
-import { useApiKeysStore } from '@/stores/apiKeys.store';
+import { useApiKeysStore } from '../apiKeys.store';
 import { DateTime } from 'luxon';
 import type { ApiKeyWithRawValue } from '@n8n/api-types';
 import { useSettingsStore } from '@/stores/settings.store';
diff --git a/packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.vue b/packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCreateOrEditModal.vue
similarity index 97%
rename from packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.vue
rename to packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCreateOrEditModal.vue
index bc9606583a1..94cdb233b98 100644
--- a/packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.vue
+++ b/packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyCreateOrEditModal.vue
@@ -1,15 +1,16 @@
 <script lang="ts" setup>
-import ApiKeyScopes from '@/components/ApiKeyScopes.vue';
+import ApiKeyScopes from './ApiKeyScopes.vue';
 import CopyInput from '@/components/CopyInput.vue';
 import Modal from '@/components/Modal.vue';
-import { API_KEY_CREATE_OR_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
+import { EnterpriseEditionFeature } from '@/constants';
+import { API_KEY_CREATE_OR_EDIT_MODAL_KEY } from '../apiKeys.constants';
 import { computed, onMounted, ref } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
 import { createEventBus } from '@n8n/utils/event-bus';
 import { useI18n } from '@n8n/i18n';
 import { useRootStore } from '@n8n/stores/useRootStore';
 import { useDocumentTitle } from '@/composables/useDocumentTitle';
-import { useApiKeysStore } from '@/stores/apiKeys.store';
+import { useApiKeysStore } from '../apiKeys.store';
 import { useToast } from '@/composables/useToast';
 import type { BaseTextKey } from '@n8n/i18n';
 import { DateTime } from 'luxon';
diff --git a/packages/frontend/editor-ui/src/components/ApiKeyScopes.vue b/packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyScopes.vue
similarity index 100%
rename from packages/frontend/editor-ui/src/components/ApiKeyScopes.vue
rename to packages/frontend/editor-ui/src/features/apiKeys/components/ApiKeyScopes.vue
diff --git a/packages/frontend/editor-ui/src/views/SettingsApiView.test.ts b/packages/frontend/editor-ui/src/features/apiKeys/views/SettingsApiView.test.ts
similarity index 99%
rename from packages/frontend/editor-ui/src/views/SettingsApiView.test.ts
rename to packages/frontend/editor-ui/src/features/apiKeys/views/SettingsApiView.test.ts
index 2df60a831f1..7a55f9fc846 100644
--- a/packages/frontend/editor-ui/src/views/SettingsApiView.test.ts
+++ b/packages/frontend/editor-ui/src/features/apiKeys/views/SettingsApiView.test.ts
@@ -7,7 +7,7 @@ import SettingsApiView from './SettingsApiView.vue';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
 import { setActivePinia } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
-import { useApiKeysStore } from '@/stores/apiKeys.store';
+import { useApiKeysStore } from '../apiKeys.store';
 import { DateTime } from 'luxon';
 import { useRootStore } from '@n8n/stores/useRootStore';
 
diff --git a/packages/frontend/editor-ui/src/views/SettingsApiView.vue b/packages/frontend/editor-ui/src/features/apiKeys/views/SettingsApiView.vue
similarity index 96%
rename from packages/frontend/editor-ui/src/views/SettingsApiView.vue
rename to packages/frontend/editor-ui/src/features/apiKeys/views/SettingsApiView.vue
index 93c25079361..f39b101256f 100644
--- a/packages/frontend/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/frontend/editor-ui/src/features/apiKeys/views/SettingsApiView.vue
@@ -6,19 +6,20 @@ import { useDocumentTitle } from '@/composables/useDocumentTitle';
 
 import { useSettingsStore } from '@/stores/settings.store';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
-import { API_KEY_CREATE_OR_EDIT_MODAL_KEY, DOCS_DOMAIN, MODAL_CONFIRM } from '@/constants';
+import { DOCS_DOMAIN, MODAL_CONFIRM } from '@/constants';
+import { API_KEY_CREATE_OR_EDIT_MODAL_KEY } from '../apiKeys.constants';
 import { useI18n } from '@n8n/i18n';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 import { useUIStore } from '@/stores/ui.store';
-import { useApiKeysStore } from '@/stores/apiKeys.store';
+import { useApiKeysStore } from '../apiKeys.store';
 import { storeToRefs } from 'pinia';
 import { useRootStore } from '@n8n/stores/useRootStore';
 
 import { ElCol, ElRow } from 'element-plus';
 import { N8nActionBox, N8nButton, N8nHeading, N8nLink, N8nText } from '@n8n/design-system';
 import { I18nT } from 'vue-i18n';
-import ApiKeyCard from '@/components/ApiKeyCard.vue';
+import ApiKeyCard from '../components/ApiKeyCard.vue';
 
 const settingsStore = useSettingsStore();
 const uiStore = useUIStore();
diff --git a/packages/frontend/editor-ui/src/router.ts b/packages/frontend/editor-ui/src/router.ts
index 7e5b4ab7341..e9ac5df3ebe 100644
--- a/packages/frontend/editor-ui/src/router.ts
+++ b/packages/frontend/editor-ui/src/router.ts
@@ -44,7 +44,7 @@ const SettingsPersonalView = async () =>
 const SettingsUsersView = async () => await import('./views/SettingsUsersView.vue');
 const SettingsCommunityNodesView = async () =>
 	await import('./views/SettingsCommunityNodesView.vue');
-const SettingsApiView = async () => await import('./views/SettingsApiView.vue');
+const SettingsApiView = async () => await import('@/features/apiKeys/views/SettingsApiView.vue');
 const SettingsLogStreamingView = async () =>
 	await import('@/features/logStreaming.ee/views/SettingsLogStreamingView.vue');
 const SetupView = async () => await import('@/features/auth/views/SetupView.vue');
diff --git a/packages/frontend/editor-ui/src/stores/ui.store.ts b/packages/frontend/editor-ui/src/stores/ui.store.ts
index 93ac87a62fb..4f138dee203 100644
--- a/packages/frontend/editor-ui/src/stores/ui.store.ts
+++ b/packages/frontend/editor-ui/src/stores/ui.store.ts
@@ -32,7 +32,6 @@ import {
 	NEW_ASSISTANT_SESSION_MODAL,
 	PROMPT_MFA_CODE_MODAL_KEY,
 	COMMUNITY_PLUS_ENROLLMENT_MODAL,
-	API_KEY_CREATE_OR_EDIT_MODAL_KEY,
 	WORKFLOW_ACTIVATION_CONFLICTING_WEBHOOK_MODAL_KEY,
 	FROM_AI_PARAMETERS_MODAL_KEY,
 	IMPORT_WORKFLOW_URL_MODAL_KEY,
@@ -54,6 +53,7 @@ import {
 	SOURCE_CONTROL_PUSH_MODAL_KEY,
 	SOURCE_CONTROL_PULL_MODAL_KEY,
 } from '@/features/sourceControl.ee/sourceControl.constants';
+import { API_KEY_CREATE_OR_EDIT_MODAL_KEY } from '@/features/apiKeys/apiKeys.constants';
 import { STORES } from '@n8n/stores';
 import type {
 	XYPosition,