Merge pull request #1595 from SeedCompany/progress-report-feedback

ProgressReportGrid: Product feedback

src/scenes/Dashboard/ProgressReportsWidget/ExpansionCell.tsx

@@ -0,0 +1,42 @@
+import { Box } from '@mui/material';
+import {
+  GridState,
+  GridRenderCellParams as RenderCellParams,
+  useGridSelector,
+} from '@mui/x-data-grid';
+import { ChildrenProp, extendSx, StyleProps } from '~/common';
+
+export const ExpansionCell = ({
+  id,
+  api,
+  sx,
+  className,
+  children,
+}: Pick<RenderCellParams, 'id' | 'api'> & StyleProps & ChildrenProp) => {
+  const selectedRows = useGridSelector(
+    { current: api },
+    (state: GridState) => state.rowSelection
+  );
+  const isExpanded = selectedRows.includes(id);
+
+  return (
+    <Box
+      sx={[
+        {
+          overflow: 'hidden',
+          textWrap: 'wrap',
+          display: isExpanded ? 'contents' : '-webkit-box',
+          WebkitLineClamp: '2',
+          WebkitBoxOrient: 'vertical',
+
+          // No trailing spacing on response
+          '& > *:last-child': { mb: 0 },
+        },
+        ...extendSx(sx),
+      ]}
+      className={className}
+    >
+      {children}
+    </Box>
+  );
+};

src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsCollapsedGrid.tsx

