fix(editor): Fix broken types for globally defined components (no-changelog) (#16505)

Co-authored-by: Mutasem Aldmour <mutasem@n8n.io>

packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue

@@ -4,11 +4,7 @@ import { useI18n } from '@n8n/i18n';
 import { ResourceType, splitName } from '@/utils/projects.utils';
 import type { Project, ProjectIcon as BadgeIcon } from '@/types/projects.types';
 import { ProjectTypes } from '@/types/projects.types';
-import type {
-	CredentialsResource,
-	FolderResource,
-	WorkflowResource,
-} from '../layouts/ResourcesListLayout.vue';
+import type { CredentialsResource, FolderResource, WorkflowResource } from '@/Interface';
 import { VIEWS } from '@/constants';
 
 type Props = {

packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue

@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import type { ButtonType } from '@n8n/design-system';
+import type { ButtonType, UserAction } from '@n8n/design-system';
 import { N8nIconButton, N8nActionToggle } from '@n8n/design-system';
-import { ref } from 'vue';
+import type { IUser } from 'n8n-workflow';
+import { useTemplateRef } from 'vue';
 
-type Action = {
-	label: string;
-	value: string;
-	disabled: boolean;
-};
 defineProps<{
-	actions: Action[];
+	actions: Array<UserAction<IUser>>;
 	disabled?: boolean;
 	type?: ButtonType;
 }>();
@@ -18,7 +14,7 @@ const emit = defineEmits<{
 	action: [id: string];
 }>();
 
-const actionToggleRef = ref<InstanceType<typeof N8nActionToggle> | null>(null);
+const actionToggleRef = useTemplateRef('actionToggleRef');
 
 defineExpose({
 	openActionToggle: (isOpen: boolean) => actionToggleRef.value?.openActionToggle(isOpen),

packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue

@@ -16,6 +16,7 @@ import ProjectCreateResource from '@/components/Projects/ProjectCreateResource.v
 import { useSettingsStore } from '@/stores/settings.store';
 import { useProjectPages } from '@/composables/useProjectPages';
 import { truncateTextToFitWidth } from '@/utils/formatters/textFormatter';
+import type { IUser } from 'n8n-workflow';
 
 const route = useRoute();
 const router = useRouter();
@@ -96,7 +97,7 @@ const createWorkflowButton = computed(() => ({
 }));
 
 const menu = computed(() => {
-	const items: UserAction[] = [
+	const items: Array<UserAction<IUser>> = [
 		{
 			value: ACTION_TYPES.CREDENTIAL,
 			label: i18n.baseText('projects.header.create.credential'),

packages/frontend/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue

@@ -240,7 +240,7 @@ onMounted(async () => {
 						v-for="p in filteredProjects"
 						:key="p.id"
 						:value="p.id"
-						:label="p.name"
+						:label="p.name ?? ''"
 					></N8nOption>
 				</N8nSelect>
 				<N8nText>

packages/frontend/editor-ui/src/components/Projects/ProjectNavigation.vue

@@ -43,10 +43,10 @@ const shared = computed<IMenuItem>(() => ({
 	},
 }));
 
-const getProjectMenuItem = (project: ProjectListItem) => ({
+const getProjectMenuItem = (project: ProjectListItem): IMenuItem => ({
 	id: project.id,
-	label: project.name,
-	icon: project.icon,
+	label: project.name ?? '',
+	icon: project.icon as IMenuItem['icon'],
 	route: {
 		to: {
 			name: VIEWS.PROJECTS_WORKFLOWS,
@@ -70,6 +70,14 @@ const personalProject = computed<IMenuItem>(() => ({
 const showAddFirstProject = computed(
 	() => projectsStore.isTeamProjectFeatureEnabled && !displayProjects.value.length,
 );
+
+const activeTabId = computed(() => {
+	return (
+		(Array.isArray(projectsStore.projectNavActiveId)
+			? projectsStore.projectNavActiveId[0]
+			: projectsStore.projectNavActiveId) ?? undefined
+	);
+});
 </script>
 
 <template>
@@ -78,7 +86,7 @@ const showAddFirstProject = computed(
 			<N8nMenuItem
 				:item="home"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-home-menu-item"
 			/>
@@ -86,7 +94,7 @@ const showAddFirstProject = computed(
 				v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
 				:item="personalProject"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-personal-menu-item"
 			/>
@@ -94,7 +102,7 @@ const showAddFirstProject = computed(
 				v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
 				:item="shared"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-shared-menu-item"
 			/>
@@ -136,7 +144,7 @@ const showAddFirstProject = computed(
 				}"
 				:item="getProjectMenuItem(project)"
 				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
+				:active-tab="activeTabId"
 				mode="tabs"
 				data-test-id="project-menu-item"
 			/>

packages/frontend/editor-ui/src/components/Projects/ProjectSharing.vue

@@ -136,7 +136,7 @@ watch(
 				v-for="project in filteredProjects"
 				:key="project.id"
 				:value="project.id"
-				:label="project.name"
+				:label="project.name ?? ''"
 			>
 				<ProjectSharingInfo :project="project" />
 			</N8nOption>

packages/frontend/editor-ui/src/components/Projects/ProjectTabs.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import { VIEWS } from '@/constants';
 import { useI18n } from '@n8n/i18n';
 import type { BaseTextKey } from '@n8n/i18n';
+import type { TabOptions } from '@n8n/design-system';
 
 type Props = {
 	showSettings?: boolean;
@@ -23,6 +24,8 @@ const route = useRoute();
 
 const selectedTab = ref<RouteRecordName | null | undefined>('');
 
+const selectedTabLabel = computed(() => (selectedTab.value ? String(selectedTab.value) : ''));
+
 const projectId = computed(() => {
 	return Array.isArray(route?.params?.projectId)
 		? route.params.projectId[0]
@@ -70,16 +73,16 @@ const createTab = (
 	label: BaseTextKey,
 	routeKey: string,
 	routes: Record<string, { name: RouteRecordName; params?: Record<string, string | number> }>,
-) => {
+): TabOptions<string> => {
 	return {
 		label: locale.baseText(label),
-		value: routes[routeKey].name,
+		value: routes[routeKey].name as string,
 		to: routes[routeKey],
 	};
 };
 
 // Generate the tabs configuration
-const options = computed(() => {
+const options = computed<Array<TabOptions<string>>>(() => {
 	const routes = getRouteConfigs();
 	const tabs = [
 		createTab('mainSidebar.workflows', 'workflows', routes),
@@ -93,7 +96,7 @@ const options = computed(() => {
 	if (props.showSettings) {
 		tabs.push({
 			label: locale.baseText('projects.settings'),
-			value: VIEWS.PROJECT_SETTINGS,
+			value: VIEWS.PROJECT_SETTINGS as string,
 			to: { name: VIEWS.PROJECT_SETTINGS, params: { projectId: projectId.value } },
 		});
 	}
@@ -110,8 +113,17 @@ watch(
 	},
 	{ immediate: true },
 );
+
+function onSelectTab(value: string | number) {
+	selectedTab.value = value as RouteRecordName;
+}
 </script>
 
 <template>
-	<N8nTabs v-model="selectedTab" :options="options" data-test-id="project-tabs" />
+	<N8nTabs
+		:model-value="selectedTabLabel"
+		:options="options"
+		data-test-id="project-tabs"
+		@update:model-value="onSelectTab"
+	/>
 </template>