ownerInput.tsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. import {Component, Fragment} 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 TextArea from 'sentry/components/forms/controls/textarea';
  7. import {t} from 'sentry/locale';
  8. import MemberListStore from 'sentry/stores/memberListStore';
  9. import ProjectsStore from 'sentry/stores/projectsStore';
  10. import {Organization, Project, Team} from 'sentry/types';
  11. import {defined} from 'sentry/utils';
  12. import RuleBuilder from './ruleBuilder';
  13. const defaultProps = {
  14. urls: [] as string[],
  15. paths: [] as string[],
  16. disabled: false,
  17. };
  18. type Props = {
  19. initialText: string;
  20. organization: Organization;
  21. project: Project;
  22. onSave?: (text: string | null) => void;
  23. } & typeof defaultProps;
  24. type State = {
  25. error: null | {
  26. raw: string[];
  27. };
  28. hasChanges: boolean;
  29. text: string | null;
  30. };
  31. class OwnerInput extends Component<Props, State> {
  32. static defaultProps = defaultProps;
  33. state: State = {
  34. hasChanges: false,
  35. text: null,
  36. error: null,
  37. };
  38. parseError(error: State['error']) {
  39. const text = error?.raw?.[0];
  40. if (!text) {
  41. return null;
  42. }
  43. if (text.startsWith('Invalid rule owners:')) {
  44. return <InvalidOwners>{text}</InvalidOwners>;
  45. }
  46. return (
  47. <SyntaxOverlay line={parseInt(text.match(/line (\d*),/)?.[1] ?? '', 10) - 1} />
  48. );
  49. }
  50. handleUpdateOwnership = () => {
  51. const {organization, project, onSave} = this.props;
  52. const {text} = this.state;
  53. this.setState({error: null});
  54. const api = new Client();
  55. const request = api.requestPromise(
  56. `/projects/${organization.slug}/${project.slug}/ownership/`,
  57. {
  58. method: 'PUT',
  59. data: {raw: text || ''},
  60. }
  61. );
  62. request
  63. .then(() => {
  64. addSuccessMessage(t('Updated issue ownership rules'));
  65. this.setState(
  66. {
  67. hasChanges: false,
  68. text,
  69. },
  70. () => onSave && onSave(text)
  71. );
  72. })
  73. .catch(error => {
  74. this.setState({error: error.responseJSON});
  75. if (error.status === 403) {
  76. addErrorMessage(
  77. t(
  78. "You don't have permission to modify issue ownership rules for this project"
  79. )
  80. );
  81. } else if (
  82. error.status === 400 &&
  83. error.responseJSON.raw &&
  84. error.responseJSON.raw[0].startsWith('Invalid rule owners:')
  85. ) {
  86. addErrorMessage(
  87. t('Unable to save issue ownership rule changes: ' + error.responseJSON.raw[0])
  88. );
  89. } else {
  90. addErrorMessage(t('Unable to save issue ownership rule changes'));
  91. }
  92. });
  93. return request;
  94. };
  95. mentionableUsers() {
  96. return MemberListStore.getAll().map(member => ({
  97. id: member.id,
  98. display: member.email,
  99. email: member.email,
  100. }));
  101. }
  102. mentionableTeams() {
  103. const {project} = this.props;
  104. const projectWithTeams = ProjectsStore.getBySlug(project.slug);
  105. if (!projectWithTeams) {
  106. return [];
  107. }
  108. return projectWithTeams.teams.map((team: Team) => ({
  109. id: team.id,
  110. display: `#${team.slug}`,
  111. email: team.id,
  112. }));
  113. }
  114. handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  115. this.setState({
  116. hasChanges: true,
  117. text: e.target.value,
  118. });
  119. };
  120. handleAddRule = (rule: string) => {
  121. const {initialText} = this.props;
  122. this.setState(
  123. ({text}) => ({
  124. text: (text || initialText) + '\n' + rule,
  125. }),
  126. this.handleUpdateOwnership
  127. );
  128. };
  129. render() {
  130. const {project, organization, disabled, urls, paths, initialText} = this.props;
  131. const {hasChanges, text, error} = this.state;
  132. return (
  133. <Fragment>
  134. <RuleBuilder
  135. urls={urls}
  136. paths={paths}
  137. organization={organization}
  138. project={project}
  139. onAddRule={this.handleAddRule.bind(this)}
  140. disabled={disabled}
  141. />
  142. <div
  143. style={{position: 'relative'}}
  144. onKeyDown={e => {
  145. if (e.metaKey && e.key === 'Enter') {
  146. this.handleUpdateOwnership();
  147. }
  148. }}
  149. >
  150. <StyledTextArea
  151. placeholder={
  152. '#example usage\n' +
  153. 'path:src/example/pipeline/* person@sentry.io #infra\n' +
  154. 'module:com.module.name.example #sdks\n' +
  155. 'url:http://example.com/settings/* #product\n' +
  156. 'tags.sku_class:enterprise #enterprise'
  157. }
  158. autosize
  159. monospace
  160. onChange={this.handleChange}
  161. disabled={disabled}
  162. value={defined(text) ? text : initialText}
  163. spellCheck="false"
  164. autoComplete="off"
  165. autoCorrect="off"
  166. autoCapitalize="off"
  167. />
  168. <ActionBar>
  169. <div>{this.parseError(error)}</div>
  170. <SaveButton>
  171. <Button
  172. size="sm"
  173. priority="primary"
  174. onClick={this.handleUpdateOwnership}
  175. disabled={disabled || !hasChanges}
  176. >
  177. {t('Save Changes')}
  178. </Button>
  179. </SaveButton>
  180. </ActionBar>
  181. </div>
  182. </Fragment>
  183. );
  184. }
  185. }
  186. const TEXTAREA_PADDING = 4;
  187. const TEXTAREA_LINE_HEIGHT = 24;
  188. const ActionBar = styled('div')`
  189. display: flex;
  190. align-items: center;
  191. justify-content: space-between;
  192. `;
  193. const SyntaxOverlay = styled('div')<{line: number}>`
  194. position: absolute;
  195. top: ${({line}) => TEXTAREA_PADDING + line * TEXTAREA_LINE_HEIGHT + 1}px;
  196. width: 100%;
  197. height: ${TEXTAREA_LINE_HEIGHT}px;
  198. background-color: ${p => p.theme.error};
  199. opacity: 0.1;
  200. pointer-events: none;
  201. `;
  202. const SaveButton = styled('div')`
  203. text-align: end;
  204. padding-top: 10px;
  205. `;
  206. const StyledTextArea = styled(TextArea)`
  207. min-height: 140px;
  208. overflow: auto;
  209. outline: 0;
  210. width: 100%;
  211. resize: none;
  212. margin: 0;
  213. word-break: break-all;
  214. white-space: pre-wrap;
  215. padding-top: ${TEXTAREA_PADDING}px;
  216. line-height: ${TEXTAREA_LINE_HEIGHT}px;
  217. `;
  218. const InvalidOwners = styled('div')`
  219. color: ${p => p.theme.error};
  220. font-weight: bold;
  221. margin-top: 12px;
  222. `;
  223. export default OwnerInput;