ref(tsc): convert session history index to FC (#65302)

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

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

static/app/views/settings/account/accountSecurity/sessionHistory/index.spec.tsx

@@ -14,7 +14,7 @@ describe('AccountSecuritySessionHistory', function () {
     MockApiClient.clearMockResponses();
   });
 
-  it('renders an ip address', function () {
+  it('renders an ip address', async function () {
     MockApiClient.addMockResponse({
       url: ENDPOINT,
       body: [
@@ -39,7 +39,7 @@ describe('AccountSecuritySessionHistory', function () {
 
     render(<SessionHistory {...routerProps} />, {context: RouterContextFixture()});
 
-    expect(screen.getByText('127.0.0.1')).toBeInTheDocument();
+    expect(await screen.findByText('127.0.0.1')).toBeInTheDocument();
     expect(screen.getByText('192.168.0.1')).toBeInTheDocument();
     expect(screen.getByText('US (CA)')).toBeInTheDocument();
   });

static/app/views/settings/account/accountSecurity/sessionHistory/index.tsx

@@ -1,16 +1,18 @@
-import {Fragment} from 'react';
 import type {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
 import ListLink from 'sentry/components/links/listLink';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import NavTabs from 'sentry/components/navTabs';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import type {InternetProtocol} from 'sentry/types';
+import {useApiQuery} from 'sentry/utils/queryClient';
 import recreateRoute from 'sentry/utils/recreateRoute';
-import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 
 import SessionRow from './sessionRow';
@@ -18,64 +20,60 @@ import {tableLayout} from './utils';
 
 type Props = RouteComponentProps<{}, {}>;
 
-type State = {
-  ipList: Array<InternetProtocol> | null;
-} & DeprecatedAsyncView['state'];
+type IpListType = Array<InternetProtocol> | null;
 
-class SessionHistory extends DeprecatedAsyncView<Props, State> {
-  getTitle() {
-    return t('Session History');
-  }
+function SessionHistory({routes, params, location}: Props) {
+  const {
+    data: ipList,
+    isLoading,
+    isError,
+  } = useApiQuery<IpListType>(['/users/me/ips/'], {staleTime: 0});
 
-  getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
-    return [['ipList', '/users/me/ips/']];
+  if (isError) {
+    return <LoadingError />;
   }
 
-  renderBody() {
-    const {ipList} = this.state;
+  if (isLoading) {
+    return <LoadingIndicator />;
+  }
 
-    if (!ipList) {
-      return null;
-    }
+  if (!ipList) {
+    return null;
+  }
 
-    const {routes, params, location} = this.props;
-    const recreateRouteProps = {routes, params, location};
+  const recreateRouteProps = {routes, params, location};
 
-    return (
-      <Fragment>
-        <SettingsPageHeader
-          title={t('Security')}
-          tabs={
-            <NavTabs underlined>
-              <ListLink
-                to={recreateRoute('', {...recreateRouteProps, stepBack: -1})}
-                index
-              >
-                {t('Settings')}
-              </ListLink>
-              <ListLink to={recreateRoute('', recreateRouteProps)}>
-                {t('Session History')}
-              </ListLink>
-            </NavTabs>
-          }
-        />
+  return (
+    <SentryDocumentTitle title={t('Session History')}>
+      <SettingsPageHeader
+        title={t('Security')}
+        tabs={
+          <NavTabs underlined>
+            <ListLink to={recreateRoute('', {...recreateRouteProps, stepBack: -1})} index>
+              {t('Settings')}
+            </ListLink>
+            <ListLink to={recreateRoute('', recreateRouteProps)}>
+              {t('Session History')}
+            </ListLink>
+          </NavTabs>
+        }
+      />
 
-        <Panel>
-          <SessionPanelHeader>
-            <div>{t('Sessions')}</div>
-            <div>{t('First Seen')}</div>
-            <div>{t('Last Seen')}</div>
-          </SessionPanelHeader>
+      <Panel>
+        <SessionPanelHeader>
+          <div>{t('Sessions')}</div>
+          <div>{t('First Seen')}</div>
+          <div>{t('Last Seen')}</div>
+        </SessionPanelHeader>
 
-          <PanelBody>
-            {ipList.map(({id, ...ipObj}) => (
-              <SessionRow key={id} {...ipObj} />
-            ))}
-          </PanelBody>
-        </Panel>
-      </Fragment>
-    );
-  }
+        <PanelBody>
+          {ipList.map(({id, ...ipObj}) => (
+            <SessionRow key={id} {...ipObj} />
+          ))}
+        </PanelBody>
+      </Panel>
+    </SentryDocumentTitle>
+  );
 }
 
 export default SessionHistory;

static/app/views/starfish/views/spans/selectors/domainSelector.spec.tsx

@@ -106,9 +106,7 @@ describe('DomainSelector', function () {
       expect(fetchMoreResponse).toHaveBeenCalled();
     });
 
-    await tick();
-
-    expect(screen.getByText('pg_data')).toBeInTheDocument();
+    expect(await screen.findByText('pg_data')).toBeInTheDocument();
     expect(screen.queryByText('sentry_user')).not.toBeInTheDocument();
     expect(screen.queryByText('sentry_organization')).not.toBeInTheDocument();