ref(tsc): convert adminSettings.tsx to FC (#70792)

ref https://github.com/getsentry/frontend-tsc/issues/2

converts this file into FC and use `useApiQuery` instead of
`DeprecatedAsync`

static/app/views/admin/adminSettings.tsx

@@ -1,9 +1,11 @@
 import Feature from 'sentry/components/acl/feature';
 import Form from 'sentry/components/forms/form';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import {t} from 'sentry/locale';
-import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
+import {useApiQuery} from 'sentry/utils/queryClient';
 
 import {getOption, getOptionField} from './options';
 
@@ -67,165 +69,168 @@ type FieldDef = {
   value: string | undefined;
 };
 
-type State = DeprecatedAsyncView['state'] & {
-  data: Record<string, FieldDef>;
-};
+export default function AdminSettings() {
+  const {data, isLoading, isError} = useApiQuery<Record<string, FieldDef>>(
+    ['/internal/options/'],
+    {
+      staleTime: 0,
+    }
+  );
 
-export default class AdminSettings extends DeprecatedAsyncView<{}, State> {
-  get endpoint() {
-    return '/internal/options/';
+  if (isError) {
+    return <LoadingError />;
   }
 
-  getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
-    return [['data', this.endpoint]];
+  if (isLoading) {
+    return <LoadingIndicator />;
   }
 
-  renderBody() {
-    const {data} = this.state;
-
-    const initialData = {};
-    const fields = {};
-    for (const key of optionsAvailable) {
-      // TODO(dcramer): we should not be mutating options
-      const option = data[key] ?? {field: {}, value: undefined};
+  const initialData = {};
+  const fields = {};
+  for (const key of optionsAvailable) {
+    // TODO(dcramer): we should not be mutating options
+    const option = data[key] ?? {field: {}, value: undefined};
 
-      if (option.value === undefined || option.value === '') {
-        const defn = getOption(key);
-        initialData[key] = defn.defaultValue ? defn.defaultValue() : '';
-      } else {
-        initialData[key] = option.value;
-      }
-      fields[key] = getOptionField(key, option.field);
+    if (option.value === undefined || option.value === '') {
+      const defn = getOption(key);
+      initialData[key] = defn.defaultValue ? defn.defaultValue() : '';
+    } else {
+      initialData[key] = option.value;
     }
+    fields[key] = getOptionField(key, option.field);
+  }
+
+  return (
+    <div>
+      <h3>{t('Settings')}</h3>
 
-    return (
-      <div>
-        <h3>{t('Settings')}</h3>
+      <Form
+        apiMethod="PUT"
+        apiEndpoint={'/internal/options/'}
+        initialData={initialData}
+        saveOnBlur
+      >
+        <Panel>
+          <PanelHeader>{t('General')}</PanelHeader>
+          {fields['system.url-prefix']}
+          {fields['system.admin-email']}
+          {fields['system.support-email']}
+          {fields['system.security-email']}
+          {fields['system.rate-limit']}
+        </Panel>
 
-        <Form
-          apiMethod="PUT"
-          apiEndpoint={this.endpoint}
-          initialData={initialData}
-          saveOnBlur
-        >
+        <Panel>
+          <PanelHeader>{t('Security & Abuse')}</PanelHeader>
+          {fields['auth.allow-registration']}
+          {fields['auth.ip-rate-limit']}
+          {fields['auth.user-rate-limit']}
+          {fields['api.rate-limit.org-create']}
+        </Panel>
+
+        <Panel>
+          <PanelHeader>{t('Beacon')}</PanelHeader>
+          {fields['beacon.anonymous']}
+        </Panel>
+
+        <Feature features="organizations:performance-issues-dev">
           <Panel>
-            <PanelHeader>General</PanelHeader>
-            {fields['system.url-prefix']}
-            {fields['system.admin-email']}
-            {fields['system.support-email']}
-            {fields['system.security-email']}
-            {fields['system.rate-limit']}
+            <PanelHeader>{t('Performance Issues - All')}</PanelHeader>
+            {fields['performance.issues.all.problem-detection']}
           </Panel>
-
           <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']}
+            <PanelHeader>{t('Performance Issues - Detectors')}</PanelHeader>
+            {fields['performance.issues.n_plus_one_db.problem-creation']}
+            {fields['performance.issues.n_plus_one_db_ext.problem-creation']}
+            {fields['performance.issues.n_plus_one_db.count_threshold']}
+            {fields['performance.issues.n_plus_one_db.duration_threshold']}
           </Panel>
-
           <Panel>
-            <PanelHeader>Beacon</PanelHeader>
-            {fields['beacon.anonymous']}
+            <PanelHeader>{t('Performance Issues - Consecutive DB Detector')}</PanelHeader>
+            {fields['performance.issues.consecutive_db.problem-creation']}
+            {fields['performance.issues.consecutive_db.la-rollout']}
+            {fields['performance.issues.consecutive_db.ea-rollout']}
+            {fields['performance.issues.consecutive_db.ga-rollout']}
           </Panel>
-
-          <Feature features="organizations:performance-issues-dev">
-            <Panel>
-              <PanelHeader>Performance Issues - All</PanelHeader>
-              {fields['performance.issues.all.problem-detection']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - Detectors</PanelHeader>
-              {fields['performance.issues.n_plus_one_db.problem-creation']}
-              {fields['performance.issues.n_plus_one_db_ext.problem-creation']}
-              {fields['performance.issues.n_plus_one_db.count_threshold']}
-              {fields['performance.issues.n_plus_one_db.duration_threshold']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - Consecutive DB Detector</PanelHeader>
-              {fields['performance.issues.consecutive_db.problem-creation']}
-              {fields['performance.issues.consecutive_db.la-rollout']}
-              {fields['performance.issues.consecutive_db.ea-rollout']}
-              {fields['performance.issues.consecutive_db.ga-rollout']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - N+1 API Calls Detector</PanelHeader>
-              {fields['performance.issues.n_plus_one_api_calls.problem-creation']}
-              {fields['performance.issues.n_plus_one_api_calls.la-rollout']}
-              {fields['performance.issues.n_plus_one_api_calls.ea-rollout']}
-              {fields['performance.issues.n_plus_one_api_calls.ga-rollout']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - Compressed Assets Detector</PanelHeader>
-              {fields['performance.issues.compressed_assets.problem-creation']}
-              {fields['performance.issues.compressed_assets.la-rollout']}
-              {fields['performance.issues.compressed_assets.ea-rollout']}
-              {fields['performance.issues.compressed_assets.ga-rollout']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - File IO on Main Thread</PanelHeader>
-              {fields['performance.issues.file_io_main_thread.problem-creation']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - Slow DB Span Detector</PanelHeader>
-              {fields['performance.issues.slow_db_query.problem-creation']}
-              {fields['performance.issues.slow_db_query.la-rollout']}
-              {fields['performance.issues.slow_db_query.ea-rollout']}
-              {fields['performance.issues.slow_db_query.ga-rollout']}
-            </Panel>
-            <Panel>
-              <PanelHeader>
-                Performance Issues - Large Render Blocking Asset Detector
-              </PanelHeader>
-              {fields['performance.issues.render_blocking_assets.problem-creation']}
-              {fields['performance.issues.render_blocking_assets.la-rollout']}
-              {fields['performance.issues.render_blocking_assets.ea-rollout']}
-              {fields['performance.issues.render_blocking_assets.ga-rollout']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - MN+1 DB Detector</PanelHeader>
-              {fields['performance.issues.m_n_plus_one_db.problem-creation']}
-              {fields['performance.issues.m_n_plus_one_db.la-rollout']}
-              {fields['performance.issues.m_n_plus_one_db.ea-rollout']}
-              {fields['performance.issues.m_n_plus_one_db.ga-rollout']}
-            </Panel>
-            <Panel>
-              <PanelHeader>
-                Performance Issues - Consecutive HTTP Span Detector
-              </PanelHeader>
-              {fields['performance.issues.consecutive_http.max_duration_between_spans']}
-              {fields['performance.issues.consecutive_http.consecutive_count_threshold']}
-              {fields['performance.issues.consecutive_http.span_duration_threshold']}
-            </Panel>
-            <Panel>
-              <PanelHeader>Performance Issues - Large HTTP Payload Detector</PanelHeader>
-              {fields['performance.issues.large_http_payload.size_threshold']}
-            </Panel>
-            <Panel>
-              <PanelHeader>
-                Profiling Issues - Block Main Thread Detector Ingest
-              </PanelHeader>
-              {fields['profile.issues.blocked_main_thread-ingest.la-rollout']}
-              {fields['profile.issues.blocked_main_thread-ingest.ea-rollout']}
-              {fields['profile.issues.blocked_main_thread-ingest.ga-rollout']}
-            </Panel>
-            <Panel>
-              <PanelHeader>
-                Profiling Issues - Block Main Thread Detector Post Process Group
-              </PanelHeader>
-              {fields['profile.issues.blocked_main_thread-ppg.la-rollout']}
-              {fields['profile.issues.blocked_main_thread-ppg.ea-rollout']}
-              {fields['profile.issues.blocked_main_thread-ppg.ga-rollout']}
-            </Panel>
-          </Feature>
-          <Feature features="organizations:view-hierarchies-options-dev">
-            <Panel>
-              <PanelHeader>View Hierarchy</PanelHeader>
-            </Panel>
-          </Feature>
-        </Form>
-      </div>
-    );
-  }
+          <Panel>
+            <PanelHeader>{t('Performance Issues - N+1 API Calls Detector')}</PanelHeader>
+            {fields['performance.issues.n_plus_one_api_calls.problem-creation']}
+            {fields['performance.issues.n_plus_one_api_calls.la-rollout']}
+            {fields['performance.issues.n_plus_one_api_calls.ea-rollout']}
+            {fields['performance.issues.n_plus_one_api_calls.ga-rollout']}
+          </Panel>
+          <Panel>
+            <PanelHeader>
+              {t('Performance Issues - Compressed Assets Detector')}
+            </PanelHeader>
+            {fields['performance.issues.compressed_assets.problem-creation']}
+            {fields['performance.issues.compressed_assets.la-rollout']}
+            {fields['performance.issues.compressed_assets.ea-rollout']}
+            {fields['performance.issues.compressed_assets.ga-rollout']}
+          </Panel>
+          <Panel>
+            <PanelHeader>{t('Performance Issues - File IO on Main Thread')}</PanelHeader>
+            {fields['performance.issues.file_io_main_thread.problem-creation']}
+          </Panel>
+          <Panel>
+            <PanelHeader>{t('Performance Issues - Slow DB Span Detector')}</PanelHeader>
+            {fields['performance.issues.slow_db_query.problem-creation']}
+            {fields['performance.issues.slow_db_query.la-rollout']}
+            {fields['performance.issues.slow_db_query.ea-rollout']}
+            {fields['performance.issues.slow_db_query.ga-rollout']}
+          </Panel>
+          <Panel>
+            <PanelHeader>
+              {t('Performance Issues - Large Render Blocking Asset Detector')}
+            </PanelHeader>
+            {fields['performance.issues.render_blocking_assets.problem-creation']}
+            {fields['performance.issues.render_blocking_assets.la-rollout']}
+            {fields['performance.issues.render_blocking_assets.ea-rollout']}
+            {fields['performance.issues.render_blocking_assets.ga-rollout']}
+          </Panel>
+          <Panel>
+            <PanelHeader>{t('Performance Issues - MN+1 DB Detector')}</PanelHeader>
+            {fields['performance.issues.m_n_plus_one_db.problem-creation']}
+            {fields['performance.issues.m_n_plus_one_db.la-rollout']}
+            {fields['performance.issues.m_n_plus_one_db.ea-rollout']}
+            {fields['performance.issues.m_n_plus_one_db.ga-rollout']}
+          </Panel>
+          <Panel>
+            <PanelHeader>
+              {t('Performance Issues - Consecutive HTTP Span Detector')}
+            </PanelHeader>
+            {fields['performance.issues.consecutive_http.max_duration_between_spans']}
+            {fields['performance.issues.consecutive_http.consecutive_count_threshold']}
+            {fields['performance.issues.consecutive_http.span_duration_threshold']}
+          </Panel>
+          <Panel>
+            <PanelHeader>
+              {t('Performance Issues - Large HTTP Payload Detector')}
+            </PanelHeader>
+            {fields['performance.issues.large_http_payload.size_threshold']}
+          </Panel>
+          <Panel>
+            <PanelHeader>
+              {t('Profiling Issues - Block Main Thread Detector Ingest')}
+            </PanelHeader>
+            {fields['profile.issues.blocked_main_thread-ingest.la-rollout']}
+            {fields['profile.issues.blocked_main_thread-ingest.ea-rollout']}
+            {fields['profile.issues.blocked_main_thread-ingest.ga-rollout']}
+          </Panel>
+          <Panel>
+            <PanelHeader>
+              {t('Profiling Issues - Block Main Thread Detector Post Process Group')}
+            </PanelHeader>
+            {fields['profile.issues.blocked_main_thread-ppg.la-rollout']}
+            {fields['profile.issues.blocked_main_thread-ppg.ea-rollout']}
+            {fields['profile.issues.blocked_main_thread-ppg.ga-rollout']}
+          </Panel>
+        </Feature>
+        <Feature features="organizations:view-hierarchies-options-dev">
+          <Panel>
+            <PanelHeader>{t('View Hierarchy')}</PanelHeader>
+          </Panel>
+        </Feature>
+      </Form>
+    </div>
+  );
 }