Browse Source

fix(replays): Find any project if no js project exists so we can open the Replay Onboarding slideout (#44666)

The sidebar opens even if no projects are eligible for replays, and the
dropdown is disabled:

<img width="1188" alt="SCR-20230215-f0r"
src="https://user-images.githubusercontent.com/187460/219124147-659fef69-409e-41c9-adca-90a8516b0f2b.png">
Ryan Albrecht 2 years ago
parent
commit
ebad6a7916

+ 12 - 16
static/app/components/replaysOnboarding/sidebar.tsx

@@ -34,28 +34,24 @@ function ReplaysOnboardingSidebar(props: CommonSidebarProps) {
   const isActive = currentPanel === SidebarPanelKey.ReplaysOnboarding;
   const hasProjectAccess = organization.access.includes('project:read');
 
-  const {projects, currentProject, setCurrentProject} = useCurrentProjectState({
-    currentPanel,
-  });
+  const {projects, allProjects, currentProject, setCurrentProject} =
+    useCurrentProjectState({
+      currentPanel,
+    });
 
-  if (!isActive || !hasProjectAccess || !currentProject) {
+  const selectedProject = currentProject ?? projects[0] ?? allProjects[0];
+  if (!isActive || !hasProjectAccess || !selectedProject) {
     return null;
   }
 
-  const items: MenuItemProps[] = projects.reduce((acc: MenuItemProps[], project) => {
+  const items: MenuItemProps[] = allProjects.reduce((acc: MenuItemProps[], project) => {
     const itemProps: MenuItemProps = {
       key: project.id,
       label: <StyledIdBadge project={project} avatarSize={16} hideOverflow disableLink />,
-      onAction: function switchProject() {
-        setCurrentProject(project);
-      },
+      onAction: () => setCurrentProject(project),
     };
 
-    if (currentProject.id === project.id) {
-      acc.unshift(itemProps);
-    } else {
-      acc.push(itemProps);
-    }
+    acc.push(itemProps);
 
     return acc;
   }, []);
@@ -73,16 +69,16 @@ function ReplaysOnboardingSidebar(props: CommonSidebarProps) {
           items={items}
           triggerLabel={
             <StyledIdBadge
-              project={currentProject}
+              project={selectedProject}
               avatarSize={16}
               hideOverflow
               disableLink
             />
           }
-          triggerProps={{'aria-label': currentProject.slug}}
+          triggerProps={{'aria-label': selectedProject.slug}}
           position="bottom-end"
         />
-        <OnboardingContent currentProject={currentProject} />
+        <OnboardingContent currentProject={selectedProject} />
       </TaskList>
     </TaskSidebarPanel>
   );

+ 1 - 0
static/app/components/replaysOnboarding/useCurrentProjectState.tsx

@@ -84,6 +84,7 @@ function useCurrentProjectState({currentPanel}: {currentPanel: '' | SidebarPanel
 
   return {
     projects: projectWithReplaySupport,
+    allProjects: projects,
     currentProject,
     setCurrentProject,
   };