feat(nav): Collapse TopBar action triggers to icons on mobile

static/app/views/navigation/index.mobile.spec.tsx

@@ -1,9 +1,11 @@
+import {BroadcastFixture} from 'sentry-fixture/broadcast';
 import {GroupSearchViewFixture} from 'sentry-fixture/groupSearchView';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {UserFixture} from 'sentry-fixture/user';
 
 import {
   render,
+  renderGlobalModal,
   screen,
   userEvent,
   within,
@@ -185,6 +187,35 @@ describe('mobile navigation', () => {
     ).toBeInTheDocument();
   });
 
+  it("moves the Command Palette into the mobile row and What's New into the Help menu", async () => {
+    const context = navigationContext();
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/broadcasts/',
+      body: [BroadcastFixture({title: 'Mobile Broadcast', hasSeen: true})],
+    });
+
+    render(
+      <PrimaryNavigationContextProvider>
+        <Navigation />
+      </PrimaryNavigationContextProvider>,
+      context
+    );
+    renderGlobalModal({organization: context.organization});
+
+    const commandPaletteButton = screen.getByRole('button', {
+      name: 'Open Command Palette',
+    });
+    expect(commandPaletteButton.parentElement).toContainElement(
+      screen.getByRole('button', {name: 'Help'})
+    );
+    expect(screen.queryByRole('button', {name: "What's New"})).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', {name: 'Help'}));
+    await userEvent.click(screen.getByRole('menuitemradio', {name: "What's New"}));
+
+    expect(await screen.findByText('Mobile Broadcast')).toBeInTheDocument();
+  });
+
   describe('secondary nav route inference', () => {
     it('opens secondary navigation by default when on a sub-view', async () => {
       render(

static/app/views/navigation/mobileNavigation.tsx

@@ -7,6 +7,7 @@ import {Flex, type FlexProps, Stack} from '@sentry/scraps/layout';
 import {SizeProvider} from '@sentry/scraps/sizeContext';
 import {useScrollLock} from '@sentry/scraps/useScrollLock';
 
+import {ErrorBoundary} from 'sentry/components/errorBoundary';
 import {IconMenu} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {useOnClickOutside} from 'sentry/utils/useOnClickOutside';
@@ -20,7 +21,12 @@ import {
   PrimaryNavigationItems,
 } from 'sentry/views/navigation/navigation';
 import {PrimaryNavigation} from 'sentry/views/navigation/primary/components';
+import {
+  PrimaryNavigationHelpMenu,
+  useWhatsNewHelpMenuOptions,
+} from 'sentry/views/navigation/primary/helpMenu';
 import {OrganizationDropdown} from 'sentry/views/navigation/primary/organizationDropdown';
+import {SearchButton} from 'sentry/views/navigation/searchButton';
 import {SecondaryNavigation} from 'sentry/views/navigation/secondary/components';
 import {SecondaryNavigationContent} from 'sentry/views/navigation/secondary/content';
 import {useSecondaryNavigation} from 'sentry/views/navigation/secondaryNavigationContext';
@@ -48,6 +54,15 @@ function MobileNavigationHeader(props: FlexProps<'header'>) {
   );
 }
 
+function MobileWhatsNewHelpMenu() {
+  const whatsNewHelpMenuOptions = useWhatsNewHelpMenuOptions();
+  return <PrimaryNavigationHelpMenu {...whatsNewHelpMenuOptions} />;
+}
+
+function MobileHelpMenuFallback() {
+  return <PrimaryNavigationHelpMenu />;
+}
+
 function MobilePrimaryNavigation() {
   const {view} = useSecondaryNavigation();
 
@@ -136,7 +151,14 @@ export function MobileNavigation() {
           />
           <Stack gap="md" direction="row">
             <PrimaryNavigation.ButtonBar orientation="horizontal">
-              <PrimaryNavigationFooterItems />
+              <PrimaryNavigationFooterItems>
+                <PrimaryNavigation.ButtonContainer>
+                  {buttonProps => <SearchButton {...buttonProps} />}
+                </PrimaryNavigation.ButtonContainer>
+                <ErrorBoundary customComponent={MobileHelpMenuFallback}>
+                  <MobileWhatsNewHelpMenu />
+                </ErrorBoundary>
+              </PrimaryNavigationFooterItems>
             </PrimaryNavigation.ButtonBar>
             <PrimaryNavigationFooterItemsUserDropdown />
           </Stack>

static/app/views/navigation/navigation.tsx

@@ -1,4 +1,4 @@
-import {Fragment, type RefObject, useMemo, useRef} from 'react';
+import {Fragment, type PropsWithChildren, type RefObject, useMemo, useRef} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {motion, type MotionProps} from 'framer-motion';
 
@@ -92,7 +92,12 @@ export function Navigation() {
             paddingBottom="md"
           >
             <PrimaryNavigation.FooterItems>
-              <PrimaryNavigationFooterItems />
+              <PrimaryNavigationFooterItems>
+                <ErrorBoundary customComponent={null}>
+                  <PrimaryNavigationWhatsNew />
+                </ErrorBoundary>
+                <PrimaryNavigationHelpMenu />
+              </PrimaryNavigationFooterItems>
             </PrimaryNavigation.FooterItems>
             <PrimaryNavigation.FooterItems>
               <PrimaryNavigationFooterItemsUserDropdown />
@@ -284,7 +289,7 @@ export function PrimaryNavigationItems({listRef}: PrimaryNavigationItemsProps) {
 /**
  * Returns the list of items from the footer of the primary navigation
  */
-export function PrimaryNavigationFooterItems() {
+export function PrimaryNavigationFooterItems({children}: PropsWithChildren) {
   const organization = useOrganization();
 
   return (
@@ -304,10 +309,7 @@ export function PrimaryNavigationFooterItems() {
       <ErrorBoundary customComponent={null}>
         <PrimaryNavigationServiceIncidents />
       </ErrorBoundary>
-      <ErrorBoundary customComponent={null}>
-        <PrimaryNavigationWhatsNew />
-      </ErrorBoundary>
-      <PrimaryNavigationHelpMenu />
+      {children}
     </Fragment>
   );
 }

static/app/views/navigation/primary/components.tsx

@@ -324,7 +324,7 @@ function PrimaryNavigationMenu(props: PrimaryNavigationMenuProps) {
           >
             <NavigationButton
               {...triggerProps}
-              aria-label={layout === 'mobile' ? undefined : props.label}
+              aria-label={props.label}
               onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
                 if (organization) {
                   trackAnalytics('navigation.primary_item_clicked', {
@@ -361,18 +361,22 @@ function NavigationButton(props: DistributedOmit<ButtonProps, 'size'>) {
   const {layout} = usePrimaryNavigation();
 
   return (
-    <Flex align="center" padding="xs" justify="center">
+    <PrimaryNavigationButtonContainer>
       {p => (
         <ButtonWithOverflowVisible
           {...p}
           {...props}
           {...(layout === 'mobile' ? {variant: 'secondary'} : {variant: props.variant})}
         />
       )}
-    </Flex>
+    </PrimaryNavigationButtonContainer>
   );
 }
 
+function PrimaryNavigationButtonContainer(props: React.ComponentProps<typeof Flex>) {
+  return <Flex align="center" padding="xs" justify="center" {...props} />;
+}
+
 /**
  * @TODO(JonasBadalic) Scraps buttons have been setting overflow hidden onto the inner surface wrapper ever since
  * we inherited that component, and we need to override that to ensure that the indicator is visible as it will
@@ -569,6 +573,7 @@ export const PrimaryNavigation = {
   ListItem: PrimaryNavigationListItem,
   Link: PrimaryNavigationLink,
   Button: PrimaryNavigationButton,
+  ButtonContainer: PrimaryNavigationButtonContainer,
   ButtonBar: PrimaryNavigationButtonBar,
   Menu: PrimaryNavigationMenu,
   ButtonOverlay: PrimaryNavigationButtonOverlay,

static/app/views/navigation/primary/helpMenu.spec.tsx

@@ -1,10 +1,25 @@
+import {BroadcastFixture} from 'sentry-fixture/broadcast';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+} from 'sentry-test/reactTestingLibrary';
 
 import {ConfigStore} from 'sentry/stores/configStore';
+import {ModalStore} from 'sentry/stores/modalStore';
 import * as intercom from 'sentry/utils/intercom';
-import {PrimaryNavigationHelpMenu} from 'sentry/views/navigation/primary/helpMenu';
+import {
+  PrimaryNavigationHelpMenu,
+  useWhatsNewHelpMenuOptions,
+} from 'sentry/views/navigation/primary/helpMenu';
+
+function HelpMenuWithWhatsNew() {
+  const whatsNewOptions = useWhatsNewHelpMenuOptions();
+  return <PrimaryNavigationHelpMenu {...whatsNewOptions} />;
+}
 
 jest.mock('sentry/utils/intercom', () => ({
   showIntercom: jest.fn(),
@@ -18,6 +33,7 @@ async function expandResourcesSubmenu() {
 describe('PrimaryNavigationHelpMenu', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    ModalStore.reset();
     ConfigStore.set('supportEmail', 'support@sentry.io');
   });
 
@@ -31,4 +47,22 @@ describe('PrimaryNavigationHelpMenu', () => {
 
     expect(intercom.showIntercom).toHaveBeenCalledWith(organization.slug);
   });
+
+  it("updates What's New when broadcasts finish loading", async () => {
+    const organization = OrganizationFixture();
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/broadcasts/`,
+      match: [MockApiClient.matchQuery({show: 'latest', limit: '3'})],
+      asyncDelay: 100,
+      body: [BroadcastFixture({id: '1', title: 'New Broadcast', hasSeen: true})],
+    });
+
+    render(<HelpMenuWithWhatsNew />, {organization});
+    renderGlobalModal({organization});
+
+    await userEvent.click(screen.getByRole('button', {name: 'Help'}));
+    await userEvent.click(screen.getByRole('menuitemradio', {name: "What's New"}));
+
+    expect(await screen.findByText('New Broadcast')).toBeInTheDocument();
+  });
 });

static/app/views/navigation/primary/helpMenu.tsx

@@ -1,9 +1,12 @@
-import {useEffect} from 'react';
+import {Fragment, useEffect} from 'react';
 
 import {Flex} from '@sentry/scraps/layout';
 
+import {openModal} from 'sentry/actionCreators/modal';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
+import {ErrorBoundary} from 'sentry/components/errorBoundary';
 import {
+  IconBroadcast,
   IconBuilding,
   IconDiscord,
   IconDocs,
@@ -26,8 +29,20 @@ import {showIntercom} from 'sentry/utils/intercom';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {PrimaryNavigation} from 'sentry/views/navigation/primary/components';
+import {
+  useWhatsNewBroadcasts,
+  WhatsNewContent,
+} from 'sentry/views/navigation/primary/whatsNew';
+
+interface PrimaryNavigationHelpMenuProps {
+  additionalItems?: MenuItemProps[];
+  indicator?: 'accent' | 'danger' | 'warning';
+}
 
-export function PrimaryNavigationHelpMenu() {
+export function PrimaryNavigationHelpMenu({
+  additionalItems = [],
+  indicator,
+}: PrimaryNavigationHelpMenuProps = {}) {
   const organization = useOrganization();
   const contactSupportItem = getContactSupportItem(organization);
   const openForm = useFeedbackForm();
@@ -38,6 +53,7 @@ export function PrimaryNavigationHelpMenu() {
   }, [organization]);
 
   const items: MenuItemProps[] = [
+    ...additionalItems,
     {
       key: 'resources',
       label: t('Resources'),
@@ -199,10 +215,42 @@ export function PrimaryNavigationHelpMenu() {
       analyticsKey="help"
       label={t('Help')}
       icon={<IconEllipsis />}
+      indicator={indicator}
     />
   );
 }
 
+export function useWhatsNewHelpMenuOptions(): PrimaryNavigationHelpMenuProps {
+  const {unseenPostIds} = useWhatsNewBroadcasts();
+
+  return {
+    additionalItems: [
+      {
+        key: 'whats-new',
+        label: t("What's New"),
+        leadingItems: (
+          <MenuIcon>
+            <IconBroadcast />
+          </MenuIcon>
+        ),
+        onAction() {
+          openModal(({Header, Body}) => (
+            <Fragment>
+              <Header closeButton>{t("What's New")}</Header>
+              <Body>
+                <ErrorBoundary customComponent={null}>
+                  <WhatsNewContent />
+                </ErrorBoundary>
+              </Body>
+            </Fragment>
+          ));
+        },
+      },
+    ],
+    indicator: unseenPostIds.length > 0 ? 'accent' : undefined,
+  };
+}
+
 function getContactSupportItem(organization: Organization): MenuItemProps | null {
   const supportEmail = ConfigStore.get('supportEmail');