Skip to content

feat(environments): sort ephemeral environments by latest operation #2905

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

Merged
RemiBonnet merged 1 commit into from
Aug 27, 2026
Merged

feat(environments): sort ephemeral environments by latest operation #2905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 17 additions & 2 deletions ...vironments/feature/src/lib/environments-table/environment-section/environment-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Link, useNavigate, useParams } from '@tanstack/react-router'
import { EnvironmentModeEnum, type EnvironmentOverviewResponse, StateEnum } from 'qovery-typescript-axios'
import { type KeyboardEvent, type MouseEvent } from 'react'
import { type KeyboardEvent, type MouseEvent, useMemo } from 'react'
import { match } from 'ts-pattern'
import { ClusterAvatar } from '@qovery/domains/clusters/feature'
import { Button, Checkbox, DeploymentAction, Heading, Icon, Section, TablePrimitives, Tooltip } from '@qovery/shared/ui'
Expand Down Expand Up @@ -187,6 +187,11 @@ function EnvRow({
)
}

function lastOperationTimestamp(overview: EnvironmentOverviewResponse) {
const lastDeploymentDate = overview.deployment_status?.last_deployment_date
return lastDeploymentDate ? new Date(lastDeploymentDate).getTime() : 0
}

export function EnvironmentSection({
type,
items,
Expand All @@ -209,6 +214,16 @@ export function EnvironmentSection({
.with('PREVIEW', () => 'Ephemeral')
.exhaustive()

const sortedItems = useMemo(() => {
if (type !== EnvironmentModeEnum.PREVIEW) {
return items
}

return [...items].sort(
(environmentA, environmentB) => lastOperationTimestamp(environmentB) - lastOperationTimestamp(environmentA)

@cubic-dev-ai cubic-dev-ai Bot Aug 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The delivered code only applies a fixed default ordering (last operation, newest first) and never implements the interactive sorting described in the PR: headers are not clickable, there is no direction toggle, and no sort-direction indicator. The Environment name can't be sorted at all, and the claimed 'name toggle' test is absent. Either implement the header toggle (useState for sort key/direction, clickable headers, indicator), or update the PR scope/title to reflect that only the default newest-first ordering is shipped.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx, line 223:

<comment>The delivered code only applies a fixed default ordering (last operation, newest first) and never implements the interactive sorting described in the PR: headers are not clickable, there is no direction toggle, and no sort-direction indicator. The Environment name can't be sorted at all, and the claimed 'name toggle' test is absent. Either implement the header toggle (useState for sort key/direction, clickable headers, indicator), or update the PR scope/title to reflect that only the default newest-first ordering is shipped.</comment>

<file context>
@@ -209,6 +214,16 @@ export function EnvironmentSection({
+    }
+
+    return [...items].sort(
+      (environmentA, environmentB) => lastOperationTimestamp(environmentB) - lastOperationTimestamp(environmentA)
+    )
+  }, [items, type])
</file context>
Fix with cubic

)
}, [items, type])

const EmptyState = () =>
match(type)
.with(EnvironmentModeEnum.PREVIEW, () => {
Expand Down Expand Up @@ -295,7 +310,7 @@ export function EnvironmentSection({
</Table.Header>

<Table.Body className="divide-y divide-neutral">
{items.map((environmentOverview) => (
{sortedItems.map((environmentOverview) => (
<EnvRow
key={environmentOverview.id}
overview={environmentOverview}
Expand Down
27 changes: 26 additions & 1 deletion libs/domains/environments/feature/src/lib/environments-table/environments-table.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,12 @@ jest.mock('./environments-table-action-bar', () => ({
EnvironmentsTableActionBar: () => <div data-testid="environments-table-action-bar" />,
}))

function environmentOverview(id: string, mode: EnvironmentModeEnum, name: string): EnvironmentOverviewResponse {
function environmentOverview(
id: string,
mode: EnvironmentModeEnum,
name: string,
lastDeploymentDate?: string
): EnvironmentOverviewResponse {
return {
id,
mode,
Expand All @@ -48,6 +53,7 @@ function environmentOverview(id: string, mode: EnvironmentModeEnum, name: string
service_count: 0,
managed_by: 'QOVERY',
},
...(lastDeploymentDate ? { deployment_status: { last_deployment_date: lastDeploymentDate } } : {}),
} as EnvironmentOverviewResponse
}

Expand Down Expand Up @@ -94,6 +100,25 @@ describe('EnvironmentsTable', () => {
])
})

it('should sort ephemeral environments by last operation with newer environments first', () => {
mockUseProject.mockReturnValue({ data: { name: 'Project Alpha' } })
mockUseEnvironmentsOverview.mockReturnValue({
data: [
environmentOverview('env-1', EnvironmentModeEnum.PREVIEW, 'Bravo', '2024-03-01T00:00:00Z'),
environmentOverview('env-2', EnvironmentModeEnum.PREVIEW, 'Alpha', '2024-01-01T00:00:00Z'),
environmentOverview('env-3', EnvironmentModeEnum.PREVIEW, 'Charlie', '2024-02-01T00:00:00Z'),
],
})

renderWithProviders(<EnvironmentsTable />)

expect(screen.getAllByRole('link', { name: /^(Alpha|Bravo|Charlie)$/ }).map((link) => link.textContent)).toEqual([
'Bravo',
'Charlie',
'Alpha',
])
})

it('should preserve checkbox focus when selecting an environment', async () => {
mockUseProject.mockReturnValue({ data: { name: 'Project Alpha' } })
mockUseEnvironmentsOverview.mockReturnValue({
Expand Down
Loading