fix(js): Avoid constructing API inside fetchOrganizationDetails (#38859)

static/app/actionCreators/organizations.tsx

@@ -131,10 +131,10 @@ type FetchOrganizationByMemberParams = {
 };
 
 export async function fetchOrganizationByMember(
+  api: Client,
   memberId: string,
   {addOrg, fetchOrgDetails}: FetchOrganizationByMemberParams
 ) {
-  const api = new Client();
   const data = await api.requestPromise(`/organizations/?query=member_id:${memberId}`);
 
   if (!data.length) {
@@ -150,7 +150,7 @@ export async function fetchOrganizationByMember(
 
   if (fetchOrgDetails) {
     // load SidebarDropdown with org details including `access`
-    await fetchOrganizationDetails(org.slug, {setActive: true, loadProjects: true});
+    await fetchOrganizationDetails(api, org.slug, {setActive: true, loadProjects: true});
   }
 
   return org;
@@ -173,10 +173,10 @@ type FetchOrganizationDetailsParams = {
   setActive?: boolean;
 };
 export async function fetchOrganizationDetails(
+  api: Client,
   orgId: string,
   {setActive, loadProjects, loadTeam}: FetchOrganizationDetailsParams
 ) {
-  const api = new Client();
   const data = await api.requestPromise(`/organizations/${orgId}/`);
 
   if (setActive) {

static/app/views/settings/account/accountSecurity/accountSecurityEnroll.tsx

@@ -311,10 +311,14 @@ class AccountSecurityEnroll extends AsyncView<Props, State> {
     // the organization when completing 2fa enrollment. We should reload the
     // organization context in that case to assign them to the org.
     if (this.pendingInvitation) {
-      await fetchOrganizationByMember(this.pendingInvitation.memberId.toString(), {
-        addOrg: true,
-        fetchOrgDetails: true,
-      });
+      await fetchOrganizationByMember(
+        this.api,
+        this.pendingInvitation.memberId.toString(),
+        {
+          addOrg: true,
+          fetchOrgDetails: true,
+        }
+      );
     }
 
     this.props.router.push('/settings/account/security/');

static/app/views/settings/account/accountSettingsLayout.spec.jsx

@@ -35,7 +35,7 @@ describe('AccountSettingsLayout', function () {
       </BreadcrumbContextProvider>
     );
 
-    expect(spy).toHaveBeenCalledWith(organization.slug, {
+    expect(spy).toHaveBeenCalledWith(expect.anything(), organization.slug, {
       setActive: true,
       loadProjects: true,
     });

static/app/views/settings/account/accountSettingsLayout.tsx

@@ -1,13 +1,16 @@
 import {Component} from 'react';
 
 import {fetchOrganizationDetails} from 'sentry/actionCreators/organizations';
+import {Client} from 'sentry/api';
 import SentryTypes from 'sentry/sentryTypes';
 import {Organization} from 'sentry/types';
+import withApi from 'sentry/utils/withApi';
 import withLatestContext from 'sentry/utils/withLatestContext';
 import AccountSettingsNavigation from 'sentry/views/settings/account/accountSettingsNavigation';
 import SettingsLayout from 'sentry/views/settings/components/settingsLayout';
 
 type Props = React.ComponentProps<typeof SettingsLayout> & {
+  api: Client;
   organization: Organization;
 };
 
@@ -23,7 +26,7 @@ class AccountSettingsLayout extends Component<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const {organization} = this.props;
+    const {api, organization} = this.props;
     if (prevProps.organization === organization) {
       return;
     }
@@ -32,7 +35,7 @@ class AccountSettingsLayout extends Component<Props> {
     // (which queries the org index endpoint instead of org details)
     // and does not have `access` info
     if (organization && typeof organization.access === 'undefined') {
-      fetchOrganizationDetails(organization.slug, {
+      fetchOrganizationDetails(api, organization.slug, {
         setActive: true,
         loadProjects: true,
       });
@@ -53,4 +56,4 @@ class AccountSettingsLayout extends Component<Props> {
   }
 }
 
-export default withLatestContext(AccountSettingsLayout);
+export default withLatestContext(withApi(AccountSettingsLayout));

static/app/views/settings/organizationTeams/allTeamsRow.tsx

@@ -35,9 +35,9 @@ class AllTeamsRow extends Component<Props, State> {
   };
 
   reloadProjects() {
-    const {organization} = this.props;
+    const {api, organization} = this.props;
     // After a change in teams has happened, refresh the project store
-    fetchOrganizationDetails(organization.slug, {
+    fetchOrganizationDetails(api, organization.slug, {
       loadProjects: true,
     });
   }

static/app/views/settings/settingsIndex.spec.tsx

@@ -82,7 +82,7 @@ describe('SettingsIndex', function () {
         </BreadcrumbContextProvider>
       );
 
-      expect(spy).toHaveBeenCalledWith(organization.slug, {
+      expect(spy).toHaveBeenCalledWith(expect.anything(), organization.slug, {
         setActive: true,
         loadProjects: true,
       });

static/app/views/settings/settingsIndex.tsx

@@ -18,6 +18,7 @@ import ConfigStore from 'sentry/stores/configStore';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {Theme} from 'sentry/utils/theme';
+import useApi from 'sentry/utils/useApi';
 import withLatestContext from 'sentry/utils/withLatestContext';
 import SettingsLayout from 'sentry/views/settings/components/settingsLayout';
 
@@ -41,17 +42,19 @@ interface SettingsIndexProps extends RouteComponentProps<{}, {}> {
 }
 
 function SettingsIndex({organization, ...props}: SettingsIndexProps) {
+  const api = useApi();
+
   useEffect(() => {
     // if there is no org in context, SidebarDropdown uses an org from `withLatestContext`
     // (which queries the org index endpoint instead of org details)
     // and does not have `access` info
     if (organization && typeof organization.access === 'undefined') {
-      fetchOrganizationDetails(organization.slug, {
+      fetchOrganizationDetails(api, organization.slug, {
         setActive: true,
         loadProjects: true,
       });
     }
-  }, [organization]);
+  }, [api, organization]);
 
   const user = ConfigStore.get('user');
   const isSelfHosted = ConfigStore.get('isSelfHosted');