fix(perf-connect-dots-banner): Sidebar doesn't load on fix. (#65830)

- Fixes loading of sidebar when 'Configure' is clicked.
- Adds simple logic to make the sidebar persist when configure is
clicked and link is shared.
![Screenshot 2024-02-26 at 4 43 09
PM](https://github.com/getsentry/sentry/assets/60121741/45f1df07-2acc-4d0c-aa78-964786f37c8f)

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/components/performanceOnboarding/sidebar.tsx

@@ -39,7 +39,7 @@ function PerformanceOnboardingSidebar(props: CommonSidebarProps) {
 
   const [currentProject, setCurrentProject] = useState<Project | undefined>(undefined);
 
-  const {selection, isReady} = useLegacyStore(PageFiltersStore);
+  const {selection} = useLegacyStore(PageFiltersStore);
 
   const {projectsWithoutFirstTransactionEvent, projectsForOnboarding} =
     filterProjects(projects);
@@ -48,7 +48,6 @@ function PerformanceOnboardingSidebar(props: CommonSidebarProps) {
     if (
       currentProject ||
       projects.length === 0 ||
-      !isReady ||
       !isActive ||
       projectsWithoutFirstTransactionEvent.length <= 0
     ) {
@@ -99,7 +98,6 @@ function PerformanceOnboardingSidebar(props: CommonSidebarProps) {
     selection.projects,
     projects,
     isActive,
-    isReady,
     projectsForOnboarding,
     projectsWithoutFirstTransactionEvent,
     currentProject,

static/app/components/sidebar/index.tsx

@@ -71,8 +71,8 @@ function togglePanel(panel: SidebarPanelKey) {
   SidebarPanelStore.togglePanel(panel);
 }
 
-function hidePanel() {
-  SidebarPanelStore.hidePanel();
+function hidePanel(hash?: string) {
+  SidebarPanelStore.hidePanel(hash);
 }
 
 function useOpenOnboardingSidebar(organization?: Organization) {
@@ -558,7 +558,7 @@ function Sidebar() {
           <PerformanceOnboardingSidebar
             currentPanel={activePanel}
             onShowPanel={() => togglePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING)}
-            hidePanel={hidePanel}
+            hidePanel={() => hidePanel('performance-sidequest')}
             {...sidebarItemProps}
           />
           <FeedbackOnboardingSidebar

static/app/stores/sidebarPanelStore.tsx

@@ -10,7 +10,7 @@ interface SidebarPanelStoreDefinition extends CommonStoreDefinition<ActivePanelT
   activatePanel(panel: SidebarPanelKey): void;
 
   activePanel: ActivePanelType;
-  hidePanel(): void;
+  hidePanel(hash?: string): void;
   togglePanel(panel: SidebarPanelKey): void;
 }
 
@@ -35,8 +35,13 @@ const storeConfig: SidebarPanelStoreDefinition = {
     }
   },
 
-  hidePanel() {
+  hidePanel(hash?: string) {
     this.activePanel = '';
+
+    if (hash) {
+      window.location.hash = window.location.hash.replace(`#${hash}`, '');
+    }
+
     this.trigger(this.activePanel);
   },
 

static/app/views/performance/traceDetails/content.tsx

@@ -1,4 +1,4 @@
-import {Component, createRef, Fragment} from 'react';
+import {Component, createRef, Fragment, useEffect} from 'react';
 import type {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
@@ -434,6 +434,12 @@ function OnlyOrphanErrorWarnings({orphanErrors}: OnlyOrphanErrorWarningsProps) {
     ? withPerformanceOnboarding.has(currentPlatform)
     : false;
 
+  useEffect(() => {
+    if (hasPerformanceOnboarding && location.hash === '#performance-sidequest') {
+      SidebarPanelStore.activatePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING);
+    }
+  }, [hasPerformanceOnboarding]);
+
   const {dismiss: snooze, isDismissed: isSnoozed} = useDismissAlert({
     key: LOCAL_STORAGE_KEY,
     expirationDays: 7,
@@ -477,6 +483,7 @@ function OnlyOrphanErrorWarnings({orphanErrors}: OnlyOrphanErrorWarningsProps) {
               priority="primary"
               onClick={event => {
                 event.preventDefault();
+                window.location.hash = 'performance-sidequest';
                 SidebarPanelStore.activatePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING);
               }}
             >