fix(domains) Fix URL generation in sentry apps + functions (#42894)

Don't use params.orgId as it doesn't exist under customer-domains.

static/app/views/settings/organizationDeveloperSettings/index.spec.jsx

@@ -33,9 +33,7 @@ describe('Organization Developer Settings', function () {
         url: `/organizations/${org.slug}/sentry-apps/`,
         body: [],
       });
-      const {container} = render(
-        <OrganizationDeveloperSettings params={{orgId: org.slug}} organization={org} />
-      );
+      const {container} = render(<OrganizationDeveloperSettings organization={org} />);
       await waitFor(() => {
         expect(
           screen.getByText('No internal integrations have been created yet.')
@@ -54,10 +52,7 @@ describe('Organization Developer Settings', function () {
     });
 
     it('internal integrations list is empty', () => {
-      render(
-        <OrganizationDeveloperSettings params={{orgId: org.slug}} organization={org} />,
-        {organization: org}
-      );
+      render(<OrganizationDeveloperSettings organization={org} />, {organization: org});
       expect(
         screen.getByText('No internal integrations have been created yet.')
       ).toBeInTheDocument();
@@ -66,7 +61,6 @@ describe('Organization Developer Settings', function () {
     it('public integrations list contains 1 item', () => {
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: org.slug}}
           organization={org}
           location={{query: {type: 'public'}}}
         />,
@@ -84,7 +78,6 @@ describe('Organization Developer Settings', function () {
       });
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: org.slug}}
           organization={org}
           location={{query: {type: 'public'}}}
         />
@@ -115,7 +108,6 @@ describe('Organization Developer Settings', function () {
 
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: org.slug}}
           organization={org}
           location={{query: {type: 'public'}}}
         />
@@ -180,7 +172,6 @@ describe('Organization Developer Settings', function () {
     it('shows the published status', () => {
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: org.slug}}
           organization={org}
           location={{query: {type: 'public'}}}
         />
@@ -191,7 +182,6 @@ describe('Organization Developer Settings', function () {
     it('trash button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: org.slug}}
           organization={org}
           location={{query: {type: 'public'}}}
         />
@@ -203,7 +193,6 @@ describe('Organization Developer Settings', function () {
     it('publish button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: org.slug}}
           organization={org}
           location={{query: {type: 'public'}}}
         />
@@ -224,17 +213,13 @@ describe('Organization Developer Settings', function () {
     });
 
     it('allows deleting', async () => {
-      render(
-        <OrganizationDeveloperSettings params={{orgId: org.slug}} organization={org} />
-      );
+      render(<OrganizationDeveloperSettings organization={org} />);
       const deleteButton = await screen.findByRole('button', {name: 'Delete'});
       expect(deleteButton).toHaveAttribute('aria-disabled', 'false');
     });
 
     it('publish button does not exist', () => {
-      render(
-        <OrganizationDeveloperSettings params={{orgId: org.slug}} organization={org} />
-      );
+      render(<OrganizationDeveloperSettings organization={org} />);
       expect(screen.queryByText('Publish')).not.toBeInTheDocument();
     });
   });
@@ -250,7 +235,6 @@ describe('Organization Developer Settings', function () {
     it('trash button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: newOrg.slug}}
           organization={newOrg}
           location={{query: {type: 'public'}}}
         />
@@ -262,7 +246,6 @@ describe('Organization Developer Settings', function () {
     it('publish button is disabled', async () => {
       render(
         <OrganizationDeveloperSettings
-          params={{orgId: newOrg.slug}}
           organization={newOrg}
           location={{query: {type: 'public'}}}
         />

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

@@ -28,7 +28,7 @@ import SentryFunctionRow from './sentryFunctionRow';
 
 type Props = Omit<AsyncView['props'], 'params'> & {
   organization: Organization;
-} & RouteComponentProps<{orgId: string}, {}>;
+} & RouteComponentProps<{}, {}>;
 
 type Tab = 'public' | 'internal' | 'sentryfx';
 type State = AsyncView['state'] & {
@@ -59,18 +59,20 @@ class OrganizationDeveloperSettings extends AsyncView<Props, State> {
   }
 
   getTitle() {
-    const {orgId} = this.props.params;
-    return routeTitleGen(t('Developer Settings'), orgId, false);
+    const {organization} = this.props;
+    return routeTitleGen(t('Developer Settings'), organization.slug, false);
   }
 
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
-    const {orgId} = this.props.params;
     const {organization} = this.props;
     const returnValue: [string, string, any?, any?][] = [
-      ['applications', `/organizations/${orgId}/sentry-apps/`],
+      ['applications', `/organizations/${organization.slug}/sentry-apps/`],
     ];
     if (organization.features.includes('sentry-functions')) {
-      returnValue.push(['sentryFunctions', `/organizations/${orgId}/functions/`]);
+      returnValue.push([
+        'sentryFunctions',
+        `/organizations/${organization.slug}/functions/`,
+      ]);
     }
     return returnValue;
   }

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.spec.jsx

@@ -7,7 +7,6 @@ import SentryApplicationDetails from 'sentry/views/settings/organizationDevelope
 
 describe('Sentry Application Details', function () {
   let org;
-  let orgId;
   let sentryApp;
   let token;
   let createAppRequest;
@@ -19,13 +18,12 @@ describe('Sentry Application Details', function () {
     Client.clearMockResponses();
 
     org = TestStubs.Organization({features: ['sentry-app-logo-upload']});
-    orgId = org.slug;
   });
 
   describe('Creating a new public Sentry App', () => {
     function renderComponent() {
       return render(
-        <SentryApplicationDetails params={{orgId}} route={{path: 'new-public/'}} />,
+        <SentryApplicationDetails route={{path: 'new-public/'}} params={{}} />,
         {context: TestStubs.routerContext([{organization: org}])}
       );
     }
@@ -128,7 +126,7 @@ describe('Sentry Application Details', function () {
   describe('Creating a new internal Sentry App', () => {
     function renderComponent() {
       return render(
-        <SentryApplicationDetails params={{orgId}} route={{path: 'new-internal/'}} />,
+        <SentryApplicationDetails route={{path: 'new-internal/'}} params={{}} />,
         {context: TestStubs.routerContext([{organization: org}])}
       );
     }
@@ -155,12 +153,9 @@ describe('Sentry Application Details', function () {
 
   describe('Renders public app', function () {
     function renderComponent() {
-      return render(
-        <SentryApplicationDetails params={{appSlug: sentryApp.slug, orgId}} />,
-        {
-          context: TestStubs.routerContext([{organization: org}]),
-        }
-      );
+      return render(<SentryApplicationDetails params={{appSlug: sentryApp.slug}} />, {
+        context: TestStubs.routerContext([{organization: org}]),
+      });
     }
 
     beforeEach(() => {
@@ -212,12 +207,9 @@ describe('Sentry Application Details', function () {
 
   describe('Renders for internal apps', () => {
     function renderComponent() {
-      return render(
-        <SentryApplicationDetails params={{appSlug: sentryApp.slug, orgId}} />,
-        {
-          context: TestStubs.routerContext([{organization: org}]),
-        }
-      );
+      return render(<SentryApplicationDetails params={{appSlug: sentryApp.slug}} />, {
+        context: TestStubs.routerContext([{organization: org}]),
+      });
     }
 
     beforeEach(() => {
@@ -276,12 +268,9 @@ describe('Sentry Application Details', function () {
 
   describe('Renders masked values', () => {
     function renderComponent() {
-      return render(
-        <SentryApplicationDetails params={{appSlug: sentryApp.slug, orgId}} />,
-        {
-          context: TestStubs.routerContext([{organization: org}]),
-        }
-      );
+      return render(<SentryApplicationDetails params={{appSlug: sentryApp.slug}} />, {
+        context: TestStubs.routerContext([{organization: org}]),
+      });
     }
 
     beforeEach(() => {
@@ -318,12 +307,9 @@ describe('Sentry Application Details', function () {
 
   describe('Editing internal app tokens', () => {
     function renderComponent() {
-      return render(
-        <SentryApplicationDetails params={{appSlug: sentryApp.slug, orgId}} />,
-        {
-          context: TestStubs.routerContext([{organization: org}]),
-        }
-      );
+      return render(<SentryApplicationDetails params={{appSlug: sentryApp.slug}} />, {
+        context: TestStubs.routerContext([{organization: org}]),
+      });
     }
 
     beforeEach(() => {
@@ -388,12 +374,9 @@ describe('Sentry Application Details', function () {
 
   describe('Editing an existing public Sentry App', () => {
     function renderComponent() {
-      return render(
-        <SentryApplicationDetails params={{appSlug: sentryApp.slug, orgId}} />,
-        {
-          context: TestStubs.routerContext([{organization: org}]),
-        }
-      );
+      return render(<SentryApplicationDetails params={{appSlug: sentryApp.slug}} />, {
+        context: TestStubs.routerContext([{organization: org}]),
+      });
     }
 
     beforeEach(() => {
@@ -473,7 +456,7 @@ describe('Sentry Application Details', function () {
 
   describe('Editing an existing public Sentry App with a scope error', () => {
     function renderComponent() {
-      render(<SentryApplicationDetails params={{appSlug: sentryApp.slug, orgId}} />, {
+      render(<SentryApplicationDetails params={{appSlug: sentryApp.slug}} />, {
         context: TestStubs.routerContext([{organization: org}]),
       });
     }

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx

@@ -135,7 +135,7 @@ class SentryAppFormModel extends FormModel {
   }
 }
 
-type Props = RouteComponentProps<{orgId: string; appSlug?: string}, {}> & {
+type Props = RouteComponentProps<{appSlug?: string}, {}> & {
   organization: Organization;
 };
 
@@ -185,9 +185,9 @@ class SentryApplicationDetails extends AsyncView<Props, State> {
 
   handleSubmitSuccess = (data: SentryApp) => {
     const {app} = this.state;
-    const {orgId} = this.props.params;
+    const {organization} = this.props;
     const type = this.isInternal ? 'internal' : 'public';
-    const baseUrl = `/settings/${orgId}/developer-settings/`;
+    const baseUrl = `/settings/${organization.slug}/developer-settings/`;
     const url = app ? `${baseUrl}?type=${type}` : `${baseUrl}${data.slug}/`;
     if (app) {
       addSuccessMessage(t('%s successfully saved.', data.name));

static/app/views/settings/organizationDeveloperSettings/sentryFunctionDetails.tsx

@@ -15,7 +15,8 @@ import FormModel from 'sentry/components/forms/model';
 import {Field} from 'sentry/components/forms/types';
 import {Panel, PanelBody, PanelHeader} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
-import {SentryFunction} from 'sentry/types';
+import {Organization, SentryFunction} from 'sentry/types';
+import withOrganization from 'sentry/utils/withOrganization';
 
 import SentryFunctionEnvironmentVariables from './sentryFunctionsEnvironmentVariables';
 import SentryFunctionSubscriptions from './sentryFunctionSubscriptions';
@@ -91,10 +92,10 @@ const formFields: Field[] = [
 function SentryFunctionDetails(props: Props) {
   const [form] = useState(() => new FormModel({transformData}));
 
-  const {orgId, functionSlug} = props.params;
-  const {sentryFunction} = props;
+  const {functionSlug} = props.params;
+  const {organization, sentryFunction} = props;
   const method = functionSlug ? 'PUT' : 'POST';
-  let endpoint = `/organizations/${orgId}/functions/`;
+  let endpoint = `/organizations/${organization.slug}/functions/`;
   if (functionSlug) {
     endpoint += `${functionSlug}/`;
   }
@@ -131,7 +132,7 @@ function SentryFunctionDetails(props: Props) {
 
   const handleSubmitSuccess = data => {
     addSuccessMessage(t('Sentry Function successfully saved.', data.name));
-    const baseUrl = `/settings/${orgId}/developer-settings/sentry-functions/`;
+    const baseUrl = `/settings/${organization.slug}/developer-settings/sentry-functions/`;
     const url = `${baseUrl}${data.slug}/`;
     if (sentryFunction) {
       addSuccessMessage(t('%s successfully saved.', data.name));
@@ -209,14 +210,21 @@ type WrapperState = {
 } & AsyncComponent['state'];
 
 type WrapperProps = {
-  params: {orgId: string; functionSlug?: string};
+  organization: Organization;
+  params: {functionSlug?: string};
 } & AsyncComponent['props'];
 
 class SentryFunctionsWrapper extends AsyncComponent<WrapperProps, WrapperState> {
   getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
-    const {functionSlug, orgId} = this.props.params;
+    const {functionSlug} = this.props.params;
+    const {organization} = this.props;
     if (functionSlug) {
-      return [['sentryFunction', `/organizations/${orgId}/functions/${functionSlug}/`]];
+      return [
+        [
+          'sentryFunction',
+          `/organizations/${organization.slug}/functions/${functionSlug}/`,
+        ],
+      ];
     }
     return [];
   }
@@ -227,4 +235,4 @@ class SentryFunctionsWrapper extends AsyncComponent<WrapperProps, WrapperState>
   }
 }
 
-export default SentryFunctionsWrapper;
+export default withOrganization(SentryFunctionsWrapper);