Project Member Active/Inactive handling (#1702)

Author: CarsonF

src/common/hacky-inspect-dates.ts

@@ -31,6 +31,9 @@ function makeAllPropsLazy(obj: any) {
       get(): any {
         return props[key];
       },
+      set(v: any) {
+        props[key] = v;
+      },
       // somehow properties are getting lost if they cannot be enumerated
       enumerable: true,
     });

src/components/ProjectMemberCard/ProjectMember.graphql

@@ -18,4 +18,11 @@ fragment ProjectMemberCard on ProjectMember {
     value
     canRead
   }
+  active
+  inactiveAt {
+    value
+    canRead
+    canEdit
+  }
+  canDelete
 }

src/components/ProjectMemberCard/ProjectMemberCard.tsx

@@ -10,7 +10,9 @@ import { makeStyles } from 'tss-react/mui';
 import { RoleLabels } from '~/api/schema.graphql';
 import { labelsFrom } from '~/common';
 import { Avatar } from '../Avatar';
-import { FormattedDateTime } from '../Formatters';
+import { FormattedDate, FormattedDateTime } from '../Formatters';
+import { Redacted } from '../Redacted';
+import { Link } from '../Routing';
 import { ProjectMemberCardFragment } from './ProjectMember.graphql';
 
 const useStyles = makeStyles()(({ spacing }) => ({
@@ -60,13 +62,7 @@ export const ProjectMemberCard = ({
           {projectMember?.user.value?.avatarLetters}
         </Avatar>
         <div className={classes.memberInfo}>
-          <Typography>
-            {!projectMember ? (
-              <Skeleton variant="text" width="40%" />
-            ) : (
-              projectMember.user.value?.fullName
-            )}
-          </Typography>
+          <UserRef projectMember={projectMember} />
           <Typography variant="body2" color="primary">
             {!projectMember ? (
               <Skeleton variant="text" width="33%" />
@@ -90,13 +86,45 @@ export const ProjectMemberCard = ({
         <Typography variant="subtitle2" color="textSecondary">
           {!projectMember ? (
             <Skeleton variant="text" width="23ch" />
+          ) : projectMember.active === false ? (
+            projectMember.inactiveAt.value ? (
+              <>
+                Membership ended on{' '}
+                <FormattedDate date={projectMember.inactiveAt.value} />
+              </>
+            ) : null
           ) : (
             <>
-              Member Since <FormattedDateTime date={projectMember.createdAt} />
+              Membership started at{' '}
+              <FormattedDateTime date={projectMember.createdAt} />
             </>
           )}
         </Typography>
       </CardActions>
     </Card>
   );
 };
+
+const UserRef = ({
+  projectMember,
+}: Pick<ProjectMemberCardProps, 'projectMember'>) => {
+  if (!projectMember) {
+    return (
+      <Typography>
+        <Skeleton width="40%" />
+      </Typography>
+    );
+  }
+  if (!projectMember.user.value) {
+    return <Redacted info="You cannot view this person" width="100%" />;
+  }
+  return (
+    <Link
+      color="inherit"
+      to={`/users/${projectMember.user.value.id}`}
+      underline="hover"
+    >
+      {projectMember.user.value.fullName}
+    </Link>
+  );
+};

src/components/ProjectMembersSummary/ProjectMemberItem.graphql

@@ -1,5 +1,6 @@
 fragment ProjectMemberItem on ProjectMember {
   id
+  active
   user {
     canRead
     canEdit

src/components/ProjectMembersSummary/ProjectMembersSummary.graphql

@@ -1,6 +1,12 @@
-fragment ProjectMemberList on SecuredProjectMemberList {
-  items {
-    ...ProjectMemberItem
+fragment projectMembersSummary on Project {
+  id
+  activeMembers: team(input: { filter: { active: true } }) {
+    total
+  }
+  team {
+    items {
+      ...ProjectMemberItem
+    }
+    ...Pagination
   }
-  ...Pagination
 }

src/components/ProjectMembersSummary/ProjectMembersSummary.stories.tsx

@@ -1,16 +1,16 @@
 import { Group } from '@mui/icons-material';
 import { MemberListSummary, MemberSummaryItem } from '../MemberListSummary';
-import { ProjectMemberListFragment } from './ProjectMembersSummary.graphql';
+import { ProjectMembersSummaryFragment as Project } from './ProjectMembersSummary.graphql';
 
 export interface ProjectMembersSummaryProps {
-  members?: ProjectMemberListFragment;
+  project?: Project;
 }
 
 export const ProjectMembersSummary = ({
-  members,
+  project,
 }: ProjectMembersSummaryProps) => {
-  const summarizedMembers = members?.items
-    .filter(({ user }) => user.canRead && user.value)
+  const summarizedMembers = project?.team.items
+    .filter(({ active, user }) => active && user.canRead && user.value)
     .map(({ user }) => user.value!)
     .map(
       (user): MemberSummaryItem => ({
@@ -22,7 +22,7 @@ export const ProjectMembersSummary = ({
 
   return (
     <MemberListSummary
-      total={members?.total}
+      total={project?.activeMembers.total}
       title="Team Members"
       members={summarizedMembers}
       to="members"

src/components/ProjectMembersSummary/ProjectMembersSummary.tsx

@@ -32,7 +32,12 @@ export type DateFieldProps = Except<
   > &
   Pick<
     TextFieldProps,
-    'label' | 'disabled' | 'helperText' | 'placeholder' | 'fullWidth'
+    | 'variant'
+    | 'label'
+    | 'disabled'
+    | 'helperText'
+    | 'placeholder'
+    | 'fullWidth'
   > & {
     name: string;
     defaultValue?: CalendarDateOrISO | null;
@@ -49,6 +54,7 @@ export const DateField = ({
   errorMessages,
   disableFormatHelperText,
   placeholder,
+  variant,
   ...props
 }: DateFieldProps) => {
   const i10nCtx = useLocalization();
@@ -154,6 +160,7 @@ export const DateField = ({
       renderInput={(params) => (
         <TextField
           autoComplete="off"
+          variant={variant}
           {...params}
           onFocus={() => {
             if (!open.current) {

src/components/form/DateField.tsx

@@ -1,5 +1,6 @@
 import { Add } from '@mui/icons-material';
-import { Breadcrumbs, Tooltip, Typography } from '@mui/material';
+import { Breadcrumbs, Stack, Tooltip, Typography } from '@mui/material';
+import { partition } from 'lodash';
 import { Helmet } from 'react-helmet-async';
 import { makeStyles } from 'tss-react/mui';
 import { Breadcrumb } from '../../../../components/Breadcrumb';
@@ -10,7 +11,7 @@ import { ProjectBreadcrumb } from '../../../../components/ProjectBreadcrumb';
 import { ProjectMemberCard } from '../../../../components/ProjectMemberCard';
 import { useProjectId } from '../../useProjectId';
 import { CreateProjectMember } from '../Create/CreateProjectMember';
-import { UpdateProjectMember, UpdateProjectMemberFormParams } from '../Update';
+import { UpdateProjectMember, UpdateProjectMemberProps } from '../Update';
 import { ProjectMembersDocument } from './ProjectMembers.graphql';
 
 const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
@@ -40,14 +41,15 @@ export const ProjectMembersList = () => {
     },
   });
 
-  const [createProjectMemberDialogState, openCreateProjectMemberDialog] =
-    useDialog();
+  const [createMemberState, createMember] = useDialog();
 
-  const [
-    updateProjectMemberDialogState,
-    openUpdateProjectMemberDialog,
-    projectMemberProps,
-  ] = useDialog<UpdateProjectMemberFormParams>();
+  const [editMemberState, editMember, editingMember] =
+    useDialog<UpdateProjectMemberProps['member']>();
+
+  const [active, historic] = partition(
+    data?.project.team.items,
+    (member) => member.active !== false
+  );
 
   return (
     <div className={classes.root}>
@@ -68,17 +70,14 @@ export const ProjectMembersList = () => {
               color="error"
               aria-label="Add Team Member"
               loading={!list.data}
-              onClick={openCreateProjectMemberDialog}
+              onClick={createMember}
             >
               <Add />
             </Fab>
           </Tooltip>
         )}
         {data && (
-          <CreateProjectMember
-            {...createProjectMemberDialogState}
-            project={data.project}
-          />
+          <CreateProjectMember {...createMemberState} project={data.project} />
         )}
       </div>
       {list.data?.canRead === false ? (
@@ -88,27 +87,41 @@ export const ProjectMembersList = () => {
       ) : (
         <List
           {...list}
+          data={list.data ? { ...list.data, items: active } : undefined}
           spacing={3}
           renderItem={(member) => (
             <ProjectMemberCard
               projectMember={member}
-              onEdit={() =>
-                openUpdateProjectMemberDialog({
-                  project: data!.project,
-                  projectMemberId: member.id,
-                  userId: member.user.value?.id || '',
-                  userRoles: member.roles.value,
-                })
-              }
+              onEdit={() => editMember(member)}
             />
           )}
           renderSkeleton={<ProjectMemberCard />}
         />
       )}
-      {projectMemberProps && (
+      {historic.length > 0 && (
+        <>
+          <Typography variant="h3" sx={{ my: 2 }}>
+            Historic
+          </Typography>
+          <Stack
+            // to match the list above
+            sx={{ gap: 3, pr: 2 }}
+          >
+            {historic.map((member) => (
+              <ProjectMemberCard
+                key={member.id}
+                projectMember={member}
+                onEdit={() => editMember(member)}
+              />
+            ))}
+          </Stack>
+        </>
+      )}
+      {editingMember && (
         <UpdateProjectMember
-          {...updateProjectMemberDialogState}
-          {...projectMemberProps}
+          {...editMemberState}
+          member={editingMember}
+          project={data!.project}
         />
       )}
     </div>

src/scenes/Projects/Members/List/ProjectMembersList.tsx

@@ -10,8 +10,7 @@ query GetUserRoles($userId: ID!) {
   user(id: $userId) {
     id
     roles {
-      canRead
-      value
+      availableForProjects
     }
   }
 }