From f9404ecb61f3c623e56fc3eee6cf9010856f50e2 Mon Sep 17 00:00:00 2001 From: Eugene Date: Mon, 10 Nov 2025 16:47:21 +0100 Subject: [PATCH] fix(editor): Small UI tweaks for data size warnings (#21693) --- .../frontend/@n8n/i18n/src/locales/en.json | 8 +-- .../logs/components/LogsViewRunData.vue | 1 - .../ndv/panel/components/InputPanel.vue | 1 - .../ndv/panel/components/NDVEmptyState.vue | 2 + .../ndv/panel/components/OutputPanel.vue | 1 - .../ndv/runData/components/RunData.test.ts | 1 - .../ndv/runData/components/RunData.vue | 61 +++++++++++++------ .../components/ai/AiRunContentBlock.test.ts | 4 +- .../components/ai/AiRunContentBlock.vue | 30 ++++----- 9 files changed, 66 insertions(+), 43 deletions(-) diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json index b6dd334bdee..906641f1be3 100644 --- a/packages/frontend/@n8n/i18n/src/locales/en.json +++ b/packages/frontend/@n8n/i18n/src/locales/en.json @@ -1245,7 +1245,6 @@ "ndv.input.mapping": "Mapping", "ndv.input.fromAI": "From AI", "ndv.input.parentNodes": "Parent nodes", - "ndv.input.tooMuchData.title": "Display data?", "ndv.input.noOutputDataInBranch": "No input data in this branch", "ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.", "ndv.input.noOutputData": "No data", @@ -1308,10 +1307,6 @@ "ndv.output.insertTestData": "set mock data", "ndv.output.staleDataWarning.regular": "Node parameters have changed.
Test node again to refresh output.", "ndv.output.staleDataWarning.pinData": "Node parameter changes will not affect pinned output data.", - "ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may slow down your browser temporarily.", - "ndv.output.tooMuchData.showDataAnyway": "Show data", - "ndv.output.tooMuchData.title": "Display data?", - "ndv.output.logs.tooMuchData.message": "The {inOut} contains {size} MB of data. Displaying it may slow down your browser temporarily.", "ndv.output.waitingToRun": "Waiting to execute...", "ndv.output.noToolUsedInfo": "None of your tools were used in this run. Try giving your tools clearer names and descriptions to help the AI", "ndv.title.cancel": "Cancel", @@ -1337,6 +1332,9 @@ "ndv.pinData.error.tooLarge.description": "Workflow has reached the maximum allowed pinned data size ({size} mb / {limit} mb)", "ndv.pinData.error.tooLargeWorkflow.title": "Unable to pin data due to size limit", "ndv.pinData.error.tooLargeWorkflow.description": "Workflow has reached the maximum allowed size ({size} mb / {limit} mb)", + "ndv.tooMuchData.message": "This may temporarily slow down your browser.", + "ndv.tooMuchData.showDataAnyway": "Show data", + "ndv.tooMuchData.title": "Show {size} MB of data?", "ndv.httpRequest.credentialOnly.docsNotice": "Use the {nodeName} docs to construct your request. We'll take care of the authentication part if you add a {nodeName} credential below.", "noTagsView.readyToOrganizeYourWorkflows": "Ready to organize your workflows?", "noTagsView.withWorkflowTagsYouReFree": "With workflow tags, you're free to create the perfect tagging system for your flows", diff --git a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsViewRunData.vue b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsViewRunData.vue index f1754d65689..7ec77b8cc2e 100644 --- a/packages/frontend/editor-ui/src/features/execution/logs/components/LogsViewRunData.vue +++ b/packages/frontend/editor-ui/src/features/execution/logs/components/LogsViewRunData.vue @@ -83,7 +83,6 @@ function handleChangeDisplayMode(value: IRunDataDisplayMode) { :class="$style.component" :workflow-object="logEntry.workflow" :workflow-execution="logEntry.execution" - :too-much-data-title="locale.baseText('ndv.output.tooMuchData.title')" :no-data-in-branch-message="locale.baseText('ndv.output.noOutputDataInBranch')" :executing-message="locale.baseText('ndv.output.executing')" :pane-type="paneType" diff --git a/packages/frontend/editor-ui/src/features/ndv/panel/components/InputPanel.vue b/packages/frontend/editor-ui/src/features/ndv/panel/components/InputPanel.vue index fb11ab234fc..44a84e2d184 100644 --- a/packages/frontend/editor-ui/src/features/ndv/panel/components/InputPanel.vue +++ b/packages/frontend/editor-ui/src/features/ndv/panel/components/InputPanel.vue @@ -415,7 +415,6 @@ function handleChangeCollapsingColumn(columnName: string | null) { :run-index="isMappingMode ? 0 : runIndex" :linked-runs="linkedRuns" :can-link-runs="!mappedNode && canLinkRuns" - :too-much-data-title="i18n.baseText('ndv.input.tooMuchData.title')" :no-data-in-branch-message="i18n.baseText('ndv.input.noOutputDataInBranch')" :is-executing="isExecutingPrevious" :executing-message="i18n.baseText('ndv.input.executingPrevious')" diff --git a/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVEmptyState.vue b/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVEmptyState.vue index b18adb31c9d..4fd3b543154 100644 --- a/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVEmptyState.vue +++ b/packages/frontend/editor-ui/src/features/ndv/panel/components/NDVEmptyState.vue @@ -35,12 +35,14 @@ defineSlots<{ .title { font-size: var(--font-size--md); font-weight: var(--font-weight--bold); + line-height: 145%; color: var(--color--text); margin: 0; } .description { font-size: var(--font-size--sm); + line-height: var(--line-height--xl); margin: 0; text-align: center; max-width: 240px; diff --git a/packages/frontend/editor-ui/src/features/ndv/panel/components/OutputPanel.vue b/packages/frontend/editor-ui/src/features/ndv/panel/components/OutputPanel.vue index 19a140c5c7d..4beef675b15 100644 --- a/packages/frontend/editor-ui/src/features/ndv/panel/components/OutputPanel.vue +++ b/packages/frontend/editor-ui/src/features/ndv/panel/components/OutputPanel.vue @@ -309,7 +309,6 @@ function handleChangeCollapsingColumn(columnName: string | null) { :run-index="runIndex" :linked-runs="linkedRuns" :can-link-runs="canLinkRuns" - :too-much-data-title="i18n.baseText('ndv.output.tooMuchData.title')" :no-data-in-branch-message="i18n.baseText('ndv.output.noOutputDataInBranch')" :is-executing="isNodeRunning" :executing-message="i18n.baseText('ndv.output.executing')" diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.test.ts b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.test.ts index 6f5351bd906..866e62adae3 100644 --- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.test.ts +++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.test.ts @@ -1276,7 +1276,6 @@ describe('RunData', () => { isExecuting: false, mappingEnabled: true, distanceFromActive: 0, - tooMuchDataTitle: '', executingMessage: '', noDataInBranchMessage: '', overrideOutputs, diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue index e4b3e8918f4..46127ecda28 100644 --- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue +++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue @@ -113,7 +113,6 @@ type Props = { workflowObject: Workflow; workflowExecution?: IRunExecutionData; runIndex: number; - tooMuchDataTitle: string; executingMessage: string; pushRef?: string; paneType: NodePanelType; @@ -1831,27 +1830,34 @@ defineExpose({ enterEditMode }); data-test-id="ndv-data-size-warning" :class="$style.center" > - - + - + > + + - +
+ - + +
+ @@ -2311,6 +2317,25 @@ defineExpose({ enterEditMode }); .compact { --ndv--spacing: var(--spacing--2xs); } + +.dataSizeWarning { + padding: var(--spacing--sm) var(--spacing--md); + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing--sm); +} + +.warningActions { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + gap: var(--spacing--2xs); + width: 100%; + align-items: center; +}