fix(editor): Update LDAP and Log streaming paywalls (n8n-io#6069)

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1218,9 +1218,9 @@
 	"settings.log-streaming": "Log Streaming",
 	"settings.log-streaming.heading": "Log Streaming",
 	"settings.log-streaming.add": "Add new destination",
-	"settings.log-streaming.actionBox.title": "Available on custom plans",
-	"settings.log-streaming.actionBox.description": "Log Streaming is available as a paid feature. Get in touch to learn more about it.",
-	"settings.log-streaming.actionBox.button": "Contact us",
+	"settings.log-streaming.actionBox.title": "Available on Enterprise plan",
+	"settings.log-streaming.actionBox.description": "Log Streaming is available as a paid feature. Learn more about it.",
+	"settings.log-streaming.actionBox.button": "See plans",
 	"settings.log-streaming.infoText": "Send logs to external endpoints of your choice. You can also write logs to a file or the console using environment variables. <a href=\"https://docs.n8n.io/hosting/logging/\" target=\"_blank\">More info</a>",
 	"settings.log-streaming.addFirstTitle": "Set up a destination to get started",
 	"settings.log-streaming.addFirst": "Add your first destination by clicking on the button and selecting a destination type.",
@@ -1690,6 +1690,7 @@
 	"contextual.upgradeLinkUrl.desktop": "https://n8n.io/pricing/?utm_source=n8n-internal&utm_medium=desktop",
 
 	"settings.ldap": "LDAP",
+	"settings.ldap.note": "LDAP allows users to authenticate with their centralized account. It's compatible with services that provide an LDAP interface like Active Directory, Okta and Jumpcloud.",
 	"settings.ldap.infoTip": "Learn more about <a href='https://docs.n8n.io/user-management/ldap/' target='_blank'>LDAP in the Docs</a>",
 	"settings.ldap.save": "Save connection",
 	"settings.ldap.connectionTestError": "Problem testing LDAP connection",
@@ -1714,9 +1715,9 @@
 	"settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText": "No",
 	"settings.ldap.confirmMessage.beforeSaveForm.headline": "Are you sure you want to disable LDAP login?",
 	"settings.ldap.confirmMessage.beforeSaveForm.message": "If you do so, all LDAP users will be converted to email users.",
-	"settings.ldap.disabled.title": "Available in custom plans",
-	"settings.ldap.disabled.description": "LDAP is available as a paid feature. Get in touch to learn more about it.",
-	"settings.ldap.disabled.buttonText": "Contact us",
+	"settings.ldap.disabled.title": "Available on Enterprise plan",
+	"settings.ldap.disabled.description": "LDAP is available as a paid feature. Learn more about it.",
+	"settings.ldap.disabled.buttonText": "See plans",
 	"settings.ldap.toast.sync.success": "Synchronization succeeded",
 	"settings.ldap.toast.connection.success": "Connection succeeded",
 	"settings.ldap.form.loginEnabled.label": "Enable LDAP Login",

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

@@ -6,17 +6,13 @@
 			</n8n-heading>
 		</div>
 
-		<n8n-info-tip type="note" theme="info-light" tooltipPlacement="right">
-			<div>
-				LDAP allows users to authenticate with their centralized account. It's compatible with
-				services that provide an LDAP interface like Active Directory, Okta and Jumpcloud.
-			</div>
-			<br />
+		<n8n-info-tip type="note" theme="info-light" tooltipPlacement="right" class="mb-l">
+			{{ $locale.baseText('settings.ldap.note') }}
 		</n8n-info-tip>
 		<n8n-action-box
 			:description="$locale.baseText('settings.ldap.disabled.description')"
 			:buttonText="$locale.baseText('settings.ldap.disabled.buttonText')"
-			@click="onContactUsClick"
+			@click="goToUpgrade"
 		>
 			<template #heading>
 				<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span>
@@ -157,7 +153,6 @@ import type {
 	IFormInputs,
 	IUser,
 } from '@/Interface';
-import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
 
 import humanizeDuration from 'humanize-duration';
@@ -167,36 +162,12 @@ import InfiniteLoading from 'vue-infinite-loading';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
 import { useSettingsStore } from '@/stores/settings';
-import { getLdapSynchronizations } from '@/api/ldap';
-import { N8N_CONTACT_EMAIL, N8N_SALES_EMAIL } from '@/constants';
+import { useUIStore } from '@/stores';
 import { createEventBus } from '@/event-bus';
 import type { N8nFormInputs } from 'n8n-design-system';
 
 type N8nFormInputsRef = InstanceType<typeof N8nFormInputs>;
 
-type FormValues = {
-	loginEnabled: boolean;
-	loginLabel: string;
-	serverAddress: string;
-	baseDn: string;
-	bindingType: string;
-	adminDn: string;
-	adminPassword: string;
-	loginId: string;
-	email: string;
-	lastName: string;
-	firstName: string;
-	ldapId: string;
-	synchronizationEnabled: boolean;
-	allowUnauthorizedCerts: boolean;
-	synchronizationInterval: number;
-	userFilter: string;
-	pageSize: number;
-	searchTimeout: number;
-	port: number;
-	connectionSecurity: string;
-};
-
 type tableRow = {
 	status: string;
 	startAt: string;
@@ -237,7 +208,7 @@ export default mixins(showMessage).extend({
 		await this.getLdapConfig();
 	},
 	computed: {
-		...mapStores(useUsersStore, useSettingsStore),
+		...mapStores(useUsersStore, useSettingsStore, useUIStore),
 		currentUser(): null | IUser {
 			return this.usersStore.currentUser;
 		},
@@ -246,9 +217,8 @@ export default mixins(showMessage).extend({
 		},
 	},
 	methods: {
-		onContactUsClick(event: MouseEvent): void {
-			const email = this.settingsStore.isCloudDeployment ? N8N_CONTACT_EMAIL : N8N_SALES_EMAIL;
-			location.href = `mailto:${email}`;
+		goToUpgrade() {
+			this.uiStore.goToUpgrade('ldap', 'upgrade-ldap');
 		},
 		cellClassStyle({ row, column }: { row: rowType; column: cellType }) {
 			if (column.property === 'status') {

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

@@ -6,7 +6,7 @@
 					{{ $locale.baseText(`settings.log-streaming.heading`) }}
 				</n8n-heading>
 				<template v-if="environment !== 'production'">
-					<strong>&nbsp;&nbsp;&nbsp;&nbsp;Disable License ({{ environment }})&nbsp;</strong>
+					<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
 					<el-switch v-model="disableLicense" size="large" data-test-id="disable-license-toggle" />
 				</template>
 			</div>
@@ -43,7 +43,7 @@
 				</div>
 			</template>
 			<template v-else>
-				<div :class="$style.actionBoxContainer" data-test-id="action-box-licensed">
+				<div data-test-id="action-box-licensed">
 					<n8n-action-box
 						:buttonText="$locale.baseText(`settings.log-streaming.add`)"
 						@click="addDestination"
@@ -63,11 +63,11 @@
 					</template>
 				</n8n-info-tip>
 			</div>
-			<div :class="$style.actionBoxContainer" data-test-id="action-box-unlicensed">
+			<div data-test-id="action-box-unlicensed">
 				<n8n-action-box
 					:description="$locale.baseText('settings.log-streaming.actionBox.description')"
 					:buttonText="$locale.baseText('settings.log-streaming.actionBox.button')"
-					@click="onContactUsClicked"
+					@click="goToUpgrade"
 				>
 					<template #heading>
 						<span v-html="$locale.baseText('settings.log-streaming.actionBox.title')" />
@@ -195,11 +195,8 @@ export default mixins().extend({
 			}
 			this.$forceUpdate();
 		},
-		onContactUsClicked() {
-			window.open('mailto:[email protected]', '_blank');
-			this.$telemetry.track('user clicked contact us button', {
-				feature: EnterpriseEditionFeature.LogStreaming,
-			});
+		goToUpgrade() {
+			this.uiStore.goToUpgrade('log-streaming', 'upgrade-log-streaming');
 		},
 		storeHasItems(): boolean {
 			return this.logStreamingStore.items && Object.keys(this.logStreamingStore.items).length > 0;

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

@@ -93,7 +93,7 @@ onBeforeMount(async () => {
 			</n8n-tooltip>
 		</div>
 		<n8n-info-tip>
-			<i18n :class="$style.count" path="settings.sso.info">
+			<i18n path="settings.sso.info">
 				<template #link>
 					<a href="https://docs.n8n.io/user-management/saml/" target="_blank">
 						{{ locale.baseText('settings.sso.info.link') }}
@@ -105,7 +105,6 @@ onBeforeMount(async () => {
 			<div :class="$style.group">
 				<label>{{ locale.baseText('settings.sso.settings.redirectUrl.label') }}</label>
 				<CopyInput
-					:class="$style.copyInput"
 					:value="redirectUrl"
 					:copy-button-text="locale.baseText('generic.clickToCopy')"
 					:toast-title="locale.baseText('settings.sso.settings.redirectUrl.copied')"
@@ -115,7 +114,6 @@ onBeforeMount(async () => {
 			<div :class="$style.group">
 				<label>{{ locale.baseText('settings.sso.settings.entityId.label') }}</label>
 				<CopyInput
-					:class="$style.copyInput"
 					:value="entityId"
 					:copy-button-text="locale.baseText('generic.clickToCopy')"
 					:toast-title="locale.baseText('settings.sso.settings.entityId.copied')"