ref(ui) Update org create to new form library (#28773)

Replace the deprecated form control usage with settings forms.

static/app/views/organizationCreate.tsx

@@ -1,8 +1,8 @@
-import {ApiForm, BooleanField, TextField} from 'app/components/forms';
 import NarrowLayout from 'app/components/narrowLayout';
 import {t, tct} from 'app/locale';
 import ConfigStore from 'app/stores/configStore';
 import AsyncView from 'app/views/asyncView';
+import {ApiForm, CheckboxField, TextField} from 'app/views/settings/components/forms';
 
 export default class OrganizationCreate extends AsyncView {
   onSubmitSuccess = data => {
@@ -45,11 +45,14 @@ export default class OrganizationCreate extends AsyncView {
             name="name"
             label={t('Organization Name')}
             placeholder={t('e.g. My Company')}
+            inline={false}
+            flexibleControlStateSize
+            stacked
             required
           />
 
           {termsUrl && privacyUrl && (
-            <BooleanField
+            <CheckboxField
               name="agreeTerms"
               label={tct(
                 'I agree to the [termsLink:Terms of Service] and the [privacyLink:Privacy Policy]',
@@ -58,6 +61,8 @@ export default class OrganizationCreate extends AsyncView {
                   privacyLink: <a href={privacyUrl} />,
                 }
               )}
+              inline={false}
+              stacked
               required
             />
           )}

static/app/views/settings/components/forms/checkboxField.tsx

@@ -10,7 +10,7 @@ import FormField from 'app/views/settings/components/forms/formField';
 
 type FormFieldProps = Omit<
   React.ComponentProps<typeof FormField>,
-  'help' | 'disabled' | 'required'
+  'children' | 'help' | 'disabled' | 'required'
 >;
 
 type Props = {
@@ -46,7 +46,7 @@ function CheckboxField(props: Props) {
   const helpElement = typeof help === 'function' ? help(props) : help;
 
   return (
-    <FormField name={name} inline={false}>
+    <FormField name={name} inline={false} stacked={stacked}>
       {({onChange, value}) => {
         function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
           const newValue = e.target.checked;

static/app/views/settings/components/forms/index.tsx

@@ -1,5 +1,6 @@
 export {default as ApiForm} from './apiForm';
 export {default as BooleanField} from './booleanField';
+export {default as CheckboxField} from './checkboxField';
 export {default as ChoiceMapperField} from './choiceMapperField';
 export {default as DatePickerField} from './datePickerField';
 export {default as DateTimeField} from './dateTimeField';

tests/acceptance/test_create_organization.py

@@ -13,11 +13,11 @@ class CreateOrganizationTest(AcceptanceTestCase):
         settings.PRIVACY_URL = "https://sentry.io/privacy/"
         settings.TERMS_URL = "https://sentry.io/terms/"
         self.browser.get("/organizations/new/")
-        assert self.browser.element_exists('input[id="id-name"]')
-        assert self.browser.element_exists('input[id="id-agreeTerms"]')
+        assert self.browser.element_exists('input[name="name"]')
+        assert self.browser.element_exists('input[name="agreeTerms"]')
         self.browser.snapshot(name="create organization")
         self.browser.element('input[name="name"]').send_keys("new org")
-        self.browser.element('input[id="id-agreeTerms"]').click()
+        self.browser.element('input[name="agreeTerms"]').click()
         self.browser.click('button[type="submit"]')
         # After creating an org should end up on create project
         self.browser.wait_until_test_id("platform-javascript-react")