teamAccessRequestModal.tsx 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import {Component, Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  4. import {
  5. ModalRenderProps,
  6. TeamAccessRequestModalOptions,
  7. } from 'sentry/actionCreators/modal';
  8. import {Client} from 'sentry/api';
  9. import Button from 'sentry/components/button';
  10. import {t, tct} from 'sentry/locale';
  11. import space from 'sentry/styles/space';
  12. import withApi from 'sentry/utils/withApi';
  13. type Props = ModalRenderProps &
  14. TeamAccessRequestModalOptions & {
  15. api: Client;
  16. memberId: string;
  17. orgId: string;
  18. teamId: string;
  19. };
  20. type State = {
  21. createBusy: boolean;
  22. };
  23. class CreateTeamAccessRequest extends Component<Props, State> {
  24. state: State = {
  25. createBusy: false,
  26. };
  27. handleClick = async () => {
  28. const {api, memberId, orgId, teamId, closeModal} = this.props;
  29. this.setState({createBusy: true});
  30. try {
  31. await api.requestPromise(
  32. `/organizations/${orgId}/members/${memberId}/teams/${teamId}/`,
  33. {
  34. method: 'POST',
  35. }
  36. );
  37. addSuccessMessage(t('Team request sent for approval'));
  38. } catch (err) {
  39. addErrorMessage(t('Unable to send team request'));
  40. }
  41. this.setState({createBusy: false});
  42. closeModal();
  43. };
  44. render() {
  45. const {Body, Footer, closeModal, teamId} = this.props;
  46. return (
  47. <Fragment>
  48. <Body>
  49. {tct(
  50. 'You do not have permission to add members to the #[team] team, but we will send a request to your organization admins for approval.',
  51. {team: teamId}
  52. )}
  53. </Body>
  54. <Footer>
  55. <ButtonGroup>
  56. <Button onClick={closeModal}>{t('Cancel')}</Button>
  57. <Button
  58. priority="primary"
  59. onClick={this.handleClick}
  60. busy={this.state.createBusy}
  61. autoFocus
  62. >
  63. {t('Continue')}
  64. </Button>
  65. </ButtonGroup>
  66. </Footer>
  67. </Fragment>
  68. );
  69. }
  70. }
  71. const ButtonGroup = styled('div')`
  72. display: grid;
  73. grid-template-columns: max-content max-content;
  74. gap: ${space(1)};
  75. `;
  76. export default withApi(CreateTeamAccessRequest);