selectOwners.tsx 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. import {Component, createRef} from 'react';
  2. import {findDOMNode} from 'react-dom';
  3. import type {MultiValueProps} from 'react-select';
  4. import styled from '@emotion/styled';
  5. import debounce from 'lodash/debounce';
  6. import isEqual from 'lodash/isEqual';
  7. import {addTeamToProject} from 'sentry/actionCreators/projects';
  8. import type {Client} from 'sentry/api';
  9. import ActorAvatar from 'sentry/components/avatar/actorAvatar';
  10. import {Button} from 'sentry/components/button';
  11. import SelectControl from 'sentry/components/forms/controls/selectControl';
  12. import IdBadge from 'sentry/components/idBadge';
  13. import {Tooltip} from 'sentry/components/tooltip';
  14. import {IconAdd} from 'sentry/icons';
  15. import {t} from 'sentry/locale';
  16. import MemberListStore from 'sentry/stores/memberListStore';
  17. import ProjectsStore from 'sentry/stores/projectsStore';
  18. import TeamStore from 'sentry/stores/teamStore';
  19. import {space} from 'sentry/styles/space';
  20. import type {Actor, Member, Organization, Project, Team, User} from 'sentry/types';
  21. import {buildTeamId, buildUserId} from 'sentry/utils';
  22. import withApi from 'sentry/utils/withApi';
  23. import withProjects from 'sentry/utils/withProjects';
  24. export type Owner = {
  25. actor: Actor;
  26. label: React.ReactNode;
  27. searchKey: string;
  28. value: string;
  29. disabled?: boolean;
  30. };
  31. function ValueComponent({data, removeProps}: MultiValueProps<Owner>) {
  32. return (
  33. <ValueWrapper onClick={removeProps.onClick}>
  34. <ActorAvatar actor={data.actor} size={28} />
  35. </ValueWrapper>
  36. );
  37. }
  38. const getSearchKeyForUser = (user: User) =>
  39. `${user.email && user.email.toLowerCase()} ${user.name && user.name.toLowerCase()}`;
  40. type Props = {
  41. api: Client;
  42. disabled: boolean;
  43. onChange: (owners: Owner[]) => void;
  44. organization: Organization;
  45. project: Project;
  46. projects: Project[];
  47. value: any;
  48. onInputChange?: (text: string) => void;
  49. };
  50. type State = {
  51. inputValue: string;
  52. loading: boolean;
  53. };
  54. class SelectOwners extends Component<Props, State> {
  55. state: State = {
  56. loading: false,
  57. inputValue: '',
  58. };
  59. componentDidUpdate(prevProps: Props) {
  60. // Once a team has been added to the project the menu can be closed.
  61. if (!isEqual(this.props.projects, prevProps.projects)) {
  62. this.closeSelectMenu();
  63. }
  64. }
  65. private selectRef = createRef<any>();
  66. renderUserBadge = (user: User) => (
  67. <IdBadge avatarSize={24} user={user} hideEmail useLink={false} />
  68. );
  69. createMentionableUser = (user: User): Owner => ({
  70. value: buildUserId(user.id),
  71. label: this.renderUserBadge(user),
  72. searchKey: getSearchKeyForUser(user),
  73. actor: {
  74. type: 'user' as const,
  75. id: user.id,
  76. name: user.name,
  77. },
  78. });
  79. createUnmentionableUser = ({user}): Owner => ({
  80. ...this.createMentionableUser(user),
  81. disabled: true,
  82. label: (
  83. <DisabledLabel>
  84. <Tooltip
  85. position="left"
  86. title={t('%s is not a member of project', user.name || user.email)}
  87. >
  88. {this.renderUserBadge(user)}
  89. </Tooltip>
  90. </DisabledLabel>
  91. ),
  92. });
  93. createMentionableTeam = (team: Team): Owner => ({
  94. value: buildTeamId(team.id),
  95. label: <IdBadge team={team} />,
  96. searchKey: `#${team.slug}`,
  97. actor: {
  98. type: 'team' as const,
  99. id: team.id,
  100. name: team.slug,
  101. },
  102. });
  103. createUnmentionableTeam = (team: Team): Owner => {
  104. const {organization} = this.props;
  105. const canAddTeam = organization.access.includes('project:write');
  106. return {
  107. ...this.createMentionableTeam(team),
  108. disabled: true,
  109. label: (
  110. <Container>
  111. <DisabledLabel>
  112. <Tooltip
  113. position="left"
  114. title={t('%s is not a member of project', `#${team.slug}`)}
  115. >
  116. <IdBadge team={team} />
  117. </Tooltip>
  118. </DisabledLabel>
  119. <Tooltip
  120. title={
  121. canAddTeam
  122. ? t('Add %s to project', `#${team.slug}`)
  123. : t('You do not have permission to add team to project.')
  124. }
  125. >
  126. <AddToProjectButton
  127. size="zero"
  128. borderless
  129. disabled={!canAddTeam}
  130. onClick={this.handleAddTeamToProject.bind(this, team)}
  131. icon={<IconAdd isCircled />}
  132. aria-label={t('Add %s to project', `#${team.slug}`)}
  133. />
  134. </Tooltip>
  135. </Container>
  136. ),
  137. };
  138. };
  139. getMentionableUsers() {
  140. return MemberListStore.getAll().map(this.createMentionableUser);
  141. }
  142. getMentionableTeams() {
  143. const {project} = this.props;
  144. const projectData = ProjectsStore.getBySlug(project.slug);
  145. if (!projectData) {
  146. return [];
  147. }
  148. return projectData.teams.map(this.createMentionableTeam);
  149. }
  150. /**
  151. * Get list of teams that are not in the current project, for use in `MultiSelectMenu`
  152. */
  153. getTeamsNotInProject(teamsInProject: Owner[] = []) {
  154. const teams = TeamStore.getAll() || [];
  155. const excludedTeamIds = teamsInProject.map(({actor}) => actor.id);
  156. return teams
  157. .filter(team => !excludedTeamIds.includes(team.id))
  158. .map(this.createUnmentionableTeam);
  159. }
  160. /**
  161. * Closes the select menu by blurring input if possible since that seems to be the only
  162. * way to close it.
  163. */
  164. closeSelectMenu() {
  165. // Close select menu
  166. if (this.selectRef.current) {
  167. // eslint-disable-next-line react/no-find-dom-node
  168. const node = findDOMNode(this.selectRef.current);
  169. const input: HTMLInputElement | null = (node as Element)?.querySelector(
  170. '.Select-input input'
  171. );
  172. if (input) {
  173. // I don't think there's another way to close `react-select`
  174. input.blur();
  175. }
  176. }
  177. }
  178. async handleAddTeamToProject(team) {
  179. const {api, organization, project, value} = this.props;
  180. // Copy old value
  181. const oldValue = [...value];
  182. // Optimistic update
  183. this.props.onChange([...this.props.value, this.createMentionableTeam(team)]);
  184. try {
  185. // Try to add team to project
  186. // Note: we can't close select menu here because we have to wait for ProjectsStore to update first
  187. // The reason for this is because we have little control over `react-select`'s `AsyncSelect`
  188. // We can't control when `handleLoadOptions` gets called, but it gets called when select closes, so
  189. // wait for store to update before closing the menu. Otherwise, we'll have stale items in the select menu
  190. await addTeamToProject(api, organization.slug, project.slug, team);
  191. } catch (err) {
  192. // Unable to add team to project, revert select menu value
  193. this.props.onChange(oldValue);
  194. this.closeSelectMenu();
  195. }
  196. }
  197. handleChange = (newValue: Owner[]) => {
  198. this.props.onChange(newValue);
  199. };
  200. handleInputChange = (inputValue: string) => {
  201. this.setState({inputValue});
  202. if (this.props.onInputChange) {
  203. this.props.onInputChange(inputValue);
  204. }
  205. };
  206. queryMembers = debounce((query, cb) => {
  207. const {api, organization} = this.props;
  208. // Because this function is debounced, the component can potentially be
  209. // unmounted before this fires, in which case, `this.api` is null
  210. if (!api) {
  211. return null;
  212. }
  213. return api
  214. .requestPromise(`/organizations/${organization.slug}/members/`, {
  215. query: {query},
  216. })
  217. .then(
  218. (data: Member[]) => cb(null, data),
  219. err => cb(err)
  220. );
  221. }, 250);
  222. handleLoadOptions = () => {
  223. const usersInProject = this.getMentionableUsers();
  224. const teamsInProject = this.getMentionableTeams();
  225. const teamsNotInProject = this.getTeamsNotInProject(teamsInProject);
  226. const usersInProjectById = usersInProject.map(({actor}) => actor.id);
  227. // Return a promise for `react-select`
  228. return new Promise((resolve, reject) => {
  229. this.queryMembers(this.state.inputValue, (err, result) => {
  230. if (err) {
  231. reject(err);
  232. } else {
  233. resolve(result);
  234. }
  235. });
  236. })
  237. .then(members =>
  238. // Be careful here as we actually want the `users` object, otherwise it means user
  239. // has not registered for sentry yet, but has been invited
  240. members
  241. ? (members as Member[])
  242. .filter(({user}) => user && !usersInProjectById.includes(user.id))
  243. .map(this.createUnmentionableUser)
  244. : []
  245. )
  246. .then(members => {
  247. return [...usersInProject, ...teamsInProject, ...teamsNotInProject, ...members];
  248. });
  249. };
  250. render() {
  251. return (
  252. <SelectControl
  253. multiple
  254. name="owners"
  255. filterOption={(option, filterText) =>
  256. option.data.searchKey.indexOf(filterText) > -1
  257. }
  258. ref={this.selectRef}
  259. loadOptions={this.handleLoadOptions}
  260. defaultOptions
  261. async
  262. clearable
  263. disabled={this.props.disabled}
  264. cache={false}
  265. aria-label={t('Rule owner')}
  266. placeholder={t('Owners')}
  267. components={{
  268. MultiValue: ValueComponent,
  269. }}
  270. onInputChange={this.handleInputChange}
  271. onChange={this.handleChange}
  272. value={this.props.value}
  273. css={{width: 300}}
  274. />
  275. );
  276. }
  277. }
  278. export default withApi(withProjects(SelectOwners));
  279. const Container = styled('div')`
  280. display: flex;
  281. justify-content: space-between;
  282. `;
  283. const DisabledLabel = styled('div')`
  284. opacity: 0.5;
  285. overflow: hidden; /* Needed so that "Add to team" button can fit */
  286. `;
  287. const AddToProjectButton = styled(Button)`
  288. flex-shrink: 0;
  289. `;
  290. const ValueWrapper = styled('a')`
  291. margin-right: ${space(0.5)};
  292. `;