normalize release-threshold url redirect (#60210)

static/app/views/releases/components/header.tsx

@@ -8,16 +8,16 @@ import {TabList, Tabs} from 'sentry/components/tabs';
 import {Tooltip} from 'sentry/components/tooltip';
 import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {t} from 'sentry/locale';
+import {Organization} from 'sentry/types';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
-import {MONITOR_PATH, THRESHOLDS_PATH} from '../utils/constants';
-
 type Props = {
+  organization: Organization;
   router: InjectedRouter;
   hasV2ReleaseUIEnabled?: boolean;
 };
 
-function Header({router, hasV2ReleaseUIEnabled = false}: Props) {
+function Header({router, hasV2ReleaseUIEnabled = false, organization}: Props) {
   const [selected, setSelected] = useState(router.location.pathname);
 
   const location = router.location;
@@ -31,17 +31,27 @@ function Header({router, hasV2ReleaseUIEnabled = false}: Props) {
   const tabs = hasV2ReleaseUIEnabled
     ? [
         {
-          key: MONITOR_PATH,
           label: t('Monitor'),
           description: '',
-          path: MONITOR_PATH,
+          path: normalizeUrl(`/organizations/${organization.slug}/releases/`),
+          to: normalizeUrl({
+            query: {
+              ...queryParams,
+            },
+            pathname: `/organizations/${organization.slug}/releases/`,
+          }),
         },
         {
-          key: THRESHOLDS_PATH,
           label: t('Thresholds'),
           description:
             'thresholds represent action alerts that will trigger once a threshold has been breached',
-          path: THRESHOLDS_PATH,
+          path: normalizeUrl(`/organizations/${organization.slug}/release-thresholds/`),
+          to: normalizeUrl({
+            query: {
+              ...queryParams,
+            },
+            pathname: `/organizations/${organization.slug}/release-thresholds/`,
+          }),
         },
       ]
     : [];
@@ -63,31 +73,26 @@ function Header({router, hasV2ReleaseUIEnabled = false}: Props) {
           />
         </Layout.Title>
       </Layout.HeaderContent>
-      <StyledTabs value={selected} onChange={onTabSelect}>
-        <TabList hideBorder>
-          {tabs.map(({key, label, description, path}) => {
-            const to_url = normalizeUrl({
-              query: {
-                ...queryParams,
-              },
-              pathname: path,
-            });
-
-            return (
-              <TabList.Item key={key} to={to_url} textValue={label}>
-                <Tooltip
-                  title={description}
-                  position="bottom"
-                  isHoverable
-                  delay={SLOW_TOOLTIP_DELAY}
-                >
-                  {label}
-                </Tooltip>
-              </TabList.Item>
-            );
-          })}
-        </TabList>
-      </StyledTabs>
+      {hasV2ReleaseUIEnabled && (
+        <StyledTabs value={selected} onChange={onTabSelect}>
+          <TabList hideBorder>
+            {tabs.map(({label, description, path, to}) => {
+              return (
+                <TabList.Item key={path} to={to} textValue={label}>
+                  <Tooltip
+                    title={description}
+                    position="bottom"
+                    isHoverable
+                    delay={SLOW_TOOLTIP_DELAY}
+                  >
+                    {label}
+                  </Tooltip>
+                </TabList.Item>
+              );
+            })}
+          </TabList>
+        </StyledTabs>
+      )}
     </Layout.Header>
   );
 }

static/app/views/releases/list/index.tsx

@@ -525,7 +525,11 @@ class ReleasesList extends DeprecatedAsyncView<Props, State> {
     return (
       <PageFiltersContainer showAbsolute={false}>
         <NoProjectMessage organization={organization}>
-          <Header router={router} hasV2ReleaseUIEnabled={this.hasV2ReleaseUIEnabled} />
+          <Header
+            router={router}
+            hasV2ReleaseUIEnabled={this.hasV2ReleaseUIEnabled}
+            organization={organization}
+          />
 
           <Layout.Body>
             <Layout.Main fullWidth>

static/app/views/releases/thresholdsList/index.spec.tsx

@@ -4,10 +4,9 @@ import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import PageFiltersStore from 'sentry/stores/pageFiltersStore';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import ThresholdsList from 'sentry/views/releases/thresholdsList/';
 
-import {THRESHOLDS_PATH} from '../utils/constants';
-
 describe('ReleaseThresholdsList', () => {
   const organization = Organization({
     slug: 'test-thresholds',
@@ -43,13 +42,16 @@ describe('ReleaseThresholdsList', () => {
     const {router: flaglessRouter, routerContext: flaglessRouterContext} = initializeOrg({
       organization: organization2,
     });
+    const expectedRedirect = normalizeUrl(
+      `/organizations/${organization2.slug}/releases/`
+    );
     render(<ThresholdsList />, {
       context: flaglessRouterContext,
       organization: organization2,
     });
 
     expect(flaglessRouter.replace).toHaveBeenCalledTimes(1);
-    expect(flaglessRouter.replace).toHaveBeenCalledWith(`/releases/`);
+    expect(flaglessRouter.replace).toHaveBeenCalledWith(expectedRedirect);
   });
 
   it('fetches release thresholds for selected projects', async () => {
@@ -64,7 +66,9 @@ describe('ReleaseThresholdsList', () => {
       },
       new Set()
     );
-    routerContext.context.location.pathname = THRESHOLDS_PATH;
+    routerContext.context.location.pathname = normalizeUrl(
+      `/organizations/${organization.slug}/release-thresholds/`
+    );
     render(<ThresholdsList />, {
       context: routerContext,
       organization,
@@ -90,7 +94,9 @@ describe('ReleaseThresholdsList', () => {
       },
       new Set()
     );
-    routerContext.context.location.pathname = THRESHOLDS_PATH;
+    routerContext.context.location.pathname = normalizeUrl(
+      `/organizations/${organization.slug}/release-thresholds/`
+    );
     render(<ThresholdsList />, {context: routerContext, organization});
     expect(await screen.findByText('Thresholds')).toBeInTheDocument();
     expect(mockThresholdFetch).toHaveBeenCalledWith(

static/app/views/releases/thresholdsList/index.tsx

@@ -21,6 +21,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 import Header from '../components/header';
 import {Threshold} from '../utils/types';
@@ -42,7 +43,8 @@ function ReleaseThresholdList({}: Props) {
       organization.features.includes('releases-v2') ||
       organization.features.includes('releases-v2-st');
     if (!hasV2ReleaseUIEnabled) {
-      router.replace('/releases/');
+      const redirect = normalizeUrl(`/organizations/${organization.slug}/releases/`);
+      router.replace(redirect);
     }
   }, [router, organization]);
   const {projects} = useProjects();
@@ -153,7 +155,7 @@ function ReleaseThresholdList({}: Props) {
   return (
     <PageFiltersContainer>
       <NoProjectMessage organization={organization}>
-        <Header router={router} hasV2ReleaseUIEnabled />
+        <Header router={router} hasV2ReleaseUIEnabled organization={organization} />
         <Layout.Body>
           <Layout.Main fullWidth>
             <FilterRow>

static/app/views/releases/utils/constants.ts

@@ -1,4 +1 @@
-export const THRESHOLDS_PATH = '/release-thresholds/';
-export const MONITOR_PATH = '/releases/';
-
 export const NEW_THRESHOLD_PREFIX = 'newthreshold';