From 06783424c2c495679fa58db31643200490ad30a7 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Tue, 22 Nov 2022 20:48:55 -0500
Subject: [PATCH 01/22] adding debug page

---
 packages/app/package.json                     |  2 +-
 .../app/src/navigation/SidebarNavigation.vue  |  2 ++
 .../navigation/SidebarNavigationRow.cy.tsx    |  2 ++
 packages/app/src/pages/Debug.vue              |  7 ++++++
 yarn.lock                                     | 22 +++++++++----------
 5 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 packages/app/src/pages/Debug.vue

diff --git a/packages/app/package.json b/packages/app/package.json
index 0d83a0a21ca3..96eeb61c8f7a 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -20,7 +20,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-icon": "^0.4.2",
+    "@cypress-design/vue-icon": "^0.12.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 0814af41bd76..a27c000505c2 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -94,6 +94,7 @@ import { gql, useMutation, useQuery } from '@urql/vue'
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
 import KeyboardBindingsModal from './KeyboardBindingsModal.vue'
 import {
+  IconStatusFailedOutline, // not available in size 24
   IconTechnologyCodeEditor,
   IconTechnologyTestResults,
   IconObjectGear,
@@ -112,6 +113,7 @@ const { t } = useI18n()
 const navigation = [
   { name: 'Specs', icon: IconTechnologyCodeEditor, href: '/specs' },
   { name: 'Runs', icon: IconTechnologyTestResults, href: '/runs' },
+  { name: 'Debug', icon: IconStatusFailedOutline, href: '/debug' },
   { name: 'Settings', icon: IconObjectGear, href: '/settings' },
 ] as const
 
diff --git a/packages/app/src/navigation/SidebarNavigationRow.cy.tsx b/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
index 58a10769d15e..c9bea2ec8f2b 100644
--- a/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
@@ -1,5 +1,6 @@
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
 import {
+  IconStatusFailedOutline,
   IconTechnologyCodeEditor,
   IconTechnologyTestResults,
   IconObjectGear,
@@ -14,6 +15,7 @@ describe('SidebarNavigationRow', () => {
       >
         <h2 class="text-white text-sm uppercase truncate">Tab Style</h2>
         <SidebarNavigationRow icon={IconTechnologyCodeEditor} name="book" active isNavBarExpanded/>
+        <SidebarNavigationRow icon={IconStatusFailedOutline} name="debug" isNavBarExpanded/>
         <SidebarNavigationRow icon={IconTechnologyTestResults} name="settings" isNavBarExpanded/>
         <SidebarNavigationRow icon={IconObjectGear} name="test-results" isNavBarExpanded/>
         <SidebarNavigationRow icon={IconGeneralPlaceholder} name="placeholder" isNavBarExpanded/>
diff --git a/packages/app/src/pages/Debug.vue b/packages/app/src/pages/Debug.vue
new file mode 100644
index 000000000000..7a5bc4a700d8
--- /dev/null
+++ b/packages/app/src/pages/Debug.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>Debug Page</div>
+</template>
+
+<script setup>
+
+</script>
diff --git a/yarn.lock b/yarn.lock
index 684bbf3d4afb..63faa3851f4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2326,19 +2326,17 @@
     windicss "^3.5.1"
     windicss-webpack-plugin "^1.6.10"
 
-"@cypress-design/icon-registry@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.4.2.tgz#bc2d913208acb33b5dfb1d8f6d7929b153e32ba0"
-  integrity sha512-iyH5xFc2abpwVPTEjoJ2ILIQy79DaR6ata76HAk9NHPWVUwG/yUPEzvp3m2T8IqgebNEuTtl4mBHM/u+jycxng==
-  dependencies:
-    camelcase "^6.3.0"
+"@cypress-design/icon-registry@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.14.0.tgz#c30cbb013b7a86700941677da661229d81493399"
+  integrity sha512-wIXr00J7azl8Jl+3DLhSK8WkWXRUvfqDKUnLrEyxQjrzbwNIQIPL0bqgY30CZbx8xoPXCIewJDYXvhgbWZQOhQ==
 
-"@cypress-design/vue-icon@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.4.2.tgz#3574a749efbdaf83f48251108c016c3d383160bd"
-  integrity sha512-i7YWizC/c1LFdxVZSbyTIOrj4LeiIxypemCXdygacmvogQS2buBC+CovqCMFAzKqnfBZUBGiQajMWWM5rzIduw==
+"@cypress-design/vue-icon@^0.12.1":
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.12.1.tgz#cb348fb697dd65305c927522643b4ede6b113821"
+  integrity sha512-AI5XUqzL9AwoNL0rvQNWzyrP5WQNGYPI2phC7b0MhO7hjrZN6Qv+Le7kHhEpAIpWuVi222t699jlvXoTRNr1Jw==
   dependencies:
-    "@cypress-design/icon-registry" "^0.4.2"
+    "@cypress-design/icon-registry" "^0.14.0"
 
 "@cypress/commit-info@2.2.0":
   version "2.2.0"
@@ -11571,7 +11569,7 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0, camelcase@^6.2.0, camelcase@^6.3.0:
+camelcase@^6.0.0, camelcase@^6.2.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==

From 7215efd1adc3ae4afdfc125922678245d94b38f0 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Wed, 23 Nov 2022 08:21:22 -0500
Subject: [PATCH 02/22] Fixing sidebar e2e tests

---
 packages/app/cypress/e2e/sidebar_navigation.cy.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/app/cypress/e2e/sidebar_navigation.cy.ts b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
index 48d791221fb6..f21c566f4a92 100644
--- a/packages/app/cypress/e2e/sidebar_navigation.cy.ts
+++ b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
@@ -16,6 +16,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       .tab().should('have.attr', 'data-cy', 'sidebar-header').should('have.attr', 'role', 'button')
       .tab().should('have.attr', 'href', '#/specs').should('have.prop', 'tagName', 'A')
       .tab().should('have.attr', 'href', '#/runs').should('have.prop', 'tagName', 'A')
+      .tab().should('have.attr', 'href', '#/debug').should('have.prop', 'tagName', 'A')
       .tab().should('have.attr', 'href', '#/settings').should('have.prop', 'tagName', 'A')
       .tab().should('have.attr', 'data-cy', 'keyboard-modal-trigger').should('have.prop', 'tagName', 'BUTTON')
     })
@@ -146,6 +147,10 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.contains('.v-popper--some-open--tooltip', 'Specs')
       cy.findByTestId('sidebar-link-specs-page').trigger('mouseout')
 
+      cy.findByTestId('sidebar-link-debug-page').trigger('mouseenter')
+      cy.contains('.v-popper--some-open--tooltip', 'Debug')
+      cy.findByTestId('sidebar-link-debug-page').trigger('mouseout')
+
       cy.findByTestId('sidebar-link-settings-page').trigger('mouseenter')
       cy.contains('.v-popper--some-open--tooltip', 'Settings')
       cy.findByTestId('sidebar-link-settings-page').trigger('mouseout')
@@ -237,6 +242,14 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.get('.router-link-active').findByText('Specs').should('be.visible')
     })
 
