index.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  2. import ApiForm from 'sentry/components/forms/apiForm';
  3. import CheckboxField from 'sentry/components/forms/fields/checkboxField';
  4. import TextField from 'sentry/components/forms/fields/textField';
  5. import NarrowLayout from 'sentry/components/narrowLayout';
  6. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  7. import {t, tct} from 'sentry/locale';
  8. import ConfigStore from 'sentry/stores/configStore';
  9. import {OrganizationSummary} from 'sentry/types';
  10. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  11. function OrganizationCreate() {
  12. const termsUrl = ConfigStore.get('termsUrl');
  13. const privacyUrl = ConfigStore.get('privacyUrl');
  14. return (
  15. <SentryDocumentTitle title={t('Create Organization')}>
  16. <NarrowLayout showLogout>
  17. <h3>{t('Create a New Organization')}</h3>
  18. <p>
  19. {t(
  20. "Organizations represent the top level in your hierarchy. You'll be able to bundle a collection of teams within an organization as well as give organization-wide permissions to users."
  21. )}
  22. </p>
  23. <ApiForm
  24. initialData={{defaultTeam: true}}
  25. submitLabel={t('Create Organization')}
  26. apiEndpoint="/organizations/"
  27. apiMethod="POST"
  28. onSubmitSuccess={(createdOrg: OrganizationSummary) => {
  29. const hasCustomerDomain = createdOrg?.features.includes('customer-domains');
  30. let nextUrl = normalizeUrl(
  31. `/organizations/${createdOrg.slug}/projects/new/`,
  32. {forceCustomerDomain: hasCustomerDomain}
  33. );
  34. if (hasCustomerDomain) {
  35. nextUrl = `${createdOrg.links.organizationUrl}${nextUrl}`;
  36. }
  37. // redirect to project creation *(BYPASS REACT ROUTER AND FORCE PAGE REFRESH TO GRAB CSRF TOKEN)*
  38. // browserHistory.pushState(null, `/organizations/${data.slug}/projects/new/`);
  39. window.location.assign(nextUrl);
  40. }}
  41. onSubmitError={error => {
  42. addErrorMessage(
  43. error.responseJSON?.detail ?? t('Unable to create organization.')
  44. );
  45. }}
  46. requireChanges
  47. >
  48. <TextField
  49. id="organization-name"
  50. name="name"
  51. label={t('Organization Name')}
  52. placeholder={t('e.g. My Company')}
  53. inline={false}
  54. flexibleControlStateSize
  55. stacked
  56. required
  57. />
  58. {termsUrl && privacyUrl && (
  59. <CheckboxField
  60. name="agreeTerms"
  61. label={tct(
  62. 'I agree to the [termsLink:Terms of Service] and the [privacyLink:Privacy Policy]',
  63. {
  64. termsLink: <a href={termsUrl} />,
  65. privacyLink: <a href={privacyUrl} />,
  66. }
  67. )}
  68. inline={false}
  69. stacked
  70. required
  71. />
  72. )}
  73. </ApiForm>
  74. </NarrowLayout>
  75. </SentryDocumentTitle>
  76. );
  77. }
  78. export default OrganizationCreate;