From 240d25926021c7cf55898c55682d9aa6c5ccf2b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Mon, 11 Dec 2023 17:37:26 +0100
Subject: [PATCH] refactor(editor): Rename CollectionCard and
 CollectionCardCarousel (#7994)

## Summary
As part of the plan to reuse current `CollectionCarousel` component,
this PR makes it, and the cards it uses, more generic by renaming them
and adds a new property to card component which can be used to hide the
item count.

#### How to test the change:
Until the component that will use this is implmeneted, this can be
tested manually:
1. Run n8n
2. Set `showItemCount` property for workflow collection cards to `false`
3. Check if workflow count is showing (it shouldn't) and if everything
rendering correctly

## Issues fixed
Fixes ADO-1567

## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again. A feature is not complete without tests.
  >
> *(internal)* You can use Slack commands to trigger [e2e
tests](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#a39f9e5ba64a48b58a71d81c837e8227)
or [deploy test
instance](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#f6a177d32bde4b57ae2da0b8e454bfce)
or [deploy early access version on
Cloud](https://www.notion.so/n8n/Cloudbot-3dbe779836004972b7057bc989526998?pvs=4#fef2d36ab02247e1a0f65a74f6fb534e).
---
 ...llectionCard.vue => TemplatesInfoCard.vue} | 16 ++--
 ...Carousel.vue => TemplatesInfoCarousel.vue} |  8 +-
 .../__tests__/TemplatesInfoCard.test.ts       | 77 +++++++++++++++++++
 .../src/views/TemplatesSearchView.vue         |  6 +-
 4 files changed, 95 insertions(+), 12 deletions(-)
 rename packages/editor-ui/src/components/{CollectionCard.vue => TemplatesInfoCard.vue} (69%)
 rename packages/editor-ui/src/components/{CollectionsCarousel.vue => TemplatesInfoCarousel.vue} (96%)
 create mode 100644 packages/editor-ui/src/components/__tests__/TemplatesInfoCard.test.ts

diff --git a/packages/editor-ui/src/components/CollectionCard.vue b/packages/editor-ui/src/components/TemplatesInfoCard.vue
similarity index 69%
rename from packages/editor-ui/src/components/CollectionCard.vue
rename to packages/editor-ui/src/components/TemplatesInfoCard.vue
index 97fc3c450c..98300bdcfd 100644
--- a/packages/editor-ui/src/components/CollectionCard.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCard.vue
@@ -1,10 +1,12 @@
 <template>
 	<Card :loading="loading" :title="collection.name">
 		<template #footer>
-			<n8n-text size="small" color="text-light">
-				{{ collection.workflows.length }}
-				{{ $locale.baseText('templates.workflows') }}
-			</n8n-text>
+			<span>
+				<n8n-text v-show="showItemCount" size="small" color="text-light">
+					{{ collection.workflows.length }}
+					{{ $locale.baseText('templates.workflows') }}
+				</n8n-text>
+			</span>
 			<NodeList :nodes="collection.nodes" :showMore="false" />
 		</template>
 	</Card>
@@ -17,7 +19,7 @@ import Card from '@/components/CollectionWorkflowCard.vue';
 import NodeList from '@/components/NodeList.vue';
 
 export default defineComponent({
-	name: 'CollectionCard',
+	name: 'TemplatesInfoCard',
 	mixins: [genericHelpers],
 	props: {
 		loading: {
@@ -26,6 +28,10 @@ export default defineComponent({
 		collection: {
 			type: Object,
 		},
+		showItemCount: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	components: {
 		Card,
diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
similarity index 96%
rename from packages/editor-ui/src/components/CollectionsCarousel.vue
rename to packages/editor-ui/src/components/TemplatesInfoCarousel.vue
index b5355f9aa5..37230988ba 100644
--- a/packages/editor-ui/src/components/CollectionsCarousel.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
@@ -9,7 +9,7 @@
 			@after-change="updateCarouselScroll"
 		>
 			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
-			<CollectionCard
+			<TemplatesInfoCard
 				v-for="collection in loading ? [] : collections"
 				:key="collection.id"
 				:collection="collection"
@@ -30,7 +30,7 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { ITemplatesCollection } from '@/Interface';
 import Card from '@/components/CollectionWorkflowCard.vue';
-import CollectionCard from '@/components/CollectionCard.vue';
+import TemplatesInfoCard from '@/components/TemplatesInfoCard.vue';
 import { VueAgile } from 'vue-agile';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
@@ -38,7 +38,7 @@ import { genericHelpers } from '@/mixins/genericHelpers';
 type SliderRef = InstanceType<typeof VueAgile>;
 
 export default defineComponent({
-	name: 'CollectionsCarousel',
+	name: 'TemplatesInfoCarousel',
 	mixins: [genericHelpers],
 	props: {
 		collections: {
@@ -62,7 +62,7 @@ export default defineComponent({
 	},
 	components: {
 		Card,
-		CollectionCard,
+		TemplatesInfoCard,
 		agile: VueAgile,
 	},
 	data() {
diff --git a/packages/editor-ui/src/components/__tests__/TemplatesInfoCard.test.ts b/packages/editor-ui/src/components/__tests__/TemplatesInfoCard.test.ts
new file mode 100644
index 0000000000..a7935f834f
--- /dev/null
+++ b/packages/editor-ui/src/components/__tests__/TemplatesInfoCard.test.ts
@@ -0,0 +1,77 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import { createPinia, setActivePinia } from 'pinia';
+import TemplatesInfoCard from '@/components/TemplatesInfoCard.vue';
+
+let pinia: ReturnType<typeof createPinia>;
+const renderComponent = createComponentRenderer(TemplatesInfoCard);
+
+const TEST_COLLECTION = {
+	id: 8,
+	rank: 1,
+	name: 'Advanced AI',
+	totalViews: null,
+	createdAt: '2023-10-03T17:04:44.645Z',
+	workflows: [{ id: 1951 }, { id: 1953 }, { id: 1954 }, { id: 1955 }],
+	nodes: [
+		{
+			id: 1119,
+			icon: 'fa:robot',
+			name: '@n8n/n8n-nodes-langchain.agent',
+			iconData: {
+				icon: 'robot',
+				type: 'icon',
+			},
+			displayName: 'Agent',
+		},
+		{
+			id: 1121,
+			icon: 'fa:link',
+			name: '@n8n/n8n-nodes-langchain.chainSummarization',
+			iconData: {
+				icon: 'link',
+				type: 'icon',
+			},
+			displayName: 'Summarization Chain',
+		},
+		{
+			id: 1123,
+			icon: 'fa:link',
+			name: '@n8n/n8n-nodes-langchain.chainLlm',
+			iconData: {
+				icon: 'link',
+				type: 'icon',
+			},
+			displayName: 'Basic LLM Chain',
+		},
+	],
+};
+
+describe('TemplatesInfoCard', () => {
+	beforeEach(() => {
+		pinia = createPinia();
+		setActivePinia(pinia);
+	});
+
+	it('should render component properly', () => {
+		const { getByText, container, debug } = renderComponent({
+			pinia,
+			props: {
+				collection: TEST_COLLECTION,
+			},
+		});
+		expect(getByText(TEST_COLLECTION.name)).toBeInTheDocument();
+		expect(getByText(`${TEST_COLLECTION.workflows.length} Workflows`)).toBeVisible();
+		expect(container.querySelectorAll('.n8n-node-icon').length).toBe(TEST_COLLECTION.nodes.length);
+	});
+
+	it('should not render item count if configured so', () => {
+		const { getByText } = renderComponent({
+			pinia,
+			props: {
+				collection: TEST_COLLECTION,
+				showItemCount: false,
+			},
+		});
+		expect(getByText(`${TEST_COLLECTION.workflows.length} Workflows`)).not.toBeVisible();
+	});
+});
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 224cff932c..f8211093ac 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -51,7 +51,7 @@
 								<span v-if="!loadingCollections" v-text="`(${collections.length})`" />
 							</n8n-heading>
 						</div>
-						<CollectionsCarousel
+						<TemplatesInfoCarousel
 							:collections="collections"
 							:loading="loadingCollections"
 							@openCollection="onOpenCollection"
@@ -79,7 +79,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import CollectionsCarousel from '@/components/CollectionsCarousel.vue';
+import TemplatesInfoCarousel from '@/components/TemplatesInfoCarousel.vue';
 import TemplateFilters from '@/components/TemplateFilters.vue';
 import TemplateList from '@/components/TemplateList.vue';
 import TemplatesView from '@/views/TemplatesView.vue';
@@ -114,7 +114,7 @@ export default defineComponent({
 	name: 'TemplatesSearchView',
 	mixins: [genericHelpers, debounceHelper],
 	components: {
-		CollectionsCarousel,
+		TemplatesInfoCarousel,
 		TemplateFilters,
 		TemplateList,
 		TemplatesView,