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

@@ -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();
 	});
 

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();
+		});
+	});
+});

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>"
+`;

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,
 			}),
 		},
 	},

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"