refactor(editor): Migrate versions api to @n8n/rest-client-api (no-changelog) (#16147)

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

@@ -1,4 +1,5 @@
 export * from './browser';
+export * from './instance';
 
 export const LICENSE_FEATURES = {
 	SHARING: 'feat:sharing',
@@ -96,9 +97,3 @@ export const LDAP_DEFAULT_CONFIGURATION: LdapConfig = {
 	searchPageSize: 0,
 	searchTimeout: 60,
 };
-
-export const INSTANCE_TYPES = ['main', 'webhook', 'worker'] as const;
-export type InstanceType = (typeof INSTANCE_TYPES)[number];
-
-export const INSTANCE_ROLES = ['unset', 'leader', 'follower'] as const;
-export type InstanceRole = (typeof INSTANCE_ROLES)[number];

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

@@ -0,0 +1,7 @@
+export const INSTANCE_ID_HEADER = 'n8n-instance-id';
+
+export const INSTANCE_TYPES = ['main', 'webhook', 'worker'] as const;
+export type InstanceType = (typeof INSTANCE_TYPES)[number];
+
+export const INSTANCE_ROLES = ['unset', 'leader', 'follower'] as const;
+export type InstanceRole = (typeof INSTANCE_ROLES)[number];

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

@@ -10,4 +10,5 @@ export * from './orchestration';
 export * from './roles';
 export * from './sso';
 export * from './ui';
+export * from './versions';
 export * from './webhooks';

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

@@ -0,0 +1,39 @@
+import { INSTANCE_ID_HEADER } from '@n8n/constants';
+import type { INodeParameters } from 'n8n-workflow';
+
+import { get } from '../utils';
+
+export interface VersionNode {
+	name: string;
+	displayName: string;
+	icon: string;
+	iconUrl?: string;
+	defaults: INodeParameters;
+	iconData: {
+		type: string;
+		icon?: string;
+		fileBuffer?: string;
+	};
+	typeVersion?: number;
+}
+
+export interface Version {
+	name: string;
+	nodes: VersionNode[];
+	createdAt: string;
+	description: string;
+	documentationUrl: string;
+	hasBreakingChange: boolean;
+	hasSecurityFix: boolean;
+	hasSecurityIssue: boolean;
+	securityIssueFixVersion: string;
+}
+
+export async function getNextVersions(
+	endpoint: string,
+	version: string,
+	instanceId: string,
+): Promise<Version[]> {
+	const headers = { [INSTANCE_ID_HEADER as string]: instanceId };
+	return await get(endpoint, version, {}, headers);
+}

packages/frontend/editor-ui/src/Interface.ts

@@ -45,6 +45,7 @@ import type {
 	ITaskData,
 	ISourceData,
 } from 'n8n-workflow';
+import type { Version, VersionNode } from '@n8n/rest-api-client/api/versions';
 
 import type {
 	AI_NODE_CREATOR_VIEW,
@@ -900,33 +901,7 @@ export interface ITagRow {
 	canDelete?: boolean;
 }
 
-export interface IVersion {
+export interface ITemplatesNode extends VersionNode {
-	name: string;
-	nodes: IVersionNode[];
-	createdAt: string;
-	description: string;
-	documentationUrl: string;
-	hasBreakingChange: boolean;
-	hasSecurityFix: boolean;
-	hasSecurityIssue: boolean;
-	securityIssueFixVersion: string;
-}
-
-export interface IVersionNode {
-	name: string;
-	displayName: string;
-	icon: string;
-	iconUrl?: string;
-	defaults: INodeParameters;
-	iconData: {
-		type: string;
-		icon?: string;
-		fileBuffer?: string;
-	};
-	typeVersion?: number;
-}
-
-export interface ITemplatesNode extends IVersionNode {
 	id: number;
 	categories?: ITemplatesCategory[];
 }
@@ -1164,8 +1139,8 @@ export interface ITemplateState {
 
 export interface IVersionsState {
 	versionNotificationSettings: IVersionNotificationSettings;
-	nextVersions: IVersion[];
+	nextVersions: Version[];
-	currentVersion: IVersion | undefined;
+	currentVersion: Version | undefined;
 }
 
 export interface IWorkflowsMap {

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

@@ -1,12 +0,0 @@
-import type { IVersion } from '@/Interface';
-import { INSTANCE_ID_HEADER } from '@/constants';
-import { get } from '@n8n/rest-api-client';
-
-export async function getNextVersions(
-	endpoint: string,
-	version: string,
-	instanceId: string,
-): Promise<IVersion[]> {
-	const headers = { [INSTANCE_ID_HEADER as string]: instanceId };
-	return await get(endpoint, version, {}, headers);
-}

packages/frontend/editor-ui/src/components/NodeIcon.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { IVersionNode, SimplifiedNodeType } from '@/Interface';
+import type { SimplifiedNodeType } from '@/Interface';
 import { getNodeIconSource, type NodeIconSource } from '@/utils/nodeIcon';
 import { N8nNodeIcon } from '@n8n/design-system';
 import { computed } from 'vue';
+import type { VersionNode } from '@n8n/rest-api-client/api/versions';
 
 type Props = {
 	size?: number;
@@ -15,7 +16,7 @@ type Props = {
 	// NodeIcon needs iconSource OR nodeType, would be better with an intersection type
 	// but it breaks Vue template type checking
 	iconSource?: NodeIconSource;
-	nodeType?: SimplifiedNodeType | IVersionNode | null;
+	nodeType?: SimplifiedNodeType | VersionNode | null;
 };
 
 const props = withDefaults(defineProps<Props>(), {

packages/frontend/editor-ui/src/components/VersionCard.vue

@@ -3,16 +3,16 @@ import NodeIcon from './NodeIcon.vue';
 import TimeAgo from './TimeAgo.vue';
 import Badge from './Badge.vue';
 import WarningTooltip from './WarningTooltip.vue';
-import type { IVersion, IVersionNode } from '@/Interface';
+import type { Version, VersionNode } from '@n8n/rest-api-client/api/versions';
 import { useI18n } from '@n8n/i18n';
 
 defineProps<{
-	version: IVersion;
+	version: Version;
 }>();
 
 const i18n = useI18n();
 
-const nodeName = (node: IVersionNode): string => {
+const nodeName = (node: VersionNode): string => {
 	return node !== null ? node.displayName : i18n.baseText('versionCard.unknown');
 };
 </script>

packages/frontend/editor-ui/src/constants.ts

@@ -324,9 +324,6 @@ export const NODE_CONNECTION_TYPE_ALLOW_MULTIPLE: NodeConnectionType[] = [
 	NodeConnectionTypes.Main,
 ];
 
-// General
-export const INSTANCE_ID_HEADER = 'n8n-instance-id';
-
 /** PERSONALIZATION SURVEY */
 export const EMAIL_KEY = 'email';
 export const WORK_AREA_KEY = 'workArea';

packages/frontend/editor-ui/src/stores/versions.store.ts

@@ -1,20 +1,20 @@
 import type { IVersionNotificationSettings } from '@n8n/api-types';
-import * as versionsApi from '@/api/versions';
+import * as versionsApi from '@n8n/rest-api-client/api/versions';
 import { VERSIONS_MODAL_KEY } from '@/constants';
 import { STORES } from '@n8n/stores';
-import type { IVersion } from '@/Interface';
+import type { Version } from '@n8n/rest-api-client/api/versions';
 import { defineStore } from 'pinia';
 import { useRootStore } from '@n8n/stores/useRootStore';
 import { useToast } from '@/composables/useToast';
 import { useUIStore } from '@/stores/ui.store';
 import { computed, ref } from 'vue';
 
-type SetVersionParams = { versions: IVersion[]; currentVersion: string };
+type SetVersionParams = { versions: Version[]; currentVersion: string };
 
 export const useVersionsStore = defineStore(STORES.VERSIONS, () => {
 	const versionNotificationSettings = ref({ enabled: false, endpoint: '', infoUrl: '' });
-	const nextVersions = ref<IVersion[]>([]);
+	const nextVersions = ref<Version[]>([]);
-	const currentVersion = ref<IVersion | undefined>();
+	const currentVersion = ref<Version | undefined>();
 
 	const { showToast } = useToast();
 	const uiStore = useUIStore();

packages/frontend/editor-ui/src/utils/nodeIcon.ts

@@ -1,5 +1,5 @@
 import { type INodeTypeDescription } from 'n8n-workflow';
-import type { IVersionNode } from '../Interface';
+import type { VersionNode } from '@n8n/rest-api-client/api/versions';
 import { useRootStore } from '@n8n/stores/useRootStore';
 import { useUIStore } from '../stores/ui.store';
 import { getThemedValue } from './nodeTypesUtils';
@@ -20,7 +20,7 @@ type IconNodeTypeDescription = Pick<
 	INodeTypeDescription,
 	'icon' | 'iconUrl' | 'iconColor' | 'defaults' | 'badgeIconUrl' | 'name'
 >;
-type IconVersionNode = Pick<IVersionNode, 'icon' | 'iconUrl' | 'iconData' | 'defaults' | 'name'>;
+type IconVersionNode = Pick<VersionNode, 'icon' | 'iconUrl' | 'iconData' | 'defaults' | 'name'>;
 export type IconNodeType = IconNodeTypeDescription | IconVersionNode;
 
 export const getNodeIcon = (nodeType: IconNodeType): string | null => {