misc: Debug header updates

cli/CHANGELOG.md

@@ -7,6 +7,10 @@ _Released 03/1/2023 (PENDING)_
 
 - Fixed an issue where cookies were being duplicated with the same hostname, but a prepended dot. Fixed an issue where cookies may not be expiring correctly. Fixes [#25174](https://github.com/cypress-io/cypress/issues/25174), [#25205](https://github.com/cypress-io/cypress/issues/25205) and [#25495](https://github.com/cypress-io/cypress/issues/25495).
 
+**Misc:**
+
+ - Made updates to the way that the Debug Page header displays information. Addresses [#25796](https://github.com/cypress-io/cypress/issues/25796) and [#25798](https://github.com/cypress-io/cypress/issues/25798).
+
 ## 12.6.0
 
 _Released 02/15/2023_

packages/app/cypress/e2e/debug.cy.ts

@@ -77,7 +77,7 @@ describe('App - Debug Page', () => {
       cy.findByTestId('debug-header-branch').contains('main')
       cy.findByTestId('debug-header-commitHash').contains('e9d176f')
       cy.findByTestId('debug-header-author').contains('Lachlan Miller')
-      cy.findByTestId('debug-header-createdAt').contains('01:18')
+      cy.findByTestId('debug-header-createdAt').contains('02h 00m 10s')
     })
 
     cy.findByTestId('debug-passed').contains('Well Done!')
@@ -148,7 +148,7 @@ describe('App - Debug Page', () => {
       cy.findByTestId('debug-header-branch').contains('main')
       cy.findByTestId('debug-header-commitHash').contains('commit1')
       cy.findByTestId('debug-header-author').contains('Lachlan Miller')
-      cy.findByTestId('debug-header-createdAt').contains('00:19')
+      cy.findByTestId('debug-header-createdAt').contains('00m 19s')
     })
 
     cy.findByTestId('spec-contents').within(() => {

packages/app/cypress/fixtures/debug-Failing/gql-Debug.json

@@ -14,6 +14,7 @@
           "commitInfo": {
             "sha": "commit1",
             "authorName": "Lachlan Miller",
+            "authorEmail": "hello@cypress.io",
             "summary": "chore: testing cypress",
             "branch": "main",
             "__typename": "CloudRunCommitInfo"

packages/app/cypress/fixtures/debug-Passing/gql-Debug.json

@@ -10,10 +10,11 @@
           "runNumber": 2,
           "createdAt": "2023-01-30T08:10:59.720Z",
           "status": "PASSED",
-          "totalDuration": 78898,
+          "totalDuration": 7210000,
           "commitInfo": {
             "sha": "e9d176f0c00c0428c9945577aec37cb6d48c5a26",
             "authorName": "Lachlan Miller",
+            "authorEmail": "asdf",
             "summary": "update projectId",
             "branch": "main",
             "__typename": "CloudRunCommitInfo"

packages/app/src/debug/DebugPageHeader.cy.tsx

@@ -6,7 +6,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: 01:00 (an hour ago) ' },
+  { attr: 'debug-header-createdAt', text: 'Run Total Duration: 01m 00s (an hour ago) ' },
 ]
 
 describe('<DebugPageHeader />', {
@@ -22,6 +22,7 @@ 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.authorEmail = 'adams@cypress.io'
             result.commitInfo.sha = 'b5e6fde'
           }
         }
@@ -144,4 +145,22 @@ describe('<DebugPageHeader />', {
 
     cy.findByTestId('debug-commitsAhead').should('not.exist')
   })
+
+  it('renders duration over 1 hour', () => {
+    cy.mountFragment(DebugPageHeaderFragmentDoc, {
+      onResult (result) {
+        if (result) {
+          result.totalDuration = 3602000000
+        }
+      },
+      render: (gqlVal) => {
+        return (
+          <DebugPageHeader gql={gqlVal} commitsAhead={0}/>
+        )
+      },
+    })
+
+    cy.findByTestId('debug-header-createdAt')
+    .should('have.text', 'Run Total Duration: 16h 33m 20s (an hour ago) ')
+  })
 })

packages/app/src/debug/DebugPageHeader.vue

@@ -81,8 +81,9 @@
           v-if="debug?.commitInfo?.authorName"
           data-cy="debug-header-author"
         >
-          <i-cy-general-user_x16
-            class="mr-1 mr-11px icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200"
+          <UserAvatar
+            class="h-16px mr-8px w-16px"
+            :email="debug?.commitInfo?.authorEmail"
             data-cy="debug-header-avatar"
           />
           <span class="sr-only">Commit Author:</span> {{ debug.commitInfo.authorName }}
@@ -113,8 +114,8 @@ import CommitIcon from '~icons/cy/commit_x14'
 import { gql } from '@urql/core'
 import { dayjs } from '../runs/utils/day.js'
 import { useI18n } from 'vue-i18n'
-import { useDurationFormat } from '../composables/useDurationFormat'
 import DebugRunNumber from './DebugRunNumber.vue'
+import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 
 const { t } = useI18n()
 
@@ -132,6 +133,7 @@ fragment DebugPageHeader on CloudRun {
   ...RunResults
   commitInfo {
     authorName
+    authorEmail
     summary
     branch
   }
@@ -147,7 +149,14 @@ const debug = computed(() => props.gql)
 
 const relativeCreatedAt = computed(() => dayjs(new Date(debug.value.createdAt!)).fromNow())
 
-const totalDuration = useDurationFormat(debug.value.totalDuration ?? 0)
+/*
+  Format duration to in HH[h] mm[m] ss[s] format. The `totalDuration` field is milliseconds. Remove the leading "00h" 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 = 00m 01s
+  Ex: 1 hour and 1 second which is 3601000ms = 01h 00m 01s
+*/
+const totalDuration = computed(() => dayjs.duration(debug.value.totalDuration ?? 0).format('HH[h] mm[m] ss[s]').replace(/^0+h /, ''))
 
 </script>
 <style scoped>