diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts index 8c5d259c5c..a1f8481028 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts @@ -102,4 +102,22 @@ describe('N8nDataTableServer', () => { ]); expect(emitted('update:options')[2]).toStrictEqual([expect.objectContaining({ page: 1 })]); }); + + it('should not show the pagination if there are no items', async () => { + const { queryByTestId } = render(N8nDataTableServer, { + //@ts-expect-error testing-library errors due to header generics + props: { items: [], headers, itemsLength: 0 }, + }); + + expect(queryByTestId('pagination')).not.toBeInTheDocument(); + }); + + it('should not show the pagination if there are less items than the smallest page size value', async () => { + const { queryByTestId } = render(N8nDataTableServer, { + //@ts-expect-error testing-library errors due to header generics + props: { items: items.slice(0, 3), headers, itemsLength: 3 }, + }); + + expect(queryByTestId('pagination')).not.toBeInTheDocument(); + }); }); diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue index 8b847b6aba..2acc55ef7f 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue @@ -55,10 +55,12 @@ const props = withDefaults( returnObject?: boolean; itemSelectable?: boolean | DeepKeys | ((row: T) => boolean); + pageSizes?: number[]; }>(), { itemSelectable: undefined, itemValue: 'id', + pageSizes: () => [10, 25, 50, 100], }, ); @@ -218,6 +220,8 @@ const pagination = computed({ }, }); +const showPagination = computed(() => props.itemsLength > Math.min(...props.pageSizes)); + const sortBy = defineModel('sort-by', { default: [], required: false }); function handleSortingChange(updaterOrValue: Updater) { @@ -448,11 +452,11 @@ const table = useVueTable({ -
+
- +
diff --git a/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue b/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue index c457fa274f..09c344a968 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue +++ b/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue @@ -148,27 +148,22 @@ watch( v-if="!insightsStore.isDashboardEnabled" data-test-id="insights-dashboard-unlicensed" /> -
+
+
+ + {{ i18n.baseText('insights.chart.loading') }} +
-
- - - - {{ i18n.baseText('insights.chart.loading') }} -
span { + position: relative; + z-index: 2; + } + + &::before { + content: ''; + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--color-background-xlight); + opacity: 0.75; + z-index: 1; + } } diff --git a/packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.vue b/packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.vue index 8c34429afc..3688114814 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.vue +++ b/packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.vue @@ -68,13 +68,21 @@ const trackTabClick = (insightType: keyof InsightsSummary) => { @@ -208,6 +208,9 @@ const trackTabClick = (insightType: keyof InsightsSummary) => { &.empty { em { color: var(--color-text-lighter); + body[data-theme='dark'] & { + color: var(--color-text-light); + } } small { padding: 0; diff --git a/packages/frontend/editor-ui/src/features/insights/components/__snapshots__/InsightsSummary.test.ts.snap b/packages/frontend/editor-ui/src/features/insights/components/__snapshots__/InsightsSummary.test.ts.snap index ed6731e92d..f680fcd4ce 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/__snapshots__/InsightsSummary.test.ts.snap +++ b/packages/frontend/editor-ui/src/features/insights/components/__snapshots__/InsightsSummary.test.ts.snap @@ -9,26 +9,41 @@ exports[`InsightsSummary > should render the summary correctly 1`] = ` exports[`InsightsSummary > should render the summary correctly 2`] = ` "
" `; @@ -36,26 +51,41 @@ exports[`InsightsSummary > should render the summary correctly 2`] = ` exports[`InsightsSummary > should render the summary correctly 3`] = ` "
" `; @@ -63,26 +93,41 @@ exports[`InsightsSummary > should render the summary correctly 3`] = ` exports[`InsightsSummary > should render the summary correctly 4`] = ` "
" `; @@ -90,11 +135,26 @@ exports[`InsightsSummary > should render the summary correctly 4`] = ` exports[`InsightsSummary > should render the summary correctly 5`] = ` "
" `; @@ -102,11 +162,41 @@ exports[`InsightsSummary > should render the summary correctly 5`] = ` exports[`InsightsSummary > should render the summary correctly 6`] = ` "
" `; diff --git a/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue b/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue index b6ea1e1796..b24572abd0 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue +++ b/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue @@ -89,7 +89,7 @@ const headers = ref>>([ const sortBy = defineModel>('sortBy'); const currentPage = ref(0); -const itemsPerPage = ref(20); +const itemsPerPage = ref(25); const emit = defineEmits<{ 'update:options': [ @@ -135,7 +135,6 @@ watch(sortBy, (newValue) => { :items="rows" :headers="headers" :items-length="data.count" - :loading="loading" @update:options="emit('update:options', $event)" >