feat(editor): Show Collaboration pane only when there are multiple ac…

…tive users (#10772)
n8n-io · Sep 11, 2024 · a0af1d9 · a0af1d9
1 parent 7551888
commit a0af1d9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/packages/editor-ui/src/components/MainHeader/CollaborationPane.vue b/packages/editor-ui/src/components/MainHeader/CollaborationPane.vue
@@ -18,6 +18,8 @@ watch(visibility, (visibilityState) => {
 	}
 });
 
+const showUserStack = computed(() => collaborationStore.collaborators.length > 1);
+
 const collaboratorsSorted = computed(() => {
 	const currentWorkflowUsers = collaborationStore.collaborators.map(({ user }) => user);
 	const owner = currentWorkflowUsers.find(isUserGlobalOwner);
@@ -44,7 +46,11 @@ onBeforeUnmount(() => {
 		:class="`collaboration-pane-container ${$style.container}`"
 		data-test-id="collaboration-pane"
 	>
-		<n8n-user-stack :users="collaboratorsSorted" :current-user-email="currentUserEmail" />
+		<n8n-user-stack
+			v-if="showUserStack"
+			:users="collaboratorsSorted"
+			:current-user-email="currentUserEmail"
+		/>
 	</div>
 </template>
 

diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -668,7 +668,7 @@ function showCreateWorkflowSuccessToast(id?: string) {
 			</span>
 			<EnterpriseEdition :features="[EnterpriseEditionFeature.Sharing]">
 				<div :class="$style.group">
-					<CollaborationPane v-if="nodeViewVersion === '2' && !isNewWorkflow" />
+					<CollaborationPane v-if="!isNewWorkflow" />
 					<N8nButton
 						type="secondary"
 						data-test-id="workflow-share-button"

diff --git a/packages/editor-ui/src/components/__tests__/CollaborationPane.test.ts b/packages/editor-ui/src/components/__tests__/CollaborationPane.test.ts
@@ -96,4 +96,22 @@ describe('CollaborationPane', () => {
 		// Owner is second in the store but should be rendered first
 		expect(firstAvatar).toHaveAttribute('data-test-id', `user-stack-avatar-${OWNER_USER.id}`);
 	});
+
+	it('should not render the user-stack if there is only one user', async () => {
+		const { getByTestId } = renderComponent({
+			pinia: createTestingPinia({
+				initialState: {
+					...initialState,
+					[STORES.COLLABORATION]: {
+						collaborators: [{ lastSeen: '2023-11-22T10:17:12.246Z', user: OWNER_USER }],
+					},
+				},
+			}),
+		});
+		await waitAllPromises();
+
+		const collaborationPane = getByTestId('collaboration-pane');
+		expect(collaborationPane).toBeInTheDocument();
+		expect(collaborationPane.querySelector('[data-test-id=user-stack-avatars]')).toBeNull();
+	});
 });