diff --git a/static/app/components/feedback/feedbackOnboarding/sidebar.tsx b/static/app/components/feedback/feedbackOnboarding/sidebar.tsx
index ebb60f5925879b..c77d9fc911518c 100644
--- a/static/app/components/feedback/feedbackOnboarding/sidebar.tsx
+++ b/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(() => , {
+ 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 (
+
+
+
+ );
+}
+
+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> = 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 (
-
+
{t('Getting Started with User Feedback')}
@@ -140,7 +178,7 @@ function FeedbackOnboardingSidebar(props: CommonSidebarProps) {
-
+
);
}
@@ -417,4 +455,4 @@ const StyledRadioGroup = styled(RadioGroup)`
padding: ${space(1)} 0;
`;
-export default FeedbackOnboardingSidebar;
+export default LegacyFeedbackOnboardingSidebar;
diff --git a/static/app/views/organizationLayout/index.tsx b/static/app/views/organizationLayout/index.tsx
index 3ad4648b6dc8b6..fb09cd600ce244 100644
--- a/static/app/views/organizationLayout/index.tsx
+++ b/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 (