From 3823a76f928445ba7480245d8496edb9593321c2 Mon Sep 17 00:00:00 2001
From: mohamadyasser118 <mohamadyasser118@gmail.com>
Date: Tue, 24 Mar 2026 02:26:46 +0200
Subject: [PATCH] feat(webui): add reset column sizes button to all grid
 toolbars

- Added onResetColumns prop to SourcesGridToolbar, MetricsGridToolbar,
  and PresetsGridToolbar
- Wired resetColumnSizes from useGridState into all three grids
---
 .../MetricsPage/components/MetricsGrid/MetricsGrid.tsx    | 5 +++--
 .../components/MetricsGridToolbar/MetricsGridToolbar.tsx  | 8 ++++++--
 .../PresetsPage/components/PresetsGrid/PresetsGrid.tsx    | 5 +++--
 .../components/PresetsGridToolbar/PresetsGridToolbar.tsx  | 8 ++++++--
 .../SourcesPage/components/SourcesGrid/SourcesGrid.tsx    | 5 +++--
 .../SourcesGrid/components/SourcesGridToolbar.tsx         | 8 ++++++--
 6 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.tsx b/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.tsx
index 872cce28ed..7b7ee0c7ac 100644
--- a/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.tsx
+++ b/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.tsx
@@ -21,7 +21,8 @@ export const MetricsGrid = () => {
     columnVisibility, 
     columnsWithSizing, 
     onColumnVisibilityChange, 
-    onColumnWidthChange
+    onColumnWidthChange,
+    resetColumnSizes
   } = useGridState('METRICS_GRID', columns);
 
   const rows: MetricGridRow[] | [] = useMemo(() => {
@@ -59,7 +60,7 @@ export const MetricsGrid = () => {
           rows={rows}
           pageSizeOptions={[]}
           slots={{ 
-            toolbar: () => <MetricsGridToolbar />
+            toolbar: () => <MetricsGridToolbar onResetColumns={resetColumnSizes} />
           }}
           columnVisibilityModel={columnVisibility}
           onColumnVisibilityModelChange={onColumnVisibilityChange}
diff --git a/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/MetricsGridToolbar/MetricsGridToolbar.tsx b/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/MetricsGridToolbar/MetricsGridToolbar.tsx
index f0f6c57292..5855d93b3b 100644
--- a/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/MetricsGridToolbar/MetricsGridToolbar.tsx
+++ b/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/MetricsGridToolbar/MetricsGridToolbar.tsx
@@ -1,15 +1,19 @@
 import { GridToolbar } from "components/GridToolbar/GridToolbar";
 import { useMetricFormContext } from "contexts/MetricForm/MetricForm.context";
 
-export const MetricsGridToolbar = () => {
+export const MetricsGridToolbar = ({ onResetColumns }: { onResetColumns: () => void }) => {
   const { handleOpen, setData } = useMetricFormContext();
 
+  type Props = {
+    onResetColumns: () => void;
+  };
+
   const onNewClick = () => {
     setData(undefined);
     handleOpen();
   };
 
   return (
-    <GridToolbar onNewClick={onNewClick} />
+    <GridToolbar onNewClick={onNewClick} onResetColumns={onResetColumns} />
   );
 };
diff --git a/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx b/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx
index 4ad133af69..7ef672b1f8 100644
--- a/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx
+++ b/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx
@@ -21,7 +21,8 @@ export const PresetsGrid = () => {
     columnVisibility, 
     columnsWithSizing, 
     onColumnVisibilityChange, 
-    onColumnWidthChange
+    onColumnWidthChange,
+    resetColumnSizes
   } = useGridState('PRESETS_GRID', columns);
 
   const rows: PresetGridRow[] | [] = useMemo(() => {
@@ -59,7 +60,7 @@ export const PresetsGrid = () => {
           rows={rows}
           pageSizeOptions={[]}
           slots={{ 
-            toolbar: () => <PresetsGridToolbar />
+            toolbar: () => <PresetsGridToolbar onResetColumns={resetColumnSizes} />
           }}
           columnVisibilityModel={columnVisibility}
           onColumnVisibilityModelChange={onColumnVisibilityChange}
diff --git a/internal/webui/src/pages/PresetsPage/components/PresetsGrid/components/PresetsGridToolbar/PresetsGridToolbar.tsx b/internal/webui/src/pages/PresetsPage/components/PresetsGrid/components/PresetsGridToolbar/PresetsGridToolbar.tsx
index 245270435d..01177ea7cd 100644
--- a/internal/webui/src/pages/PresetsPage/components/PresetsGrid/components/PresetsGridToolbar/PresetsGridToolbar.tsx
+++ b/internal/webui/src/pages/PresetsPage/components/PresetsGrid/components/PresetsGridToolbar/PresetsGridToolbar.tsx
@@ -1,7 +1,11 @@
 import { GridToolbar } from "components/GridToolbar/GridToolbar";
 import { usePresetFormContext } from "contexts/PresetForm/PresetForm.context";
 
-export const PresetsGridToolbar = () => {
+type Props = {
+  onResetColumns: () => void;
+};
+
+export const PresetsGridToolbar = ({ onResetColumns }: Props) => {
   const { handleOpen, setData } = usePresetFormContext();
 
   const onNewClick = () => {
@@ -10,6 +14,6 @@ export const PresetsGridToolbar = () => {
   };
 
   return (
-    <GridToolbar onNewClick={onNewClick} />
+    <GridToolbar onNewClick={onNewClick} onResetColumns={onResetColumns} />
   );
 };
diff --git a/internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx b/internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx
index 50f52d8698..509fc903e1 100644
--- a/internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx
+++ b/internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx
@@ -19,7 +19,8 @@ export const SourcesGrid = () => {
     columnVisibility, 
     columnsWithSizing, 
     onColumnVisibilityChange, 
-    onColumnWidthChange
+    onColumnWidthChange,
+    resetColumnSizes
   } = useGridState('SOURCES_GRID', columns, {
     Kind: false,
     IncludePattern: false,
@@ -52,7 +53,7 @@ export const SourcesGrid = () => {
           rows={data ?? []}
           pageSizeOptions={[]}
           slots={{ 
-            toolbar: () => <SourcesGridToolbar />
+            toolbar: () => <SourcesGridToolbar onResetColumns={resetColumnSizes} />
           }}
           columnVisibilityModel={columnVisibility}
           onColumnVisibilityModelChange={onColumnVisibilityChange}
diff --git a/internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/SourcesGridToolbar.tsx b/internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/SourcesGridToolbar.tsx
index e7240d3ee4..4e48893c39 100644
--- a/internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/SourcesGridToolbar.tsx
+++ b/internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/SourcesGridToolbar.tsx
@@ -2,7 +2,11 @@ import { GridToolbar } from "components/GridToolbar/GridToolbar";
 import { useSourceFormContext } from "contexts/SourceForm/SourceForm.context";
 import { SourceFormActions } from "contexts/SourceForm/SourceForm.types";
 
-export const SourcesGridToolbar = () => {
+type Props = {
+  onResetColumns: () => void;
+};
+
+export const SourcesGridToolbar = ({ onResetColumns }: Props) => {
   const { handleOpen, setData, setAction } = useSourceFormContext();
 
   const onNewClick = () => {
@@ -12,6 +16,6 @@ export const SourcesGridToolbar = () => {
   };
 
   return (
-    <GridToolbar onNewClick={onNewClick} />
+    <GridToolbar onNewClick={onNewClick} onResetColumns={onResetColumns} />
   );
 };