ref(whats-new): Revamp "Whats New" (#76818)

static/app/components/sidebar/broadcastPanelItem.tsx

@@ -0,0 +1,100 @@
+import {useCallback} from 'react';
+import styled from '@emotion/styled';
+
+import Badge from 'sentry/components/badge/badge';
+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';
+import type {Broadcast} from 'sentry/types/system';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export const BROADCAST_CATEGORIES: Record<NonNullable<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,
+ 'hasSeen' | 'category' | 'title' | 'message' | 'link' | 'mediaUrl'
+ > {}
+
+export function BroadcastPanelItem({
+ hasSeen,
+ title,
+ message,
+ link,
+ mediaUrl,
+ category,
+}: BroadcastPanelItemProps) {
+ const organization = useOrganization();
+
+ const handlePanelClicked = useCallback(() => {
+ trackAnalytics('whats_new.link_clicked', {organization, title, category});
+ }, [organization, title, category]);
+
+ return (
+ <SidebarPanelItemRoot>
+ <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>
+ );
+}
+
+const SidebarPanelItemRoot = styled('div')`
+ line-height: 1.5;
+ background: ${p => p.theme.background};
+ margin: 0 ${space(3)};
+ padding: ${space(2)} 0;
+
+ :not(:first-child) {
+ border-top: 1px solid ${p => p.theme.border};
+ }
+`;
+
+const Title = styled(ExternalLink)<Pick<BroadcastPanelItemProps, 'hasSeen'>>`
+ font-size: ${p => p.theme.fontSizeLarge};
+ 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)};
+`;

static/app/components/sidebar/broadcasts.spec.tsx

@@ -0,0 +1,110 @@
+import {BroadcastFixture} from 'sentry-fixture/broadcast';
+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';
+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 category = 'blog';
+
+ it('renders empty state', async function () {
+ const organization = OrganizationFixture();
+
+ 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 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"
+ collapsed={false}
+ currentPanel={SidebarPanelKey.BROADCASTS}
+ onShowPanel={() => jest.fn()}
+ hidePanel={jest.fn()}
+ organization={organization}
+ />
+ );
+
+ // 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();
+
+ // Simulate click and check if analytics tracking is called
+ await userEvent.click(titleLink);
+ expect(trackAnalytics).toHaveBeenCalledWith(
+ 'whats_new.link_clicked',
+ expect.objectContaining({
+ title: broadcast.title,
+ category,
+ })
+ );
+ });
+
+ it('renders deprecated broadcast experience', async function () {
+ const organization = OrganizationFixture();
+ const broadcast = BroadcastFixture();
+
+ renderMockRequests({orgSlug: organization.slug, broadcastsResponse: [broadcast]});
+
+ render(
+ <Broadcasts
+ orientation="left"
+ collapsed={false}
+ currentPanel={SidebarPanelKey.BROADCASTS}
+ onShowPanel={() => jest.fn()}
+ hidePanel={jest.fn()}
+ organization={organization}
+ />
+ );
+
+ expect(await screen.findByRole('link', {name: broadcast.cta})).toBeInTheDocument();
+ });
+});

static/app/components/sidebar/broadcasts.tsx

@@ -4,6 +4,7 @@ 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';
@@ -115,10 +116,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 = organization.features.includes('what-is-new-revamp');
 
  return (
  <DemoModeGate>
@@ -149,6 +151,18 @@ class Broadcasts extends Component<Props, State> {
  <SidebarPanelEmpty>
  {t('No recent updates from the Sentry team.')}
  </SidebarPanelEmpty>
+ ) : whatIsNewRevampFeature ? (
+ broadcasts.map(item => (
+ <BroadcastPanelItem
+ key={item.id}
+ hasSeen={item.hasSeen}
+ title={item.title}
+ message={item.message}
+ link={item.link}
+ mediaUrl={item.mediaUrl}
+ category={item.category}
+ />
+ ))
  ) : (
  broadcasts.map(item => (
  <SidebarPanelItem

static/app/components/sidebar/sidebarPanelItem.tsx

@@ -63,9 +63,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>

static/app/types/system.tsx

@@ -228,17 +228,38 @@ export type PipelineInitialData = {
  props: Record<string, any>;
 };
 
-export type Broadcast = {
- cta: string;
+export interface Broadcast {
  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;
+ /**
+ * 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/sentry/blob/master/src/sentry/models/broadcast.py#L14
+ */
+ category?: 'announcement' | 'feature' | 'blog' | 'event' | 'video';
+ /**
+ * The text for the CTA link at the bottom of the panel item
+ */
+ cta?: string;
+ /**
+ * Image url
+ */
+ mediaUrl?: string;
+}
 
 // XXX(epurkhiser): The components list can be generated using jq
 //

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,8 @@ export type IssueEventParameters = {
  'tag.clicked': {
  is_clickable: boolean;
  };
- 'whats_new.link_clicked': {title?: string};
+ 'whats_new.link_clicked': Pick<Broadcast, 'title'> &
+ Partial<Pick<Broadcast, 'category'>>;
 };
 
 export type IssueEventKey = keyof IssueEventParameters;