ref(tsc): convert admin environment to FC (#65279)

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

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

static/app/views/admin/adminEnvironment.tsx

@@ -3,11 +3,13 @@ import styled from '@emotion/styled';
 import moment from 'moment';
 
 import {Button} from 'sentry/components/button';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconUpgrade} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import {space} from 'sentry/styles/space';
-import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
+import {useApiQuery} from 'sentry/utils/queryClient';
 
 type Data = {
   config: [key: string, value: string][];
@@ -18,83 +20,86 @@ type Data = {
   pythonVersion: string;
 };
 
-type State = DeprecatedAsyncView['state'] & {data: Data};
+export default function AdminEnvironment() {
+  const {data, isLoading, isError} = useApiQuery<Data>(['/internal/environment/'], {
+    staleTime: 0,
+  });
 
-export default class AdminEnvironment extends DeprecatedAsyncView<{}, State> {
-  getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
-    return [['data', '/internal/environment/']];
+  if (isError) {
+    return <LoadingError />;
   }
 
-  renderBody() {
-    const {data} = this.state;
-    const {environment, config, pythonVersion} = data;
+  if (isLoading) {
+    return <LoadingIndicator />;
+  }
 
-    const {version} = ConfigStore.getState();
+  const {version} = ConfigStore.getState();
 
-    return (
-      <div>
-        <h3>{t('Environment')}</h3>
+  return (
+    <div>
+      <h3>{t('Environment')}</h3>
 
-        {environment ? (
-          <dl className="vars">
-            <VersionLabel>
-              {t('Server Version')}
-              {version.upgradeAvailable && (
-                <Button
-                  href="https://github.com/getsentry/sentry/releases"
-                  icon={<IconUpgrade />}
-                  size="xs"
-                  external
-                >
-                  {t('Upgrade to Sentry %s', version.latest)}
-                </Button>
-              )}
-            </VersionLabel>
-            <dd>
-              <pre className="val">{version.current}</pre>
-            </dd>
+      {data?.environment ? (
+        <dl className="vars">
+          <VersionLabel>
+            {t('Server Version')}
+            {version.upgradeAvailable && (
+              <Button
+                href="https://github.com/getsentry/sentry/releases"
+                icon={<IconUpgrade />}
+                size="xs"
+                external
+              >
+                {t('Upgrade to Sentry %s', version.latest)}
+              </Button>
+            )}
+          </VersionLabel>
+          <dd>
+            <pre className="val">{version.current}</pre>
+          </dd>
 
-            <dt>{t('Python Version')}</dt>
-            <dd>
-              <pre className="val">{pythonVersion}</pre>
-            </dd>
-            <dt>{t('Configuration File')}</dt>
-            <dd>
-              <pre className="val">{environment.config}</pre>
-            </dd>
-            <dt>{t('Uptime')}</dt>
-            <dd>
-              <pre className="val">
-                {moment(environment.start_date).toNow(true)} (since{' '}
-                {environment.start_date})
-              </pre>
-            </dd>
-          </dl>
-        ) : (
-          <p>
-            {t('Environment not found (are you using the builtin Sentry webserver?).')}
-          </p>
-        )}
+          <dt>{t('Python Version')}</dt>
+          <dd>
+            <pre className="val">{data?.pythonVersion}</pre>
+          </dd>
+          <dt>{t('Configuration File')}</dt>
+          <dd>
+            <pre className="val">{data.environment.config}</pre>
+          </dd>
+          <dt>{t('Uptime')}</dt>
+          <dd>
+            <pre className="val">
+              {tct('[now] (since [start])', {
+                now: moment(data.environment.start_date).toNow(true),
+                start: data.environment.start_date,
+              })}
+            </pre>
+          </dd>
+        </dl>
+      ) : (
+        <p>{t('Environment not found (are you using the builtin Sentry webserver?).')}</p>
+      )}
 
-        <h3>
-          {tct('Configuration [configPath]', {
-            configPath: environment.config && <small>{environment.config}</small>,
-          })}
-        </h3>
+      <h3>
+        {tct('Configuration [configPath]', {
+          configPath: data?.environment.config && (
+            <small>{data?.environment.config}</small>
+          ),
+        })}
+      </h3>
 
-        <dl className="vars">
-          {config.map(([key, value]) => (
-            <Fragment key={key}>
-              <dt>{key}</dt>
-              <dd>
-                <pre className="val">{value}</pre>
-              </dd>
-            </Fragment>
-          ))}
-        </dl>
-      </div>
-    );
-  }
+      <dl className="vars">
+        {data?.config.map(([key, value]) => (
+          <Fragment key={key}>
+            <dt>{key}</dt>
+            <dd>
+              <pre className="val">{value}</pre>
+            </dd>
+          </Fragment>
+        ))}
+      </dl>
+    </div>
+  );
 }
 
 const VersionLabel = styled('dt')`