Convert People List to DataGrid (#1641)

Author: rdonigian

src/api/schema/typePolicies/typePolicies.base.ts

@@ -90,6 +90,7 @@ export const typePolicies: TypePolicies = {
       projects: {},
       engagements: {},
       progressReports: {},
+      users: {},
     },
   },
 };

src/components/Grid/Columns/UserNameColumn.tsx

@@ -0,0 +1,32 @@
+import { GridColDef } from '@mui/x-data-grid-pro';
+import { Merge } from 'type-fest';
+import { UserLookupItem } from '../../form/Lookup';
+import { Link } from '../../Routing';
+import {
+  columnWithDefaults,
+  RowLike,
+  WithValueGetterReturning,
+} from '../ColumnTypes/definition.types';
+import { textColumn } from '../ColumnTypes/textColumn';
+
+export const UserNameColumn = <
+  const Input extends Merge<
+    GridColDef<Row>,
+    WithValueGetterReturning<UserLookupItem, Row>
+  >,
+  Row extends RowLike
+>({
+  valueGetter,
+  ...overrides
+}: Input) =>
+  columnWithDefaults<Row>()(overrides, {
+    ...textColumn<Row>(),
+    headerName: 'Name',
+    width: 350,
+    valueGetter: (...args) => valueGetter(...args).fullName,
+    renderCell: ({ value, row, colDef, api }) => {
+      const user = valueGetter(null as never, row, colDef, { current: api });
+      return <Link to={`/users/${user.id}`}>{value}</Link>;
+    },
+    hideable: false,
+  });

src/components/UserDataGrid/UserColumns.tsx

@@ -0,0 +1,78 @@
+import {
+  DataGridProProps as DataGridProps,
+  GridColDef,
+  GridToolbarColumnsButton,
+  GridToolbarFilterButton,
+} from '@mui/x-data-grid-pro';
+import { RoleLabels, RoleList } from '~/api/schema.graphql';
+import {
+  booleanColumn,
+  getInitialVisibility,
+  multiEnumColumn,
+  QuickFilterButton,
+  QuickFilterResetButton,
+  QuickFilters,
+  textColumn,
+  Toolbar,
+  useFilterToggle,
+} from '../Grid';
+import { UserNameColumn } from '../Grid/Columns/UserNameColumn';
+import { UserDataGridRowFragment as User } from './userDataGridRow.graphql';
+
+export const UserColumns: Array<GridColDef<User>> = [
+  UserNameColumn({
+    field: 'fullName',
+    headerName: 'Name',
+    valueGetter: (_, user) => user,
+    serverFilter: (value) => ({ name: value }),
+  }),
+  {
+    headerName: 'Title',
+    field: 'title',
+    width: 350,
+    ...textColumn(),
+    valueGetter: (_, row) => row.title.value,
+  },
+  {
+    headerName: 'Roles',
+    description: 'Roles',
+    field: 'roles',
+    minWidth: 200,
+    flex: 1,
+    ...multiEnumColumn(RoleList, RoleLabels),
+    valueGetter: (_, { roles }) => {
+      return roles.value;
+    },
+  },
+  {
+    headerName: 'Pinned',
+    field: 'pinned',
+    ...booleanColumn(),
+    valueGetter: (_, row) => row.pinned,
+  },
+];
+
+export const UserInitialState = {
+  pinnedColumns: {
+    left: UserColumns.slice(0, 1).map((column) => column.field),
+  },
+  columns: {
+    columnVisibilityModel: {
+      ...getInitialVisibility(UserColumns),
+      pinned: false,
+    },
+  },
+} satisfies DataGridProps['initialState'];
+
+export const UserToolbar = () => (
+  <Toolbar sx={{ justifyContent: 'flex-start', gap: 2 }}>
+    <GridToolbarColumnsButton />
+    <GridToolbarFilterButton />
+    <QuickFilters sx={{ flex: 1 }}>
+      <QuickFilterResetButton />
+      <QuickFilterButton {...useFilterToggle('pinned')}>
+        Pinned
+      </QuickFilterButton>
+    </QuickFilters>
+  </Toolbar>
+);

src/components/UserDataGrid/userDataGridRow.graphql

@@ -0,0 +1,14 @@
+fragment userDataGridRow on User {
+  id
+  ...UserLookupItem
+  roles {
+    value
+  }
+  title {
+    value
+  }
+  email {
+    value
+  }
+  ...TogglePin
+}

src/scenes/Users/List/UserFilterOptions.tsx

