feat(editor): Add SSO fakedoor feature (#5076)

* feat: add sso fakedoor feature

* fix: update SSO fakeDoor location

* fix: remove unused code

packages/editor-ui/src/Interface.ts

@@ -1187,7 +1187,11 @@ export type IFakeDoor = {
 	uiLocations: IFakeDoorLocation[];
 };
 
-export type IFakeDoorLocation = 'settings' | 'credentialsModal' | 'workflowShareModal';
+export type IFakeDoorLocation =
+	| 'settings'
+	| 'settings/users'
+	| 'credentialsModal'
+	| 'workflowShareModal';
 
 export type INodeFilterType = 'Regular' | 'Trigger' | 'All';
 

packages/editor-ui/src/constants.ts

@@ -329,6 +329,7 @@ export enum VIEWS {
 export enum FAKE_DOOR_FEATURES {
 	ENVIRONMENTS = 'environments',
 	LOGGING = 'logging',
+	SSO = 'sso',
 }
 
 export const ONBOARDING_PROMPT_TIMEBOX = 14;

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

@@ -503,6 +503,10 @@
 	"fakeDoor.settings.environments.actionBox.title": "We’re working on environments (as a paid feature)",
 	"fakeDoor.settings.environments.actionBox.title.cloud": "We’re working on this",
 	"fakeDoor.settings.environments.actionBox.description": "If you'd like to be the first to hear when it's ready, join the list.",
+	"fakeDoor.settings.sso.name": "Single Sign-On",
+	"fakeDoor.settings.sso.actionBox.title": "We’re working on this (as a paid feature)",
+	"fakeDoor.settings.sso.actionBox.title.cloud": "We’re working on this",
+	"fakeDoor.settings.sso.actionBox.description": "SSO will offer a secured and convenient way to access n8n using your existing credentials (Google, Github, Keycloak…)",
 	"fakeDoor.settings.logging.name": "Logging",
 	"fakeDoor.settings.logging.infoText": "You can already write logs to a file or the console using environment variables. <a href=\"https://docs.n8n.io/hosting/logging/\" target=\"_blank\">More info</a>",
 	"fakeDoor.settings.logging.actionBox.title": "We're working on advanced logging (as a paid feature)",

packages/editor-ui/src/stores/ui.ts

@@ -145,6 +145,15 @@ export const useUIStore = defineStore(STORES.UI, {
 				linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=logging',
 				uiLocations: ['settings'],
 			},
+			{
+				id: FAKE_DOOR_FEATURES.SSO,
+				featureName: 'fakeDoor.settings.sso.name',
+				icon: 'key',
+				actionBoxTitle: 'fakeDoor.settings.sso.actionBox.title',
+				actionBoxDescription: 'fakeDoor.settings.sso.actionBox.description',
+				linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=sso',
+				uiLocations: ['settings/users'],
+			},
 		],
 		draggable: {
 			isDragging: false,

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

@@ -49,6 +49,12 @@
 				@reinvite="onReinvite"
 			/>
 		</div>
+		<feature-coming-soon
+			v-for="fakeDoorFeature in fakeDoorFeatures"
+			:key="fakeDoorFeature.id"
+			:featureId="fakeDoorFeature.id"
+			showTitle
+		/>
 	</div>
 </template>
 
@@ -56,7 +62,8 @@
 import { EnterpriseEditionFeature, INVITE_USER_MODAL_KEY, VIEWS } from '@/constants';
 
 import PageAlert from '../components/PageAlert.vue';
-import { IUser } from '@/Interface';
+import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
+import { IFakeDoor, IUser } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
 import { mapStores } from 'pinia';
@@ -68,6 +75,7 @@ export default mixins(showMessage).extend({
 	name: 'SettingsUsersView',
 	components: {
 		PageAlert,
+		FeatureComingSoon,
 	},
 	async mounted() {
 		if (!this.usersStore.showUMSetupWarning) {
@@ -79,6 +87,9 @@ export default mixins(showMessage).extend({
 		isSharingEnabled() {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
+		fakeDoorFeatures(): IFakeDoor[] {
+			return this.uiStore.getFakeDoorByLocation('settings/users');
+		},
 	},
 	methods: {
 		redirectToSetup() {
@@ -126,8 +137,6 @@ export default mixins(showMessage).extend({
 }
 
 .usersContainer {
-	padding-bottom: 100px;
-
 	> * {
 		margin-bottom: var(--spacing-2xs);
 	}