From 74bd5ebb46e637ead7daf954ceba2a8e18d142ea Mon Sep 17 00:00:00 2001
From: Rob Donigian <rob_donigian@tsco.org>
Date: Thu, 17 Oct 2024 14:14:47 -0400
Subject: [PATCH] expose the dataGridProps from ProgressReportsGrid

It seems as if when the slot props where merging, the slot props from the expanded where not merging properly, causing the filter to not work.

Instead of duplicating the code for generating the dataGridProps, we are instead exposing the dataGripProps "build" and reusing it in the Expanded view.
---
 .../ProgressReportsExpandedGrid.tsx           | 25 +++++---
 .../ProgressReportsGrid.tsx                   | 61 +++++++++++--------
 2 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpandedGrid.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpandedGrid.tsx
index b1d93e004..571cbc1a5 100644
--- a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpandedGrid.tsx
+++ b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpandedGrid.tsx
@@ -8,6 +8,7 @@ import {
   useGridApiRef,
 } from '@mui/x-data-grid-pro';
 import { entries } from '@seedcompany/common';
+import { merge } from 'lodash';
 import { useMemo } from 'react';
 import { extendSx } from '~/common';
 import {
@@ -29,6 +30,7 @@ import {
   ProgressReportsColumnMap,
   ProgressReportsGrid,
   ProgressReportsGridProps,
+  useProgressReportsDataGrid,
 } from './ProgressReportsGrid';
 
 const COLLAPSED_ROW_HEIGHT = 54;
@@ -47,9 +49,6 @@ const wrapForNonExpansion = (renderCell?: GridColDef['renderCell']) => {
 
         display: 'flex',
         alignItems: 'center',
-        '.MuiDataGrid-cell--textCenter &': {
-          justifyContent: 'center',
-        },
       }}
     >
       {renderCell ? renderCell(props) : props.formattedValue ?? props.value}
@@ -116,18 +115,24 @@ export const ProgressReportsExpandedGrid = (
   props: Omit<ProgressReportsGridProps, 'columns'>
 ) => {
   const apiRef = useGridApiRef();
-
   const { expanded, onMouseDown, onRowClick } = useExpandedSetup();
 
-  const slotProps = useMemo(
-    (): DataGridProps['slotProps'] => ({
-      row: {
-        onMouseDown,
-      },
-    }),
+  const dataGridProps = useProgressReportsDataGrid({
+    ...props,
+    apiRef,
+    columns,
+  });
+
+  const mouseSlotProps = useMemo(
+    (): DataGridProps['slotProps'] => ({ row: { onMouseDown } }),
     [onMouseDown]
   );
 
+  const slotProps = useMemo(
+    () => merge({}, dataGridProps.slotProps, mouseSlotProps),
+    [dataGridProps.slotProps, mouseSlotProps]
+  );
+
   return (
     <ExpansionContext.Provider value={expanded}>
       <ProgressReportsGrid
diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx
index a72371314..e8a39cd57 100644
--- a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx
+++ b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx
@@ -39,6 +39,40 @@ export type ProgressReportColumnMapShape = Record<
 
 export const ExpansionMarker = 'expandable';
 
+export const useProgressReportsDataGrid = ({
+  quarter,
+  ...props
+}: ProgressReportsGridProps) => {
+  const source = useMemo(() => {
+    return {
+      query: ProgressReportsDocument,
+      variables: {
+        input: {
+          filter: {
+            start: {
+              afterInclusive: quarter.startOf('quarter'),
+            },
+            end: {
+              beforeInclusive: quarter.endOf('quarter'),
+            },
+          },
+        },
+      },
+      listAt: 'progressReports',
+      initialInput: {
+        sort: 'status',
+        order: 'DESC',
+      },
+    } as const;
+  }, [quarter]);
+  const [dataGridProps] = useDataGridSource({
+    ...source,
+    apiRef: props.apiRef,
+  });
+
+  return dataGridProps;
+};
+
 export const ProgressReportsColumnMap = {
   project: {
     headerName: 'Project',
@@ -179,32 +213,7 @@ export const ProgressReportsGrid = ({
   quarter,
   ...props
 }: ProgressReportsGridProps) => {
-  const source = useMemo(() => {
-    return {
-      query: ProgressReportsDocument,
-      variables: {
-        input: {
-          filter: {
-            start: {
-              afterInclusive: quarter.startOf('quarter'),
-            },
-            end: {
-              beforeInclusive: quarter.endOf('quarter'),
-            },
-          },
-        },
-      },
-      listAt: 'progressReports',
-      initialInput: {
-        sort: 'status',
-        order: 'DESC',
-      },
-    } as const;
-  }, [quarter]);
-  const [dataGridProps] = useDataGridSource({
-    ...source,
-    apiRef: props.apiRef,
-  });
+  const dataGridProps = useProgressReportsDataGrid({ quarter, ...props });
 
   const slots = useMemo(
     () =>