feat(app): Update Runs page visuals to new layout and card design

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.3.0
+
+_Released 09/19/2023 (PENDING)_
+
+**Features:**
+
+ - Introduces new layout for Runs page providing additional run information. Addresses [#27203](https://github.com/cypress-io/cypress/issues/27203).
+
 ## 13.2.0
 
 _Released 09/12/2023_

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

@@ -75,7 +75,7 @@ describe('App - Debug Page', () => {
     .contains('View in Cypress Cloud')
     .should('have.attr', 'href', 'https://cloud.cypress.io/projects/7p5uce/runs/2?utm_medium=Debug+Tab&utm_campaign=View+in+Cypress+Cloud&utm_source=Binary%3A+App')
 
-    cy.findByTestId('debug-runNumber-PASSED').contains('#2')
+    cy.findByTestId('runNumber-status-PASSED').contains('#2')
     cy.findByTestId('debug-commitsAhead').contains('You are 1 commit ahead')
 
     cy.findByTestId('metadata').within(() => {
@@ -136,7 +136,7 @@ describe('App - Debug Page', () => {
 
     cy.findByLabelText('Relevant run had 1 test failure').should('be.visible').contains('1')
 
-    cy.findByTestId('debug-runNumber-FAILED').contains('#136')
+    cy.findByTestId('runNumber-status-FAILED').contains('#136')
     cy.findByTestId('debug-commitsAhead').contains('You are 1 commit ahead')
 
     cy.findByTestId('metadata').within(() => {

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

@@ -60,7 +60,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.visitApp()
       cy.findByTestId('sidebar-link-runs-page').click()
-      cy.get('[data-cy="runs-loader"]')
+      cy.get('[data-cy*="runsSkeleton-"]')
       cy.get('[data-cy="runs"]')
     })
   })
@@ -103,7 +103,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.visitApp()
 
       moveToRunsPage()
-      cy.contains('a', 'OVERLIMIT').click()
+      cy.findByTestId('runNumber-status-OVERLIMIT').click()
 
       cy.withCtx((ctx, o) => {
         expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/4')
@@ -666,29 +666,25 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
         moveToRunsPage()
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().within(() => {
-          cy.findByText('fix: make gql work CANCELLED')
-          cy.get('[data-cy="run-card-icon-CANCELLED"]')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-CANCELLED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/1"]').first().within(() => {
-          cy.findByText('fix: make gql work ERRORED')
-          cy.get('[data-cy="run-card-icon-ERRORED"]')
+        cy.get('[data-cy="runCard-status-ERRORED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-ERRORED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/2"]').first().within(() => {
-          cy.findByText('fix: make gql work FAILED')
-          cy.get('[data-cy="run-card-icon-FAILED"]')
+        cy.get('[data-cy="runCard-status-FAILED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-FAILED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().as('firstRun')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().as('firstRun')
 
         cy.get('@firstRun').within(() => {
-          cy.get('[data-cy="run-card-author"]').contains('John Appleseed')
-          cy.get('[data-cy="run-card-avatar"]')
-          cy.get('[data-cy="run-card-branch"]').contains('main')
-          cy.get('[data-cy="run-card-created-at"]').contains('an hour ago')
-          cy.get('[data-cy="run-card-duration"]').contains('01:00')
+          cy.get('[data-cy="runCard-author"]').contains('John Appleseed')
+          cy.get('[data-cy="runCard-avatar"]')
+          cy.get('[data-cy="runCard-branchName"]').contains('main')
+          cy.get('[data-cy="runCard-createdAt"]').contains('01m 00s (an hour ago)')
 
           cy.contains('span', 'skipped')
           cy.get('span').contains('pending')
@@ -702,7 +698,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
 
         moveToRunsPage()
-        cy.get('[data-cy^="runCard-"]').first().click()
+        cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
 
         cy.withCtx((ctx) => {
           expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/0')
@@ -765,19 +761,18 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
         moveToRunsPage()
 
+        cy.findByText('fix: using Git data CANCELLED')
         cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().within(() => {
-          cy.findByText('fix: using Git data CANCELLED')
-          cy.get('[data-cy="run-card-icon-CANCELLED"]')
+          cy.get('[data-cy="runNumber-status-CANCELLED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().as('firstRun')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().as('firstRun')
 
         cy.get('@firstRun').within(() => {
-          cy.get('[data-cy="run-card-author"]').contains('John Appleseed')
-          cy.get('[data-cy="run-card-avatar"]')
-          cy.get('[data-cy="run-card-branch"]').contains('main')
-          cy.get('[data-cy="run-card-created-at"]').contains('an hour ago')
-          cy.get('[data-cy="run-card-duration"]').contains('01:00')
+          cy.get('[data-cy="runCard-author"]').contains('John Appleseed')
+          cy.get('[data-cy="runCard-avatar"]')
+          cy.get('[data-cy="runCard-branchName"]').contains('main')
+          cy.get('[data-cy="runCard-createdAt"]').contains('01m 00s (an hour ago)')
 
           cy.contains('span', 'skipped')
           cy.get('span').contains('pending')
@@ -791,7 +786,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
 
         moveToRunsPage()
-        cy.get('[data-cy^="runCard-"]').first().click()
+        cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
 
         cy.withCtx((ctx) => {
           expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/0')
@@ -955,7 +950,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     const itSkipIfWindows = Cypress.platform === 'win32' ? it.skip : it
 
     itSkipIfWindows('should re-query for executing runs', () => {
-      cy.get('[data-cy="run-card-icon-RUNNING"]').should('have.length', RUNNING_COUNT).should('be.visible')
+      cy.get('[data-cy="runNumber-status-RUNNING"]').should('have.length', RUNNING_COUNT).should('be.visible')
 
       cy.remoteGraphQLIntercept(async (obj) => {
         await new Promise((resolve) => setTimeout(resolve, 100))
@@ -976,7 +971,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       function completeNext (passed) {
-        cy.get('[data-cy="run-card-icon-PASSED"]').should('have.length', passed).should('be.visible')
+        cy.get('[data-cy="runNumber-status-PASSED"]').should('have.length', passed).should('be.visible')
         if (passed < RUNNING_COUNT) {
           completeNext(passed + 1)
         }

packages/app/package.json

@@ -21,7 +21,7 @@
   "dependencies": {},
   "devDependencies": {
     "@cypress-design/vue-button": "^0.10.1",
-    "@cypress-design/vue-icon": "^0.25.0",
+    "@cypress-design/vue-icon": "^0.26.0",
     "@cypress-design/vue-statusicon": "^0.5.0",
     "@cypress-design/vue-tabs": "^0.5.1",
     "@graphql-typed-document-node/core": "^3.1.0",

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

@@ -43,11 +43,11 @@ describe('<DebugPageHeader />', {
 
     cy.findByTestId('debug-results').should('be.visible')
 
-    cy.findByTestId('debug-runNumber-FAILED')
+    cy.findByTestId('runNumber-status-FAILED')
     .should('have.text', '#432')
     .children().should('have.length', 2)
 
-    cy.findByTestId('debug-flaky-badge')
+    cy.findByTestId('runResults-flakyBadge')
     .should('not.exist')
 
     defaults.forEach((obj) => {
@@ -73,7 +73,7 @@ describe('<DebugPageHeader />', {
       },
     })
 
-    cy.findByTestId('debug-flaky-badge')
+    cy.findByTestId('runResults-flakyBadge')
     .contains(defaultMessages.specPage.flaky.badgeLabel)
 
     cy.findByTestId('total-flaky-tests')
@@ -97,7 +97,7 @@ describe('<DebugPageHeader />', {
         },
       })
 
-      cy.findByTestId(`debug-runNumber-${status}`).should('be.visible')
+      cy.findByTestId(`runNumber-status-${status}`).should('be.visible')
     })
   })
 

packages/app/src/debug/DebugPageHeader.vue

@@ -51,12 +51,12 @@
         <li
           class="flex flex-row text-sm gap-x-2 items-center justify-center"
         >
-          <DebugRunNumber
+          <RunNumber
             v-if="(debug.runNumber && debug.status)"
             :status="debug.status"
             :value="debug.runNumber"
           />
-          <DebugResults
+          <RunResults
             :gql="props.gql"
             data-cy="debug-results"
           />
@@ -92,7 +92,7 @@
           v-if="debug.createdAt"
           data-cy="debug-header-createdAt"
         >
-          <IconTimeStopwatch
+          <IconTimeClock
             size="16"
             class="mr-2"
             stroke-color="gray-500"
@@ -106,14 +106,14 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue'
-import DebugResults from './DebugResults.vue'
+import RunResults from '../runs/RunResults.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
 import type { DebugPageHeaderFragment } from '../generated/graphql'
-import { IconTimeStopwatch } from '@cypress-design/vue-icon'
+import { IconTimeClock } from '@cypress-design/vue-icon'
 import CommitIcon from '~icons/cy/commit_x14'
 import { gql } from '@urql/core'
 import { useI18n } from 'vue-i18n'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunNumber from '../runs/RunNumber.vue'
 import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 import { useRunDateTimeInterval } from './useRunDateTimeInterval'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'

packages/app/src/debug/DebugRunNavigation.vue

@@ -38,12 +38,12 @@
           </LightText>
 
           <template v-else-if="latest?.status && latest.runNumber">
-            <DebugRunNumber
+            <RunNumber
               :status="latest.status"
               :value="latest.runNumber"
               class="mx-[8px]"
             />
-            <DebugResults
+            <RunResults
               v-if="latest"
               :gql="latest"
               class="bg-white mr-[12px]"
@@ -135,8 +135,8 @@ import Button from '@packages/frontend-shared/src/components/Button.vue'
 import { compact, groupBy } from 'lodash'
 import { computed, FunctionalComponent, h } from 'vue'
 import { DebugRunNavigationFragment, DebugRunNavigationRunInfoFragment, DebugRunNavigation_MoveToRunDocument } from '../generated/graphql'
-import DebugResults from './DebugResults.vue'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunResults from '../runs/RunResults.vue'
+import RunNumber from '../runs/RunNumber.vue'
 import DebugCommitIcon from './DebugCommitIcon.vue'
 import DebugRunNavigationLimitMessage from './DebugRunNavigationLimitMessage.vue'
 import { IconChevronRightSmall } from '@cypress-design/vue-icon'
@@ -149,7 +149,7 @@ const { t } = useI18n()
 
 gql`
 fragment DebugRunNavigationRunInfo on CloudRun {
-  ...DebugResults
+  ...RunResults
   ...DebugProgress_DebugTests
   __typename
   runNumber