serviceHookSettingsForm.tsx 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import {Component} from 'react';
  2. import {browserHistory} from 'react-router';
  3. import ApiForm from 'sentry/components/forms/apiForm';
  4. import BooleanField from 'sentry/components/forms/booleanField';
  5. import MultipleCheckbox from 'sentry/components/forms/controls/multipleCheckbox';
  6. import FormField from 'sentry/components/forms/formField';
  7. import TextField from 'sentry/components/forms/textField';
  8. import {Panel, PanelBody, PanelHeader} from 'sentry/components/panels';
  9. import {t} from 'sentry/locale';
  10. import {Choices, ServiceHook} from 'sentry/types';
  11. const EVENT_CHOICES: Choices = ['event.alert', 'event.created'].map(e => [e, e]);
  12. type Props = {
  13. initialData: Partial<ServiceHook> & {isActive: boolean};
  14. orgId: string;
  15. projectId: string;
  16. hookId?: string;
  17. };
  18. export default class ServiceHookSettingsForm extends Component<Props> {
  19. onSubmitSuccess = () => {
  20. const {orgId, projectId} = this.props;
  21. browserHistory.push(`/settings/${orgId}/projects/${projectId}/hooks/`);
  22. };
  23. render() {
  24. const {initialData, orgId, projectId, hookId} = this.props;
  25. const endpoint = hookId
  26. ? `/projects/${orgId}/${projectId}/hooks/${hookId}/`
  27. : `/projects/${orgId}/${projectId}/hooks/`;
  28. return (
  29. <Panel>
  30. <ApiForm
  31. apiMethod={hookId ? 'PUT' : 'POST'}
  32. apiEndpoint={endpoint}
  33. initialData={initialData}
  34. onSubmitSuccess={this.onSubmitSuccess}
  35. footerStyle={{
  36. marginTop: 0,
  37. paddingRight: 20,
  38. }}
  39. submitLabel={hookId ? t('Save Changes') : t('Create Hook')}
  40. >
  41. <PanelHeader>{t('Hook Configuration')}</PanelHeader>
  42. <PanelBody>
  43. <BooleanField name="isActive" label={t('Active')} />
  44. <TextField
  45. name="url"
  46. label={t('URL')}
  47. required
  48. help={t('The URL which will receive events.')}
  49. />
  50. <FormField
  51. name="events"
  52. label={t('Events')}
  53. inline={false}
  54. help={t('The event types you wish to subscribe to.')}
  55. >
  56. {({value, onChange}) => (
  57. <MultipleCheckbox
  58. onChange={onChange}
  59. value={value}
  60. choices={EVENT_CHOICES}
  61. />
  62. )}
  63. </FormField>
  64. </PanelBody>
  65. </ApiForm>
  66. </Panel>
  67. );
  68. }
  69. }