refactor(editor): Extract API Requests into @n8n/rest-api-client package (no-changelog) (#15930)

Author: alexgrozav

packages/@n8n/constants/src/browser.ts

@@ -0,0 +1 @@
+export const BROWSER_ID_STORAGE_KEY = 'n8n-browserId';

packages/@n8n/constants/src/index.ts

@@ -1,3 +1,5 @@
+export * from './browser';
+
 export const LICENSE_FEATURES = {
 	SHARING: 'feat:sharing',
 	LDAP: 'feat:ldap',

packages/@n8n/utils/package.json

@@ -6,6 +6,11 @@
     "dist"
   ],
   "exports": {
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
+    },
     "./*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.js",

packages/@n8n/vitest-config/frontend.d.ts

@@ -1,3 +1,6 @@
-import type { UserConfig } from 'vitest/node';
+import type { InlineConfig } from 'vitest/node';
+import type { UserConfig } from 'vite';
+
+export const createVitestConfig: (options?: InlineConfig) => UserConfig;
 
 export const vitestConfig: UserConfig;

packages/@n8n/vitest-config/frontend.mjs

@@ -2,34 +2,41 @@ import { defineConfig as defineVitestConfig } from 'vitest/config';
 
 /**
  * Define a Vitest configuration
- *
- * @returns {import('vitest/node').UserConfig}
+ * @param {import('vitest/node').InlineConfig} options - The options to pass to the Vitest configuration
+ * @returns {import('vite').UserConfig}
  */
-export const vitestConfig = defineVitestConfig({
-	test: {
-		silent: true,
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: ['./src/__tests__/setup.ts'],
-		coverage: {
-			enabled: false,
-			all: false,
-			provider: 'v8',
-			reporter: ['text-summary', 'lcov', 'html-spa'],
-		},
-		css: {
-			modules: {
-				classNameStrategy: 'non-scoped',
+export const createVitestConfig = (options = {}) => {
+	const vitestConfig = defineVitestConfig({
+		test: {
+			silent: true,
+			globals: true,
+			environment: 'jsdom',
+			setupFiles: ['./src/__tests__/setup.ts'],
+			coverage: {
+				enabled: false,
+				all: false,
+				provider: 'v8',
+				reporter: ['text-summary', 'lcov', 'html-spa'],
+			},
+			css: {
+				modules: {
+					classNameStrategy: 'non-scoped',
+				},
 			},
+			...options,
 		},
-	},
-});
+	});
 
-if (process.env.COVERAGE_ENABLED === 'true') {
-	const { coverage } = vitestConfig.test;
-	coverage.enabled = true;
-	if (process.env.CI === 'true') {
-		coverage.all = true;
-		coverage.reporter = ['cobertura'];
+	if (process.env.COVERAGE_ENABLED === 'true') {
+		const { coverage } = vitestConfig.test;
+		coverage.enabled = true;
+		if (process.env.CI === 'true') {
+			coverage.all = true;
+			coverage.reporter = ['cobertura'];
+		}
 	}
-}
+
+	return vitestConfig;
+};
+
+export const vitestConfig = createVitestConfig();

packages/frontend/@n8n/rest-api-client/.eslintrc.cjs

@@ -0,0 +1,10 @@
+const sharedOptions = require('@n8n/eslint-config/shared');
+
+/**
+ * @type {import('@types/eslint').ESLint.ConfigData}
+ */
+module.exports = {
+	extends: ['@n8n/eslint-config/frontend'],
+
+	...sharedOptions(__dirname, 'frontend'),
+};

packages/frontend/@n8n/rest-api-client/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/frontend/@n8n/rest-api-client/README.md

@@ -0,0 +1,22 @@
+# @n8n/rest-api-client
+
+This package contains the REST API calls for n8n.
+
+## Table of Contents
+
+- [Features](#features)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- Provides a REST API for n8n
+- Supports authentication and authorization
+
+## Contributing
+
+For more details, please read our [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+For more details, please read our [LICENSE.md](LICENSE.md).

packages/frontend/@n8n/rest-api-client/biome.jsonc

@@ -0,0 +1,4 @@
+{
+	"$schema": "../../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../../biome.jsonc"]
+}

packages/frontend/@n8n/rest-api-client/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@n8n/rest-api-client",
+  "type": "module",
+  "version": "1.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm run typecheck && tsup",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:dev": "vitest --silent=false",
+    "lint": "eslint src --ext .js,.ts,.vue --quiet",
+    "lintfix": "eslint src --ext .js,.ts,.vue --fix",
+    "format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
+    "format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore"
+  },
+  "dependencies": {
+    "@n8n/api-types": "workspace:*",
+    "@n8n/constants": "workspace:*",
+    "@n8n/permissions": "workspace:*",
+    "@n8n/utils": "workspace:*",
+    "js-base64": "catalog:",
+    "n8n-workflow": "workspace:*",
+    "axios": "catalog:",
+    "flatted": "catalog:"
+  },
+  "devDependencies": {
+    "@n8n/eslint-config": "workspace:*",
+    "@n8n/i18n": "workspace:*",
+    "@n8n/typescript-config": "workspace:*",
+    "@n8n/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "catalog:frontend",
+    "@testing-library/user-event": "catalog:frontend",
+    "tsup": "catalog:",
+    "typescript": "catalog:frontend",
+    "vite": "catalog:frontend",
+    "vitest": "catalog:frontend"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}

packages/frontend/editor-ui/src/api/api-keys.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/api-keys.ts

@@ -1,5 +1,3 @@
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
 import type {
 	CreateApiKeyRequestDto,
 	UpdateApiKeyRequestDto,
@@ -8,6 +6,9 @@ import type {
 } from '@n8n/api-types';
 import type { ApiKeyScope } from '@n8n/permissions';
 
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
+
 export async function getApiKeys(context: IRestApiContext): Promise<ApiKey[]> {
 	return await makeRestApiRequest(context, 'GET', '/api-keys');
 }

packages/frontend/editor-ui/src/api/communityNodes.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/communityNodes.ts

@@ -1,6 +1,7 @@
-import type { IRestApiContext } from '@/Interface';
 import type { PublicInstalledPackage } from 'n8n-workflow';
-import { get, post, makeRestApiRequest } from '@/utils/apiUtils';
+
+import type { IRestApiContext } from '../types';
+import { get, post, makeRestApiRequest } from '../utils';
 
 export async function getInstalledCommunityNodes(
 	context: IRestApiContext,

packages/frontend/editor-ui/src/api/ctas.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/ctas.ts

@@ -1,5 +1,5 @@
-import type { IRestApiContext } from '@/Interface';
-import { get } from '@/utils/apiUtils';
+import type { IRestApiContext } from '../types';
+import { get } from '../utils';
 
 export async function getBecomeCreatorCta(context: IRestApiContext): Promise<boolean> {
 	const response = await get(context.baseUrl, '/cta/become-creator');

packages/frontend/editor-ui/src/api/eventbus.ee.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/eventbus.ee.ts

@@ -1,7 +1,8 @@
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
 import type { IDataObject, MessageEventBusDestinationOptions } from 'n8n-workflow';
 
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
+
 export type ApiMessageEventBusDestinationOptions = MessageEventBusDestinationOptions & {
 	id: string;
 };

packages/frontend/editor-ui/src/api/events.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/events.ts

@@ -1,5 +1,5 @@
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
 
 export async function sessionStarted(context: IRestApiContext): Promise<void> {
 	return await makeRestApiRequest(context, 'GET', '/events/session-started');

packages/frontend/@n8n/rest-api-client/src/api/execution.ts

@@ -0,0 +1,12 @@
+export * from './api-keys';
+export * from './communityNodes';
+export * from './ctas';
+export * from './eventbus.ee';
+export * from './events';
+export * from './mfa';
+export * from './nodeTypes';
+export * from './npsSurvey';
+export * from './orchestration';
+export * from './roles';
+export * from './ui';
+export * from './webhooks';

packages/frontend/@n8n/rest-api-client/src/api/index.ts

@@ -1,5 +1,5 @@
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
 
 export async function canEnableMFA(context: IRestApiContext) {
 	return await makeRestApiRequest(context, 'POST', '/mfa/can-enable');

packages/frontend/editor-ui/src/api/mfa.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/mfa.ts

@@ -5,19 +5,20 @@ import type {
 	ResourceLocatorRequestDto,
 	ResourceMapperFieldsRequestDto,
 } from '@n8n/api-types';
-import { makeRestApiRequest } from '@/utils/apiUtils';
-import type { IRestApiContext } from '@/Interface';
 import type { INodeTranslationHeaders } from '@n8n/i18n';
 import axios from 'axios';
-import {
-	type INodeListSearchResult,
-	type INodePropertyOptions,
-	type INodeTypeDescription,
-	type INodeTypeNameVersion,
-	type NodeParameterValueType,
-	type ResourceMapperFields,
-	sleep,
+import type {
+	INodeListSearchResult,
+	INodePropertyOptions,
+	INodeTypeDescription,
+	INodeTypeNameVersion,
+	NodeParameterValueType,
+	ResourceMapperFields,
 } from 'n8n-workflow';
+import { sleep } from 'n8n-workflow';
+
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
 
 async function fetchNodeTypesJsonWithRetry(url: string, retries = 5, delay = 500) {
 	for (let attempt = 0; attempt < retries; attempt++) {

packages/frontend/editor-ui/src/api/nodeTypes.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/nodeTypes.ts

@@ -1,7 +1,8 @@
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
 import type { NpsSurveyState } from 'n8n-workflow';
 
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
+
 export async function updateNpsSurveyState(context: IRestApiContext, state: NpsSurveyState) {
 	await makeRestApiRequest(context, 'PATCH', '/user-settings/nps-survey', state);
 }

packages/frontend/editor-ui/src/api/npsSurvey.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/npsSurvey.ts

@@ -1,5 +1,5 @@
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
 
 const GET_STATUS_ENDPOINT = '/orchestration/worker/status';
 

packages/frontend/editor-ui/src/api/orchestration.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/orchestration.ts

@@ -1,6 +1,7 @@
 import type { AllRolesMap } from '@n8n/permissions';
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
+
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
 
 export const getRoles = async (context: IRestApiContext): Promise<AllRolesMap> => {
 	return await makeRestApiRequest(context, 'GET', '/roles');

packages/frontend/editor-ui/src/api/roles.api.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/roles.ts

@@ -1,7 +1,8 @@
-import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
 import type { BannerName } from '@n8n/api-types';
 
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
+
 export async function dismissBannerPermanently(
 	context: IRestApiContext,
 	data: { bannerName: BannerName; dismissedBanners: string[] },

packages/frontend/editor-ui/src/api/ui.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/ui.ts

@@ -1,7 +1,8 @@
-import { makeRestApiRequest } from '@/utils/apiUtils';
-import type { IRestApiContext } from '@/Interface';
 import type { IHttpRequestMethods } from 'n8n-workflow';
 
+import type { IRestApiContext } from '../types';
+import { makeRestApiRequest } from '../utils';
+
 type WebhookData = {
 	workflowId: string;
 	webhookPath: string;

packages/frontend/editor-ui/src/api/webhooks.ts renamed to packages/frontend/@n8n/rest-api-client/src/api/webhooks.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './types';
+export * from './utils';

packages/frontend/@n8n/rest-api-client/src/index.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/frontend/@n8n/rest-api-client/src/shims.d.ts

@@ -0,0 +1,4 @@
+export interface IRestApiContext {
+	baseUrl: string;
+	pushRef: string;
+}

packages/frontend/@n8n/rest-api-client/src/types.ts

@@ -1,4 +1,4 @@
-import { ResponseError, STREAM_SEPERATOR, streamRequest } from './apiUtils';
+import { ResponseError, STREAM_SEPERATOR, streamRequest } from './utils';
 
 describe('streamRequest', () => {
 	it('should stream data from the API endpoint', async () => {