fix(feedback): when uf tab loaded, set project in url (#66724)

Closes https://github.com/getsentry/sentry/issues/66712

There was a bug happening where clicking the "set up now" button in
issue details wasn't correctly loading in the right selected project,
because the global selection was empty (coming from issues stream). To
fix this, set the proj ID in the URL when this tab is loaded, so we know
which project to load in right away.

Before:


https://github.com/getsentry/sentry/assets/56095982/01e534bf-d784-4cba-bb69-9691d38ed130


After:


https://github.com/getsentry/sentry/assets/56095982/f52b2052-7348-4576-9c11-755f431747af

static/app/views/issueDetails/groupUserFeedback.tsx

@@ -116,7 +116,7 @@ class GroupUserFeedback extends Component<Props, State> {
     return (
       <Layout.Body>
         <Layout.Main fullWidth>
-          <UserFeedbackEmpty projectIds={[group.project.id]} />
+          <UserFeedbackEmpty projectIds={[group.project.id]} issueTab />
         </Layout.Main>
       </Layout.Body>
     );

static/app/views/userFeedback/index.tsx

@@ -80,7 +80,7 @@ function OrganizationUserFeedback({location: {search, pathname, query}, router}:
       );
     }
     if (!reportList?.length) {
-      return <UserFeedbackEmpty projectIds={getProjectIds()} />;
+      return <UserFeedbackEmpty projectIds={getProjectIds()} issueTab={false} />;
     }
     return (
       <Panel className="issue-list" data-test-id="user-feedback-list">

static/app/views/userFeedback/userFeedbackEmpty.tsx

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {useCallback, useEffect} from 'react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
@@ -11,17 +11,21 @@ import {useFeedbackOnboardingSidebarPanel} from 'sentry/components/feedback/useF
 import OnboardingPanel from 'sentry/components/onboardingPanel';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
+import useRouter from 'sentry/utils/useRouter';
 
 type Props = {
+  issueTab?: boolean;
   projectIds?: string[];
 };
 
-export function UserFeedbackEmpty({projectIds}: Props) {
+export function UserFeedbackEmpty({projectIds, issueTab = false}: Props) {
   const {projects, initiallyLoaded} = useProjects();
   const loadingProjects = !initiallyLoaded;
   const organization = useOrganization();
+  const location = useLocation();
 
   const selectedProjects = projectIds?.length
     ? projects.filter(({id}) => projectIds.includes(id))
@@ -31,6 +35,22 @@ export function UserFeedbackEmpty({projectIds}: Props) {
   const hasNewOnboarding = organization.features.includes('user-feedback-onboarding');
   const {activateSidebarIssueDetails} = useFeedbackOnboardingSidebarPanel();
 
+  const router = useRouter();
+  const setProjId = useCallback(() => {
+    router.push({
+      pathname: location.pathname,
+      query: {...location.query, project: projectIds?.[0]},
+      hash: location.hash,
+    });
+  }, [location.hash, location.query, location.pathname, projectIds, router]);
+
+  useEffect(() => {
+    if (issueTab) {
+      setProjId();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     window.sentryEmbedCallback = function (embed) {
       // Mock the embed's submit xhr to always be successful