Merge pull request #1705 from SeedCompany/user-status

Author: CarsonF

src/common/fragments/user.graphql

@@ -54,6 +54,11 @@ fragment DisplayUser on User {
     canEdit
     value
   }
+  status {
+    canRead
+    canEdit
+    value
+  }
   fullName
   timezone {
     canRead

src/components/UserDataGrid/UserColumns.tsx

@@ -4,9 +4,15 @@ import {
   GridToolbarColumnsButton,
   GridToolbarFilterButton,
 } from '@mui/x-data-grid-pro';
-import { RoleLabels, RoleList } from '~/api/schema.graphql';
+import {
+  RoleLabels,
+  RoleList,
+  UserStatusLabels,
+  UserStatusList,
+} from '~/api/schema.graphql';
 import {
   booleanColumn,
+  enumColumn,
   getInitialVisibility,
   multiEnumColumn,
   QuickFilterButton,
@@ -43,6 +49,12 @@ export const UserColumns: Array<GridColDef<User>> = [
       return roles.value;
     },
   },
+  {
+    headerName: 'Status',
+    field: 'status',
+    ...enumColumn(UserStatusList, UserStatusLabels),
+    valueGetter: (_, row) => row.status.value,
+  },
   {
     headerName: 'Pinned',
     field: 'pinned',

src/components/UserDataGrid/userDataGridRow.graphql

@@ -10,5 +10,8 @@ fragment userDataGridRow on User {
   email {
     value
   }
+  status {
+    value
+  }
   ...TogglePin
 }

src/scenes/Users/Create/CreateUser.tsx

@@ -13,7 +13,7 @@ import {
 type SubmitResult = CreatePersonMutation['createPerson']['user'];
 export type CreateUserProps = Except<
   UserFormProps<CreatePersonInput, SubmitResult>,
-  'prefix' | 'onSubmit'
+  'fieldsPrefix' | 'onSubmit'
 >;
 
 export const CreateUser = (props: CreateUserProps) => {
@@ -39,7 +39,7 @@ export const CreateUser = (props: CreateUserProps) => {
         });
       }}
       {...props}
-      prefix="person"
+      fieldsPrefix="person"
       onSubmit={async (input) => {
         const { data } = await createPerson({
           variables: { input },

src/scenes/Users/Detail/UserDetail.tsx

@@ -1,12 +1,11 @@
 import { useQuery } from '@apollo/client';
 import { Edit } from '@mui/icons-material';
-import { Skeleton, Tooltip, Typography } from '@mui/material';
+import { Box, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
 import { useInterval } from 'ahooks';
 import { DateTime } from 'luxon';
 import { useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 import { PartialDeep } from 'type-fest';
 import { RoleLabels } from '~/api/schema.graphql';
 import { canEditAny, labelsFrom } from '~/common';
@@ -26,34 +25,7 @@ import { UsersQueryVariables } from '../List/users.graphql';
 import { ImpersonationToggle } from './ImpersonationToggle';
 import { UserDocument } from './UserDetail.graphql';
 
-const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
-  root: {
-    overflowY: 'auto',
-    padding: spacing(4),
-    '& > *:not(:last-child)': {
-      marginBottom: spacing(3),
-    },
-    maxWidth: breakpoints.values.md,
-  },
-  header: {
-    flex: 1,
-    display: 'flex',
-    gap: spacing(1),
-  },
-  name: {
-    marginRight: spacing(2), // a little extra between text and buttons
-    lineHeight: 'inherit', // centers text with buttons better
-  },
-  partnersContainer: {
-    marginTop: spacing(1),
-  },
-  partner: {
-    marginBottom: spacing(2),
-  },
-}));
-
 export const UserDetail = () => {
-  const { classes } = useStyles();
   const { userId = '' } = useParams();
   const { data, error } = useQuery(UserDocument, {
     variables: { userId },
@@ -67,14 +39,34 @@ export const UserDetail = () => {
   const canEditAnyFields = canEditAny(user);
 
   return (
-    <main className={classes.root}>
+    <Stack
+      component="main"
+      sx={{
+        overflowY: 'auto',
+        p: 4,
+        gap: 3,
+        maxWidth: (theme) => theme.breakpoints.values.md,
+      }}
+    >
       <Helmet title={user?.fullName ?? undefined} />
       {error ? (
         <Typography variant="h4">Error loading person</Typography>
       ) : (
         <>
-          <div className={classes.header}>
-            <Typography variant="h2" className={classes.name}>
+          <Box
+            sx={{
+              flex: 1,
+              display: 'flex',
+              gap: 1,
+            }}
+          >
+            <Typography
+              variant="h2"
+              sx={{
+                mr: 2, // a little extra between text and buttons
+                lineHeight: 'inherit', // centers text with buttons better
+              }}
+            >
               {!user ? (
                 <Skeleton width="20ch" />
               ) : (
@@ -103,7 +95,12 @@ export const UserDetail = () => {
             />
             <ToggleCommentsButton loading={!user} />
             <ImpersonationToggle user={user} />
-          </div>
+          </Box>
+          <DisplayProperty
+            label="Status"
+            value={user?.status.value}
+            loading={!user}
+          />
           <DisplayProperty
             label="Email"
             value={user?.email.value}
@@ -143,20 +140,16 @@ export const UserDetail = () => {
           {!!user?.partners.items.length && (
             <>
               <Typography variant="h3">Partners</Typography>
-              <div className={classes.partnersContainer}>
+              <Stack sx={{ mt: 1, gap: 2 }}>
                 {user.partners.items.map((item) => (
-                  <PartnerListItemCard
-                    key={item.id}
-                    partner={item}
-                    className={classes.partner}
-                  />
+                  <PartnerListItemCard key={item.id} partner={item} />
                 ))}
-              </div>
+              </Stack>
             </>
           )}
         </>
       )}
-    </main>
+    </Stack>
   );
 };
 

src/scenes/Users/Edit/EditUser.tsx

@@ -7,7 +7,7 @@ import { UpdateUserDocument } from './EditUser.graphql';
 
 export type EditUserProps = Except<
   UserFormProps<UpdateUserInput>,
-  'prefix' | 'onSubmit' | 'initialValues'
+  'fieldsPrefix' | 'onSubmit' | 'initialValues'
 >;
 
 export const EditUser = (props: EditUserProps) => {
@@ -30,6 +30,7 @@ export const EditUser = (props: EditUserProps) => {
               email: user.email.value,
               title: user.title.value,
               roles: user.roles.value,
+              status: user.status.value,
             },
           }
         : undefined,
@@ -40,7 +41,7 @@ export const EditUser = (props: EditUserProps) => {
     <UserForm<UpdateUserInput & { user: { email?: Maybe<string> } }>
       title="Edit Person"
       {...props}
-      prefix="user"
+      fieldsPrefix="user"
       initialValues={initialValues}
       onSubmit={async ({ user }) => {
         await updateUser({

src/scenes/Users/UserForm/UserForm.tsx

@@ -1,14 +1,19 @@
-import { Grid } from '@mui/material';
+import { Stack } from '@mui/material';
 import { memoize } from 'lodash';
-import { RoleLabels } from '~/api/schema.graphql';
+import { SetRequired } from 'type-fest';
+import {
+  RoleLabels,
+  UserStatusLabels,
+  UserStatusList,
+} from '~/api/schema.graphql';
 import { labelFrom } from '~/common';
 import {
   DialogForm,
   DialogFormProps,
 } from '../../../components/Dialog/DialogForm';
 import {
   EmailField,
-  FieldGroup,
+  EnumField,
   matchFieldIfSame,
   SecuredField,
   SubmitError,
@@ -18,10 +23,12 @@ import { AutocompleteField } from '../../../components/form/AutocompleteField';
 import { useSession } from '../../../components/Session';
 import { UserFormFragment } from './UserForm.graphql';
 
-export type UserFormProps<T, R = void> = DialogFormProps<T, R> & {
+export type UserFormProps<T, R = void> = SetRequired<
+  DialogFormProps<T, R>,
+  'fieldsPrefix'
+> & {
   /** The pre-existing user to edit */
   user?: UserFormFragment;
-  prefix: string;
 };
 
 const decorators = memoize((prefix: string) => [
@@ -32,7 +39,6 @@ const decorators = memoize((prefix: string) => [
 
 export const UserForm = <T, R = void>({
   user,
-  prefix,
   ...rest
 }: UserFormProps<T, R>) => {
   const { session } = useSession();
@@ -42,62 +48,64 @@ export const UserForm = <T, R = void>({
         maxWidth: 'sm',
       }}
       {...rest}
-      decorators={decorators(prefix)}
+      decorators={decorators(rest.fieldsPrefix)}
     >
       <SubmitError />
-      <FieldGroup prefix={prefix}>
-        <Grid container spacing={2}>
-          <Grid item xs>
-            <SecuredField obj={user} name="realFirstName">
-              {(props) => (
-                <TextField
-                  label="First Name"
-                  placeholder="Enter First Name"
-                  required
-                  {...props}
-                />
-              )}
-            </SecuredField>
-          </Grid>
-          <Grid item xs>
-            <SecuredField obj={user} name="realLastName">
-              {(props) => (
-                <TextField
-                  label="Last Name"
-                  placeholder="Enter Last Name"
-                  required
-                  {...props}
-                />
-              )}
-            </SecuredField>
-          </Grid>
-        </Grid>
-        <Grid container spacing={2}>
-          <Grid item xs>
-            <SecuredField obj={user} name="displayFirstName">
-              {(props) => (
-                <TextField
-                  label="Public First Name"
-                  placeholder="Enter Public First Name"
-                  required
-                  {...props}
-                />
-              )}
-            </SecuredField>
-          </Grid>
-          <Grid item xs>
-            <SecuredField obj={user} name="displayLastName">
-              {(props) => (
-                <TextField
-                  label="Public Last Name"
-                  placeholder="Enter Public Last Name"
-                  required
-                  {...props}
-                />
-              )}
-            </SecuredField>
-          </Grid>
-        </Grid>
+      <Stack>
+        <Stack direction="row" spacing={2}>
+          <SecuredField obj={user} name="realFirstName">
+            {(props) => (
+              <TextField
+                label="First Name"
+                placeholder="Enter First Name"
+                required
+                {...props}
+              />
+            )}
+          </SecuredField>
+          <SecuredField obj={user} name="realLastName">
+            {(props) => (
+              <TextField
+                label="Last Name"
+                placeholder="Enter Last Name"
+                required
+                {...props}
+              />
+            )}
+          </SecuredField>
+        </Stack>
+        <Stack direction="row" spacing={2}>
+          <SecuredField obj={user} name="displayFirstName">
+            {(props) => (
+              <TextField
+                label="Public First Name"
+                placeholder="Enter Public First Name"
+                required
+                {...props}
+              />
+            )}
+          </SecuredField>
+          <SecuredField obj={user} name="displayLastName">
+            {(props) => (
+              <TextField
+                label="Public Last Name"
+                placeholder="Enter Public Last Name"
+                required
+                {...props}
+              />
+            )}
+          </SecuredField>
+        </Stack>
+        <SecuredField obj={user} name="status">
+          {(props) => (
+            <EnumField
+              label="Status"
+              options={UserStatusList}
+              getLabel={(value) => UserStatusLabels[value]}
+              {...props}
+            />
+          )}
+        </SecuredField>
         <SecuredField obj={user} name="email">
           {(props) => <EmailField {...props} required={false} />}
         </SecuredField>
@@ -149,7 +157,7 @@ export const UserForm = <T, R = void>({
             />
           )}
         </SecuredField>
-      </FieldGroup>
+      </Stack>
     </DialogForm>
   );
 };