refactor: Integrate consistent-type-imports in FE packages (no-changelog)

packages/@n8n_io/eslint-config/base.js

@@ -194,6 +194,11 @@ const config = (module.exports = {
 		 */
 		'@typescript-eslint/consistent-type-assertions': 'error',
 
+		/**
+		 * https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/consistent-type-imports.md
+		 */
+		'@typescript-eslint/consistent-type-imports': 'error',
+
 		/**
 		 * https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/member-delimiter-style.md
 		 */

packages/cli/.eslintrc.js

@@ -16,8 +16,6 @@ module.exports = {
 	],
 
 	rules: {
-		'@typescript-eslint/consistent-type-imports': 'error',
-
 		// TODO: Remove this
 		'import/no-cycle': 'warn',
 		'import/order': 'off',

packages/core/.eslintrc.js

@@ -11,8 +11,6 @@ module.exports = {
 	ignorePatterns: ['bin/*.js'],
 
 	rules: {
-		'@typescript-eslint/consistent-type-imports': 'error',
-
 		// TODO: Remove this
 		'import/order': 'off',
 		'@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': true }],

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -41,7 +41,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import Vue from 'vue';
 import {
 	Dropdown as ElDropdown,
 	DropdownMenu as ElDropdownMenu,

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -95,7 +95,7 @@ import N8nCheckbox from '../N8nCheckbox';
 import ElSwitch from 'element-ui/lib/switch';
 
 import { getValidationError, VALIDATORS } from './validators';
-import { Rule, RuleGroup, IValidator, Validatable, FormState } from '../../types';
+import type { Rule, RuleGroup, IValidator, Validatable, FormState } from '../../types';
 
 import { t } from '../../locale';
 

packages/design-system/src/components/N8nFormInput/validators.ts

@@ -1,4 +1,4 @@
-import { IValidator, RuleGroup, Validatable } from '../../types';
+import type { IValidator, RuleGroup, Validatable } from '../../types';
 
 export const emailRegex =
 	/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue

@@ -41,7 +41,8 @@
 <script lang="ts">
 import N8nText from '../N8nText';
 import N8nIcon from '../N8nIcon';
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import Vue from 'vue';
 
 interface IAccordionItem {
 	id: string;

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -60,7 +60,8 @@ interface Options {
 	tasklists: typeof DEFAULT_OPTIONS_TASKLISTS;
 }
 
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import Vue from 'vue';
 
 export default Vue.extend({
 	components: {

packages/design-system/src/components/N8nMenu/Menu.vue

@@ -55,8 +55,9 @@
 import { Menu as ElMenu } from 'element-ui';
 import N8nMenuItem from '../N8nMenuItem';
 
-import Vue, { PropType } from 'vue';
-import { IMenuItem } from '../../types';
+import type { PropType } from 'vue';
+import Vue from 'vue';
+import type { IMenuItem } from '../../types';
 
 export default Vue.extend({
 	name: 'n8n-menu',

packages/design-system/src/components/N8nMenuItem/MenuItem.vue

@@ -74,8 +74,9 @@
 import { Submenu as ElSubmenu, MenuItem as ElMenuItem } from 'element-ui';
 import N8nTooltip from '../N8nTooltip';
 import N8nIcon from '../N8nIcon';
-import { IMenuItem } from '../../types';
-import Vue, { PropType } from 'vue';
+import type { IMenuItem } from '../../types';
+import type { PropType } from 'vue';
+import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'n8n-menu-item',

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts

@@ -1,5 +1,5 @@
 import N8nNodeCreatorNode from './NodeCreatorNode.vue';
-import { StoryFn } from '@storybook/vue';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/Node Creator Node',

packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
 import type { StoryFn } from '@storybook/vue';
 import N8nRecycleScroller from './RecycleScroller.vue';
-import { ComponentInstance } from 'vue';
+import type { ComponentInstance } from 'vue';
 
 export default {
 	title: 'Atoms/RecycleScroller',

packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue

@@ -1,16 +1,8 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
-import {
-	computed,
-	defineComponent,
-	onMounted,
-	onBeforeMount,
-	ref,
-	PropType,
-	nextTick,
-	watch,
-} from 'vue';
+import type { PropType } from 'vue';
+import { computed, defineComponent, onMounted, onBeforeMount, ref, nextTick, watch } from 'vue';
 
 export default defineComponent({
 	name: 'n8n-recycle-scroller',

packages/design-system/src/components/N8nTags/Tags.vue

@@ -22,7 +22,7 @@
 import N8nTag from '../N8nTag';
 import N8nLink from '../N8nLink';
 import Locale from '../../mixins/locale';
-import { PropType } from 'vue';
+import type { PropType } from 'vue';
 import mixins from 'vue-typed-mixins';
 
 interface ITag {

packages/design-system/src/components/N8nTooltip/Tooltip.vue

@@ -20,7 +20,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import Vue from 'vue';
 import { Tooltip as ElTooltip } from 'element-ui';
 import type { IN8nButton } from '@/types';
 import N8nButton from '../N8nButton';

packages/design-system/src/components/N8nUserSelect/UserSelect.vue

@@ -34,7 +34,7 @@ import 'vue';
 import mixins from 'vue-typed-mixins';
 import { Select as ElSelect, Option as ElOption } from 'element-ui';
 import N8nUserInfo from '../N8nUserInfo';
-import { IUser } from '../../types';
+import type { IUser } from '../../types';
 import Locale from '../../mixins/locale';
 import { t } from '../../locale';
 

packages/design-system/src/components/N8nUsersList/UsersList.stories.ts

@@ -1,7 +1,7 @@
 import N8nUsersList from './UsersList.vue';
 import { action } from '@storybook/addon-actions';
 import type { StoryFn } from '@storybook/vue';
-import { IUser } from '@/types';
+import type { IUser } from '@/types';
 
 export default {
 	title: 'Modules/UsersList',

packages/design-system/src/components/N8nUsersList/UsersList.vue

@@ -31,13 +31,13 @@
 </template>
 
 <script lang="ts">
-import { IUser, IUserListAction } from '../../types';
+import type { IUser, IUserListAction } from '../../types';
 import N8nActionToggle from '../N8nActionToggle';
 import N8nBadge from '../N8nBadge';
 import N8nUserInfo from '../N8nUserInfo';
 import Locale from '../../mixins/locale';
 import mixins from 'vue-typed-mixins';
-import { PropType } from 'vue';
+import type { PropType } from 'vue';
 
 export default mixins(Locale).extend({
 	name: 'n8n-users-list',

packages/design-system/src/plugins/n8nComponents.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import type Vue from 'vue';
 import N8nActionBox from '../components/N8nActionBox';
 import N8nActionDropdown from '../components/N8nActionDropdown';
 import N8nActionToggle from '../components/N8nActionToggle';

packages/editor-ui/src/Interface.ts

@@ -1,6 +1,6 @@
-import { CREDENTIAL_EDIT_MODAL_KEY } from './constants';
+import type { CREDENTIAL_EDIT_MODAL_KEY } from './constants';
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { IMenuItem } from 'n8n-design-system';
+import type { IMenuItem } from 'n8n-design-system';
 import {
 	GenericValue,
 	IConnections,
@@ -30,9 +30,9 @@ import {
 	IDisplayOptions,
 	IAbstractEventMessage,
 } from 'n8n-workflow';
-import { FAKE_DOOR_FEATURES } from './constants';
-import { SignInType } from './constants';
-import { BulkCommand, Undoable } from '@/models/history';
+import type { FAKE_DOOR_FEATURES } from './constants';
+import type { SignInType } from './constants';
+import type { BulkCommand, Undoable } from '@/models/history';
 
 export * from 'n8n-design-system/types';
 

packages/editor-ui/src/__tests__/permissions.spec.ts

@@ -1,5 +1,5 @@
 import { parsePermissionsTable } from '@/permissions';
-import { IUser } from '@/Interface';
+import type { IUser } from '@/Interface';
 
 describe('parsePermissionsTable()', () => {
 	const user: IUser = {

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

@@ -1,4 +1,4 @@
-import { IRestApiContext } from '@/Interface';
+import type { IRestApiContext } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
 
 export function getApiKey(context: IRestApiContext): Promise<{ apiKey: string | null }> {

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

@@ -1,5 +1,5 @@
-import { IRestApiContext } from '@/Interface';
-import { PublicInstalledPackage } from 'n8n-workflow';
+import type { IRestApiContext } from '@/Interface';
+import type { PublicInstalledPackage } from 'n8n-workflow';
 import { get, post, makeRestApiRequest } from '@/utils';
 
 export async function getInstalledCommunityNodes(

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

@@ -1,6 +1,6 @@
-import { ICredentialsResponse, IRestApiContext, IShareCredentialsPayload } from '@/Interface';
+import type { ICredentialsResponse, IRestApiContext, IShareCredentialsPayload } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
-import { IDataObject } from 'n8n-workflow';
+import type { IDataObject } from 'n8n-workflow';
 
 export async function setCredentialSharedWith(
 	context: IRestApiContext,

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

@@ -1,6 +1,10 @@
-import { ICredentialsDecryptedResponse, ICredentialsResponse, IRestApiContext } from '@/Interface';
+import type {
+	ICredentialsDecryptedResponse,
+	ICredentialsResponse,
+	IRestApiContext,
+} from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
-import {
+import type {
 	ICredentialsDecrypted,
 	ICredentialType,
 	IDataObject,

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

@@ -1,4 +1,4 @@
-import { CurlToJSONResponse, IRestApiContext } from '@/Interface';
+import type { CurlToJSONResponse, IRestApiContext } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
 
 export function getCurlToJson(

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

@@ -1,6 +1,6 @@
-import { IRestApiContext } from '@/Interface';
+import type { IRestApiContext } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
-import { IDataObject, MessageEventBusDestinationOptions } from 'n8n-workflow';
+import type { IDataObject, MessageEventBusDestinationOptions } from 'n8n-workflow';
 
 export async function saveDestinationToDb(
 	context: IRestApiContext,

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

@@ -1,6 +1,6 @@
-import { ILdapConfig, ILdapSyncData, IRestApiContext } from '@/Interface';
+import type { ILdapConfig, ILdapSyncData, IRestApiContext } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
-import { IDataObject } from 'n8n-workflow';
+import type { IDataObject } from 'n8n-workflow';
 
 export function getLdapConfig(context: IRestApiContext): Promise<ILdapConfig> {
 	return makeRestApiRequest(context, 'GET', '/ldap/config');

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

@@ -1,4 +1,4 @@
-import {
+import type {
 	IRestApiContext,
 	IN8nPrompts,
 	IN8nValueSurveyData,

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

@@ -1,4 +1,4 @@
-import { IRestApiContext, ITag } from '@/Interface';
+import type { IRestApiContext, ITag } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
 
 export async function getTags(context: IRestApiContext, withUsageCount = false): Promise<ITag[]> {

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

@@ -1,4 +1,4 @@
-import {
+import type {
 	ITemplatesCategory,
 	ITemplatesCollection,
 	ITemplatesQuery,
@@ -7,7 +7,7 @@ import {
 	ITemplatesWorkflowResponse,
 	IWorkflowTemplate,
 } from '@/Interface';
-import { IDataObject } from 'n8n-workflow';
+import type { IDataObject } from 'n8n-workflow';
 import { get } from '@/utils';
 
 function stringifyArray(arr: number[]) {

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

@@ -1,5 +1,5 @@
 import { makeRestApiRequest } from '@/utils';
-import { IRestApiContext, UsageState } from '@/Interface';
+import type { IRestApiContext, UsageState } from '@/Interface';
 
 export const getLicense = (context: IRestApiContext): Promise<UsageState['data']> => {
 	return makeRestApiRequest(context, 'GET', '/license');

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

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

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

@@ -1,4 +1,4 @@
-import { IVersion } from '@/Interface';
+import type { IVersion } from '@/Interface';
 import { INSTANCE_ID_HEADER } from '@/constants';
 import { get } from '@/utils';
 

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

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

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

@@ -1,6 +1,6 @@
-import { IRestApiContext, IShareWorkflowsPayload, IWorkflowsShareResponse } from '@/Interface';
+import type { IRestApiContext, IShareWorkflowsPayload, IWorkflowsShareResponse } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
-import { IDataObject } from 'n8n-workflow';
+import type { IDataObject } from 'n8n-workflow';
 
 export async function setWorkflowSharedWith(
 	context: IRestApiContext,

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

@@ -1,5 +1,5 @@
-import { IRestApiContext } from '@/Interface';
-import { IDataObject } from 'n8n-workflow';
+import type { IRestApiContext } from '@/Interface';
+import type { IDataObject } from 'n8n-workflow';
 import { makeRestApiRequest } from '@/utils';
 
 export async function getNewWorkflow(context: IRestApiContext, name?: string) {

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

@@ -21,7 +21,8 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { restApi } from '@/mixins/restApi';
-import { IBinaryData, jsonParse } from 'n8n-workflow';
+import type { IBinaryData } from 'n8n-workflow';
+import { jsonParse } from 'n8n-workflow';
 import type { PropType } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
 

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

@@ -33,7 +33,7 @@ import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
 import Modal from './Modal.vue';
 import Vue from 'vue';
-import { IFormInputs } from '@/Interface';
+import type { IFormInputs } from '@/Interface';
 import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';

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

@@ -25,15 +25,16 @@ import { genericHelpers } from '@/mixins/genericHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
-import { IExecutionResponse, INodeUi } from '@/Interface';
-import {
+import type { INodeUi } from '@/Interface';
+import { IExecutionResponse } from '@/Interface';
+import type {
 	IBinaryKeyData,
 	IDataObject,
 	INodeExecutionData,
 	IRunExecutionData,
 	IWorkflowDataProxyAdditionalKeys,
-	WorkflowDataProxy,
 } from 'n8n-workflow';
+import { WorkflowDataProxy } from 'n8n-workflow';
 
 import { PLACEHOLDER_FILLED_AT_EXECUTION_TIME } from '@/constants';
 import { CodeEditor } from './forms';