add stale icon

packages/design-system/src/components/N8nInfoTip/InfoTip.stories.js

@@ -11,7 +11,13 @@ const Template = (args, { argTypes }) => ({
 		N8nInfoTip,
 	},
 	template:
-		'<n8n-info-tip>Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
+		'<n8n-info-tip v-bind="$props">Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
 });
 
-export const InputLabel = Template.bind({});
+export const Note = Template.bind({});
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+	type: 'tooltip',
+	tooltipPlacement: 'right',
+};

packages/design-system/src/components/N8nInfoTip/InfoTip.vue

@@ -1,23 +1,48 @@
-<template functional>
+<template>
-	<div :class="$style.infotip">
+	<div :class="[$style[theme], $style[type]]">
-		<component :is="$options.components.N8nIcon" icon="info-circle" /> <span><slot></slot></span>
+		<n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'">
+			<span>
+				<n8n-icon :icon="theme.startsWith('info') ? 'info-circle': 'exclamation-triangle'" />
+				<span v-if="type === 'note'"><slot></slot></span>
+			</span>
+			<span v-if="type === 'tooltip'" slot="content"><slot></slot></span>
+		</n8n-tooltip>
 	</div>
 </template>
 
 <script lang="ts">
 import N8nIcon from '../N8nIcon';
+import N8nTooltip from '../N8nTooltip';
 
 export default {
 	name: 'n8n-info-tip',
 	components: {
 		N8nIcon,
+		N8nTooltip,
+	},
+	props: {
+		theme: {
+			type: String,
+			default: 'info',
+			validator: (value: string): boolean =>
+				['info', 'info-light', 'warning', 'danger'].includes(value),
+		},
+		type: {
+			type: String,
+			default: 'note',
+			validator: (value: string): boolean =>
+				['note', 'tooltip'].includes(value),
+		},
+		tooltipPlacement: {
+			type: String,
+			default: 'top',
+		},
 	},
 };
 </script>
 
 <style lang="scss" module>
-.infotip {
+.base {
-	color: var(--color-text-light);
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
 	line-height: var(--font-size-s);
@@ -27,7 +52,35 @@ export default {
 
 	svg {
 		font-size: var(--font-size-s);
+	}
+}
+
+.note {
+	composes: base;
+
+	svg {
 		margin-right: var(--spacing-4xs);
 	}
 }
+
+.tooltip {
+	composes: base;
+	display: inline-block;
+}
+
+.info-light {
+	color: var(--color-foreground-dark);
+}
+
+.info {
+	color: var(--color-text-light);
+}
+
+.warning {
+	color: var(--color-warning);
+}
+
+.danger {
+	color: var(--color-danger);
+}
 </style>

packages/design-system/src/components/utils/helpers.ts

@@ -1,5 +1,5 @@
 export function addTargetBlank(html: string) {
-	return html.includes('href=')
+	return html && html.includes('href=')
 		? html.replace(/href=/g, 'target="_blank" href=')
 		: html;
 }

packages/editor-ui/src/components/DataDisplay.vue

@@ -10,7 +10,6 @@
 		<div class="data-display" v-if="node" >
 			<NodeSettings ref="settings" @valueChanged="valueChanged" />
 			<RunData @openSettings="openSettings" />
-
 		</div>
 	</el-dialog>
 </template>

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

@@ -3,18 +3,20 @@
 		<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
 
 		<div :class="$style.header">
-			<div>
+			<div :class="$style.titleSection">
 				<span :class="$style.title">{{ $locale.baseText('node.output') }}</span>
-				<n8n-tooltip
+				<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right" v-if="runMetadata">
-					v-if="runMetadata"
+					<div>
-					placement="right"
-				>
-					<div slot="content">
 						<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.startTime') + ':' }}</n8n-text> {{runMetadata.startTime}}<br/>
 						<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.executionTime') + ':' }}</n8n-text> {{runMetadata.executionTime}} {{ $locale.baseText('runData.ms') }}
 					</div>
-					<font-awesome-icon icon="info-circle" :class="$style.infoIcon" />
+				</n8n-info-tip>
-				</n8n-tooltip>
+
+				<n8n-info-tip theme="warning" type="tooltip" tooltipPlacement="right" v-if="hasNodeRun && staleData">
+					<template>
+						<span v-html="$locale.baseText('node.output.staleDataWarning')"></span>
+					</template>
+				</n8n-info-tip>
 			</div>
 
 			<div v-if="!hasRunError" @click.stop>
@@ -220,6 +222,7 @@ import {
 } from '@/constants';
 
 import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
+import WarningTooltip from '@/components/WarningTooltip.vue';
 import NodeErrorView from '@/components/Error/NodeErrorView.vue';
 
 import { copyPaste } from '@/components/mixins/copyPaste';
@@ -228,6 +231,7 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
+import Vue from 'vue/types/umd';
 
 // A path that does not exist so that nothing is selected by default
 const deselectedPlaceholder = '_!^&*';
@@ -244,6 +248,7 @@ export default mixins(
 			BinaryDataDisplay,
 			NodeErrorView,
 			VueJsonPretty,
+			WarningTooltip,
 		},
 		data () {
 			return {
@@ -265,6 +270,7 @@ export default mixins(
 				MAX_DISPLAY_ITEMS_AUTO_ALL,
 				currentPage: 1,
 				pageSize: 10,
+				staleData: false,
 			};
 		},
 		mounted() {
@@ -715,7 +721,12 @@ export default mixins(
 	color: var(--color-text-light);
 	letter-spacing: 3px;
 	font-weight: var(--font-weight-bold);
-	margin-right: var(--spacing-2xs);
+}
+
+.titleSection {
+	> * {
+		margin-right: var(--spacing-2xs);
+	}
 }
 
 .container {

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1164,6 +1164,7 @@
 	"node.output.branch": "Branch",
 	"node.output.emptyOutput": "This output item is empty.",
 	"node.output.emptyInput": "This input item is empty. {name} will still execute when it recieves an empty item.",
+	"node.output.staleDataWarning": "Node parameters have changed. <br /> Execute node again to refresh output.",
 	"openWorkflow.workflowImportError": "Could not import workflow",
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"settings": "Settings",