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,
 			};