From b4fd9ba94d783d33819049796082698ba90f6e9b Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 16 May 2023 12:07:55 +0300
Subject: [PATCH] fix: Add itemSize config to workflows view recycle scroller
 (no-changelog) (#6238)

* fix: Add itemSize config to workflows view recycle scroller (no-changelog)

* test: add unit tests to cover recycle scroller height

* fix: revert allWorkflows change

* fix: fix linting issue

* fix: fix sharing e2e test flakiness
---
 cypress/e2e/17-sharing.cy.ts                  |  2 +-
 .../__tests__/RecycleScroller.spec.ts         | 28 +++++++++++++++++++
 .../RecycleScroller.spec.ts.snap              | 13 +++++++++
 .../layouts/ResourcesListLayout.vue           |  2 +-
 .../editor-ui/src/views/WorkflowsView.vue     |  1 +
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts
 create mode 100644 packages/design-system/src/components/N8nRecycleScroller/__tests__/__snapshots__/RecycleScroller.spec.ts.snap

diff --git a/cypress/e2e/17-sharing.cy.ts b/cypress/e2e/17-sharing.cy.ts
index ea61b5a67e..ddc028fee3 100644
--- a/cypress/e2e/17-sharing.cy.ts
+++ b/cypress/e2e/17-sharing.cy.ts
@@ -161,7 +161,7 @@ describe('Sharing', () => {
 
 		cy.waitForLoad();
 		cy.visit(workflowsPage.url);
-		workflowsPage.getters.workflowCard('Workflow W2').click();
+		workflowsPage.getters.workflowCard('Workflow W2').click('top');
 		workflowPage.actions.executeWorkflow();
 	});
 
diff --git a/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts b/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts
new file mode 100644
index 0000000000..3b062e5165
--- /dev/null
+++ b/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts
@@ -0,0 +1,28 @@
+import { render } from '@testing-library/vue';
+import N8nRecycleScroller from '../RecycleScroller.vue';
+
+const itemSize = 100;
+const itemKey = 'id';
+const items = [...(new Array(100) as number[])].map((item, index) => ({
+	id: index,
+	name: `Item ${index}`,
+}));
+
+describe('components', () => {
+	describe('N8nRecycleScroller', () => {
+		it('should render correctly', () => {
+			const wrapper = render(N8nRecycleScroller, {
+				propsData: {
+					itemSize,
+					itemKey,
+					items,
+				},
+			});
+
+			expect(wrapper.container.querySelector('.recycle-scroller')).toHaveStyle(
+				`height: ${itemSize * items.length}px`,
+			);
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+	});
+});
diff --git a/packages/design-system/src/components/N8nRecycleScroller/__tests__/__snapshots__/RecycleScroller.spec.ts.snap b/packages/design-system/src/components/N8nRecycleScroller/__tests__/__snapshots__/RecycleScroller.spec.ts.snap
new file mode 100644
index 0000000000..1b40af1f1d
--- /dev/null
+++ b/packages/design-system/src/components/N8nRecycleScroller/__tests__/__snapshots__/RecycleScroller.spec.ts.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nRecycleScroller > should render correctly 1`] = `
+"<div class=\\"recycle-scroller-wrapper\\">
+  <div class=\\"recycle-scroller\\" style=\\"height: 10000px;\\">
+    <div class=\\"recycle-scroller-items-wrapper\\" style=\\"transform: translateY(0px);\\">
+      <div class=\\"recycle-scroller-item\\"></div>
+      <div class=\\"recycle-scroller-item\\"></div>
+      <div class=\\"recycle-scroller-item\\"></div>
+    </div>
+  </div>
+</div>"
+`;
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index c6c5062780..6e00e71b88 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -300,7 +300,7 @@ export default mixins(debounceHelper).extend({
 		typeProps: {
 			type: Object as PropType<{ itemSize: number } | { columns: DatatableColumn[] }>,
 			default: () => ({
-				itemSize: 0,
+				itemSize: 80,
 			}),
 		},
 	},
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index 707571b384..ea9a856b32 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -5,6 +5,7 @@
 		:resources="allWorkflows"
 		:filters="filters"
 		:additional-filters-handler="onFilter"
+		:type-props="{ itemSize: 80 }"
 		:show-aside="allWorkflows.length > 0"
 		:shareable="isShareable"
 		:initialize="initialize"