@@ -24,12 +24,14 @@ const columns = entries({
   teamNews: {
     ...ProgressReportsColumnMap.teamNews,
     renderCell: VariantResponseIconCell,
+    align: 'center',
     headerAlign: 'center',
     width: 95,
   },
   communityStories: {
     ...ProgressReportsColumnMap.communityStories,
     renderCell: VariantResponseIconCell,
+    align: 'center',
     headerAlign: 'center',
     width: 80,
   },
@@ -42,7 +44,8 @@ const initialState = {
   columns: {
     columnVisibilityModel: {
       ...getInitialVisibility(columns),
-      'varianceExplanation.comments': false,
+      viewReport: false,
+      'varianceExplanation.reasons': false,
       'engagement.project.isMember': false,
       'engagement.project.pinned': false,
     },

src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpandedGrid.tsx

@@ -63,7 +63,7 @@ const columns = entries(ProgressReportsColumnMap).map(([name, col]) => ({
 
 const initialState = {
   pinnedColumns: {
-    left: columns.slice(0, 2).map((column) => column.field),
+    left: columns.slice(0, 3).map((column) => column.field),
   },
   columns: {
     columnVisibilityModel: {

src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx

@@ -1,4 +1,5 @@
-import { Box } from '@mui/material';
+import { Link as LinkIcon } from '@mui/icons-material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import {
   DataGridPro,
   DataGridProProps as DataGridProps,
@@ -23,11 +24,11 @@ import {
   useDataGridSource,
 } from '~/components/Grid';
 import { Link } from '~/components/Routing';
+import { ExpansionCell } from './ExpansionCell';
 import {
   ProgressReportsDataGridRowFragment as ProgressReport,
   ProgressReportsDocument,
 } from './progressReportsDataGridRow.graphql';
-import { RichTextCell } from './RichTextCell';
 import { VariantResponseCell } from './VariantResponseCell';
 
 export type ProgressReportColumnMapShape = Record<
@@ -60,6 +61,28 @@ export const ProgressReportsColumnMap = {
     ),
     hideable: false,
   },
+  viewReport: {
+    headerName: 'View',
+    field: 'id',
+    width: 54,
+    display: 'flex',
+    renderCell: ({ row }) => (
+      <Tooltip title="View Report">
+        <IconButton
+          size="small"
+          color="primary"
+          component={Link}
+          to={`/progress-reports/${row.id}`}
+        >
+          <LinkIcon />
+        </IconButton>
+      </Tooltip>
+    ),
+    filterable: false,
+    sortable: false,
+    hideable: false,
+    resizable: false,
+  },
   status: {
     headerName: 'Status',
     ...enumColumn(ProgressReportStatusList, ProgressReportStatusLabels, {
@@ -97,16 +120,19 @@ export const ProgressReportsColumnMap = {
     renderCell: VariantResponseCell,
     cellClassName: ExpansionMarker,
   },
-  'varianceExplanation.comments': {
-    headerName: 'Variance Explanation',
+  varianceExplanation: {
+    headerName: 'Explanation of Progress',
+    field: 'varianceExplanation.reasons',
     width: 400,
     sortable: false,
     filterable: false,
     valueGetter: (_, { varianceExplanation }) =>
-      varianceExplanation.comments.value,
+      varianceExplanation.reasons.value[0],
     renderCell: (props) => (
       <Box my={1}>
-        <RichTextCell {...props} />
+        <ExpansionCell {...props}>
+          <Typography variant="body2">{props.value}</Typography>
+        </ExpansionCell>
       </Box>
     ),
     cellClassName: ExpansionMarker,
@@ -145,6 +171,7 @@ export const ProgressReportsGrid = (props: DataGridProps) => {
       listAt: 'progressReports',
       initialInput: {
         sort: 'status',
+        order: 'DESC',
       },
     } as const;
   });

src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsWidget.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { CalendarDate } from '~/common';
 import { flexLayout } from '~/components/Grid';
 import {
   TableWidget,
@@ -12,13 +14,15 @@ export const ProgressReportsWidget = ({
   expanded,
   ...props
 }: WidgetProps & { expanded: boolean }) => {
+  const [currentDue] = useState(() => CalendarDate.now().minus({ quarter: 1 }));
+
   const Grid = expanded
     ? ProgressReportsExpandedGrid
     : ProgressReportsCollapsedGrid;
   return (
     <Widget {...props}>
       <WidgetHeader
-        title="Quarterly Reports"
+        title={`Quarterly Reports - Q${currentDue.fiscalQuarter} FY${currentDue.fiscalYear}`}
         to={expanded ? '/dashboard' : '/dashboard/progress-reports'}
         expanded={expanded}
       />

src/scenes/Dashboard/ProgressReportsWidget/RichTextCell.tsx

@@ -1,54 +1,26 @@
 import { Box, Typography } from '@mui/material';
-import {
-  GridState,
-  GridRenderCellParams as RenderCellParams,
-  useGridSelector,
-} from '@mui/x-data-grid';
-import { extendSx, RichTextJson, StyleProps } from '~/common';
+import { GridRenderCellParams as RenderCellParams } from '@mui/x-data-grid';
+import { RichTextJson, StyleProps } from '~/common';
 import {
   BlockProps,
   Renderers,
   RichTextView,
   Text,
 } from '../../../components/RichText';
+import { ExpansionCell } from './ExpansionCell';
 import { ProgressReportsDataGridRowFragment as ProgressReport } from './progressReportsDataGridRow.graphql';
 
 type CellParams = RenderCellParams<ProgressReport, RichTextJson>;
 
-export const RichTextCell = ({
-  id,
-  value,
-  api,
-  sx,
-  className,
-}: Pick<CellParams, 'value' | 'id' | 'api'> & StyleProps) => {
-  const selectedRows = useGridSelector(
-    { current: api },
-    (state: GridState) => state.rowSelection
-  );
-  const isExpanded = selectedRows.includes(id);
-
-  if (!value) return null;
+export const RichTextCell = (
+  props: Pick<CellParams, 'value' | 'id' | 'api'> & StyleProps
+) => {
+  if (!props.value) return null;
 
   return (
-    <Box
-      sx={[
-        {
-          overflow: 'hidden',
-          textWrap: 'wrap',
-          display: isExpanded ? 'contents' : '-webkit-box',
-          WebkitLineClamp: '2',
-          WebkitBoxOrient: 'vertical',
-
-          // No trailing spacing on response
-          '& > *:last-child': { mb: 0 },
-        },
-        ...extendSx(sx),
-      ]}
-      className={className}
-    >
-      <RichTextView data={value} renderers={renderers} />
-    </Box>
+    <ExpansionCell {...props}>
+      <RichTextView data={props.value} renderers={renderers} />
+    </ExpansionCell>
   );
 };
 

src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql

@@ -35,7 +35,7 @@ fragment progressReportsDataGridRow on ProgressReport {
   }
   varianceExplanation {
     scheduleStatus
-    comments {
+    reasons {
       value
     }
   }