ref: Convert ContextPickerModal to an FC (#83625)

Test Notes:

This modal is behind Settings Search, the cmd+K search, and Help Search
in the sidebar.

Search works as expected with one special case I discovered: Suggestions
may include the `configUrl` field. In this case clicking on the
suggestion will trigger that url to load and be rendered as a 2nd-level
search list. To see this in action, go to Org Settings and search for
something like "Github". One of the results will be the GitHub
Integration, where you can connect to a github org. Clicking on that
result will open the 2nd screen with a list of available github orgs to
choose.

| First search | list from `configUrl` |
| --- | --- |
| <img width="820" alt="SCR-20250117-iogq"
src="https://github.com/user-attachments/assets/4b65213a-f90e-427b-96c7-e5387b992de3"
/> | <img width="696" alt="SCR-20250117-iolm"
src="https://github.com/user-attachments/assets/a6b9161c-b7db-4643-b67b-5795b6cd9c8d"
/>


Also before, if there was nothing returned from the `configUrl` url,
only an empty array for example, we'd see an empty modal:
<img width="830" alt="SCR-20250117-jdyq"
src="https://github.com/user-attachments/assets/ed8003f5-0099-48d7-aea8-1e59f3115293"
/>

This PR adds a call to `sharedProps.onFinish(sharedProps.nextPath);`
which will redirect the user to the root of the config page instead of
showing the blank modal. In my testing the root is something like
`/settings/integrations/github/`.
When the modal is not blank, and there is a list of 2nd-level things to
pick from, the url would've been constructed as `
`"/settings/integrations/github/" + pickedItem.value + "/"`. So
redirecting just into the root is a little bit of a guess and might
break in some cases.

---------

Co-authored-by: Scott Cooper <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

Diff for: static/app/components/contextPickerModal.tsx

@@ -1,24 +1,26 @@
-import {Component, Fragment} from 'react';
+import {Component, type Dispatch, Fragment, type SetStateAction, useState} from 'react';
 import {components} from 'react-select';
 import styled from '@emotion/styled';
 import type {Query} from 'history';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
-import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
 import type {StylesConfig} from 'sentry/components/forms/controls/selectControl';
 import SelectControl from 'sentry/components/forms/controls/selectControl';
 import IdBadge from 'sentry/components/idBadge';
 import Link from 'sentry/components/links/link';
+import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t, tct} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import OrganizationsStore from 'sentry/stores/organizationsStore';
 import OrganizationStore from 'sentry/stores/organizationStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
 import type {Integration} from 'sentry/types/integrations';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import Projects from 'sentry/utils/projects';
+import {useApiQuery} from 'sentry/utils/queryClient';
 import replaceRouterParams from 'sentry/utils/replaceRouterParams';
 import IntegrationIcon from 'sentry/views/settings/organizationIntegrations/integrationIcon';
 
@@ -61,7 +63,7 @@ type Props = SharedProps & {
   /**
    * Organization slug
    */
-  organization: string;
+  organization: string | undefined;
 
   /**
    * List of available organizations
@@ -128,7 +130,7 @@ class ContextPickerModal extends Component<Props> {
   navigateIfFinish = (
     organizations: Array<{slug: string}>,
     projects: Array<{slug: string}>,
-    latestOrg: string = this.props.organization
+    latestOrg = this.props.organization
   ) => {
     const {needProject, onFinish, nextPath, integrationConfigs} = this.props;
     const {isSuperuser} = ConfigStore.get('user') || {};
@@ -411,103 +413,98 @@ type ContainerProps = SharedProps & {
    * List of slugs we want to be able to choose from
    */
   projectSlugs?: string[];
-} & DeprecatedAsyncComponent['props'];
+};
 
