organizationAccessRequests.tsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import {Component} from 'react';
  2. import styled from '@emotion/styled';
  3. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  4. import {Client} from 'sentry/api';
  5. import {Button} from 'sentry/components/button';
  6. import Panel from 'sentry/components/panels/panel';
  7. import PanelBody from 'sentry/components/panels/panelBody';
  8. import PanelHeader from 'sentry/components/panels/panelHeader';
  9. import PanelItem from 'sentry/components/panels/panelItem';
  10. import {t, tct} from 'sentry/locale';
  11. import {space} from 'sentry/styles/space';
  12. import {AccessRequest} from 'sentry/types';
  13. import withApi from 'sentry/utils/withApi';
  14. type Props = {
  15. api: Client;
  16. onRemoveAccessRequest: (id: string, isApproved: boolean) => void;
  17. orgSlug: string;
  18. requestList: AccessRequest[];
  19. };
  20. type State = {
  21. accessRequestBusy: Record<string, boolean>;
  22. };
  23. type HandleOpts = {
  24. errorMessage: string;
  25. id: string;
  26. isApproved: boolean;
  27. successMessage: string;
  28. };
  29. class OrganizationAccessRequests extends Component<Props, State> {
  30. state: State = {
  31. accessRequestBusy: {},
  32. };
  33. async handleAction({id, isApproved, successMessage, errorMessage}: HandleOpts) {
  34. const {api, orgSlug, onRemoveAccessRequest} = this.props;
  35. this.setState(state => ({
  36. accessRequestBusy: {...state.accessRequestBusy, [id]: true},
  37. }));
  38. try {
  39. await api.requestPromise(`/organizations/${orgSlug}/access-requests/${id}/`, {
  40. method: 'PUT',
  41. data: {isApproved},
  42. });
  43. onRemoveAccessRequest(id, isApproved);
  44. addSuccessMessage(successMessage);
  45. } catch {
  46. addErrorMessage(errorMessage);
  47. }
  48. this.setState(state => ({
  49. accessRequestBusy: {...state.accessRequestBusy, [id]: false},
  50. }));
  51. }
  52. handleApprove = (id: string, e: React.MouseEvent) => {
  53. e.stopPropagation();
  54. this.handleAction({
  55. id,
  56. isApproved: true,
  57. successMessage: t('Team request approved'),
  58. errorMessage: t('Error approving team request'),
  59. });
  60. };
  61. handleDeny = (id: string, e: React.MouseEvent) => {
  62. e.stopPropagation();
  63. this.handleAction({
  64. id,
  65. isApproved: false,
  66. successMessage: t('Team request denied'),
  67. errorMessage: t('Error denying team request'),
  68. });
  69. };
  70. render() {
  71. const {requestList} = this.props;
  72. const {accessRequestBusy} = this.state;
  73. if (!requestList || !requestList.length) {
  74. return null;
  75. }
  76. return (
  77. <Panel>
  78. <PanelHeader>{t('Pending Team Requests')}</PanelHeader>
  79. <PanelBody>
  80. {requestList.map(({id, member, team, requester}) => {
  81. const memberName =
  82. member.user &&
  83. (member.user.name || member.user.email || member.user.username);
  84. const requesterName =
  85. requester && (requester.name || requester.email || requester.username);
  86. return (
  87. <StyledPanelItem key={id}>
  88. <div data-test-id="request-message">
  89. {requesterName
  90. ? tct('[requesterName] requests to add [name] to the [team] team.', {
  91. requesterName,
  92. name: <strong>{memberName}</strong>,
  93. team: <strong>#{team.slug}</strong>,
  94. })
  95. : tct('[name] requests access to the [team] team.', {
  96. name: <strong>{memberName}</strong>,
  97. team: <strong>#{team.slug}</strong>,
  98. })}
  99. </div>
  100. <div>
  101. <StyledButton
  102. priority="primary"
  103. size="sm"
  104. onClick={e => this.handleApprove(id, e)}
  105. busy={accessRequestBusy[id]}
  106. >
  107. {t('Approve')}
  108. </StyledButton>
  109. <Button
  110. busy={accessRequestBusy[id]}
  111. onClick={e => this.handleDeny(id, e)}
  112. size="sm"
  113. >
  114. {t('Deny')}
  115. </Button>
  116. </div>
  117. </StyledPanelItem>
  118. );
  119. })}
  120. </PanelBody>
  121. </Panel>
  122. );
  123. }
  124. }
  125. const StyledPanelItem = styled(PanelItem)`
  126. display: grid;
  127. grid-template-columns: auto max-content;
  128. gap: ${space(2)};
  129. align-items: center;
  130. `;
  131. const StyledButton = styled(Button)`
  132. margin-right: ${space(1)};
  133. `;
  134. export default withApi(OrganizationAccessRequests);