fix(domains) Fix URL generation for remaining org settings (#42880)

Fix more organization settings views that were not part of #42845

static/app/views/organizationIntegrations/integrationListDirectory.tsx

@@ -60,7 +60,7 @@ const fuseOptions = {
   keys: ['slug', 'key', 'name', 'id'],
 };
 
-type Props = RouteComponentProps<{orgId: string}, {}> & {
+type Props = RouteComponentProps<{}, {}> & {
   hideHeader: boolean;
   organization: Organization;
 };
@@ -171,18 +171,18 @@ export class IntegrationListDirectory extends AsyncComponent<
   }
 
   getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
-    const {orgId} = this.props.params;
+    const {organization} = this.props;
     const baseEndpoints: ([string, string, any] | [string, string])[] = [
-      ['config', `/organizations/${orgId}/config/integrations/`],
+      ['config', `/organizations/${organization.slug}/config/integrations/`],
       [
         'integrations',
-        `/organizations/${orgId}/integrations/`,
+        `/organizations/${organization.slug}/integrations/`,
         {query: {includeConfig: 0}},
       ],
-      ['orgOwnedApps', `/organizations/${orgId}/sentry-apps/`],
+      ['orgOwnedApps', `/organizations/${organization.slug}/sentry-apps/`],
       ['publishedApps', '/sentry-apps/', {query: {status: 'published'}}],
-      ['appInstalls', `/organizations/${orgId}/sentry-app-installations/`],
-      ['plugins', `/organizations/${orgId}/plugins/configs/`],
+      ['appInstalls', `/organizations/${organization.slug}/sentry-app-installations/`],
+      ['plugins', `/organizations/${organization.slug}/plugins/configs/`],
       ['docIntegrations', '/doc-integrations/'],
     ];
     /**
@@ -480,9 +480,7 @@ export class IntegrationListDirectory extends AsyncComponent<
   };
 
   renderBody() {
-    const {
-      params: {orgId},
-    } = this.props;
+    const {organization} = this.props;
     const {displayedList, list, searchInput, selectedCategory} = this.state;
 
     const title = t('Integrations');
@@ -490,7 +488,7 @@ export class IntegrationListDirectory extends AsyncComponent<
 
     return (
       <Fragment>
-        <SentryDocumentTitle title={title} orgSlug={orgId} />
+        <SentryDocumentTitle title={title} orgSlug={organization.slug} />
 
         {!this.props.hideHeader && (
           <SettingsPageHeader

static/app/views/settings/organizationAuth/index.tsx

@@ -4,6 +4,7 @@ import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicato
 import {t} from 'sentry/locale';
 import {AuthProvider, Organization} from 'sentry/types';
 import routeTitleGen from 'sentry/utils/routeTitle';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import withOrganization from 'sentry/utils/withOrganization';
 import AsyncView from 'sentry/views/asyncView';
 
@@ -21,12 +22,13 @@ type State = AsyncView['state'] & {
 
 class OrganizationAuth extends AsyncView<Props, State> {
   componentDidUpdate() {
-    const access = this.props.organization.access;
+    const {organization} = this.props;
+    const access = organization.access;
 
     if (this.state.provider && access.includes('org:write')) {
       // If SSO provider is configured, keep showing loading while we redirect
       // to django configuration view
-      const path = `/organizations/${this.props.params.orgId}/auth/configure/`;
+      const path = normalizeUrl(`/organizations/${organization.slug}/auth/configure/`);
 
       // Don't break the back button by first replacing the current history
       // state so pressing back skips this react view.
@@ -36,9 +38,10 @@ class OrganizationAuth extends AsyncView<Props, State> {
   }
 
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
+    const {organization} = this.props;
     return [
-      ['providerList', `/organizations/${this.props.params.orgId}/auth-providers/`],
-      ['provider', `/organizations/${this.props.params.orgId}/auth-provider/`],
+      ['providerList', `/organizations/${organization.slug}/auth-providers/`],
+      ['provider', `/organizations/${organization.slug}/auth-provider/`],
     ];
   }
 
@@ -51,10 +54,11 @@ class OrganizationAuth extends AsyncView<Props, State> {
    * old SSO auth configuration page
    */
   handleSendReminders = (_provider: AuthProvider) => {
+    const {organization} = this.props;
     this.setState({sendRemindersBusy: true});
 
     this.api.request(
-      `/organizations/${this.props.params.orgId}/auth-provider/send-reminders/`,
+      `/organizations/${organization.slug}/auth-provider/send-reminders/`,
       {
         method: 'POST',
         data: {},
@@ -70,9 +74,10 @@ class OrganizationAuth extends AsyncView<Props, State> {
    * old SSO auth configuration page
    */
   handleConfigure = (provider: AuthProvider) => {
+    const {organization} = this.props;
     this.setState({busy: true});
 
-    this.api.request(`/organizations/${this.props.params.orgId}/auth-provider/`, {
+    this.api.request(`/organizations/${organization.slug}/auth-provider/`, {
       method: 'POST',
       data: {provider, init: true},
       success: data => {
@@ -92,9 +97,10 @@ class OrganizationAuth extends AsyncView<Props, State> {
    * old SSO auth configuration page
    */
   handleDisableProvider = (provider: AuthProvider) => {
+    const {organization} = this.props;
     this.setState({busy: true});
 
-    this.api.request(`/organizations/${this.props.params.orgId}/auth-provider/`, {
+    this.api.request(`/organizations/${organization.slug}/auth-provider/`, {
       method: 'DELETE',
       data: {provider},
       success: () => {

static/app/views/settings/organizationIntegrations/configureIntegration.tsx

@@ -24,6 +24,7 @@ import {
 import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
 import {singleLineRenderer} from 'sentry/utils/marked';
 import withApi from 'sentry/utils/withApi';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import withOrganization from 'sentry/utils/withOrganization';
 import AsyncView from 'sentry/views/asyncView';
 import AddIntegration from 'sentry/views/organizationIntegrations/addIntegration';
@@ -40,7 +41,6 @@ import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHea
 
 type RouteParams = {
   integrationId: string;
-  orgId: string;
   providerKey: string;
 };
 type Props = RouteComponentProps<RouteParams, {}> & {
@@ -59,12 +59,16 @@ type State = AsyncView['state'] & {
 
 class ConfigureIntegration extends AsyncView<Props, State> {
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
-    const {orgId, integrationId} = this.props.params;
+    const {organization} = this.props;
+    const {integrationId} = this.props.params;
 
     return [
-      ['config', `/organizations/${orgId}/config/integrations/`],
-      ['integration', `/organizations/${orgId}/integrations/${integrationId}/`],
-      ['plugins', `/organizations/${orgId}/plugins/configs/`],
+      ['config', `/organizations/${organization.slug}/config/integrations/`],
+      [
+        'integration',
+        `/organizations/${organization.slug}/integrations/${integrationId}/`,
+      ],
+      ['plugins', `/organizations/${organization.slug}/plugins/configs/`],
     ];
   }
 
@@ -73,14 +77,16 @@ class ConfigureIntegration extends AsyncView<Props, State> {
       location,
       router,
       organization,
-      params: {orgId, providerKey},
+      params: {providerKey},
     } = this.props;
     // This page should not be accessible by members (unless its github or gitlab)
     const allowMemberConfiguration = ['github', 'gitlab'].includes(providerKey);
     if (!allowMemberConfiguration && !organization.access.includes('org:integrations')) {
-      router.push({
-        pathname: `/settings/${orgId}/integrations/${providerKey}/`,
-      });
+      router.push(
+        normalizeUrl({
+          pathname: `/settings/${organization.slug}/integrations/${providerKey}/`,
+        })
+      );
     }
     const value =
       (['codeMappings', 'userMappings', 'teamMappings'] as const).find(
@@ -144,11 +150,12 @@ class ConfigureIntegration extends AsyncView<Props, State> {
   handleJiraMigration = async () => {
     try {
       const {
-        params: {orgId, integrationId},
+        organization,
+        params: {integrationId},
       } = this.props;
 
       await this.api.requestPromise(
-        `/organizations/${orgId}/integrations/${integrationId}/issues/`,
+        `/organizations/${organization.slug}/integrations/${integrationId}/issues/`,
         {
           method: 'PUT',
           data: {},
@@ -232,7 +239,7 @@ class ConfigureIntegration extends AsyncView<Props, State> {
 
   // TODO(Steve): Refactor components into separate tabs and use more generic tab logic
   renderMainTab(provider: IntegrationProvider) {
-    const {orgId} = this.props.params;
+    const {organization} = this.props;
     const {integration} = this.state;
 
     const instructions =
@@ -247,7 +254,7 @@ class ConfigureIntegration extends AsyncView<Props, State> {
             allowUndo
             apiMethod="POST"
             initialData={integration.configData || {}}
-            apiEndpoint={`/organizations/${orgId}/integrations/${integration.id}/`}
+            apiEndpoint={`/organizations/${organization.slug}/integrations/${integration.id}/`}
           >
             <JsonForm
               fields={integration.configOrganization}