@@ -0,0 +1,58 @@
+import {
+  DataGridPro as DataGrid,
+  DataGridProProps as DataGridProps,
+} from '@mui/x-data-grid-pro';
+import { merge } from 'lodash';
+import { useMemo } from 'react';
+import {
+  DefaultDataGridStyles,
+  flexLayout,
+  noFooter,
+  noHeaderFilterButtons,
+  useDataGridSource,
+} from '~/components/Grid';
+import {
+  UserColumns,
+  UserInitialState,
+  UserToolbar,
+} from '~/components/UserDataGrid/UserColumns';
+import { UserDataGridRowFragment as People } from '~/components/UserDataGrid/userDataGridRow.graphql';
+import { UsersDocument } from './users.graphql';
+
+export const UserGrid = () => {
+  const [dataGridProps] = useDataGridSource({
+    query: UsersDocument,
+    variables: {},
+    listAt: 'users',
+    initialInput: {
+      sort: 'fullName',
+    },
+  });
+
+  const slots = useMemo(
+    () =>
+      merge({}, DefaultDataGridStyles.slots, dataGridProps.slots, {
+        toolbar: UserToolbar,
+      } satisfies DataGridProps['slots']),
+    [dataGridProps.slots]
+  );
+
+  const slotProps = useMemo(
+    () => merge({}, DefaultDataGridStyles.slotProps, dataGridProps.slotProps),
+    [dataGridProps.slotProps]
+  );
+
+  return (
+    <DataGrid<People>
+      {...DefaultDataGridStyles}
+      {...dataGridProps}
+      slots={slots}
+      slotProps={slotProps}
+      columns={UserColumns}
+      initialState={UserInitialState}
+      headerFilters
+      hideFooter
+      sx={[flexLayout, noHeaderFilterButtons, noFooter]}
+    />
+  );
+};

src/scenes/Users/List/UserGrid.tsx

@@ -1,107 +1,26 @@
-import { TabList as ActualTabList, TabContext, TabPanel } from '@mui/lab';
-import {
-  type Tabs as __Tabs,
-  Divider,
-  Grid,
-  Skeleton,
-  Tab,
-  Typography,
-} from '@mui/material';
-import { useRef } from 'react';
+import { Paper, Stack, Typography } from '@mui/material';
 import { Helmet } from 'react-helmet-async';
-import { makeStyles } from 'tss-react/mui';
-import { User } from '~/api/schema.graphql';
-import { useNumberFormatter } from '../../../components/Formatters';
-import { ContentContainer } from '../../../components/Layout';
-import { List, useListQuery } from '../../../components/List';
-import { SortButtonDialog, useSort } from '../../../components/Sort';
-import { UserListItemCardLandscape as UserCard } from '../../../components/UserListItemCard';
-import { useUserFilters } from './UserFilterOptions';
-import { UsersDocument } from './users.graphql';
-import { UserSortOptions } from './UserSortOptions';
-
-const TabList = ActualTabList as typeof __Tabs;
-
-const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
-  options: {
-    margin: spacing(3, 0),
-  },
-  items: {
-    maxWidth: breakpoints.values.sm,
-  },
-  tabPanel: {
-    overflowY: 'auto',
-    // allow card shadow to bleed over instead of cutting it off
-    padding: spacing(0, 0, 0, 2),
-    margin: spacing(0, 0, 0, -2),
-  },
-  total: {
-    marginTop: spacing(2),
-  },
-}));
+import { UserGrid } from './UserGrid';
 
 export const UserList = () => {
-  const sort = useSort<User>();
-  const [filters, setFilters] = useUserFilters();
-  const list = useListQuery(UsersDocument, {
-    listAt: (data) => data.users,
-    variables: {
-      input: {
-        ...sort.value,
-        filter: filters.tab === 'pinned' ? { pinned: true } : {},
-      },
-    },
-  });
-
-  const { classes } = useStyles();
-  const formatNumber = useNumberFormatter();
-  const scrollRef = useRef<HTMLElement>(null);
-
   return (
-    <ContentContainer>
+    <Stack sx={{ flex: 1, padding: 4, pt: 2 }}>
       <Helmet title="People" />
-      <Typography variant="h2" paragraph>
-        People
-      </Typography>
-      <Grid container spacing={1} className={classes.options}>
-        <Grid item>
-          <SortButtonDialog {...sort}>
-            <UserSortOptions />
-          </SortButtonDialog>
-        </Grid>
-      </Grid>
-
-      <TabContext value={filters.tab}>
-        <TabList
-          onChange={(_e, tab) => setFilters({ ...filters, tab })}
-          aria-label="user navigation tabs"
-          className={classes.items}
-        >
-          <Tab label="Pinned" value="pinned" />
-          <Tab label="All" value="all" />
-        </TabList>
-        <Divider className={classes.items} />
-        <TabPanel
-          value={filters.tab}
-          className={classes.tabPanel}
-          ref={scrollRef}
+      <Stack component="main" sx={{ flex: 1 }}>
+        <Typography variant="h2" paragraph>
+          People
+        </Typography>
+        <Paper
+          sx={(theme) => ({
+            containerType: 'size',
+            flex: 1,
+            minHeight: 375,
+            maxWidth: `${theme.breakpoints.values.lg}px`,
+          })}
         >
-          <Typography variant="h3" className={classes.total}>
-            {list.data ? (
-              <>{formatNumber(list.data.total)} People</>
-            ) : (
-              <Skeleton width="9ch" />
-            )}
-          </Typography>
-          <List
-            {...list}
-            classes={{ container: classes.items }}
-            renderItem={(item) => <UserCard user={item} />}
-            renderSkeleton={<UserCard />}
-            scrollRef={scrollRef}
-          />
-        </TabPanel>
-      </TabContext>
-    </ContentContainer>
+          <UserGrid />
+        </Paper>
+      </Stack>
+    </Stack>
   );
 };

src/scenes/Users/List/UserList.tsx

@@ -2,6 +2,7 @@ query Users($input: UserListInput) {
   users(input: $input) {
     items {
       ...UserListItem
+      ...userDataGridRow
     }
     ...Pagination
   }