fix(editor): Styling/UX improvements on the new logs view (#14789)

packages/frontend/editor-ui/src/components/RunData.vue

@@ -93,6 +93,7 @@ import { usePostHog } from '@/stores/posthog.store';
 import ViewSubExecution from './ViewSubExecution.vue';
 import RunDataItemCount from '@/components/RunDataItemCount.vue';
 import RunDataDisplayModeSelect from '@/components/RunDataDisplayModeSelect.vue';
+import RunDataPaginationBar from '@/components/RunDataPaginationBar.vue';
 
 const LazyRunDataTable = defineAsyncComponent(
 	async () => await import('@/components/RunDataTable.vue'),
@@ -141,6 +142,7 @@ type Props = {
 	disablePin?: boolean;
 	compact?: boolean;
 	tableHeaderBgColor?: 'base' | 'light';
+	disableHoverHighlight?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -158,6 +160,7 @@ const props = withDefaults(defineProps<Props>(), {
 	disableRunIndexSelection: false,
 	disableEdit: false,
 	disablePin: false,
+	disableHoverHighlight: false,
 	compact: false,
 	tableHeaderBgColor: 'base',
 });
@@ -203,7 +206,6 @@ const binaryDataDisplayVisible = ref(false);
 const binaryDataDisplayData = ref<IBinaryData | null>(null);
 const currentPage = ref(1);
 const pageSize = ref(10);
-const pageSizes = [1, 10, 25, 50, 100];
 
 const pinDataDiscoveryTooltipVisible = ref(false);
 const isControlledPinDataTooltip = ref(false);
@@ -605,7 +607,6 @@ const itemsCountProps = computed<InstanceType<typeof RunDataItemCount>['$props']
 	dataCount: dataCount.value,
 	unfilteredDataCount: unfilteredDataCount.value,
 	subExecutionsCount: activeTaskMetadata.value?.subExecutionsCount,
-	muted: props.compact || (props.paneType === 'input' && maxRunIndex.value === 0),
 }));
 
 watch(node, (newNode, prevNode) => {
@@ -1369,7 +1370,9 @@ defineExpose({ enterEditMode });
 		/>
 
 		<div :class="$style.header">
-			<slot name="header"></slot>
+			<div :class="$style.title">
+				<slot name="header"></slot>
+			</div>
 
 			<div
 				v-show="!hasRunError && !isTrimmedManualExecutionDataItem"
@@ -1776,6 +1779,8 @@ defineExpose({ enterEditMode });
 					:has-default-hover-state="paneType === 'input' && !search"
 					:search="search"
 					:header-bg-color="tableHeaderBgColor"
+					:compact="props.compact"
+					:disable-hover-highlight="props.disableHoverHighlight"
 					@mounted="emit('tableMounted', $event)"
 					@active-row-changed="onItemHover"
 					@display-mode-change="onDisplayModeChange"
@@ -1795,6 +1800,7 @@ defineExpose({ enterEditMode });
 					:output-index="currentOutputIndex"
 					:total-runs="maxRunIndex"
 					:search="search"
+					:compact="props.compact"
 				/>
 			</Suspense>
 
@@ -1815,6 +1821,7 @@ defineExpose({ enterEditMode });
 					:total-runs="maxRunIndex"
 					:search="search"
 					:class="$style.schema"
+					:compact="props.compact"
 					@clear:search="onSearchClear"
 				/>
 			</Suspense>
@@ -1908,7 +1915,7 @@ defineExpose({ enterEditMode });
 				<slot name="node-not-run"></slot>
 			</div>
 		</div>
-		<div
+		<RunDataPaginationBar
 			v-if="
 				hidePagination === false &&
 				hasNodeRun &&
@@ -1919,41 +1926,17 @@ defineExpose({ enterEditMode });
 				!isArtificialRecoveredEventItem
 			"
 			v-show="!editMode.enabled"
-			:class="$style.pagination"
-			data-test-id="ndv-data-pagination"
-		>
-			<el-pagination
-				background
-				:hide-on-single-page="true"
-				:current-page="currentPage"
-				:pager-count="5"
-				:page-size="pageSize"
-				layout="prev, pager, next"
-				:total="dataCount"
-				@update:current-page="onCurrentPageChange"
-			>
-			</el-pagination>
-
-			<div :class="$style.pageSizeSelector">
-				<N8nSelect
-					size="mini"
-					:model-value="pageSize"
-					teleported
-					@update:model-value="onPageSizeChange"
-				>
-					<template #prepend>{{ i18n.baseText('ndv.output.pageSize') }}</template>
-					<N8nOption v-for="size in pageSizes" :key="size" :label="size" :value="size"> </N8nOption>
-					<N8nOption :label="i18n.baseText('ndv.output.all')" :value="dataCount"> </N8nOption>
-				</N8nSelect>
-			</div>
-		</div>
+			:current-page="currentPage"
+			:page-size="pageSize"
+			:total="dataCount"
+			@update:current-page="onCurrentPageChange"
+			@update:page-size="onPageSizeChange"
+		/>
 		<N8nBlockUi :show="blockUI" :class="$style.uiBlocker" />
 	</div>
 </template>
 
 <style lang="scss" module>
-@import '@/styles/variables';
-
 .infoIcon {
 	color: var(--color-foreground-dark);
 }
@@ -1999,10 +1982,15 @@ defineExpose({ enterEditMode });
 	overflow-y: hidden;
 	min-height: calc(30px + var(--spacing-s));
 	scrollbar-width: thin;
+	container-type: inline-size;
 
 	.compact & {
 		margin-bottom: var(--spacing-4xs);
-		padding: var(--spacing-4xs) var(--spacing-s) 0 var(--spacing-s);
+		padding: var(--spacing-2xs);
+		margin-bottom: 0;
+		flex-shrink: 0;
+		flex-grow: 0;
+		min-height: auto;
 	}
 
 	> *:first-child {
@@ -2014,12 +2002,6 @@ defineExpose({ enterEditMode });
 	position: relative;
 	overflow-y: auto;
 	height: 100%;
-
-	&:hover {
-		.actions-group {
-			opacity: 1;
-		}
-	}
 }
 
 .dataDisplay {
@@ -2032,6 +2014,10 @@ defineExpose({ enterEditMode });
 	line-height: var(--font-line-height-xloose);
 	word-break: normal;
 	height: 100%;
+
+	.compact & {
+		padding: 0 var(--spacing-2xs);
+	}
 }
 
 .inlineError {
@@ -2102,22 +2088,6 @@ defineExpose({ enterEditMode });
 	margin-left: auto;
 }
 
-.pagination {
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	bottom: 0;
-	padding: 5px;
-	overflow-y: hidden;
-}
-
-.pageSizeSelector {
-	text-transform: capitalize;
-	max-width: 150px;
-	flex: 0 1 auto;
-}
-
 .binaryIndex {
 	display: block;
 	padding: var(--spacing-2xs);
@@ -2185,6 +2155,11 @@ defineExpose({ enterEditMode });
 	align-items: center;
 	flex-grow: 1;
 	gap: var(--spacing-2xs);
+
+	.compact & {
+		/* let title text alone decide the height */
+		height: 0;
+	}
 }
 
 .tooltipContain {
@@ -2255,6 +2230,10 @@ defineExpose({ enterEditMode });
 	margin-bottom: var(--spacing-xs);
 	margin-left: var(--spacing-s);
 	margin-right: var(--spacing-s);
+
+	.compact & {
+		margin: 0 var(--spacing-2xs) var(--spacing-2xs) var(--spacing-2xs);
+	}
 }
 
 .schema {
@@ -2263,15 +2242,21 @@ defineExpose({ enterEditMode });
 
 .search,
 .displayModeSelect {
-	.compact & {
+	.compact:not(:hover) & {
 		opacity: 0;
-		visibility: hidden;
-		transition: opacity 0.3s $ease-out-expo;
+		display: none;
 	}
 
 	.compact:hover & {
 		opacity: 1;
-		visibility: visible;
+	}
+}
+
+@container (max-width: 240px) {
+	/* Hide title when the panel is too narrow */
+	.compact:hover .title {
+		visibility: hidden;
+		width: 0;
 	}
 }
 </style>