From d40550c7b519d4a5d2a84f0de2345042facb725b Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Mon, 2 Sep 2024 16:25:17 +0200
Subject: [PATCH 01/17] ref(whats-new): Add improvements

---
 .../components/sidebar/broadcastPanelItem.tsx | 131 ++++++++++++++++++
 static/app/components/sidebar/broadcasts.tsx  |   7 +-
 static/app/types/system.tsx                   |  24 +++-
 .../utils/analytics/issueAnalyticsEvents.tsx  |   3 +-
 tests/js/fixtures/broadcast.ts                |   1 +
 5 files changed, 161 insertions(+), 5 deletions(-)
 create mode 100644 static/app/components/sidebar/broadcastPanelItem.tsx

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
new file mode 100644
index 00000000000000..872c2a7c00e3b3
--- /dev/null
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -0,0 +1,131 @@
+import {useCallback} from 'react';
+import styled from '@emotion/styled';
+
+import Badge from 'sentry/components/badge/badge';
+import {LinkButton} from 'sentry/components/button';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {Broadcast} from 'sentry/types/system';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import useOrganization from 'sentry/utils/useOrganization';
+
+interface BroadcastPanelItemProps
+  extends Pick<
+    Broadcast,
+    'hasSeen' | 'category' | 'title' | 'message' | 'cta' | 'link' | 'mediaUrl'
+  > {}
+
+export function BroadcastPanelItem({
+  hasSeen,
+  title,
+  message,
+  link,
+  cta,
+  mediaUrl,
+  category,
+}: Pick<
+  Broadcast,
+  'hasSeen' | 'category' | 'title' | 'message' | 'cta' | 'link' | 'mediaUrl'
+>) {
+  const organization = useOrganization();
+
+  const handlePanelClicked = useCallback(() => {
+    trackAnalytics('whats_new.link_clicked', {organization, title, category});
+  }, [organization, title, category]);
+
+  return (
+    <SidebarPanelItemRoot>
+      <TitleWrapper>
+        <Title hasSeen={hasSeen}>{title}</Title>
+        {!hasSeen ? <Badge type={'new'}>{category}</Badge> : <Badge>{category}</Badge>}
+      </TitleWrapper>
+
+      {mediaUrl && (
+        <Image
+          mediaUrl={mediaUrl}
+          link={link}
+          title={title}
+          onClick={handlePanelClicked}
+        />
+      )}
+
+      {message && <Message>{message}</Message>}
+
+      {link && (
+        <CTA>
+          <LinkButton
+            external
+            href={link}
+            onClick={handlePanelClicked}
+            style={{marginTop: space(1)}}
+          >
+            {cta ?? t('Read More')}
+          </LinkButton>
+        </CTA>
+      )}
+    </SidebarPanelItemRoot>
+  );
+}
+
+function Image({
+  mediaUrl,
+  link,
+  title,
+  onClick,
+}: Pick<BroadcastPanelItemProps, 'mediaUrl' | 'link' | 'title'> & {onClick: () => void}) {
+  const image = (
+    <img
+      src={mediaUrl}
+      alt={title}
+      style={{maxWidth: '100%', marginBottom: space(1)}}
+      onClick={onClick}
+    />
+  );
+
+  if (link) {
+    return <ExternalLink href={link}>{image}</ExternalLink>;
+  }
+
+  return image;
+}
+
+const SidebarPanelItemRoot = styled('div')`
+  line-height: 1.5;
+  background: ${p => p.theme.background};
+  font-size: ${p => p.theme.fontSizeMedium};
+  padding: ${space(3)};
+
+  :not(:first-child) {
+    border-top: 1px solid ${p => p.theme.innerBorder};
+  }
+`;
+
+const TitleWrapper = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  gap: ${space(1)};
+`;
+
+const Title = styled('div')<Pick<BroadcastPanelItemProps, 'hasSeen'>>`
+  font-size: ${p => p.theme.fontSizeLarge};
+  margin-bottom: ${space(1)};
+  color: ${p => p.theme.textColor};
+  font-weight: ${p => p.theme.fontWeightBold};
+
+  .culprit {
+    font-weight: ${p => p.theme.fontWeightNormal};
+  }
+`;
+
+const CTA = styled('div')`
+  margin: ${space(0.5)} 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Message = styled(CTA)`
+  color: ${p => p.theme.subText};
+`;
diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
index 539e25284918d8..a0b79bc944a043 100644
--- a/static/app/components/sidebar/broadcasts.tsx
+++ b/static/app/components/sidebar/broadcasts.tsx
@@ -4,10 +4,10 @@ import {getAllBroadcasts, markBroadcastsAsSeen} from 'sentry/actionCreators/broa
 import type {Client} from 'sentry/api';
 import DemoModeGate from 'sentry/components/acl/demoModeGate';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {BroadcastPanelItem} from 'sentry/components/sidebar/broadcastPanelItem';
 import SidebarItem from 'sentry/components/sidebar/sidebarItem';
 import SidebarPanel from 'sentry/components/sidebar/sidebarPanel';
 import SidebarPanelEmpty from 'sentry/components/sidebar/sidebarPanelEmpty';
-import SidebarPanelItem from 'sentry/components/sidebar/sidebarPanelItem';
 import {IconBroadcast} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
@@ -27,6 +27,7 @@ type Props = CommonSidebarProps & {
 
 type State = {
   broadcasts: Broadcast[];
+
   error: boolean;
   loading: boolean;
 };
@@ -151,13 +152,15 @@ class Broadcasts extends Component<Props, State> {
                 </SidebarPanelEmpty>
               ) : (
                 broadcasts.map(item => (
-                  <SidebarPanelItem
+                  <BroadcastPanelItem
                     key={item.id}
                     hasSeen={item.hasSeen}
                     title={item.title}
                     message={item.message}
                     link={item.link}
                     cta={item.cta}
+                    mediaUrl={item.mediaUrl}
+                    category={item.category}
                   />
                 ))
               )}
diff --git a/static/app/types/system.tsx b/static/app/types/system.tsx
index a02cb9dea2e06d..c91b4e6da1a589 100644
--- a/static/app/types/system.tsx
+++ b/static/app/types/system.tsx
@@ -228,17 +228,37 @@ export type PipelineInitialData = {
   props: Record<string, any>;
 };
 
-export type Broadcast = {
+export interface Broadcast {
+  /**
+   * The text for the CTA link at the bottom of the panel item
+   */
   cta: string;
   dateCreated: string;
   dateExpires: string;
+  /**
+   * Has the item been seen? affects the styling of the panel item
+   */
   hasSeen: boolean;
   id: string;
   isActive: boolean;
+  /**
+   * The URL to use for the CTA
+   */
   link: string;
+  /**
+   * Image url
+   */
+  mediaUrl: string;
+  /**
+   * A message with muted styling which appears above the children content
+   */
   message: string;
   title: string;
-};
+  /**
+   * Category of the broadcast
+   */
+  category?: string;
+}
 
 // XXX(epurkhiser): The components list can be generated using jq
 //
diff --git a/static/app/utils/analytics/issueAnalyticsEvents.tsx b/static/app/utils/analytics/issueAnalyticsEvents.tsx
index eb951b0da53301..1801828b334a95 100644
--- a/static/app/utils/analytics/issueAnalyticsEvents.tsx
+++ b/static/app/utils/analytics/issueAnalyticsEvents.tsx
@@ -2,6 +2,7 @@ import type {SourceMapProcessingIssueType} from 'sentry/components/events/interf
 import type {FieldValue} from 'sentry/components/forms/model';
 import type {PriorityLevel} from 'sentry/types/group';
 import type {IntegrationType} from 'sentry/types/integrations';
+import type {Broadcast} from 'sentry/types/system';
 import type {BaseEventAnalyticsParams} from 'sentry/utils/analytics/workflowAnalyticsEvents';
 import type {CommonGroupAnalyticsData} from 'sentry/utils/events';
 
