Add Field Region to Project & Engagement Grids

src/components/EngagementDataGrid/EngagementColumns.tsx

@@ -155,8 +155,25 @@ export const EngagementColumns: Array<GridColDef<Engagement>> = [
     headerName: 'Country',
     field: 'project.primaryLocation.name',
     ...textColumn(),
+    width: 250,
     valueGetter: (_, row) => row.project.primaryLocation.value?.name.value,
   },
+  {
+    field: 'project.fieldRegion.name',
+    headerName: 'Field Region',
+    ...textColumn(),
+    width: 250,
+    valueGetter: (_, { project }) => project.fieldRegion.value?.name.value,
+    renderCell: ({ row: engagement }) => {
+      const { fieldRegion } = engagement.project;
+
+      return fieldRegion.value ? (
+        <Link to={`/field-regions/${fieldRegion.value.id}`}>
+          {fieldRegion.value.name.value}
+        </Link>
+      ) : null;
+    },
+  },
   {
     headerName: 'ISO',
     description: 'Ethnologue Code',

src/components/EngagementDataGrid/engagementDataGridRow.graphql

@@ -9,7 +9,6 @@ fragment engagementDataGridRow on Engagement {
   endDate {
     value
   }
-
   project {
     id
     type
@@ -27,6 +26,14 @@ fragment engagementDataGridRow on Engagement {
         }
       }
     }
+    fieldRegion {
+      value {
+        id
+        name {
+          value
+        }
+      }
+    }
     mouStart {
       value
     }

src/components/ProjectDataGrid/ProjectColumns.tsx

@@ -27,6 +27,7 @@ import {
 } from '../Grid';
 import { ProjectNameColumn } from '../Grid/Columns/ProjectNameColumn';
 import { SensitivityColumn } from '../Grid/Columns/SensitivityColumn';
+import { Link } from '../Routing';
 import { ProjectDataGridRowFragment as Project } from './projectDataGridRow.graphql';
 
 export const ProjectColumns: Array<GridColDef<Project>> = [
@@ -43,6 +44,21 @@ export const ProjectColumns: Array<GridColDef<Project>> = [
     headerName: 'Country',
     width: 300,
   },
+  {
+    field: 'fieldRegion.name',
+    headerName: 'Field Region',
+    ...textColumn(),
+    width: 250,
+    valueGetter: (_, { fieldRegion }) => fieldRegion.value?.name.value,
+    renderCell: ({ row: project }) => {
+      const { fieldRegion } = project;
+      return fieldRegion.value ? (
+        <Link to={`/field-regions/${fieldRegion.value.id}`}>
+          {fieldRegion.value.name.value}
+        </Link>
+      ) : null;
+    },
+  },
   {
     field: 'step',
     ...enumColumn(ProjectStepList, ProjectStepLabels, {

src/components/ProjectDataGrid/projectDataGridRow.graphql

@@ -18,12 +18,21 @@ fragment projectDataGridRow on Project {
       }
     }
   }
+  fieldRegion {
+    value {
+      id
+      name {
+        value
+      }
+    }
+  }
   mouStart {
     value
   }
   mouEnd {
     value
   }
+
   isMember
   pinned
 }