Don't show user avatar in snapshot tests (#2130)

* Make user avatar 404 in snapshot tests

* Make fallback menu button look better

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Give AppHeader consistent height

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Rerun CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Rerun CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

e2e/playwright/snapshot-tests.spec.ts

@@ -27,6 +27,16 @@ test.beforeEach(async ({ page }) => {
       settings: TOML.stringify({ settings: TEST_SETTINGS }),
     }
   )
+
+  // Make the user avatar image always 404
+  // so we see the fallback menu icon for all snapshot tests
+  await page.route('https://lh3.googleusercontent.com/**', async (route) => {
+    await route.fulfill({
+      status: 404,
+      contentType: 'text/plain',
+      body: 'Not Found!',
+    })
+  })
 })
 
 test.setTimeout(60_000)

src/components/CustomIcon.tsx

@@ -219,6 +219,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  menu: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 6H5V5H15V6ZM15 10.5H5V9.5H15V10.5ZM5 15H15V14H5V15Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   move: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path

src/components/ProjectSidebarMenu.tsx

@@ -24,7 +24,7 @@ const ProjectSidebarMenu = ({
 }) => {
   const { onProjectClose } = useLspContext()
   return (
-    <div className="!no-underline h-full mr-auto max-h-min min-w-max flex items-center gap-2">
+    <div className="!no-underline h-full mr-auto max-h-min min-h-12 min-w-max flex items-center gap-2">
       <Link
         onClick={() => {
           onProjectClose(file || null, project?.path || null, false)

src/components/UserSidebarMenu.test.tsx

@@ -98,7 +98,9 @@ describe('UserSidebarMenu tests', () => {
       </TestWrap>
     )
 
-    expect(screen.getByTestId('user-sidebar-toggle')).toHaveTextContent('Menu')
+    expect(screen.getByTestId('user-sidebar-toggle')).toHaveTextContent(
+      'User menu'
+    )
   })
 })
 

src/components/UserSidebarMenu.tsx

@@ -1,6 +1,6 @@
 import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
-import { faBars, faBug, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import { faBug, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useState } from 'react'
@@ -8,6 +8,7 @@ import { paths } from 'lib/paths'
 import { Models } from '@kittycad/lib'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
+import Tooltip from './Tooltip'
 
 type User = Models['User_type']
 
@@ -54,11 +55,13 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
       ) : (
         <ActionButton
           Element={Popover.Button}
-          icon={{ icon: faBars }}
-          className="border-transparent"
+          icon={{ icon: 'menu' }}
+          className="border-transparent !px-0"
           data-testid="user-sidebar-toggle"
         >
-          Menu
+          <Tooltip position="left" delay={1000}>
+            User menu
+          </Tooltip>
         </ActionButton>
       )}
       <Transition