Add loading skeletons, remove field region col field region - projects table

Author: rdonigian

src/scenes/FieldRegions/Detail/FieldRegionDetail.tsx

@@ -18,7 +18,7 @@ const useFieldRegionDetailsFilters = makeQueryHandler({
 export const FieldRegionDetail = () => {
   const { fieldRegionId = '' } = useParams();
 
-  const { data, error } = useQuery(FieldRegionDetailDocument, {
+  const { data, error, loading } = useQuery(FieldRegionDetailDocument, {
     variables: { fieldRegionId },
   });
 
@@ -60,8 +60,10 @@ export const FieldRegionDetail = () => {
                 lineHeight: 'inherit',
               }}
             >
-              {!fieldRegion ? (
-                <Skeleton width="20ch" />
+              {loading ? (
+                <Skeleton width={200} />
+              ) : !fieldRegion ? (
+                <Skeleton width={200} />
               ) : (
                 fieldRegion.name.value ?? (
                   <Redacted
@@ -83,12 +85,10 @@ export const FieldRegionDetail = () => {
                 <Tab label="Projects" value="projects" />
               </TabList>
               <TabPanel value="profile">
-                {fieldRegion && (
-                  <FieldRegionProfile fieldRegion={fieldRegion} />
-                )}
+                <FieldRegionProfile fieldRegion={fieldRegion} />
               </TabPanel>
               <TabPanel value="projects">
-                {fieldRegion && <FieldRegionProjects />}
+                <FieldRegionProjects />
               </TabPanel>
             </TabContext>
           </TabsContainer>

src/scenes/FieldRegions/Detail/Tabs/Profile/FieldRegionProfile.tsx

@@ -19,7 +19,7 @@ import { Link } from '~/components/Routing';
 import { FieldRegionProfileFragment } from './FieldRegionProfile.graphql';
 
 interface FieldRegionProfileProps {
-  fieldRegion: FieldRegionProfileFragment;
+  fieldRegion: FieldRegionProfileFragment | undefined;
 }
 
 export const FieldRegionProfile = ({
@@ -43,37 +43,44 @@ export const FieldRegionProfile = ({
         sx={{
           p: 2,
           gap: 2,
+          flex: 1,
         }}
       >
         <DisplayProperty
           label="Field Zone"
           value={
-            <Link to={`/field-zones/${fieldRegion.fieldZone.value?.id}`}>
-              {fieldRegion.fieldZone.value?.name.value}
-            </Link>
+            fieldRegion?.fieldZone.value ? (
+              <Link to={`/field-zones/${fieldRegion.fieldZone.value.id}`}>
+                {fieldRegion.fieldZone.value.name.value}
+              </Link>
+            ) : null
           }
           loading={!fieldRegion}
         />
         <DisplayProperty
           label="Director"
           value={
-            <Link to={`/users/${fieldRegion.director.value?.id}`}>
-              {fieldRegion.director.value?.fullName}
-            </Link>
+            fieldRegion?.director.value ? (
+              <Link to={`/users/${fieldRegion.director.value.id}`}>
+                {fieldRegion.director.value.fullName}
+              </Link>
+            ) : null
           }
           loading={!fieldRegion}
         />
       </Stack>
       <Box sx={{ p: 1 }}>
         {canEditAnyFields ? (
           <Tooltip title="Edit Field Region">
-            <IconButton aria-label="edit field region" onClick={editRegion}>
+            <IconButton onClick={editRegion}>
               <Edit />
             </IconButton>
           </Tooltip>
         ) : null}
       </Box>
-      <EditFieldRegion fieldRegion={fieldRegion} {...editRegionState} />
+      {fieldRegion && (
+        <EditFieldRegion fieldRegion={fieldRegion} {...editRegionState} />
+      )}
     </Box>
   );
 };

src/scenes/FieldRegions/Detail/Tabs/Projects/FieldRegionProjects.tsx

@@ -54,7 +54,7 @@ export const FieldRegionProjects = () => {
         {...props}
         slots={slots}
         slotProps={slotProps}
-        columns={ProjectColumns}
+        columns={FieldRegionProjectColumns}
         initialState={ProjectInitialState}
         headerFilters
         hideFooter
@@ -63,3 +63,8 @@ export const FieldRegionProjects = () => {
     </TabPanelContent>
   );
 };
+
+// Remove the 'fieldRegion' column since this view is scoped to a specific field region
+const FieldRegionProjectColumns = ProjectColumns.filter(
+  (col) => col.field !== 'fieldRegion.name'
+);

src/scenes/FieldZones/Detail/FieldZoneDetail.tsx

@@ -39,8 +39,8 @@ export const FieldZoneDetail = () => {
     >
       <Error error={error}>
         {{
-          NotFound: 'Could not find fieldZone',
-          Default: 'Error loading fieldZone',
+          NotFound: 'Could not find field zone',
+          Default: 'Error loading field zone',
         }}
       </Error>
       <Helmet title={fieldZone?.name.value ?? undefined} />
@@ -83,7 +83,7 @@ export const FieldZoneDetail = () => {
                 <Tab label="Projects" value="projects" />
               </TabList>
               <TabPanel value="profile">
-                {fieldZone && <FieldZoneProfile fieldZone={fieldZone} />}
+                <FieldZoneProfile fieldZone={fieldZone} />
               </TabPanel>
               <TabPanel value="projects">
                 {fieldZone && <FieldZoneProjects />}

src/scenes/FieldZones/Detail/Tabs/Profile/FieldZoneProfile.tsx

@@ -19,7 +19,7 @@ import { Link } from '~/components/Routing';
 import { FieldZoneProfileFragment } from './FieldZoneProfile.graphql';
 
 interface FieldZoneProfileProps {
-  fieldZone: FieldZoneProfileFragment;
+  fieldZone: FieldZoneProfileFragment | undefined;
 }
 
 export const FieldZoneProfile = ({ fieldZone }: FieldZoneProfileProps) => {
@@ -46,23 +46,25 @@ export const FieldZoneProfile = ({ fieldZone }: FieldZoneProfileProps) => {
         <DisplayProperty
           label="Director"
           value={
-            <Link to={`/users/${fieldZone.director.value?.id}`}>
-              {fieldZone.director.value?.fullName}
-            </Link>
+            fieldZone?.director.value ? (
+              <Link to={`/users/${fieldZone.director.value.id}`}>
+                {fieldZone.director.value.fullName}
+              </Link>
+            ) : null
           }
           loading={!fieldZone}
         />
       </Stack>
       <Box sx={{ p: 1 }}>
         {canEditAnyFields ? (
           <Tooltip title="Edit Field Zone">
-            <IconButton aria-label="edit field Zone" onClick={editZone}>
+            <IconButton onClick={editZone}>
               <Edit />
             </IconButton>
           </Tooltip>
         ) : null}
       </Box>
-      <EditFieldZone fieldZone={fieldZone} {...editZoneState} />
+      {fieldZone && <EditFieldZone fieldZone={fieldZone} {...editZoneState} />}
     </Box>
   );
 };