feat: Change desktop UM experience (#5312)

* refactor: Hide prompt for desktop

* feat: add email field to personalization modal

* fix: update survey interfaces

* chore: enable personalization survey email key display condition

* feat: add users page upsell for desktop client

* feat: disable UM on desktop where possible

* refactor: Have a single function to decide whether UM is enabled

* feat: update community nodes upsell link

---------

Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: krynble <omar@n8n.io>
Co-authored-by: freyamade <freya@n8n.io>

packages/editor-ui/src/views/SettingsCommunityNodesView.vue

@@ -35,14 +35,10 @@
 			<n8n-action-box
 				:heading="$locale.baseText('settings.communityNodes.empty.title')"
 				:description="getEmptyStateDescription"
-				:buttonText="
-					shouldShowInstallButton
-						? $locale.baseText('settings.communityNodes.empty.installPackageLabel')
-						: ''
-				"
+				:buttonText="getEmptyStateButtonText"
 				:calloutText="actionBoxConfig.calloutText"
 				:calloutTheme="actionBoxConfig.calloutTheme"
-				@click="openInstallModal"
+				@click="onClickEmptyStateButton"
 			/>
 		</div>
 		<div :class="$style.cardsContainer" v-else>
@@ -70,6 +66,7 @@ import { useCommunityNodesStore } from '@/stores/communityNodes';
 import { useUIStore } from '@/stores/ui';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
+import { BaseTextKey } from '@/plugins/i18n';
 
 const PACKAGE_COUNT_THRESHOLD = 31;
 
@@ -129,8 +126,13 @@ export default mixins(showMessage).extend({
 	},
 	computed: {
 		...mapStores(useCommunityNodesStore, useSettingsStore, useUIStore),
-		getEmptyStateDescription() {
+		getEmptyStateDescription(): string {
 			const packageCount = this.communityNodesStore.availablePackageCount;
+
+			if (this.settingsStore.isDesktopDeployment) {
+				return this.$locale.baseText('contextual.communityNodes.unavailable.description.desktop');
+			}
+
 			return packageCount < PACKAGE_COUNT_THRESHOLD
 				? this.$locale.baseText('settings.communityNodes.empty.description.no-packages', {
 						interpolate: {
@@ -144,18 +146,23 @@ export default mixins(showMessage).extend({
 						},
 				  });
 		},
-		shouldShowInstallButton() {
-			return !this.settingsStore.isDesktopDeployment && this.settingsStore.isNpmAvailable;
-		},
-		actionBoxConfig() {
+		getEmptyStateButtonText(): string {
 			if (this.settingsStore.isDesktopDeployment) {
-				return {
-					calloutText: this.$locale.baseText('settings.communityNodes.notAvailableOnDesktop'),
-					calloutTheme: 'warning',
-					hideButton: true,
-				};
+				return this.$locale.baseText('contextual.communityNodes.unavailable.button.desktop');
 			}
 
+			return this.shouldShowInstallButton
+				? this.$locale.baseText('settings.communityNodes.empty.installPackageLabel')
+				: '';
+		},
+		shouldShowInstallButton(): boolean {
+			return this.settingsStore.isDesktopDeployment || this.settingsStore.isNpmAvailable;
+		},
+		actionBoxConfig(): {
+			calloutText: string;
+			calloutTheme: 'warning' | string;
+			hideButton: boolean;
+		} {
 			if (!this.settingsStore.isNpmAvailable) {
 				return {
 					calloutText: this.$locale.baseText('settings.communityNodes.npmUnavailable.warning', {
@@ -184,7 +191,21 @@ export default mixins(showMessage).extend({
 		},
 	},
 	methods: {
-		openInstallModal(event: MouseEvent) {
+		onClickEmptyStateButton(): void {
+			if (this.settingsStore.isDesktopDeployment) {
+				return this.goToUpgrade();
+			}
+
+			this.openInstallModal();
+		},
+		goToUpgrade(): void {
+			const linkUrl = `${this.$locale.baseText(
+				'contextual.upgradeLinkUrl.desktop',
+			)}&utm_campaign=upgrade-community-nodes&selfHosted=true`;
+
+			window.open(linkUrl, '_blank');
+		},
+		openInstallModal(): void {
 			const telemetryPayload = {
 				is_empty_state: this.communityNodesStore.getInstalledPackages.length === 0,
 			};

packages/editor-ui/src/views/SettingsUsersView.vue

@@ -10,7 +10,23 @@
 				/>
 			</div>
 		</div>
-		<div v-if="usersStore.showUMSetupWarning" :class="$style.setupInfoContainer">
+		<div v-if="!settingsStore.isUserManagementEnabled" :class="$style.setupInfoContainer">
+			<n8n-action-box
+				:heading="
+					$locale.baseText(uiStore.contextBasedTranslationKeys.users.settings.unavailable.title)
+				"
+				:description="
+					$locale.baseText(
+						uiStore.contextBasedTranslationKeys.users.settings.unavailable.description,
+					)
+				"
+				:buttonText="
+					$locale.baseText(uiStore.contextBasedTranslationKeys.users.settings.unavailable.button)
+				"
+				@click="goToUpgrade"
+			/>
+		</div>
+		<div v-else-if="usersStore.showUMSetupWarning" :class="$style.setupInfoContainer">
 			<n8n-action-box
 				:heading="$locale.baseText('settings.users.setupToInviteUsers')"
 				:buttonText="$locale.baseText('settings.users.setupMyAccount')"
@@ -53,6 +69,8 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
+import { BaseTextKey } from '@/plugins/i18n';
+import { useUsageStore } from '@/stores/usage';
 
 export default mixins(showMessage, copyPaste).extend({
 	name: 'SettingsUsersView',
@@ -66,7 +84,7 @@ export default mixins(showMessage, copyPaste).extend({
 		}
 	},
 	computed: {
-		...mapStores(useSettingsStore, useUIStore, useUsersStore),
+		...mapStores(useSettingsStore, useUIStore, useUsersStore, useUsageStore),
 		isSharingEnabled() {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
@@ -135,6 +153,19 @@ export default mixins(showMessage, copyPaste).extend({
 				});
 			}
 		},
+		goToUpgrade() {
+			const linkUrlTranslationKey = this.uiStore.contextBasedTranslationKeys
+				.upgradeLinkUrl as BaseTextKey;
+			let linkUrl = this.$locale.baseText(linkUrlTranslationKey);
+
+			if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
+				linkUrl = `${this.usageStore.viewPlansUrl}&source=users`;
+			} else if (linkUrlTranslationKey.endsWith('.desktop')) {
+				linkUrl = `${linkUrl}&utm_campaign=upgrade-users`;
+			}
+
+			window.open(linkUrl, '_blank');
+		},
 	},
 });
 </script>