inviteRequestRow.tsx 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Button} from 'sentry/components/button';
  4. import Confirm from 'sentry/components/confirm';
  5. import type {InviteModalRenderFunc} from 'sentry/components/modals/memberInviteModalCustomization';
  6. import {InviteModalHook} from 'sentry/components/modals/memberInviteModalCustomization';
  7. import PanelItem from 'sentry/components/panels/panelItem';
  8. import RoleSelectControl from 'sentry/components/roleSelectControl';
  9. import {Tag} from 'sentry/components/tag';
  10. import TeamSelector from 'sentry/components/teamSelector';
  11. import {Tooltip} from 'sentry/components/tooltip';
  12. import {IconCheckmark, IconClose} from 'sentry/icons';
  13. import {t, tct} from 'sentry/locale';
  14. import {space} from 'sentry/styles/space';
  15. import type {Member, Organization, OrgRole} from 'sentry/types';
  16. type Props = {
  17. allRoles: OrgRole[];
  18. inviteRequest: Member;
  19. inviteRequestBusy: {[key: string]: boolean};
  20. onApprove: (inviteRequest: Member) => void;
  21. onDeny: (inviteRequest: Member) => void;
  22. onUpdate: (data: Partial<Member>) => void;
  23. organization: Organization;
  24. };
  25. function InviteRequestRow({
  26. inviteRequest,
  27. inviteRequestBusy,
  28. organization,
  29. onApprove,
  30. onDeny,
  31. onUpdate,
  32. allRoles,
  33. }: Props) {
  34. const role = allRoles.find(r => r.id === inviteRequest.role);
  35. const roleDisallowed = !role?.allowed;
  36. const {access} = organization;
  37. const canApprove = access.includes('member:admin');
  38. const hookRenderer: InviteModalRenderFunc = ({sendInvites, canSend, headerInfo}) => (
  39. <StyledPanelItem>
  40. <div>
  41. <h5 style={{marginBottom: space(0.5)}}>
  42. <UserName>{inviteRequest.email}</UserName>
  43. </h5>
  44. {inviteRequest.inviteStatus === 'requested_to_be_invited' ? (
  45. inviteRequest.inviterName && (
  46. <Description>
  47. <Tooltip
  48. title={t(
  49. 'An existing member has asked to invite this user to your organization'
  50. )}
  51. >
  52. {tct('Requested by [inviterName]', {
  53. inviterName: inviteRequest.inviterName,
  54. })}
  55. </Tooltip>
  56. </Description>
  57. )
  58. ) : (
  59. <JoinRequestIndicator
  60. tooltipText={t('This user has asked to join your organization.')}
  61. >
  62. {t('Join request')}
  63. </JoinRequestIndicator>
  64. )}
  65. </div>
  66. {canApprove ? (
  67. <StyledRoleSelectControl
  68. name="role"
  69. disableUnallowed
  70. onChange={r => onUpdate({role: r.value})}
  71. value={inviteRequest.role}
  72. roles={allRoles}
  73. />
  74. ) : (
  75. <div>{inviteRequest.roleName}</div>
  76. )}
  77. {canApprove ? (
  78. <TeamSelectControl
  79. name="teams"
  80. placeholder={t('None')}
  81. onChange={teams => onUpdate({teams: (teams || []).map(team => team.value)})}
  82. value={inviteRequest.teams}
  83. clearable
  84. multiple
  85. />
  86. ) : (
  87. <div>{inviteRequest.teams.join(', ')}</div>
  88. )}
  89. <ButtonGroup>
  90. <Button
  91. size="sm"
  92. busy={inviteRequestBusy[inviteRequest.id]}
  93. onClick={() => onDeny(inviteRequest)}
  94. icon={<IconClose />}
  95. disabled={!canApprove}
  96. title={
  97. canApprove
  98. ? undefined
  99. : t('This request needs to be reviewed by a privileged user')
  100. }
  101. >
  102. {t('Deny')}
  103. </Button>
  104. <Confirm
  105. onConfirm={sendInvites}
  106. disableConfirmButton={!canSend}
  107. disabled={!canApprove || roleDisallowed}
  108. message={
  109. <Fragment>
  110. {tct('Are you sure you want to invite [email] to your organization?', {
  111. email: inviteRequest.email,
  112. })}
  113. {headerInfo}
  114. </Fragment>
  115. }
  116. >
  117. <Button
  118. priority="primary"
  119. size="sm"
  120. busy={inviteRequestBusy[inviteRequest.id]}
  121. title={
  122. canApprove
  123. ? roleDisallowed
  124. ? t(
  125. `You do not have permission to approve a user of this role.
  126. Select a different role to approve this user.`
  127. )
  128. : undefined
  129. : t('This request needs to be reviewed by a privileged user')
  130. }
  131. icon={<IconCheckmark />}
  132. >
  133. {t('Approve')}
  134. </Button>
  135. </Confirm>
  136. </ButtonGroup>
  137. </StyledPanelItem>
  138. );
  139. return (
  140. <InviteModalHook
  141. willInvite
  142. organization={organization}
  143. onSendInvites={() => onApprove(inviteRequest)}
  144. >
  145. {hookRenderer}
  146. </InviteModalHook>
  147. );
  148. }
  149. const JoinRequestIndicator = styled(Tag)`
  150. text-transform: uppercase;
  151. `;
  152. const StyledPanelItem = styled(PanelItem)`
  153. display: grid;
  154. grid-template-columns: minmax(150px, auto) minmax(100px, 140px) 220px max-content;
  155. gap: ${space(2)};
  156. align-items: center;
  157. `;
  158. const UserName = styled('div')`
  159. font-size: ${p => p.theme.fontSizeLarge};
  160. overflow: hidden;
  161. text-overflow: ellipsis;
  162. `;
  163. const Description = styled('div')`
  164. display: block;
  165. color: ${p => p.theme.subText};
  166. font-size: 14px;
  167. overflow: hidden;
  168. text-overflow: ellipsis;
  169. `;
  170. const StyledRoleSelectControl = styled(RoleSelectControl)`
  171. max-width: 140px;
  172. `;
  173. const TeamSelectControl = styled(TeamSelector)`
  174. max-width: 220px;
  175. .Select-value-label {
  176. max-width: 150px;
  177. word-break: break-all;
  178. }
  179. `;
  180. const ButtonGroup = styled('div')`
  181. display: inline-grid;
  182. grid-template-columns: repeat(2, max-content);
  183. gap: ${space(1)};
  184. `;
  185. export default InviteRequestRow;