diff --git a/packages/frontend/editor-ui/src/components/MainSidebar.vue b/packages/frontend/editor-ui/src/components/MainSidebar.vue index 08c49b80f5..83f0ceaaa4 100644 --- a/packages/frontend/editor-ui/src/components/MainSidebar.vue +++ b/packages/frontend/editor-ui/src/components/MainSidebar.vue @@ -6,7 +6,13 @@ import { onClickOutside, type VueInstance } from '@vueuse/core'; import { useI18n } from '@n8n/i18n'; import { N8nNavigationDropdown, N8nTooltip, N8nLink, N8nIconButton } from '@n8n/design-system'; import type { IMenuItem } from '@n8n/design-system'; -import { ABOUT_MODAL_KEY, RELEASE_NOTES_URL, VIEWS, WHATS_NEW_MODAL_KEY } from '@/constants'; +import { + ABOUT_MODAL_KEY, + EXPERIMENT_TEMPLATE_RECO_V2_KEY, + RELEASE_NOTES_URL, + VIEWS, + WHATS_NEW_MODAL_KEY, +} from '@/constants'; import { hasPermission } from '@/utils/rbac/permissions'; import { useCloudPlanStore } from '@/stores/cloudPlan.store'; import { useRootStore } from '@n8n/stores/useRootStore'; @@ -29,6 +35,7 @@ import Logo from '@/components/Logo/Logo.vue'; import VersionUpdateCTA from '@/components/VersionUpdateCTA.vue'; import { TemplateClickSource, trackTemplatesClick } from '@/utils/experiments'; import { I18nT } from 'vue-i18n'; +import { usePersonalizedTemplatesV2Store } from '@/experiments/templateRecoV2/stores/templateRecoV2.store'; const becomeTemplateCreatorStore = useBecomeTemplateCreatorStore(); const cloudPlanStore = useCloudPlanStore(); @@ -40,6 +47,7 @@ const usersStore = useUsersStore(); const versionsStore = useVersionsStore(); const workflowsStore = useWorkflowsStore(); const sourceControlStore = useSourceControlStore(); +const personalizedTemplatesV2Store = usePersonalizedTemplatesV2Store(); const { callDebounced } = useDebounce(); const externalHooks = useExternalHooks(); @@ -86,12 +94,23 @@ const mainMenuItems = computed(() => [ available: settingsStore.isCloudDeployment && hasPermission(['instanceOwner']), }, { - // Link to in-app templates, available if custom templates are enabled + // Link to templateRecoV2 modal, available when experiment is enabled id: 'templates', icon: 'package-open', label: i18n.baseText('mainSidebar.templates'), position: 'bottom', - available: settingsStore.isTemplatesEnabled && templatesStore.hasCustomTemplatesHost, + available: settingsStore.isTemplatesEnabled && personalizedTemplatesV2Store.isFeatureEnabled(), + }, + { + // Link to in-app templates, available if custom templates are enabled and experiment is disabled + id: 'templates', + icon: 'package-open', + label: i18n.baseText('mainSidebar.templates'), + position: 'bottom', + available: + settingsStore.isTemplatesEnabled && + templatesStore.hasCustomTemplatesHost && + !personalizedTemplatesV2Store.isFeatureEnabled(), route: { to: { name: VIEWS.TEMPLATES } }, }, { @@ -100,7 +119,10 @@ const mainMenuItems = computed(() => [ icon: 'package-open', label: i18n.baseText('mainSidebar.templates'), position: 'bottom', - available: settingsStore.isTemplatesEnabled && !templatesStore.hasCustomTemplatesHost, + available: + settingsStore.isTemplatesEnabled && + !templatesStore.hasCustomTemplatesHost && + !personalizedTemplatesV2Store.isFeatureEnabled(), link: { href: templatesStore.websiteTemplateRepositoryURL, target: '_blank', @@ -289,7 +311,13 @@ const toggleCollapse = () => { const handleSelect = (key: string) => { switch (key) { case 'templates': - if (settingsStore.isTemplatesEnabled && !templatesStore.hasCustomTemplatesHost) { + if (personalizedTemplatesV2Store.isFeatureEnabled()) { + uiStore.openModalWithData({ + name: EXPERIMENT_TEMPLATE_RECO_V2_KEY, + data: {}, + }); + trackTemplatesClick(TemplateClickSource.sidebarButton); + } else if (settingsStore.isTemplatesEnabled && !templatesStore.hasCustomTemplatesHost) { trackTemplatesClick(TemplateClickSource.sidebarButton); } break;