ref(tsc): Convert Discover homepage to FC + useApiQuery (#87519)

Author: malwilley

static/app/views/discover/homepage.spec.tsx

@@ -277,11 +277,11 @@ describe('Discover > Homepage', () => {
       {router: initialData.router, organization: initialData.organization}
     );
 
-    expect(mockHomepage).toHaveBeenCalled();
-    expect(screen.getByRole('button', {name: /set as default/i})).toBeDisabled();
     await waitFor(() => {
-      expect(measurementsMetaMock).toHaveBeenCalled();
+      expect(screen.getByRole('button', {name: /set as default/i})).toBeDisabled();
     });
+
+    expect(measurementsMetaMock).toHaveBeenCalled();
   });
 
   it('follows absolute date selection', async () => {

static/app/views/discover/homepage.tsx

@@ -1,7 +1,9 @@
+import {useEffect} from 'react';
 import type {Location} from 'history';
 
 import type {Client} from 'sentry/api';
-import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {
   getDatetimeFromState,
@@ -11,8 +13,12 @@ import {getPageFilterStorage} from 'sentry/components/organizations/pageFilters/
 import type {PageFilters} from 'sentry/types/core';
 import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
 import type {Organization, SavedQuery} from 'sentry/types/organization';
-import {browserHistory} from 'sentry/utils/browserHistory';
 import EventView from 'sentry/utils/discover/eventView';
+import {type ApiQueryKey, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
+import usePrevious from 'sentry/utils/usePrevious';
 import withApi from 'sentry/utils/withApi';
 import withOrganization from 'sentry/utils/withOrganization';
 import withPageFilters from 'sentry/utils/withPageFilters';
@@ -30,27 +36,42 @@ type Props = {
   setSavedQuery: (savedQuery: SavedQuery) => void;
 };
 
-type HomepageQueryState = DeprecatedAsyncComponent['state'] & {
-  savedQuery?: SavedQuery | null;
-  starfishResult?: null;
-};
+function makeDiscoverHomepageQueryKey(organization: Organization): ApiQueryKey {
+  return [`/organizations/${organization.slug}/discover/homepage/`];
+}
 
-class HomepageQueryAPI extends DeprecatedAsyncComponent<Props, HomepageQueryState> {
-  shouldReload = true;
+function Homepage(props: Props) {
+  const organization = useOrganization();
+  const queryClient = useQueryClient();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const {data, isLoading, isError, refetch} = useApiQuery<SavedQuery>(
+    makeDiscoverHomepageQueryKey(organization),
+    {
+      staleTime: 0,
+      enabled: organization.features.includes('discover-query'),
+    }
+  );
 
-  componentDidUpdate(_: any, prevState: any) {
-    const hasFetchedSavedQuery = !prevState.savedQuery && this.state.savedQuery;
-    const hasInitiallyLoaded = prevState.loading && !this.state.loading;
-    const sidebarClicked = this.state.savedQuery && this.props.location.search === '';
-    const hasValidEventViewInURL = EventView.fromLocation(this.props.location).isValid();
+  const savedQuery = organization.features.includes(
+    'performance-discover-dataset-selector'
+  )
+    ? getSavedQueryWithDataset(data)
+    : data;
+
+  const previousSavedQuery = usePrevious(savedQuery);
+
+  useEffect(() => {
+    const hasFetchedSavedQuery = !previousSavedQuery && savedQuery;
+    const sidebarClicked = savedQuery && location.search === '';
+    const hasValidEventViewInURL = EventView.fromLocation(location).isValid();
 
     if (
-      this.state.savedQuery &&
-      ((hasInitiallyLoaded && hasFetchedSavedQuery && !hasValidEventViewInURL) ||
-        sidebarClicked)
+      savedQuery &&
+      ((hasFetchedSavedQuery && !hasValidEventViewInURL) || sidebarClicked)
     ) {
-      const eventView = EventView.fromSavedQuery(this.state.savedQuery);
-      const pageFilterState = getPageFilterStorage(this.props.organization.slug);
+      const eventView = EventView.fromSavedQuery(savedQuery);
+      const pageFilterState = getPageFilterStorage(organization.slug);
       let query = {
         ...eventView.generateQueryStringObject(),
       };
@@ -79,75 +100,46 @@ class HomepageQueryAPI extends DeprecatedAsyncComponent<Props, HomepageQueryStat
         });
       }
 
-      browserHistory.replace({
-        ...this.props.location,
-        query: {
-          ...query,
-          queryDataset: this.state.savedQuery?.queryDataset,
+      navigate(
+        {
+          ...location,
+          query: {
+            ...query,
+            queryDataset: savedQuery?.queryDataset,
+          },
         },
-      });
+        {replace: true}
+      );
     }
-  }
+  }, [savedQuery, location, previousSavedQuery, navigate, organization.slug]);
 
-  getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
-    const {organization} = this.props;
-
-    const endpoints: ReturnType<DeprecatedAsyncComponent['getEndpoints']> = [];
-    if (organization.features.includes('discover-query')) {
-      endpoints.push([
-        'savedQuery',
-        `/organizations/${organization.slug}/discover/homepage/`,
-      ]);
-    }
-    return endpoints;
+  if (isLoading) {
+    return <LoadingIndicator />;
   }
 
-  onRequestSuccess({stateKey, data}: any) {
-    const {organization} = this.props;
-    // No homepage query results in a 204, returning an empty string
-    if (stateKey === 'savedQuery' && data === '') {
-      this.setState({savedQuery: null});
-      return;
-    }
-    if (stateKey === 'savedQuery') {
-      this.setState({
-        savedQuery: organization.features.includes(
-          'performance-discover-dataset-selector'
-        )
-          ? getSavedQueryWithDataset(data)
-          : data,
-      });
-    }
+  if (isError) {
+    return <LoadingError onRetry={refetch} />;
   }
 
-  setSavedQuery = (newSavedQuery?: SavedQuery) => {
-    const {organization} = this.props;
-    this.setState({
-      savedQuery: organization.features.includes('performance-discover-dataset-selector')
-        ? (getSavedQueryWithDataset(newSavedQuery) as SavedQuery)
-        : newSavedQuery,
-    });
+  const setSavedQuery = (newSavedQuery?: SavedQuery) => {
+    queryClient.setQueryData(makeDiscoverHomepageQueryKey(organization), newSavedQuery);
   };
 
-  renderBody(): React.ReactNode {
-    const {savedQuery, loading} = this.state;
-
-    return (
-      <Results
-        {...this.props}
-        savedQuery={savedQuery ?? undefined}
-        loading={loading}
-        setSavedQuery={this.setSavedQuery}
-        isHomepage
-      />
-    );
-  }
+  return (
+    <Results
+      {...props}
+      savedQuery={savedQuery}
+      loading={isLoading}
+      setSavedQuery={setSavedQuery}
+      isHomepage
+    />
+  );
 }
 
 function HomepageContainer(props: Props) {
   return (
     <PageFiltersContainer skipInitializeUrlParams>
-      <HomepageQueryAPI {...props} />
+      <Homepage {...props} />
     </PageFiltersContainer>
   );
 }

static/app/views/discover/savedQuery/utils.tsx

@@ -282,9 +282,9 @@ export function getSavedQueryDataset(
   return SavedQueryDatasets.DISCOVER;
 }
 
-export function getSavedQueryWithDataset(
-  savedQuery?: SavedQuery | NewQuery
-): SavedQuery | NewQuery | undefined {
+export function getSavedQueryWithDataset<T extends SavedQuery | NewQuery>(
+  savedQuery?: T
+): T | undefined {
   if (!savedQuery) {
     return undefined;
   }