🎨 [Frontend] Aesthetics: Use Chip in PO's Review Users and Services Updates

[odeimaiz]

What do these changes do?

In this PR the UI of the Review Users section in the PO Center was improved, as well as the Services Updates in the Project Card, by reusing the enhanced Chip.

Bonus:

• Service cards and Project cards share the same code for displaying their Overview section.

Review Users:

Services Updates:

Overviews:

Related issue/s

How to test

Dev-ops

[Copilot]

Pull Request Overview

This PR refactors several UI components to use the new Chip widget for status and version indicators, replacing manual color and label management.

• Introduces a statusColor property in Chip to auto-style based on predefined statuses.
• Updates service and PO UIs to use Chip instead of raw labels or images for status display.
• Consolidates version coloring logic into a reusable paintChip method and updates study/service info layouts.

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
services/static-webserver/client/source/class/osparc/ui/basic/Chip.js	Adds statusColor property and styling logic to Chip.
services/static-webserver/client/source/class/osparc/service/StatusUI.js	Switches deprecated/retired chips to use statusColor.
services/static-webserver/client/source/class/osparc/po/UsersPending.js	Replaces status images with Chip and applies statusColor.
services/static-webserver/client/source/class/osparc/metadata/ServicesInStudyUpdate.js	Replaces version labels with Chip and uses paintChip.
services/static-webserver/client/source/class/osparc/info/Utils.js	Adds infoElementsToLayout helper for reactive info grids.
services/static-webserver/client/source/class/osparc/info/StudyUtils.js	Renames createDescriptionMD to createDescription.
services/static-webserver/client/source/class/osparc/info/StudyMedium.js	Uses createDescription instead of createDescriptionMD.
services/static-webserver/client/source/class/osparc/info/StudyLarge.js	Uses new infoElementsToLayout and updated description helper.
services/static-webserver/client/source/class/osparc/info/ServiceUtils.js	Returns a scroll container directly in createDescription.
services/static-webserver/client/source/class/osparc/info/ServiceLarge.js	Rebuilds layout to use infoElementsToLayout, streamlines description.
services/static-webserver/client/source/class/osparc/info/MergedLarge.js	Updates description creation to use createDescription.

Comments suppressed due to low confidence (2)

services/static-webserver/client/source/class/osparc/info/Utils.js:45

• Add unit tests for this new infoElementsToLayout helper, verifying it correctly lays out various infoElements inputs in both study and service modes.

    infoElementsToLayout: function(infoElements, isStudy = true) {

services/static-webserver/client/source/class/osparc/info/Utils.js:45

• Provide a JSDoc or comment describing the expected structure of infoElements and the behavior of this function for future maintainability.

    infoElementsToLayout: function(infoElements, isStudy = true) {

[GitHK]

👍

[pcrespov]

@odeimaiz did you read my mind? I was sketching yesterday an issue for this :-)

Consider (2) as well (for sorting/search i can give you options int he backend)

[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 d0874a0