feat: IATR-M1.0 Debug page Header Update (#25072)

Co-authored-by: Stokes Player <stokes.player@gmail.com>
Co-authored-by: elevatebart <bart@cypress.io>
Closes #24851

Author: amehta265

packages/app/package.json

@@ -21,6 +21,7 @@
   "dependencies": {},
   "devDependencies": {
     "@cypress-design/vue-icon": "^0.12.1",
+    "@cypress-design/vue-statusicon": "0.2.0",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",

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

@@ -1,5 +1,6 @@
-import { DebugPageFragmentDoc } from '../generated/graphql-test'
+import { CloudRunStatus, DebugPageFragmentDoc } from '../generated/graphql-test'
 import DebugPageHeader from './DebugPageHeader.vue'
+import { defaultMessages } from '@cy/i18n'
 
 const defaults = [
   { attr: 'debug-header-branch', text: 'Branch Name: feature/DESIGN-183' },
@@ -16,6 +17,7 @@ describe('<DebugPageHeader />', {
     cy.mountFragment(DebugPageFragmentDoc, {
       onResult (result) {
         if (result) {
+          result.status = 'FAILED'
           if (result.commitInfo) {
             result.commitInfo.summary = 'Adding a hover state to the button component'
             result.commitInfo.branch = 'feature/DESIGN-183'
@@ -32,27 +34,71 @@ describe('<DebugPageHeader />', {
     })
 
     cy.findByTestId('debug-header').children().should('have.length', 2)
-    cy.findByTestId('debug-test-summary')
-    .should('have.text', 'Adding a hover state to the button component')
+    cy.findByTestId('debug-test-summary').should('have.text', 'Adding a hover state to the button component')
 
-    cy.findByTestId('debug-runCommit-info').children().should('have.length', 3)
-    cy.findByTestId('debug-runNumber')
-    .should('have.text', ' Run #432')
-    .should('have.css', 'color', 'rgb(90, 95, 122)')
-
-    cy.findByTestId('debug-commitsAhead')
-    .should('have.text', 'You are 2 commits ahead')
-    .should('have.css', 'color', 'rgb(189, 88, 0)')
+    cy.findByTestId('debug-commitsAhead').should('have.text', 'You are 2 commits ahead')
 
     cy.findByTestId('debug-results').should('be.visible')
 
+    cy.findByTestId('debug-runNumber-FAILED')
+    .should('have.text', '#432')
+    .children().should('have.length', 2)
+
+    cy.findByTestId('debug-flaky-badge')
+    .should('not.exist')
+
     defaults.forEach((obj) => {
       cy.findByTestId(obj.attr)
       .should('have.text', obj.text)
       .children().should('have.length', 2)
     })
   })
 
+  it('displays a flaky badge', () => {
+    const flakyCount = 4
+
+    cy.mountFragment(DebugPageFragmentDoc, {
+      onResult: (result) => {
+        if (result) {
+          result.totalFlakyTests = flakyCount
+        }
+      },
+      render: (gqlVal) => {
+        return (
+          <DebugPageHeader gql={gqlVal} commitsAhead={0}/>
+        )
+      },
+    })
+
+    cy.findByTestId('debug-flaky-badge')
+    .contains(defaultMessages.specPage.flaky.badgeLabel)
+
+    cy.findByTestId('total-flaky-tests')
+    .contains(flakyCount)
+  })
+
+  it('displays each run status', () => {
+    const statuses: CloudRunStatus[] = ['PASSED', 'FAILED', 'CANCELLED', 'RUNNING', 'ERRORED']
+
+    statuses.forEach((status) => {
+      cy.mountFragment(DebugPageFragmentDoc, {
+        onResult: (result) => {
+          if (result) {
+            result.status = status
+          }
+        },
+        render: (gqlVal) => {
+          return (
+            <DebugPageHeader gql={gqlVal} commitsAhead={0}/>
+          )
+        },
+      })
+
+      cy.findByTestId(`debug-runNumber-${status}`).should('be.visible')
+      cy.percySnapshot()
+    })
+  })
+
   it('renders singular commit message', () => {
     cy.mountFragment(DebugPageFragmentDoc, {
       render: (gqlVal) => {

packages/app/src/debug/DebugPageHeader.vue

@@ -5,11 +5,11 @@
   >
     <div
       data-cy="debug-header"
-      class="flex w-full grid py-24px px-24px gap-y-2 overflow-hidden items-center"
+      class="flex w-full grid py-24px px-24px gap-y-2 items-center overflow-hidden"
     >
       <ul
         data-cy="header-top"
-        class="flex flex-row gap-x-2 self-stretch items-center whitespace-nowrap"
+        class="flex flex-row gap-x-2 items-center self-stretch whitespace-nowrap"
       >
         <li
           v-if="debug?.commitInfo?.summary"
@@ -18,25 +18,18 @@
         >
           {{ debug.commitInfo.summary }}
         </li>
-        <div
+        <li
+          v-if="props.commitsAhead"
           class="border rounded flex border-gray-100 h-6 text-sm items-center"
-          data-cy="debug-runCommit-info"
         >
-          <span
-            class="font-medium mx-px px-2 text-gray-700 items-center"
-            data-cy="debug-runNumber"
-          >
-            Run #{{ debug.runNumber }}
-          </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"
           >
             {{ t('debugPage.header.commitsAhead', props.commitsAhead) }}
           </span>
-        </div>
+        </li>
         <li class="-mt-8px text-lg text-gray-400">
           .
         </li>
@@ -55,10 +48,24 @@
         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'"
+          class="flex flex-row text-sm gap-x-2 items-center justify-center"
         >
+          <div
+            v-if="(debug.runNumber && debug.status)"
+            class="border rounded flex flex-row font-semibold bg-gray-50 border-gray-200 h-6 px-2 gap-x-1 items-center justify-center"
+            :data-cy="`debug-runNumber-${debug.status}`"
+          >
+            <SolidStatusIcon
+              size="16"
+              :status="ICON_MAP[debug.status].type"
+            />
+            <span :class="runNumberColor">
+              {{ `#${debug.runNumber}` }}
+            </span>
+          </div>
           <DebugResults
             :gql="props.gql"
+            data-cy="debug-results"
           />
         </li>
         <li
@@ -107,9 +114,10 @@
 import { computed } from 'vue'
 import DebugResults from './DebugResults.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
-import type { DebugPageFragment } from '../generated/graphql'
-import CommitIcon from '~icons/cy/commit_x14'
+import type { DebugPageFragment, CloudRunStatus } from '../generated/graphql'
 import { IconTimeStopwatch } from '@cypress-design/vue-icon'
+import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
+import CommitIcon from '~icons/cy/commit_x14'
 import { gql } from '@urql/core'
 import { dayjs } from '../runs/utils/day.js'
 import { useI18n } from 'vue-i18n'
@@ -144,6 +152,25 @@ const props = defineProps<{
 
 const debug = computed(() => props.gql)
 
+const ICON_MAP: Record<CloudRunStatus, { textColor: string, type: StatusType }> = {
+  PASSED: { textColor: 'text-jade-400', type: 'passed' },
+  FAILED: { textColor: 'text-red-400', type: 'failed' },
+  CANCELLED: { textColor: 'text-gray-500', type: 'cancelled' },
+  ERRORED: { textColor: 'text-orange-400', type: 'errored' },
+  RUNNING: { textColor: 'text-indigo-500', type: 'running' },
+  NOTESTS: { textColor: 'text-indigo-500', type: 'noTests' },
+  OVERLIMIT: { textColor: 'text-indigo-500', type: 'overLimit' },
+  TIMEDOUT: { textColor: 'text-indigo-500', type: 'timedOut' },
+} as const
+
+const runNumberColor = computed(() => {
+  if (props.gql.status) {
+    return ICON_MAP[props.gql.status].textColor
+  }
+
+  return ''
+})
+
 const relativeCreatedAt = computed(() => dayjs(new Date(debug.value.createdAt!)).fromNow())
 
 const totalDuration = useDurationFormat(debug.value.totalDuration ?? 0)

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

@@ -1,4 +1,5 @@
 import DebugResults from './DebugResults.vue'
+import { DebugResultsFragmentDoc } from '../generated/graphql-test'
 import { defaultMessages } from '@cy/i18n'
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 
@@ -14,10 +15,39 @@ describe('<DebugResults />', () => {
         cy.get(`[title=${defaultMessages.runs.results.failed}]`).should('contain.text', cloudRun.totalFailed)
         cy.get(`[title=${defaultMessages.runs.results.skipped}]`).should('contain.text', cloudRun.totalSkipped)
         cy.get(`[title=${defaultMessages.runs.results.pending}]`).should('contain.text', cloudRun.totalPending)
-        cy.findByTestId('icon-prefix').should('exist')
       })
     })
 
     cy.percySnapshot()
   })
 })
+
+describe('Flaky badge tests', () => {
+  const mountingFragment = (flakyTests: number) => {
+    return (
+      cy.mountFragment(DebugResultsFragmentDoc, {
+        onResult (result) {
+          if (result) {
+            result.totalFlakyTests = flakyTests
+          }
+        },
+        render: (gqlVal) => {
+          return (
+            <DebugResults gql={gqlVal} />
+          )
+        },
+      })
+    )
+  }
+
+  it('does not show flaky component when flakyTests are < 1', () => {
+    mountingFragment(0)
+    cy.contains('Flaky').should('not.exist')
+  })
+
+  it('contains flaky badge', () => {
+    mountingFragment(4)
+    cy.findByTestId('debug-flaky-badge').contains(defaultMessages.specPage.flaky.badgeLabel)
+    cy.findByTestId('total-flaky-tests').contains(4)
+  })
+})

packages/app/src/debug/DebugResults.vue

@@ -9,31 +9,34 @@
       :total-skipped="results.totalSkipped"
       :total-pending="results.totalPending"
       :order="['PASSED', 'FAILED', 'SKIPPED', 'PENDING']"
+    />
+    <div
+      v-if="results?.totalFlakyTests"
+      data-cy="debug-flaky-badge"
+      class="border rounded flex flex-row gap-8px items-center h-6 bg-orange-50 border-orange-200 text-sm text-orange-600 px-2 gap-x-1 border-1"
     >
-      <template #prefix>
-        <div
-          class="text-red-400 font-semibold text-sm flex items-center px-2"
-        >
-          <component
-            :is="icon[0]"
-            class="h-16px w-16px pr-2"
-            data-cy="icon-prefix"
-          />
-          {{ icon[1] }}
-        </div>
-        <div class="w-px h-3 my-6px bg-gray-100" />
-      </template>
-    </ResultCounts>
+      <span
+        data-cy="total-flaky-tests"
+        class="font-medium pr-1 opacity-70"
+      >
+        {{ results.totalFlakyTests }}
+      </span>
+      <div class="w-px my-6px h-6 border-orange-200 border" />
+      <span class="font-semibold pl-1">
+        {{ t('specPage.flaky.badgeLabel') }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 import type { DebugResultsFragment } from '../generated/graphql'
 import { gql } from '@urql/core'
-import FailedSolidIcon from '~icons/cy/status-failed-solid_x24.svg'
-import PassedIcon from '~icons/cy/passed-solid_x16.svg'
 import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 gql`
 fragment DebugResults on CloudRun {
@@ -50,13 +53,5 @@ const props = defineProps<{
   gql: DebugResultsFragment
 }>()
 
-const ICON_MAP = {
-  PASSED: [PassedIcon, 'Passed'],
-  FAILED: [FailedSolidIcon, 'Failed'],
-} as const
-
-const icon = computed(() => ICON_MAP['FAILED'])
-
 const results = computed(() => props.gql)
-
 </script>

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

@@ -69,24 +69,4 @@ describe('<ResultCounts />', () => {
       expect(status[3]).to.contain(5)
     })
   })
-
-  const slotContent = {
-    prefix: () => <div class="h-full bg-emerald-100">Prefix</div>,
-  }
-
-  it('tests if the prefix slot shows up in the Result counts', () => {
-    cy.mount(() => (
-      <ResultCounts
-        data-cy='result-count'
-        totalFailed={3}
-        totalPassed={4}
-        totalPending={5}
-        totalSkipped={6}
-        v-slots={slotContent}
-        order={['SKIPPED', 'FAILED', 'PASSED', 'PENDING']}
-      />
-    ))
-
-    cy.findByText('Prefix').should('be.visible')
-  })
 })

packages/frontend-shared/src/components/ResultCounts.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="border rounded flex border-gray-200 h-6 text-gray-700 text-size-14px leading-20px">
-    <slot
-      name="prefix"
-      data-cy="prefix"
-    />
     <div
       v-for="(result, i) in results"
       :key="i"

packages/graphql/schemas/cloud.graphql

@@ -846,7 +846,7 @@ type CloudSpecRun implements Node {
   """
   Most important status for the spec shared between all groups
   """
-  status: CloudRunGroupStatusEnum
+  status: CloudSpecStatus
 
   """
   Aggregate information about how many tests failed in the groups
@@ -903,6 +903,20 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
+"""
+Possible check status of the spec within a run
+"""
+enum CloudSpecStatus {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """
 Details of a recording in Cypress Cloud for a single test within a run
 """