⚡Reusing existing types

packages/editor-ui/src/Interface.ts

@@ -314,25 +314,29 @@ export interface IWorkflowDb {
 	versionId: string;
 	usedCredentials?: IUsedCredential[];
 	meta?: WorkflowMetadata;
+	resource?: 'workflow';
 }
 
-export interface WorkflowListResourceDB {
-	resource: 'workflow' | 'folder';
+// For workflow list we don't need the full workflow data
+export type WorkflowResourceDB = Omit<
+	IWorkflowDb,
+	'nodes' | 'connections' | 'settings' | 'pinData' | 'versionId' | 'usedCredentials' | 'meta'
+>;
+export interface IFolderDb {
+	resource: 'folder';
 	id: string;
 	name: string;
 	createdAt: number | string;
 	updatedAt: number | string;
-	active?: boolean;
 	workflowCount?: number;
 	parentFolder?: { id: string; name: string };
 	homeProject?: ProjectSharingData;
 	tags?: ITag[];
-	scopes?: Scope[];
-	versionId?: string;
-	meta?: WorkflowMetadata;
 	sharedWithProjects?: ProjectSharingData[];
 }
 
+export type WorkflowListResourceDB = WorkflowResourceDB | IFolderDb;
+
 // Identical to cli.Interfaces.ts
 export interface IWorkflowShortResponse {
 	id: string;

packages/editor-ui/src/utils/typeGuards.ts

@@ -5,7 +5,13 @@ import type {
 	TriggerPanelDefinition,
 } from 'n8n-workflow';
 import { nodeConnectionTypes } from 'n8n-workflow';
-import type { IExecutionResponse, ICredentialsResponse, NewCredentialsModal } from '@/Interface';
+import type {
+	IExecutionResponse,
+	ICredentialsResponse,
+	NewCredentialsModal,
+	WorkflowListResourceDB,
+	WorkflowResourceDB,
+} from '@/Interface';
 import type { Connection as VueFlowConnection } from '@vue-flow/core';
 import type { RouteLocationRaw } from 'vue-router';
 import type { CanvasConnectionMode } from '@/types';
@@ -133,3 +139,9 @@ export function isResourceSortableByDate(
 ): value is WorkflowResource | FolderResource | CredentialsResource {
 	return isWorkflowResource(value) || isFolderResource(value) || isCredentialsResource(value);
 }
+
+export function isResponseWorkflowResource(
+	value: WorkflowListResourceDB,
+): value is WorkflowResourceDB {
+	return value.resource === 'workflow';
+}

packages/editor-ui/src/views/WorkflowsView.vue

@@ -16,7 +16,7 @@ import {
 	VIEWS,
 	DEFAULT_WORKFLOW_PAGE_SIZE,
 } from '@/constants';
-import type { IUser, UserAction, WorkflowListResourceDB } from '@/Interface';
+import type { IUser, UserAction, WorkflowListResourceDB, WorkflowResourceDB } from '@/Interface';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
@@ -46,6 +46,7 @@ import { createEventBus } from 'n8n-design-system/utils';
 import type { PathItem } from 'n8n-design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
 import { ProjectTypes } from '@/types/projects.types';
 import { FOLDER_LIST_ITEM_ACTIONS } from '@/components/Folders/constants';
+import { isResponseWorkflowResource } from '@/utils/typeGuards';
 
 interface Filters extends BaseFilters {
 	status: string | boolean;
@@ -519,9 +520,11 @@ const onSortUpdated = async (sort: string) => {
 };
 
 const onWorkflowActiveToggle = (data: { id: string; active: boolean }) => {
-	const workflow = workflowsAndFolders.value.find((w) => w.id === data.id);
+	const workflow: WorkflowResourceDB | undefined = workflowsAndFolders.value.find(
+		(w): w is WorkflowResourceDB => isResponseWorkflowResource(w) && w.id === data.id,
+	);
 	if (!workflow) return;
-	workflow.active = data.active === true;
+	workflow.active = data.active;
 };
 
 const onFolderOpened = (data: { folder: FolderResource }) => {