feat(core): update nav to work better on mobile and when collapsed

static/app/components/sidebar/expandedContextProvider.tsx

@@ -0,0 +1,33 @@
+import {createContext, useState} from 'react';
+import {useTheme} from '@emotion/react';
+
+import PreferencesStore from 'sentry/stores/preferencesStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import useMedia from 'sentry/utils/useMedia';
+
+export const ExpandedContext = createContext<{
+  expandedItemId: string | null;
+  setExpandedItemId: (mainItemId: string | null) => void;
+  shouldAccordionFloat: boolean;
+}>({
+  expandedItemId: null,
+  setExpandedItemId: () => {},
+  shouldAccordionFloat: false,
+});
+
+// Provides the expanded context to the sidebar accordion when it's in the floating state only (collapsed sidebar or on mobile view)
+export function ExpandedContextProvider(props) {
+  const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
+  const theme = useTheme();
+  const preferences = useLegacyStore(PreferencesStore);
+  const horizontal = useMedia(`(max-width: ${theme.breakpoints.medium})`);
+  const shouldAccordionFloat = horizontal || !!preferences.collapsed;
+
+  return (
+    <ExpandedContext.Provider
+      value={{expandedItemId, setExpandedItemId, shouldAccordionFloat}}
+    >
+      {props.children}
+    </ExpandedContext.Provider>
+  );
+}

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

@@ -14,6 +14,13 @@ import type {Organization, SentryServiceStatus} from 'sentry/types';
 
 jest.mock('sentry/actionCreators/serviceIncidents');
 
+const sidebarAccordionFeatures = [
+  'performance-view',
+  'performance-database-view',
+  'performance-cache-view',
+  'performance-http',
+];
+
 describe('Sidebar', function () {
   const {organization, routerContext} = initializeOrg();
   const broadcast = BroadcastFixture();
@@ -267,4 +274,28 @@ describe('Sidebar', function () {
     await userEvent.click(screen.getByTestId('sidebar-collapse'));
     expect(await screen.findByText(organization.name)).toBeInTheDocument();
   });
+
+  describe('when the accordion is used', () => {
+    const renderSidebarWithFeatures = () => {
+      renderSidebar({
+        organization: {
+          ...organization,
+          features: [...organization.features, ...sidebarAccordionFeatures],
+        },
+      });
+    };
+
+    it('should not render floating accordion when expanded', async () => {
+      renderSidebarWithFeatures();
+      await userEvent.click(screen.getByTestId('sidebar-accordion-performance-item'));
+      expect(screen.queryByTestId('floating-accordion')).not.toBeInTheDocument();
+    });
+
+    it('should render floating accordion when collapsed', async () => {
+      renderSidebarWithFeatures();
+      await userEvent.click(screen.getByTestId('sidebar-collapse'));
+      await userEvent.click(screen.getByTestId('sidebar-accordion-performance-item'));
+      expect(await screen.findByTestId('floating-accordion')).toBeInTheDocument();
+    });
+  });
 });

static/app/components/sidebar/index.tsx

@@ -12,6 +12,10 @@ import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext'
 import {getMergedTasks} from 'sentry/components/onboardingWizard/taskConfig';
 import PerformanceOnboardingSidebar from 'sentry/components/performanceOnboarding/sidebar';
 import ReplaysOnboardingSidebar from 'sentry/components/replaysOnboarding/sidebar';
