refactor(editor): Refactor utils files and mixins (#4654)

* ✨ Added `utils` module. Moved `canvasHelpers` and old `utils.ts` file to it
* ✨ Moved rest of utils and helpers
* ⚡ Fixing sytax errors
* 🔨 Refactoring new utils files
* 🔨 Organizing imports, adding comments and a bit more refactoring
* ✔️ Fixing tests
* 🔨 Moving mixins to `src`

packages/editor-ui/src/api/api-keys.ts

@@ -1,5 +1,5 @@
 import {IRestApiContext} from "@/Interface";
-import {makeRestApiRequest} from "@/api/helpers";
+import {makeRestApiRequest} from "@/utils";
 
 export function getApiKey(context: IRestApiContext): Promise<{ apiKey: string | null }> {
 	return makeRestApiRequest(context, 'GET', '/me/api-key');

packages/editor-ui/src/api/communityNodes.ts

@@ -1,6 +1,6 @@
 import { IRestApiContext } from '@/Interface';
 import { PublicInstalledPackage } from 'n8n-workflow';
-import { get, post, makeRestApiRequest } from './helpers';
+import { get, post, makeRestApiRequest } from '@/utils';
 
 export async function getInstalledCommunityNodes(context: IRestApiContext): Promise<PublicInstalledPackage[]> {
 	const response = await get(context.baseUrl, '/nodes');

packages/editor-ui/src/api/credentials.ee.ts

@@ -3,7 +3,7 @@ import {
 	IRestApiContext,
 	IShareCredentialsPayload,
 } from '@/Interface';
-import { makeRestApiRequest } from './helpers';
+import { makeRestApiRequest } from '@/utils';
 import {
 	IDataObject,
 } from 'n8n-workflow';

packages/editor-ui/src/api/credentials.ts

@@ -1,5 +1,5 @@
 import { ICredentialsDecryptedResponse, ICredentialsResponse, IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from './helpers';
+import { makeRestApiRequest } from '@/utils';
 import {
 	ICredentialsDecrypted,
 	ICredentialType,

packages/editor-ui/src/api/curlHelper.ts

@@ -1,5 +1,5 @@
 import {CurlToJSONResponse, IRestApiContext} from "@/Interface";
-import {makeRestApiRequest} from "@/api/helpers";
+import {makeRestApiRequest} from "@/utils";
 
 export function getCurlToJson(context: IRestApiContext,  curlCommand: string): Promise<CurlToJSONResponse> {
 	return makeRestApiRequest(context, 'POST', '/curl-to-json', { curlCommand });

packages/editor-ui/src/api/helpers.ts

@@ -1,97 +0,0 @@
-import axios, { AxiosRequestConfig, Method } from 'axios';
-import { IDataObject } from 'n8n-workflow';
-import type { IRestApiContext } from '../Interface';
-
-class ResponseError extends Error {
-	// The HTTP status code of response
-	httpStatusCode?: number;
-
-	// The error code in the response
-	errorCode?: number;
-
-	// The stack trace of the server
-	serverStackTrace?: string;
-
-	/**
-	 * Creates an instance of ResponseError.
-	 * @param {string} message The error message
-	 * @param {number} [errorCode] The error code which can be used by frontend to identify the actual error
-	 * @param {number} [httpStatusCode] The HTTP status code the response should have
-	 * @param {string} [stack] The stack trace
-	 */
-	constructor (message: string, options: {errorCode?: number, httpStatusCode?: number, stack?: string} = {}) {
-		super(message);
-		this.name = 'ResponseError';
-
-		const { errorCode, httpStatusCode, stack } = options;
-		if (errorCode) {
-			this.errorCode = errorCode;
-		}
-		if (httpStatusCode) {
-			this.httpStatusCode = httpStatusCode;
-		}
-		if (stack) {
-			this.serverStackTrace = stack;
-		}
-	}
-}
-
-async function request(config: {method: Method, baseURL: string, endpoint: string, headers?: IDataObject, data?: IDataObject}) {
-	const { method, baseURL, endpoint, headers, data } = config;
-	const options: AxiosRequestConfig = {
-		method,
-		url: endpoint,
-		baseURL,
-		headers,
-	};
-	if (import.meta.env.NODE_ENV !== 'production' && !baseURL.includes('api.n8n.io') ) {
-		options.withCredentials = true;
-	}
-	if (['POST', 'PATCH', 'PUT'].includes(method)) {
-		options.data = data;
-	} else {
-		options.params = data;
-	}
-
-	try {
-		const response = await axios.request(options);
-		return response.data;
-	} catch (error) {
-		if (error.message === 'Network Error') {
-			throw new ResponseError('API-Server can not be reached. It is probably down.');
-		}
-
-		const errorResponseData = error.response.data;
-		if (errorResponseData !== undefined && errorResponseData.message !== undefined) {
-			if (errorResponseData.name === 'NodeApiError') {
-				errorResponseData.httpStatusCode = error.response.status;
-				throw errorResponseData;
-			}
-
-			throw new ResponseError(errorResponseData.message, {errorCode: errorResponseData.code, httpStatusCode: error.response.status, stack: errorResponseData.stack});
-		}
-
-		throw error;
-	}
-}
-
-export async function makeRestApiRequest(context: IRestApiContext, method: Method, endpoint: string, data?: IDataObject) {
-	const response = await request({
-		method,
-		baseURL: context.baseUrl,
-		endpoint,
-		headers: { sessionid: context.sessionId },
-		data,
-	});
-
-	// @ts-ignore all cli rest api endpoints return data wrapped in `data` key
-	return response.data;
-}
-
-export async function get(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) {
-	return await request({method: 'GET', baseURL, endpoint, headers, data: params});
-}
-
-export async function post(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) {
-	return await request({method: 'POST', baseURL, endpoint, headers, data: params});
-}

packages/editor-ui/src/api/nodeTypes.ts

@@ -1,4 +1,4 @@
-import { makeRestApiRequest } from './helpers';
+import { makeRestApiRequest } from '@/utils';
 import type {
 	INodeTranslationHeaders,
 	IResourceLocatorReqParams,

packages/editor-ui/src/api/settings.ts

@@ -1,5 +1,5 @@
 import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings, IN8nPromptResponse } from '../Interface';
-import { makeRestApiRequest, get, post } from './helpers';
+import { makeRestApiRequest, get, post } from '@/utils';
 import { N8N_IO_BASE_URL, NPM_COMMUNITY_NODE_SEARCH_API_URL  } from '@/constants';
 
 export function getSettings(context: IRestApiContext): Promise<IN8nUISettings> {

packages/editor-ui/src/api/tags.ts

@@ -1,5 +1,5 @@
 import { IRestApiContext, ITag } from '@/Interface';
-import { makeRestApiRequest } from './helpers';
+import { makeRestApiRequest } from '@/utils';
 
 export async function getTags(context: IRestApiContext, withUsageCount = false): Promise<ITag[]> {
 	return await makeRestApiRequest(context, 'GET', '/tags', { withUsageCount });

packages/editor-ui/src/api/templates.ts

@@ -1,6 +1,6 @@
 import { ITemplatesCategory, ITemplatesCollection, ITemplatesQuery, ITemplatesWorkflow, ITemplatesCollectionResponse, ITemplatesWorkflowResponse, IWorkflowTemplate } from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
-import { get } from './helpers';
+import { get } from '@/utils';
 
 function stringifyArray(arr: number[]) {
 	return arr.join(',');

packages/editor-ui/src/api/users.ts

@@ -1,6 +1,6 @@
 import { IInviteResponse, IPersonalizationLatestVersion, IRestApiContext, IUserResponse } from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
-import { makeRestApiRequest } from './helpers';
+import { makeRestApiRequest } from '@/utils';
 
 export function loginCurrentUser(context: IRestApiContext): Promise<IUserResponse | null> {
 	return makeRestApiRequest(context, 'GET', '/login');

packages/editor-ui/src/api/versions.ts

@@ -1,7 +1,6 @@
 import { IVersion } from '@/Interface';
 import { INSTANCE_ID_HEADER } from '@/constants';
-import { IDataObject } from 'n8n-workflow';
-import { get } from './helpers';
+import { get } from '@/utils';
 
 export async function getNextVersions(endpoint: string, version: string, instanceId: string): Promise<IVersion[]> {
 	const headers = {[INSTANCE_ID_HEADER as string] : instanceId};

packages/editor-ui/src/api/workflow-webhooks.ts

@@ -1,5 +1,5 @@
 import { IOnboardingCallPrompt, IOnboardingCallPromptResponse, IUser } from "@/Interface";
-import { get, post } from "./helpers";
+import { get, post } from "@/utils";
 
 const N8N_API_BASE_URL = 'https://api.n8n.io/api';
 const ONBOARDING_PROMPTS_ENDPOINT = '/prompts/onboarding';

packages/editor-ui/src/api/workflows.ee.ts

@@ -3,7 +3,7 @@ import {
 	IShareWorkflowsPayload,
 	IWorkflowsShareResponse,
 } from '@/Interface';
-import { makeRestApiRequest } from './helpers';
+import { makeRestApiRequest } from '@/utils';
 import {
 	IDataObject,
 } from 'n8n-workflow';

packages/editor-ui/src/api/workflows.ts

@@ -1,6 +1,6 @@
 import { IRestApiContext } from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
-import { makeRestApiRequest } from './helpers';
+import { makeRestApiRequest } from '@/utils';
 
 export async function getNewWorkflow(context: IRestApiContext, name?: string) {
 	const response = await makeRestApiRequest(context, 'GET', `/workflows/new`, name ? { name } : {});