refactor(editor): Enable collaboration features only in NodeView v2 (no-changelog) (#10756)

packages/editor-ui/src/components/MainHeader/CollaborationPane.vue

@@ -1,22 +1,25 @@
 <script setup lang="ts">
+import { onMounted, onBeforeUnmount, computed, watch } from 'vue';
+import { useDocumentVisibility } from '@vueuse/core';
+
 import { useUsersStore } from '@/stores/users.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useCollaborationStore } from '@/stores/collaboration.store';
-import { onBeforeUnmount, onMounted, computed, ref } from 'vue';
-import { TIME } from '@/constants';
 import { isUserGlobalOwner } from '@/utils/userUtils';
 
 const collaborationStore = useCollaborationStore();
 const usersStore = useUsersStore();
-const workflowsStore = useWorkflowsStore();
 
-const HEARTBEAT_INTERVAL = 5 * TIME.MINUTE;
-const heartbeatTimer = ref<number | null>(null);
+const visibility = useDocumentVisibility();
+watch(visibility, (visibilityState) => {
+	if (visibilityState === 'hidden') {
+		collaborationStore.stopHeartbeat();
+	} else {
+		collaborationStore.startHeartbeat();
+	}
+});
 
-const activeUsersSorted = computed(() => {
-	const currentWorkflowUsers = (collaborationStore.getUsersForCurrentWorkflow ?? []).map(
-		(userInfo) => userInfo.user,
-	);
+const collaboratorsSorted = computed(() => {
+	const currentWorkflowUsers = collaborationStore.collaborators.map(({ user }) => user);
 	const owner = currentWorkflowUsers.find(isUserGlobalOwner);
 	return {
 		defaultGroup: owner
@@ -25,43 +28,13 @@ const activeUsersSorted = computed(() => {
 	};
 });
 
-const currentUserEmail = computed(() => {
-	return usersStore.currentUser?.email;
-});
-
-const startHeartbeat = () => {
-	if (heartbeatTimer.value !== null) {
-		clearInterval(heartbeatTimer.value);
-		heartbeatTimer.value = null;
-	}
-	heartbeatTimer.value = window.setInterval(() => {
-		collaborationStore.notifyWorkflowOpened(workflowsStore.workflow.id);
-	}, HEARTBEAT_INTERVAL);
-};
-
-const stopHeartbeat = () => {
-	if (heartbeatTimer.value !== null) {
-		clearInterval(heartbeatTimer.value);
-	}
-};
-
-const onDocumentVisibilityChange = () => {
-	if (document.visibilityState === 'hidden') {
-		stopHeartbeat();
-	} else {
-		startHeartbeat();
-	}
-};
+const currentUserEmail = computed(() => usersStore.currentUser?.email);
 
 onMounted(() => {
 	collaborationStore.initialize();
-	startHeartbeat();
-	document.addEventListener('visibilitychange', onDocumentVisibilityChange);
 });
 
 onBeforeUnmount(() => {
-	document.removeEventListener('visibilitychange', onDocumentVisibilityChange);
-	stopHeartbeat();
 	collaborationStore.terminate();
 });
 </script>
@@ -71,7 +44,7 @@ onBeforeUnmount(() => {
 		:class="`collaboration-pane-container ${$style.container}`"
 		data-test-id="collaboration-pane"
 	>
-		<n8n-user-stack :users="activeUsersSorted" :current-user-email="currentUserEmail" />
+		<n8n-user-stack :users="collaboratorsSorted" :current-user-email="currentUserEmail" />
 	</div>
 </template>
 

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 />
+					<CollaborationPane v-if="nodeViewVersion === '2' && !isNewWorkflow" />
 					<N8nButton
 						type="secondary"
 						data-test-id="workflow-share-button"

packages/editor-ui/src/components/__tests__/CollaborationPane.test.ts

@@ -60,13 +60,10 @@ const initialState = {
 		},
 	},
 	[STORES.COLLABORATION]: {
-		usersForWorkflows: {
-			w1: [
-				{ lastSeen: '2023-11-22T10:17:12.246Z', user: MEMBER_USER },
-				{ lastSeen: '2023-11-22T10:17:12.246Z', user: OWNER_USER },
-			],
-			w2: [{ lastSeen: '2023-11-22T10:17:12.246Z', user: MEMBER_USER_2 }],
-		},
+		collaborators: [
+			{ lastSeen: '2023-11-22T10:17:12.246Z', user: MEMBER_USER },
+			{ lastSeen: '2023-11-22T10:17:12.246Z', user: OWNER_USER },
+		],
 	},
 };