From c1059398011c9ff35b3f50ad6d5dc2b3414d0512 Mon Sep 17 00:00:00 2001
From: ArthurKnaus <arthur.knaus@sentry.io>
Date: Wed, 28 Aug 2024 09:57:41 +0200
Subject: [PATCH] fix(onboarding): Persist project filter on redirect (#76649)

Persist the page filters in local storage and mark them as pinned in the
PageFilterStore, so the page filter logic picks them up again.

Closes https://github.com/getsentry/sentry/issues/76040
---
 static/app/views/projectInstall/platform.tsx | 70 +++++++++++++-------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/static/app/views/projectInstall/platform.tsx b/static/app/views/projectInstall/platform.tsx
index 59a6f1ca4e7967..562897cb63bd9c 100644
--- a/static/app/views/projectInstall/platform.tsx
+++ b/static/app/views/projectInstall/platform.tsx
@@ -1,16 +1,18 @@
 import {Fragment, useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
+import type {LocationDescriptorObject} from 'history';
 import omit from 'lodash/omit';
 
 import Feature from 'sentry/components/acl/feature';
 import {Alert} from 'sentry/components/alert';
-import {LinkButton} from 'sentry/components/button';
+import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import NotFound from 'sentry/components/errors/notFound';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {SdkDocumentation} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
 import type {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {platformProductAvailability} from 'sentry/components/onboarding/productSelection';
+import {setPageFiltersStorage} from 'sentry/components/organizations/pageFilters/persistence';
 import {
   performance as performancePlatforms,
   replayPlatforms,
@@ -19,6 +21,7 @@ import type {Platform} from 'sentry/data/platformPickerCategories';
 import platforms from 'sentry/data/platforms';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
+import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import {space} from 'sentry/styles/space';
 import type {IssueAlertRule} from 'sentry/types/alerts';
 import type {OnboardingSelectedSDK} from 'sentry/types/onboarding';
@@ -27,6 +30,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {decodeList} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {SetupDocsLoader} from 'sentry/views/onboarding/setupDocsLoader';
 import {GettingStartedWithProjectContext} from 'sentry/views/projects/gettingStartedWithProjectContext';
@@ -53,6 +57,7 @@ export function ProjectInstallPlatform({
 }: Props) {
   const organization = useOrganization();
   const location = useLocation();
+  const navigate = useNavigate();
   const gettingStartedWithProjectContext = useContext(GettingStartedWithProjectContext);
 
   const isSelfHosted = ConfigStore.get('isSelfHosted');
@@ -140,6 +145,28 @@ export function ProjectInstallPlatform({
     });
   }, [organization, currentPlatform, project?.id]);
 
+  const redirectWithProjectSelection = useCallback(
+    (to: LocationDescriptorObject) => {
+      if (!project?.id) {
+        return;
+      }
+      // We need to persist and pin the project filter
+      // so the selection does not reset on further navigation
+      PageFiltersStore.updateProjects([Number(project?.id)], null);
+      PageFiltersStore.pin('projects', true);
+      setPageFiltersStorage(organization.slug, new Set(['projects']));
+
+      navigate({
+        ...to,
+        query: {
+          ...to.query,
+          project: project?.id,
+        },
+      });
+    },
+    [navigate, organization.slug, project?.id]
+  );
+
   if (!project) {
     return null;
   }
@@ -211,44 +238,41 @@ export function ProjectInstallPlatform({
           </Feature>
         )}
         <StyledButtonBar gap={1}>
-          <LinkButton
+          <Button
             priority="primary"
             busy={loading}
-            to={{
-              pathname: issueStreamLink,
-              query: {
-                project: project?.id,
-              },
-              hash: '#welcome',
+            onClick={() => {
+              redirectWithProjectSelection({
+                pathname: issueStreamLink,
+                hash: '#welcome',
+              });
             }}
           >
             {t('Take me to Issues')}
-          </LinkButton>
+          </Button>
           {!isSelfHostedErrorsOnly && (
-            <LinkButton
+            <Button
               busy={loading}
-              to={{
-                pathname: performanceOverviewLink,
-                query: {
-                  project: project?.id,
-                },
+              onClick={() => {
+                redirectWithProjectSelection({
+                  pathname: performanceOverviewLink,
+                });
               }}
             >
               {t('Take me to Performance')}
-            </LinkButton>
+            </Button>
           )}
           {!isSelfHostedErrorsOnly && showReplayButton && (
-            <LinkButton
+            <Button
               busy={loading}
-              to={{
-                pathname: replayLink,
-                query: {
-                  project: project?.id,
-                },
+              onClick={() => {
+                redirectWithProjectSelection({
+                  pathname: replayLink,
+                });
               }}
             >
               {t('Take me to Session Replay')}
-            </LinkButton>
+            </Button>
           )}
         </StyledButtonBar>
       </div>