ref(ui) Update more deprecated forms including ones in manage (#28991)

Use auto-saving settings form that we use on other settings pages.

static/app/views/admin/adminSettings.tsx

@@ -1,8 +1,9 @@
 import isUndefined from 'lodash/isUndefined';
 
-import {ApiForm} from 'app/components/forms';
+import {Panel, PanelHeader} from 'app/components/panels';
 import {t} from 'app/locale';
 import AsyncView from 'app/views/asyncView';
+import {Form} from 'app/views/settings/components/forms';
 
 import {getOption, getOptionField} from './options';
 
@@ -61,29 +62,34 @@ export default class AdminSettings extends AsyncView<{}, State> {
       <div>
         <h3>{t('Settings')}</h3>
 
-        <ApiForm
+        <Form
           apiMethod="PUT"
           apiEndpoint={this.endpoint}
           initialData={initialData}
-          omitDisabled
-          requireChanges
+          saveOnBlur
         >
-          <h4>General</h4>
-          {fields['system.url-prefix']}
-          {fields['system.admin-email']}
-          {fields['system.support-email']}
-          {fields['system.security-email']}
-          {fields['system.rate-limit']}
+          <Panel>
+            <PanelHeader>General</PanelHeader>
+            {fields['system.url-prefix']}
+            {fields['system.admin-email']}
+            {fields['system.support-email']}
+            {fields['system.security-email']}
+            {fields['system.rate-limit']}
+          </Panel>
 
-          <h4>Security & Abuse</h4>
-          {fields['auth.allow-registration']}
-          {fields['auth.ip-rate-limit']}
-          {fields['auth.user-rate-limit']}
-          {fields['api.rate-limit.org-create']}
+          <Panel>
+            <PanelHeader>Security & Abuse</PanelHeader>
+            {fields['auth.allow-registration']}
+            {fields['auth.ip-rate-limit']}
+            {fields['auth.user-rate-limit']}
+            {fields['api.rate-limit.org-create']}
+          </Panel>
 
-          <h4>Beacon</h4>
-          {fields['beacon.anonymous']}
-        </ApiForm>
+          <Panel>
+            <PanelHeader>Beacon</PanelHeader>
+            {fields['beacon.anonymous']}
+          </Panel>
+        </Form>
       </div>
     );
   }

static/app/views/admin/options.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import keyBy from 'lodash/keyBy';
 
+import {t, tct} from 'app/locale';
+import ConfigStore from 'app/stores/configStore';
 import {
   BooleanField,
   EmailField,
   RadioBooleanField,
   TextField,
-} from 'app/components/forms';
-import {t, tct} from 'app/locale';
-import ConfigStore from 'app/stores/configStore';
+} from 'app/views/settings/components/forms';
 
 type Section = {
   key: string;
@@ -26,6 +26,7 @@ type Field = {
   required?: boolean;
   allowEmpty?: boolean;
   disabledReason?: string;
+  disabled?: boolean;
   defaultValue?: () => string | false;
   component?: React.ComponentType<any>;
 };
@@ -194,11 +195,11 @@ const disabledReasons = {
   smtpDisabled: 'SMTP mail has been disabled, so this option is unavailable',
 };
 
-export function getOption(option: string) {
+export function getOption(option: string): Field {
   return definitionsMap[option];
 }
 
-export function getOptionDefault(option: string) {
+export function getOptionDefault(option: string): string | false | undefined {
   const meta = getOption(option);
   return meta.defaultValue ? meta.defaultValue() : undefined;
 }

static/app/views/issueList/testSessionPercent.tsx

@@ -7,7 +7,6 @@ import * as qs from 'query-string';
 import {Client} from 'app/api';
 import Feature from 'app/components/acl/feature';
 import FeatureDisabled from 'app/components/acl/featureDisabled';
-import Input from 'app/components/forms/input';
 import * as Layout from 'app/components/layouts/thirds';
 import Link from 'app/components/links/link';
 import {t, tn} from 'app/locale';
@@ -23,6 +22,7 @@ import EventView from 'app/utils/discover/eventView';
 import withApi from 'app/utils/withApi';
 import withGlobalSelection from 'app/utils/withGlobalSelection';
 import withOrganization from 'app/utils/withOrganization';
+import Input from 'app/views/settings/components/forms/controls/input';
 
 type Props = {
   selection: GlobalSelection;