feat(new-nav): services list UI improvements by rmnbrd · Pull Request #2562 · Qovery/console

rmnbrd · 2026-03-31T15:18:42Z

Summary

PR revamping the UI of the services list section.

Screenshots / Recordings

📺 https://www.loom.com/share/0f9578f0acfb490fb5cef45c4cd59263

codecov · 2026-04-01T06:50:49Z

Codecov Report

❌ Patch coverage is 47.61905% with 44 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (new-navigation@be70bf2). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
...ices/feature/src/lib/service-list/service-list.tsx	48.07%	25 Missing and 2 partials ⚠️
...ervice-list-cells/service-last-deployment-cell.tsx	45.45%	3 Missing and 3 partials ⚠️
...vice-list/service-list-cells/service-name-cell.tsx	54.54%	2 Missing and 3 partials ⚠️
...e-list/service-list-cells/service-version-cell.tsx	40.00%	3 Missing ⚠️
...e/src/lib/service-list/service-list-action-bar.tsx	50.00%	2 Missing ⚠️
...eature/src/lib/service-actions/service-actions.tsx	0.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@                Coverage Diff                @@
##             new-navigation    #2562   +/-   ##
=================================================
  Coverage                  ?   44.98%           
=================================================
  Files                     ?      609           
  Lines                     ?    14397           
  Branches                  ?     4214           
=================================================
  Hits                      ?     6476           
  Misses                    ?     6780           
  Partials                  ?     1141

