fix: Org admin can remove team members without being on team

The mutation tried to always load the viewer team member which would
fail if the org admin wasn't on the team.

Author: Dschoordsch

Diff for: packages/client/components/DashboardAvatars/TeamMemberAvatarMenu.tsx

@@ -38,18 +38,14 @@ const TeamMemberAvatarMenu = (props: Props) => {
     graphql`
       fragment TeamMemberAvatarMenu_teamMember on TeamMember {
         isSelf
-        user {
-          id
-          preferredName
-        }
+        userId
         isLead
       }
     `,
     teamMemberRef
   )
   const atmosphere = useAtmosphere()
-  const {user} = teamMember
-  const {id: userId, preferredName} = user
+  const {userId} = teamMember
   const {viewerId} = atmosphere
   const isSelf = userId === viewerId
   const isViewerTeamAdmin = isViewerLead || isViewerOrgAdmin
@@ -60,14 +56,14 @@ const TeamMemberAvatarMenu = (props: Props) => {
         <MenuItem
           key='promote'
           onClick={togglePromote}
-          label={<StyledLabel>Promote {preferredName} to Team Lead</StyledLabel>}
+          label={<StyledLabel>Promote to Team Lead</StyledLabel>}
         />
       )}
       {isViewerTeamAdmin && !isSelf && (
         <MenuItem
           key='remove'
           onClick={toggleRemove}
-          label={<StyledLabel>Remove {preferredName} from Team</StyledLabel>}
+          label={<StyledLabel>Remove from Team</StyledLabel>}
         />
       )}
       {!isViewerLead && isSelf && (

Diff for: packages/client/components/MenuItem.tsx

@@ -24,6 +24,7 @@ interface Props {
 const MenuItemStyles = styled('div')<{isActive: boolean; isDisabled: boolean | undefined}>(
   ({isActive, isDisabled}) => ({
     alignItems: 'center',
+    //overflowWrap: 'break-word',
     backgroundColor: isActive ? PALETTE.SLATE_200 : undefined,
     color: isDisabled ? PALETTE.SLATE_600 : PALETTE.SLATE_700,
     cursor: isDisabled ? 'not-allowed' : 'pointer',

Diff for: packages/client/modules/teamDashboard/components/PromoteTeamMemberModal/PromoteTeamMemberModal.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import {useFragment} from 'react-relay'
 import useAtmosphere from '~/hooks/useAtmosphere'
@@ -12,14 +11,6 @@ import useMutationProps from '../../../../hooks/useMutationProps'
 import PromoteToTeamLeadMutation from '../../../../mutations/PromoteToTeamLeadMutation'
 import {upperFirst} from '../../../../utils/upperFirst'
 
-const StyledDialogContainer = styled(DialogContainer)({
-  width: 420
-})
-
-const StyledButton = styled(PrimaryButton)({
-  margin: '1.5rem auto 0'
-})
-
 interface Props {
   closePortal: () => void
   teamMember: PromoteTeamMemberModal_teamMember$key
@@ -70,15 +61,24 @@ const PromoteTeamMemberModal = (props: Props) => {
   const copy = `${copyStart} ${copyEnd}`
 
   return (
-    <StyledDialogContainer>
+    <DialogContainer>
       <DialogTitle>{'Are you sure?'}</DialogTitle>
       <DialogContent>
         {copy}
-        <StyledButton size='medium' onClick={handleClick} waiting={submitting}>
-          <IconLabel icon='arrow_forward' iconAfter label={`Yes, promote ${preferredName}`} />
-        </StyledButton>
+        <PrimaryButton
+          size='medium'
+          className='mx-auto mt-6 mb-0'
+          onClick={handleClick}
+          waiting={submitting}
+        >
+          <IconLabel
+            icon='arrow_forward'
+            iconAfter
+            label={<div className='break-word whitespace-normal'>Yes, promote {preferredName}</div>}
+          />
+        </PrimaryButton>
       </DialogContent>
-    </StyledDialogContainer>
+    </DialogContainer>
   )
 }
 

Diff for: packages/client/modules/teamDashboard/components/RemoveTeamMemberModal/RemoveTeamMemberModal.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import {useFragment} from 'react-relay'
 import useAtmosphere from '~/hooks/useAtmosphere'
@@ -10,14 +9,6 @@ import IconLabel from '../../../../components/IconLabel'
 import PrimaryButton from '../../../../components/PrimaryButton'
 import RemoveTeamMemberMutation from '../../../../mutations/RemoveTeamMemberMutation'
 
-const StyledDialogContainer = styled(DialogContainer)({
-  width: 320
-})
-
-const StyledButton = styled(PrimaryButton)({
-  margin: '1.5rem auto 0'
-})
-
 interface Props {
   closePortal: () => void
   teamMember: RemoveTeamMemberModal_teamMember$key
@@ -44,16 +35,20 @@ const RemoveTeamMemberModal = (props: Props) => {
     RemoveTeamMemberMutation(atmosphere, {teamMemberId})
   }
   return (
-    <StyledDialogContainer>
+    <DialogContainer>
       <DialogTitle>Are you sure?</DialogTitle>
       <DialogContent>
         This will remove {preferredName} from the team.
         <br />
-        <StyledButton size='medium' onClick={handleClick}>
-          <IconLabel icon='arrow_forward' iconAfter label={`Remove ${preferredName}`} />
-        </StyledButton>
+        <PrimaryButton size='medium' className='mx-auto mt-6 mb-0' onClick={handleClick}>
+          <IconLabel
+            icon='arrow_forward'
+            iconAfter
+            label={<div className='break-word whitespace-normal'>Remove {preferredName}</div>}
+          />
+        </PrimaryButton>
       </DialogContent>
-    </StyledDialogContainer>
+    </DialogContainer>
   )
 }
 

Diff for: packages/client/modules/userDashboard/components/OrgTeamMembers/OrgTeamMemberMenu.tsx

@@ -37,18 +37,14 @@ export const OrgTeamMemberMenu = (props: OrgTeamMemberMenuProps) => {
     graphql`
       fragment OrgTeamMemberMenu_teamMember on TeamMember {
         isSelf
-        user {
-          id
-          preferredName
-        }
+        userId
         isLead
       }
     `,
     teamMemberRef
   )
   const atmosphere = useAtmosphere()
-  const {user} = teamMember
-  const {id: userId, preferredName} = user
+  const {userId} = teamMember
   const {viewerId} = atmosphere
   const isSelf = userId === viewerId
   const isViewerTeamAdmin = isViewerLead || isViewerOrgAdmin
@@ -57,16 +53,13 @@ export const OrgTeamMemberMenu = (props: OrgTeamMemberMenuProps) => {
     <Menu ariaLabel={'Select your action'} {...menuProps}>
       {isViewerTeamAdmin && (!isSelf || !isViewerLead) && (
         <MenuItem
-          label={<StyledLabel>Promote {preferredName} to Team Lead</StyledLabel>}
+          label={<StyledLabel>Promote to Team Lead</StyledLabel>}
           key='promote'
           onClick={togglePromote}
         />
       )}
       {isViewerTeamAdmin && !isSelf && (
-        <MenuItem
-          label={<StyledLabel>Remove {preferredName} from Team</StyledLabel>}
-          onClick={toggleRemove}
-        />
+        <MenuItem label={<StyledLabel>Remove from Team</StyledLabel>} onClick={toggleRemove} />
       )}
     </Menu>
   )

Diff for: packages/server/graphql/mutations/removeTeamMember.ts

@@ -34,7 +34,7 @@ export default {
     const team = await dataLoader.get('teams').loadNonNull(teamId)
     const [isOrgAdmin, teamMember] = await Promise.all([
       isUserOrgAdmin(viewerId, team.orgId, dataLoader),
-      dataLoader.get('teamMembers').loadNonNull(TeamMemberId.join(teamId, viewerId))
+      dataLoader.get('teamMembers').load(TeamMemberId.join(teamId, viewerId))
     ])
     const isViewerTeamLead = teamMember?.isLead
     const isSelf = viewerId === userId