-type ContainerState = {
-  organizations: Organization[];
-  integrationConfigs?: Integration[];
-  selectedOrganization?: string;
-} & DeprecatedAsyncComponent['state'];
-
-class ContextPickerModalContainer extends DeprecatedAsyncComponent<
-  ContainerProps,
-  ContainerState
-> {
-  getDefaultState() {
-    const storeState = OrganizationStore.get();
-    return {
-      ...super.getDefaultState(),
-      organizations: OrganizationsStore.getAll(),
-      selectedOrganization: storeState.organization?.slug,
-    };
-  }
+export default function ContextPickerModalContainer(props: ContainerProps) {
+  const {configUrl, projectSlugs, ...sharedProps} = props;
 
-  getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
-    const {configUrl} = this.props;
-    if (configUrl) {
-      return [['integrationConfigs', configUrl]];
-    }
-    return [];
-  }
+  const {organizations} = useLegacyStore(OrganizationsStore);
 
-  componentWillUnmount() {
-    this.unlistener?.();
-  }
+  const {organization} = useLegacyStore(OrganizationStore);
+  const [selectedOrgSlug, setSelectedOrgSlug] = useState(organization?.slug);
 
-  unlistener = OrganizationsStore.listen(
-    (organizations: Organization[]) => this.setState({organizations}),
-    undefined
-  );
-
-  handleSelectOrganization = (organizationSlug: string) => {
-    this.setState({selectedOrganization: organizationSlug});
-  };
-
-  renderModal({
-    projects,
-    initiallyLoaded,
-    integrationConfigs,
-  }: {
-    initiallyLoaded?: boolean;
-    integrationConfigs?: Integration[];
-    projects?: Project[];
-  }) {
+  if (configUrl) {
     return (
-      <ContextPickerModal
-        {...this.props}
-        projects={projects || []}
-        loading={!initiallyLoaded}
-        organizations={this.state.organizations}
-        organization={this.state.selectedOrganization!}
-        onSelectOrganization={this.handleSelectOrganization}
-        integrationConfigs={integrationConfigs || []}
-        allowAllProjectsSelection={this.props.allowAllProjectsSelection}
+      <ConfigUrlContainer
+        configUrl={configUrl}
+        selectedOrgSlug={selectedOrgSlug}
+        setSelectedOrgSlug={setSelectedOrgSlug}
+        {...sharedProps}
       />
     );
   }
+  if (selectedOrgSlug) {
+    return (
+      <Projects
+        orgId={selectedOrgSlug}
+        allProjects={!projectSlugs?.length}
+        slugs={projectSlugs}
+      >
+        {({projects, initiallyLoaded}) => (
+          <ContextPickerModal
+            {...sharedProps}
+            projects={projects as Project[]}
+            loading={!initiallyLoaded}
+            organizations={organizations}
+            organization={selectedOrgSlug}
+            onSelectOrganization={setSelectedOrgSlug}
+            integrationConfigs={[]}
+          />
+        )}
+      </Projects>
+    );
+  }
 
-  render() {
-    const {projectSlugs, configUrl} = this.props;
+  return (
+    <ContextPickerModal
+      {...sharedProps}
+      projects={[]}
+      loading
+      organizations={organizations}
+      organization={selectedOrgSlug!}
+      onSelectOrganization={setSelectedOrgSlug}
+      integrationConfigs={[]}
+    />
+  );
+}
 
-    if (configUrl && this.state.loading) {
-      return <LoadingIndicator />;
-    }
-    if (this.state.integrationConfigs?.length) {
-      return this.renderModal({
-        integrationConfigs: this.state.integrationConfigs,
-        initiallyLoaded: !this.state.loading,
-      });
-    }
-    if (this.state.selectedOrganization) {
-      return (
-        <Projects
-          orgId={this.state.selectedOrganization}
-          allProjects={!projectSlugs?.length}
-          slugs={projectSlugs}
-        >
-          {({projects, initiallyLoaded}) =>
-            this.renderModal({projects: projects as Project[], initiallyLoaded})
-          }
-        </Projects>
-      );
-    }
+function ConfigUrlContainer(
+  props: SharedProps & {
+    configUrl: string;
+    selectedOrgSlug: string | undefined;
+    setSelectedOrgSlug: Dispatch<SetStateAction<string | undefined>>;
+  }
+) {
+  const {configUrl, selectedOrgSlug, setSelectedOrgSlug, ...sharedProps} = props;
+
+  const {organizations} = useLegacyStore(OrganizationsStore);
 
-    return this.renderModal({});
+  const {data, isError, isPending, refetch} = useApiQuery<Integration[]>([configUrl], {
+    staleTime: Infinity,
+  });
+
+  if (isPending) {
+    return <LoadingIndicator />;
+  }
+  if (isError) {
+    return <LoadingError onRetry={refetch} />;
   }
+  if (!data.length) {
+    sharedProps.onFinish(sharedProps.nextPath);
+  }
+  return (
+    <ContextPickerModal
+      {...sharedProps}
+      projects={[]}
+      loading={isPending}
+      organizations={organizations}
+      organization={selectedOrgSlug!}
+      onSelectOrganization={setSelectedOrgSlug}
+      integrationConfigs={data}
+    />
+  );
 }
 
-export default ContextPickerModalContainer;
-
 const StyledSelectControl = styled(SelectControl)`
   margin-top: ${space(1)};
 `;