From 21eccc8bf08afa24080bdf13347a7fa18f6103f3 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 2 Oct 2024 15:04:23 +0300
Subject: [PATCH 1/2] fix: default changes to 7 days

Fixes #2312
---
 .../ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx
index be0ab6dc5..77aca8b8f 100644
--- a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx
+++ b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx
@@ -8,8 +8,8 @@ type Props = {
 
 export const configChangesDefaultDateFilter: URLSearchParamsInit = {
   rangeType: "relative",
-  display: "2 days",
-  range: "now-2d"
+  display: "7 days",
+  range: "now-7d"
 };
 
 export default function ConfigChangesDateRangeFilter({

From 4f3ddd9205ca139c4f2f26de0fd57fe489fc0142 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 2 Oct 2024 15:05:04 +0300
Subject: [PATCH 2/2] feat: show duration filter values on the tab

fixes #2312
---
 src/components/Configs/ConfigPageTabs.tsx |  8 +++++---
 src/pages/config/ConfigChangesPage.tsx    | 10 +++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Configs/ConfigPageTabs.tsx b/src/components/Configs/ConfigPageTabs.tsx
index 211a8b02b..974f9bc67 100644
--- a/src/components/Configs/ConfigPageTabs.tsx
+++ b/src/components/Configs/ConfigPageTabs.tsx
@@ -4,12 +4,14 @@ import TabbedLinks from "../../ui/Tabs/TabbedLinks";
 
 type ConfigPageTabsProps = {
   activeTab: string;
+  daysLabel?: string;
   children: React.ReactNode;
 };
 
 export default function ConfigPageTabs({
   activeTab,
-  children
+  children,
+  daysLabel = "7 days"
 }: ConfigPageTabsProps) {
   const [searchParams] = useSearchParams();
 
@@ -25,7 +27,7 @@ export default function ConfigPageTabs({
         search: `${query}`
       },
       {
-        label: "Changes",
+        label: `Changes (${daysLabel})`,
         key: "Changes",
         path: `/catalog/changes`,
         search: `${query}`
@@ -42,7 +44,7 @@ export default function ConfigPageTabs({
         path: `/catalog/scrapers`
       }
     ];
-  }, [type]);
+  }, [daysLabel, type]);
 
   return (
     <div className={`flex h-full flex-row`}>
diff --git a/src/pages/config/ConfigChangesPage.tsx b/src/pages/config/ConfigChangesPage.tsx
index 96e7d5056..77cfde224 100644
--- a/src/pages/config/ConfigChangesPage.tsx
+++ b/src/pages/config/ConfigChangesPage.tsx
@@ -1,5 +1,6 @@
 import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
 import { ConfigChangeTable } from "@flanksource-ui/components/Configs/Changes/ConfigChangeTable";
+import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { ConfigChangeFilters } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters";
 import ConfigPageTabs from "@flanksource-ui/components/Configs/ConfigPageTabs";
 import { InfoMessage } from "@flanksource-ui/components/InfoMessage";
@@ -9,6 +10,7 @@ import {
   BreadcrumbRoot
 } from "@flanksource-ui/ui/BreadcrumbNav";
 import { PaginationOptions } from "@flanksource-ui/ui/DataTable";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { Head } from "@flanksource-ui/ui/Head";
 import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
 import { refreshButtonClickedTrigger } from "@flanksource-ui/ui/SlidingSideBar/SlidingSideBar";
@@ -25,6 +27,12 @@ export function ConfigChangesPage() {
     sortDirection: "desc"
   });
 
+  const { getTimeRangeFromUrl } = useTimeRangeParams(
+    configChangesDefaultDateFilter
+  );
+
+  const timeRangeValue = getTimeRangeFromUrl();
+
   const page = params.get("page") ?? "1";
   const pageSize = params.get("pageSize") ?? "200";
 
@@ -100,7 +108,7 @@ export function ConfigChangesPage() {
         loading={isLoading || isRefetching}
         contentClass="p-0 h-full"
       >
-        <ConfigPageTabs activeTab="Changes">
+        <ConfigPageTabs activeTab="Changes" daysLabel={timeRangeValue?.display}>
           {error ? (
             <InfoMessage message={errorMessage} />
           ) : (