Fixed Refresh after archiving team

packages/client/modules/userDashboard/components/OrgTeamMembers/OrgTeamMemberMenu.tsx

@@ -0,0 +1,71 @@
+import styled from '@emotion/styled'
+import React from 'react'
+import graphql from 'babel-plugin-relay/macro'
+import useAtmosphere from '~/hooks/useAtmosphere'
+import {useFragment} from 'react-relay'
+import {MenuProps} from '../../../../hooks/useMenu'
+import Menu from '../../../../components/Menu'
+import MenuItem from '../../../../components/MenuItem'
+import MenuItemLabel from '../../../../components/MenuItemLabel'
+import {OrgTeamMemberMenu_teamMember$key} from '../../../../__generated__/OrgTeamMemberMenu_teamMember.graphql'
+
+interface OrgTeamMemberMenuProps {
+  isLead: boolean
+  menuProps: MenuProps
+  isViewerLead: boolean
+  isViewerOrgAdmin: boolean
+  manageTeamMemberId?: string | null
+  teamMember: OrgTeamMemberMenu_teamMember$key
+  handleNavigate?: () => void
+  togglePromote: () => void
+  toggleRemove: () => void
+}
+
+const StyledLabel = styled(MenuItemLabel)({
+  padding: '4px 16px'
+})
+
+export const OrgTeamMemberMenu = (props: OrgTeamMemberMenuProps) => {
+  const {
+    isViewerLead,
+    isViewerOrgAdmin,
+    teamMember: teamMemberRef,
+    menuProps,
+    togglePromote,
+    toggleRemove
+  } = props
+  const teamMember = useFragment(
+    graphql`
+      fragment OrgTeamMemberMenu_teamMember on TeamMember {
+        isSelf
+        preferredName
+        userId
+        isLead
+      }
+    `,
+    teamMemberRef
+  )
+  const atmosphere = useAtmosphere()
+  const {preferredName, userId} = teamMember
+  const {viewerId} = atmosphere
+  const isSelf = userId === viewerId
+  const isViewerTeamAdmin = isViewerLead || isViewerOrgAdmin
+
+  return (
+    <Menu ariaLabel={'Select your action'} {...menuProps}>
+      {isViewerTeamAdmin && (!isSelf || !isViewerLead) && (
+        <MenuItem
+          label={<StyledLabel>Promote {preferredName} to Team Lead</StyledLabel>}
+          key='promote'
+          onClick={togglePromote}
+        />
+      )}
+      {isViewerTeamAdmin && !isSelf && (
+        <MenuItem
+          label={<StyledLabel>Remove {preferredName} from Team</StyledLabel>}
+          onClick={toggleRemove}
+        />
+      )}
+    </Menu>
+  )
+}

packages/client/modules/userDashboard/components/OrgTeamMembers/OrgTeamMembers.tsx

@@ -25,6 +25,7 @@ const query = graphql`
       team(teamId: $teamId) {
         ...ArchiveTeam_team
         isLead
+        isOrgAdmin
         id
         name
         tier
@@ -56,7 +57,7 @@ export const OrgTeamMembers = (props: Props) => {
   } = useDialogState()
 
   if (!team) return null
-  const {teamMembers} = team
+  const {isLead: isViewerLead, isOrgAdmin: isViewerOrgAdmin, teamMembers} = team
 
   return (
     <div className='max-w-4xl pb-4'>
@@ -92,7 +93,12 @@ export const OrgTeamMembers = (props: Props) => {
           </div>
         </div>
         {teamMembers.map((teamMember) => (
-          <OrgTeamMembersRow key={teamMember.id} teamMemberRef={teamMember} />
+          <OrgTeamMembersRow
+            isViewerLead={isViewerLead}
+            isViewerOrgAdmin={isViewerOrgAdmin}
+            teamMemberRef={teamMember}
+            key={teamMember.id}
+          />
         ))}
       </div>
 

packages/client/modules/userDashboard/components/OrgTeamMembers/OrgTeamMembersRow.tsx

@@ -7,17 +7,28 @@ import {AvatarFallback} from '../../../../ui/Avatar/AvatarFallback'
 import {AvatarImage} from '../../../../ui/Avatar/AvatarImage'
 import {Button} from '../../../../ui/Button/Button'
 import {MoreVert} from '@mui/icons-material'
+import {OrgTeamMemberMenu} from './OrgTeamMemberMenu'
+import {MenuPosition} from '../../../../hooks/useCoords'
+import useMenu from '../../../../hooks/useMenu'
+import PromoteTeamMemberModal from '../../../teamDashboard/components/PromoteTeamMemberModal/PromoteTeamMemberModal'
+import RemoveTeamMemberModal from '../../../teamDashboard/components/RemoveTeamMemberModal/RemoveTeamMemberModal'
+import useModal from '../../../../hooks/useModal'
+import useAtmosphere from '../../../../hooks/useAtmosphere'
 
 type Props = {
   teamMemberRef: OrgTeamMembersRow_teamMember$key
+  isViewerLead: boolean
+  isViewerOrgAdmin: boolean
 }
 
 export const OrgTeamMembersRow = (props: Props) => {
   const {teamMemberRef} = props
-  const member = useFragment(
+  const teamMember = useFragment(
     graphql`
       fragment OrgTeamMembersRow_teamMember on TeamMember {
+        ...OrgTeamMemberMenu_teamMember
         id
+        userId
         picture
         preferredName
         isLead
@@ -29,47 +40,91 @@ export const OrgTeamMembersRow = (props: Props) => {
             name
           }
         }
