feat(nav): Open feedback in drawer (#85217)

The old navigation sidebar has been the component responsible for
displaying the onboarding panels. Since we are moving to a new nav
component, I'm going to be moving all the existing onboarding panels
over to our new `useDrawer()`.

This does some refactoring to the feedback onboarding (to make the
content usable in both) and exports a `useFeedbackOnboarding()` hook
that is used for the new nav.

Author: malwilley

static/app/components/feedback/feedbackOnboarding/sidebar.tsx

@@ -10,6 +10,7 @@ import {CompactSelect} from 'sentry/components/compactSelect';
 import {FeedbackOnboardingLayout} from 'sentry/components/feedback/feedbackOnboarding/feedbackOnboardingLayout';
 import {CRASH_REPORT_HASH} from 'sentry/components/feedback/useFeedbackOnboarding';
 import RadioGroup from 'sentry/components/forms/controls/radioGroup';
+import useDrawer from 'sentry/components/globalDrawer';
 import IdBadge from 'sentry/components/idBadge';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {FeedbackOnboardingWebApiBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
@@ -32,6 +33,8 @@ import {
 } from 'sentry/data/platformCategories';
 import platforms, {otherPlatform} from 'sentry/data/platforms';
 import {t, tct} from 'sentry/locale';
+import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
 import type {SelectValue} from 'sentry/types/core';
 import type {PlatformKey, Project} from 'sentry/types/project';
@@ -40,20 +43,69 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useUrlParams from 'sentry/utils/useUrlParams';
 
-function FeedbackOnboardingSidebar(props: CommonSidebarProps) {
+export function useFeedbackOnboardingDrawer() {
+  const organization = useOrganization();
+  const currentPanel = useLegacyStore(SidebarPanelStore);
+  const isActive = currentPanel === SidebarPanelKey.FEEDBACK_ONBOARDING;
+  const hasProjectAccess = organization.access.includes('project:read');
+
+  const {openDrawer} = useDrawer();
+
+  useEffect(() => {
+    if (isActive && hasProjectAccess) {
+      openDrawer(() => <SidebarContent />, {
+        ariaLabel: t('Getting Started with User Feedback'),
+        onClose: () => {
+          SidebarPanelStore.hidePanel();
+        },
+      });
+    }
+  }, [isActive, hasProjectAccess, openDrawer]);
+}
+
+// Used by legacy navigation
+function LegacyFeedbackOnboardingSidebar(props: CommonSidebarProps) {
   const {currentPanel, collapsed, hidePanel, orientation} = props;
   const organization = useOrganization();
 
   const isActive = currentPanel === SidebarPanelKey.FEEDBACK_ONBOARDING;
   const hasProjectAccess = organization.access.includes('project:read');
 
+  if (!isActive || !hasProjectAccess) {
+    return null;
+  }
+
+  return (
+    <TaskSidebarPanel
+      orientation={orientation}
+      collapsed={collapsed}
+      hidePanel={hidePanel}
+    >
+      <SidebarContent />
+    </TaskSidebarPanel>
+  );
+}
+
+function SidebarContent() {
+  const organization = useOrganization();
+
   const {allProjects, currentProject, setCurrentProject} = useCurrentProjectState({
-    currentPanel,
+    currentPanel: SidebarPanelKey.FEEDBACK_ONBOARDING,
     targetPanel: SidebarPanelKey.FEEDBACK_ONBOARDING,
     onboardingPlatforms: feedbackOnboardingPlatforms,
     allPlatforms: feedbackOnboardingPlatforms,
   });
 
+  useEffect(() => {
+    // this tracks clicks from any source: feedback index, issue details feedback tab, banner callout, etc
+    if (currentProject) {
+      trackAnalytics('feedback.list-view-setup-sidebar', {
+        organization,
+        platform: currentProject?.platform ?? 'unknown',
+      });
+    }
+  }, [currentProject, organization, setCurrentProject]);
+
   const projectSelectOptions = useMemo(() => {
     const supportedProjectItems: Array<SelectValue<string>> = allProjects
       .sort((aProject, bProject) => {
@@ -82,26 +134,12 @@ function FeedbackOnboardingSidebar(props: CommonSidebarProps) {
     ];
   }, [allProjects]);
 
-  useEffect(() => {
-    if (isActive && currentProject && hasProjectAccess) {
-      // this tracks clicks from any source: feedback index, issue details feedback tab, banner callout, etc
-      trackAnalytics('feedback.list-view-setup-sidebar', {
-        organization,
-        platform: currentProject?.platform ?? 'unknown',
-      });
-    }
-  }, [organization, currentProject, isActive, hasProjectAccess]);
-
-  if (!isActive || !hasProjectAccess || !currentProject) {
+  if (!currentProject) {
     return null;
   }
 
   return (
-    <TaskSidebarPanel
-      orientation={orientation}
-      collapsed={collapsed}
-      hidePanel={hidePanel}
-    >
+    <Fragment>
       <TopRightBackgroundImage src={HighlightTopRightPattern} />
       <TaskList>
         <Heading>{t('Getting Started with User Feedback')}</Heading>
@@ -140,7 +178,7 @@ function FeedbackOnboardingSidebar(props: CommonSidebarProps) {
         </HeaderActions>
         <OnboardingContent currentProject={currentProject} />
       </TaskList>
-    </TaskSidebarPanel>
+    </Fragment>
   );
 }
 
@@ -417,4 +455,4 @@ const StyledRadioGroup = styled(RadioGroup)`
   padding: ${space(1)} 0;
 `;
 
-export default FeedbackOnboardingSidebar;
+export default LegacyFeedbackOnboardingSidebar;

static/app/views/organizationLayout/index.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import {useFeedbackOnboardingDrawer} from 'sentry/components/feedback/feedbackOnboarding/sidebar';
 import Footer from 'sentry/components/footer';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import Nav from 'sentry/components/nav';
@@ -56,6 +57,8 @@ interface LayoutProps extends Props {
 }
 
 function AppLayout({children, organization}: LayoutProps) {
+  useFeedbackOnboardingDrawer();
+
   return (
     <NavContextProvider>
       <AppContainer>