feat(editor): Add node execution status indicator to output panel (#8124)
## Summary Adding node execution status indicator to the output panel ([Figma HiFi](https://www.figma.com/file/iUduV3M4W5wZT7Gw5vgDn1/NDV-output-pane-success-state)). ## Related tickets and issues Fixes ADO-480 ## Review / Merge checklist - [x] PR title and summary are descriptive. **Remember, the title automatically goes into the changelog. Use `(no-changelog)` otherwise.** ([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md)) - [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up ticket created. - [x] Tests included. > A bug is not considered fixed, unless a test is added to prevent it from happening again. > A feature is not complete without tests.
This commit is contained in:
Milorad FIlipović
committed by
GitHub
GitHub
parent
3a881be6c2
commit
ab74bade05
@@ -2,6 +2,7 @@
|
||||
<div
|
||||
:class="{
|
||||
'n8n-info-tip': true,
|
||||
[$style.infoTip]: true,
|
||||
[$style[theme]]: true,
|
||||
[$style[type]]: true,
|
||||
[$style.bold]: bold,
|
||||
@@ -10,11 +11,11 @@
|
||||
<n8n-tooltip
|
||||
v-if="type === 'tooltip'"
|
||||
:placement="tooltipPlacement"
|
||||
:popper-class="$style.tooltipPopper"
|
||||
:popperClass="$style.tooltipPopper"
|
||||
:disabled="type !== 'tooltip'"
|
||||
>
|
||||
<span :class="$style.iconText">
|
||||
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
|
||||
<span :class="$style.iconText" :style="{ color: iconData.color }">
|
||||
<n8n-icon :icon="iconData.icon" />
|
||||
</span>
|
||||
<template #content>
|
||||
<span>
|
||||
@@ -23,7 +24,7 @@
|
||||
</template>
|
||||
</n8n-tooltip>
|
||||
<span :class="$style.iconText" v-else>
|
||||
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
|
||||
<n8n-icon :icon="iconData.icon" />
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
@@ -48,7 +49,7 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: 'info',
|
||||
validator: (value: string): boolean =>
|
||||
['info', 'info-light', 'warning', 'danger'].includes(value),
|
||||
['info', 'info-light', 'warning', 'danger', 'success'].includes(value),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
@@ -64,10 +65,50 @@ export default defineComponent({
|
||||
default: 'top',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
iconData(): { icon: string; color: string } {
|
||||
switch (this.theme) {
|
||||
case 'info':
|
||||
return {
|
||||
icon: 'info-circle',
|
||||
color: '--color-text-light)',
|
||||
};
|
||||
case 'info-light':
|
||||
return {
|
||||
icon: 'info-circle',
|
||||
color: 'var(--color-foreground-dark)',
|
||||
};
|
||||
case 'warning':
|
||||
return {
|
||||
icon: 'exclamation-triangle',
|
||||
color: 'var(--color-warning)',
|
||||
};
|
||||
case 'danger':
|
||||
return {
|
||||
icon: 'exclamation-triangle',
|
||||
color: 'var(--color-danger)',
|
||||
};
|
||||
case 'success':
|
||||
return {
|
||||
icon: 'check-circle',
|
||||
color: 'var(--color-success)',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: 'info-circle',
|
||||
color: '--color-text-light)',
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.infoTip {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.base {
|
||||
font-size: var(--font-size-2xs);
|
||||
line-height: var(--font-size-s);
|
||||
@@ -92,7 +133,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
.tooltipPopper {
|
||||
composes: base;
|
||||
display: inline-flex;
|
||||
}
|
||||
@@ -101,20 +142,4 @@ export default defineComponent({
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-light {
|
||||
color: var(--color-foreground-dark);
|
||||
}
|
||||
|
||||
.info {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class="n8n-info-tip info note bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;
|
||||
exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class="n8n-info-tip infoTip info note bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;
|
||||
|
||||
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
|
||||
"<div class="n8n-info-tip info tooltip bold">
|
||||
"<div class="n8n-info-tip infoTip info tooltip bold">
|
||||
<n8n-tooltip-stub popperclass="tooltipPopper" role="tooltip" showafter="0" hideafter="200" autoclose="0" boundariespadding="0" gpuacceleration="true" offset="12" placement="top" popperoptions="[object Object]" strategy="absolute" effect="dark" enterable="true" pure="false" focusonshow="false" trapping="false" stoppoppermouseevent="true" virtualtriggering="false" content="" rawcontent="false" persistent="false" teleported="true" disabled="false" open="false" trigger="hover" triggerkeys="Enter,Space" arrowoffset="5" showarrow="true" justifybuttons="flex-end" buttons="" class=""></n8n-tooltip-stub>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-tooltip v-bind="{ ...$props, ...$attrs }" popper-class="n8n-tooltip">
|
||||
<el-tooltip v-bind="{ ...$props, ...$attrs }" :popperClass="$props.popperClass ?? 'n8n-tooltip'">
|
||||
<slot />
|
||||
<template #content>
|
||||
<slot name="content">
|
||||
|
||||
Reference in New Issue
Block a user