Handle the case of no avatar (#2959)

* Handle the case of no avatar

* ci go

* Scope to the top if...

* Account for CI's usage of dev API key causing avatar to show

e2e/playwright/flow-tests.spec.ts

@@ -2458,6 +2458,44 @@ test.describe('Onboarding tests', () => {
     await expect(onboardingOverlayLocator).toBeVisible()
     await expect(onboardingOverlayLocator).toContainText('the menu button')
   })
+
+  test("Avatar text doesn't mention avatar when no avatar", async ({
+    page,
+  }) => {
+    // Override beforeEach test setup
+    await page.addInitScript(
+      async ({ settingsKey, settings }) => {
+        localStorage.setItem(settingsKey, settings)
+        localStorage.setItem('FORCE_NO_IMAGE', 'FORCE_NO_IMAGE')
+      },
+      {
+        settingsKey: TEST_SETTINGS_KEY,
+        settings: TOML.stringify({
+          settings: TEST_SETTINGS_ONBOARDING_USER_MENU,
+        }),
+      }
+    )
+
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await u.waitForAuthSkipAppStart()
+
+    await page.waitForURL('**/file/**', { waitUntil: 'domcontentloaded' })
+
+    // Test that the text in this step is correct
+    const avatarLocator = await page
+      .getByTestId('user-sidebar-toggle')
+      .locator('img')
+    const onboardingOverlayLocator = await page
+      .getByTestId('onboarding-content')
+      .locator('div')
+      .nth(1)
+
+    // Expect the avatar to be visible and for the text to reference it
+    await expect(avatarLocator).not.toBeVisible()
+    await expect(onboardingOverlayLocator).toBeVisible()
+    await expect(onboardingOverlayLocator).toContainText('the menu button')
+  })
 })
 
 test.describe('Testing selections', () => {

src/machines/authMachine.ts

@@ -126,11 +126,17 @@ async function getUser(context: UserContext) {
   if (!token && isTauri()) return Promise.reject(new Error('No token found'))
   if (token) headers['Authorization'] = `Bearer ${context.token}`
 
-  if (SKIP_AUTH)
+  if (SKIP_AUTH) {
+    // For local tests
+    if (localStorage.getItem('FORCE_NO_IMAGE')) {
+      LOCAL_USER.image = ''
+    }
+
     return {
       user: LOCAL_USER,
       token,
     }
+  }
 
   const userPromise = !isTauri()
     ? fetch(url, {
@@ -144,6 +150,11 @@ async function getUser(context: UserContext) {
 
   const user = await userPromise
 
+  // Necessary here because we use Kurt's API key in CI
+  if (localStorage.getItem('FORCE_NO_IMAGE')) {
+    user.image = ''
+  }
+
   if ('error_code' in user) return Promise.reject(new Error(user.message))
 
   return {

src/routes/Onboarding/UserMenu.tsx

@@ -2,13 +2,18 @@ import { OnboardingButtons, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useEffect, useState } from 'react'
 import { useModelingContext } from 'hooks/useModelingContext'
+import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 
 export default function UserMenu() {
   const { context } = useModelingContext()
+  const { auth } = useSettingsAuthContext()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.PROJECT_MENU)
   const [avatarErrored, setAvatarErrored] = useState(false)
-  const buttonDescription = !avatarErrored ? 'your avatar' : 'the menu button'
+
+  const user = auth?.context?.user
+  const errorOrNoImage = !user?.image || avatarErrored
+  const buttonDescription = errorOrNoImage ? 'the menu button' : 'your avatar'
 
   // Set up error handling for the user's avatar image,
   // so the onboarding text can be updated if it fails to load.