feat: Prevent webhook url takeover (#14783)

packages/frontend/editor-ui/src/components/WorkflowActivationConflictingWebhookModal.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { createEventBus } from '@n8n/utils/event-bus';
+import Modal from '@/components/Modal.vue';
+import { WORKFLOW_ACTIVATION_CONFLICTING_WEBHOOK_MODAL_KEY } from '@/constants';
+import { useUIStore } from '@/stores/ui.store';
+
+import { useRootStore } from '@/stores/root.store';
+import { computed } from 'vue';
+
+const modalBus = createEventBus();
+const uiStore = useUIStore();
+const rootStore = useRootStore();
+
+const props = defineProps<{
+	data: {
+		workflowName: string;
+		workflowId: string;
+		webhookPath: string;
+		node: string;
+	};
+}>();
+
+const { data } = props;
+
+const webhookUrl = computed(() => {
+	return rootStore.webhookUrl;
+});
+
+const workflowUrl = computed(() => {
+	return rootStore.urlBaseEditor + 'workflow/' + data.workflowId;
+});
+
+const onClick = async () => {
+	uiStore.closeModal(WORKFLOW_ACTIVATION_CONFLICTING_WEBHOOK_MODAL_KEY);
+};
+</script>
+
+<template>
+	<Modal
+		width="540px"
+		:name="WORKFLOW_ACTIVATION_CONFLICTING_WEBHOOK_MODAL_KEY"
+		title="Conflicting Webhook Path"
+		:event-bus="modalBus"
+		:center="true"
+	>
+		<template #content>
+			<n8n-callout theme="danger" data-test-id="conflicting-webhook-callout">
+				A webhook trigger '{{ data.node }}' in the workflow '{{ data.workflowName }}' uses a
+				conflicting URL path, so this workflow cannot be activated
+			</n8n-callout>
+			<div :class="$style.container">
+				<div>
+					<n8n-text color="text-base"> You can deactivate </n8n-text>
+					<n8n-link :to="workflowUrl" underline="true"> '{{ data.workflowName }}' </n8n-link>
+					<n8n-text color="text-base">
+						and activate this one, or adjust the following URL path in either workflow:
+					</n8n-text>
+				</div>
+			</div>
+			<div data-test-id="conflicting-webhook-path">
+				<n8n-text color="text-light"> {{ webhookUrl }}/</n8n-text>
+				<n8n-text color="text-dark" bold>
+					{{ data.webhookPath }}
+				</n8n-text>
+			</div>
+		</template>
+		<template #footer>
+			<n8n-button
+				label="Done"
+				size="medium"
+				float="right"
+				data-test-id="close-button"
+				@click="onClick"
+			/>
+		</template>
+	</Modal>
+</template>
+
+<style module lang="scss">
+.container {
+	margin-top: var(--spacing-m);
+	margin-bottom: var(--spacing-s);
+}
+</style>