Skip to content

Commit

Permalink
feat(app): Update Runs page visuals to new layout and card design (#2…
Browse files Browse the repository at this point in the history 
…7770)

* basic card visuals, working on click

* visual tweaks and i18n

* match other i18n

* redo duration format, should make common too

* basic debug, needs validation of relevant run

* refactor and move files

* working top level state

* working grouping, needs subcomponent

* switch click target

* remove dayjs change

* fix current commit

* revise commit for message

* working view runs button

* fix type check

* fix tests

* fix integration tests

* remove old test

* add layout

* add component test for new layout and cleanup

* add count check

* standardize cy tags

* revise count test

* fix typos

* fix padding

* start wrapping

* happy wrap, next trunc

* responsive if wonky

* clean up and titles

* magic resize, needs tests per breakpoint

* standardize the rollup

* working default rollup

* rollup spacing tweaks

* center elements

* update tests for multiple viewports

* add missing breakpoint tests

* fix debug tests for status and badge

* remove unneeded check

* add functional component

* fix check_ts

* update container test

* add changelog

* add tooltip, needs aria label and external link update

* fix overflow

* fix avatar and add aria label to count summary

* change to external href

* remove popup sizing

* add tests

* add missing data cy

* fix runcard test

* Truncate result count

* make truncate style conditional

* match design truncate position

* adddress PR comments

* chore:updating styles (#27798)

* add tooltip content tests and skeletons

* clean up tooltip validation

* fix runs selector

* Update packages/app/src/runs/RunsSkeletonRow.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunsSkeleton.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunsSkeleton.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunsSkeletonRow.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* remove redundant shrink-1s

* more shrinks

---------

Co-authored-by: Stokes Player <[email protected]>
  • Loading branch information
@dkasper-was-taken @warrensplayer
dkasper-was-taken and warrensplayer authored Sep 14, 2023
1 parent 8638abb commit 0e239bf
Show file tree
Hide file tree
Showing 41 changed files with 1,378 additions and 428 deletions.
8 changes: 8 additions & 0 deletions cli/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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_
Expand Down
4 changes: 2 additions & 2 deletions packages/app/cypress/e2e/debug.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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(() => {
Expand Down
53 changes: 24 additions & 29 deletions packages/app/cypress/e2e/runs.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]')
})
})
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand Down Expand Up @@ -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))
Expand All @@ -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)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions packages/app/src/debug/DebugPageHeader.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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')
Expand All @@ -97,7 +97,7 @@ describe('<DebugPageHeader />', {
},
})

cy.findByTestId(`debug-runNumber-${status}`).should('be.visible')
cy.findByTestId(`runNumber-status-${status}`).should('be.visible')
})
})

Expand Down
12 changes: 6 additions & 6 deletions packages/app/src/debug/DebugPageHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down Expand Up @@ -92,7 +92,7 @@
v-if="debug.createdAt"
data-cy="debug-header-createdAt"
>
<IconTimeStopwatch
<IconTimeClock
size="16"
class="mr-2"
stroke-color="gray-500"
Expand All @@ -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'
Expand Down
51 changes: 0 additions & 51 deletions packages/app/src/debug/DebugResults.cy.tsx
View file

This file was deleted.

59 changes: 0 additions & 59 deletions packages/app/src/debug/DebugResults.vue
View file

This file was deleted.

10 changes: 5 additions & 5 deletions packages/app/src/debug/DebugRunNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]"
Expand Down Expand Up @@ -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'
Expand All @@ -149,7 +149,7 @@ const { t } = useI18n()
gql`
fragment DebugRunNavigationRunInfo on CloudRun {
...DebugResults
...RunResults
...DebugProgress_DebugTests
__typename
runNumber
Expand Down
Loading

4 comments on commit 0e239bf

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0e239bf Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.3.0/linux-x64/develop-0e239bf2108b6a80c0d4a5a4c017b77568101549/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0e239bf Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.3.0/linux-arm64/develop-0e239bf2108b6a80c0d4a5a4c017b77568101549/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0e239bf Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.3.0/darwin-x64/develop-0e239bf2108b6a80c0d4a5a4c017b77568101549/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0e239bf Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.3.0/win32-x64/develop-0e239bf2108b6a80c0d4a5a4c017b77568101549/cypress.tgz

Please sign in to comment.