feat(editor): Show a notice before deleting annotated executions (#10934)

packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue

@@ -2,7 +2,11 @@
 import { watch, computed, ref, onMounted } from 'vue';
 import ExecutionsFilter from '@/components/executions/ExecutionsFilter.vue';
 import GlobalExecutionsListItem from '@/components/executions/global/GlobalExecutionsListItem.vue';
-import { MODAL_CONFIRM } from '@/constants';
+import {
+	EnterpriseEditionFeature,
+	EXECUTION_ANNOTATION_EXPERIMENT,
+	MODAL_CONFIRM,
+} from '@/constants';
 import { useToast } from '@/composables/useToast';
 import { useMessage } from '@/composables/useMessage';
 import { useI18n } from '@/composables/useI18n';
@@ -13,6 +17,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 import type { PermissionsRecord } from '@/permissions';
 import { getResourcePermissions } from '@/permissions';
+import { usePostHog } from '@/stores/posthog.store';
+import { useSettingsStore } from '@/stores/settings.store';
 
 const props = withDefaults(
 	defineProps<{
@@ -36,6 +42,8 @@ const i18n = useI18n();
 const telemetry = useTelemetry();
 const workflowsStore = useWorkflowsStore();
 const executionsStore = useExecutionsStore();
+const posthogStore = usePostHog();
+const settingsStore = useSettingsStore();
 
 const isMounted = ref(false);
 const allVisibleSelected = ref(false);
@@ -63,6 +71,12 @@ const workflows = computed<IWorkflowDb[]>(() => {
 	];
 });
 
+const isAnnotationEnabled = computed(
+	() =>
+		settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.AdvancedExecutionFilters] &&
+		posthogStore.isFeatureEnabled(EXECUTION_ANNOTATION_EXPERIMENT),
+);
+
 watch(
 	() => props.executions,
 	() => {
@@ -109,10 +123,18 @@ function toggleSelectExecution(execution: ExecutionSummary) {
 }
 
 async function handleDeleteSelected() {
-	const deleteExecutions = await message.confirm(
+	// Prepend the message with a note about annotations if the feature is enabled
+	const confirmationText = [
+		isAnnotationEnabled.value && i18n.baseText('executionsList.confirmMessage.annotationsNote'),
 		i18n.baseText('executionsList.confirmMessage.message', {
 			interpolate: { count: selectedCount.value.toString() },
 		}),
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	const deleteExecutions = await message.confirm(
+		confirmationText,
 		i18n.baseText('executionsList.confirmMessage.headline'),
 		{
 			type: 'warning',
@@ -258,6 +280,26 @@ async function stopExecution(execution: ExecutionSummary) {
 }
 
 async function deleteExecution(execution: ExecutionSummary) {
+	const hasAnnotation =
+		!!execution.annotation && (execution.annotation.vote || execution.annotation.tags.length > 0);
+
+	// Show a confirmation dialog if the execution has an annotation
+	if (hasAnnotation) {
+		const deleteConfirmed = await message.confirm(
+			i18n.baseText('executionsList.confirmMessage.annotatedExecutionMessage'),
+			i18n.baseText('executionDetails.confirmMessage.headline'),
+			{
+				type: 'warning',
+				confirmButtonText: i18n.baseText('executionDetails.confirmMessage.confirmButtonText'),
+				cancelButtonText: '',
+			},
+		);
+
+		if (deleteConfirmed !== MODAL_CONFIRM) {
+			return;
+		}
+	}
+
 	try {
 		await executionsStore.deleteExecutions({ ids: [execution.id] });
 

packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue

@@ -72,9 +72,23 @@ const isAnnotationEnabled = computed(
 		posthogStore.isFeatureEnabled(EXECUTION_ANNOTATION_EXPERIMENT),
 );
 
+const hasAnnotation = computed(
+	() =>
+		!!props.execution?.annotation &&
+		(props.execution?.annotation.vote || props.execution?.annotation.tags.length > 0),
+);
+
 async function onDeleteExecution(): Promise<void> {
-	const deleteConfirmed = await message.confirm(
+	// Prepend the message with a note about annotations if they exist
+	const confirmationText = [
+		hasAnnotation.value && locale.baseText('executionDetails.confirmMessage.annotationsNote'),
 		locale.baseText('executionDetails.confirmMessage.message'),
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	const deleteConfirmed = await message.confirm(
+		confirmationText,
 		locale.baseText('executionDetails.confirmMessage.headline'),
 		{
 			type: 'warning',

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

@@ -649,6 +649,7 @@
 	"executionDetails.confirmMessage.confirmButtonText": "Yes, delete",
 	"executionDetails.confirmMessage.headline": "Delete Execution?",
 	"executionDetails.confirmMessage.message": "Are you sure that you want to delete the current execution?",
+	"executionDetails.confirmMessage.annotationsNote": "By deleting this you will also remove the associated annotation data.",
 	"executionDetails.deleteExecution": "Delete this execution",
 	"executionDetails.executionFailed": "Execution failed",
 	"executionDetails.executionFailed.recoveredNodeTitle": "Can’t show data",
@@ -689,6 +690,8 @@
 	"executionsList.confirmMessage.confirmButtonText": "Yes, delete",
 	"executionsList.confirmMessage.headline": "Delete Executions?",
 	"executionsList.confirmMessage.message": "Are you sure that you want to delete the {count} selected execution(s)?",
+	"executionsList.confirmMessage.annotationsNote": "By deleting these executions you will also remove the associated annotation data.",
+	"executionsList.confirmMessage.annotatedExecutionMessage": "By deleting this you will also remove the associated annotation data. Are you sure that you want to delete the selected execution?",
 	"executionsList.clearSelection": "Clear selection",
 	"executionsList.error": "Error",
 	"executionsList.filters": "Filters",