ref(toolbar): add links to panel headings (#76633)

relates to https://github.com/getsentry/sentry/issues/75636

<img width="299" alt="SCR-20240827-lyvz"
src="https://github.com/user-attachments/assets/1ef1d2a7-462c-459a-9e53-0c937a2490b7">
<img width="299" alt="SCR-20240827-lyye"
src="https://github.com/user-attachments/assets/2fba3a0c-ca60-49fe-ac88-ba1abb826bd9">

static/app/components/devtoolbar/components/alerts/alertsPanel.tsx

@@ -38,7 +38,7 @@ export default function AlertsPanel() {
   const placeholderHeight = `${estimateSize - 8}px`; // The real height of the items, minus the padding-block value
 
   return (
-    <PanelLayout title="Alerts" showProjectBadge>
+    <PanelLayout title="Alerts" showProjectBadge link={{url: '/alerts/'}}>
       <div css={resetFlexColumnCss}>
         <InfiniteListState
           queryResult={queryResult}

static/app/components/devtoolbar/components/feedback/feedbackPanel.tsx

@@ -60,6 +60,7 @@ export default function FeedbackPanel() {
   return (
     <PanelLayout
       showProjectBadge
+      link={{url: '/feedback/'}}
       title="User Feedback"
       titleRight={
         buttonRef ? (

static/app/components/devtoolbar/components/issues/issuesPanel.tsx

@@ -22,7 +22,7 @@ export default function IssuesPanel() {
   const placeholderHeight = `${estimateSize - 8}px`; // The real height of the items, minus the padding-block value
 
   return (
-    <PanelLayout title="Issues" showProjectBadge>
+    <PanelLayout title="Issues" showProjectBadge link={{url: '/issues/'}}>
       <div css={[smallCss, panelSectionCss, panelDescCss]}>
         <span>Unresolved issues related to this page</span>
       </div>

static/app/components/devtoolbar/components/panelLayout.tsx

@@ -1,5 +1,7 @@
 import {css} from '@emotion/react';
+import type {UrlObject} from 'query-string';
 
+import SentryAppLink from 'sentry/components/devtoolbar/components/sentryAppLink';
 import useConfiguration from 'sentry/components/devtoolbar/hooks/useConfiguration';
 import {buttonCss} from 'sentry/components/devtoolbar/styles/typography';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
@@ -10,6 +12,7 @@ import {resetDialogCss, resetFlexColumnCss, resetFlexRowCss} from '../styles/res
 
 interface Props {
   children?: React.ReactNode;
+  link?: UrlObject;
   showProjectBadge?: boolean;
   title?: string;
   titleRight?: React.ReactNode;
@@ -20,6 +23,7 @@ export default function PanelLayout({
   title,
   titleRight,
   showProjectBadge,
+  link,
 }: Props) {
   const {projectId, projectSlug, projectPlatform} = useConfiguration();
   return (
@@ -51,7 +55,13 @@ export default function PanelLayout({
               {alignItems: 'center', marginRight: 'var(--space100)'},
             ]}
           >
-            <h1 css={[buttonCss]}>{title}</h1>
+            {link ? (
+              <SentryAppLink to={link}>
+                <h1 css={[buttonCss]}>{title}</h1>
+              </SentryAppLink>
+            ) : (
+              <h1 css={[buttonCss]}>{title}</h1>
+            )}
             {titleRight}
           </header>
         ) : null}

static/app/components/devtoolbar/components/releases/releasesPanel.tsx

@@ -192,7 +192,7 @@ export default function ReleasesPanel() {
   }
 
   return (
-    <PanelLayout title="Latest Release" showProjectBadge>
+    <PanelLayout title="Latest Release" showProjectBadge link={{url: '/releases/'}}>
       <AnalyticsProvider nameVal="header" keyVal="header">
         <span
           css={[

static/app/components/devtoolbar/components/replay/replayPanel.tsx

@@ -36,7 +36,7 @@ export default function ReplayPanel() {
   const {eventName, eventKey} = useContext(AnalyticsContext);
   const [buttonLoading, setButtonLoading] = useState(false);
   return (
-    <PanelLayout title="Session Replay" showProjectBadge>
+    <PanelLayout title="Session Replay" showProjectBadge link={{url: '/replays/'}}>
       <Button
         size="sm"
         icon={isDisabled ? undefined : isRecordingSession ? <IconPause /> : <IconPlay />}