allTeamsRow.tsx 7.7 KB

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