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

static/app/components/sidebar/broadcastPanelItem.tsx

@@ -0,0 +1,111 @@
+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 {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' | '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>
+        {category && <Badge type={!hasSeen ? 'new' : 'default'}>{category}</Badge>}
+      </TitleWrapper>
+
+      {mediaUrl && (
+        <Image
+          mediaUrl={mediaUrl}
+          link={link}
+          title={title}
+          onClick={handlePanelClicked}
+        />
+      )}
+
+      <Message>{message}</Message>
+
+      <LinkButton
+        external
+        href={link}
+        onClick={handlePanelClicked}
+        style={{marginTop: space(1)}}
+      >
+        {ctaText}
+      </LinkButton>
+    </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};
+  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 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);
+  });
+});

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');
+}