Skip to content

Commit

Permalink
ref(toolbar): add links to panel headings (#76633)
Browse files Browse the repository at this point in the history
  • Loading branch information
michellewzhang authored Aug 27, 2024
1 parent 2304d9b commit f5a2219
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export default function FeedbackPanel() {
return (
<PanelLayout
showProjectBadge
link={{url: '/feedback/'}}
title="User Feedback"
titleRight={
buttonRef ? (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 11 additions & 1 deletion static/app/components/devtoolbar/components/panelLayout.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -20,6 +23,7 @@ export default function PanelLayout({
title,
titleRight,
showProjectBadge,
link,
}: Props) {
const {projectId, projectSlug, projectPlatform} = useConfiguration();
return (
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 />}
Expand Down

0 comments on commit f5a2219

Please sign in to comment.