From b791677ffa8c82161c4c40b65bc62d93f2e7bc9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= Date: Mon, 24 Feb 2025 16:32:54 +0100 Subject: [PATCH] fix(editor): Ai 672 minor UI fixes on evaluation creation (#13461) --- .../src/components/N8nInfoTip/InfoTip.vue | 3 + .../EditDefinition/BlockArrow.vue | 113 +------ .../EditDefinition/EvaluationStep.vue | 239 +++++++------- .../EditDefinition/MetricsInput.vue | 71 ++-- .../EditDefinition/sections/ConfigSection.vue | 312 +++++------------- .../ListDefinition/TestItem.vue | 2 +- .../TestDefinition/tests/MetricsInput.test.ts | 12 +- .../src/plugins/i18n/locales/en.json | 5 +- .../TestDefinition/TestDefinitionEditView.vue | 25 +- .../TestDefinition/TestDefinitionListView.vue | 11 +- .../tests/TestDefinitionListView.test.ts | 14 +- 11 files changed, 271 insertions(+), 536 deletions(-) diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue index 04ba27ae5f..097babef37 100644 --- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue +++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue @@ -25,6 +25,7 @@ interface InfoTipProps { type?: (typeof TYPE)[number]; bold?: boolean; tooltipPlacement?: Placement; + enterable?: boolean; } defineOptions({ name: 'N8nInfoTip' }); @@ -33,6 +34,7 @@ const props = withDefaults(defineProps(), { type: 'note', bold: true, tooltipPlacement: 'top', + enterable: true, }); const iconData = computed<{ icon: IconMap[keyof IconMap]; color: IconColor }>(() => { @@ -60,6 +62,7 @@ const iconData = computed<{ icon: IconMap[keyof IconMap]; color: IconColor }>(() :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'" + :enterable > diff --git a/packages/editor-ui/src/components/TestDefinition/EditDefinition/BlockArrow.vue b/packages/editor-ui/src/components/TestDefinition/EditDefinition/BlockArrow.vue index 6759e7b155..b567aef13e 100644 --- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/BlockArrow.vue +++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/BlockArrow.vue @@ -1,125 +1,32 @@ - + diff --git a/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationStep.vue b/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationStep.vue index 5ce9b0792a..1988369e33 100644 --- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationStep.vue +++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/EvaluationStep.vue @@ -1,23 +1,23 @@ diff --git a/packages/editor-ui/src/components/TestDefinition/EditDefinition/MetricsInput.vue b/packages/editor-ui/src/components/TestDefinition/EditDefinition/MetricsInput.vue index fc1dd125e5..7a8c2cbc97 100644 --- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/MetricsInput.vue +++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/MetricsInput.vue @@ -2,7 +2,7 @@ import { useTemplateRef, nextTick } from 'vue'; import type { TestMetricRecord } from '@/api/testDefinition.ee'; import { useI18n } from '@/composables/useI18n'; -import { N8nInput } from 'n8n-design-system'; +import { N8nInput, N8nButton, N8nIconButton } from 'n8n-design-system'; export interface MetricsInputProps { modelValue: Array>; @@ -38,62 +38,33 @@ function onDeleteMetric(metric: Partial, index: number) { diff --git a/packages/editor-ui/src/components/TestDefinition/EditDefinition/sections/ConfigSection.vue b/packages/editor-ui/src/components/TestDefinition/EditDefinition/sections/ConfigSection.vue index d337af011c..ae1d497ace 100644 --- a/packages/editor-ui/src/components/TestDefinition/EditDefinition/sections/ConfigSection.vue +++ b/packages/editor-ui/src/components/TestDefinition/EditDefinition/sections/ConfigSection.vue @@ -9,11 +9,11 @@ import { useI18n } from '@/composables/useI18n'; import { useMessage } from '@/composables/useMessage'; import { NODE_PINNING_MODAL_KEY } from '@/constants'; import type { ITag, ModalState } from '@/Interface'; +import { N8nButton, N8nTag, N8nText } from 'n8n-design-system'; import type { IPinData } from 'n8n-workflow'; import { computed, ref } from 'vue'; const props = defineProps<{ - showConfig: boolean; tagsById: Record; isLoading: boolean; examplePinnedData?: IPinData; @@ -33,14 +33,6 @@ const emit = defineEmits<{ }>(); const locale = useI18n(); -const activeTooltip = ref(null); -const tooltipPosition = ref<{ - x: number; - y: number; - width: number; - height: number; - right: number; -} | null>(null); const tags = defineModel('tags', { required: true }); const renameTag = async () => { @@ -78,55 +70,29 @@ const mockedNodes = defineModel('mockedNodes const nodePinningModal = ref(null); -const selectedTag = computed(() => { - return props.tagsById[tags.value.value[0]] ?? {}; -}); +const selectedTag = computed(() => props.tagsById[tags.value.value[0]] ?? {}); function openExecutionsView() { emit('openExecutionsViewForTag'); } - -function showTooltip(event: MouseEvent, tooltip: string) { - const container = event.target as HTMLElement; - const containerRect = container.getBoundingClientRect(); - - activeTooltip.value = tooltip; - tooltipPosition.value = { - x: containerRect.right, - y: containerRect.top, - width: containerRect.width, - height: containerRect.height, - right: window.innerWidth, - }; -} - -function hideTooltip() { - activeTooltip.value = null; - tooltipPosition.value = null; -} diff --git a/packages/editor-ui/src/components/TestDefinition/tests/MetricsInput.test.ts b/packages/editor-ui/src/components/TestDefinition/tests/MetricsInput.test.ts index 60cafd2baa..7d6545a5c5 100644 --- a/packages/editor-ui/src/components/TestDefinition/tests/MetricsInput.test.ts +++ b/packages/editor-ui/src/components/TestDefinition/tests/MetricsInput.test.ts @@ -19,7 +19,7 @@ describe('MetricsInput', () => { it('should render correctly with initial metrics', () => { const { getAllByPlaceholderText } = renderComponent({ props }); - const inputs = getAllByPlaceholderText('Enter metric name'); + const inputs = getAllByPlaceholderText('e.g. latency'); expect(inputs).toHaveLength(2); expect(inputs[0]).toHaveValue('Metric 1'); expect(inputs[1]).toHaveValue('Metric 2'); @@ -31,7 +31,7 @@ describe('MetricsInput', () => { modelValue: [{ name: '' }], }, }); - const inputs = getAllByPlaceholderText('Enter metric name'); + const inputs = getAllByPlaceholderText('e.g. latency'); await userEvent.type(inputs[0], 'Updated Metric 1'); // Every character typed triggers an update event. Let's check the last emission. @@ -88,7 +88,7 @@ describe('MetricsInput', () => { modelValue: [{ name: '' }], }, }); - const inputs = getAllByPlaceholderText('Enter metric name'); + const inputs = getAllByPlaceholderText('e.g. latency'); await userEvent.type(inputs[0], 'ABC'); const allEmits = emitted('update:modelValue'); @@ -117,7 +117,7 @@ describe('MetricsInput', () => { const { getAllByPlaceholderText } = renderComponent({ props: { modelValue: [{ name: '' }] }, }); - const updatedInputs = getAllByPlaceholderText('Enter metric name'); + const updatedInputs = getAllByPlaceholderText('e.g. latency'); expect(updatedInputs).toHaveLength(1); }); @@ -125,7 +125,7 @@ describe('MetricsInput', () => { const { getAllByPlaceholderText, getAllByRole, rerender, emitted } = renderComponent({ props, }); - const inputs = getAllByPlaceholderText('Enter metric name'); + const inputs = getAllByPlaceholderText('e.g. latency'); expect(inputs).toHaveLength(2); const deleteButtons = getAllByRole('button', { name: '' }); @@ -135,7 +135,7 @@ describe('MetricsInput', () => { expect(emitted('deleteMetric')[0]).toEqual([props.modelValue[0]]); await rerender({ modelValue: [{ name: 'Metric 2' }] }); - const updatedInputs = getAllByPlaceholderText('Enter metric name'); + const updatedInputs = getAllByPlaceholderText('e.g. latency'); expect(updatedInputs).toHaveLength(1); expect(updatedInputs[0]).toHaveValue('Metric 2'); }); diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json index 83eecad282..bd8b4d01c2 100644 --- a/packages/editor-ui/src/plugins/i18n/locales/en.json +++ b/packages/editor-ui/src/plugins/i18n/locales/en.json @@ -51,6 +51,7 @@ "generic.tag_plural": "Tags", "generic.tag": "Tag | {count} Tags", "generic.tests": "Tests", + "generic.optional": "optional", "generic.or": "or", "generic.clickToCopy": "Click to copy", "generic.copiedToClipboard": "Copied to clipboard", @@ -2819,7 +2820,7 @@ "testDefinition.edit.metricsTitle": "Metrics", "testDefinition.edit.metricsHelpText": "The output field of the last node in the evaluation workflow. Metrics will be averaged across all test cases.", "testDefinition.edit.metricsFields": "Output fields to use as metrics", - "testDefinition.edit.metricsPlaceholder": "Enter metric name", + "testDefinition.edit.metricsPlaceholder": "e.g. latency", "testDefinition.edit.metricsNew": "New metric", "testDefinition.edit.selectTag": "Select tag...", "testDefinition.edit.tagsHelpText": "Executions with this tag will be added as test cases to this test.", @@ -2862,7 +2863,7 @@ "testDefinition.edit.pastRuns.total": "No runs | Past run ({count}) | Past runs ({count})", "testDefinition.edit.nodesPinning.pinButtonTooltip": "Use benchmark data for this node during evaluation execution", "testDefinition.edit.saving": "Saving...", - "testDefinition.edit.saved": "Changes saved", + "testDefinition.edit.saved": "Test saved", "testDefinition.list.testDeleted": "Test deleted", "testDefinition.list.tests": "Tests", "testDefinition.list.evaluations": "Evaluation", diff --git a/packages/editor-ui/src/views/TestDefinition/TestDefinitionEditView.vue b/packages/editor-ui/src/views/TestDefinition/TestDefinitionEditView.vue index d321ad062a..5e191f24d6 100644 --- a/packages/editor-ui/src/views/TestDefinition/TestDefinitionEditView.vue +++ b/packages/editor-ui/src/views/TestDefinition/TestDefinitionEditView.vue @@ -173,13 +173,13 @@ function onEvaluationWorkflowCreated(workflowId: string) {