fix(releases): strip trailing slash from ?project= so the page loads

static/app/views/explore/releases/detail/index.spec.tsx

@@ -0,0 +1,91 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
+import {ReleaseFixture} from 'sentry-fixture/release';
+import {ReleaseMetaFixture} from 'sentry-fixture/releaseMeta';
+import {ReleaseProjectFixture} from 'sentry-fixture/releaseProject';
+
+import {render, waitFor} from 'sentry-test/reactTestingLibrary';
+import type {RouterConfig} from 'sentry-test/reactTestingLibrary';
+
+import {ProjectsStore} from 'sentry/stores/projectsStore';
+import type {ReleaseProject} from 'sentry/types/release';
+import ReleasesDetailContainer from 'sentry/views/explore/releases/detail';
+
+describe('ReleasesDetailContainer', () => {
+  const organization = OrganizationFixture();
+  const project = ReleaseProjectFixture({
+    id: 1,
+    slug: 'sentry-android-shop',
+    platform: 'android',
+  }) as Required<ReleaseProject>;
+  const release = ReleaseFixture({
+    version: 'test-release',
+    projects: [project],
+  });
+  const releaseMeta = ReleaseMetaFixture({
+    version: 'test-release',
+    projects: [project],
+  });
+
+  function renderContainer(query: Record<string, string | string[]>) {
+    const pathname = `/organizations/${organization.slug}/explore/releases/test-release/`;
+    const initialRouterConfig: RouterConfig = {
+      location: {pathname, query},
+      route: '/organizations/:orgId/explore/releases/:release/',
+    };
+
+    return render(<ReleasesDetailContainer />, {
+      organization,
+      initialRouterConfig,
+    });
+  }
+
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+    jest.clearAllMocks();
+
+    ProjectsStore.reset();
+    ProjectsStore.loadInitialData([ProjectFixture({id: String(project.id), slug: project.slug})]);
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/releases/test-release/meta/',
+      method: 'GET',
+      body: releaseMeta,
+    });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/releases/test-release/',
+      method: 'GET',
+      body: release,
+    });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/releases/test-release/deploys/',
+      method: 'GET',
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/sessions/',
+      method: 'GET',
+      body: {groups: []},
+    });
+  });
+
+  it('strips a trailing slash from the project query param', async () => {
+    const {router} = renderContainer({project: '1/'});
+
+    await waitFor(() => {
+      expect(router.location.query.project).toBe('1');
+    });
+  });
+
+  it('keeps the project query param unchanged when there is no trailing slash', async () => {
+    const {router} = renderContainer({project: '1'});
+
+    // Give effects a chance to run; the URL must stay untouched.
+    await waitFor(() => {
+      expect(router.location.query.project).toBe('1');
+    });
+    expect(router.location.pathname).toBe(
+      `/organizations/${organization.slug}/explore/releases/test-release/`
+    );
+  });
+});

static/app/views/explore/releases/detail/index.tsx

@@ -241,6 +241,27 @@ function ReleasesDetailContainer() {
 
   useRouteAnalyticsParams({release});
 
+  // Strip trailing slashes from the project query param, e.g. `?project=123/`
+  // fails backend validation (it is neither a decimal id nor a slug) and the
+  // page would otherwise render blank because 400 errors are filtered out
+  // below. Replaces the URL so the requests pick up the cleaned value.
+  useEffect(() => {
+    const project = location.query.project;
+
+    if (typeof project === 'string' && project !== project.replace(/\/+$/, '')) {
+      navigate(
+        {
+          ...location,
+          query: {
+            ...location.query,
+            project: project.replace(/\/+$/, ''),
+          },
+        },
+        {replace: true}
+      );
+    }
+  }, [location, navigate]);
+
   // Remove global date time from URL
   useEffect(() => {
     const {start, end, statsPeriod, utc, ...restQuery} = location.query;