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

relates to #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 />}