feat(unify): Login error states (#20204)

Author: marktnoonan

packages/app/cypress/e2e/top-nav.cy.ts

@@ -1,4 +1,7 @@
-import type { AuthMessage } from '../../../data-context/src/actions/AuthActions'
+import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+import type { AuthStateShape } from '@packages/data-context/src/data'
+
+const loginText = defaultMessages.topNav.login
 
 describe('App Top Nav Workflows', () => {
   beforeEach(() => {
@@ -312,7 +315,7 @@ describe('App Top Nav Workflows', () => {
           })
         })
 
-        cy.intercept('mutation-Logout').as('logout')
+        cy.intercept('mutation-Auth_Logout').as('logout')
 
         cy.findByRole('button', { name: 'Log Out' }).click()
 
@@ -338,7 +341,7 @@ describe('App Top Nav Workflows', () => {
         cy.withCtx((ctx, options) => {
         // @ts-ignore sinon is a global in the node process where this is executed
           sinon.stub(ctx._apis.authApi, 'logIn').callsFake(async (onMessage) => {
-            onMessage({ browserOpened: true } as AuthMessage)
+            onMessage({ browserOpened: true } as AuthStateShape)
 
             return new Promise((resolve) => {
               setTimeout(() => {
@@ -415,6 +418,116 @@ describe('App Top Nav Workflows', () => {
         cy.get('@logInModal').should('not.exist')
         cy.findByTestId('app-header-bar').findByTestId('user-avatar-title').should('be.visible')
       })
+
+      it('shows correct error when browser cannot launch', () => {
+        cy.withCtx((ctx) => {
+          ctx.coreData.authState = {
+            name: 'AUTH_COULD_NOT_LAUNCH_BROWSER',
+            message: 'http://127.0.0.1:0000/redirect-to-auth',
+            browserOpened: false,
+          }
+        })
+
+        cy.findByTestId('app-header-bar').within(() => {
+          cy.findByTestId('user-avatar-title').should('not.exist')
+          cy.findByRole('button', { name: 'Log In' }).click()
+        })
+
+        cy.contains('http://127.0.0.1:0000/redirect-to-auth').should('be.visible')
+        cy.contains(loginText.titleBrowserError).should('be.visible')
+        cy.contains(loginText.bodyBrowserError).should('be.visible')
+        cy.contains(loginText.bodyBrowserErrorDetails).should('be.visible')
+
+        // in this state, there is no retry UI, we ask the user to visit the auth url on their own
+        cy.contains('button', loginText.actionTryAgain).should('not.exist')
+        cy.contains('button', loginText.actionCancel).should('not.exist')
+      })
+
+      it('shows correct error when error other than browser-launch happens', () => {
+        cy.withCtx((ctx) => {
+          ctx.coreData.authState = {
+            name: 'AUTH_ERROR_DURING_LOGIN',
+            message: 'An unexpected error occurred',
+            browserOpened: false,
+          }
+        })
+
+        cy.findByTestId('app-header-bar').within(() => {
+          cy.findByTestId('user-avatar-title').should('not.exist')
+          cy.findByRole('button', { name: 'Log In' }).click()
+        })
+
+        cy.contains(loginText.titleFailed).should('be.visible')
+        cy.contains(loginText.bodyError).should('be.visible')
+        cy.contains('An unexpected error occurred').should('be.visible')
+
+        cy.contains('button', loginText.actionTryAgain).should('be.visible').as('tryAgain')
+        cy.contains('button', loginText.actionCancel).should('be.visible')
+
+        cy.percySnapshot()
+
+        cy.withCtx((ctx) => {
+          ctx.coreData.authState = {
+            name: 'AUTH_BROWSER_LAUNCHED',
+            message: '',
+            browserOpened: true,
+          }
+        })
+
+        cy.get('@tryAgain').click()
+        cy.contains(loginText.titleInitial).should('be.visible')
+      })
+
+      it('cancel button correctly clears error state', () => {
+        cy.withCtx((ctx) => {
+          ctx.coreData.authState = {
+            name: 'AUTH_ERROR_DURING_LOGIN',
+            message: 'An unexpected error occurred',
+            browserOpened: false,
+          }
+        })
+
+        cy.findByTestId('app-header-bar').within(() => {
+          cy.findByTestId('user-avatar-title').should('not.exist')
+          cy.findByRole('button', { name: 'Log In' }).as('loginButton').click()
+        })
+
+        cy.contains(loginText.titleFailed).should('be.visible')
+        cy.contains(loginText.bodyError).should('be.visible')
+        cy.contains('An unexpected error occurred').should('be.visible')
+
+        cy.percySnapshot()
+
+        cy.contains('button', loginText.actionTryAgain).should('be.visible')
+        cy.contains('button', loginText.actionCancel).click()
+
+        cy.get('@loginButton').click()
+        cy.contains(loginText.titleInitial).should('be.visible')
+      })
+
+      it('closing modal correctly clears error state', () => {
+        cy.withCtx((ctx) => {
+          ctx.coreData.authState = {
+            name: 'AUTH_ERROR_DURING_LOGIN',
+            message: 'An unexpected error occurred',
+            browserOpened: false,
+          }
+        })
+
+        cy.findByTestId('app-header-bar').within(() => {
+          cy.findByTestId('user-avatar-title').should('not.exist')
+          cy.findByRole('button', { name: 'Log In' }).as('loginButton').click()
+        })
+
+        cy.contains(loginText.titleFailed).should('be.visible')
+        cy.contains(loginText.bodyError).should('be.visible')
+        cy.contains('An unexpected error occurred').should('be.visible')
+
+        cy.findByLabelText(defaultMessages.actions.close).click()
+
+        cy.get('@loginButton').click()
+        cy.contains(loginText.titleInitial).should('be.visible')
+      })
     })
   })
 })

packages/data-context/src/actions/AuthActions.ts

@@ -1,12 +1,11 @@
 import type { DataContext } from '..'
-import type { AuthenticatedUserShape } from '../data'
-
-export interface AuthMessage {type: string, browserOpened: boolean, name: string, message: string}
+import type { AuthenticatedUserShape, AuthStateShape } from '../data'
 
 export interface AuthApiShape {
   getUser(): Promise<Partial<AuthenticatedUserShape>>
-  logIn(onMessage: (message: AuthMessage) => void): Promise<AuthenticatedUserShape>
+  logIn(onMessage: (message: AuthStateShape) => void): Promise<AuthenticatedUserShape>
   logOut(): Promise<void>
+  resetAuthState(): Promise<void>
 }
 
 export class AuthActions {
@@ -45,14 +44,25 @@ export class AuthActions {
   }
 
   async login () {
-    this.setAuthenticatedUser(await this.authApi.logIn(({ browserOpened }) => {
-      this.ctx.coreData.isAuthBrowserOpened = browserOpened
+    this.setAuthenticatedUser(await this.authApi.logIn((authState) => {
+      this.ctx.update((coreData) => {
+        coreData.authState = authState
+      })
     }))
   }
 
+  resetAuthState () {
+    this.ctx.update((coreData) => {
+      coreData.authState = { browserOpened: false }
+    })
+  }
+
   async logout () {
     try {
-      this.ctx.coreData.isAuthBrowserOpened = false
+      this.ctx.update((coreData) => {
+        coreData.authState.browserOpened = false
+      })
+
       await this.authApi.logOut()
     } catch (e) {
       this.ctx.logTraceError(e)

packages/data-context/src/data/coreDataShape.ts

@@ -1,4 +1,4 @@
-import { BUNDLERS, FoundBrowser, Editor, Warning, AllowedState, AllModeOptions, TestingType, PACKAGE_MANAGERS, BrowserStatus } from '@packages/types'
+import { BUNDLERS, FoundBrowser, Editor, Warning, AllowedState, AllModeOptions, TestingType, PACKAGE_MANAGERS, BrowserStatus, AuthStateName } from '@packages/types'
 import type { NexusGenEnums, NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
 import type { App, BrowserWindow } from 'electron'
 import type { ChildProcess } from 'child_process'
@@ -87,6 +87,12 @@ export interface BaseErrorDataShape {
   stack?: string
 }
 
+export interface AuthStateShape {
+  name?: AuthStateName
+  message?: string
+  browserOpened: boolean
+}
+
 export interface ForceReconfigureProjectDataShape {
   e2e?: boolean | null
   component?: boolean | null
@@ -116,7 +122,7 @@ export interface CoreDataShape {
   migration: MigrationDataShape | null
   user: AuthenticatedUserShape | null
   electron: ElectronShape
-  isAuthBrowserOpened: boolean
+  authState: AuthStateShape
   scaffoldedFiles: NexusGenObjects['ScaffoldedFile'][] | null
   warnings: Warning[]
   packageManager: typeof PACKAGE_MANAGERS[number]
@@ -152,7 +158,9 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
       preferences: {},
       refreshing: null,
     },
-    isAuthBrowserOpened: false,
+    authState: {
+      browserOpened: false,
+    },
     currentProject: modeOptions.projectRoot ?? null,
     currentTestingType: modeOptions.testingType ?? null,
     wizard: {

packages/data-context/src/util/urqlCacheKeys.ts

@@ -32,6 +32,7 @@ export const urqlCacheKeys: Partial<UrqlCacheKeys> = {
     ScaffoldedFile: () => null,
     LocalSettings: (data) => data.__typename,
     LocalSettingsPreferences: () => null,
+    AuthState: () => null,
     CloudProjectNotFound: (data) => data.__typename,
     CloudProjectUnauthorized: (data) => data.__typename,
     GeneratedSpecError: () => null,

packages/frontend-shared/cypress/support/mock-graphql/clientTestContext.ts

@@ -1,4 +1,4 @@
-import type { AuthenticatedUserShape } from '@packages/data-context/src/data'
+import type { AuthenticatedUserShape, AuthStateShape } from '@packages/data-context/src/data'
 import type {
   CurrentProject,
   Browser,
@@ -22,7 +22,7 @@ export interface ClientTestContext {
     browsers: Browser[] | null
   }
   versions: VersionData
-  isAuthBrowserOpened: boolean
+  authState: AuthStateShape
   localSettings: LocalSettings
   wizard: {
     chosenBundler: WizardBundler | null
@@ -69,7 +69,9 @@ export function makeClientTestContext (): ClientTestContext {
         released: '2021-10-11T19:40:49.036Z',
       },
     },
-    isAuthBrowserOpened: false,
+    authState: {
+      browserOpened: false,
+    },
     wizard: {
       chosenBundler: null,
       chosenFramework: null,

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Mutation.ts

@@ -35,12 +35,18 @@ export const stubMutation: MaybeResolver<Mutation> = {
   resetLatestVersionTelemetry () {
     return true
   },
-  focusActiveBrowserWindow (sourc, args, ctx) {
+  focusActiveBrowserWindow (source, args, ctx) {
     return true
   },
   hideBrowserWindow (source, args, ctx) {
     return true
   },
+
+  resetAuthState (source, args, ctx) {
+    ctx.authState = { browserOpened: false }
+
+    return { }
+  },
   setProjectPreferences (source, args, ctx) {
     return {}
   },

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts

@@ -25,8 +25,8 @@ export const stubQuery: MaybeResolver<Query> = {
   versions (source, args, ctx) {
     return ctx.versions
   },
-  isAuthBrowserOpened (source, args, ctx) {
-    return ctx.isAuthBrowserOpened
+  authState (source, args, ctx) {
+    return ctx.authState
   },
   isInGlobalMode (source, args, ctx) {
     return !ctx.currentProject

packages/frontend-shared/src/assets/icons/globe_x16.svg

@@ -0,0 +1,31 @@
+import CopyText from './CopyText.vue'
+import { defaultMessages } from '@cy/i18n'
+
+describe('<CopyText />', () => {
+  it('renders without overflow', { viewportWidth: 800, viewportHeight: 120 }, () => {
+    cy.mount(() => (
+      <div class="p-6">
+        <CopyText text="https://www.test.test"/>
+      </div>
+    ))
+
+    cy.contains('button', defaultMessages.clipboard.copy)
+    .should('be.visible')
+    .percySnapshot()
+  })
+
+  it('overflows nicely', { viewportWidth: 800, viewportHeight: 120 }, () => {
+    const text = 'yarn workspace @packages/frontend-shared cypress:run --record --key 123as4d56asda987das'
+
+    cy.mount(() => (
+      <div class="p-6">
+        <CopyText text={text}/>
+      </div>
+    ))
+
+    cy.contains(text)
+    cy.contains('button', defaultMessages.clipboard.copy)
+    .should('be.visible')
+    .percySnapshot()
+  })
+})

packages/frontend-shared/src/components/CopyText.cy.tsx

@@ -0,0 +1,26 @@
+<template>
+  <code class="border rounded flex font-light bg-gray-50 border-gray-100 px-16px text-gray-600 text-14px leading-40px relative items-center whitespace-nowrap overflow-hidden">
+    <i-cy-globe_x16 class="flex-shrink-0 h-16px mr-8px w-16px icon-dark-gray-500 icon-light-gray-100" />
+    {{ props.text }}
+    <div class="font-sans opacity-gradient p-4px pl-32px top-0 right-0 bottom-0 absolute">
+      <CopyButton
+        class="bg-indigo-100"
+        :text="text"
+      />
+    </div>
+  </code>
+</template>
+
+<script lang="ts" setup>
+import CopyButton from './CopyButton.vue'
+
+const props = defineProps<{
+  text: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.opacity-gradient {
+  background: linear-gradient(to right, rgba(255,255,255,.3) 0%, rgba(243, 244, 250, 1) 25%, rgba(243, 244, 250,1) 100%);
+}
+</style>