Disable home logo link in the browser app (#2371)

* Disable logo link in browser, clean up menu components' organization

* Include the app name in Tauri as screenreader-only text

* Fix tsc issue in component test

* Add a playwright test to ensure logo is never a link in the browser

* Update broken component tests

e2e/playwright/flow-tests.spec.ts

@@ -348,6 +348,15 @@ test('if you use the format keyboard binding it formats your code', async ({
   |> close(%)`)
 })
 
+test('ensure the Zoo logo is not a link in browser app', async ({ page }) => {
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+
+  const zooLogo = page.locator('[data-testid="app-logo"]')
+  // Make sure it's not a link
+  await expect(zooLogo).not.toHaveAttribute('href')
+})
+
 test('if you write invalid kcl you get inlined errors', async ({ page }) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1000, height: 500 })

src/components/AppHeader.tsx

@@ -34,7 +34,7 @@ export const AppHeader = ({
       }
     >
       <ProjectSidebarMenu
-        renderAsLink={!enableMenu}
+        enableMenu={enableMenu}
         project={project?.project}
         file={project?.file}
       />

src/components/ProjectSidebarMenu.test.tsx

@@ -32,7 +32,7 @@ describe('ProjectSidebarMenu tests', () => {
       <BrowserRouter>
         <CommandBarProvider>
           <SettingsAuthProviderJest>
-            <ProjectSidebarMenu project={projectWellFormed} />
+            <ProjectSidebarMenu project={projectWellFormed} enableMenu={true} />
           </SettingsAuthProviderJest>
         </CommandBarProvider>
       </BrowserRouter>
@@ -53,7 +53,7 @@ describe('ProjectSidebarMenu tests', () => {
       <BrowserRouter>
         <CommandBarProvider>
           <SettingsAuthProviderJest>
-            <ProjectSidebarMenu />
+            <ProjectSidebarMenu enableMenu={true} />
           </SettingsAuthProviderJest>
         </CommandBarProvider>
       </BrowserRouter>
@@ -64,22 +64,18 @@ describe('ProjectSidebarMenu tests', () => {
     expect(screen.getByTestId('projectName')).toHaveTextContent(APP_NAME)
   })
 
-  test('Renders as a link if set to do so', () => {
+  test('Disables popover menu by default', () => {
     render(
       <BrowserRouter>
         <CommandBarProvider>
           <SettingsAuthProviderJest>
-            <ProjectSidebarMenu
+            <ProjectSidebarMenu project={projectWellFormed} />
-              project={projectWellFormed}
-              renderAsLink={true}
-            />
           </SettingsAuthProviderJest>
         </CommandBarProvider>
       </BrowserRouter>
     )
 
-    expect(screen.getByTestId('project-sidebar-link')).toBeInTheDocument()
+    expect(screen.getByTestId('project-name')).toHaveTextContent(
-    expect(screen.getByTestId('project-sidebar-link-name')).toHaveTextContent(
       projectWellFormed.name
     )
   })

src/components/ProjectSidebarMenu.tsx

@@ -17,53 +17,63 @@ import { engineCommandManager } from 'lib/singletons'
 const ProjectSidebarMenu = ({
   project,
   file,
-  renderAsLink = false,
+  enableMenu = false,
 }: {
-  renderAsLink?: boolean
+  enableMenu?: boolean
   project?: IndexLoaderData['project']
   file?: IndexLoaderData['file']
 }) => {
-  const { onProjectClose } = useLspContext()
   return (
     <div className="!no-underline h-full mr-auto max-h-min min-h-12 min-w-max flex items-center gap-2">
-      <Link
+      <AppLogoLink project={project} file={file} />
-        onClick={() => {
+      {enableMenu ? (
-          onProjectClose(file || null, project?.path || null, false)
-          // Clear the scene and end the session.
-          engineCommandManager.endSession()
-        }}
-        to={paths.HOME}
-        className="relative h-full grid place-content-center group p-1.5 before:block before:content-[''] before:absolute before:inset-0 before:bottom-2.5 before:z-[-1] before:bg-primary hover:before:brightness-110 before:rounded-b-sm"
-      >
-        <Logo className="w-auto h-4 text-chalkboard-10" />
-      </Link>
-      {renderAsLink ? (
-        <>
-          <Link
-            onClick={() => {
-              onProjectClose(file || null, project?.path || null, false)
-              // Clear the scene and end the session.
-              engineCommandManager.endSession()
-            }}
-            to={paths.HOME}
-            className="!no-underline"
-            data-testid="project-sidebar-link"
-          >
-            <span
-              className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
-              data-testid="project-sidebar-link-name"
-            >
-              {project?.name ? project.name : APP_NAME}
-            </span>
-          </Link>
-        </>
-      ) : (
         <ProjectMenuPopover project={project} file={file} />
+      ) : (
+        <span
+          className="hidden select-none cursor-default text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
+          data-testid="project-name"
+        >
+          {project?.name ? project.name : APP_NAME}
+        </span>
       )}
     </div>
   )
 }
 
+function AppLogoLink({
+  project,
+  file,
+}: {
+  project?: IndexLoaderData['project']
+  file?: IndexLoaderData['file']
+}) {
+  const { onProjectClose } = useLspContext()
+  const wrapperClassName =
+    "relative h-full grid place-content-center group p-1.5 before:block before:content-[''] before:absolute before:inset-0 before:bottom-2.5 before:z-[-1] before:bg-primary before:rounded-b-sm"
+  const logoClassName = 'w-auto h-4 text-chalkboard-10'
+
+  return isTauri() ? (
+    <Link
+      data-testid="app-logo"
+      onClick={() => {
+        onProjectClose(file || null, project?.path || null, false)
+        // Clear the scene and end the session.
+        engineCommandManager.endSession()
+      }}
+      to={paths.HOME}
+      className={wrapperClassName + ' hover:before:brightness-110'}
+    >
+      <Logo className={logoClassName} />
+      <span className="sr-only">{APP_NAME}</span>
+    </Link>
+  ) : (
+    <div className={wrapperClassName} data-testid="app-logo">
+      <Logo className={logoClassName} />
+      <span className="sr-only">{APP_NAME}</span>
+    </div>
+  )
+}
+
 function ProjectMenuPopover({
   project,
   file,