Flag	Coverage Δ
unittests	`44.98% <47.61%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR refreshes the services list UI in the console-v5 environment overview, updating the table layout, per-row actions, and deployment/status presentation.

Changes:

Refactors ServiceList to a fixed grid-based table layout with a new status chip column and a dedicated actions column.
Updates service list cells (name/version/last deployment) to match the new design and interaction patterns.
Adjusts skeleton/loading states and snapshots, and switches the overview route suspense fallback to a shared ServiceListSkeleton.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
libs/domains/services/feature/src/lib/service-list/service-list.tsx	New grid table layout, new skeleton export, status/actions columns, header badge strip
libs/domains/services/feature/src/lib/service-list/service-list.spec.tsx	Removes name-filter test aligned with filter disablement
libs/domains/services/feature/src/lib/service-list/service-list-cells/service-version-cell.tsx	Tweaks git/branch display layout and adds auto-deploy indicator
libs/domains/services/feature/src/lib/service-list/service-list-cells/service-running-status-cell.tsx	Removes old running-status cell implementation
libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx	Reworks name cell layout and introduces icon-only links button
libs/domains/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx	Replaces “time ago” link with deployment action + status + troubleshoot trigger
libs/domains/services/feature/src/lib/service-list/service-list-cells/index.ts	Updates exports after cell changes/removal
libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx	Changes selection action bar positioning/styling to fixed overlay
libs/domains/services/feature/src/lib/service-list/snapshots/service-list.spec.tsx.snap	Snapshot updates for new list layout
libs/domains/services/feature/src/lib/service-list/snapshots/service-list-action-bar.spec.tsx.snap	Snapshot updates for new action bar layout
libs/domains/services/feature/src/lib/service-actions/service-actions.tsx	Updates loading skeleton dimensions for new column sizing
libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx	Minor skeleton height tweak
apps/console-v5/src/routes/_authenticated/.../overview/index.tsx	Uses shared `ServiceListSkeleton` as Suspense fallback

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

libs/domains/services/feature/src/lib/service-list/service-list.tsx

...ns/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx

libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx

libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx

libs/domains/services/feature/src/lib/service-list/service-list.tsx

libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx

...ns/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx

libs/domains/services/feature/src/lib/service-list/service-list-cells/service-version-cell.tsx

libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx

TheoGrandin74 · 2026-04-01T14:29:22Z

@rmnbrd Some more specific feedbacks:

~~The checkbox is too far from the service cell name, because of the px-4 that is on both cells. Ideally we want to have 16px between the two cells, not 32px like we have today with both cell paddings~~
~~I think you can bump the height of all cells to h-15 to have a less cluttered view~~
~~I'm having some issues with my smaller laptop screen on the target version cell:~~

For this badges, depending on what we can do it could be great to bump the text to text-ssm, and to font-medium. Also the stopped version should not be in info colors like that but neutral, like the completed

More of a backend issue I guess, but when a service was never deployed the last deployment should not be "Deploy" + a help icon like we see here, but simply a "Never been deployed" text without any icons imo

RemiBonnet

Thanks @rmnbrd 🙏
Here are my comments:

I think we're rendering too many WebSockets. That’s probably why things look more “flashy” here compared to production, I haven’t dug into where this is happening in the code yet

Integration

Current production

~~The link button is too big, from the design, it should be 24x24, not 28x28~~

~~The row height is also too large it should be 60px instead of 64px~~
~~When clicking on copy commit id, it redirects to the service overview instead of copying the id~~

~~Keyboard interaction is missing for the whole row (like what we have for deployments and other tables)~~
~~Missing cell borders~~

Integration

Figma

~~We should probably add a max-w-max to avoid having a clickable area that’s too large~~
https://github.com/user-attachments/assets/6f704e8b-c44f-40b8-a93e-7681904406cb
There’s a difference between this and the alert page. Could we align it with what we have on the alert page? cc: @TheoGrandin74

Service list

Alert rules

Missing pluralization for these badges

~~The service icon doesn’t match the design. @TheoGrandin74 has probably already noticed it !~~

Integration

Design

libs/domains/services/feature/src/lib/service-list/service-list-cells/service-version-cell.tsx

libs/domains/services/feature/src/lib/service-list/service-list.tsx

TheoGrandin74 · 2026-04-02T12:06:29Z

@rmnbrd @RemiBonnet Some clarification following Remi's message!

~~The row height in design was indeed 60px, I was the one pushing for 64px on my previous message to follow tailwind classes, 60px is probably a bit better but both options are good here!~~
~~Link button is indeed too big, good catch!~~
For the badge it's not like the design, but it's the design of our current badge component, which is used quite a bit across all the console. I would say to stay with the current developt design for now, and some point in the future I'm considering adding a specific "Status badge" maybe to not re-use the badge component that we are re-using everywhere. But for now I'm ok with the current design, this is something we can change later imo
For the floating action bar, i think we have consistency issues on those because we don't have a proper component when we should. Design-wise I prefer what we have on the alert page (because I think it was the latest design that I did), but consistency wise what we have on the service list is more close to what we have on other pages like the variable list. So I think let's go for the simplest integration here, and down the line have a component for it that we will maybe change

~~Service icon indeed don't match the design, a bit weird because it looks sometimes quite different depending on the icon. But ideally it should be on the bottom right~~

And a quick feedback on my part:

~~Font-weight on the text in the last deployment column should be in regular instead of medium!~~

…ells - Updated ServiceListSkeleton for improved layout and styling. - Refactored ServiceList to utilize actual service statuses and removed unnecessary columns. - Consolidated service cell components by removing ServiceRunningStatusCell and integrating its functionality into ServiceNameCell and ServiceLastDeploymentCell. - Enhanced ServiceLastDeploymentCell to display deployment actions and status chips. - Removed unused ServiceRow component to streamline the service list structure.

… list layout - Replaced the custom ServiceListSkeleton with the new version from the services feature library. - Improved the layout and styling of the ServiceList component for better user experience. - Removed the deprecated ServiceListSkeleton implementation from the overview route.

…e-cell Agent-Logs-Url: https://github.com/Qovery/console/sessions/328e3284-978d-40eb-a1e1-136b9837f12f Co-authored-by: rmnbrd <426749+rmnbrd@users.noreply.github.com>

Agent-Logs-Url: https://github.com/Qovery/console/sessions/7a4cf4e7-b323-475d-946e-f3c5a19073ee Co-authored-by: rmnbrd <426749+rmnbrd@users.noreply.github.com>

RemiBonnet

Last feedback 🙏

I think it missing the plurilaze for the badge

We don't have the same hover state between these links

RemiBonnet · 2026-04-02T15:51:24Z

libs/shared/ui/src/lib/components/link/link.tsx

        red: ['text-negative', 'hover:text-negative-hover'],
        sky: ['text-info', 'hover:text-info-hover'],
-        neutral: ['text-neutral', 'hover:text-neutral-subtle'],
+        neutral: ['text-neutral', 'hover:text-neutral'],


No, it is to update the color as you asked

Or should I override the color of ExtraLink component just for this use-case?

Because that does not sound like a good option to me

Or we can add this hover color for the "Deploy" etc label ?

Then we need to change also on the other tables cells?
Like the Cluster cell:

https://www.figma.com/design/4b34rKYfJDW3Gs8SjToCW6/Design-System-Qovery--v4-?node-id=11446-4182&t=tGGDMDIYWnoK5hKb-4

libs/domains/services/feature/src/lib/service-list/service-list.tsx

rmnbrd self-assigned this Mar 31, 2026

rmnbrd added the V5 label Mar 31, 2026

rmnbrd force-pushed the feat/new-nav/services-list-improvements branch from 3b6e4e5 to a09293e Compare April 1, 2026 08:40

rmnbrd requested review from RemiBonnet and TheoGrandin74 April 1, 2026 12:34

rmnbrd marked this pull request as ready for review April 1, 2026 12:34

Copilot AI review requested due to automatic review settings April 1, 2026 12:34

Copilot started reviewing on behalf of rmnbrd April 1, 2026 12:35 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

Copilot started work on behalf of rmnbrd April 1, 2026 12:43 View session

Copilot finished work on behalf of rmnbrd April 1, 2026 12:46

Copilot started work on behalf of rmnbrd April 1, 2026 12:47 View session

Copilot finished work on behalf of rmnbrd April 1, 2026 12:49

TheoGrandin74 reviewed Apr 1, 2026

View reviewed changes

rmnbrd force-pushed the feat/new-nav/services-list-improvements branch from 81b639e to 74aa74e Compare April 2, 2026 08:28

RemiBonnet reviewed Apr 2, 2026

View reviewed changes

rmnbrd and others added 11 commits April 2, 2026 14:13

feat(new-nav): services list UI improvements

273363f

Revert error icon

bc5f756

Fix failing unit tests

29d8315

refactor(service-list-action-bar): color tokens and position

2c35ddc

Update outdated snapshots

056f2fa

Tweak skeleton size

01d8715

UI tweaks

62df6ec

fix(new-nav): add aria-label to icon-only links button in service-nam…

38e5f27

…e-cell Agent-Logs-Url: https://github.com/Qovery/console/sessions/328e3284-978d-40eb-a1e1-136b9837f12f Co-authored-by: rmnbrd <426749+rmnbrd@users.noreply.github.com>

fix(new-nav): update aria-label on links button to 'Links'

9a7e5a8

Agent-Logs-Url: https://github.com/Qovery/console/sessions/7a4cf4e7-b323-475d-946e-f3c5a19073ee Co-authored-by: rmnbrd <426749+rmnbrd@users.noreply.github.com>

rmnbrd added 3 commits April 2, 2026 14:13

UI tweaks

dd44b4e

UI fixes for service name cell

3295950

Update outdated snapshots

b4396dd

rmnbrd force-pushed the feat/new-nav/services-list-improvements branch from 4b34b7b to b4396dd Compare April 2, 2026 12:13

rmnbrd added 13 commits April 2, 2026 14:17

Fix row height

eef5555

Fix links icon size

3a9d209

Add missing stopPropagation call to prevent unwanted redirection

ac57fbd

Handle keyboard navigation at the row level

a8135ba

Fix header cells style

16cc5d8

Adjust font-weight for last deployment cell

a9453dd

Add wave-pulse icon to EmptyState

1bc8fdf

Code formatting improvements

49b4b86

Fix ServiceTemplateIndicator position

9164a02

Fix last deployment cell

3d71fc4

Fix glitch

8bcdda0

UI tweak for target version cell (LastVersion component)

10f5838

Update outdated snapshots

08e3104

RemiBonnet reviewed Apr 2, 2026

View reviewed changes

rmnbrd added 2 commits April 2, 2026 17:24

Post-review fixes

528490c

Update outdated snapshots

0a8ec4c

RemiBonnet reviewed Apr 2, 2026

View reviewed changes

RemiBonnet self-requested a review April 2, 2026 16:18

RemiBonnet approved these changes Apr 2, 2026

View reviewed changes

libs/domains/services/feature/src/lib/service-list/service-list.tsx Outdated Show resolved Hide resolved

rmnbrd added 3 commits April 2, 2026 18:42

Use pluralize helper

eb358e4

Revert ExternalLink color change

b40fe5b

Update snapshot

b72db0d

rmnbrd force-pushed the feat/new-nav/services-list-improvements branch from c00efc3 to b72db0d Compare April 2, 2026 17:35

rmnbrd merged commit 0c2311d into new-navigation Apr 2, 2026
11 checks passed

rmnbrd deleted the feat/new-nav/services-list-improvements branch April 2, 2026 17:45

Conversation

rmnbrd commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots / Recordings

Uh oh!

codecov bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TheoGrandin74 commented Apr 1, 2026 • edited by rmnbrd Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RemiBonnet left a comment • edited by rmnbrd Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TheoGrandin74 commented Apr 2, 2026 • edited by rmnbrd Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RemiBonnet left a comment

Choose a reason for hiding this comment

Uh oh!

RemiBonnet Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

rmnbrd Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

rmnbrd Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RemiBonnet Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rmnbrd Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

rmnbrd Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

rmnbrd commented Mar 31, 2026 •

edited

Loading

codecov bot commented Apr 1, 2026 •

edited

Loading

TheoGrandin74 commented Apr 1, 2026 •

edited by rmnbrd

Loading

RemiBonnet left a comment •

edited by rmnbrd

Loading

TheoGrandin74 commented Apr 2, 2026 •

edited by rmnbrd

Loading

rmnbrd Apr 2, 2026 •

edited

Loading

RemiBonnet Apr 2, 2026 •

edited

Loading