@@ -296,7 +297,7 @@ export type IssueEventParameters = {
   'tag.clicked': {
     is_clickable: boolean;
   };
-  'whats_new.link_clicked': {title?: string};
+  'whats_new.link_clicked': Pick<Broadcast, 'title' | 'category'>;
 };
 
 export type IssueEventKey = keyof IssueEventParameters;
diff --git a/tests/js/fixtures/broadcast.ts b/tests/js/fixtures/broadcast.ts
index b6204a8b714a1a..e167603248615c 100644
--- a/tests/js/fixtures/broadcast.ts
+++ b/tests/js/fixtures/broadcast.ts
@@ -12,6 +12,7 @@ export function BroadcastFixture(params: Partial<Broadcast> = {}): Broadcast {
     message:
       'Source maps are JSON files that contain information on how to map your transpiled source code back to their original source.',
     title: 'Learn about Source Maps',
+    mediaUrl: 'https://images.ctfassets.net/em6l9zw4tzag/2vWdw7ZaApWxygugalbyOC/285525e5b7c9fbfa8fb814a69ab214cd/PerformancePageSketches_hero.jpg?w=2520&h=945&q=50&fm=webp',
     ...params,
   };
 }

From af177001a6f82e40b13e92481ed479b03d021966 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 3 Sep 2024 14:56:31 +0200
Subject: [PATCH 02/17] fix types

---
 static/app/components/sidebar/broadcasts.tsx  | 18 +++++-
 .../components/sidebar/sidebarPanelItem.tsx   | 59 +++++--------------
 static/app/components/sidebar/utils.tsx       |  5 ++
 3 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
index a0b79bc944a043..dbda05dba3c5bc 100644
--- a/static/app/components/sidebar/broadcasts.tsx
+++ b/static/app/components/sidebar/broadcasts.tsx
@@ -8,6 +8,8 @@ import {BroadcastPanelItem} from 'sentry/components/sidebar/broadcastPanelItem';
 import SidebarItem from 'sentry/components/sidebar/sidebarItem';
 import SidebarPanel from 'sentry/components/sidebar/sidebarPanel';
 import SidebarPanelEmpty from 'sentry/components/sidebar/sidebarPanelEmpty';
+import SidebarPanelItem from 'sentry/components/sidebar/sidebarPanelItem';
+import {hasWhatIsNewRevampFeature} from 'sentry/components/sidebar/utils';
 import {IconBroadcast} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
@@ -116,10 +118,11 @@ class Broadcasts extends Component<Props, State> {
   }
 
   render() {
-    const {orientation, collapsed, currentPanel, hidePanel} = this.props;
+    const {orientation, collapsed, currentPanel, hidePanel, organization} = this.props;
     const {broadcasts, loading} = this.state;
 
     const unseenPosts = this.unseenIds;
+    const whatIsNewRevampFeature = hasWhatIsNewRevampFeature(organization);
 
     return (
       <DemoModeGate>
@@ -150,7 +153,7 @@ class Broadcasts extends Component<Props, State> {
                 <SidebarPanelEmpty>
                   {t('No recent updates from the Sentry team.')}
                 </SidebarPanelEmpty>
-              ) : (
+              ) : whatIsNewRevampFeature ? (
                 broadcasts.map(item => (
                   <BroadcastPanelItem
                     key={item.id}
@@ -163,6 +166,17 @@ class Broadcasts extends Component<Props, State> {
                     category={item.category}
                   />
                 ))
+              ) : (
+                broadcasts.map(item => (
+                  <SidebarPanelItem
+                    key={item.id}
+                    hasSeen={item.hasSeen}
+                    title={item.title}
+                    message={item.message}
+                    link={item.link}
+                    cta={item.cta}
+                  />
+                ))
               )}
             </SidebarPanel>
           )}
