fix(issues): Add projectId for flag onboarding on click (#81387)

getsentry · Nov 27, 2024 · ef5e9bc · ef5e9bc
1 parent 9baf1a7
commit ef5e9bc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/static/app/components/events/featureFlags/eventFeatureFlagList.tsx b/static/app/components/events/featureFlags/eventFeatureFlagList.tsx
@@ -27,7 +27,6 @@ import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import useOrganization from 'sentry/utils/useOrganization';
-import useUrlParams from 'sentry/utils/useUrlParams';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {useIssueDetailsEventView} from 'sentry/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery';
 import {useOrganizationFlagLog} from 'sentry/views/issueDetails/streamline/hooks/useOrganizationFlagLog';
@@ -78,11 +77,6 @@ export function EventFeatureFlagList({
     },
   });
   const {activateSidebarSkipConfigure} = useFeatureFlagOnboarding();
-  const {setParamValue: setProjectId} = useUrlParams('project');
-
-  useEffect(() => {
-    setProjectId(event.projectID);
-  }, [setProjectId, event.projectID]);
 
   const {
     suspectFlags,
@@ -191,7 +185,9 @@ export function EventFeatureFlagList({
           <Button
             aria-label={t('Set Up Integration')}
             size="xs"
-            onClick={activateSidebarSkipConfigure}
+            onClick={mouseEvent => {
+              activateSidebarSkipConfigure(mouseEvent, project.id);
+            }}
           >
             {t('Set Up Integration')}
           </Button>

diff --git a/static/app/components/events/featureFlags/useFeatureFlagOnboarding.tsx b/static/app/components/events/featureFlags/useFeatureFlagOnboarding.tsx
@@ -4,6 +4,7 @@ import {SidebarPanelKey} from 'sentry/components/sidebar/types';
 import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 
 const FLAG_HASH = '#flag-sidequest';
@@ -12,6 +13,7 @@ export const FLAG_HASH_SKIP_CONFIG = '#flag-sidequest-skip';
 export function useFeatureFlagOnboarding() {
   const location = useLocation();
   const organization = useOrganization();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (location.hash === FLAG_HASH || location.hash === FLAG_HASH_SKIP_CONFIG) {
@@ -30,11 +32,22 @@ export function useFeatureFlagOnboarding() {
 
   // if we detect that event.contexts.flags is set, use this hook instead
   // to skip the configure step
-  const activateSidebarSkipConfigure = useCallback((event: React.MouseEvent) => {
-    event.preventDefault();
-    window.location.hash = FLAG_HASH_SKIP_CONFIG;
-    SidebarPanelStore.activatePanel(SidebarPanelKey.FEATURE_FLAG_ONBOARDING);
-  }, []);
+  const activateSidebarSkipConfigure = useCallback(
+    (event: React.MouseEvent, projectId: string) => {
+      event.preventDefault();
+      navigate(
+        {
+          pathname: location.pathname,
+          // Adding the projectId will help pick the correct project in onboarding
+          query: {...location.query, project: projectId},
+          hash: FLAG_HASH_SKIP_CONFIG,
+        },
+        {replace: true}
+      );
+      SidebarPanelStore.activatePanel(SidebarPanelKey.FEATURE_FLAG_ONBOARDING);
+    },
+    [navigate, location.pathname, location.query]
+  );
 
   return {activateSidebar, activateSidebarSkipConfigure};
 }