🎨 [Frontend] Enh: Show who is collaborating

[odeimaiz]

What do these changes do?

This PR enhances the frontend to show collaborative user activity through avatar groups in both the Navigation Bar and Project Cards. The changes implement real-time updates via WebSocket events to display who is currently collaborating on projects.

• Reuses the avatar group component on the Navigation Bar when the Project is open
• Implements WebSocket listener for real-time projectStateUpdated
• Uses WEBSERVER_REALTIME_COLLABORATION env_var
• Refactors code to use utility functions for project state management

Note @sanderegg: there might be a missing message when a user exits the project without closing it.

Group Avatar on Project Card and Navigation Bar

Related issue/s

• related to Let open project when another user is in osparc-issues#1962
• related to Simultaneous access to a pipeline in view-only mode (Aug.) osparc-issues#1647

How to test

Dev-ops

[Copilot]

Pull Request Overview

This PR enhances the frontend to show collaborative user activity through avatar groups in both the navigation bar and study cards. The changes implement real-time updates via WebSocket events to display who is currently collaborating on studies.

• Adds avatar group components to show active collaborators
• Implements WebSocket listener for real-time project state updates
• Refactors code to use utility functions for state management
• Updates navigation bar button styling for consistency

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
AvatarGroup.js	Changed to accept user group IDs instead of user objects and fetch user data asynchronously
NavigationBar.js	Added avatar group control and WebSocket listener for project state updates
Utils.js	Refactored project state handling into reusable utility functions
CardBase.js	Updated to use new state utility functions and show current collaborators
TasksButton.js	Removed hardcoded styling properties
NotificationsButton.js	Removed hardcoded styling properties
JobsButton.js	Removed hardcoded styling properties and adjusted layout
CreditsIndicatorButton.js	Removed hardcoded styling properties
StudyEditor.js	Removed manual timeout logic for project state updates

Comments suppressed due to low confidence (1)

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js:894

• [nitpick] The function name '__showCurrentUserGroupIds' is misleading as it doesn't actually show the user group IDs directly, but passes them to the avatar group component. Consider renaming to '__updateAvatarGroup' or '__setAvatarGroupUsers'.

    __showCurrentUserGroupIds: function(currentUserGroupIds) {

[matusdrobuliak66]

🚀

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[odeimaiz]

@mergify queue

[mergify]

queue

✅ The pull request has been merged automatically

The pull request has been merged automatically at 57bf22a

[pcrespov]

very nice!