Browse Source

feat(insights): Redirect module visitors to correct Insights URL (#71466)

If the Insight flag is enabled, redirect from `/performance/database` to
`/insights/database` and so on. This can't be done with `<Redirect>`
components in routes because they have to check a feature flag.
George Gritsouk 9 months ago
parent
commit
7c7f449712
1 changed files with 22 additions and 1 deletions
  1. 22 1
      static/app/views/performance/modulePageProviders.tsx

+ 22 - 1
static/app/views/performance/modulePageProviders.tsx

@@ -1,9 +1,12 @@
-import type {ComponentProps} from 'react';
+import {type ComponentProps, useEffect} from 'react';
+import * as qs from 'query-string';
 
 import Feature from 'sentry/components/acl/feature';
 import * as Layout from 'sentry/components/layouts/thirds';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {NoAccess} from 'sentry/views/performance/database/noAccess';
 import {useInsightsTitle} from 'sentry/views/performance/utils/useInsightsTitle';
@@ -22,6 +25,8 @@ interface Props {
 
 export function ModulePageProviders({moduleName, pageTitle, children, features}: Props) {
   const organization = useOrganization();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const insightsTitle = useInsightsTitle(moduleName);
   const moduleTitle = useModuleTitle(moduleName);
@@ -29,6 +34,22 @@ export function ModulePageProviders({moduleName, pageTitle, children, features}:
   const fullPageTitle = [pageTitle, moduleTitle, insightsTitle]
     .filter(Boolean)
     .join(' — ');
+  const areInsightsEnabled = organization?.features?.includes('performance-insights');
+  const isOnInsightsRoute = location.pathname.includes(`/insights/`);
+
+  useEffect(() => {
+    // If the Insights feature is enabled, redirect users to the `/insights/` equivalent URL!
+    if (areInsightsEnabled && !isOnInsightsRoute) {
+      const newPathname = location.pathname.replace(/\/performance\//g, '/insights/');
+      navigate(`${newPathname}?${qs.stringify(location.query)}`);
+    }
+  }, [
+    navigate,
+    location.pathname,
+    location.query,
+    areInsightsEnabled,
+    isOnInsightsRoute,
+  ]);
 
   return (
     <PageFiltersContainer>