Files
n8n-enterprise-unlocked/packages/frontend/editor-ui/src/components/WorkflowActivationConflictingWebhookModal.vue
2025-06-24 13:01:23 +02:00

85 lines
2.2 KiB
Vue

<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 '@n8n/stores/useRootStore';
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>