Skip to content

feat(new-nav): add environment overview page #2369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
rmnbrd wants to merge 8 commits into
base: new-navigation
Choose a base branch
from
Draft

feat(new-nav): add environment overview page #2369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
210d175
feat(new-nav): add environment overview
rmnbrd Feb 10, 2026
60be49e
impr: color tokens for uninstall modal
rmnbrd Feb 10, 2026
6e299f1
impr: color token tweaks
rmnbrd Feb 10, 2026
ef88b46
impr: color token tweaks
rmnbrd Feb 10, 2026
092623b
Update color tokens
rmnbrd Feb 24, 2026
6d5f18a
Updating the min-width of the status cells
rmnbrd Feb 24, 2026
407f224
Splitting components of the Services list table
rmnbrd Feb 24, 2026
2fe49fe
Fix outdated snapshots
rmnbrd Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions ...vices/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ exports[`SelectCommitModal should match snapshot 1`] = `
class="flex flex-col gap-2 text-sm"
>
<h2
class="h4 max-w-sm truncate text-neutral-400 dark:text-neutral-50"
class="h4 max-w-sm truncate text-neutral"
>
Deploy other version
</h2>
<p
class="text-neutral-350 dark:text-neutral-50"
class="text-neutral-subtle"
>
Type a version to deploy
</p>
Expand Down Expand Up @@ -54,21 +54,21 @@ exports[`SelectCommitModal should match snapshot 1`] = `
class="pl-2"
>
<div
class="relative pl-5 text-sm font-medium text-neutral-350"
class="relative pl-5 text-sm font-medium text-neutral-subtle"
>
<i
aria-hidden="true"
class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-300 dark:text-neutral-350"
class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
/>
Commit
on
Jan 01, 0123
Dec 31, 0122
</div>
<div
class="border-l border-neutral-250 pb-5 pl-5 pt-3 dark:border-neutral-350"
class="border-l border-neutral pb-5 pl-5 pt-3"
>
<label
class="-mt-px flex w-full flex-row gap-3 border border-neutral-250 p-3 first:rounded-t-md last:rounded-b-md dark:border-neutral-350 cursor-pointer"
class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md cursor-pointer"
>
<div>
<button
Expand All @@ -86,14 +86,14 @@ exports[`SelectCommitModal should match snapshot 1`] = `
class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
>
<a
class="max-w-full truncate font-medium text-neutral-400 hover:text-brand-500 dark:text-neutral-50"
class="max-w-full truncate font-medium text-neutral"
rel="noreferrer"
target="_blank"
>
lorem
</a>
<span
class="text-neutral-350 dark:text-neutral-50"
class="text-neutral-subtle"
>
committed
1904 years
Expand Down Expand Up @@ -156,21 +156,21 @@ exports[`SelectCommitModal should match snapshot 1`] = `
class="pl-2"
>
<div
class="relative pl-5 text-sm font-medium text-neutral-350"
class="relative pl-5 text-sm font-medium text-neutral-subtle"
>
<i
aria-hidden="true"
class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-300 dark:text-neutral-350"
class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
/>
Commit
on
Jan 01, 0456
Dec 31, 0455
</div>
<div
class="border-l border-neutral-250 pb-5 pl-5 pt-3 dark:border-neutral-350"
class="border-l border-neutral pb-5 pl-5 pt-3"
>
<label
class="-mt-px flex w-full flex-row gap-3 border border-neutral-250 p-3 first:rounded-t-md last:rounded-b-md dark:border-neutral-350 bg-neutral-100 dark:bg-neutral-500"
class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md bg-surface-neutral-subtle"
>
<div>
<button
Expand All @@ -192,7 +192,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
>
<i
aria-hidden="true"
class="fa-regular fa-check text-xs text-neutralInvert"
class="fa-regular fa-check text-xs text-neutral"
/>
</span>
</button>
Expand All @@ -201,14 +201,14 @@ exports[`SelectCommitModal should match snapshot 1`] = `
class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
>
<a
class="max-w-full truncate font-medium hover:text-brand-500 dark:text-neutral-50 text-neutral-350"
class="max-w-full truncate font-medium text-brand"
rel="noreferrer"
target="_blank"
>
ipsum
</a>
<span
class="text-neutral-350 dark:text-neutral-50"
class="text-neutral-subtle"
>
committed
1571 years
Expand Down Expand Up @@ -274,7 +274,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
</div>
</div>
<div
class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-white p-5"
class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5"
>
<button
class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
Expand Down
35 changes: 15 additions & 20 deletions libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ export function SelectCommitModal({
return (
<div className="flex flex-col gap-6 p-5">
<div className="flex flex-col gap-2 text-sm">
<h2 className="h4 max-w-sm truncate text-neutral-400 dark:text-neutral-50">{title}</h2>
<p className="text-neutral-350 dark:text-neutral-50">{description}</p>
<h2 className="h4 max-w-sm truncate text-neutral">{title}</h2>
<p className="text-neutral-subtle">{description}</p>
{children}
</div>

Expand All @@ -88,14 +88,11 @@ export function SelectCommitModal({
<ScrollShadowWrapper className="max-h-[50vh] pb-[60px]">
{Object.entries(filterCommits).map(([date, commits]) => (
<div key={date} className="pl-2">
<div className="relative pl-5 text-sm font-medium text-neutral-350">
<Icon
iconName="code-commit"
className="absolute left-0 top-1 -translate-x-1/2 text-neutral-300 dark:text-neutral-350"
/>
<div className="relative pl-5 text-sm font-medium text-neutral-subtle">
<Icon iconName="code-commit" className="absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle" />
{pluralize(commits.length, 'Commit')} on {dateToFormat(date, 'MMM dd, yyyy')}
</div>
<div className="border-l border-neutral-250 pb-5 pl-5 pt-3 dark:border-neutral-350">
<div className="border-l border-neutral pb-5 pl-5 pt-3">
{commits.map(
(
{ author_name, author_avatar_url, commit_page_url, created_at, git_commit_id, message },
Expand All @@ -109,10 +106,10 @@ export function SelectCommitModal({
<label
key={git_commit_id}
className={twMerge(
'-mt-px flex w-full flex-row gap-3 border border-neutral-250 p-3 first:rounded-t-md last:rounded-b-md dark:border-neutral-350',
isCurrentDeployedCommit ? 'bg-neutral-100 dark:bg-neutral-500' : 'cursor-pointer',
'-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md',
isCurrentDeployedCommit ? 'bg-surface-neutral-subtle' : 'cursor-pointer',
clsx({
'border-brand-500 bg-brand-50 dark:bg-neutral-600': isSelected,
'border-surface-brand-solid bg-surface-brand-component': isSelected,
'border-t-transparent': isSelectedSiblings,
})
)}
Expand All @@ -130,17 +127,15 @@ export function SelectCommitModal({
target="_blank"
rel="noreferrer"
className={twMerge(
'max-w-full truncate font-medium text-neutral-400 hover:text-brand-500 dark:text-neutral-50',
'max-w-full truncate font-medium text-neutral',
clsx({
'text-neutral-350': isCurrentDeployedCommit,
'text-brand': isCurrentDeployedCommit,
})
)}
>
{message}
</a>
<span className="text-neutral-350 dark:text-neutral-50">
committed {timeAgo(new Date(created_at))} ago
</span>
<span className="text-neutral-subtle">committed {timeAgo(new Date(created_at))} ago</span>
</div>
<div className="flex flex-col items-end gap-2">
<div className="flex items-center gap-1.5">
Expand Down Expand Up @@ -179,12 +174,12 @@ export function SelectCommitModal({
</ScrollShadowWrapper>
</RadioGroup.Root>
) : (
<div className="px-3 py-6 text-center">
<Icon iconName="wave-pulse" className="text-neutral-350" />
<p className="mt-1 text-xs font-medium text-neutral-350">No result for this search</p>
<div className="px-3 py-6 pb-[60px] text-center">
<Icon iconName="wave-pulse" className="text-neutral" />
<p className="mt-1 text-xs font-medium text-neutral">No result for this search</p>
</div>
)}
<div className="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-white p-5">
<div className="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5">
<Button variant="outline" color="neutral" size="lg" onClick={() => onCancel()}>
Cancel
</Button>
Expand Down
14 changes: 7 additions & 7 deletions libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -728,31 +728,31 @@ function MenuOtherActions({
description: 'Choose how to remove this service',
entities: [
<div className="flex items-center gap-2" key={`service-avatar-${service.id}`}>
<div className="flex h-5 w-5 items-center justify-center rounded-full border border-neutral-200">
<div className="flex h-5 w-5 items-center justify-center rounded-full border border-neutral">
<ServiceAvatar service={service} size="xs" />
</div>
<span className="text-sm font-medium text-neutral-400">{service.name}</span>
<span className="text-sm font-medium text-neutral">{service.name}</span>
</div>,
],
actions: [
{
id: 'uninstall',
title: 'Uninstall',
description: (
<div className="flex flex-col gap-2 text-neutral-350">
<div className="flex flex-col gap-2 text-neutral-subtle">
<span>
Stop and remove the service but keep all Qovery configuration, data and settings.
<br />
You can easily reinstall or redeploy later with the same configuration.
</span>
<div>
<span className="font-medium text-neutral-400">What's deleted:</span>
<span className="font-medium text-neutral-subtle">What's deleted:</span>
<ul className="list-disc pl-4">
<li>All service data</li>
</ul>
</div>
<div>
<span className="font-medium text-neutral-400">What's kept:</span>
<span className="font-medium text-neutral-subtle">What's kept:</span>
<ul className="list-disc pl-4">
<li>Qovery configuration</li>
<li>Environment variables</li>
Expand All @@ -775,14 +775,14 @@ function MenuOtherActions({
id: 'delete',
title: 'Delete permanently',
description: (
<div className="flex flex-col gap-2 text-neutral-350">
<div className="flex flex-col gap-2 text-neutral-subtle">
<span>
Permanently remove the service and all associated data.
<br />
This action cannot be undone.
</span>
<div>
<span className="font-medium text-neutral-400">What's deleted:</span>
<span className="font-medium text-neutral-subtle">What's deleted:</span>
<ul className="list-disc pl-4">
<li>All service data</li>
<li>Qovery configuration</li>
Expand Down
36 changes: 13 additions & 23 deletions libs/domains/services/feature/src/lib/service-links-popover/service-links-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,16 +65,16 @@ export function ServiceLinksPopover({
<Popover.Trigger className={filteredLinks.length === 0 ? 'hidden' : ''}>{children}</Popover.Trigger>
<Popover.Content
side={side}
className="max-w-[280px] border-transparent p-2 text-sm text-neutral-350"
className="max-w-[280px] border-transparent p-2 text-sm text-neutral-subtle"
align={align}
>
<div className="flex items-center justify-between p-2">
<p className="font-medium text-neutral-350 dark:text-neutral-250">
<p className="font-medium text-neutral">
{filteredLinks?.length ?? 0} {pluralize(filteredLinks?.length ?? 0, 'link')} attached
</p>
{serviceType !== 'HELM' && (
<Popover.Close>
<Link to={pathDomainsSetting} color="brand" className="text-ssm">
<Link to={pathDomainsSetting} color="neutral" className="text-ssm">
Customize
<Icon iconName="circle-plus" iconStyle="regular" className="text-xs" />
</Link>
Expand All @@ -84,27 +84,24 @@ export function ServiceLinksPopover({
<ul className="max-h-96 overflow-y-auto">
{nginxLinks.map((link: LinkProps) => (
<li key={link.url} className="flex p-2">
<CopyToClipboardButtonIcon
className="mr-2 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400"
content={link.url ?? ''}
/>
<CopyToClipboardButtonIcon className="mr-2 text-brand hover:text-brand-hover" content={link.url ?? ''} />
<a
className="flex w-full items-center justify-between text-neutral-400 transition hover:text-brand-500 dark:text-neutral-50 dark:hover:text-brand-400"
className="flex w-full items-center justify-between text-brand transition hover:text-brand-hover"
href={link.url}
target="_blank"
rel="noreferrer"
>
<div className="mr-2 text-ssm font-medium">
<Truncate text={link.url ?? ''} truncateLimit={26} />
</div>
<div className="text-xs text-neutral-350 dark:text-neutral-250">{link.internal_port}</div>
<div className="text-xs text-neutral-subtle">{link.internal_port}</div>
</a>
</li>
))}
{nginxLinks.length > 0 && gatewayApiLinks.length > 0 && (
<>
<li className="my-2 border-t border-neutral-200 dark:border-neutral-600" />
<li className="flex items-center gap-1 px-2 pb-1 text-xs font-medium text-neutral-350 dark:text-neutral-250">
<li className="my-2 border-t border-neutral" />
<li className="flex items-center gap-1 px-2 pb-1 text-xs font-medium text-neutral">
<span>Gateway API / Envoy stack</span>
<Tooltip
content={
Expand All @@ -115,7 +112,7 @@ export function ServiceLinksPopover({
href="https://www.qovery.com/blog/nginx-ingress-controller-end-of-maintenance-by-march-2026"
target="_blank"
rel="noreferrer"
className="underline hover:text-neutral-100"
className="underline"
>
more info
</a>
Expand All @@ -125,32 +122,25 @@ export function ServiceLinksPopover({
classNameContent="max-w-xs"
>
<span className="inline-flex cursor-help">
<Icon
iconName="circle-info"
iconStyle="regular"
className="text-neutral-350 hover:text-neutral-400 dark:text-neutral-250 dark:hover:text-neutral-200"
/>
<Icon iconName="circle-info" iconStyle="regular" className="text-neutral-subtle" />
</span>
</Tooltip>
</li>
</>
)}
{gatewayApiLinks.map((link: LinkProps) => (
<li key={link.url} className="flex p-2">
<CopyToClipboardButtonIcon
className="mr-2 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400"
content={link.url ?? ''}
/>
<CopyToClipboardButtonIcon className="mr-2 text-brand hover:text-brand-hover" content={link.url ?? ''} />
<a
className="flex w-full items-center justify-between text-neutral-400 transition hover:text-brand-500 dark:text-neutral-50 dark:hover:text-brand-400"
className="flex w-full items-center justify-between text-brand transition hover:text-brand-hover"
href={link.url}
target="_blank"
rel="noreferrer"
>
<div className="mr-2 text-ssm font-medium">
<Truncate text={link.url ?? ''} truncateLimit={26} />
</div>
<div className="text-xs text-neutral-350 dark:text-neutral-250">{link.internal_port}</div>
<div className="text-xs text-neutral-subtle">{link.internal_port}</div>
</a>
</li>
))}
Expand Down
4 changes: 4 additions & 0 deletions libs/domains/services/feature/src/lib/service-list/service-list-cells/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export * from './service-name-cell'
export * from './service-version-cell'
export * from './service-last-deployment-cell'
export * from './service-running-status-cell'
Loading
Loading