From 7f2522f85769b9b72a159db6cf39807a036fba83 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Mon, 29 Aug 2022 21:10:53 -0400
Subject: [PATCH] feat: show cloud connect options when hoving spec list fields
 (#23584)

Co-authored-by: Mark Noonan <mark@cypress.io>
---
 .../cypress/e2e/specs_list_latest_runs.cy.ts  |  35 ++++-
 .../app/src/composables/useRequestAccess.ts   |  24 ++++
 packages/app/src/specs/RunStatusDots.cy.tsx   |  24 ++++
 packages/app/src/specs/RunStatusDots.vue      | 115 ++++++++-------
 packages/app/src/specs/SpecsList.vue          |  52 +++++--
 .../app/src/specs/SpecsListCloudButton.cy.tsx | 131 ++++++++++++++++++
 .../app/src/specs/SpecsListCloudButton.vue    | 126 +++++++++++++++++
 .../app/src/specs/SpecsListHoverCell.cy.tsx   |  61 ++++++++
 packages/app/src/specs/SpecsListHoverCell.vue |  76 ++++++++++
 .../app/src/specs/SpecsListRowItem.cy.tsx     |  26 ++++
 packages/app/src/specs/SpecsListRowItem.vue   |  45 ++++--
 .../src/components/Button.cy.tsx              |  14 +-
 .../frontend-shared/src/components/Button.vue |   1 +
 .../frontend-shared/src/locales/en-US.json    |   9 ++
 14 files changed, 662 insertions(+), 77 deletions(-)
 create mode 100644 packages/app/src/composables/useRequestAccess.ts
 create mode 100644 packages/app/src/specs/SpecsListCloudButton.cy.tsx
 create mode 100644 packages/app/src/specs/SpecsListCloudButton.vue
 create mode 100644 packages/app/src/specs/SpecsListHoverCell.cy.tsx
 create mode 100644 packages/app/src/specs/SpecsListHoverCell.vue

diff --git a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
index 0e5fbf617b77..9cf1ccfb4497 100644
--- a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
@@ -111,15 +111,13 @@ function simulateRunData () {
 }
 
 function allVisibleSpecsShouldBePlaceholders () {
-  cy.findAllByTestId('run-status-dot-0').should('have.class', 'icon-light-gray-300')
-  cy.findAllByTestId('run-status-dot-1').should('have.class', 'icon-light-gray-300')
-  cy.findAllByTestId('run-status-dot-2').should('have.class', 'icon-light-gray-300')
-  cy.findAllByTestId('run-status-dot-latest')
-  .should('not.have.class', 'animate-spin')
-  .and('have.attr', 'data-cy-run-status', 'PLACEHOLDER')
+  cy.findAllByTestId('run-status-empty').should('be.visible').should('have.class', 'text-gray-400')
+  cy.findAllByTestId('run-status-dot-0').should('not.exist')
+  cy.findAllByTestId('run-status-dot-1').should('not.exist')
+  cy.findAllByTestId('run-status-dot-2').should('not.exist')
+  cy.findAllByTestId('run-status-dot-latest').should('not.exist')
 
   cy.get('.spec-list-container').scrollTo('bottom')
-  cy.get('.spec-list-container').scrollTo('bottom')
 }
 
 describe('App/Cloud Integration - Latest runs and Average duration', { viewportWidth: 1200, viewportHeight: 900 }, () => {
@@ -202,6 +200,29 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
 
       cy.findByTestId('average-duration-header').trigger('mouseleave')
     })
+
+    it('shows login/connect button in row when hovering', () => {
+      cy.get('[data-cy="spec-list-file"] [data-cy="specs-list-row-latest-runs"]')
+      .eq(0)
+      .as('latestRunsCell')
+      .trigger('mouseenter')
+
+      cy.contains('[data-cy="specs-list-row-latest-runs"] [data-cy="cloud-button"]', 'Connect').should('be.visible')
+
+      cy.get('@latestRunsCell').trigger('mouseleave')
+
+      cy.contains('[data-cy="cloud-button"]', 'Connect').should('not.exist')
+
+      cy.get('[data-cy="spec-list-file"] [data-cy="specs-list-row-average-duration"]')
+      .eq(0)
+      .as('averageDurationCell')
+      .trigger('mouseenter')
+
+      cy.contains('[data-cy="specs-list-row-average-duration"] [data-cy="cloud-button"]', 'Connect').should('be.visible')
+      cy.get('@averageDurationCell').trigger('mouseleave')
+
+      cy.contains('[data-cy="cloud-button"]', 'Connect').should('not.exist')
+    })
   })
 
   context('when project disconnected', () => {
diff --git a/packages/app/src/composables/useRequestAccess.ts b/packages/app/src/composables/useRequestAccess.ts
new file mode 100644
index 000000000000..8287fa12f451
--- /dev/null
+++ b/packages/app/src/composables/useRequestAccess.ts
@@ -0,0 +1,24 @@
+import { RequestAccessComposable_RequestAccessDocument } from '../generated/graphql'
+import { gql, useMutation } from '@urql/vue'
+
+gql`
+mutation RequestAccessComposable_RequestAccess( $projectId: String! ) {
+  cloudProjectRequestAccess(projectSlug: $projectId) {
+    __typename
+    ... on CloudProjectUnauthorized {
+      message
+      hasRequestedAccess
+    }
+  }
+}
+`
+
+export function useRequestAccess () {
+  const requestAccessMutation = useMutation(RequestAccessComposable_RequestAccessDocument)
+
+  return async function requestAccess (projectId: string | null | undefined) {
+    if (projectId) {
+      await requestAccessMutation.executeMutation({ projectId })
+    }
+  }
+}
diff --git a/packages/app/src/specs/RunStatusDots.cy.tsx b/packages/app/src/specs/RunStatusDots.cy.tsx
index f5e8c84ef4c2..17497c696927 100644
--- a/packages/app/src/specs/RunStatusDots.cy.tsx
+++ b/packages/app/src/specs/RunStatusDots.cy.tsx
@@ -28,6 +28,16 @@ function mountWithRuns (runs: Required<CloudSpecRun>[]) {
   })
 }
 
