serviceHookSettingsForm.tsx 2.8 KB

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