feat(webui): add reset column sizes button to Metrics and Presets grids

- Wired resetColumnSizes through MetricsGridToolbar and PresetsGridToolbar

Author: mohamadyasser118

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}

internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/MetricsGridToolbar/MetricsGridToolbar.tsx

@@ -1,7 +1,11 @@
 import { GridToolbar } from "components/GridToolbar/GridToolbar";
 import { useMetricFormContext } from "contexts/MetricForm/MetricForm.context";
 
-export const MetricsGridToolbar = () => {
+type Props = {
+  onResetColumns: () => void;
+};
+
+export const MetricsGridToolbar = ({ onResetColumns }: Props) => {
   const { handleOpen, setData } = useMetricFormContext();
 
   const onNewClick = () => {
@@ -10,6 +14,6 @@ export const MetricsGridToolbar = () => {
   };
 
   return (
-    <GridToolbar onNewClick={onNewClick} />
+    <GridToolbar onNewClick={onNewClick} onResetColumns={onResetColumns} />
   );
 };

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}

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} />
   );
 };