allTeamsRow.tsx 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. import {Component} from 'react';
  2. import styled from '@emotion/styled';
  3. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  4. import {fetchOrganizationDetails} from 'sentry/actionCreators/organizations';
  5. import {joinTeam, leaveTeam} from 'sentry/actionCreators/teams';
  6. import type {Client} from 'sentry/api';
  7. import {Button} from 'sentry/components/button';
  8. import IdBadge from 'sentry/components/idBadge';
  9. import Link from 'sentry/components/links/link';
  10. import PanelItem from 'sentry/components/panels/panelItem';
  11. import {t, tct, tn} from 'sentry/locale';
  12. import TeamStore from 'sentry/stores/teamStore';
  13. import {space} from 'sentry/styles/space';
  14. import type {Organization, Team} from 'sentry/types/organization';
  15. import withApi from 'sentry/utils/withApi';
  16. import {getButtonHelpText} from 'sentry/views/settings/organizationTeams/utils';
  17. type Props = {
  18. api: Client;
  19. openMembership: boolean;
  20. organization: Organization;
  21. team: Team;
  22. };
  23. type State = {
  24. error: boolean;
  25. loading: boolean;
  26. };
  27. class AllTeamsRow extends Component<Props, State> {
  28. state: State = {
  29. loading: false,
  30. error: false,
  31. };
  32. reloadProjects() {
  33. const {api, organization} = this.props;
  34. // After a change in teams has happened, refresh the project store
  35. fetchOrganizationDetails(api, organization.slug, {
  36. loadProjects: true,
  37. });
  38. }
  39. handleRequestAccess = () => {
  40. const {team} = this.props;
  41. try {
  42. this.joinTeam({
  43. successMessage: tct('You have requested access to [team]', {
  44. team: `#${team.slug}`,
  45. }),
  46. errorMessage: tct('Unable to request access to [team]', {
  47. team: `#${team.slug}`,
  48. }),
  49. });
  50. // Update team so that `isPending` is true
  51. TeamStore.onUpdateSuccess(team.slug, {
  52. ...team,
  53. isPending: true,
  54. });
  55. } catch (_err) {
  56. // No need to do anything
  57. }
  58. };
  59. handleJoinTeam = async () => {
  60. const {team} = this.props;
  61. await this.joinTeam({
  62. successMessage: tct('You have joined [team]', {
  63. team: `#${team.slug}`,
  64. }),
  65. errorMessage: tct('Unable to join [team]', {
  66. team: `#${team.slug}`,
  67. }),
  68. });
  69. this.reloadProjects();
  70. };
  71. joinTeam = ({
  72. successMessage,
  73. errorMessage,
  74. }: {
  75. errorMessage: React.ReactNode;
  76. successMessage: React.ReactNode;
  77. }) => {
  78. const {api, organization, team} = this.props;
  79. this.setState({
  80. loading: true,
  81. });
  82. return new Promise<void>((resolve, reject) =>
  83. joinTeam(
  84. api,
  85. {
  86. orgId: organization.slug,
  87. teamId: team.slug,
  88. },
  89. {
  90. success: () => {
  91. this.setState({
  92. loading: false,
  93. error: false,
  94. });
  95. addSuccessMessage(successMessage);
  96. resolve();
  97. },
  98. error: () => {
  99. this.setState({
  100. loading: false,
  101. error: true,
  102. });
  103. addErrorMessage(errorMessage);
  104. reject(new Error('Unable to join team'));
  105. },
  106. }
  107. )
  108. );
  109. };
  110. handleLeaveTeam = () => {
  111. const {api, organization, team} = this.props;
  112. this.setState({
  113. loading: true,
  114. });
  115. leaveTeam(
  116. api,
  117. {
  118. orgId: organization.slug,
  119. teamId: team.slug,
  120. },
  121. {
  122. success: () => {
  123. this.setState({
  124. loading: false,
  125. error: false,
  126. });
  127. addSuccessMessage(
  128. tct('You have left [team]', {
  129. team: `#${team.slug}`,
  130. })
  131. );
  132. // Reload ProjectsStore
  133. this.reloadProjects();
  134. },
  135. error: () => {
  136. this.setState({
  137. loading: false,
  138. error: true,
  139. });
  140. addErrorMessage(
  141. tct('Unable to leave [team]', {
  142. team: `#${team.slug}`,
  143. })
  144. );
  145. },
  146. }
  147. );
  148. };
  149. getTeamRoleName = () => {
  150. const {organization, team} = this.props;
  151. const {teamRoleList} = organization;
  152. const roleName = teamRoleList.find(r => r.id === team.teamRole)?.name;
  153. return roleName;
  154. };
  155. render() {
  156. const {team, openMembership, organization} = this.props;
  157. const urlPrefix = `/settings/${organization.slug}/teams/`;
  158. // TODO(team-roles): team admins can also manage membership
  159. // org:admin is a unique scope that only org owners have
  160. const isIdpProvisioned = team.flags['idp:provisioned'];
  161. const buttonHelpText = getButtonHelpText(isIdpProvisioned);
  162. const display = (
  163. <IdBadge
  164. team={team}
  165. avatarSize={36}
  166. description={tn('%s Member', '%s Members', team.memberCount)}
  167. />
  168. );
  169. // You can only view team details if you have access to team -- this should account
  170. // for your role + org open membership
  171. const canViewTeam = team.hasAccess;
  172. const teamRoleName = this.getTeamRoleName();
  173. const isDisabled = isIdpProvisioned;
  174. return (
  175. <TeamPanelItem>
  176. <div>
  177. {canViewTeam ? (
  178. <TeamLink data-test-id="team-link" to={`${urlPrefix}${team.slug}/`}>
  179. {display}
  180. </TeamLink>
  181. ) : (
  182. display
  183. )}
  184. </div>
  185. <DisplayRole isHidden={teamRoleName === null}>{teamRoleName}</DisplayRole>
  186. <div>
  187. {this.state.loading ? (
  188. <Button size="sm" disabled>
  189. ...
  190. </Button>
  191. ) : team.isMember ? (
  192. <Button
  193. size="sm"
  194. onClick={this.handleLeaveTeam}
  195. disabled={isDisabled}
  196. title={buttonHelpText}
  197. >
  198. {t('Leave Team')}
  199. </Button>
  200. ) : team.isPending ? (
  201. <Button
  202. size="sm"
  203. disabled
  204. title={t(
  205. 'Your request to join this team is being reviewed by organization owners'
  206. )}
  207. >
  208. {t('Request Pending')}
  209. </Button>
  210. ) : openMembership ? (
  211. <Button
  212. size="sm"
  213. onClick={this.handleJoinTeam}
  214. disabled={isDisabled}
  215. title={buttonHelpText}
  216. >
  217. {t('Join Team')}
  218. </Button>
  219. ) : (
  220. <Button
  221. size="sm"
  222. onClick={this.handleRequestAccess}
  223. disabled={isDisabled}
  224. title={buttonHelpText}
  225. >
  226. {t('Request Access')}
  227. </Button>
  228. )}
  229. </div>
  230. </TeamPanelItem>
  231. );
  232. }
  233. }
  234. const TeamLink = styled(Link)`
  235. display: inline-block;
  236. &:focus-visible {
  237. margin: -${space(1)};
  238. padding: ${space(1)};
  239. background: #f2eff5;
  240. border-radius: 3px;
  241. outline: none;
  242. }
  243. `;
  244. export {AllTeamsRow};
  245. export default withApi(AllTeamsRow);
  246. export const GRID_TEMPLATE = `
  247. display: grid;
  248. grid-template-columns: minmax(150px, 4fr) minmax(0px, 100px) 125px minmax(150px, 1fr);
  249. gap: ${space(1)};
  250. `;
  251. const TeamPanelItem = styled(PanelItem)`
  252. ${GRID_TEMPLATE}
  253. align-items: center;
  254. > div:last-child {
  255. margin-left: auto;
  256. }
  257. `;
  258. const DisplayRole = styled('div')<{isHidden: boolean}>`
  259. display: ${props => (props.isHidden ? 'none' : 'block')};
  260. `;