+import {
+  ExpandedContext,
+  ExpandedContextProvider,
+} from 'sentry/components/sidebar/expandedContextProvider';
 import {isDone} from 'sentry/components/sidebar/utils';
 import {
   IconDashboard,
@@ -123,6 +127,7 @@ function Sidebar() {
   const preferences = useLegacyStore(PreferencesStore);
   const activePanel = useLegacyStore(SidebarPanelStore);
   const organization = useOrganization({allowNull: true});
+  const {shouldAccordionFloat} = useContext(ExpandedContext);
 
   const collapsed = !!preferences.collapsed;
   const horizontal = useMedia(`(max-width: ${theme.breakpoints.medium})`);
@@ -259,6 +264,7 @@ function Sidebar() {
               label={<GuideAnchor target="performance">{t('Performance')}</GuideAnchor>}
               to={`/organizations/${organization.slug}/performance/`}
               id="performance"
+              exact={!shouldAccordionFloat}
             >
               <Feature features="performance-database-view" organization={organization}>
                 <SidebarItem
@@ -383,7 +389,7 @@ function Sidebar() {
         label={<GuideAnchor target="starfish">{t('Starfish')}</GuideAnchor>}
         to={`/organizations/${organization.slug}/starfish/`}
         id="starfish"
-        exact
+        exact={!shouldAccordionFloat}
       >
         <SidebarItem
           {...sidebarItemProps}
@@ -560,138 +566,142 @@ function Sidebar() {
 
   return (
     <SidebarWrapper aria-label={t('Primary Navigation')} collapsed={collapsed}>
-      <SidebarSectionGroupPrimary>
-        <DropdownSidebarSection isSuperuser={showSuperuserWarning() && !isExcludedOrg()}>
-          <SidebarDropdown orientation={orientation} collapsed={collapsed} />
-
-          {showSuperuserWarning() && !isExcludedOrg() && (
-            <Hook name="component:superuser-warning" organization={organization} />
-          )}
-        </DropdownSidebarSection>
-
-        <PrimaryItems>
-          {hasOrganization && (
-            <Fragment>
-              <SidebarSection>
-                {issues}
-                {projects}
-              </SidebarSection>
-
-              <SidebarSection>
-                {performance}
-                {starfish}
-                {profiling}
-                {metrics}
-                {replays}
-                {aiAnalytics}
-                {feedback}
-                {monitors}
-                {alerts}
-              </SidebarSection>
-
-              <SidebarSection>
-                {discover2}
-                {dashboards}
-                {releases}
-                {userFeedback}
-              </SidebarSection>
-
-              <SidebarSection>
-                {stats}
-                {settings}
-              </SidebarSection>
-            </Fragment>
-          )}
-        </PrimaryItems>
-      </SidebarSectionGroupPrimary>
-
-      {hasOrganization && (
-        <SidebarSectionGroup>
-          <PerformanceOnboardingSidebar
-            currentPanel={activePanel}
-            onShowPanel={() => togglePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING)}
-            hidePanel={() => hidePanel('performance-sidequest')}
-            {...sidebarItemProps}
-          />
-          <FeedbackOnboardingSidebar
-            currentPanel={activePanel}
-            onShowPanel={() => togglePanel(SidebarPanelKey.FEEDBACK_ONBOARDING)}
-            hidePanel={hidePanel}
-            {...sidebarItemProps}
-          />
-          <ReplaysOnboardingSidebar
-            currentPanel={activePanel}
-            onShowPanel={() => togglePanel(SidebarPanelKey.REPLAYS_ONBOARDING)}
-            hidePanel={hidePanel}
-            {...sidebarItemProps}
-          />
-          <ProfilingOnboardingSidebar
-            currentPanel={activePanel}
-            onShowPanel={() => togglePanel(SidebarPanelKey.PROFILING_ONBOARDING)}
-            hidePanel={hidePanel}
-            {...sidebarItemProps}
-          />
-          <MetricsOnboardingSidebar
-            currentPanel={activePanel}
-            onShowPanel={() => togglePanel(SidebarPanelKey.METRICS_ONBOARDING)}
-            hidePanel={hidePanel}
-            {...sidebarItemProps}
-          />
-          <SidebarSection noMargin noPadding>
-            <OnboardingStatus
-              org={organization}
+      <ExpandedContextProvider>
+        <SidebarSectionGroupPrimary>
+          <DropdownSidebarSection
+            isSuperuser={showSuperuserWarning() && !isExcludedOrg()}
+          >
+            <SidebarDropdown orientation={orientation} collapsed={collapsed} />
+
+            {showSuperuserWarning() && !isExcludedOrg() && (
+              <Hook name="component:superuser-warning" organization={organization} />
+            )}
+          </DropdownSidebarSection>
+
+          <PrimaryItems>
+            {hasOrganization && (
+              <Fragment>
+                <SidebarSection>
+                  {issues}
+                  {projects}
+                </SidebarSection>
+
+                <SidebarSection>
+                  {performance}
+                  {starfish}
+                  {profiling}
+                  {metrics}
+                  {replays}
+                  {aiAnalytics}
+                  {feedback}
+                  {monitors}
+                  {alerts}
+                </SidebarSection>
+
+                <SidebarSection>
+                  {discover2}
+                  {dashboards}
+                  {releases}
+                  {userFeedback}
+                </SidebarSection>
+
+                <SidebarSection>
+                  {stats}
+                  {settings}
+                </SidebarSection>
+              </Fragment>
+            )}
+          </PrimaryItems>
+        </SidebarSectionGroupPrimary>
+
+        {hasOrganization && (
+          <SidebarSectionGroup>
+            <PerformanceOnboardingSidebar
+              currentPanel={activePanel}
+              onShowPanel={() => togglePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING)}
+              hidePanel={() => hidePanel('performance-sidequest')}
+              {...sidebarItemProps}
+            />
+            <FeedbackOnboardingSidebar
               currentPanel={activePanel}
-              onShowPanel={() => togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)}
+              onShowPanel={() => togglePanel(SidebarPanelKey.FEEDBACK_ONBOARDING)}
               hidePanel={hidePanel}
               {...sidebarItemProps}
             />
-          </SidebarSection>
-
-          <SidebarSection>
-            {HookStore.get('sidebar:bottom-items').length > 0 &&
-              HookStore.get('sidebar:bottom-items')[0]({
-                orientation,
-                collapsed,
-                hasPanel,
-                organization,
-              })}
-            <SidebarHelp
-              orientation={orientation}
-              collapsed={collapsed}
+            <ReplaysOnboardingSidebar
+              currentPanel={activePanel}
+              onShowPanel={() => togglePanel(SidebarPanelKey.REPLAYS_ONBOARDING)}
               hidePanel={hidePanel}
-              organization={organization}
+              {...sidebarItemProps}
             />
-            <Broadcasts
-              orientation={orientation}
-              collapsed={collapsed}
+            <ProfilingOnboardingSidebar
               currentPanel={activePanel}
-              onShowPanel={() => togglePanel(SidebarPanelKey.BROADCASTS)}
+              onShowPanel={() => togglePanel(SidebarPanelKey.PROFILING_ONBOARDING)}
               hidePanel={hidePanel}
-              organization={organization}
+              {...sidebarItemProps}
             />
-            <ServiceIncidents
-              orientation={orientation}
-              collapsed={collapsed}
+            <MetricsOnboardingSidebar
               currentPanel={activePanel}
-              onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
+              onShowPanel={() => togglePanel(SidebarPanelKey.METRICS_ONBOARDING)}
               hidePanel={hidePanel}
+              {...sidebarItemProps}
             />
-          </SidebarSection>
+            <SidebarSection noMargin noPadding>
+              <OnboardingStatus
+                org={organization}
+                currentPanel={activePanel}
+                onShowPanel={() => togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)}
+                hidePanel={hidePanel}
+                {...sidebarItemProps}
+              />
+            </SidebarSection>
 
-          {!horizontal && (
             <SidebarSection>
-              <SidebarCollapseItem
-                id="collapse"
-                data-test-id="sidebar-collapse"
-                {...sidebarItemProps}
-                icon={<Chevron direction={collapsed ? 'right' : 'left'} />}
-                label={collapsed ? t('Expand') : t('Collapse')}
-                onClick={toggleCollapse}
+              {HookStore.get('sidebar:bottom-items').length > 0 &&
+                HookStore.get('sidebar:bottom-items')[0]({
+                  orientation,
+                  collapsed,
+                  hasPanel,
+                  organization,
+                })}
+              <SidebarHelp
+                orientation={orientation}
+                collapsed={collapsed}
+                hidePanel={hidePanel}
+                organization={organization}
+              />
+              <Broadcasts
+                orientation={orientation}
+                collapsed={collapsed}
+                currentPanel={activePanel}
+                onShowPanel={() => togglePanel(SidebarPanelKey.BROADCASTS)}
+                hidePanel={hidePanel}
+                organization={organization}
+              />
+              <ServiceIncidents
+                orientation={orientation}
+                collapsed={collapsed}
+                currentPanel={activePanel}
+                onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
+                hidePanel={hidePanel}
               />
             </SidebarSection>
-          )}
-        </SidebarSectionGroup>
-      )}
+
+            {!horizontal && (
+              <SidebarSection>
+                <SidebarCollapseItem
+                  id="collapse"
+                  data-test-id="sidebar-collapse"
+                  {...sidebarItemProps}
+                  icon={<Chevron direction={collapsed ? 'right' : 'left'} />}
+                  label={collapsed ? t('Expand') : t('Collapse')}
+                  onClick={toggleCollapse}
+                />
+              </SidebarSection>
+            )}
+          </SidebarSectionGroup>
+        )}
+      </ExpandedContextProvider>
     </SidebarWrapper>
   );
 }