From 2d77ce90b8ae1c2d3b43ed1acb6b4facdb6df02b Mon Sep 17 00:00:00 2001
From: Melvin Zottola <mzottola@qovery.com>
Date: Thu, 22 Jan 2026 16:27:52 +0100
Subject: [PATCH] feat(audit-log) Enhance timestamp filter usage

* Display by default a "Last 30 days" badge.
* Set the timestamp filter header always selected

QOV-1528
---
 .../ui/filter-section/filter-section.spec.tsx | 15 ++++----
 .../lib/ui/filter-section/filter-section.tsx  | 34 +++++++++++++++----
 .../table-head-datepicker.tsx                 |  2 +-
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/libs/pages/events/src/lib/ui/filter-section/filter-section.spec.tsx b/libs/pages/events/src/lib/ui/filter-section/filter-section.spec.tsx
index f0787a92bbb..52a0b7b65e0 100644
--- a/libs/pages/events/src/lib/ui/filter-section/filter-section.spec.tsx
+++ b/libs/pages/events/src/lib/ui/filter-section/filter-section.spec.tsx
@@ -31,8 +31,9 @@ describe('FilterSection', () => {
     expect(baseElement).toBeTruthy()
   })
 
-  it('should not render any badges when no filters are applied', () => {
+  it('should render only Timestamp badge when no filters are applied', () => {
     renderWithProviders(<FilterSection {...props} />)
+    screen.getByText(/Timestamp:/)
     expect(screen.queryByRole('button', { name: /Clear all filters/i })).not.toBeInTheDocument()
   })
 
@@ -116,8 +117,8 @@ describe('FilterSection', () => {
     )
 
     screen.getByText(/Project:/)
-    const element = container.querySelector('button')
-    expect(element?.textContent).toContain('My Project')
+    const buttons = container.querySelectorAll('button')
+    expect(buttons[1]?.textContent).toContain('My Project')
   })
 
   it('should render environment badge when environmentId is set with selectedItems', () => {
@@ -139,8 +140,8 @@ describe('FilterSection', () => {
     )
 
     screen.getByText(/Environment:/)
-    const element = container.querySelector('button')
-    expect(element?.textContent).toContain('Production')
+    const buttons = container.querySelectorAll('button')
+    expect(buttons[1]?.textContent).toContain('Production')
   })
 
   it('should render target badge when targetId is set with selectedItems', () => {
@@ -163,8 +164,8 @@ describe('FilterSection', () => {
     )
 
     screen.getByText(/Application:/)
-    const element = container.querySelector('button')
-    expect(element?.textContent).toContain('My App')
+    const buttons = container.querySelectorAll('button')
+    expect(buttons[1]?.textContent).toContain('My App')
   })
 
   it('should render multiple badges when multiple filters are set', () => {
diff --git a/libs/pages/events/src/lib/ui/filter-section/filter-section.tsx b/libs/pages/events/src/lib/ui/filter-section/filter-section.tsx
index 5968d62071d..06d5909ba21 100644
--- a/libs/pages/events/src/lib/ui/filter-section/filter-section.tsx
+++ b/libs/pages/events/src/lib/ui/filter-section/filter-section.tsx
@@ -17,6 +17,7 @@ interface Badge {
   key: string
   displayedName: string
   value: string
+  isDeletable: boolean
 }
 
 function buildBadges(
@@ -36,6 +37,14 @@ function buildBadges(
         '" To "' +
         dateYearMonthDayHourMinuteSecond(toDate, true, false) +
         '"',
+      isDeletable: true,
+    })
+  } else {
+    badges.push({
+      key: 'timestamp',
+      displayedName: 'Timestamp',
+      value: 'Last 30 days',
+      isDeletable: false,
     })
   }
   if (queryParams.eventType) {
@@ -43,6 +52,7 @@ function buildBadges(
       key: 'event_type',
       displayedName: 'Event Type',
       value: upperCaseFirstLetter(queryParams.eventType).split('_').join(' '),
+      isDeletable: true,
     })
   }
   if (queryParams.targetType) {
@@ -50,6 +60,7 @@ function buildBadges(
       key: 'target_type',
       displayedName: 'Target Type',
       value: upperCaseFirstLetter(queryParams.targetType).split('_').join(' '),
+      isDeletable: true,
     })
   }
   if (queryParams.triggeredBy) {
@@ -57,6 +68,7 @@ function buildBadges(
       key: 'triggered_by',
       displayedName: 'User',
       value: upperCaseFirstLetter(queryParams.triggeredBy).split('_').join(' '),
+      isDeletable: true,
     })
   }
   if (queryParams.origin) {
@@ -64,6 +76,7 @@ function buildBadges(
       key: 'origin',
       displayedName: 'Source',
       value: upperCaseFirstLetter(queryParams.origin).split('_').join(' '),
+      isDeletable: true,
     })
   }
   if (queryParams.projectId) {
@@ -75,6 +88,7 @@ function buildBadges(
         key: 'project_id',
         displayedName: 'Project',
         value: projectName,
+        isDeletable: true,
       })
     }
   }
@@ -87,6 +101,7 @@ function buildBadges(
         key: 'environment_id',
         displayedName: 'Environment',
         value: environmentName,
+        isDeletable: true,
       })
     }
   }
@@ -101,6 +116,7 @@ function buildBadges(
         key: 'target_id',
         displayedName: targetType,
         value: targetName,
+        isDeletable: true,
       })
     }
   }
@@ -177,11 +193,13 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
               {`${badge.displayedName}: `}
               {badge.key === 'timestamp' && badge.value}
               {badge.key !== 'timestamp' && <Truncate text={badge.value} truncateLimit={23} />}
-              <Icon
-                iconName="xmark"
-                className="text-sm leading-4 text-neutral-300 hover:text-neutral-400"
-                onClick={() => deleteFilter(badge.key, setFilter)}
-              />
+              {badge.isDeletable && (
+                <Icon
+                  iconName="xmark"
+                  className="text-sm leading-4 text-neutral-300 hover:text-neutral-400"
+                  onClick={() => deleteFilter(badge.key, setFilter)}
+                />
+              )}
             </Button>
           ))}
         <div className="flex flex-row-reverse">
@@ -229,7 +247,9 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
                       onClick={() => deleteFilter(badge.key, setFilter)}
                       aria-label="Delete filter"
                     >
-                      <Icon iconName="xmark" className="text-sm leading-4 text-neutral-300 hover:text-neutral-400" />
+                      {badge.isDeletable && (
+                        <Icon iconName="xmark" className="text-sm leading-4 text-neutral-300 hover:text-neutral-400" />
+                      )}
                     </button>
                   </Button>
                   {!isLast && (
@@ -252,7 +272,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
       </div>
 
       {/* RIGHT: Button stays fixed at top-right */}
-      {badges.length > 0 && (
+      {badges.filter((b) => b.isDeletable).length > 0 && (
         <div className="flex-shrink-0 self-start">
           <Button className="gap-2" size="xs" color="neutral" variant="surface" onClick={clearFilter}>
             Clear all filters
diff --git a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
index 430c1005f4b..6a793ff3310 100644
--- a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
+++ b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
@@ -134,7 +134,7 @@ export function TableHeadDatePickerFilter({
               variant={isDark ? 'solid' : 'surface'}
               color="neutral"
               size="xs"
-              className="items-center gap-1.5"
+              className="items-center gap-1.5 bg-brand-500 text-white active:bg-brand-600 hover:[&:not(:active):not(:disabled)]:bg-brand-400"
               onClick={() => {
                 setIsOpenTimestamp(!isOpenTimestamp)
               }}