feat(webui): add reset column sizes button to grid toolbar

Author: mohamadyasser118

internal/webui/src/components/GridToolbar/GridToolbar.tsx

@@ -1,20 +1,27 @@
 import AddIcon from "@mui/icons-material/Add";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import { Button } from '@mui/material';
 import { GridToolbarColumnsButton, GridToolbarContainer, GridToolbarFilterButton } from "@mui/x-data-grid";
 
 type Props = {
   onNewClick: () => void;
+  onResetColumns?: () => void;
   children?: React.ReactNode;
 };
 
 export const GridToolbar = (props: Props) => {
-  const { onNewClick, children } = props;
+  const { onNewClick, onResetColumns, children } = props;
 
   return (
     <GridToolbarContainer>
       <GridToolbarColumnsButton slotProps={{ button: { size: "small" } }} />
       <GridToolbarFilterButton slotProps={{ button: { size: "small" } }} />
       <Button startIcon={<AddIcon />} onClick={onNewClick}>New</Button>
+      {onResetColumns && (
+        <Button startIcon={<RestartAltIcon />} onClick={onResetColumns}>
+          Reset Columns
+        </Button>
+      )}
       {children}
     </GridToolbarContainer>
   );

internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx

@@ -19,7 +19,8 @@ export const SourcesGrid = () => {
     columnVisibility, 
     columnsWithSizing, 
     onColumnVisibilityChange, 
-    onColumnResize
+    onColumnResize,
+    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}

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