feat: Handle sharing features when user skips owner setup (#4850)

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -85,6 +85,7 @@
 						:credentialData="credentialData"
 						:credentialId="credentialId"
 						:credentialPermissions="credentialPermissions"
+						:modalBus="modalBus"
 						@change="onChangeSharedWith"
 					/>
 				</enterprise-edition>

packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue

@@ -1,35 +1,44 @@
 <template>
 	<div :class="$style.container">
-		<n8n-info-tip :bold="false" class="mb-s">
-			<template v-if="credentialPermissions.isOwner">
-				{{ $locale.baseText('credentialEdit.credentialSharing.info.owner') }}
-			</template>
-			<template v-else>
-				{{ $locale.baseText('credentialEdit.credentialSharing.info.sharee', { interpolate: { credentialOwnerName } }) }}
-			</template>
-		</n8n-info-tip>
-		<n8n-info-tip :bold="false" v-if="!credentialPermissions.isOwner && credentialPermissions.isInstanceOwner">
-			{{ $locale.baseText('credentialEdit.credentialSharing.info.instanceOwner') }}
-		</n8n-info-tip>
-		<n8n-user-select
-			v-if="credentialPermissions.updateSharing"
-			size="large"
-			:users="usersList"
-			:currentUserId="usersStore.currentUser.id"
-			:placeholder="$locale.baseText('credentialEdit.credentialSharing.select.placeholder')"
-			@input="onAddSharee"
-		>
-			<template #prefix>
-				<n8n-icon icon="search" />
-			</template>
-		</n8n-user-select>
-		<n8n-users-list
-			:users="sharedWithList"
-			:currentUserId="usersStore.currentUser.id"
-			:delete-label="$locale.baseText('credentialEdit.credentialSharing.list.delete')"
-			:readonly="!credentialPermissions.updateSharing"
-			@delete="onRemoveSharee"
-		/>
+		<div v-if="isDefaultUser">
+			<n8n-action-box
+				:description="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.description')"
+				:buttonText="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.button')"
+				@click="goToUsersSettings"
+			/>
+		</div>
+		<div v-else>
+			<n8n-info-tip :bold="false" class="mb-s">
+				<template v-if="credentialPermissions.isOwner">
+					{{ $locale.baseText('credentialEdit.credentialSharing.info.owner') }}
+				</template>
+				<template v-else>
+					{{ $locale.baseText('credentialEdit.credentialSharing.info.sharee', { interpolate: { credentialOwnerName } }) }}
+				</template>
+			</n8n-info-tip>
+			<n8n-info-tip :bold="false" v-if="!credentialPermissions.isOwner && credentialPermissions.isInstanceOwner">
+				{{ $locale.baseText('credentialEdit.credentialSharing.info.instanceOwner') }}
+			</n8n-info-tip>
+			<n8n-user-select
+				v-if="credentialPermissions.updateSharing"
+				size="large"
+				:users="usersList"
+				:currentUserId="usersStore.currentUser.id"
+				:placeholder="$locale.baseText('credentialEdit.credentialSharing.select.placeholder')"
+				@input="onAddSharee"
+			>
+				<template #prefix>
+					<n8n-icon icon="search" />
+				</template>
+			</n8n-user-select>
+			<n8n-users-list
+				:users="sharedWithList"
+				:currentUserId="usersStore.currentUser.id"
+				:delete-label="$locale.baseText('credentialEdit.credentialSharing.list.delete')"
+				:readonly="!credentialPermissions.updateSharing"
+				@delete="onRemoveSharee"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -40,17 +49,21 @@ import {showMessage} from "@/mixins/showMessage";
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
 import { useCredentialsStore } from "@/stores/credentials";
+import {VIEWS} from "@/constants";
 
 export default mixins(
 	showMessage,
 ).extend({
 	name: 'CredentialSharing',
-	props: ['credential', 'credentialId', 'credentialData', 'sharedWith', 'credentialPermissions'],
+	props: ['credential', 'credentialId', 'credentialData', 'sharedWith', 'credentialPermissions', 'modalBus'],
 	computed: {
 		...mapStores(
 			useCredentialsStore,
 			useUsersStore,
 		),
+		isDefaultUser(): boolean {
+			return this.usersStore.isDefaultUser;
+		},
 		usersList(): IUser[] {
 			return this.usersStore.allUsers.filter((user: IUser) => {
 				const isCurrentUser = user.id === this.usersStore.currentUser?.id;
@@ -98,6 +111,10 @@ export default mixins(
 		async loadUsers() {
 			await this.usersStore.fetchUsers();
 		},
+		goToUsersSettings() {
+			this.$router.push({ name: VIEWS.USERS_SETTINGS });
+			this.modalBus.$emit('close');
+		},
 	},
 	mounted() {
 		this.loadUsers();

packages/editor-ui/src/components/WorkflowShareModal.ee.vue

@@ -8,7 +8,12 @@
 		:beforeClose="onCloseModal"
 	>
 		<template #content>
-			<div :class="$style.container">
+			<div v-if="isDefaultUser" :class="$style.container">
+				<n8n-text>
+					{{ $locale.baseText('workflows.shareModal.isDefaultUser.description') }}
+				</n8n-text>
+			</div>
+			<div v-else :class="$style.container">
 				<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
 					<n8n-user-select
 						v-if="workflowPermissions.updateSharing"
@@ -62,7 +67,12 @@
 		</template>
 
 		<template #footer>
-			<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]" :class="$style.actionButtons">
+			<div v-if="isDefaultUser" :class="$style.actionButtons">
+				<n8n-button @click="goToUsersSettings">
+					{{ $locale.baseText('workflows.shareModal.isDefaultUser.button') }}
+				</n8n-button>
+			</div>
+			<enterprise-edition v-else :features="[EnterpriseEditionFeature.WorkflowSharing]" :class="$style.actionButtons">
 				<n8n-text
 					v-show="isDirty"
 					color="text-light"
@@ -102,6 +112,7 @@ import Modal from './Modal.vue';
 import {
 	EnterpriseEditionFeature,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	VIEWS,
 	WORKFLOW_SHARE_MODAL_KEY,
 } from '../constants';
 import {IUser, IWorkflowDb, NestedRecord} from "@/Interface";
@@ -145,6 +156,9 @@ export default mixins(
 	},
 	computed: {
 		...mapStores(useSettingsStore, useUIStore, useUsersStore, useWorkflowsStore, useWorkflowsEEStore),
+		isDefaultUser(): boolean {
+			return this.usersStore.isDefaultUser;
+		},
 		usersList(): IUser[] {
 			return this.usersStore.allUsers.filter((user: IUser) => {
 				const isCurrentUser = user.id === this.usersStore.currentUser?.id;
@@ -313,6 +327,10 @@ export default mixins(
 		async loadUsers() {
 			await this.usersStore.fetchUsers();
 		},
+		goToUsersSettings() {
+			this.$router.push({ name: VIEWS.USERS_SETTINGS });
+			this.modalBus.$emit('close');
+		},
 	},
 	mounted() {
 		if (this.isSharingAvailable) {

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

@@ -305,6 +305,8 @@
 	"credentialEdit.credentialSharing.list.delete.confirm.message": "This may break any workflows in which {name} has used this credential",
 	"credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText": "Remove",
 	"credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText": "Cancel",
+	"credentialEdit.credentialSharing.isDefaultUser.description": "You first need to set up your owner account to enable credential sharing features.",
+	"credentialEdit.credentialSharing.isDefaultUser.button": "Go to settings",
 	"credentialSelectModal.addNewCredential": "Add new credential",
 	"credentialSelectModal.continue": "Continue",
 	"credentialSelectModal.searchForApp": "Search for app...",
@@ -1410,6 +1412,8 @@
 	"workflows.shareModal.changesHint": "You made changes",
 	"workflows.shareModal.notAvailable": "Sharing workflows with others is currently available only on n8n cloud, our hosted offering.",
 	"workflows.shareModal.notAvailable.button": "Explore n8n cloud",
+	"workflows.shareModal.isDefaultUser.description": "You first need to set up your owner account to enable workflow sharing features.",
+	"workflows.shareModal.isDefaultUser.button": "Go to settings",
 	"workflows.roles.editor": "Editor",
 	"workflows.concurrentChanges.confirmMessage.title": "Workflow was edited by someone else",
 	"workflows.concurrentChanges.confirmMessage.message": "Another user made <strong>an edit</strong> to this workflow since you last saved it. Do you want to overwrite their changes?",

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

@@ -23,6 +23,9 @@ export const useUsersStore = defineStore(STORES.USERS, {
 		currentUser(): IUser | null {
 			return this.currentUserId ? this.users[this.currentUserId] : null;
 		},
+		isDefaultUser(): boolean {
+			return isDefaultUser(this.currentUser);
+		},
 		getUserById(state) {
 			return (userId: string): IUser | null => state.users[userId];
 		},