+function mountWithNoData () {
+  cy.mount(() => {
+    return (
+      <div class="flex justify-center">
+        <RunStatusDots gql={null} specFileExtension=".cy.ts" specFileName="spec"/>
+      </div>
+    )
+  })
+}
+
 describe('<RunStatusDots />', () => {
   context('runs scenario 1', () => {
     beforeEach(() => {
@@ -109,6 +119,20 @@ describe('<RunStatusDots />', () => {
     })
   })
 
+  context('runs not loaded', () => {
+    beforeEach(() => {
+      mountWithNoData()
+    })
+
+    it('renders placeholder without tooltip or link', () => {
+      cy.findByTestId('external').should('not.exist')
+      cy.findByTestId('run-status-empty').contains('--')
+      cy.findByTestId('run-status-empty').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('not.exist')
+      cy.findByTestId('run-status-dots').should('not.exist')
+    })
+  })
+
   context('unknown/unhandled statuses', () => {
     beforeEach(() => {
       const runs = fakeRuns(fill(['', '', '', ''], 'FAKE_UNKNOWN_STATUS' as any))
diff --git a/packages/app/src/specs/RunStatusDots.vue b/packages/app/src/specs/RunStatusDots.vue
index 6f63f8e8dee1..b9d6389419f8 100644
--- a/packages/app/src/specs/RunStatusDots.vue
+++ b/packages/app/src/specs/RunStatusDots.vue
@@ -1,63 +1,74 @@
 <template>
-  <component
-    :is="latestRun? Tooltip : 'div'"
-    placement="top"
-    :is-interactive="true"
-    class="h-16px"
-    :hide-delay="0"
-    :show-group="props.gql?.id"
-    :distance="7"
-    popper-class="RunStatusDots_Tooltip"
-  >
+  <div>
     <component
-      :is="latestRun? ExternalLink : 'div'"
-      :href="dashboardUrl"
+      :is="latestRun? Tooltip : 'div'"
+      v-if="isRunsLoaded"
+      placement="top"
+      :is-interactive="true"
+      class="h-16px"
+      :hide-delay="0"
+      :show-group="props.gql?.id"
+      :distance="7"
+      popper-class="RunStatusDots_Tooltip"
     >
-      <div
-        class="flex justify-end items-center"
-        data-cy="run-status-dots"
+      <component
+        :is="latestRun? ExternalLink : 'div'"
+        :href="dashboardUrl"
       >
         <div
-          v-for="(dot,i) in dotClasses"
-          :key="i"
-          class="ml-4px"
+          v-if="isRunsLoaded"
+          class="flex justify-end items-center"
+          data-cy="run-status-dots"
         >
-          <i-cy-dot-solid_x4
-            width="4"
-            height="4"
-            :class="dot"
-            :data-cy="'run-status-dot-'+i"
-          />
-        </div>
-        <div>
-          <component
-            :is="latestDot.icon"
-            width="16"
-            height="16"
-            :class="{'animate-spin': latestDot.spin}"
-            :data-cy="'run-status-dot-latest'"
-            :data-cy-run-status="latestDot.status"
+          <div
+            v-for="(dot,i) in dotClasses"
+            :key="i"
             class="ml-4px"
-          />
+          >
+            <i-cy-dot-solid_x4
+              width="4"
+              height="4"
+              :class="dot"
+              :data-cy="'run-status-dot-'+i"
+            />
+          </div>
+          <div>
+            <component
+              :is="latestDot.icon"
+              width="16"
+              height="16"
+              :class="{'animate-spin': latestDot.spin}"
+              :data-cy="'run-status-dot-latest'"
+              :data-cy-run-status="latestDot.status"
+              class="ml-4px"
+            />
+          </div>
         </div>
-      </div>
+      </component>
+      <template
+        #popper
+      >
+        <ExternalLink
+          v-if="latestRun"
+          :href="dashboardUrl"
+          :use-default-hocus="false"
+        >
+          <SpecRunSummary
+            :run="latestRun"
+            :spec-file-no-extension="props.specFileName"
+            :spec-file-extension="props.specFileExtension"
+          />
+        </ExternalLink>
+      </template>
     </component>
-    <template
-      #popper
+    <div
+      v-if="!isRunsLoaded"
+      data-cy="run-status-empty"
+      class="text-gray-400"
     >
-      <ExternalLink
-        v-if="latestRun"
-        :href="dashboardUrl"
-        :use-default-hocus="false"
-      >
-        <SpecRunSummary
-          :run="latestRun"
-          :spec-file-no-extension="props.specFileName"
-          :spec-file-extension="props.specFileExtension"
-        />
-      </ExternalLink>
-    </template>
-  </component>
+      --
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -135,6 +146,10 @@ const runs = computed(() => {
   return props.gql?.data?.__typename === 'CloudProjectSpec' ? props.gql?.data?.specRuns?.nodes ?? [] : []
 })
 
+const isRunsLoaded = computed(() => {
+  return !!props.gql?.data
+})
+
 const dotClasses = computed(() => {
   const statuses = ['placeholder', 'placeholder', 'placeholder']
 
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index d068a0613d5c..bbf270623575 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -28,17 +28,18 @@
     />
     <div
       v-if="specs.length"
-      class="mb-4 grid grid-cols-7 md:grid-cols-9 children:font-medium children:text-gray-800"
+      class="mb-4 grid children:font-medium children:text-gray-800"
       :style="`padding-right: ${scrollbarOffset + 20}px`"
+      :class="tableGridColumns"
     >
       <div
-        class="flex col-span-4 items-center justify-between"
+        class="flex items-center justify-between"
         data-cy="specs-testing-type-header"
       >
         {{ props.gql.currentProject?.currentTestingType === 'component' ?
           t('specPage.componentSpecsHeader') : t('specPage.e2eSpecsHeader') }}
       </div>
-      <div class="flex col-span-2 items-center justify-between truncate">
+      <div class="flex items-center justify-between truncate">
         <LastUpdatedHeader :is-git-available="isGitAvailable" />
       </div>
       <div class="flex items-center justify-end whitespace-nowrap">
@@ -50,7 +51,7 @@
           @showConnectToProject="showConnectToProject"
         />
       </div>
-      <div class="hidden items-center justify-end truncate md:flex md:col-span-2">
+      <div class="hidden items-center justify-end truncate md:flex">
         <SpecHeaderCloudDataTooltip
           :gql="props.gql"
           mode="AVG_DURATION"
@@ -84,6 +85,8 @@
           :data-cy="row.data.isLeaf ? 'spec-list-file' : 'spec-list-directory'"
           :data-cy-row="row.data.data?.baseName"
           :is-leaf="row.data.isLeaf"
+          :is-project-connected="projectConnectionStatus === 'CONNECTED'"
+          :grid-columns="tableGridColumns"
           :route="{ path: '/specs/runner', query: { file: row.data.data?.relative?.replace(/\\/g, '/') } }"
           @toggleRow="row.data.toggle"
         >
@@ -123,9 +126,20 @@
             />
           </template>
 
+          <template #connect-button="{ utmMedium }">
+            <SpecsListCloudButton
+              v-if="projectConnectionStatus !== 'CONNECTED' && row.data.isLeaf && row.data.data && (row.data.data.cloudSpec?.data || row.data.data.cloudSpec?.fetchingStatus !== 'FETCHING')"
+              :gql="props.gql"
+              :project-connection-status="projectConnectionStatus"
+              @showLogin="showLogin(utmMedium)"
+              @showConnectToProject="showConnectToProject"
+              @request-access="requestAccess(props.gql?.currentProject?.projectId)"
+            />
+          </template>
+
           <template #latest-runs>
             <div
-              class="h-full grid justify-items-end items-center"
+              class="h-full grid justify-items-end items-center relative"
             >
               <RunStatusDots
                 v-if="row.data.isLeaf && row.data.data && (row.data.data.cloudSpec?.data || row.data.data.cloudSpec?.fetchingStatus !== 'FETCHING')"
@@ -178,6 +192,7 @@ import SpecsListBanners from './SpecsListBanners.vue'
 import LastUpdatedHeader from './LastUpdatedHeader.vue'
 import SpecHeaderCloudDataTooltip from './SpecHeaderCloudDataTooltip.vue'
 import LoginModal from '@cy/gql-components/topnav/LoginModal.vue'
+import SpecsListCloudButton from './SpecsListCloudButton.vue'
 import CloudConnectModals from '../runs/modals/CloudConnectModals.vue'
 import SpecsListHeader from './SpecsListHeader.vue'
 import SpecListGitInfo from './SpecListGitInfo.vue'
@@ -201,6 +216,7 @@ import { useRoute } from 'vue-router'
 import FlakyInformation from './flaky-badge/FlakyInformation.vue'
 import { useCloudSpecData } from '../composables/useCloudSpecData'
 import { useSpecFilter } from '../composables/useSpecFilter'
+import { useRequestAccess } from '../composables/useRequestAccess'
 
 const route = useRoute()
 const { t } = useI18n()
@@ -210,18 +226,34 @@ const isOffline = ref(false)
 
 watch(isOnline, (newIsOnlineValue) => isOffline.value = !newIsOnlineValue, { immediate: true })
 
+const tableGridColumns = 'grid-cols-[1fr,135px,130px] md:grid-cols-[1fr,135px,130px,130px] lg:grid-cols-[1fr,160px,160px,180px]'
+
 const isProjectConnectOpen = ref(false)
 const isLoginOpen = ref(false)
 const loginUtmMedium = ref('')
 
-const cloudProjectType = computed(() => props.gql.currentProject?.cloudProject?.__typename)
+const projectConnectionStatus = computed(() => {
+  if (!props.gql.cloudViewer) return 'LOGGED_OUT'
+
+  if (!props.gql.currentProject?.cloudProject?.__typename) return 'NOT_CONNECTED'
+
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
 
-const hasRequestedAccess = computed(() => {
   if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
-    return props.gql.currentProject.cloudProject.hasRequestedAccess || false
+    if (props.gql.currentProject?.cloudProject?.hasRequestedAccess) {
+      return 'ACCESS_REQUESTED'
+    }
+
+    return 'UNAUTHORIZED'
   }
 
-  return false
+  return 'CONNECTED'
+})
+
+const cloudProjectType = computed(() => props.gql.currentProject?.cloudProject?.__typename)
+
+const hasRequestedAccess = computed(() => {
+  return projectConnectionStatus.value === 'ACCESS_REQUESTED'
 })
 
 const showLogin = (utmMedium: string) => {
@@ -233,6 +265,8 @@ const showConnectToProject = () => {
   isProjectConnectOpen.value = true
 }
 
+const requestAccess = useRequestAccess()
+
 const isGitAvailable = computed(() => {
   return !(props.gql.currentProject?.specs.some((s) => s.gitInfo?.statusType === 'noGitInfo') ?? false)
 })
diff --git a/packages/app/src/specs/SpecsListCloudButton.cy.tsx b/packages/app/src/specs/SpecsListCloudButton.cy.tsx
new file mode 100644
index 000000000000..9f768f8f5e96
--- /dev/null
+++ b/packages/app/src/specs/SpecsListCloudButton.cy.tsx
@@ -0,0 +1,131 @@
+import { SpecCloudDataHoverButtonFragmentDoc } from '../generated/graphql-test'
+import SpecsListCloudButton from './SpecsListCloudButton.vue'
+import { set } from 'lodash'
+
+describe('<SpecsListCloudButton>', { viewportWidth: 300, viewportHeight: 400 }, () => {
+  function mountWithStatus (
+    status: 'NOT_FOUND' | 'LOGGED_OUT' | 'NOT_CONNECTED' | 'UNAUTHORIZED' | 'ACCESS_REQUESTED',
+  ) {
+    cy.mountFragment(SpecCloudDataHoverButtonFragmentDoc, {
+      onResult: (result) => {
+        set(result, 'cloudViewer', { __typename: 'CloudUser', id: 'abc123' })
+
+        switch (status) {
+          case 'LOGGED_OUT':
+            set(result, 'cloudViewer', null)
+            break
+          case 'NOT_CONNECTED':
+            set(result, 'currentProject.cloudProject.__typename', null)
+            break
+          case 'NOT_FOUND':
+            set(result, 'currentProject.cloudProject.__typename', 'CloudProjectNotFound')
+            break
+          case 'ACCESS_REQUESTED':
+            set(result, 'currentProject.cloudProject', {
+              __typename: 'CloudProjectUnauthorized',
+              message: '',
+              hasRequestedAccess: true,
+            })
+
+            break
+          case 'UNAUTHORIZED':
+            set(result, 'currentProject.cloudProject', {
+              __typename: 'CloudProjectUnauthorized',
+              message: '',
+              hasRequestedAccess: false,
+            })
+
+            break
+          default:
+            set(result, 'currentProject.cloudProject.__typename', 'CloudProjectSpec')
+            break
+        }
+      },
+      render: (gql) => {
+        const showLoginSpy = cy.spy().as('showLoginSpy')
+        const showConnectToProjectSpy = cy.spy().as('showConnectToProjectSpy')
+        const requestAccessSpy = cy.spy().as('requestAccessSpy')
+
+        return (
+          <div class="flex justify-around">
+            <SpecsListCloudButton
+              gql={gql}
+              projectConnectionStatus={status}
+              onShowLogin={showLoginSpy}
+              onShowConnectToProject={showConnectToProjectSpy}
+              onRequestAccess={requestAccessSpy}
+            />
+          </div>)
+      },
+    })
+  }
+
+  function takeSnapshots () {
+    cy.viewport(800, 100)
+    cy.percySnapshot('medium')
+    cy.viewport(1200, 100)
+    cy.percySnapshot('wide')
+  }
+
+  context('not connected', () => {
+    beforeEach(() => {
+      mountWithStatus('NOT_CONNECTED')
+    })
+
+    it('should render button', () => {
+      cy.findByTestId('cloud-button')
+      .should('exist')
+      .click()
+
+      cy.get('@showConnectToProjectSpy').should('have.been.calledOnce')
+
+      takeSnapshots()
+    })
+  })
+
+  context('logged out', () => {
+    beforeEach(() => {
+      mountWithStatus('LOGGED_OUT')
+    })
+
+    it('renders', () => {
+      cy.findByTestId('cloud-button')
+      .should('exist')
+      .click()
+
+      cy.get('@showLoginSpy').should('have.been.calledOnce')
+
+      takeSnapshots()
+    })
+  })
+
+  context('unauthorized', () => {
+    beforeEach(() => {
+      mountWithStatus('UNAUTHORIZED')
+    })
+
+    it('renders', () => {
+      cy.findByTestId('cloud-button')
+      .should('exist')
+      .click()
+
+      cy.get('@requestAccessSpy').should('have.been.calledOnce')
+
+      takeSnapshots()
+    })
+  })
+
+  context('access requested', () => {
+    beforeEach(() => {
+      mountWithStatus('ACCESS_REQUESTED')
+    })
+
+    it('renders', () => {
+      cy.findByTestId('cloud-button')
+      .should('exist')
+      .should('be.disabled')
+
+      takeSnapshots()
+    })
+  })
+})
diff --git a/packages/app/src/specs/SpecsListCloudButton.vue b/packages/app/src/specs/SpecsListCloudButton.vue
new file mode 100644
index 000000000000..0e1165d717f4
--- /dev/null
+++ b/packages/app/src/specs/SpecsListCloudButton.vue
@@ -0,0 +1,126 @@
+<template>
+  <Button
+    data-cy="cloud-button"
+    variant="linkBold"
+    :prefix-icon="buttonOptions.icon"
+    :disabled="!buttonOptions.emits"
+    prefix-icon-class="icon-light-indigo-100 icon-dark-indigo-500"
+    @click.stop.prevent="handleClick"
+  >
+    <span class="hidden lg:inline">{{ buttonOptions.text }}</span>
+    <span class="lg:hidden">{{ buttonOptions.textShort }}</span>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@cy/components/Button.vue'
+import type { FunctionalComponent, SVGAttributes } from 'vue'
+import UserIcon from '~icons/cy/user-outline_x16.svg'
+import ChainIcon from '~icons/cy/chain-link_x16.svg'
+import PlayIcon from '~icons/cy/play-large_x16.svg'
+import { computed } from 'vue'
+import { gql } from '@urql/vue'
+import type { SpecCloudDataHoverButtonFragment } from '../generated/graphql'
+import { useI18n } from '@cy/i18n'
+
+type ProjectConnectionStatus = 'NOT_FOUND' | 'LOGGED_OUT' | 'NOT_CONNECTED' | 'UNAUTHORIZED' | 'ACCESS_REQUESTED'
+
+const { t } = useI18n()
+
+const emits = defineEmits<{
+  (eventName: 'showLogin'): void
+  (eventName: 'showConnectToProject'): void
+  (eventName: 'requestAccess'): void
+}>()
+
+const props = defineProps<{
+  gql: SpecCloudDataHoverButtonFragment
+  projectConnectionStatus: ProjectConnectionStatus
+}>()
+
+gql`
+fragment SpecCloudDataHoverButton on Query {
+  currentProject {
+    id
+    cloudProject{
+      __typename
+      ... on CloudProjectUnauthorized {
+        hasRequestedAccess
+      }
+    }
+  }
+  ...Auth
+  ...CloudConnectModals
+  ...RequestAccessButton
+}
+`
+
+type ButtonOptions = {
+  text: string
+  textShort: string
+  icon: FunctionalComponent<SVGAttributes>
+  emits: 'showLogin' | 'showConnectToProject' | 'requestAccess' | undefined
+}
+
+const VALUES: Record<ProjectConnectionStatus, ButtonOptions> = {
+  LOGGED_OUT: {
+    text: t('specPage.hoverButton.connect'),
+    textShort: t('specPage.hoverButton.connect'),
+    icon: UserIcon,
+    emits: 'showLogin',
+  },
+  NOT_CONNECTED: {
+    text: t('specPage.hoverButton.connectProject'),
+    textShort: t('specPage.hoverButton.connectProjectShort'),
+    icon: ChainIcon,
+    emits: 'showConnectToProject',
+  },
+  NOT_FOUND: {
+    text: t('specPage.hoverButton.connectProject'),
+    textShort: t('specPage.hoverButton.connectProjectShort'),
+    icon: ChainIcon,
+    emits: 'showConnectToProject',
+  },
+  UNAUTHORIZED: {
+    text: t('specPage.hoverButton.requestAccess'),
+    textShort: t('specPage.hoverButton.requestAccessShort'),
+    icon: PlayIcon,
+    emits: 'requestAccess',
+  },
+  ACCESS_REQUESTED: {
+    text: t('specPage.hoverButton.requestSent'),
+    textShort: t('specPage.hoverButton.requestSentShort'),
+    icon: PlayIcon,
+    emits: undefined,
+  },
+}
+
+const buttonOptions = computed(() => {
+  const options: ButtonOptions = {
+    text: VALUES[props.projectConnectionStatus].text,
+    textShort: VALUES[props.projectConnectionStatus].textShort,
+    icon: VALUES[props.projectConnectionStatus].icon,
+    emits: VALUES[props.projectConnectionStatus].emits,
+  }
+
+  return options
+})
+
+const handleClick = () => {
+  switch (props.projectConnectionStatus) {
+    case 'LOGGED_OUT':
+      emits('showLogin')
+      break
+    case 'NOT_CONNECTED':
+    case 'NOT_FOUND':
+      emits('showConnectToProject')
+      break
+    case 'UNAUTHORIZED':
+      emits('requestAccess')
+      break
+    default:
+      return
+  }
+}
+
+</script>
diff --git a/packages/app/src/specs/SpecsListHoverCell.cy.tsx b/packages/app/src/specs/SpecsListHoverCell.cy.tsx
new file mode 100644
index 000000000000..d151e277a95a
--- /dev/null
+++ b/packages/app/src/specs/SpecsListHoverCell.cy.tsx
@@ -0,0 +1,61 @@
+import SpecsListHoverCell from './SpecsListHoverCell.vue'
+
+const contentSelector = '[data-testid=content]'
+const hoverSelector = '[data-testid=hover]'
+
+describe('<SpecsListHoverCell/>', () => {
+  it('should show hover when hover enabled', () => {
+    cy.mount(() => (
+      <SpecsListHoverCell
+        isHoverDisabled={false}
+        // @ts-ignore - doesn't know about vSlots
+        vSlots={{
+          content: () => <div data-testid="content">content</div>,
+          hover: () => <div data-testid="hover">Hover</div>,
+        }}
+      />
+    )).get(contentSelector)
+    .should('be.visible')
+    .get(hoverSelector)
+    .should('not.exist')
+    .log('hover content to show hover slot')
+    .get(contentSelector)
+    .trigger('mouseenter')
+    .should('not.exist')
+    .get(hoverSelector)
+    .should('be.visible')
+    .log('hover slot should stay visible if hovering the hover slot')
+    .get(hoverSelector)
+    .trigger('mouseenter')
+    .should('be.visible')
+    .get(contentSelector)
+    .should('not.exist')
+    .log('hover content will be removed from DOM if no longer hovering it or the content slot')
+    .get(hoverSelector)
+    .trigger('mouseleave')
+    .should('not.exist')
+    .get(contentSelector)
+    .should('be.visible')
+  })
+
+  it('should not show hover when hover disabled', () => {
+    cy.mount(() => (
+      <SpecsListHoverCell
+        isHoverDisabled={true}
+        // @ts-ignore - doesn't know about vSlots
+        vSlots={{
+          content: () => <div data-testid="content">content</div>,
+          hover: () => <div data-testid="hover">Hover</div>,
+        }}
+      />
+    )).get(contentSelector)
+    .should('be.visible')
+    .get(hoverSelector)
+    .should('not.exist')
+    .get(contentSelector)
+    .trigger('mouseenter')
+    .should('exist')
+    .get(hoverSelector)
+    .should('not.exist')
+  })
+})
diff --git a/packages/app/src/specs/SpecsListHoverCell.vue b/packages/app/src/specs/SpecsListHoverCell.vue
new file mode 100644
index 000000000000..7dd14a23694e
--- /dev/null
+++ b/packages/app/src/specs/SpecsListHoverCell.vue
@@ -0,0 +1,76 @@
+<template>
+  <div
+    ref="columnRef"
+    class="relative"
+  >
+    <TransitionQuickFade>
+      <slot
+        v-if="!shouldShowHover"
+        name="content"
+      />
+      <div
+        v-else
+        ref="hoverButton"
+        class="inset-y-1 right-0 absolute"
+      >
+        <slot
+          name="hover"
+        />
+      </div>
+    </TransitionQuickFade>
+  </div>
+</template>
+
+/**
+  SpecsListHoverCell
+
+  Enables a cell in the SpecsList to have content switched out if the cell is hovered.
+
+  It contains two slots.  One for the main `content` and one for the `hover` content.
+
+  Note: This component contains styling specific for the SpecsList.
+ */
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useTimeoutFn, useElementHover, Stoppable } from '@vueuse/core'
+import TransitionQuickFade from '../../../frontend-shared/src/components/transitions/TransitionQuickFade.vue'
+
+const props = defineProps<{
+  isHoverDisabled?: boolean
+}>()
+
+const columnRef = ref()
+const hoveredItem = ref()
+
+const shouldShowHover = ref(false)
+
+const isHoveredColumn = useElementHover(columnRef)
+const isHoveredItem = useElementHover(hoveredItem)
+
+let controls: Stoppable
+
+watch([isHoveredColumn, isHoveredItem], () => {
+  if (props.isHoverDisabled) {
+    return
+  }
+
+  if (controls) {
+    controls.stop()
+  }
+
+  if (isHoveredItem.value) {
+    isHoveredColumn.value = false
+  }
+
+  if (isHoveredColumn.value || isHoveredItem.value) {
+    if (shouldShowHover.value) return
+
+    controls = useTimeoutFn(() => {
+      shouldShowHover.value = true
+    }, 200)
+  } else if (!isHoveredColumn.value && !isHoveredItem.value) {
+    shouldShowHover.value = false
+  }
+})
+
+</script>
diff --git a/packages/app/src/specs/SpecsListRowItem.cy.tsx b/packages/app/src/specs/SpecsListRowItem.cy.tsx
index 381be356afb3..00ba82a74cda 100644
--- a/packages/app/src/specs/SpecsListRowItem.cy.tsx
+++ b/packages/app/src/specs/SpecsListRowItem.cy.tsx
@@ -8,6 +8,7 @@ describe('SpecItem', () => {
       <SpecsListRowItem
         isLeaf={true}
         route={{ path: '/specs/runner', query: { file: '' } }}
+        gridColumns="grid-cols-[1fr,1fr]"
         onToggleRow={toggleRowHandler}
         // @ts-ignore - doesn't know about vSlots
         vSlots={{
@@ -35,6 +36,7 @@ describe('SpecItem', () => {
     cy.mount(() => (
       <SpecsListRowItem
         isLeaf={false}
+        gridColumns="grid-cols-[1fr]"
         onToggleRow={toggleRowHandler}
         // @ts-ignore - doesn't know about vSlots
         vSlots={{
@@ -50,4 +52,28 @@ describe('SpecItem', () => {
     cy.get('[data-cy="spec-item-directory"]').click('right')
     cy.wrap(toggleRowHandler).should('have.callCount', 2)
   })
+
+  it('passes utm parameter to slot', () => {
+    cy.mount(() => (
+      <SpecsListRowItem
+        isLeaf={true}
+        route={{ path: '/specs/runner', query: { file: '' } }}
+        gridColumns="grid-cols-[1fr,1fr]"
+        is-project-connected={false}
+        // @ts-ignore - doesn't know about vSlots
+        vSlots={{
+          'latest-runs': () => <span data-cy='latest'>Runs</span>,
+          'average-duration': () => <span data-cy='duration'>Duration</span>,
+          'connect-button': (props) => <span data-cy='button'>{props.utmMedium}</span>,
+        }}
+      />))
+
+    cy.findByTestId('latest').trigger('mouseenter').wait(300)
+    cy.findByTestId('button').contains('Specs Latest Runs Empty State')
+    cy.findByTestId('button').trigger('mouseleave')
+
+    cy.findByTestId('duration').trigger('mouseenter').wait(300)
+    cy.findByTestId('button').contains('Specs Average Duration Empty State')
+    cy.findByTestId('button').trigger('mouseleave')
+  })
 })
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
index e85b7769b74b..ff2e3d2bcb21 100644
--- a/packages/app/src/specs/SpecsListRowItem.vue
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -2,7 +2,8 @@
   <div data-cy="specs-list-row">
     <component
       :is="isLeaf ? 'RouterLink' : 'div'"
-      class="h-full outline-none ring-inset grid pr-20px grid-cols-7 group md:grid-cols-9 focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+      class="h-full outline-none ring-inset grid pr-20px group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+      :class="gridColumns"
       :to="route"
       :data-cy="isLeaf ? 'spec-item-link' : 'spec-item-directory'"
       @click="emit('toggleRow')"
@@ -11,7 +12,6 @@
     >
       <div
         data-cy="specs-list-row-file"
-        class="col-span-4"
       >
         <slot name="file" />
       </div>
@@ -20,28 +20,54 @@
       >
         <div
           data-cy="specs-list-row-git-info"
-          class="col-span-2"
         >
           <slot name="git-info" />
         </div>
-        <div>
-          <slot name="latest-runs" />
-        </div>
-        <div class="hidden md:col-span-2 md:block">
-          <slot name="average-duration" />
-        </div>
+        <SpecsListHoverCell
+          data-cy="specs-list-row-latest-runs"
+          :is-hover-disabled="isProjectConnected"
+        >
+          <template #content>
+            <slot name="latest-runs" />
+          </template>
+          <template #hover>
+            <slot
+              name="connect-button"
+              utmMedium="Specs Latest Runs Empty State"
+            />
+          </template>
+        </SpecsListHoverCell>
+        <SpecsListHoverCell
+          data-cy="specs-list-row-average-duration"
+          :is-hover-disabled="isProjectConnected"
+          class="hidden md:block"
+        >
+          <template #content>
+            <slot name="average-duration" />
+          </template>
+          <template #hover>
+            <slot
+              name="connect-button"
+              utmMedium="Specs Average Duration Empty State"
+            />
+          </template>
+        </SpecsListHoverCell>
       </template>
     </component>
   </div>
 </template>
 
 <script setup lang="ts">
+import SpecsListHoverCell from './SpecsListHoverCell.vue'
+
 import { useTimeout } from '@vueuse/core'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineProps<{
   isLeaf: boolean
   route?: RouteLocationRaw
+  isProjectConnected?: boolean
+  gridColumns: string
 }>()
 
 const emit = defineEmits<{
@@ -54,4 +80,5 @@ function handleCtrlClick (): void {
   // noop intended to reduce the chances of opening tests multiple tabs
   // which is not a supported state in Cypress
 }
+
 </script>
diff --git a/packages/frontend-shared/src/components/Button.cy.tsx b/packages/frontend-shared/src/components/Button.cy.tsx
index 074f129645f3..0cc502c93835 100644
--- a/packages/frontend-shared/src/components/Button.cy.tsx
+++ b/packages/frontend-shared/src/components/Button.cy.tsx
@@ -5,17 +5,27 @@ import { createRouter, createWebHistory } from 'vue-router'
 const prefixIcon = () => <IconCoffee data-cy="coffee-icon"/>
 
 describe('<Button />', { viewportWidth: 300, viewportHeight: 400 }, () => {
-  it('playground', () => {
+  it('playground', { viewportWidth: 300, viewportHeight: 800 }, () => {
     cy.mount(() => (
       <div class="grid p-6 gap-2">
         <Button size="sm">Primary with text</Button>
         <Button size="md">Primary with text</Button>
         <Button size="lg">Primary with text</Button>
-        <Button variant="outline" size="sm" prefixIcon={IconCoffee}>Primary with text</Button>
+        <Button variant="outline" size="sm" prefixIcon={IconCoffee}>Outline with text and icon</Button>
         <Button variant="outline">Outline with text</Button>
         <Button variant="outline" disabled>Outline disabled</Button>
         <Button disabled>Primary disabled</Button>
         <Button prefixIcon={prefixIcon}>Has a Prefix Icon</Button>
+        <Button variant="tertiary">Tertiary with text</Button>
+        <Button variant="tertiary" disabled>Tertiary with text</Button>
+        <Button variant="link">Link with text</Button>
+        <Button variant="link" disabled>Link with text disabled</Button>
+        <Button variant="linkBold">Link bold with text</Button>
+        <Button variant="linkBold" disabled>Link bold with text disabled</Button>
+        <Button variant="text">Text with text</Button>
+        <Button variant="text" disabled>Text with text disabled</Button>
+        <Button variant="secondary">Secondary with text</Button>
+        <Button variant="secondary" disabled>Secondary with text disabled</Button>
       </div>
     ))
 
diff --git a/packages/frontend-shared/src/components/Button.vue b/packages/frontend-shared/src/components/Button.vue
index e9787af700da..d715f6c1bbc5 100644
--- a/packages/frontend-shared/src/components/Button.vue
+++ b/packages/frontend-shared/src/components/Button.vue
@@ -85,6 +85,7 @@ const VariantClassesTable = {
   tertiary: 'text-indigo-500 bg-indigo-50 border-transparent hocus-default',
   pending: 'bg-gray-500 text-white',
   link: 'border-transparent text-indigo-600 hocus-default',
+  linkBold: 'border-transparent text-indigo-500 font-medium',
   text: 'border-0',
   secondary: 'bg-jade-500 text-white hocus-secondary',
 } as const
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index f7e056891142..d93a9b32bd9b 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -160,6 +160,15 @@
       "flakyRuns": "{flakyRuns} flaky runs / {totalRuns} total | {flakyRuns} flaky run / {totalRuns} total | {flakyRuns} flaky runs / {totalRuns} total",
       "lastFlaky": "Last run flaky | Last flaky {runsSinceLastFlake} run ago | Last flaky {runsSinceLastFlake} runs ago"
     },
+    "hoverButton": {
+      "connect": "Connect",
+      "connectProject": "Connect project",
+      "connectProjectShort": "Connect",
+      "requestAccess": "Request access",
+      "requestAccessShort": "Request",
+      "requestSent": "Request sent",
+      "requestSentShort": "Sent"
+    },
     "connectProjectButton": "Connect your project",
     "dashboardLoginButton": "Log in to the Dashboard",
     "reconnectProjectButton": "Reconnect your project",