customResolutionModal.tsx 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import {Fragment, useState} from 'react';
  2. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  3. import {Button} from 'sentry/components/button';
  4. import SelectAsyncField from 'sentry/components/deprecatedforms/selectAsyncField';
  5. import TimeSince from 'sentry/components/timeSince';
  6. import Version from 'sentry/components/version';
  7. import {t} from 'sentry/locale';
  8. import configStore from 'sentry/stores/configStore';
  9. import {space} from 'sentry/styles/space';
  10. import type {Release} from 'sentry/types';
  11. interface CustomResolutionModalProps extends ModalRenderProps {
  12. onSelected: (change: {inRelease: string}) => void;
  13. orgSlug: string;
  14. projectSlug?: string;
  15. }
  16. function CustomResolutionModal(props: CustomResolutionModalProps) {
  17. const [version, setVersion] = useState('');
  18. const currentUser = configStore.get('user');
  19. const onChange = (value: any) => {
  20. setVersion(value.item);
  21. };
  22. const onAsyncFieldResults = (results: Release[]) => {
  23. return results.map(release => {
  24. const isAuthor = release.authors.some(
  25. author => author.email && author.email === currentUser?.email
  26. );
  27. return {
  28. item: release.version,
  29. label: <Version version={release.version} anchor={false} />,
  30. plainTextLabel: release.versionInfo.description ?? release.version,
  31. details: (
  32. <span>
  33. {t('Created')} <TimeSince date={release.dateCreated} />
  34. {isAuthor ? <Fragment> — {t('You committed')}</Fragment> : null}
  35. </span>
  36. ),
  37. release,
  38. };
  39. });
  40. };
  41. const url = props.projectSlug
  42. ? `/projects/${props.orgSlug}/${props.projectSlug}/releases/`
  43. : `/organizations/${props.orgSlug}/releases/`;
  44. const onSubmit = (e: React.FormEvent) => {
  45. e.preventDefault();
  46. props.onSelected({inRelease: version});
  47. props.closeModal();
  48. };
  49. const {Header, Body, Footer} = props;
  50. return (
  51. <form onSubmit={onSubmit}>
  52. <Header>
  53. <h4>{t('Resolved In')}</h4>
  54. </Header>
  55. <Body>
  56. <SelectAsyncField
  57. label={t('Version')}
  58. id="version"
  59. name="version"
  60. onChange={onChange}
  61. placeholder={t('e.g. 1.0.4')}
  62. url={url}
  63. onResults={onAsyncFieldResults}
  64. onQuery={query => ({query})}
  65. />
  66. </Body>
  67. <Footer>
  68. <Button css={{marginRight: space(1.5)}} onClick={props.closeModal}>
  69. {t('Cancel')}
  70. </Button>
  71. <Button type="submit" priority="primary">
  72. {t('Save Changes')}
  73. </Button>
  74. </Footer>
  75. </form>
  76. );
  77. }
  78. export default CustomResolutionModal;