Create User Projects grid with gql

Author: rdonigian

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

@@ -85,6 +85,11 @@ export const typePolicies: TypePolicies = {
       engagements: {},
     },
   },
+  User: {
+    fields: {
+      projects: {}, // no page merging (infinite scroll)
+    },
+  },
   Query: {
     fields: {
       projects: {},

src/scenes/Users/Detail/Tabs/Projects/UserDetailProjects.tsx

@@ -0,0 +1,10 @@
+import { TabPanelContent } from '~/components/Tabs';
+import { UserProjectsPanel } from './UserProjectPanel/UserProjectsPanel';
+
+export const UserDetailProjects = () => {
+  return (
+    <TabPanelContent>
+      <UserProjectsPanel />
+    </TabPanelContent>
+  );
+};

src/scenes/Users/Detail/Tabs/Projects/UserProjectPanel/UserProjectList.graphql

@@ -0,0 +1,17 @@
+query UserProjectList($userId: ID!, $input: ProjectListInput) {
+  user(id: $userId) {
+    id
+    projects(input: $input) {
+      canRead
+      hasMore
+      total
+      items {
+        ...userProjectDataGridRow
+      }
+    }
+  }
+}
+
+fragment userProjectDataGridRow on Project {
+  ...projectDataGridRow
+}

src/scenes/Users/Detail/Tabs/Projects/UserProjectPanel/UserProjectsPanel.tsx

@@ -0,0 +1,61 @@
+import {
+  DataGridPro as DataGrid,
+  DataGridProProps as DataGridProps,
+} from '@mui/x-data-grid-pro';
+import { merge } from 'lodash';
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import {
+  DefaultDataGridStyles,
+  flexLayout,
+  noFooter,
+  noHeaderFilterButtons,
+  useDataGridSource,
+} from '~/components/Grid';
+import {
+  ProjectDataGridRowFragment as Project,
+  ProjectColumns,
+  ProjectInitialState,
+  ProjectToolbar,
+} from '~/components/ProjectDataGrid';
+import { UserProjectListDocument } from './UserProjectList.graphql';
+
+export const UserProjectsPanel = () => {
+  const { userId = '' } = useParams();
+
+  const [dataGridProps] = useDataGridSource({
+    query: UserProjectListDocument,
+    variables: { userId },
+    listAt: 'user.projects',
+    initialInput: {
+      sort: 'name',
+    },
+  });
+
+  const slots = useMemo(
+    () =>
+      merge({}, DefaultDataGridStyles.slots, dataGridProps.slots, {
+        toolbar: ProjectToolbar,
+      } satisfies DataGridProps['slots']),
+    [dataGridProps.slots]
+  );
+
+  const slotProps = useMemo(
+    () => merge({}, DefaultDataGridStyles.slotProps, dataGridProps.slotProps),
+    [dataGridProps.slotProps]
+  );
+
+  return (
+    <DataGrid<Project>
+      {...DefaultDataGridStyles}
+      {...dataGridProps}
+      slots={slots}
+      slotProps={slotProps}
+      columns={ProjectColumns}
+      initialState={ProjectInitialState}
+      headerFilters
+      hideFooter
+      sx={[flexLayout, noHeaderFilterButtons, noFooter]}
+    />
+  );
+};