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

static/app/components/sidebar/broadcastPanelItem.tsx

@@ -0,0 +1,95 @@
+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';
+
+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,
+ 'hasSeen' | 'category' | 'title' | 'message' | 'link' | 'mediaUrl'
+ > {
+ ctaText: string;
+}
+
+export function BroadcastPanelItem({
+ hasSeen,
+ title,
+ message,
+ link,
+ ctaText,
+ mediaUrl,
+ category,
+}: BroadcastPanelItemProps) {
+ 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>
+ <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>
+ <Message>{message}</Message>
+ <LinkButton
+ external
+ href={link}
+ onClick={handlePanelClicked}
+ style={{marginTop: space(1)}}
+ >
+ {ctaText}
+ </LinkButton>
+ </SidebarPanelItemRoot>
+ );
+}
+
+const SidebarPanelItemRoot = styled('div')`
+ line-height: 1.5;
+ background: ${p => p.theme.background};
+ padding: ${space(3)};
+
+ :not(:first-child) {
+ border-top: 1px solid ${p => p.theme.innerBorder};
+ }
+`;
+
+const TitleWrapper = styled('div')`
+ 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};
+ color: ${p => p.theme.textColor};
+ ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold}`};
+`;
+
+const Message = styled('div')`
+ color: ${p => p.theme.subText};
+`;

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'})],
+ });
+
+ 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/i)).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',
+ })
+ );
+
+ await userEvent.click(screen.getByRole('button', {name: 'cta_text'}));
+ expect(trackAnalytics).toHaveBeenCalledTimes(2);
+ });
+});

static/app/components/sidebar/broadcasts.tsx

@@ -4,10 +4,12 @@ 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 {hasWhatIsNewRevampFeature} from 'sentry/components/sidebar/utils';
 import {IconBroadcast} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
@@ -27,6 +29,7 @@ type Props = CommonSidebarProps & {
 
 type State = {
  broadcasts: Broadcast[];
+
  error: boolean;
  loading: boolean;
 };
@@ -115,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>
@@ -149,6 +153,19 @@ 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}
+ ctaText={item.cta}
+ mediaUrl={item.mediaUrl}
+ category={item.category}
+ />
+ ))
  ) : (
  broadcasts.map(item => (
  <SidebarPanelItem
@@ -157,7 +174,7 @@ class Broadcasts extends Component<Props, State> {
  title={item.title}
  message={item.message}
  link={item.link}
- cta={item.cta}
+ ctaText={item.cta}
  />
  ))
  )}

static/app/components/sidebar/sidebarPanelItem.tsx

@@ -3,58 +3,33 @@ 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, '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;
-};
+ ctaText?: string;
+}
 
 function SidebarPanelItem({
  hasSeen,
  title,
  message,
  link,
- cta,
- titleAction,
+ ctaText,
  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,11 +38,14 @@ 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')}
+ {ctaText || t('Read More')}
  </ExternalLink>
  </Text>
  )}
@@ -88,17 +66,11 @@ 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};
- ${p => !p.hasSeen && 'font-weight: ${p => p.theme.fontWeightBold};'};
+ ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeightBold}`};
 
  .culprit {
  font-weight: ${p => p.theme.fontWeightNormal};

static/app/components/sidebar/utils.tsx

@@ -1,8 +1,13 @@
 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';
 
 // 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');
+}