From f5a22197cde63c27bdd9608d76c47cd30653f935 Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Tue, 27 Aug 2024 14:03:59 -0700
Subject: [PATCH] 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">
---
 .../devtoolbar/components/alerts/alertsPanel.tsx     |  2 +-
 .../devtoolbar/components/feedback/feedbackPanel.tsx |  1 +
 .../devtoolbar/components/issues/issuesPanel.tsx     |  2 +-
 .../components/devtoolbar/components/panelLayout.tsx | 12 +++++++++++-
 .../devtoolbar/components/releases/releasesPanel.tsx |  2 +-
 .../devtoolbar/components/replay/replayPanel.tsx     |  2 +-
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/static/app/components/devtoolbar/components/alerts/alertsPanel.tsx b/static/app/components/devtoolbar/components/alerts/alertsPanel.tsx
index d87e7ff26ba09..1fb27f97d4f40 100644
--- a/static/app/components/devtoolbar/components/alerts/alertsPanel.tsx
+++ b/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}
diff --git a/static/app/components/devtoolbar/components/feedback/feedbackPanel.tsx b/static/app/components/devtoolbar/components/feedback/feedbackPanel.tsx
index 1d63ee76ebc55..4033ace888136 100644
--- a/static/app/components/devtoolbar/components/feedback/feedbackPanel.tsx
+++ b/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 ? (
diff --git a/static/app/components/devtoolbar/components/issues/issuesPanel.tsx b/static/app/components/devtoolbar/components/issues/issuesPanel.tsx
index cdabc3f6f1f21..6a89ccf042b95 100644
--- a/static/app/components/devtoolbar/components/issues/issuesPanel.tsx
+++ b/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>
diff --git a/static/app/components/devtoolbar/components/panelLayout.tsx b/static/app/components/devtoolbar/components/panelLayout.tsx
index 302f588367756..75f6ac7987029 100644
--- a/static/app/components/devtoolbar/components/panelLayout.tsx
+++ b/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}
diff --git a/static/app/components/devtoolbar/components/releases/releasesPanel.tsx b/static/app/components/devtoolbar/components/releases/releasesPanel.tsx
index f1f9dac59b1ad..bc99edbfa41d5 100644
--- a/static/app/components/devtoolbar/components/releases/releasesPanel.tsx
+++ b/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={[
diff --git a/static/app/components/devtoolbar/components/replay/replayPanel.tsx b/static/app/components/devtoolbar/components/replay/replayPanel.tsx
index f938d8af369c0..988b84666fdc6 100644
--- a/static/app/components/devtoolbar/components/replay/replayPanel.tsx
+++ b/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 />}