+    it('has a menu item labeled "Debug" which takes you to the Debug page', () => {
+      cy.get('[data-cy="app-header-bar"]').findByText('Debug').should('not.exist')
+
+      cy.findByTestId('sidebar-link-debug-page').should('have.text', 'Debug').should('be.visible').click()
+      cy.get('[data-cy="app-header-bar"]').findByText('Debug').should('be.visible')
+      cy.get('.router-link-active').findByText('Debug').should('be.visible')
+    })
+
     it('Specs sidebar nav link is not active when a test is running', () => {
       cy.location('hash').should('equal', '#/specs')
       cy.contains('.router-link-exact-active', 'Specs')

From 02e23a365eb409fdd9c4eeffc8d6c7280ec917ad Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Thu, 1 Dec 2022 10:06:13 -0500
Subject: [PATCH 03/22] Adding more content to the Debug page and header
 updates

---
 packages/app/src/debug/DebugContainer.cy.tsx  |  52 ++++
 packages/app/src/debug/DebugContainer.vue     |  94 ++++++
 packages/app/src/debug/DebugPageHeader.cy.tsx |   5 +-
 packages/app/src/debug/DebugPageHeader.vue    |  50 +--
 packages/app/src/debug/DebugSpecList.vue      |  37 +++
 packages/app/src/pages/Debug.vue              |  24 +-
 .../frontend-shared/src/locales/en-US.json    |   8 +
 packages/graphql/schemas/cloud.graphql        | 294 +++++++++++++++++-
 packages/graphql/schemas/schema.graphql       | 222 ++++++++++++-
 9 files changed, 755 insertions(+), 31 deletions(-)
 create mode 100644 packages/app/src/debug/DebugContainer.cy.tsx
 create mode 100644 packages/app/src/debug/DebugContainer.vue
 create mode 100644 packages/app/src/debug/DebugSpecList.vue

diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
new file mode 100644
index 000000000000..4e17961d796b
--- /dev/null
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -0,0 +1,52 @@
+import { DebugSpecsFragmentDoc } from '../generated/graphql-test'
+import DebugContainer from './DebugContainer.vue'
+import { defaultMessages } from '@cy/i18n'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+
+describe('<DebugContainer />', () => {
+  context('empty states', () => {
+    const validateEmptyState = (expectedMessage: string) => {
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        render: (gqlVal) => {
+          return (
+            <DebugContainer
+              gql={gqlVal}
+            />
+          )
+        },
+      })
+
+      cy.findByTestId('debug-empty').contains(expectedMessage)
+    }
+
+    it('shows not logged in', () => {
+      validateEmptyState(defaultMessages.debugPage.notLoggedIn)
+    })
+
+    it('is logged in', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+
+      validateEmptyState(defaultMessages.debugPage.notConnected)
+    })
+
+    it('has no runs', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+      loginConnectStore.setProjectFlag('isProjectConnected', true)
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        render: (gqlVal) => {
+          return (
+            <DebugContainer
+              gql={gqlVal}
+            />
+          )
+        },
+      })
+
+      cy.findByTestId('debug-empty').contains(defaultMessages.debugPage.noRuns)
+    })
+  })
+})
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
new file mode 100644
index 000000000000..36cf9087d78f
--- /dev/null
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div
+      v-if="loginConnectStore.user.isLoggedIn && loginConnectStore.project.isProjectConnected && run"
+    >
+      <DebugPageHeader
+        :gql="run"
+        commits-ahead="0"
+      />
+      <DebugSpecList
+        :gql="specs"
+      />
+    </div>
+    <div
+      data-cy="debug-empty"
+    >
+      <div
+        v-if="!loginConnectStore.user.isLoggedIn"
+      >
+        {{ t('debugPage.notLoggedIn') }}
+      </div>
+      <div
+        v-if="loginConnectStore.user.isLoggedIn && !loginConnectStore.project.isProjectConnected"
+      >
+        {{ t('debugPage.notConnected' ) }}
+      </div>
+      <div
+        v-if="loginConnectStore.user.isLoggedIn && loginConnectStore.project.isProjectConnected && !run"
+      >
+        {{ t('debugPage.noRuns') }}
+      </div>
+    </div>
+    {{ props.gql }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { gql } from '@urql/vue'
+import { computed } from '@vue/reactivity'
+import type { DebugSpecsFragment } from '../generated/graphql-test'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import DebugPageHeader from './DebugPageHeader.vue'
+import DebugSpecList from './DebugSpecList.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+gql`
+  fragment DebugSpecs on Query {
+    currentProject {
+      id
+      cloudProject {
+        __typename
+        ... on CloudProject {
+          id
+          runByNumber(runNumber: 2) {
+            ...DebugPage
+            id
+            runNumber
+            status
+            overLimitActionTitle
+            overLimitActionUrl
+            testsForReview {
+              specs(viewBy: FAILED, page:1, perPage: 2) {
+                id
+               ...DebugSpecList 
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+const props = defineProps<{
+  gql: DebugSpecsFragment
+}>()
+
+const loginConnectStore = useLoginConnectStore()
+
+const run = computed(() => {
+  return props.gql.currentProject?.cloudProject?.__typename === 'CloudProject' && props.gql.currentProject.cloudProject.runByNumber
+})
+
+const specs = computed(() => {
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProject') {
+    return props.gql.currentProject.cloudProject.runByNumber?.testsForReview?.specs || []
+  }
+
+  return []
+})
+
+</script>
diff --git a/packages/app/src/debug/DebugPageHeader.cy.tsx b/packages/app/src/debug/DebugPageHeader.cy.tsx
index 14ebb3bb5edd..8a34d5f83434 100644
--- a/packages/app/src/debug/DebugPageHeader.cy.tsx
+++ b/packages/app/src/debug/DebugPageHeader.cy.tsx
@@ -20,12 +20,13 @@ describe('<DebugPageHeader />', {
             result.commitInfo.summary = 'Adding a hover state to the button component'
             result.commitInfo.branch = 'feature/DESIGN-183'
             result.commitInfo.authorName = 'cypressDTest'
+            result.commitInfo.sha = 'b5e6fde'
           }
         }
       },
       render: (gqlVal) => {
         return (
-          <DebugPageHeader gql={gqlVal} runNumber={468} commitsAhead='You are 2 commits ahead' commitHash='b5e6fde'/>
+          <DebugPageHeader gql={gqlVal} commitsAhead='You are 2 commits ahead' commitHash='b5e6fde'/>
         )
       },
     })
@@ -36,7 +37,7 @@ describe('<DebugPageHeader />', {
 
     cy.findByTestId('debug-runCommit-info').children().should('have.length', 3)
     cy.findByTestId('debug-runNumber')
-    .should('have.text', ' Run #468')
+    .should('have.text', ' Run #432')
     .should('have.css', 'color', 'rgb(90, 95, 122)')
 
     cy.findByTestId('debug-commitsAhead')
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index f84e9e667612..65a335d9f418 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -4,12 +4,12 @@
     class="flex flex-col pb-24px gap-16px"
   >
     <div
-      :data-cy="`debug-header`"
-      class="grid px-24px w-full overflow-hidden flex items-center gap-y-2 py-24px"
+      data-cy="debug-header"
+      class="flex w-full grid py-24px px-24px gap-y-2 overflow-hidden items-center"
     >
       <ul
         data-cy="header-top"
-        class="flex self-stretch items-center gap-x-2 flex-row whitespace-nowrap"
+        class="flex flex-row gap-x-2 self-stretch items-center whitespace-nowrap"
       >
         <li
           v-if="debug?.commitInfo?.summary"
@@ -19,19 +19,19 @@
           {{ debug.commitInfo.summary }}
         </li>
         <div
-          v-if="props.runNumber && props.commitsAhead"
-          class="border rounded border-gray-100 items-center flex text-sm h-6"
+          v-if="debug.runNumber && props.commitsAhead"
+          class="border rounded flex border-gray-100 h-6 text-sm items-center"
           data-cy="debug-runCommit-info"
         >
           <span
-            class="font-medium text-gray-700 px-2 mx-px items-center"
+            class="font-medium mx-px px-2 text-gray-700 items-center"
             data-cy="debug-runNumber"
           >
-            Run #{{ props.runNumber }}
+            Run #{{ debug.runNumber }}
           </span>
-          <div class="w-px h-3 my-6px bg-gray-100" />
+          <div class="bg-gray-100 h-3 my-6px w-px" />
           <span
-            class="font-normal text-orange-500 px-2 mx-px items-center"
+            class="font-normal mx-px px-2 text-orange-500 items-center"
             data-cy="debug-commitsAhead"
           >
             {{ props.commitsAhead }}
@@ -46,13 +46,13 @@
             :href="debug.url || '#'"
             :use-default-hocus="false"
           >
-            <span class="sr-only">Dashboard Link:</span> View in the dashboard
+            <span class="sr-only">Dashboard Link:</span> {{ t('debugPage.header.runUrl') }}
           </ExternalLink>
         </li>
       </ul>
       <ul
         data-cy="metadata"
-        class="flex flex-wrap gap-x-2 items-center whitespace-nowrap children:flex children:items-center font-normal text-sm text-gray-700"
+        class="flex flex-wrap font-normal text-sm text-gray-700 gap-x-2 items-center whitespace-nowrap children:flex children:items-center"
       >
         <li
           :data-cy="'debug-results'"
@@ -65,24 +65,24 @@
           v-if="debug?.commitInfo?.branch"
           data-cy="debug-header-branch"
         >
-          <i-cy-tech-branch-h_x16 class="mr-1 icon-dark-gray-300 mr-8px" />
+          <i-cy-tech-branch-h_x16 class="mr-1 mr-8px icon-dark-gray-300" />
           <span class="sr-only">Branch Name:</span> {{ debug.commitInfo.branch }}
         </li>
         <li
-          v-if="props.commitHash"
+          v-if="debug.commitInfo?.sha"
           data-cy="debug-header-commitHash"
         >
           <CommitIcon
-            class="fill-white h-16px w-16px mr-11px"
+            class="h-16px fill-white mr-11px w-16px"
           />
-          <span class="sr-only">Commit Hash:</span> {{ props.commitHash }}
+          <span class="sr-only">Commit Hash:</span> {{ debug.commitInfo?.sha?.substring(0,7) }}
         </li>
         <li
           v-if="debug?.commitInfo?.authorName"
           data-cy="debug-header-author"
         >
           <i-cy-general-user_x16
-            class="mr-1 icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200 mr-11px"
+            class="mr-1 mr-11px icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200"
             data-cy="debug-header-avatar"
           />
           <span class="sr-only">Commit Author:</span> {{ debug.commitInfo.authorName }}
@@ -97,7 +97,7 @@
             stroke-color="gray-500"
             fill-color="gray-50"
           />
-          <span class="sr-only">Run Total Duration:</span> {{ debug.totalDuration }} ({{ relativeCreatedAt }})
+          <span class="sr-only">Run Total Duration:</span> {{ totalDuration }} ({{ relativeCreatedAt }})
         </li>
       </ul>
     </div>
@@ -112,23 +112,24 @@ import CommitIcon from '~icons/cy/commit_x14'
 import { IconTimeStopwatch } from '@cypress-design/vue-icon'
 import { gql } from '@urql/core'
 import { dayjs } from '../runs/utils/day.js'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
-// runNumber and commitHash dont currently exist in the query and therefore are being obtained as props instead
 gql`
 fragment DebugPage on CloudRun {
 	id
+  runNumber
 	createdAt
 	status
   totalDuration
-  url
-  tags {
-    id
-    name
+  commitInfo {
+    sha
   }
+  url
 	...RunResults
 	commitInfo {
 		authorName
-		authorEmail
 		summary
 		branch
 	}
@@ -138,13 +139,12 @@ fragment DebugPage on CloudRun {
 const props = defineProps<{
   gql: DebugPageFragment
   commitsAhead: string
-  commitHash: string
-  runNumber: number
 }>()
 
 const debug = computed(() => props.gql)
 
 const relativeCreatedAt = computed(() => dayjs(new Date(debug.value.createdAt!)).fromNow())
+const totalDuration = computed(() => dayjs.duration(debug.value.totalDuration!).format('HH:mm:ss').replace(/^0+:/, ''))
 
 </script>
 <style scoped>
diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
new file mode 100644
index 000000000000..1bb01a0d2826
--- /dev/null
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    v-for="spec in props.gql"
+    :key="spec?.id"
+  >
+    Failed Spec
+    <div
+      v-for="test in spec?.testResults"
+      :key="test?.id"
+    >
+      {{ test?.title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { gql } from '@urql/core'
+import type { DebugSpecListFragment } from '../generated/graphql'
+
+gql`
+fragment DebugSpecList on TestForReviewSpec {
+  id
+  path
+  testResults {
+    id
+    title(depth: 5)
+    titleParts
+    duration
+  }
+}
+`
+
+const props = defineProps<{
+  gql: DebugSpecListFragment[]
+}>()
+
+</script>
diff --git a/packages/app/src/pages/Debug.vue b/packages/app/src/pages/Debug.vue
index 7a5bc4a700d8..20e4a6a96e04 100644
--- a/packages/app/src/pages/Debug.vue
+++ b/packages/app/src/pages/Debug.vue
@@ -1,7 +1,27 @@
 <template>
-  <div>Debug Page</div>
+  <div
+    v-if="!query.data.value"
+  >
+    Loading
+  </div>
+  <DebugContainer
+    v-else
+    :gql="query.data.value"
+  />
 </template>
 
-<script setup>
+<script setup lang="ts">
+
+import DebugContainer from '../debug/DebugContainer.vue'
+import { gql, useQuery } from '@urql/vue'
+import { DebugDocument } from '../generated/graphql'
+
+gql `
+query Debug {
+   ...DebugSpecs
+}
+`
+
+const query = useQuery({ query: DebugDocument })
 
 </script>
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index bc57f103b15f..909aecfa1264 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -628,6 +628,14 @@
       }
     }
   },
+  "debugPage": {
+    "notLoggedIn": "Not logged in",
+    "notConnected": "Not connected",
+    "noRuns": "No runs",
+    "header": {
+      "runUrl": "View in Cypress Cloud"
+    }
+  },
   "testingType": {
     "modalTitle": "Choose a testing type",
     "e2e": {
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index 2ade51763c55..fda0c5dd0ca8 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -1,6 +1,62 @@
 ### This file was generated by Nexus Schema
 ### Do not make changes to this file directly
 
+type BrowserInfo {
+  """
+  The formatted name of the browser, e.g. `Electron`
+  """
+  formattedName: String
+
+  """
+  The formatted name of the browser with the current version i.e `Electron 59.0.278`
+  """
+  formattedNameWithVersion: String
+
+  """
+  The version of the browser, i.e. `59`
+  """
+  formattedVersion: String
+  id: String
+
+  """
+  The ID of the browser, e.g. `electron`
+  """
+  unformattedName: String
+
+  """
+  The unformatted version of the browser, i.e. `59.0.278`
+  """
+  unformattedVersion: String
+}
+
+type CIBuildInfo {
+  """
+  CI build ID extracted from the environment (if available)
+  """
+  ciBuildNumber: String
+
+  """
+  Formatted CI build ID extracted from the environment (if available)
+  """
+  ciBuildNumberFormatted: String
+
+  """
+  The formatted name of the provider that performed the associated run, e.g. `CircleCI`
+  """
+  formattedProvider: String
+  id: String
+
+  """
+  The ID of the provider that performed the associated run, e.g. `circleci`
+  """
+  provider: String
+
+  """
+  A link to the build details for the associated run
+  """
+  url: String
+}
+
 """
 Feature not available for subscription
 """
@@ -134,6 +190,11 @@ type CloudProject implements Node {
   """
   recordKeys: [CloudRecordKey!]
 
+  """
+  Gets a single CloudRun by runNumber
+  """
+  runByNumber(runNumber: Int!): CloudRun
+
   """
   A connection field type
   """
@@ -358,17 +419,28 @@ type CloudRecordKey implements Node {
 A Recorded run of the Test Runner, typically to the cloud
 """
 type CloudRun implements Node {
+  cancelledAt: DateTime
+
+  """
+  Information about the CI provider that performed the build
+  """
+  ci: CIBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
-  createdAt: DateTime
+  createdAt: DateTime!
+  groups: [CloudRunGroup!]!
 
   """
   Globally unique identifier representing a concrete GraphQL ObjectType
   """
   id: ID!
+  isHiddenByUsageLimits: Boolean!
+  overLimitActionTitle: String!
+  overLimitActionUrl: String!
   runNumber: Int
   status: CloudRunStatus
   tags: [CloudRunTag]
+  testsForReview: TestForReview!
 
   """
   Total duration of the run in milliseconds, accounting for any parallelization
@@ -462,6 +534,60 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
+type CloudRunGroup {
+  browser: BrowserInfo!
+  completedAt: DateTime
+  createdAt: DateTime!
+
+  """
+  This is the duration of the instance
+  """
+  duration: Int!
+  groupName: String
+  id: String!
+  os: OperatingSystem!
+  status: CloudRunGroupStatusEnum!
+
+  """
+  The type of the test
+  """
+  testingType: String!
+
+  """
+  This is the number of failed tests for the instance
+  """
+  totalFailures: Int!
+
+  """
+  This is the number of passed tests for the instance
+  """
+  totalPasses: Int!
+
+  """
+  This is the number of pending tests for the instance
+  """
+  totalPending: Int!
+
+  """
+  This is the number of skipped tests for the instance
+  """
+  totalSkipped: Int!
+}
+
+"""
+Possible check status of the instances run
+"""
+enum CloudRunGroupStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """
 Possible check status of the test run
 """
@@ -699,6 +825,45 @@ interface Node {
   id: ID!
 }
 
+type OperatingSystem {
+  id: String
+
+  """
+  The formatted name of the operating system, e.g. `linux`
+  """
+  name: String
+
+  """
+  The formatted name of the operating system with the version, e.g. `linux 14.04`
+  """
+  nameWithVersion: String
+
+  """
+  The platform of the OS, e.g. `linux`
+  """
+  platform: OperatingSystemsEnum
+
+  """
+  The name of the operating system as stored in the db
+  """
+  unformattedName: String
+
+  """
+  The version of the operating system, e.g. `14.04`
+  """
+  version: String
+}
+
+"""
+Possible operating systems for a build
+"""
+enum OperatingSystemsEnum {
+  LINUX
+  MAC
+  UNKNOWN
+  WINDOWS
+}
+
 """
 PageInfo cursor, as defined in https://facebook.github.io/relay/graphql/connections.htm#sec-undefined.PageInfo
 """
@@ -801,6 +966,56 @@ type Query {
   cloudViewer: CloudUser
 }
 
+type RunInstance {
+  groupId: String!
+
+  """
+  Used to determine if the instance has screenshots
+  """
+  hasScreenshots: Boolean!
+
+  """
+  Used to determine if the instance has stdout
+  """
+  hasStdout: Boolean!
+
+  """
+  Used to determine if the instance has screenshots
+  """
+  hasVideo: Boolean!
+  id: String!
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  screenshotsUrl: String
+  status: RunInstanceStatusEnum!
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  stdoutUrl: String
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  videoUrl: String
+}
+
+"""
+Possible check status of the instances run
+"""
+enum RunInstanceStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """
 Aggregate data from multiple groups for a spec run
 """
@@ -815,3 +1030,80 @@ type SpecDataAggregate {
   """
   min: Int
 }
+
+type TestForReview {
+  specs(
+    page: Int!
+    perPage: Int! = 30
+    viewBy: TestsForReviewViewByEnum
+  ): [TestForReviewSpec!]!
+  totalCount: Int!
+}
+
+type TestForReviewSpec {
+  basename: String!
+  extension: String!
+  id: String!
+  path: String!
+  shortPath: String
+  testResults: [TestResult!]!
+  totalFailed: Int!
+  totalPassed: Int!
+  totalPending: Int!
+}
+
+type TestResult {
+  bodyHash: String!
+
+  """
+  This is the duration of the test result
+  """
+  duration: Int
+  id: String!
+  instance: RunInstance
+
+  """
+  If the test result was flaky in the current run
+  """
+  isFlaky: Boolean!
+
+  """
+  If the test result was muted in the current run
+  """
+  isMuted: Boolean!
+  state: TestResultStateEnum!
+  testId: String
+  testUrl: String!
+  title(
+    """
+    This will trim the test title to the provided depth
+    """
+    depth: Int!
+  ): String!
+  titleParts: [String!]!
+}
+
+"""
+State of the test result
+"""
+enum TestResultStateEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  PASSED
+  PENDING
+  RUNNING
+  SKIPPED
+  TIMEDOUT
+  UNKNOWN
+}
+
+"""
+The characteristic to viewBy the tests for review
+"""
+enum TestsForReviewViewByEnum {
+  FAILED
+  FAILED_OR_FLAKY
+  FLAKY
+  MODIFIED
+}
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index e6349c9644ff..4f49bed2fb2d 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -45,12 +45,54 @@ enum BrowserFamily {
   webkit
 }
 
+type BrowserInfo {
+  """The formatted name of the browser, e.g. `Electron`"""
+  formattedName: String
+
+  """
+  The formatted name of the browser with the current version i.e `Electron 59.0.278`
+  """
+  formattedNameWithVersion: String
+
+  """The version of the browser, i.e. `59`"""
+  formattedVersion: String
+  id: String
+
+  """The ID of the browser, e.g. `electron`"""
+  unformattedName: String
+
+  """The unformatted version of the browser, i.e. `59.0.278`"""
+  unformattedVersion: String
+}
+
 enum BrowserStatus {
   closed
   open
   opening
 }
 
+type CIBuildInfo {
+  """CI build ID extracted from the environment (if available)"""
+  ciBuildNumber: String
+
+  """Formatted CI build ID extracted from the environment (if available)"""
+  ciBuildNumberFormatted: String
+
+  """
+  The formatted name of the provider that performed the associated run, e.g. `CircleCI`
+  """
+  formattedProvider: String
+  id: String
+
+  """
+  The ID of the provider that performed the associated run, e.g. `circleci`
+  """
+  provider: String
+
+  """A link to the build details for the associated run"""
+  url: String
+}
+
 """
 When we don't have an immediate response for the cloudViewer request, we'll use this as a fallback to 
 render the avatar in the header bar / signal authenticated state immediately
@@ -155,6 +197,9 @@ type CloudProject implements Node {
   """Record keys for the service"""
   recordKeys: [CloudRecordKey!]
 
+  """Gets a single CloudRun by runNumber"""
+  runByNumber(runNumber: Int!): CloudRun
+
   """A connection field type"""
   runs(
     """Returns the elements in the list that come after the specified cursor"""
@@ -309,15 +354,24 @@ type CloudRecordKey implements Node {
 
 """A Recorded run of the Test Runner, typically to the cloud"""
 type CloudRun implements Node {
+  cancelledAt: DateTime
+
+  """Information about the CI provider that performed the build"""
+  ci: CIBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
-  createdAt: DateTime
+  createdAt: DateTime!
+  groups: [CloudRunGroup!]!
 
   """Globally unique identifier representing a concrete GraphQL ObjectType"""
   id: ID!
+  isHiddenByUsageLimits: Boolean!
+  overLimitActionTitle: String!
+  overLimitActionUrl: String!
   runNumber: Int
   status: CloudRunStatus
   tags: [CloudRunTag]
+  testsForReview: TestForReview!
 
   """
   Total duration of the run in milliseconds, accounting for any parallelization
@@ -387,6 +441,46 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
+type CloudRunGroup {
+  browser: BrowserInfo!
+  completedAt: DateTime
+  createdAt: DateTime!
+
+  """This is the duration of the instance"""
+  duration: Int!
+  groupName: String
+  id: String!
+  os: OperatingSystem!
+  status: CloudRunGroupStatusEnum!
+
+  """The type of the test"""
+  testingType: String!
+
+  """This is the number of failed tests for the instance"""
+  totalFailures: Int!
+
+  """This is the number of passed tests for the instance"""
+  totalPasses: Int!
+
+  """This is the number of pending tests for the instance"""
+  totalPending: Int!
+
+  """This is the number of skipped tests for the instance"""
+  totalSkipped: Int!
+}
+
+"""Possible check status of the instances run"""
+enum CloudRunGroupStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """Possible check status of the test run"""
 enum CloudRunStatus {
   CANCELLED
@@ -1387,6 +1481,35 @@ interface Node {
   id: ID!
 }
 
+type OperatingSystem {
+  id: String
+
+  """The formatted name of the operating system, e.g. `linux`"""
+  name: String
+
+  """
+  The formatted name of the operating system with the version, e.g. `linux 14.04`
+  """
+  nameWithVersion: String
+
+  """The platform of the OS, e.g. `linux`"""
+  platform: OperatingSystemsEnum
+
+  """The name of the operating system as stored in the db"""
+  unformattedName: String
+
+  """The version of the operating system, e.g. `14.04`"""
+  version: String
+}
+
+"""Possible operating systems for a build"""
+enum OperatingSystemsEnum {
+  LINUX
+  MAC
+  UNKNOWN
+  WINDOWS
+}
+
 enum PackageManagerEnum {
   npm
   pnpm
@@ -1676,6 +1799,42 @@ enum RemoteFetchableStatus {
   NOT_FETCHED
 }
 
+type RunInstance {
+  groupId: String!
+
+  """Used to determine if the instance has screenshots"""
+  hasScreenshots: Boolean!
+
+  """Used to determine if the instance has stdout"""
+  hasStdout: Boolean!
+
+  """Used to determine if the instance has screenshots"""
+  hasVideo: Boolean!
+  id: String!
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  screenshotsUrl: String
+  status: RunInstanceStatusEnum!
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  stdoutUrl: String
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  videoUrl: String
+}
+
+"""Possible check status of the instances run"""
+enum RunInstanceStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """A file that we just added to the filesystem during project setup"""
 type ScaffoldedFile {
   """Info about the file we just scaffolded"""
@@ -1800,6 +1959,59 @@ enum SupportedBundlers {
   webpack
 }
 
+type TestForReview {
+  specs(page: Int!, perPage: Int! = 30, viewBy: TestsForReviewViewByEnum): [TestForReviewSpec!]!
+  totalCount: Int!
+}
+
+type TestForReviewSpec {
+  basename: String!
+  extension: String!
+  id: String!
+  path: String!
+  shortPath: String
+  testResults: [TestResult!]!
+  totalFailed: Int!
+  totalPassed: Int!
+  totalPending: Int!
+}
+
+type TestResult {
+  bodyHash: String!
+
+  """This is the duration of the test result"""
+  duration: Int
+  id: String!
+  instance: RunInstance
+
+  """If the test result was flaky in the current run"""
+  isFlaky: Boolean!
+
+  """If the test result was muted in the current run"""
+  isMuted: Boolean!
+  state: TestResultStateEnum!
+  testId: String
+  testUrl: String!
+  title(
+    """This will trim the test title to the provided depth"""
+    depth: Int!
+  ): String!
+  titleParts: [String!]!
+}
+
+"""State of the test result"""
+enum TestResultStateEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  PASSED
+  PENDING
+  RUNNING
+  SKIPPED
+  TIMEDOUT
+  UNKNOWN
+}
+
 enum TestingTypeEnum {
   component
   e2e
@@ -1814,6 +2026,14 @@ type TestingTypeInfo implements Node {
   type: TestingTypeEnum!
 }
 
+"""The characteristic to viewBy the tests for review"""
+enum TestsForReviewViewByEnum {
+  FAILED
+  FAILED_OR_FLAKY
+  FLAKY
+  MODIFIED
+}
+
 """Version of Cypress and release date"""
 type Version {
   """unique id"""

From 9cbf00a51109511617e34fe09ba996604120aa04 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Mon, 5 Dec 2022 16:31:58 -0500
Subject: [PATCH 04/22] Starting to wire up child components

---
 packages/app/src/debug/DebugContainer.vue     |  51 ++++++--
 packages/app/src/debug/DebugPageHeader.vue    |   6 +-
 packages/app/src/debug/DebugSpec.vue          |  16 +--
 packages/app/src/debug/DebugSpecList.vue      |  85 ++++++++++---
 .../frontend-shared/src/locales/en-US.json    |   7 +-
 packages/graphql/schemas/cloud.graphql        | 112 +++++++++---------
 packages/graphql/schemas/schema.graphql       |  82 +++++++------
 7 files changed, 221 insertions(+), 138 deletions(-)

diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 36cf9087d78f..651525b2946d 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -8,7 +8,7 @@
         commits-ahead="0"
       />
       <DebugSpecList
-        :gql="specs"
+        :specs="specsList"
       />
     </div>
     <div
@@ -30,14 +30,14 @@
         {{ t('debugPage.noRuns') }}
       </div>
     </div>
-    {{ props.gql }}
+    <!-- <pre>{{ JSON.stringify(props.gql, null, 2) }}</pre> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { gql } from '@urql/vue'
 import { computed } from '@vue/reactivity'
-import type { DebugSpecsFragment } from '../generated/graphql-test'
+import type { DebugSpecsFragment } from '../generated/graphql'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 import DebugPageHeader from './DebugPageHeader.vue'
 import DebugSpecList from './DebugSpecList.vue'
@@ -58,13 +58,15 @@ gql`
             id
             runNumber
             status
-            overLimitActionTitle
+            overLimitActionType
             overLimitActionUrl
             testsForReview {
-              specs(viewBy: FAILED, page:1, perPage: 2) {
-                id
-               ...DebugSpecList 
-              }
+              id
+              ...DebugSpecListTests
+            }
+            specs {
+              id
+              ...DebugSpecListSpec
             }
           }
         }
@@ -83,9 +85,38 @@ const run = computed(() => {
   return props.gql.currentProject?.cloudProject?.__typename === 'CloudProject' && props.gql.currentProject.cloudProject.runByNumber
 })
 
-const specs = computed(() => {
+const specsList = computed(() => {
   if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProject') {
-    return props.gql.currentProject.cloudProject.runByNumber?.testsForReview?.specs || []
+    const specs = props.gql.currentProject.cloudProject.runByNumber?.specs || []
+    const tests = props.gql.currentProject.cloudProject.runByNumber?.testsForReview || []
+
+    const mappedTests = tests.reduce((acc, curr) => {
+      // console.log(`test specId = ${ curr.specId}`)
+      let spec = acc[curr.specId]
+
+      if (!spec) {
+        const foundSpec = specs.find((spec) => spec.id === curr.specId)
+
+        spec = { spec: foundSpec }
+        // console.log('looking for spec', spec)
+        if (foundSpec) {
+          acc[curr.specId] = spec
+        } else {
+          //TODO better handle error case
+          throw new Error(`Could not find spec for id ${ curr.specId}`)
+        }
+      }
+
+      spec.tests = [...(spec.tests || []), curr]
+
+      // console.log('spec.tests', spec.tests)
+
+      return acc
+    }, {})
+
+    // console.log(mappedTests)
+
+    return Object.values(mappedTests)
   }
 
   return []
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index 65a335d9f418..817d5dc7df25 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="debug"
-    class="flex flex-col pb-24px gap-16px"
+    class="flex flex-col gap-16px"
   >
     <div
       data-cy="debug-header"
@@ -19,7 +19,6 @@
           {{ debug.commitInfo.summary }}
         </li>
         <div
-          v-if="debug.runNumber && props.commitsAhead"
           class="border rounded flex border-gray-100 h-6 text-sm items-center"
           data-cy="debug-runCommit-info"
         >
@@ -31,10 +30,11 @@
           </span>
           <div class="bg-gray-100 h-3 my-6px w-px" />
           <span
+            v-if="props.commitsAhead"
             class="font-normal mx-px px-2 text-orange-500 items-center"
             data-cy="debug-commitsAhead"
           >
-            {{ props.commitsAhead }}
+            {{ t('debugPage.header.commitsAhead', {commits: props.commitsAhead}) }}
           </span>
         </div>
         <li class="-mt-8px text-lg text-gray-400">
diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
index bcb5db823854..159328785f73 100644
--- a/packages/app/src/debug/DebugSpec.vue
+++ b/packages/app/src/debug/DebugSpec.vue
@@ -1,23 +1,23 @@
 <template>
   <div
     data-cy="debug-spec-col"
-    class="grid flex flex-col px-24px gap-24px self-stretch"
+    class="flex flex-col grid px-24px gap-24px self-stretch"
   >
     <div
       data-cy="debug-spec-item"
-      class="w-full overflow-hidden flex flex-col items-start box-border border-t-1px border-x-1px rounded"
+      class="rounded flex flex-col border-t-1px border-x-1px w-full overflow-hidden items-start box-border"
     >
       <div
         data-cy="debug-spec-header"
-        class="w-full flex flex-row items-center py-12px bg-gray-50 border-b-1px border-b-gray-100 rounded-t"
+        class="rounded-t flex flex-row bg-gray-50 border-b-1px border-b-gray-100 w-full py-12px items-center"
       >
         <div
           data-cy="spec-contents"
-          class="w-full flex flex-row px-16px items-center"
+          class="flex flex-row w-full px-16px items-center"
         >
           <div
             data-cy="spec-path"
-            class="flex-grow non-italic text-base truncate"
+            class="flex-grow text-base non-italic truncate"
           >
             <span
               class="font-normal text-gray-600"
@@ -39,7 +39,7 @@
             <Button
               data-cy="run-failures"
               variant="white"
-              class="inline-flex gap-x-10px whitespace-nowrap justify-center items-center isolate"
+              class="gap-x-10px inline-flex whitespace-nowrap justify-center items-center isolate"
               :disabled="isDisabled"
               :to="{ path: '/specs/runner', query: { file: (specData.path).replace(/\\/g, '/') } }"
             >
@@ -61,7 +61,7 @@
         v-for="test in specData.failedTests"
         :key="`test-${test.id}`"
         data-cy="test-group"
-        class="w-full flex flex-col flex-start h-12 items-start justify-center pl-16px border-b-gray-100 border-b-1px"
+        class="flex flex-col flex-start border-b-gray-100 border-b-1px h-12 w-full pl-16px items-start justify-center"
       >
         <DebugFailedTest
           :failed-test-result="test"
@@ -101,7 +101,7 @@ const props = defineProps<{
 
 const specData = computed(() => {
   return {
-    path: `${props.spec.path}/`,
+    path: props.spec.path,
     fileName: props.spec.fileName,
     fileExtension: props.spec.fileExtension,
     failedTests: props.testResults,
diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
index 1bb01a0d2826..57bf58800aa5 100644
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -1,37 +1,84 @@
 <template>
-  <div
-    v-for="spec in props.gql"
-    :key="spec?.id"
-  >
-    Failed Spec
-    <div
-      v-for="test in spec?.testResults"
-      :key="test?.id"
-    >
-      {{ test?.title }}
-    </div>
-  </div>
+  <DebugSpec
+    v-for="spec in specs"
+    :key="spec.spec.id"
+    :spec="spec.spec"
+    :test-results="spec.tests"
+  />
 </template>
 
 <script setup lang="ts">
 import { gql } from '@urql/core'
-import type { DebugSpecListFragment } from '../generated/graphql'
+import { computed } from '@vue/reactivity'
+import type { DebugSpecListSpecFragment, DebugSpecListTestsFragment } from '../generated/graphql'
+import DebugSpec from './DebugSpec.vue'
 
 gql`
-fragment DebugSpecList on TestForReviewSpec {
+fragment DebugSpecListSpec on CloudSpecRun {
   id
   path
-  testResults {
+  extension
+  shortPath
+  groupIds
+  testsPassed {
+    min
+    max
+  }
+  testsFailed {
+    min
+    max
+  }
+  testsPending {
+    min
+    max
+  }
+}
+`
+
+gql`
+fragment DebugSpecListTests on TestResult {
+  id
+  specId
+  title(depth: 2)
+  titleParts
+  duration
+  isFlaky
+  testUrl
+  instance {
     id
-    title(depth: 5)
-    titleParts
-    duration
+    status
+    groupId
+    totalPassed
+    totalFailed
+    totalPending
+    totalSkipped
+    totalRunning
+    hasStdout
+    stdoutUrl
+    hasScreenshots
+    screenshotsUrl
+    hasVideo
+    videoUrl
   }
 }
 `
 
 const props = defineProps<{
-  gql: DebugSpecListFragment[]
+  specs: { spec: DebugSpecListSpecFragment, tests: DebugSpecListTestsFragment[] }[]
 }>()
 
+const specs = computed(() => {
+  return props.specs.map((specItem) => {
+    return {
+      spec: {
+        id: specItem.spec.id,
+        path: specItem.spec.path,
+        fileName: specItem.spec.basename,
+        fileExtension: specItem.spec.basename.substring(specItem.spec.basename.indexOf('.')),
+      },
+      tests: specItem.tests,
+    }
+  })
+})
+
 </script>
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 41604eb90f99..14c092a0ca37 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -634,11 +634,13 @@
     }
   },
   "debugPage": {
+    "runFailures": "Run Failures",
     "notLoggedIn": "Not logged in",
     "notConnected": "Not connected",
     "noRuns": "No runs",
     "header": {
-      "runUrl": "View in Cypress Cloud"
+      "runUrl": "View in Cypress Cloud",
+      "commitsAhead": "You are {commits} commits ahead"
     }
   },
   "testingType": {
@@ -862,8 +864,5 @@
     "alpha": "Alpha",
     "beta": "Beta",
     "new": "New"
-  },
-  "debugPage": {
-    "runFailures": "Run Failures"
   }
 }
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index fda0c5dd0ca8..77cb2357861e 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -222,6 +222,21 @@ type CloudProject implements Node {
     status: CloudRunStatus
   ): CloudRunConnection
 
+  """
+  Returns runs associated to the given git commit SHAs hashes. The returned runs are ordered in the same way as the provided hashes.
+  """
+  runsByCommitShas(
+    """
+    An ordered list of git commit sha1 hashes.
+    """
+    commitShas: [String!]!
+
+    """
+    A limit to apply to the sorted list of found runs.
+    """
+    runLimit: Int! = 100
+  ): [CloudRun]
+
   """
   Unique identifier for a Project
   """
@@ -435,12 +450,13 @@ type CloudRun implements Node {
   """
   id: ID!
   isHiddenByUsageLimits: Boolean!
-  overLimitActionTitle: String!
+  overLimitActionType: OverLimitActionTypeEnum!
   overLimitActionUrl: String!
   runNumber: Int
+  specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
-  testsForReview: TestForReview!
+  testsForReview(limit: Int! = 100): [TestResult!]!
 
   """
   Total duration of the run in milliseconds, accounting for any parallelization
@@ -552,30 +568,14 @@ type CloudRunGroup {
   The type of the test
   """
   testingType: String!
-
-  """
-  This is the number of failed tests for the instance
-  """
   totalFailures: Int!
-
-  """
-  This is the number of passed tests for the instance
-  """
   totalPasses: Int!
-
-  """
-  This is the number of pending tests for the instance
-  """
   totalPending: Int!
-
-  """
-  This is the number of skipped tests for the instance
-  """
   totalSkipped: Int!
 }
 
 """
-Possible check status of the instances run
+Possible check status of a run group
 """
 enum CloudRunGroupStatusEnum {
   CANCELLED
@@ -614,6 +614,8 @@ type CloudRunTag implements Node {
 A Recorded run of a given spec from the Test Runner, typically to the cloud
 """
 type CloudSpecRun implements Node {
+  basename: String!
+
   """
   When the run was completed
   """
@@ -623,21 +625,25 @@ type CloudSpecRun implements Node {
   When the run was created
   """
   createdAt: DateTime
+  extension: String!
 
   """
   Amount of groups this spec was run in
   """
   groupCount: Int
+  groupIds: [String]
 
   """
   Globally unique identifier representing a concrete GraphQL ObjectType
   """
   id: ID!
+  path: String!
 
   """
   Incremental run number assigned
   """
   runNumber: Int
+  shortPath: String
 
   """
   Aggregate information about how long the spec took to run in the groups
@@ -842,10 +848,6 @@ type OperatingSystem {
   The platform of the OS, e.g. `linux`
   """
   platform: OperatingSystemsEnum
-
-  """
-  The name of the operating system as stored in the db
-  """
   unformattedName: String
 
   """
@@ -864,6 +866,11 @@ enum OperatingSystemsEnum {
   WINDOWS
 }
 
+enum OverLimitActionTypeEnum {
+  CONTACT_ADMIN
+  UPGRADE
+}
+
 """
 PageInfo cursor, as defined in https://facebook.github.io/relay/graphql/connections.htm#sec-undefined.PageInfo
 """
@@ -905,7 +912,7 @@ type Query {
     projectSlug: String!
 
     """
-    Datetime since the fetched data
+    DateTime since the fetched data
     """
     sinceDateTime: DateTime
   ): CloudLatestRunUpdateSpecData
@@ -996,6 +1003,31 @@ type RunInstance {
   """
   stdoutUrl: String
 
+  """
+  This is the number of failed tests for the instance
+  """
+  totalFailed: Int
+
+  """
+  This is the number of passed tests for the instance
+  """
+  totalPassed: Int
+
+  """
+  This is the number of pending tests for the instance
+  """
+  totalPending: Int
+
+  """
+  This is the number of running tests for the instance
+  """
+  totalRunning: Int
+
+  """
+  This is the number of skipped tests for the instance
+  """
+  totalSkipped: Int
+
   """
   Link to Cypress Cloud to view stdout, if available
   """
@@ -1031,27 +1063,6 @@ type SpecDataAggregate {
   min: Int
 }
 
-type TestForReview {
-  specs(
-    page: Int!
-    perPage: Int! = 30
-    viewBy: TestsForReviewViewByEnum
-  ): [TestForReviewSpec!]!
-  totalCount: Int!
-}
-
-type TestForReviewSpec {
-  basename: String!
-  extension: String!
-  id: String!
-  path: String!
-  shortPath: String
-  testResults: [TestResult!]!
-  totalFailed: Int!
-  totalPassed: Int!
-  totalPending: Int!
-}
-
 type TestResult {
   bodyHash: String!
 
@@ -1071,6 +1082,7 @@ type TestResult {
   If the test result was muted in the current run
   """
   isMuted: Boolean!
+  specId: String!
   state: TestResultStateEnum!
   testId: String
   testUrl: String!
@@ -1097,13 +1109,3 @@ enum TestResultStateEnum {
   TIMEDOUT
   UNKNOWN
 }
-
-"""
-The characteristic to viewBy the tests for review
-"""
-enum TestsForReviewViewByEnum {
-  FAILED
-  FAILED_OR_FLAKY
-  FLAKY
-  MODIFIED
-}
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index cee3981c5a3e..061d57dad138 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -217,6 +217,17 @@ type CloudProject implements Node {
     status: CloudRunStatus
   ): CloudRunConnection
 
+  """
+  Returns runs associated to the given git commit SHAs hashes. The returned runs are ordered in the same way as the provided hashes.
+  """
+  runsByCommitShas(
+    """An ordered list of git commit sha1 hashes."""
+    commitShas: [String!]!
+
+    """A limit to apply to the sorted list of found runs."""
+    runLimit: Int! = 100
+  ): [CloudRun]
+
   """Unique identifier for a Project"""
   slug: String!
 }
@@ -366,12 +377,13 @@ type CloudRun implements Node {
   """Globally unique identifier representing a concrete GraphQL ObjectType"""
   id: ID!
   isHiddenByUsageLimits: Boolean!
-  overLimitActionTitle: String!
+  overLimitActionType: OverLimitActionTypeEnum!
   overLimitActionUrl: String!
   runNumber: Int
+  specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
-  testsForReview: TestForReview!
+  testsForReview(limit: Int! = 100): [TestResult!]!
 
   """
   Total duration of the run in milliseconds, accounting for any parallelization
@@ -455,21 +467,13 @@ type CloudRunGroup {
 
   """The type of the test"""
   testingType: String!
-
-  """This is the number of failed tests for the instance"""
   totalFailures: Int!
-
-  """This is the number of passed tests for the instance"""
   totalPasses: Int!
-
-  """This is the number of pending tests for the instance"""
   totalPending: Int!
-
-  """This is the number of skipped tests for the instance"""
   totalSkipped: Int!
 }
 
-"""Possible check status of the instances run"""
+"""Possible check status of a run group"""
 enum CloudRunGroupStatusEnum {
   CANCELLED
   ERRORED
@@ -503,20 +507,26 @@ type CloudRunTag implements Node {
 A Recorded run of a given spec from the Test Runner, typically to the cloud
 """
 type CloudSpecRun implements Node {
+  basename: String!
+
   """When the run was completed"""
   completedAt: DateTime
 
   """When the run was created"""
   createdAt: DateTime
+  extension: String!
 
   """Amount of groups this spec was run in"""
   groupCount: Int
+  groupIds: [String]
 
   """Globally unique identifier representing a concrete GraphQL ObjectType"""
   id: ID!
+  path: String!
 
   """Incremental run number assigned"""
   runNumber: Int
+  shortPath: String
 
   """
   Aggregate information about how long the spec took to run in the groups
@@ -1498,8 +1508,6 @@ type OperatingSystem {
 
   """The platform of the OS, e.g. `linux`"""
   platform: OperatingSystemsEnum
-
-  """The name of the operating system as stored in the db"""
   unformattedName: String
 
   """The version of the operating system, e.g. `14.04`"""
@@ -1514,6 +1522,11 @@ enum OperatingSystemsEnum {
   WINDOWS
 }
 
+enum OverLimitActionTypeEnum {
+  CONTACT_ADMIN
+  UPGRADE
+}
+
 enum PackageManagerEnum {
   npm
   pnpm
@@ -1617,7 +1630,7 @@ type Query {
     """A list of Project slugs"""
     projectSlug: String!
 
-    """Datetime since the fetched data"""
+    """DateTime since the fetched data"""
     sinceDateTime: DateTime
   ): CloudLatestRunUpdateSpecData
 
@@ -1823,6 +1836,21 @@ type RunInstance {
   """Link to Cypress Cloud to view stdout, if available"""
   stdoutUrl: String
 
+  """This is the number of failed tests for the instance"""
+  totalFailed: Int
+
+  """This is the number of passed tests for the instance"""
+  totalPassed: Int
+
+  """This is the number of pending tests for the instance"""
+  totalPending: Int
+
+  """This is the number of running tests for the instance"""
+  totalRunning: Int
+
+  """This is the number of skipped tests for the instance"""
+  totalSkipped: Int
+
   """Link to Cypress Cloud to view stdout, if available"""
   videoUrl: String
 }
@@ -1963,23 +1991,6 @@ enum SupportedBundlers {
   webpack
 }
 
-type TestForReview {
-  specs(page: Int!, perPage: Int! = 30, viewBy: TestsForReviewViewByEnum): [TestForReviewSpec!]!
-  totalCount: Int!
-}
-
-type TestForReviewSpec {
-  basename: String!
-  extension: String!
-  id: String!
-  path: String!
-  shortPath: String
-  testResults: [TestResult!]!
-  totalFailed: Int!
-  totalPassed: Int!
-  totalPending: Int!
-}
-
 type TestResult {
   bodyHash: String!
 
@@ -1993,6 +2004,7 @@ type TestResult {
 
   """If the test result was muted in the current run"""
   isMuted: Boolean!
+  specId: String!
   state: TestResultStateEnum!
   testId: String
   testUrl: String!
@@ -2030,14 +2042,6 @@ type TestingTypeInfo implements Node {
   type: TestingTypeEnum!
 }
 
-"""The characteristic to viewBy the tests for review"""
-enum TestsForReviewViewByEnum {
-  FAILED
-  FAILED_OR_FLAKY
-  FLAKY
-  MODIFIED
-}
-
 """Version of Cypress and release date"""
 type Version {
   """unique id"""

From fd0eacf7eb8fd03c1f32700ffe38173b967500f7 Mon Sep 17 00:00:00 2001
From: Ankit <ankit@cypress.io>
Date: Tue, 6 Dec 2022 19:26:24 -0500
Subject: [PATCH 05/22] created util function for debug specs mapping and wrote
 tests

---
 packages/app/src/debug/DebugContainer.vue     |  35 +-----
 packages/app/src/debug/DebugSpec.vue          | 109 +++++++++---------
 packages/app/src/debug/DebugSpecList.vue      |  20 ++--
 .../debug/utils/ExampleDebugMapping.cy.tsx    |  32 +++++
 .../src/debug/utils/ExampleDebugMapping.vue   |  64 ++++++++++
 .../app/src/debug/utils/UtilsDebugMapping.ts  |  27 +++++
 .../cache/dev-darwin/snapshot-meta.cache.json |   2 +-
 7 files changed, 194 insertions(+), 95 deletions(-)
 create mode 100644 packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx
 create mode 100644 packages/app/src/debug/utils/ExampleDebugMapping.vue
 create mode 100644 packages/app/src/debug/utils/UtilsDebugMapping.ts

diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 651525b2946d..0430756bc251 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -8,7 +8,7 @@
         commits-ahead="0"
       />
       <DebugSpecList
-        :specs="specsList"
+        :specs="debugSpecsArray"
       />
     </div>
     <div
@@ -42,6 +42,7 @@ import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-
 import DebugPageHeader from './DebugPageHeader.vue'
 import DebugSpecList from './DebugSpecList.vue'
 import { useI18n } from 'vue-i18n'
+import { specsList } from './utils/UtilsDebugMapping'
 
 const { t } = useI18n()
 
@@ -53,7 +54,7 @@ gql`
         __typename
         ... on CloudProject {
           id
-          runByNumber(runNumber: 2) {
+          runByNumber(runNumber: 1) {
             ...DebugPage
             id
             runNumber
@@ -85,38 +86,12 @@ const run = computed(() => {
   return props.gql.currentProject?.cloudProject?.__typename === 'CloudProject' && props.gql.currentProject.cloudProject.runByNumber
 })
 
-const specsList = computed(() => {
+const debugSpecsArray = computed(() => {
   if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProject') {
     const specs = props.gql.currentProject.cloudProject.runByNumber?.specs || []
     const tests = props.gql.currentProject.cloudProject.runByNumber?.testsForReview || []
 
-    const mappedTests = tests.reduce((acc, curr) => {
-      // console.log(`test specId = ${ curr.specId}`)
-      let spec = acc[curr.specId]
-
-      if (!spec) {
-        const foundSpec = specs.find((spec) => spec.id === curr.specId)
-
-        spec = { spec: foundSpec }
-        // console.log('looking for spec', spec)
-        if (foundSpec) {
-          acc[curr.specId] = spec
-        } else {
-          //TODO better handle error case
-          throw new Error(`Could not find spec for id ${ curr.specId}`)
-        }
-      }
-
-      spec.tests = [...(spec.tests || []), curr]
-
-      // console.log('spec.tests', spec.tests)
-
-      return acc
-    }, {})
-
-    // console.log(mappedTests)
-
-    return Object.values(mappedTests)
+    return specsList(specs, tests)
   }
 
   return []
diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
index 159328785f73..59fa277dc5b9 100644
--- a/packages/app/src/debug/DebugSpec.vue
+++ b/packages/app/src/debug/DebugSpec.vue
@@ -1,73 +1,68 @@
 <template>
   <div
-    data-cy="debug-spec-col"
-    class="flex flex-col grid px-24px gap-24px self-stretch"
+    data-cy="debug-spec-item"
+    class="rounded flex flex-col border-t-1px border-x-1px w-full overflow-hidden items-start box-border"
   >
     <div
-      data-cy="debug-spec-item"
-      class="rounded flex flex-col border-t-1px border-x-1px w-full overflow-hidden items-start box-border"
+      data-cy="debug-spec-header"
+      class="rounded-t flex flex-row bg-gray-50 border-b-1px border-b-gray-100 w-full py-12px items-center"
     >
       <div
-        data-cy="debug-spec-header"
-        class="rounded-t flex flex-row bg-gray-50 border-b-1px border-b-gray-100 w-full py-12px items-center"
+        data-cy="spec-contents"
+        class="flex flex-row w-full px-16px items-center"
       >
         <div
-          data-cy="spec-contents"
-          class="flex flex-row w-full px-16px items-center"
+          data-cy="spec-path"
+          class="flex-grow text-base non-italic truncate"
         >
-          <div
-            data-cy="spec-path"
-            class="flex-grow text-base non-italic truncate"
+          <span
+            class="font-normal text-gray-600"
           >
-            <span
-              class="font-normal text-gray-600"
-            >
-              {{ specData.path }}
-            </span>
-            <span
-              class="inline-flex items-center"
-            >
-              <SpecNameDisplay
-                :spec-file-name="specData.fileName"
-                :spec-file-extension="specData.fileExtension"
-              />
-            </span>
-          </div>
-          <div
-            class="ml-10px"
+            {{ specData.path }}
+          </span>
+          <span
+            class="inline-flex items-center"
           >
-            <Button
-              data-cy="run-failures"
-              variant="white"
-              class="gap-x-10px inline-flex whitespace-nowrap justify-center items-center isolate"
-              :disabled="isDisabled"
-              :to="{ path: '/specs/runner', query: { file: (specData.path).replace(/\\/g, '/') } }"
-            >
-              <template #prefix>
-                <IconActionRefresh
-                  data-cy="icon-refresh"
-                  stroke-color="indigo-500"
-                />
-              </template>
-              <!-- Wrapping this with a default template to avoid an unneeded space -->
-              <template #default>
-                {{ t('debugPage.runFailures') }}
-              </template>
-            </Button>
-          </div>
+            <SpecNameDisplay
+              :spec-file-name="specData.fileName"
+              :spec-file-extension="specData.fileExtension"
+            />
+          </span>
+        </div>
+        <div
+          class="ml-10px"
+        >
+          <Button
+            data-cy="run-failures"
+            variant="white"
+            class="gap-x-10px inline-flex whitespace-nowrap justify-center items-center isolate"
+            :disabled="isDisabled"
+            :to="{ path: '/specs/runner', query: { file: (specData.path).replace(/\\/g, '/') } }"
+          >
+            <template #prefix>
+              <IconActionRefresh
+                data-cy="icon-refresh"
+                stroke-color="indigo-500"
+              />
+            </template>
+            <!-- Wrapping this with a default template to avoid an unneeded space -->
+            <template #default>
+              {{ t('debugPage.runFailures') }}
+            </template>
+          </Button>
         </div>
       </div>
-      <div
-        v-for="test in specData.failedTests"
-        :key="`test-${test.id}`"
-        data-cy="test-group"
-        class="flex flex-col flex-start border-b-gray-100 border-b-1px h-12 w-full pl-16px items-start justify-center"
-      >
-        <DebugFailedTest
-          :failed-test-result="test"
-          :data-cy="`test-${test.id}`"
-        />
-      </div>
+    </div>
+    <div
+      v-for="test in specData.failedTests"
+      :key="`test-${test.id}`"
+      data-cy="test-group"
+      class="flex flex-col flex-start border-b-gray-100 border-b-1px h-12 w-full pl-16px items-start justify-center"
+    >
+      <DebugFailedTest
+        :failed-test-result="test"
+        :data-cy="`test-${test.id}`"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
index 57bf58800aa5..46d612f7c452 100644
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -1,10 +1,15 @@
 <template>
-  <DebugSpec
-    v-for="spec in specs"
-    :key="spec.spec.id"
-    :spec="spec.spec"
-    :test-results="spec.tests"
-  />
+  <div
+    data-cy="debug-spec-col"
+    class="flex flex-col grid px-24px gap-24px self-stretch mb-24px"
+  >
+    <DebugSpec
+      v-for="spec in specs"
+      :key="spec.spec.id"
+      :spec="spec.spec"
+      :test-results="spec.tests"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -17,6 +22,7 @@ gql`
 fragment DebugSpecListSpec on CloudSpecRun {
   id
   path
+  basename
   extension
   shortPath
   groupIds
@@ -72,7 +78,7 @@ const specs = computed(() => {
     return {
       spec: {
         id: specItem.spec.id,
-        path: specItem.spec.path,
+        path: specItem.spec.path.replace(specItem.spec.basename, ''),
         fileName: specItem.spec.basename,
         fileExtension: specItem.spec.basename.substring(specItem.spec.basename.indexOf('.')),
       },
diff --git a/packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx b/packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx
new file mode 100644
index 000000000000..fba6b4917fa8
--- /dev/null
+++ b/packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx
@@ -0,0 +1,32 @@
+import ExampleDebugMapping from './ExampleDebugMapping.vue'
+
+context('Complete Debug Page states', () => {
+  const spec = {
+    id: 'a1b',
+  }
+
+  describe('singular specs', () => {
+    it('single test', () => {
+      const test = {
+        id: '917504a3-10a2-4c8a-a9c8-5f5e0be50ce2',
+        specId: 'a1b',
+      }
+
+      cy.mount(
+        <ExampleDebugMapping specs={[spec]} tests={[test]} />,
+      )
+
+      let specId
+
+      cy.findByTestId(`spec-${spec.id}`).then(($div) => {
+        specId = $div.text()
+      })
+
+      cy.findByTestId(`failed-test-${test.specId}-${test.id}`).then(($div) => {
+        const testId = $div.text()
+
+        expect(testId).equal(specId)
+      })
+    })
+  })
+})
diff --git a/packages/app/src/debug/utils/ExampleDebugMapping.vue b/packages/app/src/debug/utils/ExampleDebugMapping.vue
new file mode 100644
index 000000000000..8668fcb0c90c
--- /dev/null
+++ b/packages/app/src/debug/utils/ExampleDebugMapping.vue
@@ -0,0 +1,64 @@
+<template>
+  <ul
+    v-for="spec in specData"
+    :key="spec.spec.id"
+  >
+    <div
+      class="flex flex-col mb-10px border-b-gray-100 border"
+    >
+      <div
+        class="inline-flex text-xs"
+        :data-cy="`spec-${spec.spec.id}`"
+      >
+        {{ spec.spec.id }}
+      </div>
+      <div
+        data-cy="failed-tests"
+      >
+        <div
+          v-for="test in spec.tests"
+          :key="`test-${test.specId}`"
+        >
+          <div
+            class="flex text-xs"
+            :data-cy="`failed-test-${test.specId}-${test.id}`"
+          >
+            {{ test.specId }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { specsList } from './UtilsDebugMapping'
+import { computed } from 'vue'
+
+interface Spec {
+  id: string
+}
+
+interface Test {
+  id: string
+  specId: string
+}
+
+const props = defineProps<{
+  specs: Spec[]
+  tests: Test[]
+}>()
+
+const debugSpecsArray = specsList(props.specs, props.tests) // {specId: spec, tests: []}[]
+const specData = computed(() => {
+  return debugSpecsArray.map((specItem) => {
+    return {
+      spec: {
+        id: specItem.spec.id,
+      },
+      tests: specItem.tests,
+    }
+  })
+})
+
+</script>
diff --git a/packages/app/src/debug/utils/UtilsDebugMapping.ts b/packages/app/src/debug/utils/UtilsDebugMapping.ts
new file mode 100644
index 000000000000..709188cafab5
--- /dev/null
+++ b/packages/app/src/debug/utils/UtilsDebugMapping.ts
@@ -0,0 +1,27 @@
+export const specsList = <S extends {id: string}, T extends {specId: string}>(specs: readonly S[], tests: readonly T[]): {spec: S, tests: T[]}[] => {
+  const mappedTests = tests.reduce((acc, curr) => {
+    // console.log(`test specId = ${ curr.specId}`)
+    let spec = acc[curr.specId]
+
+    if (!spec) {
+      const foundSpec = specs.find((spec) => spec.id === curr.specId)
+
+      spec = { spec: foundSpec }
+      // console.log('looking for spec', spec)
+      if (foundSpec) {
+        acc[curr.specId] = spec
+      } else {
+        //TODO better handle error case
+        throw new Error(`Could not find spec for id ${ curr.specId}`)
+      }
+    }
+
+    spec.tests = [...(spec.tests || []), curr]
+
+    // console.log('spec.tests', spec.tests)
+    return acc
+  }, {})
+  // console.log(mappedTests)
+
+  return Object.values(mappedTests)
+}
diff --git a/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json b/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json
index dedd1fb13777..40235b699055 100644
--- a/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json
+++ b/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json
@@ -3542,5 +3542,5 @@
     "./tooling/v8-snapshot/cache/dev-darwin/snapshot-entry.js"
   ],
   "deferredHashFile": "yarn.lock",
-  "deferredHash": "c081f05e37cf807c0129174be65a0187071f7a9f67354fae7aeaf8767d9608e3"
+  "deferredHash": "11c1fe432648957a4ba789329d5b1ea74034c52daef6a0ab7662e2db76fb71cc"
 }
\ No newline at end of file

From 8b157736604af0a5058aab1a8464e10b894cd990 Mon Sep 17 00:00:00 2001
From: Ankit <ankit@cypress.io>
Date: Wed, 7 Dec 2022 13:44:03 -0500
Subject: [PATCH 06/22] update to debug page graphql extension parsing and
 tests for utility function

---
 packages/app/src/debug/DebugContainer.cy.tsx  | 78 +++++++++++++++++++
 packages/app/src/debug/DebugContainer.vue     |  2 +-
 packages/app/src/debug/DebugSpecList.vue      |  9 ++-
 .../{UtilsDebugMapping.ts => DebugMapping.ts} |  0
 .../debug/utils/ExampleDebugMapping.cy.tsx    | 32 --------
 .../src/debug/utils/ExampleDebugMapping.vue   | 64 ---------------
 packages/graphql/schemas/cloud.graphql        | 16 +---
 packages/graphql/schemas/schema.graphql       | 14 +---
 8 files changed, 87 insertions(+), 128 deletions(-)
 rename packages/app/src/debug/utils/{UtilsDebugMapping.ts => DebugMapping.ts} (100%)
 delete mode 100644 packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx
 delete mode 100644 packages/app/src/debug/utils/ExampleDebugMapping.vue

diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
index 4e17961d796b..99883f836012 100644
--- a/packages/app/src/debug/DebugContainer.cy.tsx
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -2,6 +2,7 @@ import { DebugSpecsFragmentDoc } from '../generated/graphql-test'
 import DebugContainer from './DebugContainer.vue'
 import { defaultMessages } from '@cy/i18n'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { specsList } from './utils/DebugMapping'
 
 describe('<DebugContainer />', () => {
   context('empty states', () => {
@@ -49,4 +50,81 @@ describe('<DebugContainer />', () => {
       cy.findByTestId('debug-empty').contains(defaultMessages.debugPage.noRuns)
     })
   })
+
+  describe('testing util function: debugMapping', () => {
+    const mappingList = (specs: {id: string}[], tests: {specId: string, id: string}[]) => {
+      return specsList(specs, tests)
+    }
+
+    const createSpecs = (idArr: string[]) => {
+      const acc: {id: string}[] = []
+
+      idArr.forEach((val) => {
+        acc.push({ id: val })
+      })
+
+      return acc
+    }
+
+    it('maps correctly for a single spec', () => {
+      const spec = createSpecs(['a1c'])
+      const tests = [
+        { specId: 'a1c', id: 'random1' },
+        { specId: 'a1c', id: 'random2' },
+      ]
+
+      const debugMappingArray = mappingList(spec, tests)
+
+      expect(debugMappingArray).to.have.length(1)
+      expect(debugMappingArray[0]).to.deep.equal({ spec: { id: 'a1c' }, tests: [{ specId: 'a1c', id: 'random1' }, { specId: 'a1c', id: 'random2' }] })
+    })
+
+    it('maps correctly for multiple specs and test', () => {
+      const specs = createSpecs(['123', '456', '789'])
+      const tests = [
+        { specId: '123', id: 'random1' },
+        { specId: '456', id: 'random2' },
+        { specId: '456', id: 'random3' },
+        { specId: '789', id: 'random4' },
+        { specId: '123', id: 'random6' },
+      ]
+
+      const debugMappingArray = mappingList(specs, tests)
+
+      expect(debugMappingArray).to.have.length(3)
+      debugMappingArray.forEach((mapping) => {
+        if (mapping.spec.id === '123') {
+          expect(mapping.tests).to.deep.equal([{ specId: '123', id: 'random1' }, { specId: '123', id: 'random6' }])
+        } else if (mapping.spec.id === '456') {
+          expect(mapping.tests).to.deep.equal([{ specId: '456', id: 'random2' }, { specId: '456', id: 'random3' }])
+        } else if (mapping.spec.id === '789') {
+          expect(mapping.tests).to.deep.equal([{ specId: '789', id: 'random4' }])
+        }
+      })
+    })
+
+    it('maps does not show specs that dont have tests', () => {
+      const specs = createSpecs(['123', '456', '789'])
+      const tests = [{ specId: '123', id: 'random1' }]
+
+      const debugMappingArray = mappingList(specs, tests)
+
+      expect(debugMappingArray).to.have.length(1)
+      expect(debugMappingArray).to.deep.equal([{ spec: { id: '123' }, tests: [{ specId: '123', id: 'random1' }] }])
+    })
+
+    it('throws an error when a test does not map to a spec', () => {
+      const specs = createSpecs(['123'])
+      const tests = [
+        { specId: '123', id: 'random1' },
+        { specId: '456', id: 'random2' },
+      ]
+
+      let debugMappingArray = function () {
+        mappingList(specs, tests)
+      }
+
+      expect(debugMappingArray).to.throw('Could not find spec for id 456')
+    })
+  })
 })
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 0430756bc251..cb33f3f9f079 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -42,7 +42,7 @@ import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-
 import DebugPageHeader from './DebugPageHeader.vue'
 import DebugSpecList from './DebugSpecList.vue'
 import { useI18n } from 'vue-i18n'
-import { specsList } from './utils/UtilsDebugMapping'
+import { specsList } from './utils/DebugMapping'
 
 const { t } = useI18n()
 
diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
index 46d612f7c452..3121a8a3c889 100644
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -75,12 +75,15 @@ const props = defineProps<{
 
 const specs = computed(() => {
   return props.specs.map((specItem) => {
+    const fileName = specItem.spec.basename
+    const fileExtension = specItem.spec.extension
+
     return {
       spec: {
         id: specItem.spec.id,
-        path: specItem.spec.path.replace(specItem.spec.basename, ''),
-        fileName: specItem.spec.basename,
-        fileExtension: specItem.spec.basename.substring(specItem.spec.basename.indexOf('.')),
+        path: specItem.spec.path.replace(fileName + fileExtension, ''),
+        fileName,
+        fileExtension,
       },
       tests: specItem.tests,
     }
diff --git a/packages/app/src/debug/utils/UtilsDebugMapping.ts b/packages/app/src/debug/utils/DebugMapping.ts
similarity index 100%
rename from packages/app/src/debug/utils/UtilsDebugMapping.ts
rename to packages/app/src/debug/utils/DebugMapping.ts
diff --git a/packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx b/packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx
deleted file mode 100644
index fba6b4917fa8..000000000000
--- a/packages/app/src/debug/utils/ExampleDebugMapping.cy.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import ExampleDebugMapping from './ExampleDebugMapping.vue'
-
-context('Complete Debug Page states', () => {
-  const spec = {
-    id: 'a1b',
-  }
-
-  describe('singular specs', () => {
-    it('single test', () => {
-      const test = {
-        id: '917504a3-10a2-4c8a-a9c8-5f5e0be50ce2',
-        specId: 'a1b',
-      }
-
-      cy.mount(
-        <ExampleDebugMapping specs={[spec]} tests={[test]} />,
-      )
-
-      let specId
-
-      cy.findByTestId(`spec-${spec.id}`).then(($div) => {
-        specId = $div.text()
-      })
-
-      cy.findByTestId(`failed-test-${test.specId}-${test.id}`).then(($div) => {
-        const testId = $div.text()
-
-        expect(testId).equal(specId)
-      })
-    })
-  })
-})
diff --git a/packages/app/src/debug/utils/ExampleDebugMapping.vue b/packages/app/src/debug/utils/ExampleDebugMapping.vue
deleted file mode 100644
index 8668fcb0c90c..000000000000
--- a/packages/app/src/debug/utils/ExampleDebugMapping.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <ul
-    v-for="spec in specData"
-    :key="spec.spec.id"
-  >
-    <div
-      class="flex flex-col mb-10px border-b-gray-100 border"
-    >
-      <div
-        class="inline-flex text-xs"
-        :data-cy="`spec-${spec.spec.id}`"
-      >
-        {{ spec.spec.id }}
-      </div>
-      <div
-        data-cy="failed-tests"
-      >
-        <div
-          v-for="test in spec.tests"
-          :key="`test-${test.specId}`"
-        >
-          <div
-            class="flex text-xs"
-            :data-cy="`failed-test-${test.specId}-${test.id}`"
-          >
-            {{ test.specId }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-import { specsList } from './UtilsDebugMapping'
-import { computed } from 'vue'
-
-interface Spec {
-  id: string
-}
-
-interface Test {
-  id: string
-  specId: string
-}
-
-const props = defineProps<{
-  specs: Spec[]
-  tests: Test[]
-}>()
-
-const debugSpecsArray = specsList(props.specs, props.tests) // {specId: spec, tests: []}[]
-const specData = computed(() => {
-  return debugSpecsArray.map((specItem) => {
-    return {
-      spec: {
-        id: specItem.spec.id,
-      },
-      tests: specItem.tests,
-    }
-  })
-})
-
-</script>
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index 77cb2357861e..ba46df85ec8c 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -653,7 +653,7 @@ type CloudSpecRun implements Node {
   """
   Most important status for the spec shared between all groups
   """
-  status: CloudSpecStatus
+  status: CloudRunGroupStatusEnum
 
   """
   Aggregate information about how many tests failed in the groups
@@ -710,20 +710,6 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
-"""
-Possible check status of the spec within a run
-"""
-enum CloudSpecStatus {
-  CANCELLED
-  ERRORED
-  FAILED
-  NOTESTS
-  PASSED
-  RUNNING
-  TIMEDOUT
-  UNCLAIMED
-}
-
 """
 A CloudUser represents an User stored in the Cypress Cloud
 """
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 061d57dad138..000ef6c66132 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -534,7 +534,7 @@ type CloudSpecRun implements Node {
   specDuration: SpecDataAggregate
 
   """Most important status for the spec shared between all groups"""
-  status: CloudSpecStatus
+  status: CloudRunGroupStatusEnum
 
   """Aggregate information about how many tests failed in the groups"""
   testsFailed: SpecDataAggregate
@@ -575,18 +575,6 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
-"""Possible check status of the spec within a run"""
-enum CloudSpecStatus {
-  CANCELLED
-  ERRORED
-  FAILED
-  NOTESTS
-  PASSED
-  RUNNING
-  TIMEDOUT
-  UNCLAIMED
-}
-
 """A CloudUser represents an User stored in the Cypress Cloud"""
 type CloudUser implements Node {
   """Url to manage cloud organizations for this user"""

From cbee737110f6975be348ae4c80005f0202de1d2a Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Thu, 8 Dec 2022 09:21:39 -0500
Subject: [PATCH 07/22] Fix header test

---
 packages/app/src/debug/DebugPageHeader.cy.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/debug/DebugPageHeader.cy.tsx b/packages/app/src/debug/DebugPageHeader.cy.tsx
index 8a34d5f83434..ec9d7b77d083 100644
--- a/packages/app/src/debug/DebugPageHeader.cy.tsx
+++ b/packages/app/src/debug/DebugPageHeader.cy.tsx
@@ -5,7 +5,7 @@ const defaults = [
   { attr: 'debug-header-branch', text: 'Branch Name: feature/DESIGN-183' },
   { attr: 'debug-header-commitHash', text: 'Commit Hash: b5e6fde' },
   { attr: 'debug-header-author', text: 'Commit Author: cypressDTest' },
-  { attr: 'debug-header-createdAt', text: 'Run Total Duration: 60000 (an hour ago) ' },
+  { attr: 'debug-header-createdAt', text: 'Run Total Duration: 01:00 (an hour ago) ' },
 ]
 
 describe('<DebugPageHeader />', {
@@ -26,7 +26,7 @@ describe('<DebugPageHeader />', {
       },
       render: (gqlVal) => {
         return (
-          <DebugPageHeader gql={gqlVal} commitsAhead='You are 2 commits ahead' commitHash='b5e6fde'/>
+          <DebugPageHeader gql={gqlVal} commitsAhead={2} commitHash="b5e6fde"/>
         )
       },
     })

From b3884f0ab6bffe81ca53bdaf8c729a7e238ad304 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Thu, 8 Dec 2022 09:40:27 -0500
Subject: [PATCH 08/22] Type fixes

---
 packages/app/src/debug/DebugContainer.vue  | 4 ++--
 packages/app/src/debug/DebugPageHeader.vue | 2 +-
 packages/app/src/debug/DebugSpec.vue       | 4 ++--
 packages/app/src/debug/DebugSpecList.vue   | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index cb33f3f9f079..2dbb76c1c04b 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -5,7 +5,7 @@
     >
       <DebugPageHeader
         :gql="run"
-        commits-ahead="0"
+        :commits-ahead="0"
       />
       <DebugSpecList
         :specs="debugSpecsArray"
@@ -54,7 +54,7 @@ gql`
         __typename
         ... on CloudProject {
           id
-          runByNumber(runNumber: 1) {
+          runByNumber(runNumber: 2) {
             ...DebugPage
             id
             runNumber
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index 817d5dc7df25..0673df27028e 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -138,7 +138,7 @@ fragment DebugPage on CloudRun {
 
 const props = defineProps<{
   gql: DebugPageFragment
-  commitsAhead: string
+  commitsAhead: number
 }>()
 
 const debug = computed(() => props.gql)
diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
index 59fa277dc5b9..be46ebe7665c 100644
--- a/packages/app/src/debug/DebugSpec.vue
+++ b/packages/app/src/debug/DebugSpec.vue
@@ -75,8 +75,8 @@ export interface Spec {
 }
 
 export interface TestResults {
-  id: string
-  titleParts: string[]
+  readonly id: string
+  readonly titleParts: ReadonlyArray<string>
 }
 
 import { computed } from 'vue'
diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
index 3121a8a3c889..89dc95830b1d 100644
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="debug-spec-col"
-    class="flex flex-col grid px-24px gap-24px self-stretch mb-24px"
+    class="flex flex-col mb-24px grid px-24px gap-24px self-stretch"
   >
     <DebugSpec
       v-for="spec in specs"

From 97b26cd9fd268caa4f4213bb9759209a01129bb0 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Thu, 8 Dec 2022 09:54:12 -0500
Subject: [PATCH 09/22] Fix test

---
 packages/app/src/debug/DebugSpec.cy.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/debug/DebugSpec.cy.tsx b/packages/app/src/debug/DebugSpec.cy.tsx
index 324de06aa417..3d9e3d589737 100644
--- a/packages/app/src/debug/DebugSpec.cy.tsx
+++ b/packages/app/src/debug/DebugSpec.cy.tsx
@@ -5,7 +5,7 @@ import { defaultMessages } from '@cy/i18n'
 describe('<DebugSpec/> with multiple test results', () => {
   const spec: Spec = {
     id: '8879798756s88d',
-    path: 'cypress/tests',
+    path: 'cypress/tests/',
     fileName: 'auth',
     fileExtension: '.spec.ts',
   }
@@ -65,7 +65,7 @@ describe('<DebugSpec/> responsive UI', () => {
   it('renders complete UI on smaller viewports', { viewportHeight: 300, viewportWidth: 450 }, () => {
     const spec: Spec = {
       id: '5479adf90s7f',
-      path: 'cypress/tests',
+      path: 'cypress/tests/',
       fileName: 'AlertBar',
       fileExtension: '.spec.ts',
     }

From a3f6917a7814329ffecfd6337e67c73ce738b751 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Thu, 8 Dec 2022 10:40:54 -0500
Subject: [PATCH 10/22] Setting hash to same as feature branch

---
 tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json b/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json
index 40235b699055..7e77c05f0d64 100644
--- a/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json
+++ b/tooling/v8-snapshot/cache/dev-darwin/snapshot-meta.cache.json
@@ -3542,5 +3542,5 @@
     "./tooling/v8-snapshot/cache/dev-darwin/snapshot-entry.js"
   ],
   "deferredHashFile": "yarn.lock",
-  "deferredHash": "11c1fe432648957a4ba789329d5b1ea74034c52daef6a0ab7662e2db76fb71cc"
+  "deferredHash": "7da54eecbd832d3cd8ba75441a83e8c69c033664f25df5a2e43c1794d9d149de"
 }
\ No newline at end of file

From ca7ef19d7194c100f33c1a7f54266cb4b1eb04c3 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Thu, 8 Dec 2022 14:48:20 -0500
Subject: [PATCH 11/22] New test for DebugContainer

---
 packages/app/src/debug/DebugContainer.cy.tsx | 31 ++++++++++++++
 packages/graphql/test/stubCloudTypes.ts      | 43 ++++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
index 99883f836012..8ebb22d836dd 100644
--- a/packages/app/src/debug/DebugContainer.cy.tsx
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -3,6 +3,7 @@ import DebugContainer from './DebugContainer.vue'
 import { defaultMessages } from '@cy/i18n'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 import { specsList } from './utils/DebugMapping'
+import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 
 describe('<DebugContainer />', () => {
   context('empty states', () => {
@@ -51,6 +52,36 @@ describe('<DebugContainer />', () => {
     })
   })
 
+  describe('render specs and tests', () => {
+    it('renders data when logged in and connected', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+      loginConnectStore.setProjectFlag('isProjectConnected', true)
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        onResult: (result) => {
+          if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
+            const test = result.currentProject.cloudProject.runByNumber
+            const other = CloudRunStubs.failingWithTests as typeof test
+
+            result.currentProject.cloudProject.runByNumber = other
+          }
+        },
+        render: (gqlVal) => {
+          return (
+            <DebugContainer
+              gql={gqlVal}
+            />
+          )
+        },
+      })
+
+      // Only asserting that it is rendering the components for failed specs
+      cy.findByTestId('debug-header').should('be.visible')
+      cy.findByTestId('debug-spec-item').should('be.visible')
+    })
+  })
+
   describe('testing util function: debugMapping', () => {
     const mappingList = (specs: {id: string}[], tests: {specId: string, id: string}[]) => {
       return specsList(specs, tests)
diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
index 9bd2e8a291ea..595e77bd4b1f 100644
--- a/packages/graphql/test/stubCloudTypes.ts
+++ b/packages/graphql/test/stubCloudTypes.ts
@@ -25,6 +25,7 @@ import type {
   CloudProjectSpecResult,
   CloudRunStatus,
   CloudSpecRun,
+  TestResult,
 } from '../src/gen/test-cloud-graphql-types.gen'
 import type { GraphQLResolveInfo } from 'graphql'
 
@@ -184,6 +185,14 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
     url: 'http://dummy.cypress.io/runs/1',
     createdAt: new Date(Date.now() - 1000 * 60 * 61).toISOString(),
     completedAt: null,
+    cancelledAt: null,
+    ci: null,
+    groups: null,
+    isHiddenByUsageLimits: false,
+    overLimitActionType: null,
+    overLimitActionUrl: null,
+    specs: null,
+    testsForReview: null,
     commitInfo: createCloudRunCommitInfo({
       sha: `fake-sha-${getNodeIdx('CloudRun')}`,
       summary: `fix: make gql work ${config.status ?? 'PASSED'}`,
@@ -194,6 +203,39 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
   return indexNode(cloudRunData)
 }
 
+function addFailedTests (run: CloudRun) {
+  const specId = 'hash123'
+
+  const spec: CloudSpecRun = {
+    __typename: 'CloudSpecRun',
+    id: specId,
+    basename: 'Test',
+    extension: '.cy.ts',
+    path: 'src/Test.cy.ts',
+  }
+
+  const test: TestResult = {
+    __typename: 'TestResult',
+    bodyHash: 'acs123',
+    id: '123',
+    isFlaky: false,
+    isMuted: false,
+    specId,
+    state: 'FAILED' as const,
+    duration: null,
+    instance: null,
+    testId: null,
+    testUrl: 'http://cloudurl',
+    title: '<test/> Should render',
+    titleParts: ['<test/>', 'should render'],
+  }
+
+  run.specs = [spec]
+  run.testsForReview = [test]
+
+  return run
+}
+
 export function createCloudOrganization (config: Partial<CloudOrganization>): Required<CloudOrganization> {
   const cloudOrgData: Required<CloudOrganization> = {
     ...testNodeId('CloudOrganization'),
@@ -249,6 +291,7 @@ export const CloudRunStubs = {
   someSkipped: createCloudRun({ status: 'PASSED', totalPassed: 7, totalSkipped: 3 }),
   somePending: createCloudRun({ status: 'PASSED', totalPassed: 100, totalSkipped: 3000, totalPending: 20 }),
   allSkipped: createCloudRun({ status: 'ERRORED', totalPassed: 0, totalSkipped: 10 }),
+  failingWithTests: addFailedTests(createCloudRun({ status: 'FAILED', totalPassed: 8, totalFailed: 2 })),
 } as Record<string, Required<CloudRun>>
 
 export const CloudUserStubs = {

From 193328a0d90b3fb96bbef64f9c946b44f52a7dff Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Thu, 8 Dec 2022 16:49:33 -0500
Subject: [PATCH 12/22] Test Ids needed for test

---
 packages/app/src/pages/Debug.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/app/src/pages/Debug.vue b/packages/app/src/pages/Debug.vue
index 20e4a6a96e04..2a4bc785b394 100644
--- a/packages/app/src/pages/Debug.vue
+++ b/packages/app/src/pages/Debug.vue
@@ -1,11 +1,13 @@
 <template>
   <div
     v-if="!query.data.value"
+    data-cy="debug-loader"
   >
     Loading
   </div>
   <DebugContainer
     v-else
+    data-cy="debug-container"
     :gql="query.data.value"
   />
 </template>

From ffb15c7e9477c6744c8810b9e7aa7d819bfffac5 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Fri, 9 Dec 2022 09:23:48 -0500
Subject: [PATCH 13/22] Updates to fix type linting

---
 packages/app/src/debug/DebugPageHeader.cy.tsx      |  2 +-
 packages/app/src/specs/RunStatusDots.vue           |  3 +++
 .../support/mock-graphql/fakeCloudSpecRun.ts       | 11 ++++++++---
 packages/graphql/test/stubCloudTypes.ts            | 14 ++++++++------
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/debug/DebugPageHeader.cy.tsx b/packages/app/src/debug/DebugPageHeader.cy.tsx
index ec9d7b77d083..eef1bf09936d 100644
--- a/packages/app/src/debug/DebugPageHeader.cy.tsx
+++ b/packages/app/src/debug/DebugPageHeader.cy.tsx
@@ -26,7 +26,7 @@ describe('<DebugPageHeader />', {
       },
       render: (gqlVal) => {
         return (
-          <DebugPageHeader gql={gqlVal} commitsAhead={2} commitHash="b5e6fde"/>
+          <DebugPageHeader gql={gqlVal} commitsAhead={2}/>
         )
       },
     })
diff --git a/packages/app/src/specs/RunStatusDots.vue b/packages/app/src/specs/RunStatusDots.vue
index ed1eb664bb9c..e2736217d933 100644
--- a/packages/app/src/specs/RunStatusDots.vue
+++ b/packages/app/src/specs/RunStatusDots.vue
@@ -109,6 +109,9 @@ fragment RunStatusDots on RemoteFetchableCloudProjectSpecResult {
         nodes {
           id
           runNumber
+          basename
+          path
+          extension
           testsFailed{
             min
             max
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts b/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
index 3870fa6b9e38..2be2fdd86aaf 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
@@ -1,7 +1,7 @@
 import type { CloudSpecRun } from '../../../../graphql/src/gen/cloud-source-types.gen'
-import type { CloudSpecStatus } from '@packages/app/src/generated/graphql'
+import type { CloudRunGroupStatusEnum } from '@packages/app/src/generated/graphql'
 
-export const randomRunStatus = (): CloudSpecStatus => {
+export const randomRunStatus = (): CloudRunGroupStatusEnum => {
   const r = Math.floor(Math.random() * 5)
 
   switch (r) {
@@ -13,12 +13,17 @@ export const randomRunStatus = (): CloudSpecStatus => {
   }
 }
 
-export const fakeRuns = (statuses: CloudSpecStatus[]): Required<CloudSpecRun>[] => {
+export const fakeRuns = (statuses: CloudRunGroupStatusEnum[]): Required<CloudSpecRun>[] => {
   return statuses.map((s, idx) => {
     return {
       __typename: 'CloudSpecRun',
       id: `SpecRun_${idx}`,
       status: s,
+      basename: '',
+      extension: '',
+      groupIds: null,
+      path: '',
+      shortPath: '',
       createdAt: new Date('2022-05-08T03:17:00').toISOString(),
       completedAt: new Date('2022-05-08T05:17:00').toISOString(),
       runNumber: 432,
diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
index 595e77bd4b1f..b34d1598d22e 100644
--- a/packages/graphql/test/stubCloudTypes.ts
+++ b/packages/graphql/test/stubCloudTypes.ts
@@ -186,13 +186,15 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
     createdAt: new Date(Date.now() - 1000 * 60 * 61).toISOString(),
     completedAt: null,
     cancelledAt: null,
-    ci: null,
-    groups: null,
+    ci: {
+      __typename: 'CIBuildInfo',
+    },
+    groups: [],
     isHiddenByUsageLimits: false,
-    overLimitActionType: null,
-    overLimitActionUrl: null,
-    specs: null,
-    testsForReview: null,
+    overLimitActionType: 'UPGRADE',
+    overLimitActionUrl: '',
+    specs: [],
+    testsForReview: [],
     commitInfo: createCloudRunCommitInfo({
       sha: `fake-sha-${getNodeIdx('CloudRun')}`,
       summary: `fix: make gql work ${config.status ?? 'PASSED'}`,

From 5f51ccef2e1d82af4899a83e028e34bdeded6d91 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Fri, 9 Dec 2022 13:10:18 -0500
Subject: [PATCH 14/22] Update to cloud schema and types

---
 packages/app/src/debug/DebugSpecList.vue |   2 +-
 packages/graphql/schemas/cloud.graphql   | 294 +++++++++++------------
 packages/graphql/schemas/schema.graphql  | 256 ++++++++++----------
 packages/graphql/test/stubCloudTypes.ts  |   9 +-
 4 files changed, 281 insertions(+), 280 deletions(-)

diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
index 89dc95830b1d..811837622d95 100644
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -42,7 +42,7 @@ fragment DebugSpecListSpec on CloudSpecRun {
 `
 
 gql`
-fragment DebugSpecListTests on TestResult {
+fragment DebugSpecListTests on CloudTestResult {
   id
   specId
   title(depth: 2)
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index ba46df85ec8c..d7ca3d4a4bb3 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -1,7 +1,7 @@
 ### This file was generated by Nexus Schema
 ### Do not make changes to this file directly
 
-type BrowserInfo {
+type CloudBrowserInfo implements Node {
   """
   The formatted name of the browser, e.g. `Electron`
   """
@@ -16,7 +16,7 @@ type BrowserInfo {
   The version of the browser, i.e. `59`
   """
   formattedVersion: String
-  id: String
+  id: ID!
 
   """
   The ID of the browser, e.g. `electron`
@@ -29,7 +29,7 @@ type BrowserInfo {
   unformattedVersion: String
 }
 
-type CIBuildInfo {
+type CloudCiBuildInfo implements Node {
   """
   CI build ID extracted from the environment (if available)
   """
@@ -44,7 +44,11 @@ type CIBuildInfo {
   The formatted name of the provider that performed the associated run, e.g. `CircleCI`
   """
   formattedProvider: String
-  id: String
+
+  """
+  Globally unique identifier representing a concrete GraphQL ObjectType
+  """
+  id: ID!
 
   """
   The ID of the provider that performed the associated run, e.g. `circleci`
@@ -82,6 +86,31 @@ type CloudLatestRunUpdateSpecData {
   pollingInterval: Int
 }
 
+type CloudOperatingSystem implements Node {
+  id: ID!
+
+  """
+  The formatted name of the operating system, e.g. `linux`
+  """
+  name: String
+
+  """
+  The formatted name of the operating system with the version, e.g. `linux 14.04`
+  """
+  nameWithVersion: String
+
+  """
+  The platform of the OS, e.g. `linux`
+  """
+  platform: OperatingSystemsEnum
+  unformattedName: String
+
+  """
+  The version of the operating system, e.g. `14.04`
+  """
+  version: String
+}
+
 """
 A CloudOrganization represents an Organization stored in the Cypress Cloud
 """
@@ -439,7 +468,7 @@ type CloudRun implements Node {
   """
   Information about the CI provider that performed the build
   """
-  ci: CIBuildInfo!
+  ci: CloudCiBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
   createdAt: DateTime!
@@ -456,7 +485,7 @@ type CloudRun implements Node {
   specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
-  testsForReview(limit: Int! = 100): [TestResult!]!
+  testsForReview(limit: Int! = 100): [CloudTestResult!]!
 
   """
   Total duration of the run in milliseconds, accounting for any parallelization
@@ -550,8 +579,8 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
-type CloudRunGroup {
-  browser: BrowserInfo!
+type CloudRunGroup implements Node {
+  browser: CloudBrowserInfo!
   completedAt: DateTime
   createdAt: DateTime!
 
@@ -560,8 +589,8 @@ type CloudRunGroup {
   """
   duration: Int!
   groupName: String
-  id: String!
-  os: OperatingSystem!
+  id: ID!
+  os: CloudOperatingSystem!
   status: CloudRunGroupStatusEnum!
 
   """
@@ -588,6 +617,67 @@ enum CloudRunGroupStatusEnum {
   UNCLAIMED
 }
 
+type CloudRunInstance implements Node {
+  groupId: String!
+
+  """
+  Used to determine if the instance has screenshots
+  """
+  hasScreenshots: Boolean!
+
+  """
+  Used to determine if the instance has stdout
+  """
+  hasStdout: Boolean!
+
+  """
+  Used to determine if the instance has screenshots
+  """
+  hasVideo: Boolean!
+  id: ID!
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  screenshotsUrl: String
+  status: RunInstanceStatusEnum!
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  stdoutUrl: String
+
+  """
+  This is the number of failed tests for the instance
+  """
+  totalFailed: Int
+
+  """
+  This is the number of passed tests for the instance
+  """
+  totalPassed: Int
+
+  """
+  This is the number of pending tests for the instance
+  """
+  totalPending: Int
+
+  """
+  This is the number of running tests for the instance
+  """
+  totalRunning: Int
+
+  """
+  This is the number of skipped tests for the instance
+  """
+  totalSkipped: Int
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  videoUrl: String
+}
+
 """
 Possible check status of the test run
 """
@@ -632,10 +722,6 @@ type CloudSpecRun implements Node {
   """
   groupCount: Int
   groupIds: [String]
-
-  """
-  Globally unique identifier representing a concrete GraphQL ObjectType
-  """
   id: ID!
   path: String!
 
@@ -710,6 +796,53 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
+type CloudTestResult implements Node {
+  bodyHash: String!
+
+  """
+  This is the duration of the test result
+  """
+  duration: Int
+  id: ID!
+  instance: CloudRunInstance
+
+  """
+  If the test result was flaky in the current run
+  """
+  isFlaky: Boolean!
+
+  """
+  If the test result was muted in the current run
+  """
+  isMuted: Boolean!
+  specId: String!
+  state: CloudTestResultStateEnum!
+  testId: String
+  testUrl: String!
+  title(
+    """
+    This will trim the test title to the provided depth
+    """
+    depth: Int!
+  ): String!
+  titleParts: [String!]!
+}
+
+"""
+State of the test result
+"""
+enum CloudTestResultStateEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  PASSED
+  PENDING
+  RUNNING
+  SKIPPED
+  TIMEDOUT
+  UNKNOWN
+}
+
 """
 A CloudUser represents an User stored in the Cypress Cloud
 """
@@ -817,31 +950,6 @@ interface Node {
   id: ID!
 }
 
-type OperatingSystem {
-  id: String
-
-  """
-  The formatted name of the operating system, e.g. `linux`
-  """
-  name: String
-
-  """
-  The formatted name of the operating system with the version, e.g. `linux 14.04`
-  """
-  nameWithVersion: String
-
-  """
-  The platform of the OS, e.g. `linux`
-  """
-  platform: OperatingSystemsEnum
-  unformattedName: String
-
-  """
-  The version of the operating system, e.g. `14.04`
-  """
-  version: String
-}
-
 """
 Possible operating systems for a build
 """
@@ -959,67 +1067,6 @@ type Query {
   cloudViewer: CloudUser
 }
 
-type RunInstance {
-  groupId: String!
-
-  """
-  Used to determine if the instance has screenshots
-  """
-  hasScreenshots: Boolean!
-
-  """
-  Used to determine if the instance has stdout
-  """
-  hasStdout: Boolean!
-
-  """
-  Used to determine if the instance has screenshots
-  """
-  hasVideo: Boolean!
-  id: String!
-
-  """
-  Link to Cypress Cloud to view stdout, if available
-  """
-  screenshotsUrl: String
-  status: RunInstanceStatusEnum!
-
-  """
-  Link to Cypress Cloud to view stdout, if available
-  """
-  stdoutUrl: String
-
-  """
-  This is the number of failed tests for the instance
-  """
-  totalFailed: Int
-
-  """
-  This is the number of passed tests for the instance
-  """
-  totalPassed: Int
-
-  """
-  This is the number of pending tests for the instance
-  """
-  totalPending: Int
-
-  """
-  This is the number of running tests for the instance
-  """
-  totalRunning: Int
-
-  """
-  This is the number of skipped tests for the instance
-  """
-  totalSkipped: Int
-
-  """
-  Link to Cypress Cloud to view stdout, if available
-  """
-  videoUrl: String
-}
-
 """
 Possible check status of the instances run
 """
@@ -1048,50 +1095,3 @@ type SpecDataAggregate {
   """
   min: Int
 }
-
-type TestResult {
-  bodyHash: String!
-
-  """
-  This is the duration of the test result
-  """
-  duration: Int
-  id: String!
-  instance: RunInstance
-
-  """
-  If the test result was flaky in the current run
-  """
-  isFlaky: Boolean!
-
-  """
-  If the test result was muted in the current run
-  """
-  isMuted: Boolean!
-  specId: String!
-  state: TestResultStateEnum!
-  testId: String
-  testUrl: String!
-  title(
-    """
-    This will trim the test title to the provided depth
-    """
-    depth: Int!
-  ): String!
-  titleParts: [String!]!
-}
-
-"""
-State of the test result
-"""
-enum TestResultStateEnum {
-  CANCELLED
-  ERRORED
-  FAILED
-  PASSED
-  PENDING
-  RUNNING
-  SKIPPED
-  TIMEDOUT
-  UNKNOWN
-}
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index ec5ce135991a..6e44aa331722 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -45,7 +45,28 @@ enum BrowserFamily {
   webkit
 }
 
-type BrowserInfo {
+enum BrowserStatus {
+  closed
+  open
+  opening
+}
+
+"""
+When we don't have an immediate response for the cloudViewer request, we'll use this as a fallback to 
+render the avatar in the header bar / signal authenticated state immediately
+"""
+type CachedUser implements Node {
+  """Email address of the cached user"""
+  email: String
+
+  """Name of the cached user"""
+  fullName: String
+
+  """Relay style Node ID field for the CachedUser field"""
+  id: ID!
+}
+
+type CloudBrowserInfo implements Node {
   """The formatted name of the browser, e.g. `Electron`"""
   formattedName: String
 
@@ -56,7 +77,7 @@ type BrowserInfo {
 
   """The version of the browser, i.e. `59`"""
   formattedVersion: String
-  id: String
+  id: ID!
 
   """The ID of the browser, e.g. `electron`"""
   unformattedName: String
@@ -65,13 +86,7 @@ type BrowserInfo {
   unformattedVersion: String
 }
 
-enum BrowserStatus {
-  closed
-  open
-  opening
-}
-
-type CIBuildInfo {
+type CloudCiBuildInfo implements Node {
   """CI build ID extracted from the environment (if available)"""
   ciBuildNumber: String
 
@@ -82,7 +97,9 @@ type CIBuildInfo {
   The formatted name of the provider that performed the associated run, e.g. `CircleCI`
   """
   formattedProvider: String
-  id: String
+
+  """Globally unique identifier representing a concrete GraphQL ObjectType"""
+  id: ID!
 
   """
   The ID of the provider that performed the associated run, e.g. `circleci`
@@ -93,21 +110,6 @@ type CIBuildInfo {
   url: String
 }
 
-"""
-When we don't have an immediate response for the cloudViewer request, we'll use this as a fallback to 
-render the avatar in the header bar / signal authenticated state immediately
-"""
-type CachedUser implements Node {
-  """Email address of the cached user"""
-  email: String
-
-  """Name of the cached user"""
-  fullName: String
-
-  """Relay style Node ID field for the CachedUser field"""
-  id: ID!
-}
-
 """Feature not available for subscription"""
 type CloudFeatureNotEnabled {
   """an error message"""
@@ -125,6 +127,25 @@ type CloudLatestRunUpdateSpecData {
   pollingInterval: Int
 }
 
+type CloudOperatingSystem implements Node {
+  id: ID!
+
+  """The formatted name of the operating system, e.g. `linux`"""
+  name: String
+
+  """
+  The formatted name of the operating system with the version, e.g. `linux 14.04`
+  """
+  nameWithVersion: String
+
+  """The platform of the OS, e.g. `linux`"""
+  platform: OperatingSystemsEnum
+  unformattedName: String
+
+  """The version of the operating system, e.g. `14.04`"""
+  version: String
+}
+
 """
 A CloudOrganization represents an Organization stored in the Cypress Cloud
 """
@@ -368,7 +389,7 @@ type CloudRun implements Node {
   cancelledAt: DateTime
 
   """Information about the CI provider that performed the build"""
-  ci: CIBuildInfo!
+  ci: CloudCiBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
   createdAt: DateTime!
@@ -383,7 +404,7 @@ type CloudRun implements Node {
   specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
-  testsForReview(limit: Int! = 100): [TestResult!]!
+  testsForReview(limit: Int! = 100): [CloudTestResult!]!
 
   """
   Total duration of the run in milliseconds, accounting for any parallelization
@@ -453,16 +474,16 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
-type CloudRunGroup {
-  browser: BrowserInfo!
+type CloudRunGroup implements Node {
+  browser: CloudBrowserInfo!
   completedAt: DateTime
   createdAt: DateTime!
 
   """This is the duration of the instance"""
   duration: Int!
   groupName: String
-  id: String!
-  os: OperatingSystem!
+  id: ID!
+  os: CloudOperatingSystem!
   status: CloudRunGroupStatusEnum!
 
   """The type of the test"""
@@ -485,6 +506,45 @@ enum CloudRunGroupStatusEnum {
   UNCLAIMED
 }
 
+type CloudRunInstance implements Node {
+  groupId: String!
+
+  """Used to determine if the instance has screenshots"""
+  hasScreenshots: Boolean!
+
+  """Used to determine if the instance has stdout"""
+  hasStdout: Boolean!
+
+  """Used to determine if the instance has screenshots"""
+  hasVideo: Boolean!
+  id: ID!
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  screenshotsUrl: String
+  status: RunInstanceStatusEnum!
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  stdoutUrl: String
+
+  """This is the number of failed tests for the instance"""
+  totalFailed: Int
+
+  """This is the number of passed tests for the instance"""
+  totalPassed: Int
+
+  """This is the number of pending tests for the instance"""
+  totalPending: Int
+
+  """This is the number of running tests for the instance"""
+  totalRunning: Int
+
+  """This is the number of skipped tests for the instance"""
+  totalSkipped: Int
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  videoUrl: String
+}
+
 """Possible check status of the test run"""
 enum CloudRunStatus {
   CANCELLED
@@ -519,8 +579,6 @@ type CloudSpecRun implements Node {
   """Amount of groups this spec was run in"""
   groupCount: Int
   groupIds: [String]
-
-  """Globally unique identifier representing a concrete GraphQL ObjectType"""
   id: ID!
   path: String!
 
@@ -575,6 +633,43 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
+type CloudTestResult implements Node {
+  bodyHash: String!
+
+  """This is the duration of the test result"""
+  duration: Int
+  id: ID!
+  instance: CloudRunInstance
+
+  """If the test result was flaky in the current run"""
+  isFlaky: Boolean!
+
+  """If the test result was muted in the current run"""
+  isMuted: Boolean!
+  specId: String!
+  state: CloudTestResultStateEnum!
+  testId: String
+  testUrl: String!
+  title(
+    """This will trim the test title to the provided depth"""
+    depth: Int!
+  ): String!
+  titleParts: [String!]!
+}
+
+"""State of the test result"""
+enum CloudTestResultStateEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  PASSED
+  PENDING
+  RUNNING
+  SKIPPED
+  TIMEDOUT
+  UNKNOWN
+}
+
 """A CloudUser represents an User stored in the Cypress Cloud"""
 type CloudUser implements Node {
   """Url to manage cloud organizations for this user"""
@@ -1485,25 +1580,6 @@ interface Node {
   id: ID!
 }
 
-type OperatingSystem {
-  id: String
-
-  """The formatted name of the operating system, e.g. `linux`"""
-  name: String
-
-  """
-  The formatted name of the operating system with the version, e.g. `linux 14.04`
-  """
-  nameWithVersion: String
-
-  """The platform of the OS, e.g. `linux`"""
-  platform: OperatingSystemsEnum
-  unformattedName: String
-
-  """The version of the operating system, e.g. `14.04`"""
-  version: String
-}
-
 """Possible operating systems for a build"""
 enum OperatingSystemsEnum {
   LINUX
@@ -1806,45 +1882,6 @@ enum RemoteFetchableStatus {
   NOT_FETCHED
 }
 
-type RunInstance {
-  groupId: String!
-
-  """Used to determine if the instance has screenshots"""
-  hasScreenshots: Boolean!
-
-  """Used to determine if the instance has stdout"""
-  hasStdout: Boolean!
-
-  """Used to determine if the instance has screenshots"""
-  hasVideo: Boolean!
-  id: String!
-
-  """Link to Cypress Cloud to view stdout, if available"""
-  screenshotsUrl: String
-  status: RunInstanceStatusEnum!
-
-  """Link to Cypress Cloud to view stdout, if available"""
-  stdoutUrl: String
-
-  """This is the number of failed tests for the instance"""
-  totalFailed: Int
-
-  """This is the number of passed tests for the instance"""
-  totalPassed: Int
-
-  """This is the number of pending tests for the instance"""
-  totalPending: Int
-
-  """This is the number of running tests for the instance"""
-  totalRunning: Int
-
-  """This is the number of skipped tests for the instance"""
-  totalSkipped: Int
-
-  """Link to Cypress Cloud to view stdout, if available"""
-  videoUrl: String
-}
-
 """Possible check status of the instances run"""
 enum RunInstanceStatusEnum {
   CANCELLED
@@ -1981,43 +2018,6 @@ enum SupportedBundlers {
   webpack
 }
 
-type TestResult {
-  bodyHash: String!
-
-  """This is the duration of the test result"""
-  duration: Int
-  id: String!
-  instance: RunInstance
-
-  """If the test result was flaky in the current run"""
-  isFlaky: Boolean!
-
-  """If the test result was muted in the current run"""
-  isMuted: Boolean!
-  specId: String!
-  state: TestResultStateEnum!
-  testId: String
-  testUrl: String!
-  title(
-    """This will trim the test title to the provided depth"""
-    depth: Int!
-  ): String!
-  titleParts: [String!]!
-}
-
-"""State of the test result"""
-enum TestResultStateEnum {
-  CANCELLED
-  ERRORED
-  FAILED
-  PASSED
-  PENDING
-  RUNNING
-  SKIPPED
-  TIMEDOUT
-  UNKNOWN
-}
-
 enum TestingTypeEnum {
   component
   e2e
diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
index b34d1598d22e..a9c4dc5a559a 100644
--- a/packages/graphql/test/stubCloudTypes.ts
+++ b/packages/graphql/test/stubCloudTypes.ts
@@ -25,7 +25,7 @@ import type {
   CloudProjectSpecResult,
   CloudRunStatus,
   CloudSpecRun,
-  TestResult,
+  CloudTestResult,
 } from '../src/gen/test-cloud-graphql-types.gen'
 import type { GraphQLResolveInfo } from 'graphql'
 
@@ -187,7 +187,8 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
     completedAt: null,
     cancelledAt: null,
     ci: {
-      __typename: 'CIBuildInfo',
+      __typename: 'CloudCiBuildInfo',
+      id: 'ci_id',
     },
     groups: [],
     isHiddenByUsageLimits: false,
@@ -216,8 +217,8 @@ function addFailedTests (run: CloudRun) {
     path: 'src/Test.cy.ts',
   }
 
-  const test: TestResult = {
-    __typename: 'TestResult',
+  const test: CloudTestResult = {
+    __typename: 'CloudTestResult',
     bodyHash: 'acs123',
     id: '123',
     isFlaky: false,

From 01ea7a2fab0ddd25ca645a86a3875594e68a0ea3 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Fri, 9 Dec 2022 13:44:39 -0500
Subject: [PATCH 15/22] Fixing tests

---
 packages/app/cypress/e2e/specs_list_latest_runs.cy.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

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 bff378126cfc..139d521a54e8 100644
--- a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
@@ -75,6 +75,9 @@ function simulateRunData () {
           status: s,
           createdAt: new Date('2022-05-08T03:17:00').toISOString(),
           completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+          basename: idPrefix.substring(idPrefix.lastIndexOf('/'), idPrefix.indexOf('.')),
+          path: idPrefix,
+          extension: idPrefix.substring(idPrefix.indexOf('.')),
           runNumber: 432,
           groupCount: 2,
           specDuration: {
@@ -444,6 +447,9 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
               status: s,
               createdAt: new Date('2022-05-08T03:17:00').toISOString(),
               completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+              basename: idPrefix.substring(idPrefix.lastIndexOf('/'), idPrefix.indexOf('.')),
+              path: idPrefix,
+              extension: idPrefix.substring(idPrefix.indexOf('.')),
               runNumber: 432,
               groupCount: 2,
               specDuration: {
@@ -550,6 +556,9 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
               status: s,
               createdAt: new Date('2022-05-08T03:17:00').toISOString(),
               completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+              basename: idPrefix.substring(idPrefix.lastIndexOf('/'), idPrefix.indexOf('.')),
+              path: idPrefix,
+              extension: idPrefix.substring(idPrefix.indexOf('.')),
               runNumber: 432,
               groupCount: 2,
               specDuration: {

From 384f922423116da1c9f80cfd42ac6eaf975f676b Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Fri, 9 Dec 2022 15:15:05 -0500
Subject: [PATCH 16/22] Minor test fix

---
 packages/app/cypress/e2e/specs_list_latest_runs.cy.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 139d521a54e8..10fcb6b86f79 100644
--- a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
@@ -75,7 +75,7 @@ function simulateRunData () {
           status: s,
           createdAt: new Date('2022-05-08T03:17:00').toISOString(),
           completedAt: new Date('2022-05-08T05:17:00').toISOString(),
-          basename: idPrefix.substring(idPrefix.lastIndexOf('/'), idPrefix.indexOf('.')),
+          basename: idPrefix.substring(idPrefix.lastIndexOf('/') + 1, idPrefix.indexOf('.')),
           path: idPrefix,
           extension: idPrefix.substring(idPrefix.indexOf('.')),
           runNumber: 432,
@@ -447,7 +447,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
               status: s,
               createdAt: new Date('2022-05-08T03:17:00').toISOString(),
               completedAt: new Date('2022-05-08T05:17:00').toISOString(),
-              basename: idPrefix.substring(idPrefix.lastIndexOf('/'), idPrefix.indexOf('.')),
+              basename: idPrefix.substring(idPrefix.lastIndexOf('/') + 1, idPrefix.indexOf('.')),
               path: idPrefix,
               extension: idPrefix.substring(idPrefix.indexOf('.')),
               runNumber: 432,
@@ -556,7 +556,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
               status: s,
               createdAt: new Date('2022-05-08T03:17:00').toISOString(),
               completedAt: new Date('2022-05-08T05:17:00').toISOString(),
-              basename: idPrefix.substring(idPrefix.lastIndexOf('/'), idPrefix.indexOf('.')),
+              basename: idPrefix.substring(idPrefix.lastIndexOf('/') + 1, idPrefix.indexOf('.')),
               path: idPrefix,
               extension: idPrefix.substring(idPrefix.indexOf('.')),
               runNumber: 432,

From eb93a7963bad41c8c59595eebe363fb2e16edc94 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Mon, 12 Dec 2022 09:41:24 -0500
Subject: [PATCH 17/22] Updates from review comments

---
 packages/app/src/debug/DebugContainer.cy.tsx  | 16 ++++------
 packages/app/src/debug/DebugContainer.vue     |  6 ++--
 packages/app/src/debug/DebugPageHeader.cy.tsx | 25 ++++++++++++++++
 packages/app/src/debug/DebugPageHeader.vue    | 29 ++++++++++++-------
 .../frontend-shared/src/locales/en-US.json    |  2 +-
 5 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
index 8ebb22d836dd..89ab5b9eab20 100644
--- a/packages/app/src/debug/DebugContainer.cy.tsx
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -83,10 +83,6 @@ describe('<DebugContainer />', () => {
   })
 
   describe('testing util function: debugMapping', () => {
-    const mappingList = (specs: {id: string}[], tests: {specId: string, id: string}[]) => {
-      return specsList(specs, tests)
-    }
-
     const createSpecs = (idArr: string[]) => {
       const acc: {id: string}[] = []
 
@@ -104,7 +100,7 @@ describe('<DebugContainer />', () => {
         { specId: 'a1c', id: 'random2' },
       ]
 
-      const debugMappingArray = mappingList(spec, tests)
+      const debugMappingArray = specsList(spec, tests)
 
       expect(debugMappingArray).to.have.length(1)
       expect(debugMappingArray[0]).to.deep.equal({ spec: { id: 'a1c' }, tests: [{ specId: 'a1c', id: 'random1' }, { specId: 'a1c', id: 'random2' }] })
@@ -120,7 +116,7 @@ describe('<DebugContainer />', () => {
         { specId: '123', id: 'random6' },
       ]
 
-      const debugMappingArray = mappingList(specs, tests)
+      const debugMappingArray = specsList(specs, tests)
 
       expect(debugMappingArray).to.have.length(3)
       debugMappingArray.forEach((mapping) => {
@@ -138,7 +134,7 @@ describe('<DebugContainer />', () => {
       const specs = createSpecs(['123', '456', '789'])
       const tests = [{ specId: '123', id: 'random1' }]
 
-      const debugMappingArray = mappingList(specs, tests)
+      const debugMappingArray = specsList(specs, tests)
 
       expect(debugMappingArray).to.have.length(1)
       expect(debugMappingArray).to.deep.equal([{ spec: { id: '123' }, tests: [{ specId: '123', id: 'random1' }] }])
@@ -151,11 +147,11 @@ describe('<DebugContainer />', () => {
         { specId: '456', id: 'random2' },
       ]
 
-      let debugMappingArray = function () {
-        mappingList(specs, tests)
+      const specsListWrapper = () => {
+        return specsList(specs, tests)
       }
 
-      expect(debugMappingArray).to.throw('Could not find spec for id 456')
+      expect(specsListWrapper).to.throw('Could not find spec for id 456')
     })
   })
 })
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 2dbb76c1c04b..5282b5c78d96 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -12,6 +12,7 @@
       />
     </div>
     <div
+      v-else
       data-cy="debug-empty"
     >
       <div
@@ -20,17 +21,16 @@
         {{ t('debugPage.notLoggedIn') }}
       </div>
       <div
-        v-if="loginConnectStore.user.isLoggedIn && !loginConnectStore.project.isProjectConnected"
+        v-else-if="!loginConnectStore.project.isProjectConnected"
       >
         {{ t('debugPage.notConnected' ) }}
       </div>
       <div
-        v-if="loginConnectStore.user.isLoggedIn && loginConnectStore.project.isProjectConnected && !run"
+        v-else-if="!run"
       >
         {{ t('debugPage.noRuns') }}
       </div>
     </div>
-    <!-- <pre>{{ JSON.stringify(props.gql, null, 2) }}</pre> -->
   </div>
 </template>
 
diff --git a/packages/app/src/debug/DebugPageHeader.cy.tsx b/packages/app/src/debug/DebugPageHeader.cy.tsx
index eef1bf09936d..b61e46be0aea 100644
--- a/packages/app/src/debug/DebugPageHeader.cy.tsx
+++ b/packages/app/src/debug/DebugPageHeader.cy.tsx
@@ -52,4 +52,29 @@ describe('<DebugPageHeader />', {
       .children().should('have.length', 2)
     })
   })
+
+  it('renders singular commit message', () => {
+    cy.mountFragment(DebugPageFragmentDoc, {
+      render: (gqlVal) => {
+        return (
+          <DebugPageHeader gql={gqlVal} commitsAhead={1}/>
+        )
+      },
+    })
+
+    cy.findByTestId('debug-commitsAhead')
+    .should('have.text', 'You are 1 commit ahead')
+  })
+
+  it('renders no commit message', () => {
+    cy.mountFragment(DebugPageFragmentDoc, {
+      render: (gqlVal) => {
+        return (
+          <DebugPageHeader gql={gqlVal} commitsAhead={0}/>
+        )
+      },
+    })
+
+    cy.findByTestId('debug-commitsAhead').should('not.exist')
+  })
 })
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index 0673df27028e..571c767f3d84 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -34,7 +34,7 @@
             class="font-normal mx-px px-2 text-orange-500 items-center"
             data-cy="debug-commitsAhead"
           >
-            {{ t('debugPage.header.commitsAhead', {commits: props.commitsAhead}) }}
+            {{ t('debugPage.header.commitsAhead', props.commitsAhead) }}
           </span>
         </div>
         <li class="-mt-8px text-lg text-gray-400">
@@ -118,21 +118,21 @@ const { t } = useI18n()
 
 gql`
 fragment DebugPage on CloudRun {
-	id
+  id
   runNumber
-	createdAt
-	status
+  createdAt
+  status
   totalDuration
   commitInfo {
     sha
   }
   url
-	...RunResults
-	commitInfo {
-		authorName
-		summary
-		branch
-	}
+  ...RunResults
+  commitInfo {
+    authorName
+    summary
+    branch
+  }
 }
 `
 
@@ -144,6 +144,15 @@ const props = defineProps<{
 const debug = computed(() => props.gql)
 
 const relativeCreatedAt = computed(() => dayjs(new Date(debug.value.createdAt!)).fromNow())
+
+/*
+  Format duration to in HH:mm:ss format. The `totalDuration` field is milliseconds. Remove the leading "00:" if the value is less
+  than an hour. Currently, there is no expectation that a run duration will be greater 24 hours or greater, so it is okay that
+  this format would "roll-over" in that scenario.
+  Ex: 1 second which is 1000ms = 00:01
+  Ex: 1 hour and 1 second which is 3601000ms = 01:00:01
+*/
+
 const totalDuration = computed(() => dayjs.duration(debug.value.totalDuration!).format('HH:mm:ss').replace(/^0+:/, ''))
 
 </script>
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index fd0915ff35da..8bffc858c581 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -640,7 +640,7 @@
     "noRuns": "No runs",
     "header": {
       "runUrl": "View in Cypress Cloud",
-      "commitsAhead": "You are {commits} commits ahead"
+      "commitsAhead": "You are {n} commit ahead | You are {n} commits ahead"
     }
   },
   "testingType": {

From 6c9c7db0c5a7557cc07853a18b52768b3a611ae7 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes@cypress.io>
Date: Mon, 12 Dec 2022 12:23:48 -0500
Subject: [PATCH 18/22] Make use of existing computed value

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
---
 packages/app/src/debug/DebugContainer.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 5282b5c78d96..17702747c885 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -83,13 +83,13 @@ const props = defineProps<{
 const loginConnectStore = useLoginConnectStore()
 
 const run = computed(() => {
-  return props.gql.currentProject?.cloudProject?.__typename === 'CloudProject' && props.gql.currentProject.cloudProject.runByNumber
+  return props.gql.currentProject?.cloudProject?.__typename === 'CloudProject' ? props.gql.currentProject.cloudProject.runByNumber : null
 })
 
 const debugSpecsArray = computed(() => {
-  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProject') {
-    const specs = props.gql.currentProject.cloudProject.runByNumber?.specs || []
-    const tests = props.gql.currentProject.cloudProject.runByNumber?.testsForReview || []
+  if (run.value) {
+    const specs = run.value.specs || []
+    const tests = run.value.testsForReview || []
 
     return specsList(specs, tests)
   }

From 6be9b0ccfbbb7b7303c0cd807beb0e321b2dd35a Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Mon, 12 Dec 2022 12:44:48 -0500
Subject: [PATCH 19/22] Improve test

---
 packages/app/src/debug/DebugContainer.cy.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
index 89ab5b9eab20..bf0295c40f8a 100644
--- a/packages/app/src/debug/DebugContainer.cy.tsx
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -118,19 +118,16 @@ describe('<DebugContainer />', () => {
 
       const debugMappingArray = specsList(specs, tests)
 
-      expect(debugMappingArray).to.have.length(3)
-      debugMappingArray.forEach((mapping) => {
-        if (mapping.spec.id === '123') {
-          expect(mapping.tests).to.deep.equal([{ specId: '123', id: 'random1' }, { specId: '123', id: 'random6' }])
-        } else if (mapping.spec.id === '456') {
-          expect(mapping.tests).to.deep.equal([{ specId: '456', id: 'random2' }, { specId: '456', id: 'random3' }])
-        } else if (mapping.spec.id === '789') {
-          expect(mapping.tests).to.deep.equal([{ specId: '789', id: 'random4' }])
-        }
-      })
+      const expected = [
+        { spec: { id: '123' }, tests: [{ specId: '123', id: 'random1' }, { specId: '123', id: 'random6' }] },
+        { spec: { id: '456' }, tests: [{ specId: '456', id: 'random2' }, { specId: '456', id: 'random3' }] },
+        { spec: { id: '789' }, tests: [{ specId: '789', id: 'random4' }] },
+      ]
+
+      expect(debugMappingArray).to.deep.equal(expected)
     })
 
-    it('maps does not show specs that dont have tests', () => {
+    it('maps does not show specs that do not have tests', () => {
       const specs = createSpecs(['123', '456', '789'])
       const tests = [{ specId: '123', id: 'random1' }]
 

From 73b2154aba741ef21818187af9160798d5ccb367 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Mon, 12 Dec 2022 12:45:04 -0500
Subject: [PATCH 20/22] Adding descriptions to cloud fields

---
 packages/graphql/schemas/cloud.graphql  | 159 +++++++++++++++++++++---
 packages/graphql/schemas/schema.graphql |  91 +++++++++++---
 2 files changed, 220 insertions(+), 30 deletions(-)

diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index d7ca3d4a4bb3..ed63d7b8cbc6 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -1,6 +1,9 @@
 ### This file was generated by Nexus Schema
 ### Do not make changes to this file directly
 
+"""
+Information about the browser the tests were run on
+"""
 type CloudBrowserInfo implements Node {
   """
   The formatted name of the browser, e.g. `Electron`
@@ -29,14 +32,17 @@ type CloudBrowserInfo implements Node {
   unformattedVersion: String
 }
 
+"""
+Information about the CI provider that performed a run
+"""
 type CloudCiBuildInfo implements Node {
   """
-  CI build ID extracted from the environment (if available)
+  CI build ID as extracted from the CI worker environment (if available)
   """
   ciBuildNumber: String
 
   """
-  Formatted CI build ID extracted from the environment (if available)
+  Formatted CI build ID as extracted from the CI worker environment (if available)
   """
   ciBuildNumberFormatted: String
 
@@ -56,7 +62,7 @@ type CloudCiBuildInfo implements Node {
   provider: String
 
   """
-  A link to the build details for the associated run
+  A link to the build details for the associated run within the CI provider (if available)
   """
   url: String
 }
@@ -86,6 +92,9 @@ type CloudLatestRunUpdateSpecData {
   pollingInterval: Int
 }
 
+"""
+The operating system the tests were run on
+"""
 type CloudOperatingSystem implements Node {
   id: ID!
 
@@ -463,28 +472,59 @@ type CloudRecordKey implements Node {
 A Recorded run of the Test Runner, typically to the cloud
 """
 type CloudRun implements Node {
+  """
+  When the run was cancelled, null if not cancelled
+  """
   cancelledAt: DateTime
 
   """
-  Information about the CI provider that performed the build
+  Information about the CI provider that performed the run
   """
   ci: CloudCiBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
+
+  """
+  When the run was created
+  """
   createdAt: DateTime!
+
+  """
+  All groups within this run
+  """
   groups: [CloudRunGroup!]!
 
   """
   Globally unique identifier representing a concrete GraphQL ObjectType
   """
   id: ID!
+
+  """
+  Whether this run is hidden by usage limits
+  """
   isHiddenByUsageLimits: Boolean!
+
+  """
+  What to do when the run is over the limit
+  """
   overLimitActionType: OverLimitActionTypeEnum!
+
+  """
+  A link to upgrade or contact an admin
+  """
   overLimitActionUrl: String!
   runNumber: Int
+
+  """
+  All specs within this run
+  """
   specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
+
+  """
+  Tests within this run that failed and need to be reviewed
+  """
   testsForReview(limit: Int! = 100): [CloudTestResult!]!
 
   """
@@ -579,17 +619,39 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
+"""
+A group of tests that are executed together within a run
+"""
 type CloudRunGroup implements Node {
+  """
+  The browser the tests were run on
+  """
   browser: CloudBrowserInfo!
+
+  """
+  The date and time the group was completed
+  """
   completedAt: DateTime
+
+  """
+  The date and time the group was created
+  """
   createdAt: DateTime!
 
   """
-  This is the duration of the instance
+  The overall duration of the tests in the group in milliseconds
   """
   duration: Int!
+
+  """
+  The name of the group
+  """
   groupName: String
   id: ID!
+
+  """
+  The operating system the tests were run on
+  """
   os: CloudOperatingSystem!
   status: CloudRunGroupStatusEnum!
 
@@ -597,9 +659,25 @@ type CloudRunGroup implements Node {
   The type of the test
   """
   testingType: String!
+
+  """
+  The total number of tests that failed within the group
+  """
   totalFailures: Int!
+
+  """
+  The total number of tests that passed within the group
+  """
   totalPasses: Int!
+
+  """
+  The total number of tests that are pending within the group
+  """
   totalPending: Int!
+
+  """
+  The total number of tests that are skipped within the group
+  """
   totalSkipped: Int!
 }
 
@@ -617,7 +695,13 @@ enum CloudRunGroupStatusEnum {
   UNCLAIMED
 }
 
+"""
+An instance of executing a single test within a run
+"""
 type CloudRunInstance implements Node {
+  """
+  The ID of the group that this instance belongs to
+  """
   groupId: String!
 
   """
@@ -640,6 +724,10 @@ type CloudRunInstance implements Node {
   Link to Cypress Cloud to view stdout, if available
   """
   screenshotsUrl: String
+
+  """
+  The status of the instance
+  """
   status: RunInstanceStatusEnum!
 
   """
@@ -701,34 +789,53 @@ type CloudRunTag implements Node {
 }
 
 """
-A Recorded run of a given spec from the Test Runner, typically to the cloud
+Details of test recording in Cypress Cloud for a spec file within a run
 """
 type CloudSpecRun implements Node {
+  """
+  Basename of the spec file
+  """
   basename: String!
 
   """
-  When the run was completed
+  When the spec was completed
   """
   completedAt: DateTime
 
   """
-  When the run was created
+  When the spec was registered to run
   """
   createdAt: DateTime
+
+  """
+  Extension of the spec file
+  """
   extension: String!
 
   """
   Amount of groups this spec was run in
   """
   groupCount: Int
+
+  """
+  Unique identifiers for each group this spec was run in
+  """
   groupIds: [String]
   id: ID!
+
+  """
+  Full path to the spec file
+  """
   path: String!
 
   """
   Incremental run number assigned
   """
   runNumber: Int
+
+  """
+  Short path to the spec file without leading Cypress directories
+  """
   shortPath: String
 
   """
@@ -762,7 +869,7 @@ type CloudSpecRun implements Node {
   testsSkipped: SpecDataAggregate
 
   """
-  A link to the run overview page filtered by spec
+  A link to the run overview page in Cypress Cloud filtered by spec
   """
   url: String
 }
@@ -796,14 +903,19 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
+"""
+Details of a recording in Cypress Cloud for a single test within a run
+"""
 type CloudTestResult implements Node {
-  bodyHash: String!
-
   """
-  This is the duration of the test result
+  This is the duration of the test result in milliseconds
   """
   duration: Int
   id: ID!
+
+  """
+  The instance of running the test result within the corresponding run
+  """
   instance: CloudRunInstance
 
   """
@@ -812,19 +924,33 @@ type CloudTestResult implements Node {
   isFlaky: Boolean!
 
   """
-  If the test result was muted in the current run
+  The spec ID of the test result
   """
-  isMuted: Boolean!
   specId: String!
+
+  """
+  The state of the test result
+  """
   state: CloudTestResultStateEnum!
-  testId: String
+
+  """
+  The URL to the test result in Cypress Cloud
+  """
   testUrl: String!
+
+  """
+  The title of the test result: describe/context > it/test
+  """
   title(
     """
     This will trim the test title to the provided depth
     """
     depth: Int!
   ): String!
+
+  """
+  The title of the test result split into parts
+  """
   titleParts: [String!]!
 }
 
@@ -960,6 +1086,9 @@ enum OperatingSystemsEnum {
   WINDOWS
 }
 
+"""
+What to do when the run is over the limit
+"""
 enum OverLimitActionTypeEnum {
   CONTACT_ADMIN
   UPGRADE
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 6e44aa331722..c88ea8e28902 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -66,6 +66,7 @@ type CachedUser implements Node {
   id: ID!
 }
 
+"""Information about the browser the tests were run on"""
 type CloudBrowserInfo implements Node {
   """The formatted name of the browser, e.g. `Electron`"""
   formattedName: String
@@ -86,11 +87,14 @@ type CloudBrowserInfo implements Node {
   unformattedVersion: String
 }
 
+"""Information about the CI provider that performed a run"""
 type CloudCiBuildInfo implements Node {
-  """CI build ID extracted from the environment (if available)"""
+  """CI build ID as extracted from the CI worker environment (if available)"""
   ciBuildNumber: String
 
-  """Formatted CI build ID extracted from the environment (if available)"""
+  """
+  Formatted CI build ID as extracted from the CI worker environment (if available)
+  """
   ciBuildNumberFormatted: String
 
   """
@@ -106,7 +110,9 @@ type CloudCiBuildInfo implements Node {
   """
   provider: String
 
-  """A link to the build details for the associated run"""
+  """
+  A link to the build details for the associated run within the CI provider (if available)
+  """
   url: String
 }
 
@@ -127,6 +133,7 @@ type CloudLatestRunUpdateSpecData {
   pollingInterval: Int
 }
 
+"""The operating system the tests were run on"""
 type CloudOperatingSystem implements Node {
   id: ID!
 
@@ -386,24 +393,39 @@ type CloudRecordKey implements Node {
 
 """A Recorded run of the Test Runner, typically to the cloud"""
 type CloudRun implements Node {
+  """When the run was cancelled, null if not cancelled"""
   cancelledAt: DateTime
 
-  """Information about the CI provider that performed the build"""
+  """Information about the CI provider that performed the run"""
   ci: CloudCiBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
+
+  """When the run was created"""
   createdAt: DateTime!
+
+  """All groups within this run"""
   groups: [CloudRunGroup!]!
 
   """Globally unique identifier representing a concrete GraphQL ObjectType"""
   id: ID!
+
+  """Whether this run is hidden by usage limits"""
   isHiddenByUsageLimits: Boolean!
+
+  """What to do when the run is over the limit"""
   overLimitActionType: OverLimitActionTypeEnum!
+
+  """A link to upgrade or contact an admin"""
   overLimitActionUrl: String!
   runNumber: Int
+
+  """All specs within this run"""
   specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
+
+  """Tests within this run that failed and need to be reviewed"""
   testsForReview(limit: Int! = 100): [CloudTestResult!]!
 
   """
@@ -474,23 +496,41 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
+"""A group of tests that are executed together within a run"""
 type CloudRunGroup implements Node {
+  """The browser the tests were run on"""
   browser: CloudBrowserInfo!
+
+  """The date and time the group was completed"""
   completedAt: DateTime
+
+  """The date and time the group was created"""
   createdAt: DateTime!
 
-  """This is the duration of the instance"""
+  """The overall duration of the tests in the group in milliseconds"""
   duration: Int!
+
+  """The name of the group"""
   groupName: String
   id: ID!
+
+  """The operating system the tests were run on"""
   os: CloudOperatingSystem!
   status: CloudRunGroupStatusEnum!
 
   """The type of the test"""
   testingType: String!
+
+  """The total number of tests that failed within the group"""
   totalFailures: Int!
+
+  """The total number of tests that passed within the group"""
   totalPasses: Int!
+
+  """The total number of tests that are pending within the group"""
   totalPending: Int!
+
+  """The total number of tests that are skipped within the group"""
   totalSkipped: Int!
 }
 
@@ -506,7 +546,9 @@ enum CloudRunGroupStatusEnum {
   UNCLAIMED
 }
 
+"""An instance of executing a single test within a run"""
 type CloudRunInstance implements Node {
+  """The ID of the group that this instance belongs to"""
   groupId: String!
 
   """Used to determine if the instance has screenshots"""
@@ -521,6 +563,8 @@ type CloudRunInstance implements Node {
 
   """Link to Cypress Cloud to view stdout, if available"""
   screenshotsUrl: String
+
+  """The status of the instance"""
   status: RunInstanceStatusEnum!
 
   """Link to Cypress Cloud to view stdout, if available"""
@@ -564,26 +608,35 @@ type CloudRunTag implements Node {
 }
 
 """
-A Recorded run of a given spec from the Test Runner, typically to the cloud
+Details of test recording in Cypress Cloud for a spec file within a run
 """
 type CloudSpecRun implements Node {
+  """Basename of the spec file"""
   basename: String!
 
-  """When the run was completed"""
+  """When the spec was completed"""
   completedAt: DateTime
 
-  """When the run was created"""
+  """When the spec was registered to run"""
   createdAt: DateTime
+
+  """Extension of the spec file"""
   extension: String!
 
   """Amount of groups this spec was run in"""
   groupCount: Int
+
+  """Unique identifiers for each group this spec was run in"""
   groupIds: [String]
   id: ID!
+
+  """Full path to the spec file"""
   path: String!
 
   """Incremental run number assigned"""
   runNumber: Int
+
+  """Short path to the spec file without leading Cypress directories"""
   shortPath: String
 
   """
@@ -606,7 +659,7 @@ type CloudSpecRun implements Node {
   """Aggregate information about how many tests were skipped in the groups"""
   testsSkipped: SpecDataAggregate
 
-  """A link to the run overview page filtered by spec"""
+  """A link to the run overview page in Cypress Cloud filtered by spec"""
   url: String
 }
 
@@ -633,27 +686,34 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
+"""Details of a recording in Cypress Cloud for a single test within a run"""
 type CloudTestResult implements Node {
-  bodyHash: String!
-
-  """This is the duration of the test result"""
+  """This is the duration of the test result in milliseconds"""
   duration: Int
   id: ID!
+
+  """The instance of running the test result within the corresponding run"""
   instance: CloudRunInstance
 
   """If the test result was flaky in the current run"""
   isFlaky: Boolean!
 
-  """If the test result was muted in the current run"""
-  isMuted: Boolean!
+  """The spec ID of the test result"""
   specId: String!
+
+  """The state of the test result"""
   state: CloudTestResultStateEnum!
-  testId: String
+
+  """The URL to the test result in Cypress Cloud"""
   testUrl: String!
+
+  """The title of the test result: describe/context > it/test"""
   title(
     """This will trim the test title to the provided depth"""
     depth: Int!
   ): String!
+
+  """The title of the test result split into parts"""
   titleParts: [String!]!
 }
 
@@ -1588,6 +1648,7 @@ enum OperatingSystemsEnum {
   WINDOWS
 }
 
+"""What to do when the run is over the limit"""
 enum OverLimitActionTypeEnum {
   CONTACT_ADMIN
   UPGRADE

From ce2deb13b1b692b66074bdd81fe8fddc2518e8c6 Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Mon, 12 Dec 2022 13:13:06 -0500
Subject: [PATCH 21/22] Encapsulate duration format in composable

---
 .../src/composables/useDurationFormat.cy.tsx  | 39 +++++++++++++++++++
 .../app/src/composables/useDurationFormat.ts  | 13 +++++++
 packages/app/src/debug/DebugPageHeader.vue    | 11 +-----
 packages/app/src/runs/RunCard.vue             |  3 +-
 4 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 packages/app/src/composables/useDurationFormat.cy.tsx
 create mode 100644 packages/app/src/composables/useDurationFormat.ts

diff --git a/packages/app/src/composables/useDurationFormat.cy.tsx b/packages/app/src/composables/useDurationFormat.cy.tsx
new file mode 100644
index 000000000000..54914b6d727f
--- /dev/null
+++ b/packages/app/src/composables/useDurationFormat.cy.tsx
@@ -0,0 +1,39 @@
+import { ref } from 'vue'
+import { useDurationFormat } from './useDurationFormat'
+
+describe('useDurationFormat', () => {
+  it('should format duration', () => {
+    expect(useDurationFormat(1000).value).to.eq('00:01')
+    expect(useDurationFormat(60000).value).to.eq('01:00')
+    expect(useDurationFormat(6000000).value).to.eq('01:40:00')
+
+    // expects 24 hours and greater to "roll over" and not include day information
+    expect(useDurationFormat(86400000).value).to.eq('00:00')
+  })
+
+  it('should render with value', () => {
+    const duration = 1000
+    const formatted = useDurationFormat(duration)
+
+    cy.mount(() => (<div>
+      {formatted.value}
+    </div>))
+
+    cy.contains('00:01')
+  })
+
+  it('should render with ref and update if ref changes', () => {
+    const duration = ref(1000)
+    const formatted = useDurationFormat(duration)
+
+    cy.mount(() => (<div>
+      {formatted.value}
+    </div>))
+
+    cy.contains('00:01').then(() => {
+      duration.value = 2000
+    })
+
+    cy.contains('00:02')
+  })
+})
diff --git a/packages/app/src/composables/useDurationFormat.ts b/packages/app/src/composables/useDurationFormat.ts
new file mode 100644
index 000000000000..08b4e6bb476e
--- /dev/null
+++ b/packages/app/src/composables/useDurationFormat.ts
@@ -0,0 +1,13 @@
+import { computed, Ref, unref } from 'vue'
+import { dayjs } from '../runs/utils/day.js'
+
+/*
+  Format duration to in HH:mm:ss format. The `totalDuration` field is milliseconds. Remove the leading "00:" if the value is less
+  than an hour. Currently, there is no expectation that a run duration will be greater 24 hours or greater, so it is okay that
+  this format would "roll-over" in that scenario.
+  Ex: 1 second which is 1000ms = 00:01
+  Ex: 1 hour and 1 second which is 3601000ms = 01:00:01
+*/
+export function useDurationFormat (value: number | Ref<number>) {
+  return computed(() => dayjs.duration(unref(value)).format('HH:mm:ss').replace(/^0+:/, ''))
+}
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index 571c767f3d84..74c4b773fde9 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -113,6 +113,7 @@ import { IconTimeStopwatch } from '@cypress-design/vue-icon'
 import { gql } from '@urql/core'
 import { dayjs } from '../runs/utils/day.js'
 import { useI18n } from 'vue-i18n'
+import { useDurationFormat } from '../composables/useDurationFormat'
 
 const { t } = useI18n()
 
@@ -145,15 +146,7 @@ const debug = computed(() => props.gql)
 
 const relativeCreatedAt = computed(() => dayjs(new Date(debug.value.createdAt!)).fromNow())
 
-/*
-  Format duration to in HH:mm:ss format. The `totalDuration` field is milliseconds. Remove the leading "00:" if the value is less
-  than an hour. Currently, there is no expectation that a run duration will be greater 24 hours or greater, so it is okay that
-  this format would "roll-over" in that scenario.
-  Ex: 1 second which is 1000ms = 00:01
-  Ex: 1 hour and 1 second which is 3601000ms = 01:00:01
-*/
-
-const totalDuration = computed(() => dayjs.duration(debug.value.totalDuration!).format('HH:mm:ss').replace(/^0+:/, ''))
+const totalDuration = useDurationFormat(debug.value.totalDuration ?? 0)
 
 </script>
 <style scoped>
diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
index 7afae3eccd60..4e911afc9446 100644
--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -77,6 +77,7 @@ import ErroredIcon from '~icons/cy/status-errored-solid_x24.svg'
 import SkippedIcon from '~icons/cy/status-skipped_x24.svg'
 import PendingIcon from '~icons/cy/status-pending_x24.svg'
 import { dayjs } from './utils/day.js'
+import { useDurationFormat } from '../composables/useDurationFormat'
 
 gql`
 fragment RunCard on CloudRun {
@@ -120,7 +121,7 @@ const run = computed(() => props.gql)
 
 const relativeCreatedAt = computed(() => dayjs(new Date(run.value.createdAt!)).fromNow())
 
-const totalDuration = computed(() => dayjs.duration(run.value.totalDuration!).format('HH:mm:ss').replace(/^0+:/, ''))
+const totalDuration = useDurationFormat(run.value.totalDuration ?? 0)
 
 const tags = computed(() => {
   const tags = (props.gql.tags ?? []).map((tag) => tag?.name).filter(Boolean) as string[]

From 9d62ced065e573b6cb940d1a91c189cfe0bab77f Mon Sep 17 00:00:00 2001
From: Stokes Player <stokes.player@gmail.com>
Date: Mon, 12 Dec 2022 14:32:47 -0500
Subject: [PATCH 22/22] Making changes to align with latest cloud update

---
 packages/app/src/debug/DebugSpecList.vue | 5 +++--
 packages/graphql/test/stubCloudTypes.ts  | 5 +----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
index 811837622d95..85612c945a6d 100644
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -77,12 +77,13 @@ const specs = computed(() => {
   return props.specs.map((specItem) => {
     const fileName = specItem.spec.basename
     const fileExtension = specItem.spec.extension
+    const fileNameWithoutExtension = fileName.replace(fileExtension, '')
 
     return {
       spec: {
         id: specItem.spec.id,
-        path: specItem.spec.path.replace(fileName + fileExtension, ''),
-        fileName,
+        path: specItem.spec.path.replace(fileNameWithoutExtension + fileExtension, ''),
+        fileName: fileNameWithoutExtension,
         fileExtension,
       },
       tests: specItem.tests,
diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
index a9c4dc5a559a..d3427737ec77 100644
--- a/packages/graphql/test/stubCloudTypes.ts
+++ b/packages/graphql/test/stubCloudTypes.ts
@@ -212,22 +212,19 @@ function addFailedTests (run: CloudRun) {
   const spec: CloudSpecRun = {
     __typename: 'CloudSpecRun',
     id: specId,
-    basename: 'Test',
+    basename: 'Test.cy.ts',
     extension: '.cy.ts',
     path: 'src/Test.cy.ts',
   }
 
   const test: CloudTestResult = {
     __typename: 'CloudTestResult',
-    bodyHash: 'acs123',
     id: '123',
     isFlaky: false,
-    isMuted: false,
     specId,
     state: 'FAILED' as const,
     duration: null,
     instance: null,
-    testId: null,
     testUrl: 'http://cloudurl',
     title: '<test/> Should render',
     titleParts: ['<test/>', 'should render'],