github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-31 16:57:08 +02:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity Graph

fix(editor): Show templates link on empty canvas when ai builder is enabled (no-changelog) (#21818)

Browse Source
This commit is contained in:
Svetoslav Dekov 2025-11-14 17:31:47 +02:00 committed by GitHub
parent 69631646e1
commit a3dc4a7a54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 52 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/CanvasNodeChoicePrompt.vue
View File

@ -1,20 +1,42 @@
<script setup lang="ts">
import { NODE_CREATOR_OPEN_SOURCES } from '@/app/constants';
import {
NODE_CREATOR_OPEN_SOURCES,
VIEWS,
EXPERIMENT_TEMPLATES_DATA_QUALITY_KEY,
} from '@/app/constants';
import {
isExtraTemplateLinksExperimentEnabled,
TemplateClickSource,
trackTemplatesClick,
} from '@/experiments/utils';
import { useNodeCreatorStore } from '@/features/shared/nodeCreator/nodeCreator.store';
import { useChatPanelStore } from '@/features/ai/assistant/chatPanel.store';
import { useSettingsStore } from '@/app/stores/settings.store';
import { useTemplatesStore } from '@/features/workflows/templates/templates.store';
import { useI18n } from '@n8n/i18n';
import { computed } from 'vue';
import { N8nIcon } from '@n8n/design-system';
import { useRouter } from 'vue-router';
import { N8nIcon, N8nLink } from '@n8n/design-system';
import { useUIStore } from '@/app/stores/ui.store';
import { useTemplatesDataQualityStore } from '@/experiments/templatesDataQuality/stores/templatesDataQuality.store';
const nodeCreatorStore = useNodeCreatorStore();
const chatPanelStore = useChatPanelStore();
const i18n = useI18n();
const settingsStore = useSettingsStore();
const templatesStore = useTemplatesStore();
const router = useRouter();
const uiStore = useUIStore();
const templatesDataQualityStore = useTemplatesDataQualityStore();
const isChatWindowOpen = computed(
() => chatPanelStore.isOpen && chatPanelStore.isBuilderModeActive,
);
const templatesLinkEnabled = computed(() => {
return isExtraTemplateLinksExperimentEnabled() && settingsStore.isTemplatesEnabled;
});
const onAddFirstStepClick = () => {
if (nodeCreatorStore.isCreateNodeActive) {
nodeCreatorStore.isCreateNodeActive = false;
@ -28,6 +50,21 @@ const onAddFirstStepClick = () => {
async function onBuildWithAIClick() {
await chatPanelStore.toggle({ mode: 'builder' });
}
async function onClickTemplatesLink() {
trackTemplatesClick(TemplateClickSource.emptyWorkflowLink);
if (templatesStore.hasCustomTemplatesHost) {
await router.push({ name: VIEWS.TEMPLATES });
return;
}
if (templatesDataQualityStore.isFeatureEnabled()) {
uiStore.openModal(EXPERIMENT_TEMPLATES_DATA_QUALITY_KEY);
return;
}
window.open(templatesStore.websiteTemplateRepositoryURL, '_blank');
}
</script>
<template>
@ -50,6 +87,15 @@ async function onBuildWithAIClick() {
</div>
<p :class="$style.label">
{{ i18n.baseText('nodeView.canvasAddButton.addFirstStep') }}
<N8nLink
v-if="templatesLinkEnabled"
:underline="true"
size="small"
data-test-id="canvas-template-link"
@click="onClickTemplatesLink"
>
{{ i18n.baseText('nodeView.templateLink') }}
</N8nLink>
</p>
</div>
@ -80,7 +126,7 @@ async function onBuildWithAIClick() {
.choicePrompt {
display: flex;
flex-direction: row;
align-items: center;
align-items: flex-start;
justify-content: center;
gap: var(--spacing--lg);
}
@ -119,6 +165,8 @@ async function onBuildWithAIClick() {
color: var(--color--text--shade-1);
margin-top: var(--spacing--2xs);
text-align: center;
display: flex;
flex-direction: column;
}
.orDivider {