diff --git a/static/app/components/sidebar/sidebarPanelItem.tsx b/static/app/components/sidebar/sidebarPanelItem.tsx
index 2a7c61c3731987..aeac09fc90b912 100644
--- a/static/app/components/sidebar/sidebarPanelItem.tsx
+++ b/static/app/components/sidebar/sidebarPanelItem.tsx
@@ -3,39 +3,19 @@ import styled from '@emotion/styled';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Broadcast} from 'sentry/types/system';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 
-type Props = {
+interface SidebarPanelItemProps
+  extends Partial<
+    Pick<Broadcast, 'cta' | 'link' | 'category' | 'title' | 'hasSeen' | 'message'>
+  > {
   /**
    * Content rendered instead the panel item
    */
   children?: React.ReactNode;
-  /**
-   * The text for the CTA link at the bottom of the panel item
-   */
-  cta?: string;
-  /**
-   * Has the item been seen? affects the styling of the panel item
-   */
-  hasSeen?: boolean;
-  /**
-   * The URL to use for the CTA
-   */
-  link?: string;
-  /**
-   * A message with muted styling which appears above the children content
-   */
-  message?: React.ReactNode;
-  /**
-   * The title of the sidebar item
-   */
-  title?: string;
-  /**
-   * Actions to the right of the title
-   */
-  titleAction?: React.ReactNode;
-};
+}
 
 function SidebarPanelItem({
   hasSeen,
@@ -43,18 +23,12 @@ function SidebarPanelItem({
   message,
   link,
   cta,
-  titleAction,
   children,
-}: Props) {
+}: SidebarPanelItemProps) {
   const organization = useOrganization();
   return (
     <SidebarPanelItemRoot>
-      {title && (
-        <TitleWrapper>
-          <Title hasSeen={hasSeen}>{title}</Title>
-          {titleAction}
-        </TitleWrapper>
-      )}
+      {title && <Title hasSeen={hasSeen}>{title}</Title>}
       {message && <Message>{message}</Message>}
 
       {children}
@@ -63,9 +37,12 @@ function SidebarPanelItem({
         <Text>
           <ExternalLink
             href={link}
-            onClick={() =>
-              trackAnalytics('whats_new.link_clicked', {organization, title})
-            }
+            onClick={() => {
+              if (!title) {
+                return;
+              }
+              trackAnalytics('whats_new.link_clicked', {organization, title});
+            }}
           >
             {cta || t('Read More')}
           </ExternalLink>
@@ -88,13 +65,7 @@ const SidebarPanelItemRoot = styled('div')`
   }
 `;
 
-const TitleWrapper = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  gap: ${space(1)};
-`;
-
-const Title = styled('div')<Pick<Props, 'hasSeen'>>`
+const Title = styled('div')<Pick<SidebarPanelItemProps, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSizeLarge};
   margin-bottom: ${space(1)};
   color: ${p => p.theme.textColor};
diff --git a/static/app/components/sidebar/utils.tsx b/static/app/components/sidebar/utils.tsx
index 693c2bfe9f7d92..b38927bbc80169 100644
--- a/static/app/components/sidebar/utils.tsx
+++ b/static/app/components/sidebar/utils.tsx
@@ -1,4 +1,5 @@
 import type {OnboardingTaskStatus} from 'sentry/types/onboarding';
+import type {Organization} from 'sentry/types/organization';
 
 export const isDone = (task: OnboardingTaskStatus) =>
   task.status === 'complete' || task.status === 'skipped';
@@ -6,3 +7,7 @@ export const isDone = (task: OnboardingTaskStatus) =>
 // To be passed as the `source` parameter in router navigation state
 // e.g. {pathname: '/issues/', state: {source: `sidebar`}}
 export const SIDEBAR_NAVIGATION_SOURCE = 'sidebar';
+
+export function hasWhatIsNewRevampFeature(organization: Organization) {
+  return organization.features.includes('what-is-new-revamp');
+}

From 991aeae1fbe68a349e104c416dbcd993c226fbf9 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 3 Sep 2024 14:57:20 +0200
Subject: [PATCH 03/17] minor improvement

---
 static/app/components/sidebar/broadcastPanelItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
index 872c2a7c00e3b3..89d3248d4a8a81 100644
--- a/static/app/components/sidebar/broadcastPanelItem.tsx
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -38,7 +38,7 @@ export function BroadcastPanelItem({
     <SidebarPanelItemRoot>
       <TitleWrapper>
         <Title hasSeen={hasSeen}>{title}</Title>
-        {!hasSeen ? <Badge type={'new'}>{category}</Badge> : <Badge>{category}</Badge>}
+        <Badge type={!hasSeen ? 'new' : undefined}>{category}</Badge>
       </TitleWrapper>
 
       {mediaUrl && (

From 70a8fdad90a1f0ecf60c96d2bebaecb1a6203c03 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 3 Sep 2024 16:25:25 +0200
Subject: [PATCH 04/17] polish + tests

---
 .../components/sidebar/broadcastPanelItem.tsx | 64 +++++----------
 .../components/sidebar/broadcasts.spec.tsx    | 82 +++++++++++++++++++
 static/app/components/sidebar/broadcasts.tsx  |  4 +-
 .../components/sidebar/sidebarPanelItem.tsx   |  9 +-
 4 files changed, 111 insertions(+), 48 deletions(-)
 create mode 100644 static/app/components/sidebar/broadcasts.spec.tsx

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
index 89d3248d4a8a81..fd4a844b9ddde4 100644
--- a/static/app/components/sidebar/broadcastPanelItem.tsx
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import Badge from 'sentry/components/badge/badge';
 import {LinkButton} from 'sentry/components/button';
 import ExternalLink from 'sentry/components/links/externalLink';
-import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Broadcast} from 'sentry/types/system';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -13,21 +12,20 @@ import useOrganization from 'sentry/utils/useOrganization';
 interface BroadcastPanelItemProps
   extends Pick<
     Broadcast,
-    'hasSeen' | 'category' | 'title' | 'message' | 'cta' | 'link' | 'mediaUrl'
-  > {}
+    'hasSeen' | 'category' | 'title' | 'message' | 'link' | 'mediaUrl'
+  > {
+  ctaText: string;
+}
 
 export function BroadcastPanelItem({
   hasSeen,
   title,
   message,
   link,
-  cta,
+  ctaText,
   mediaUrl,
   category,
-}: Pick<
-  Broadcast,
-  'hasSeen' | 'category' | 'title' | 'message' | 'cta' | 'link' | 'mediaUrl'
->) {
+}: BroadcastPanelItemProps) {
   const organization = useOrganization();
 
   const handlePanelClicked = useCallback(() => {
@@ -38,7 +36,7 @@ export function BroadcastPanelItem({
     <SidebarPanelItemRoot>
       <TitleWrapper>
         <Title hasSeen={hasSeen}>{title}</Title>
-        <Badge type={!hasSeen ? 'new' : undefined}>{category}</Badge>
+        {category && <Badge type={!hasSeen ? 'new' : 'default'}>{category}</Badge>}
       </TitleWrapper>
 
       {mediaUrl && (
@@ -50,20 +48,16 @@ export function BroadcastPanelItem({
         />
       )}
 
-      {message && <Message>{message}</Message>}
-
-      {link && (
-        <CTA>
-          <LinkButton
-            external
-            href={link}
-            onClick={handlePanelClicked}
-            style={{marginTop: space(1)}}
-          >
-            {cta ?? t('Read More')}
-          </LinkButton>
-        </CTA>
-      )}
+      <Message>{message}</Message>
+
+      <LinkButton
+        external
+        href={link}
+        onClick={handlePanelClicked}
+        style={{marginTop: space(1)}}
+      >
+        {ctaText}
+      </LinkButton>
     </SidebarPanelItemRoot>
   );
 }
@@ -93,7 +87,6 @@ function Image({
 const SidebarPanelItemRoot = styled('div')`
   line-height: 1.5;
   background: ${p => p.theme.background};
-  font-size: ${p => p.theme.fontSizeMedium};
   padding: ${space(3)};
 
   :not(:first-child) {
@@ -102,30 +95,17 @@ const SidebarPanelItemRoot = styled('div')`
 `;
 
 const TitleWrapper = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  gap: ${space(1)};
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  margin-bottom: ${space(1)};
 `;
 
 const Title = styled('div')<Pick<BroadcastPanelItemProps, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSizeLarge};
-  margin-bottom: ${space(1)};
   color: ${p => p.theme.textColor};
-  font-weight: ${p => p.theme.fontWeightBold};
-
-  .culprit {
-    font-weight: ${p => p.theme.fontWeightNormal};
-  }
-`;
-
-const CTA = styled('div')`
-  margin: ${space(0.5)} 0;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+  ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold};`};
 `;
 
-const Message = styled(CTA)`
+const Message = styled('div')`
   color: ${p => p.theme.subText};
 `;
diff --git a/static/app/components/sidebar/broadcasts.spec.tsx b/static/app/components/sidebar/broadcasts.spec.tsx
new file mode 100644
index 00000000000000..6db761a6a3591d
--- /dev/null
+++ b/static/app/components/sidebar/broadcasts.spec.tsx
@@ -0,0 +1,82 @@
+import {BroadcastFixture} from 'sentry-fixture/broadcast';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import Broadcasts from 'sentry/components/sidebar/broadcasts';
+import {SidebarPanelKey} from 'sentry/components/sidebar/types';
+import type {Broadcast} from 'sentry/types/system';
+import {trackAnalytics} from 'sentry/utils/analytics';
+
+jest.mock('sentry/utils/analytics');
+
+function renderMockRequests({
+  orgSlug,
+  broadcastsResponse,
+}: {
+  orgSlug: string;
+  broadcastsResponse?: Broadcast[];
+}) {
+  MockApiClient.addMockResponse({
+    url: '/broadcasts/',
+    method: 'PUT',
+  });
+  MockApiClient.addMockResponse({
+    url: `/organizations/${orgSlug}/broadcasts/`,
+    body: broadcastsResponse ?? [],
+  });
+}
+
+describe('Broadcasts', function () {
+  const organization = OrganizationFixture({features: ['what-is-new-revamp']});
+
+  it('renders empty state', async function () {
+    renderMockRequests({orgSlug: organization.slug});
+
+    render(
+      <Broadcasts
+        orientation="left"
+        collapsed={false}
+        currentPanel={SidebarPanelKey.BROADCASTS}
+        onShowPanel={() => jest.fn()}
+        hidePanel={jest.fn()}
+        organization={organization}
+      />
+    );
+
+    expect(await screen.findByText(/No recent updates/)).toBeInTheDocument();
+  });
+
+  it('renders item with media', async function () {
+    renderMockRequests({
+      orgSlug: organization.slug,
+      broadcastsResponse: [BroadcastFixture({category: 'blog post'})],
+    });
+
+    render(
+      <Broadcasts
+        orientation="left"
+        collapsed={false}
+        currentPanel={SidebarPanelKey.BROADCASTS}
+        onShowPanel={() => jest.fn()}
+        hidePanel={jest.fn()}
+        organization={organization}
+      />
+    );
+
+    expect(await screen.findByText('Learn about Source Maps')).toBeInTheDocument();
+    expect(screen.getByText('blog post')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('img', {name: 'Learn about Source Maps'}));
+    expect(trackAnalytics).toHaveBeenCalledWith(
+      'whats_new.link_clicked',
+      expect.objectContaining({
+        title: 'Learn about Source Maps',
+        category: 'blog post',
+      })
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'cta_text'}));
+    expect(trackAnalytics).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
index dbda05dba3c5bc..9c1d1cc3f7058e 100644
--- a/static/app/components/sidebar/broadcasts.tsx
+++ b/static/app/components/sidebar/broadcasts.tsx
@@ -161,7 +161,7 @@ class Broadcasts extends Component<Props, State> {
                     title={item.title}
                     message={item.message}
                     link={item.link}
-                    cta={item.cta}
+                    ctaText={item.cta}
                     mediaUrl={item.mediaUrl}
                     category={item.category}
                   />
@@ -174,7 +174,7 @@ class Broadcasts extends Component<Props, State> {
                     title={item.title}
                     message={item.message}
                     link={item.link}
-                    cta={item.cta}
+                    ctaText={item.cta}
                   />
                 ))
               )}
diff --git a/static/app/components/sidebar/sidebarPanelItem.tsx b/static/app/components/sidebar/sidebarPanelItem.tsx
index aeac09fc90b912..b0e66837d679ab 100644
--- a/static/app/components/sidebar/sidebarPanelItem.tsx
+++ b/static/app/components/sidebar/sidebarPanelItem.tsx
@@ -9,12 +9,13 @@ import useOrganization from 'sentry/utils/useOrganization';
 
 interface SidebarPanelItemProps
   extends Partial<
-    Pick<Broadcast, 'cta' | 'link' | 'category' | 'title' | 'hasSeen' | 'message'>
+    Pick<Broadcast, 'link' | 'category' | 'title' | 'hasSeen' | 'message'>
   > {
   /**
    * Content rendered instead the panel item
    */
   children?: React.ReactNode;
+  ctaText?: string;
 }
 
 function SidebarPanelItem({
@@ -22,7 +23,7 @@ function SidebarPanelItem({
   title,
   message,
   link,
-  cta,
+  ctaText,
   children,
 }: SidebarPanelItemProps) {
   const organization = useOrganization();
@@ -44,7 +45,7 @@ function SidebarPanelItem({
               trackAnalytics('whats_new.link_clicked', {organization, title});
             }}
           >
-            {cta || t('Read More')}
+            {ctaText || t('Read More')}
           </ExternalLink>
         </Text>
       )}
@@ -69,7 +70,7 @@ const Title = styled('div')<Pick<SidebarPanelItemProps, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSizeLarge};
   margin-bottom: ${space(1)};
   color: ${p => p.theme.textColor};
-  ${p => !p.hasSeen && 'font-weight: ${p => p.theme.fontWeightBold};'};
+  ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold};`};
 
   .culprit {
     font-weight: ${p => p.theme.fontWeightNormal};

From 01451b92f9e139efaa7a86a12fec46f3a055ebba Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 3 Sep 2024 16:26:44 +0200
Subject: [PATCH 05/17] remove ;

---
 static/app/components/sidebar/broadcastPanelItem.tsx | 2 +-
 static/app/components/sidebar/sidebarPanelItem.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
index fd4a844b9ddde4..732ff73bedbf3f 100644
--- a/static/app/components/sidebar/broadcastPanelItem.tsx
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -103,7 +103,7 @@ const TitleWrapper = styled('div')`
 const Title = styled('div')<Pick<BroadcastPanelItemProps, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSizeLarge};
   color: ${p => p.theme.textColor};
-  ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold};`};
+  ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold}`};
 `;
 
 const Message = styled('div')`
diff --git a/static/app/components/sidebar/sidebarPanelItem.tsx b/static/app/components/sidebar/sidebarPanelItem.tsx
index b0e66837d679ab..4ed67e9fe0d305 100644
--- a/static/app/components/sidebar/sidebarPanelItem.tsx
+++ b/static/app/components/sidebar/sidebarPanelItem.tsx
@@ -70,7 +70,7 @@ const Title = styled('div')<Pick<SidebarPanelItemProps, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSizeLarge};
   margin-bottom: ${space(1)};
   color: ${p => p.theme.textColor};
-  ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold};`};
+  ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold}`};
 
   .culprit {
     font-weight: ${p => p.theme.fontWeightNormal};

From f6e4b7bbc7329838d00236dddd1e8ec89c71023f Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 4 Sep 2024 13:31:51 +0200
Subject: [PATCH 06/17] fix types

---
 static/app/components/sidebar/broadcasts.spec.tsx   | 4 ++--
 static/app/types/system.tsx                         | 8 ++++----
 static/app/utils/analytics/issueAnalyticsEvents.tsx | 2 +-
 tests/js/fixtures/broadcast.ts                      | 1 +
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/static/app/components/sidebar/broadcasts.spec.tsx b/static/app/components/sidebar/broadcasts.spec.tsx
index 6db761a6a3591d..89d23b66ee1473 100644
--- a/static/app/components/sidebar/broadcasts.spec.tsx
+++ b/static/app/components/sidebar/broadcasts.spec.tsx
@@ -50,7 +50,7 @@ describe('Broadcasts', function () {
   it('renders item with media', async function () {
     renderMockRequests({
       orgSlug: organization.slug,
-      broadcastsResponse: [BroadcastFixture({category: 'blog post'})],
+      broadcastsResponse: [BroadcastFixture({category: 'blog'})],
     });
 
     render(
@@ -72,7 +72,7 @@ describe('Broadcasts', function () {
       'whats_new.link_clicked',
       expect.objectContaining({
         title: 'Learn about Source Maps',
-        category: 'blog post',
+        category: 'blog',
       })
     );
 
diff --git a/static/app/types/system.tsx b/static/app/types/system.tsx
index c91b4e6da1a589..40548b5acf5017 100644
--- a/static/app/types/system.tsx
+++ b/static/app/types/system.tsx
@@ -229,6 +229,10 @@ export type PipelineInitialData = {
 };
 
 export interface Broadcast {
+  /**
+   * Category of the broadcast. Synced with https://github.com/getsentry/getsentry/blob/2cca46d04865d13be49807ecbb3b73ef93e09ccd/static/getsentry/gsApp/utils/broadcasts.tsx#L38
+   */
+  category: 'announcement' | 'feature' | 'blog' | 'event' | 'video';
   /**
    * The text for the CTA link at the bottom of the panel item
    */
@@ -254,10 +258,6 @@ export interface Broadcast {
    */
   message: string;
   title: string;
-  /**
-   * Category of the broadcast
-   */
-  category?: string;
 }
 
 // XXX(epurkhiser): The components list can be generated using jq
diff --git a/static/app/utils/analytics/issueAnalyticsEvents.tsx b/static/app/utils/analytics/issueAnalyticsEvents.tsx
index 1801828b334a95..bd005faf8e1467 100644
--- a/static/app/utils/analytics/issueAnalyticsEvents.tsx
+++ b/static/app/utils/analytics/issueAnalyticsEvents.tsx
@@ -297,7 +297,7 @@ export type IssueEventParameters = {
   'tag.clicked': {
     is_clickable: boolean;
   };
-  'whats_new.link_clicked': Pick<Broadcast, 'title' | 'category'>;
+  'whats_new.link_clicked': Partial<Pick<Broadcast, 'title' | 'category'>>;
 };
 
 export type IssueEventKey = keyof IssueEventParameters;
diff --git a/tests/js/fixtures/broadcast.ts b/tests/js/fixtures/broadcast.ts
index e167603248615c..bbfe9dca38c0f9 100644
--- a/tests/js/fixtures/broadcast.ts
+++ b/tests/js/fixtures/broadcast.ts
@@ -13,6 +13,7 @@ export function BroadcastFixture(params: Partial<Broadcast> = {}): Broadcast {
       'Source maps are JSON files that contain information on how to map your transpiled source code back to their original source.',
     title: 'Learn about Source Maps',
     mediaUrl: 'https://images.ctfassets.net/em6l9zw4tzag/2vWdw7ZaApWxygugalbyOC/285525e5b7c9fbfa8fb814a69ab214cd/PerformancePageSketches_hero.jpg?w=2520&h=945&q=50&fm=webp',
+    category: 'feature',
     ...params,
   };
 }

From 108efa8ce79d9952fa6dd857cf32bc11bcf85cd8 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 4 Sep 2024 14:41:40 +0200
Subject: [PATCH 07/17] fix test

---
 static/app/components/sidebar/broadcastPanelItem.tsx | 11 ++++++++++-
 static/app/components/sidebar/broadcasts.spec.tsx    |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
index 732ff73bedbf3f..be24b43edf191f 100644
--- a/static/app/components/sidebar/broadcastPanelItem.tsx
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -4,11 +4,20 @@ import styled from '@emotion/styled';
 import Badge from 'sentry/components/badge/badge';
 import {LinkButton} from 'sentry/components/button';
 import ExternalLink from 'sentry/components/links/externalLink';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Broadcast} from 'sentry/types/system';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 
+const CATEGORIES: Record<Broadcast['category'], string> = {
+  announcement: t('Announcement'),
+  feature: t('New Feature'),
+  blog: t('Blog Post'),
+  event: t('Event'),
+  video: t('Video'),
+};
+
 interface BroadcastPanelItemProps
   extends Pick<
     Broadcast,
@@ -36,7 +45,7 @@ export function BroadcastPanelItem({
     <SidebarPanelItemRoot>
       <TitleWrapper>
         <Title hasSeen={hasSeen}>{title}</Title>
-        {category && <Badge type={!hasSeen ? 'new' : 'default'}>{category}</Badge>}
+        <Badge type={!hasSeen ? 'new' : 'default'}>{CATEGORIES[category]}</Badge>
       </TitleWrapper>
 
       {mediaUrl && (
diff --git a/static/app/components/sidebar/broadcasts.spec.tsx b/static/app/components/sidebar/broadcasts.spec.tsx
index 89d23b66ee1473..6e62ead5274b47 100644
--- a/static/app/components/sidebar/broadcasts.spec.tsx
+++ b/static/app/components/sidebar/broadcasts.spec.tsx
@@ -65,7 +65,7 @@ describe('Broadcasts', function () {
     );
 
     expect(await screen.findByText('Learn about Source Maps')).toBeInTheDocument();
-    expect(screen.getByText('blog post')).toBeInTheDocument();
+    expect(screen.getByText(/blog post/i)).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('img', {name: 'Learn about Source Maps'}));
     expect(trackAnalytics).toHaveBeenCalledWith(

From 65f0381a29d2fa80c4e81ae7f4afe47b33d090d1 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 4 Sep 2024 14:46:11 +0200
Subject: [PATCH 08/17] imageURL is required

---
 .../components/sidebar/broadcastPanelItem.tsx | 37 +++----------------
 1 file changed, 6 insertions(+), 31 deletions(-)

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
index be24b43edf191f..260fe39f21bb3d 100644
--- a/static/app/components/sidebar/broadcastPanelItem.tsx
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -47,18 +47,15 @@ export function BroadcastPanelItem({
         <Title hasSeen={hasSeen}>{title}</Title>
         <Badge type={!hasSeen ? 'new' : 'default'}>{CATEGORIES[category]}</Badge>
       </TitleWrapper>
-
-      {mediaUrl && (
-        <Image
-          mediaUrl={mediaUrl}
-          link={link}
-          title={title}
+      <ExternalLink href={link}>
+        <img
+          src={mediaUrl}
+          alt={title}
+          style={{maxWidth: '100%', marginBottom: space(1)}}
           onClick={handlePanelClicked}
         />
-      )}
-
+      </ExternalLink>
       <Message>{message}</Message>
-
       <LinkButton
         external
         href={link}
@@ -71,28 +68,6 @@ export function BroadcastPanelItem({
   );
 }
 
-function Image({
-  mediaUrl,
-  link,
-  title,
-  onClick,
-}: Pick<BroadcastPanelItemProps, 'mediaUrl' | 'link' | 'title'> & {onClick: () => void}) {
-  const image = (
-    <img
-      src={mediaUrl}
-      alt={title}
-      style={{maxWidth: '100%', marginBottom: space(1)}}
-      onClick={onClick}
-    />
-  );
-
-  if (link) {
-    return <ExternalLink href={link}>{image}</ExternalLink>;
-  }
-
-  return image;
-}
-
 const SidebarPanelItemRoot = styled('div')`
   line-height: 1.5;
   background: ${p => p.theme.background};

From 7dbbef6ba5e2aa8bde590a945431b03c9210d0a5 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 5 Sep 2024 11:30:34 +0200
Subject: [PATCH 09/17] make props optional

---
 .../components/sidebar/broadcastPanelItem.tsx | 24 +++++++++++--------
 static/app/types/system.tsx                   | 16 ++++++-------
 .../utils/analytics/issueAnalyticsEvents.tsx  |  3 ++-
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
index 260fe39f21bb3d..a0a7d28e69c401 100644
--- a/static/app/components/sidebar/broadcastPanelItem.tsx
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -10,7 +10,7 @@ import type {Broadcast} from 'sentry/types/system';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 
-const CATEGORIES: Record<Broadcast['category'], string> = {
+const CATEGORIES: Record<NonNullable<Broadcast['category']>, string> = {
   announcement: t('Announcement'),
   feature: t('New Feature'),
   blog: t('Blog Post'),
@@ -45,16 +45,20 @@ export function BroadcastPanelItem({
     <SidebarPanelItemRoot>
       <TitleWrapper>
         <Title hasSeen={hasSeen}>{title}</Title>
-        <Badge type={!hasSeen ? 'new' : 'default'}>{CATEGORIES[category]}</Badge>
+        {category && (
+          <Badge type={!hasSeen ? 'new' : 'default'}>{CATEGORIES[category]}</Badge>
+        )}
       </TitleWrapper>
-      <ExternalLink href={link}>
-        <img
-          src={mediaUrl}
-          alt={title}
-          style={{maxWidth: '100%', marginBottom: space(1)}}
-          onClick={handlePanelClicked}
-        />
-      </ExternalLink>
+      {mediaUrl && (
+        <ExternalLink href={link}>
+          <img
+            src={mediaUrl}
+            alt={title}
+            style={{maxWidth: '100%', marginBottom: space(1)}}
+            onClick={handlePanelClicked}
+          />
+        </ExternalLink>
+      )}
       <Message>{message}</Message>
       <LinkButton
         external
diff --git a/static/app/types/system.tsx b/static/app/types/system.tsx
index 40548b5acf5017..f048d60ee29832 100644
--- a/static/app/types/system.tsx
+++ b/static/app/types/system.tsx
@@ -229,10 +229,6 @@ export type PipelineInitialData = {
 };
 
 export interface Broadcast {
-  /**
-   * Category of the broadcast. Synced with https://github.com/getsentry/getsentry/blob/2cca46d04865d13be49807ecbb3b73ef93e09ccd/static/getsentry/gsApp/utils/broadcasts.tsx#L38
-   */
-  category: 'announcement' | 'feature' | 'blog' | 'event' | 'video';
   /**
    * The text for the CTA link at the bottom of the panel item
    */
@@ -249,15 +245,19 @@ export interface Broadcast {
    * The URL to use for the CTA
    */
   link: string;
-  /**
-   * Image url
-   */
-  mediaUrl: string;
   /**
    * A message with muted styling which appears above the children content
    */
   message: string;
   title: string;
+  /**
+   * Category of the broadcast. Synced with https://github.com/getsentry/getsentry/blob/2cca46d04865d13be49807ecbb3b73ef93e09ccd/static/getsentry/gsApp/utils/broadcasts.tsx#L38
+   */
+  category?: 'announcement' | 'feature' | 'blog' | 'event' | 'video';
+  /**
+   * Image url
+   */
+  mediaUrl?: string;
 }
 
 // XXX(epurkhiser): The components list can be generated using jq
diff --git a/static/app/utils/analytics/issueAnalyticsEvents.tsx b/static/app/utils/analytics/issueAnalyticsEvents.tsx
index bd005faf8e1467..51fd97cd33afad 100644
--- a/static/app/utils/analytics/issueAnalyticsEvents.tsx
+++ b/static/app/utils/analytics/issueAnalyticsEvents.tsx
@@ -297,7 +297,8 @@ export type IssueEventParameters = {
   'tag.clicked': {
     is_clickable: boolean;
   };
-  'whats_new.link_clicked': Partial<Pick<Broadcast, 'title' | 'category'>>;
+  'whats_new.link_clicked': Pick<Broadcast, 'title'> &
+    Partial<Pick<Broadcast, 'category'>>;
 };
 
 export type IssueEventKey = keyof IssueEventParameters;

From dd7a5085206492a7423007ccd250042f1f260e7e Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 5 Sep 2024 11:34:35 +0200
Subject: [PATCH 10/17] update test

---
 .../components/sidebar/broadcasts.spec.tsx    | 33 ++++++++++++++++++-
 tests/js/fixtures/broadcast.ts                |  2 --
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/static/app/components/sidebar/broadcasts.spec.tsx b/static/app/components/sidebar/broadcasts.spec.tsx
index 6e62ead5274b47..ad1208e5b0f5c8 100644
--- a/static/app/components/sidebar/broadcasts.spec.tsx
+++ b/static/app/components/sidebar/broadcasts.spec.tsx
@@ -50,7 +50,13 @@ describe('Broadcasts', function () {
   it('renders item with media', async function () {
     renderMockRequests({
       orgSlug: organization.slug,
-      broadcastsResponse: [BroadcastFixture({category: 'blog'})],
+      broadcastsResponse: [
+        BroadcastFixture({
+          mediaUrl:
+            'https://images.ctfassets.net/em6l9zw4tzag/2vWdw7ZaApWxygugalbyOC/285525e5b7c9fbfa8fb814a69ab214cd/PerformancePageSketches_hero.jpg?w=2520&h=945&q=50&fm=webp',
+          category: 'blog',
+        }),
+      ],
     });
 
     render(
@@ -79,4 +85,29 @@ describe('Broadcasts', function () {
     await userEvent.click(screen.getByRole('button', {name: 'cta_text'}));
     expect(trackAnalytics).toHaveBeenCalledTimes(2);
   });
+
+  it('renders old experience', async function () {
+    renderMockRequests({
+      orgSlug: organization.slug,
+      broadcastsResponse: [BroadcastFixture()],
+    });
+
+    render(
+      <Broadcasts
+        orientation="left"
+        collapsed={false}
+        currentPanel={SidebarPanelKey.BROADCASTS}
+        onShowPanel={() => jest.fn()}
+        hidePanel={jest.fn()}
+        organization={organization}
+      />
+    );
+
+    expect(await screen.findByText('Learn about Source Maps')).toBeInTheDocument();
+
+    expect(screen.queryByText(/blog post/i)).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('img', {name: 'Learn about Source Maps'})
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/tests/js/fixtures/broadcast.ts b/tests/js/fixtures/broadcast.ts
index bbfe9dca38c0f9..b6204a8b714a1a 100644
--- a/tests/js/fixtures/broadcast.ts
+++ b/tests/js/fixtures/broadcast.ts
@@ -12,8 +12,6 @@ export function BroadcastFixture(params: Partial<Broadcast> = {}): Broadcast {
     message:
       'Source maps are JSON files that contain information on how to map your transpiled source code back to their original source.',
     title: 'Learn about Source Maps',
-    mediaUrl: 'https://images.ctfassets.net/em6l9zw4tzag/2vWdw7ZaApWxygugalbyOC/285525e5b7c9fbfa8fb814a69ab214cd/PerformancePageSketches_hero.jpg?w=2520&h=945&q=50&fm=webp',
-    category: 'feature',
     ...params,
   };
 }

From 2f1422f4b765a2c4cad36ee13258819f51b67ff5 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 5 Sep 2024 11:40:56 +0200
Subject: [PATCH 11/17] Update static/app/components/sidebar/broadcasts.tsx

---
 static/app/components/sidebar/broadcasts.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
index 9c1d1cc3f7058e..4f3e4ebeab9533 100644
--- a/static/app/components/sidebar/broadcasts.tsx
+++ b/static/app/components/sidebar/broadcasts.tsx
@@ -29,7 +29,6 @@ type Props = CommonSidebarProps & {
 
 type State = {
   broadcasts: Broadcast[];
-
   error: boolean;
   loading: boolean;
 };

From 407d12dd44a58346996433400fc288aff17ea74d Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 5 Sep 2024 11:43:12 +0200
Subject: [PATCH 12/17] revert sidebarpanel

---
 .../components/sidebar/sidebarPanelItem.tsx   | 57 ++++++++++++++-----
 1 file changed, 44 insertions(+), 13 deletions(-)

diff --git a/static/app/components/sidebar/sidebarPanelItem.tsx b/static/app/components/sidebar/sidebarPanelItem.tsx
index 4ed67e9fe0d305..12583ffced932b 100644
--- a/static/app/components/sidebar/sidebarPanelItem.tsx
+++ b/static/app/components/sidebar/sidebarPanelItem.tsx
@@ -3,33 +3,58 @@ import styled from '@emotion/styled';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Broadcast} from 'sentry/types/system';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 
-interface SidebarPanelItemProps
-  extends Partial<
-    Pick<Broadcast, 'link' | 'category' | 'title' | 'hasSeen' | 'message'>
-  > {
+type Props = {
   /**
    * Content rendered instead the panel item
    */
   children?: React.ReactNode;
-  ctaText?: string;
-}
+  /**
+   * The text for the CTA link at the bottom of the panel item
+   */
+  cta?: string;
+  /**
+   * Has the item been seen? affects the styling of the panel item
+   */
+  hasSeen?: boolean;
+  /**
+   * The URL to use for the CTA
+   */
+  link?: string;
+  /**
+   * A message with muted styling which appears above the children content
+   */
+  message?: React.ReactNode;
+  /**
+   * The title of the sidebar item
+   */
+  title?: string;
+  /**
+   * Actions to the right of the title
+   */
+  titleAction?: React.ReactNode;
+};
 
 function SidebarPanelItem({
   hasSeen,
   title,
   message,
   link,
-  ctaText,
+  cta,
+  titleAction,
   children,
-}: SidebarPanelItemProps) {
+}: Props) {
   const organization = useOrganization();
   return (
     <SidebarPanelItemRoot>
-      {title && <Title hasSeen={hasSeen}>{title}</Title>}
+      {title && (
+        <TitleWrapper>
+          <Title hasSeen={hasSeen}>{title}</Title>
+          {titleAction}
+        </TitleWrapper>
+      )}
       {message && <Message>{message}</Message>}
 
       {children}
@@ -45,7 +70,7 @@ function SidebarPanelItem({
               trackAnalytics('whats_new.link_clicked', {organization, title});
             }}
           >
-            {ctaText || t('Read More')}
+            {cta || t('Read More')}
           </ExternalLink>
         </Text>
       )}
@@ -66,11 +91,17 @@ const SidebarPanelItemRoot = styled('div')`
   }
 `;
 
-const Title = styled('div')<Pick<SidebarPanelItemProps, 'hasSeen'>>`
+const TitleWrapper = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  gap: ${space(1)};
+`;
+
+const Title = styled('div')<Pick<Props, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSizeLarge};
   margin-bottom: ${space(1)};
   color: ${p => p.theme.textColor};
-  ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold}`};
+  ${p => !p.hasSeen && 'font-weight: ${p => p.theme.fontWeightBold};'};
 
   .culprit {
     font-weight: ${p => p.theme.fontWeightNormal};

From deaa5c175eb701b909e323b1b08cb428967032f1 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 5 Sep 2024 11:43:52 +0200
Subject: [PATCH 13/17] fix prop

---
 static/app/components/sidebar/broadcasts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
index 4f3e4ebeab9533..2daf57a51297cc 100644
--- a/static/app/components/sidebar/broadcasts.tsx
+++ b/static/app/components/sidebar/broadcasts.tsx
@@ -173,7 +173,7 @@ class Broadcasts extends Component<Props, State> {
                     title={item.title}
                     message={item.message}
                     link={item.link}
-                    ctaText={item.cta}
+                    cta={item.cta}
                   />
                 ))
               )}

From 4442ed58698a589122ea61372f0811eb1b3ebd9c Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 5 Sep 2024 22:59:34 +0200
Subject: [PATCH 14/17] implemented new styles

---
 .../components/sidebar/broadcastPanelItem.tsx | 83 ++++++++++---------
 .../components/sidebar/broadcasts.spec.tsx    | 57 ++++++-------
 static/app/components/sidebar/broadcasts.tsx  |  1 -
 static/app/types/system.tsx                   |  8 +-
 4 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/static/app/components/sidebar/broadcastPanelItem.tsx b/static/app/components/sidebar/broadcastPanelItem.tsx
index a0a7d28e69c401..1568fde2f7497b 100644
--- a/static/app/components/sidebar/broadcastPanelItem.tsx
+++ b/static/app/components/sidebar/broadcastPanelItem.tsx
@@ -2,7 +2,7 @@ import {useCallback} from 'react';
 import styled from '@emotion/styled';
 
 import Badge from 'sentry/components/badge/badge';
-import {LinkButton} from 'sentry/components/button';
+import Tag from 'sentry/components/badge/tag';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -10,7 +10,7 @@ import type {Broadcast} from 'sentry/types/system';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 
-const CATEGORIES: Record<NonNullable<Broadcast['category']>, string> = {
+export const BROADCAST_CATEGORIES: Record<NonNullable<Broadcast['category']>, string> = {
   announcement: t('Announcement'),
   feature: t('New Feature'),
   blog: t('Blog Post'),
@@ -22,16 +22,13 @@ interface BroadcastPanelItemProps
   extends Pick<
     Broadcast,
     'hasSeen' | 'category' | 'title' | 'message' | 'link' | 'mediaUrl'
-  > {
-  ctaText: string;
-}
+  > {}
 
 export function BroadcastPanelItem({
   hasSeen,
   title,
   message,
   link,
-  ctaText,
   mediaUrl,
   category,
 }: BroadcastPanelItemProps) {
@@ -43,31 +40,19 @@ export function BroadcastPanelItem({
 
   return (
     <SidebarPanelItemRoot>
-      <TitleWrapper>
-        <Title hasSeen={hasSeen}>{title}</Title>
-        {category && (
-          <Badge type={!hasSeen ? 'new' : 'default'}>{CATEGORIES[category]}</Badge>
-        )}
-      </TitleWrapper>
-      {mediaUrl && (
-        <ExternalLink href={link}>
-          <img
-            src={mediaUrl}
-            alt={title}
-            style={{maxWidth: '100%', marginBottom: space(1)}}
-            onClick={handlePanelClicked}
-          />
-        </ExternalLink>
-      )}
-      <Message>{message}</Message>
-      <LinkButton
-        external
-        href={link}
-        onClick={handlePanelClicked}
-        style={{marginTop: space(1)}}
-      >
-        {ctaText}
-      </LinkButton>
+      <TextBlock>
+        {category &&
+          (hasSeen ? (
+            <CategoryTag>{BROADCAST_CATEGORIES[category]}</CategoryTag>
+          ) : (
+            <CategoryBadge type="new">{BROADCAST_CATEGORIES[category]}</CategoryBadge>
+          ))}
+        <Title hasSeen={hasSeen} href={link} onClick={handlePanelClicked}>
+          {title}
+        </Title>
+        <Message>{message}</Message>
+      </TextBlock>
+      {mediaUrl && <Media src={mediaUrl} alt={title} />}
     </SidebarPanelItemRoot>
   );
 }
@@ -75,25 +60,41 @@ export function BroadcastPanelItem({
 const SidebarPanelItemRoot = styled('div')`
   line-height: 1.5;
   background: ${p => p.theme.background};
-  padding: ${space(3)};
+  margin: 0 ${space(3)};
+  padding: ${space(2)} 0;
 
   :not(:first-child) {
-    border-top: 1px solid ${p => p.theme.innerBorder};
+    border-top: 1px solid ${p => p.theme.border};
   }
 `;
 
-const TitleWrapper = styled('div')`
-  display: grid;
-  grid-template-columns: 1fr max-content;
-  margin-bottom: ${space(1)};
-`;
-
-const Title = styled('div')<Pick<BroadcastPanelItemProps, 'hasSeen'>>`
+const Title = styled(ExternalLink)<Pick<BroadcastPanelItemProps, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSizeLarge};
-  color: ${p => p.theme.textColor};
+  color: ${p => p.theme.blue400};
   ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold}`};
 `;
 
 const Message = styled('div')`
   color: ${p => p.theme.subText};
 `;
+
+const TextBlock = styled('div')`
+  margin-bottom: ${space(1.5)};
+  display: flex;
+  flex-direction: column;
+`;
+
+const Media = styled('img')`
+  border-radius: ${p => p.theme.borderRadius};
+  border: 1px solid ${p => p.theme.translucentGray200};
+  max-width: 100%;
+`;
+
+const CategoryTag = styled(Tag)`
+  margin-bottom: ${space(1)};
+`;
+
+const CategoryBadge = styled(Badge)`
+  margin-left: 0;
+  margin-bottom: ${space(1)};
+`;
diff --git a/static/app/components/sidebar/broadcasts.spec.tsx b/static/app/components/sidebar/broadcasts.spec.tsx
index ad1208e5b0f5c8..de3710dd04c527 100644
--- a/static/app/components/sidebar/broadcasts.spec.tsx
+++ b/static/app/components/sidebar/broadcasts.spec.tsx
@@ -3,6 +3,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
+import {BROADCAST_CATEGORIES} from 'sentry/components/sidebar/broadcastPanelItem';
 import Broadcasts from 'sentry/components/sidebar/broadcasts';
 import {SidebarPanelKey} from 'sentry/components/sidebar/types';
 import type {Broadcast} from 'sentry/types/system';
@@ -28,9 +29,11 @@ function renderMockRequests({
 }
 
 describe('Broadcasts', function () {
-  const organization = OrganizationFixture({features: ['what-is-new-revamp']});
+  const category = 'blog';
 
   it('renders empty state', async function () {
+    const organization = OrganizationFixture();
+
     renderMockRequests({orgSlug: organization.slug});
 
     render(
@@ -47,18 +50,16 @@ describe('Broadcasts', function () {
     expect(await screen.findByText(/No recent updates/)).toBeInTheDocument();
   });
 
-  it('renders item with media', async function () {
-    renderMockRequests({
-      orgSlug: organization.slug,
-      broadcastsResponse: [
-        BroadcastFixture({
-          mediaUrl:
-            'https://images.ctfassets.net/em6l9zw4tzag/2vWdw7ZaApWxygugalbyOC/285525e5b7c9fbfa8fb814a69ab214cd/PerformancePageSketches_hero.jpg?w=2520&h=945&q=50&fm=webp',
-          category: 'blog',
-        }),
-      ],
+  it('renders a broadcast item with media content correctly', async function () {
+    const organization = OrganizationFixture({features: ['what-is-new-revamp']});
+    const broadcast = BroadcastFixture({
+      mediaUrl:
+        'https://images.ctfassets.net/em6l9zw4tzag/2vWdw7ZaApWxygugalbyOC/285525e5b7c9fbfa8fb814a69ab214cd/PerformancePageSketches_hero.jpg?w=2520&h=945&q=50&fm=webp',
+      category,
     });
 
+    renderMockRequests({orgSlug: organization.slug, broadcastsResponse: [broadcast]});
+
     render(
       <Broadcasts
         orientation="left"
@@ -70,27 +71,28 @@ describe('Broadcasts', function () {
       />
     );
 
-    expect(await screen.findByText('Learn about Source Maps')).toBeInTheDocument();
-    expect(screen.getByText(/blog post/i)).toBeInTheDocument();
+    // Verify that the broadcast content is rendered correctly
+    expect(await screen.findByText(BROADCAST_CATEGORIES[category])).toBeInTheDocument();
+    const titleLink = screen.getByRole('link', {name: broadcast.title});
+    expect(titleLink).toHaveAttribute('href', broadcast.link);
+    expect(screen.getByText(/Source maps are JSON/)).toBeInTheDocument();
 
-    await userEvent.click(screen.getByRole('img', {name: 'Learn about Source Maps'}));
+    // Simulate click and check if analytics tracking is called
+    await userEvent.click(titleLink);
     expect(trackAnalytics).toHaveBeenCalledWith(
       'whats_new.link_clicked',
       expect.objectContaining({
-        title: 'Learn about Source Maps',
-        category: 'blog',
+        title: broadcast.title,
+        category,
       })
     );
-
-    await userEvent.click(screen.getByRole('button', {name: 'cta_text'}));
-    expect(trackAnalytics).toHaveBeenCalledTimes(2);
   });
 
-  it('renders old experience', async function () {
-    renderMockRequests({
-      orgSlug: organization.slug,
-      broadcastsResponse: [BroadcastFixture()],
-    });
+  it('renders deprecated broadcast experience', async function () {
+    const organization = OrganizationFixture();
+    const broadcast = BroadcastFixture();
+
+    renderMockRequests({orgSlug: organization.slug, broadcastsResponse: [broadcast]});
 
     render(
       <Broadcasts
@@ -103,11 +105,6 @@ describe('Broadcasts', function () {
       />
     );
 
-    expect(await screen.findByText('Learn about Source Maps')).toBeInTheDocument();
-
-    expect(screen.queryByText(/blog post/i)).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('img', {name: 'Learn about Source Maps'})
-    ).not.toBeInTheDocument();
+    expect(await screen.findByRole('link', {name: broadcast.cta})).toBeInTheDocument();
   });
 });
diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
index 2daf57a51297cc..490012404e1eed 100644
--- a/static/app/components/sidebar/broadcasts.tsx
+++ b/static/app/components/sidebar/broadcasts.tsx
@@ -160,7 +160,6 @@ class Broadcasts extends Component<Props, State> {
                     title={item.title}
                     message={item.message}
                     link={item.link}
-                    ctaText={item.cta}
                     mediaUrl={item.mediaUrl}
                     category={item.category}
                   />
diff --git a/static/app/types/system.tsx b/static/app/types/system.tsx
index f048d60ee29832..a3e0cef7ba2d1c 100644
--- a/static/app/types/system.tsx
+++ b/static/app/types/system.tsx
@@ -229,10 +229,6 @@ export type PipelineInitialData = {
 };
 
 export interface Broadcast {
-  /**
-   * The text for the CTA link at the bottom of the panel item
-   */
-  cta: string;
   dateCreated: string;
   dateExpires: string;
   /**
@@ -254,6 +250,10 @@ export interface Broadcast {
    * Category of the broadcast. Synced with https://github.com/getsentry/getsentry/blob/2cca46d04865d13be49807ecbb3b73ef93e09ccd/static/getsentry/gsApp/utils/broadcasts.tsx#L38
    */
   category?: 'announcement' | 'feature' | 'blog' | 'event' | 'video';
+  /**
+   * The text for the CTA link at the bottom of the panel item
+   */
+  cta?: string;
   /**
    * Image url
    */

From 5a0586a7d2aedebfd86e66e7dbee55f23e646afd Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 5 Sep 2024 23:09:01 +0200
Subject: [PATCH 15/17] update comment

---
 static/app/types/system.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/app/types/system.tsx b/static/app/types/system.tsx
index a3e0cef7ba2d1c..e74482fb6fa115 100644
--- a/static/app/types/system.tsx
+++ b/static/app/types/system.tsx
@@ -247,7 +247,8 @@ export interface Broadcast {
   message: string;
   title: string;
   /**
-   * Category of the broadcast. Synced with https://github.com/getsentry/getsentry/blob/2cca46d04865d13be49807ecbb3b73ef93e09ccd/static/getsentry/gsApp/utils/broadcasts.tsx#L38
+   * Category of the broadcast.
+   * Synced with https://github.com/getsentry/sentry/blob/923a65508912c3e181e1c70cbdf076b7b956aa90/src/sentry/models/broadcast.py#L14
    */
   category?: 'announcement' | 'feature' | 'blog' | 'event' | 'video';
   /**

From 74cf7d84680236fc9aaaaae44d28915a3c91d80e Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Fri, 6 Sep 2024 08:30:33 +0200
Subject: [PATCH 16/17] feedback

---
 static/app/components/sidebar/broadcasts.tsx | 3 +--
 static/app/components/sidebar/utils.tsx      | 5 -----
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/static/app/components/sidebar/broadcasts.tsx b/static/app/components/sidebar/broadcasts.tsx
index 490012404e1eed..bae0605da3570b 100644
--- a/static/app/components/sidebar/broadcasts.tsx
+++ b/static/app/components/sidebar/broadcasts.tsx
@@ -9,7 +9,6 @@ import SidebarItem from 'sentry/components/sidebar/sidebarItem';
 import SidebarPanel from 'sentry/components/sidebar/sidebarPanel';
 import SidebarPanelEmpty from 'sentry/components/sidebar/sidebarPanelEmpty';
 import SidebarPanelItem from 'sentry/components/sidebar/sidebarPanelItem';
-import {hasWhatIsNewRevampFeature} from 'sentry/components/sidebar/utils';
 import {IconBroadcast} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
@@ -121,7 +120,7 @@ class Broadcasts extends Component<Props, State> {
     const {broadcasts, loading} = this.state;
 
     const unseenPosts = this.unseenIds;
-    const whatIsNewRevampFeature = hasWhatIsNewRevampFeature(organization);
+    const whatIsNewRevampFeature = organization.features.includes('what-is-new-revamp');
 
     return (
       <DemoModeGate>
diff --git a/static/app/components/sidebar/utils.tsx b/static/app/components/sidebar/utils.tsx
index b38927bbc80169..693c2bfe9f7d92 100644
--- a/static/app/components/sidebar/utils.tsx
+++ b/static/app/components/sidebar/utils.tsx
@@ -1,5 +1,4 @@
 import type {OnboardingTaskStatus} from 'sentry/types/onboarding';
-import type {Organization} from 'sentry/types/organization';
 
 export const isDone = (task: OnboardingTaskStatus) =>
   task.status === 'complete' || task.status === 'skipped';
@@ -7,7 +6,3 @@ export const isDone = (task: OnboardingTaskStatus) =>
 // To be passed as the `source` parameter in router navigation state
 // e.g. {pathname: '/issues/', state: {source: `sidebar`}}
 export const SIDEBAR_NAVIGATION_SOURCE = 'sidebar';
-
-export function hasWhatIsNewRevampFeature(organization: Organization) {
-  return organization.features.includes('what-is-new-revamp');
-}

From 3129e464347b4e3c0f3064ef3a53a667e2cad474 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Fri, 6 Sep 2024 08:32:27 +0200
Subject: [PATCH 17/17] update comment

---
 static/app/types/system.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/types/system.tsx b/static/app/types/system.tsx
index e74482fb6fa115..3bd7c356d582e8 100644
--- a/static/app/types/system.tsx
+++ b/static/app/types/system.tsx
@@ -248,7 +248,7 @@ export interface Broadcast {
   title: string;
   /**
    * Category of the broadcast.
-   * Synced with https://github.com/getsentry/sentry/blob/923a65508912c3e181e1c70cbdf076b7b956aa90/src/sentry/models/broadcast.py#L14
+   * Synced with https://github.com/getsentry/sentry/blob/master/src/sentry/models/broadcast.py#L14
    */
   category?: 'announcement' | 'feature' | 'blog' | 'event' | 'video';
   /**