+        ...PromoteTeamMemberModal_teamMember
+        ...RemoveTeamMemberModal_teamMember
       }
     `,
     teamMemberRef
   )
 
-  // const {togglePortal, originRef, menuPortal, menuProps} = useMenu(MenuPosition.UPPER_RIGHT)
+  const {isViewerLead, isViewerOrgAdmin} = props
+  const {id: isLead, isOrgAdmin, userId} = teamMember
+
+  const atmosphere = useAtmosphere()
+  const {viewerId} = atmosphere
+  const isSelf = userId === viewerId
+
+  const showMenuButton =
+    (isViewerOrgAdmin && !isLead) ||
+    (isViewerLead && !isSelf && !isOrgAdmin) ||
+    (!isViewerLead && isSelf)
+
+  const {togglePortal, originRef, menuPortal, menuProps} = useMenu(MenuPosition.UPPER_RIGHT)
+  const {
+    closePortal: closePromote,
+    togglePortal: togglePromote,
+    modalPortal: portalPromote
+  } = useModal()
+  const {
+    closePortal: closeRemove,
+    togglePortal: toggleRemove,
+    modalPortal: portalRemove
+  } = useModal()
 
   return (
     <div className='flex w-full items-center justify-center gap-4 p-4'>
       <div>
         <Avatar className='h-8 w-8'>
-          <AvatarImage src={member.picture} alt={member.preferredName} />
-          <AvatarFallback>CN</AvatarFallback>
+          <AvatarImage src={teamMember.picture} alt={teamMember.preferredName} />
+          <AvatarFallback>{teamMember.preferredName.substring(0, 2)}</AvatarFallback>
         </Avatar>
       </div>
       <div className='flex w-full flex-col gap-y-1 py-1'>
         <div className='text-gray-700 inline-flex items-center gap-x-2 text-lg font-bold'>
-          {member.preferredName}{' '}
-          {member.isLead ? (
+          {teamMember.preferredName}{' '}
+          {teamMember.isLead ? (
             <span className='rounded-full bg-primary px-2 py-0.5 text-xs text-white'>
               Team Lead
             </span>
           ) : null}
         </div>
         <div>
           <Button asChild variant='link'>
-            <a href={`mailto:${member.email}`}>{member.email}</a>
+            <a href={`mailto:${teamMember.email}`}>{teamMember.email}</a>
           </Button>
         </div>
         <div className='flex items-center gap-x-1 text-base'>
           <div>Teams:</div>
           <div className='space-x-1 font-semibold'>
-            {member.user.teams.map((team) => team.name).join(', ')}
+            {teamMember.user.teams.map((team) => team.name).join(', ')}
           </div>
         </div>
       </div>
       <div>
-        <Button shape='circle' variant='ghost'>
+        <Button
+          disabled={!showMenuButton}
+          shape='circle'
+          variant='ghost'
+          onClick={togglePortal}
+          ref={originRef}
+        >
           <MoreVert />
         </Button>
+        {menuPortal(
+          <OrgTeamMemberMenu
+            menuProps={menuProps}
+            isLead={teamMember.isLead}
+            teamMember={teamMember}
+            isViewerLead={isViewerLead}
+            isViewerOrgAdmin={isViewerOrgAdmin}
+            togglePromote={togglePromote}
+            toggleRemove={toggleRemove}
+          />
+        )}
       </div>
+
+      {portalPromote(<PromoteTeamMemberModal teamMember={teamMember} closePortal={closePromote} />)}
+      {portalRemove(<RemoveTeamMemberModal teamMember={teamMember} closePortal={closeRemove} />)}
     </div>
   )
 }

packages/client/mutations/ArchiveTeamMutation.ts

@@ -30,6 +30,14 @@ graphql`
       activeMeetings {
         id
       }
+      organization {
+        allTeams {
+          id
+        }
+        viewerTeams {
+          id
+        }
+      }
     }
     teamTemplateIds
   }