feat(editor): Load fixed template list as experiment (#6632)

* feat(editor): Load fixed template list as experiment Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Improve templates loading Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * get rid of endResult message Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Do not lazy-load when fixedListExperiment Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
2024-12-26 05:04:05 -08:00 · 2023-07-10 17:11:42 +02:00 · 2023-07-10 17:11:42 +02:00 · e9966224ea
parent aa53c46367
commit e9966224ea
8 changed files with 71 additions and 59 deletions
--- a/packages/editor-ui/src/components/CollectionsCarousel.vue
+++ b/packages/editor-ui/src/components/CollectionsCarousel.vue
@ -31,7 +31,7 @@ import type { PropType } from 'vue';
 import type { ITemplatesCollection } from '@/Interface';
 import Card from '@/components/CollectionWorkflowCard.vue';
 import CollectionCard from '@/components/CollectionCard.vue';
-import VueAgile from 'vue-agile';
+import { VueAgile } from 'vue-agile';

 import { genericHelpers } from '@/mixins/genericHelpers';

--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@ -55,6 +55,7 @@ import { abbreviateNumber, filterTemplateNodes } from '@/utils';
 import type { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useTemplatesStore } from '@/stores/templates.store';
+import TimeAgo from '@/components/TimeAgo.vue';

 export default defineComponent({
 	name: 'TemplateDetails',
@ -72,6 +73,7 @@ export default defineComponent({
 	components: {
 		NodeIcon,
 		TemplateDetailsBlock,
+		TimeAgo,
 	},
 	computed: {
 		...mapStores(useTemplatesStore),
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.list" v-if="loading || workflows.length">
-		<div :class="$style.header">
+		<div :class="$style.header" v-if="!hideHeader">
 			<n8n-heading :bold="true" size="medium" color="text-light">
 				{{ $locale.baseText('templates.workflows') }}
 				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
@ -57,6 +57,10 @@ export default defineComponent({
 		totalWorkflows: {
 			type: Number,
 		},
+		hideHeader: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	mounted() {
 		if (this.infiniteScrollEnabled) {
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@ -526,10 +526,11 @@ export const KEEP_AUTH_IN_NDV_FOR_NODES = [
 export const MAIN_AUTH_FIELD_NAME = 'authentication';
 export const NODE_RESOURCE_FIELD_NAME = 'resource';

-export const TEMPLATE_EXPERIMENT = {
-	name: '002_remove_templates',
+export const TEMPLATES_EXPERIMENT = {
+	name: '008_template_variants',
 	control: 'control',
 	variant: 'variant',
+	variantIds: ['1932', '1930', '1931', '1933', '1750', '1748', '1435'],
 };

 export const ONBOARDING_EXPERIMENT = {
@ -538,7 +539,7 @@ export const ONBOARDING_EXPERIMENT = {
 	variant: 'variant',
 };

-export const EXPERIMENTS_TO_TRACK = [TEMPLATE_EXPERIMENT.name, ONBOARDING_EXPERIMENT.name];
+export const EXPERIMENTS_TO_TRACK = [TEMPLATES_EXPERIMENT.name, ONBOARDING_EXPERIMENT.name];

 export const NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND = [FILTER_NODE_TYPE];

--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@ -1462,7 +1462,6 @@
 	"templates.collections": "Collections",
 	"templates.collectionsNotFound": "Collection could not be found",
 	"templates.connectionWarning": "⚠️ There was a problem fetching workflow templates. Check your internet connection.",
-	"templates.endResult": "Share your own useful workflows through your <a href='https://n8n.io/dashboard' target='_blank'>n8n.io account</a>",
 	"templates.heading": "Workflow templates",
 	"templates.newButton": "New blank workflow",
 	"templates.noSearchResults": "Nothing found. Try adjusting your search to see more.",
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@ -33,7 +33,6 @@ import VariablesView from '@/views/VariablesView.vue';
 import type { IPermissions } from './Interface';
 import { LOGIN_STATUS, ROLE } from '@/utils';
 import type { RouteConfigSingleView } from 'vue-router/types/router';
-import { TEMPLATE_EXPERIMENT, VIEWS } from './constants';
 import { useSettingsStore } from './stores/settings.store';
 import { useTemplatesStore } from './stores/templates.store';
 import { useSSOStore } from './stores/sso.store';
@ -43,7 +42,7 @@ import SignoutView from '@/views/SignoutView.vue';
 import SamlOnboarding from '@/views/SamlOnboarding.vue';
 import SettingsSourceControl from './views/SettingsSourceControl.vue';
 import SettingsAuditLogs from './views/SettingsAuditLogs.vue';
-import { usePostHog } from './stores/posthog.store';
+import { VIEWS } from '@/constants';

 Vue.use(Router);

@ -63,12 +62,8 @@ interface IRouteConfig extends RouteConfigSingleView {

 function getTemplatesRedirect() {
 	const settingsStore = useSettingsStore();
-	const posthog = usePostHog();
 	const isTemplatesEnabled: boolean = settingsStore.isTemplatesEnabled;
-	if (
-		!posthog.isVariantEnabled(TEMPLATE_EXPERIMENT.name, TEMPLATE_EXPERIMENT.variant) &&
-		!isTemplatesEnabled
-	) {
+	if (!isTemplatesEnabled) {
 		return { name: VIEWS.NOT_FOUND };
 	}

--- a/packages/editor-ui/src/stores/posthog.store.ts
+++ b/packages/editor-ui/src/stores/posthog.store.ts
@ -10,7 +10,6 @@ import {
 	EXPERIMENTS_TO_TRACK,
 	LOCAL_STORAGE_EXPERIMENT_OVERRIDES,
 	ONBOARDING_EXPERIMENT,
-	TEMPLATE_EXPERIMENT,
 } from '@/constants';
 import { useTelemetryStore } from './telemetry.store';
 import { debounce } from 'lodash-es';
@ -134,7 +133,6 @@ export const usePostHog = defineStore('posthog', () => {
 			// does not need to be debounced really, but tracking does not fire without delay on page load
 			addExperimentOverrides();
 			trackExperimentsDebounced(featureFlags.value);
-			evaluateExperiments(featureFlags.value);
 		} else {
 			// depend on client side evaluation if serverside evaluation fails
 			window.posthog?.onFeatureFlags?.((keys: string[], map: FeatureFlags) => {
@ -143,21 +141,10 @@ export const usePostHog = defineStore('posthog', () => {

 				// must be debounced because it is called multiple times by posthog
 				trackExperimentsDebounced(featureFlags.value);
-				evaluateExperimentsDebounced(featureFlags.value);
 			});
 		}
 	};

-	const evaluateExperiments = (featureFlags: FeatureFlags) => {
-		Object.keys(featureFlags).forEach((name) => {
-			const variant = featureFlags[name];
-			if (name === TEMPLATE_EXPERIMENT.name && variant === TEMPLATE_EXPERIMENT.variant) {
-				settingsStore.disableTemplates();
-			}
-		});
-	};
-	const evaluateExperimentsDebounced = debounce(evaluateExperiments, 2000);
-
 	const trackExperiments = (featureFlags: FeatureFlags) => {
 		EXPERIMENTS_TO_TRACK.forEach((name) => trackExperiment(featureFlags, name));
 	};
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@ -18,7 +18,7 @@
 		</template>
 		<template #content>
 			<div :class="$style.contentWrapper">
-				<div :class="$style.filters">
+				<div :class="$style.filters" v-if="!isFixedListExperiment">
 					<TemplateFilters
 						:categories="templatesStore.allCategories"
 						:sortOnPopulate="areCategoriesPrepopulated"
@ -30,36 +30,42 @@
 					/>
 				</div>
 				<div :class="$style.search">
-					<n8n-input
-						:value="search"
-						:placeholder="$locale.baseText('templates.searchPlaceholder')"
-						@input="onSearchInput"
-						@blur="trackSearch"
-						clearable
-					>
-						<template #prefix>
-							<font-awesome-icon icon="search" />
-						</template>
-					</n8n-input>
-					<div :class="$style.carouselContainer" v-show="collections.length || loadingCollections">
-						<div :class="$style.header">
-							<n8n-heading :bold="true" size="medium" color="text-light">
-								{{ $locale.baseText('templates.collections') }}
-								<span v-if="!loadingCollections" v-text="`(${collections.length})`" />
-							</n8n-heading>
-						</div>
+					<template v-if="!isFixedListExperiment">
+						<n8n-input
+							:value="search"
+							:placeholder="$locale.baseText('templates.searchPlaceholder')"
+							@input="onSearchInput"
+							@blur="trackSearch"
+							clearable
+						>
+							<template #prefix>
+								<font-awesome-icon icon="search" />
+							</template>
+						</n8n-input>
+						<div
+							:class="$style.carouselContainer"
+							v-show="collections.length || loadingCollections"
+						>
+							<div :class="$style.header">
+								<n8n-heading :bold="true" size="medium" color="text-light">
+									{{ $locale.baseText('templates.collections') }}
+									<span v-if="!loadingCollections" v-text="`(${collections.length})`" />
+								</n8n-heading>
+							</div>

-						<CollectionsCarousel
-							:collections="collections"
-							:loading="loadingCollections"
-							@openCollection="onOpenCollection"
-						/>
-					</div>
+							<CollectionsCarousel
+								:collections="collections"
+								:loading="loadingCollections"
+								@openCollection="onOpenCollection"
+							/>
+						</div>
+					</template>
 					<TemplateList
-						:infinite-scroll-enabled="true"
+						:infinite-scroll-enabled="!isFixedListExperiment"
 						:loading="loadingWorkflows"
 						:total-workflows="totalWorkflows"
-						:workflows="workflows"
+						:workflows="isFixedListExperiment ? fixedTemplatesList : workflows"
+						:hide-header="isFixedListExperiment"
 						@loadMore="onLoadMore"
 						@openTemplate="onOpenTemplate"
 					/>
@ -91,13 +97,14 @@ import type {
 } from '@/Interface';
 import type { IDataObject } from 'n8n-workflow';
 import { setPageTitle } from '@/utils';
-import { VIEWS } from '@/constants';
+import { TEMPLATES_EXPERIMENT, VIEWS } from '@/constants';
 import { debounceHelper } from '@/mixins/debounce';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useToast } from '@/composables';
+import { usePostHog } from '@/stores/posthog.store';

 interface ISearchEvent {
 	search_string: string;
@ -135,7 +142,18 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		...mapStores(useSettingsStore, useTemplatesStore, useUIStore, useUsersStore),
+		...mapStores(useSettingsStore, useTemplatesStore, useUIStore, useUsersStore, usePostHog),
+		isFixedListExperiment() {
+			return this.posthogStore.isVariantEnabled(
+				TEMPLATES_EXPERIMENT.name,
+				TEMPLATES_EXPERIMENT.variant,
+			);
+		},
+		fixedTemplatesList() {
+			return TEMPLATES_EXPERIMENT.variantIds
+				.map((id) => this.templatesStore.workflows[id])
+				.filter(Boolean);
+		},
 		totalWorkflows(): number {
 			return this.templatesStore.getSearchedWorkflowsTotal(this.query);
 		},
@ -149,9 +167,6 @@ export default defineComponent({
 			if (this.loadingWorkflows) {
 				return null;
 			}
-			if (this.workflows.length && this.workflows.length >= this.totalWorkflows) {
-				return this.$locale.baseText('templates.endResult');
-			}
 			if (
 				!this.loadingCollections &&
 				this.workflows.length === 0 &&
@ -391,6 +406,15 @@ export default defineComponent({
 		}, 100);
 	},
 	async created() {
+		if (this.isFixedListExperiment) {
+			// Templates are lazy-loaded so we need to make sure the fixed ids are loaded
+			TEMPLATES_EXPERIMENT.variantIds.forEach(async (templateId) =>
+				this.templatesStore.fetchTemplateById(templateId),
+			);
+			// Categorization and filtering based on search is not supported if fixed list is enabled
+			return;
+		}
+
 		if (this.$route.query.search && typeof this.$route.query.search === 'string') {
 			this.search = this.$route.query.search;
 		}
@ -423,11 +447,11 @@ export default defineComponent({
 .filters {
 	width: 200px;
 	margin-bottom: var(--spacing-xl);
+	margin-right: var(--spacing-2xl);
 }

 .search {
 	width: 100%;
-	padding-left: var(--spacing-2xl);

 	> * {
 		margin-bottom: var(--spacing-l);