feat(unify): launchpad header breadcrumbs and reusable tooltip component

packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx

@@ -172,12 +172,32 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     cy.contains(`${defaultMessages.topNav.updateCypress.title} 8.7.0`).should('not.exist')
   })
 
-  it('displays the active project name', () => {
+  it('displays the active project name and testing type', () => {
     cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
       render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><HeaderBarContent gql={gqlVal} /></div>,
     })
 
     cy.contains('test-project').should('be.visible')
+    cy.contains('e2e testing', { matchCase: false }).should('be.visible')
+  })
+
+  it('displays the branch name', () => {
+    cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
+      onResult: (result) => {
+        if (!result.currentProject) {
+          return
+        }
+
+        result.currentProject.branch = 'develop'
+      },
+      render: (gqlVal) => (
+        <div class="border-current border-1 h-700px resize overflow-auto">
+          <HeaderBarContent gql={gqlVal} />
+        </div>
+      ),
+    })
+
+    cy.contains('develop').should('be.visible')
   })
 
   it('the login modal reaches "opening browser" status', () => {

packages/frontend-shared/src/gql-components/HeaderBarContent.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="bg-white border-b border-b-gray-100 h-64px py-15px px-6">
+  <div
+    data-cy="header-bar-content"
+    class="bg-white border-b border-b-gray-100 h-64px py-15px px-6"
+  >
     <div class="flex h-full gap-12px items-center justify-between">
       <div
         v-if="pageName"
@@ -9,7 +12,7 @@
       </div>
       <div
         v-else
-        class="flex items-center children:font-medium children:leading-24px"
+        class="flex font-medium text-gray-700 items-center children:leading-24px"
       >
         <img
           class="h-32px mr-18px w-32px"
@@ -28,7 +31,28 @@
           v-if="props.gql?.currentProject"
           class="h-16px mr-2px min-w-16px icon-dark-gray-200"
         />
-        <span class="text-body-gray-700">{{ props.gql?.currentProject?.title }}</span>
+        <span
+          class="font-medium mr-2px"
+          :class="props.gql?.currentProject?.currentTestingType ? 'text-indigo-500 hocus-link-default cursor-pointer' :
+            'text-gray-700'"
+          @click.prevent="clearTestingType"
+        >
+          {{ props.gql?.currentProject?.title }}
+        </span>
+        <span
+          v-if="props.gql?.currentProject?.branch"
+          class="font-normal text-gray-500"
+        >
+          ({{ props.gql.currentProject.branch }})
+        </span>
+        <i-cy-chevron-right_x16
+          v-if="props.gql?.currentProject?.currentTestingType"
+          class="h-16px mr-2px min-w-16px icon-dark-gray-200"
+        />
+        <span
+          v-if="props.gql?.currentProject?.currentTestingType"
+          class="lowercase"
+        >{{ t(`testingType.${props.gql?.currentProject?.currentTestingType}.name`) }}</span>
       </div>
       <div class="flex gap-6">
         <TopNav
@@ -86,7 +110,7 @@
         </TopNav>
         <div v-if="!props.gql?.cloudViewer">
           <button
-            class="flex text-gray-600 group items-center focus:outline-transparent"
+            class="flex text-gray-600 items-center group focus:outline-transparent"
             @click="openLogin"
           >
             <i-cy-profile_x16
@@ -110,6 +134,7 @@ import { ref, computed } from 'vue'
 import type { HeaderBar_HeaderBarContentFragment } from '../generated/graphql'
 import {
   GlobalPageHeader_ClearCurrentProjectDocument,
+  GlobalPageHeader_ClearCurrentTestingTypeDocument,
   HeaderBarContent_AuthChangeDocument,
 } from '../generated/graphql'
 import TopNav from './topnav/TopNav.vue'
@@ -141,13 +166,26 @@ mutation GlobalPageHeader_clearCurrentProject {
 }
 `
 
+gql`
+mutation GlobalPageHeader_ClearCurrentTestingType {
+  clearCurrentTestingType {
+    currentProject {
+      id
+      currentTestingType
+    }
+  }
+}
+`
+
 gql`
 fragment HeaderBar_HeaderBarContent on Query {
   currentProject {
     id
     title
     config
     savedState
+    currentTestingType
+    branch
   }
   projectRootFromCI
   ...TopNav
@@ -164,6 +202,7 @@ const cloudProjectId = computed(() => {
 
 const isLoginOpen = ref(false)
 const clearCurrentProjectMutation = useMutation(GlobalPageHeader_ClearCurrentProjectDocument)
+const clearCurrentTestingTypeMutation = useMutation(GlobalPageHeader_ClearCurrentTestingTypeDocument)
 const email = computed(() => props.gql.cloudViewer?.email || undefined)
 
 const openLogin = () => {
@@ -176,6 +215,10 @@ const clearCurrentProject = () => {
   }
 }
 
+const clearTestingType = () => {
+  clearCurrentTestingTypeMutation.executeMutation({})
+}
+
 const props = defineProps<{
   gql: HeaderBar_HeaderBarContentFragment
   showBrowsers?: boolean

packages/launchpad/cypress/e2e/open-mode.cy.ts

@@ -22,6 +22,7 @@ describe('Launchpad: Open Mode', () => {
     cy.scaffoldProject('todos')
     cy.openProject('todos', ['--e2e'])
     cy.visitLaunchpad()
+    cy.get('[data-cy=header-bar-content]').contains('e2e testing', { matchCase: false })
     // e2e testing is configured for the todo project, so we don't expect an error.
     cy.get('h1').should('contain', 'Choose a Browser')
   })
@@ -30,6 +31,7 @@ describe('Launchpad: Open Mode', () => {
     cy.scaffoldProject('launchpad')
     cy.openProject('launchpad', ['--component'])
     cy.visitLaunchpad()
+    cy.get('[data-cy=header-bar-content]').contains('component testing', { matchCase: false })
     // Component testing is not configured for the todo project
     cy.get('h1').should('contain', 'Project Setup')
   })
@@ -132,4 +134,24 @@ describe('Launchpad: Open Mode', () => {
       })
     })
   })
+
+  it('can navigate to project from e2e menu', () => {
+    cy.scaffoldProject('todos')
+    cy.openProject('todos', ['--e2e'])
+    cy.visitLaunchpad()
+    cy.get('[data-cy=header-bar-content]').contains('e2e testing', { matchCase: false })
+    cy.get('[data-cy=header-bar-content]').contains('todos').click()
+
+    cy.get('h1').should('contain', 'Welcome to Cypress!')
+  })
+
+  it('can navigate to project from ct menu', () => {
+    cy.scaffoldProject('launchpad')
+    cy.openProject('launchpad', ['--component'])
+    cy.visitLaunchpad()
+    cy.get('[data-cy=header-bar-content]').contains('component testing', { matchCase: false })
+    cy.get('[data-cy=header-bar-content]').contains('launchpad').click()
+
+    cy.get('h1').should('contain', 'Welcome to Cypress!')
+  })
 })