feat(editor): Implement breadcrumbs component

packages/design-system/src/components/N8nBreadcrumbs/AsyncLoadingCacheDemo.vue

@@ -4,6 +4,10 @@ import { ref } from 'vue';
 import type { PathItem } from './Breadcrumbs.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
 
+/**
+ * Demo component to showcase different usage of Breadcrumbs component
+ */
+
 defineOptions({ name: 'AsyncLoadingCacheDemo' });
 
 const FETCH_TIMEOUT = 1000;
@@ -12,6 +16,7 @@ type Props = {
 	title: string;
 	mode: 'sync' | 'async';
 	testCache?: boolean;
+	// Breadcrumbs props
 	theme?: 'small' | 'medium';
 	showBorder?: boolean;
 };
@@ -23,21 +28,28 @@ const props = withDefaults(defineProps<Props>(), {
 	showBorder: false,
 });
 
+// We'll use this to break the cache after a few fetches in the demo
 const fetchCount = ref(0);
+
 const items = ref<PathItem[]>([
 	{ id: '1', label: 'Home', href: '/' },
 	{ id: '2', label: 'Parent', href: '/parent' },
 ]);
+
+// For async version, hidden items are a promise, we can also make it reactive like this
 const hiddenItemsPromise = ref<Promise<PathItem[]>>(new Promise(() => {}));
+// For sync version, hidden items are a just a reactive array
 const hiddenItemsSync = ref<PathItem[]>([
 	{ id: 'folder2', label: 'Folder 2' },
 	{ id: 'folder3', label: 'Folder 3' },
 ]);
 
 const onDropdownOpened = () => {
+	// In the current implementation, we need to init a promise only when needed
 	if (fetchCount.value === 0) {
 		hiddenItemsPromise.value = fetchHiddenItems();
 	}
+	// Demo code
 	fetchCount.value++;
 	if (props.testCache) {
 		if (fetchCount.value > 2 && props.mode === 'async') {
@@ -48,6 +60,16 @@ const onDropdownOpened = () => {
 	}
 };
 
+const fetchHiddenItems = async (): Promise<PathItem[]> => {
+	await new Promise((resolve) => setTimeout(resolve, FETCH_TIMEOUT));
+	return [
+		{ id: 'home', label: 'Home' },
+		{ id: 'projects', label: 'Projects' },
+		{ id: 'folder1', label: 'Folder 1' },
+	];
+};
+
+// Updates the promise ref with new items to showcase it's reactivity
 const updatePromise = () => {
 	hiddenItemsPromise.value = new Promise((resolve) => {
 		setTimeout(() => {
@@ -60,20 +82,12 @@ const updatePromise = () => {
 	});
 };
 
+// Updates the sync array to showcase it's reactivity
 const updateSyncItems = () => {
 	const newId = fetchCount.value + 3;
 	const newItem = { id: `'folder${newId}'`, label: `Folder ${newId}` };
 	hiddenItemsSync.value.push(newItem);
 };
-
-const fetchHiddenItems = async (): Promise<PathItem[]> => {
-	await new Promise((resolve) => setTimeout(resolve, FETCH_TIMEOUT));
-	return [
-		{ id: 'home', label: 'Home' },
-		{ id: 'projects', label: 'Projects' },
-		{ id: 'folder1', label: 'Folder 1' },
-	];
-};
 </script>
 
 <template>

packages/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts

@@ -214,3 +214,19 @@ SmallAsyncLoading.args = {
 	theme: 'small',
 	showBorder: true,
 };
+
+const smallHiddenItemsDisabledTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	components: { Breadcrumbs },
+	props: Object.keys(argTypes),
+	template: '<Breadcrumbs v-bind="args" />',
+});
+
+export const SmallWithHiddenItemsDisabled = smallHiddenItemsDisabledTemplate.bind({});
+SmallWithHiddenItemsDisabled.args = {
+	theme: 'small',
+	showBorder: true,
+	items: items.slice(2),
+	hiddenItems: [],
+	pathTruncated: true,
+};

packages/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue

@@ -33,7 +33,7 @@ const emit = defineEmits<{
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
-	hiddenItems: () => [],
+	hiddenItems: () => new Array<PathItem>(),
 	theme: 'medium',
 	showBorder: false,
 	loadingSkeletonRows: 3,