feat: display a limit warning on the run navigation component when th…

…ere are 100 total runs (#26523)
cypress-io · Apr 18, 2023 · 45ca2fa · 45ca2fa · cypress-bot · Apr 18, 2023
1 parent 1bbe212
commit 45ca2fa
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 47 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -3,6 +3,10 @@
 
 _Released 04/25/2023 (PENDING)_
 
+**Features:**
+
+- The run navigation component on the [Debug page](https://on.cypress.io/debug-page) will now display a warning message if there are more relevant runs than can be displayed in the list. Addresses [#26288](https://github.com/cypress-io/cypress/issues/26288).
+
 **Bugfixes:**
 
 - Fixed an issue where setting `videoCompression` to `0` would cause the video output to be broken. `0` is now treated as false. Addresses [#5191](https://github.com/cypress-io/cypress/issues/5191) and [#24595](https://github.com/cypress-io/cypress/issues/24595).

diff --git a/packages/app/cypress/fixtures/debug-Failing/gql-Debug.json b/packages/app/cypress/fixtures/debug-Failing/gql-Debug.json
@@ -5,6 +5,7 @@
       "cloudProject": {
         "__typename": "CloudProject",
         "id": "cloud-project-test-id",
+        "cloudProjectUrl": "https://cloud.cypress.io/projects/vgqrwp",
         "runByNumber": {
           "id": "Q2xvdWRSdW46TUdWZXhvQkRPNg==",
           "runNumber": 136,

diff --git a/packages/app/cypress/fixtures/debug-Passing/gql-Debug.json b/packages/app/cypress/fixtures/debug-Passing/gql-Debug.json
@@ -5,6 +5,7 @@
       "cloudProject": {
         "__typename": "CloudProject",
         "id": "Q2xvdWRQcm9qZWN0OjdwNXVjZQ==",
+        "cloudProjectUrl": "https://cloud.cypress.io/projects/7p5uce",
         "runByNumber": {
           "id": "Q2xvdWRSdW46bkdudmx5d3BHWg==",
           "runNumber": 2,

diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
@@ -31,6 +31,7 @@
           :runs="allRuns"
           :current-run-number="run.runNumber"
           :current-commit-info="currentCommitInfo"
+          :cloud-project-url="cloudProject?.cloudProjectUrl"
         />
 
         <DebugPageHeader

diff --git a/packages/app/src/debug/DebugRunNavigation.cy.tsx b/packages/app/src/debug/DebugRunNavigation.cy.tsx
@@ -12,6 +12,7 @@ function mountDebugDetailedView (data: {
   currentRun: ReturnType<typeof createRun>
   allRuns: Array<ReturnType<typeof createRun>>
   currentCommitInfo?: CommitInfo
+  cloudProjectUrl?: string
 }) {
   return cy.mountFragment(DebugRunNavigationFragmentDoc, {
     variableTypes: DebugSpecVariableTypes,
@@ -25,7 +26,7 @@ function mountDebugDetailedView (data: {
     render (gqlData) {
       return (
         <div style="margin: 10px">
-          <DebugRunNavigation runs={gqlData.allRuns!} currentRunNumber={data.currentRun.runNumber!} currentCommitInfo={data.currentCommitInfo}/>
+          <DebugRunNavigation runs={gqlData.allRuns!} currentRunNumber={data.currentRun.runNumber!} currentCommitInfo={data.currentCommitInfo} cloudProjectUrl={data.cloudProjectUrl} />
         </div>
       )
     },
@@ -56,6 +57,7 @@ describe('<DebugRunNavigation />', () => {
     cy.get('[data-cy="debug-toggle"]').click()
 
     cy.findByTestId('current-run').should('exist')
+    cy.contains('We found more than 100 runs.').should('not.exist')
   })
 
   it('hide toggle if not on latest and only two runs', () => {
@@ -138,6 +140,8 @@ describe('<DebugRunNavigation />', () => {
 
       cy.get('[data-cy="debug-toggle"]').click()
 
+      cy.contains('We found more than 100 runs.').should('not.exist')
+
       cy.findByTestId('commit-sha-123').as('commit-123').should('exist')
       cy.get('@commit-123').contains('sha-123')
       cy.get('@commit-123').contains('add new feature with a really long commit message to see what happens')
@@ -168,6 +172,8 @@ describe('<DebugRunNavigation />', () => {
       cy.get('[data-cy="debug-toggle"]').click()
       cy.tick(2 * 1000) //allow toggle to animate
 
+      cy.contains('We found more than 100 runs.').should('not.exist')
+
       cy.viewport(616, 850) //currently the narrowest the parent component will go
       cy.percySnapshot('narrowest')
       cy.viewport(650, 850)
@@ -205,6 +211,40 @@ describe('<DebugRunNavigation />', () => {
     })
   })
 
+  it('displays the limit message when the number of total runs is exactly 100', () => {
+    const latest = createRun({
+      runNumber: 99,
+      status: 'RUNNING',
+      sha: 'sha-123',
+      summary: 'add new feature with a really long commit message to see what happens',
+      completedInstanceCount: 5,
+      totalInstanceCount: 12,
+    })
+
+    const other1 = createRun({ runNumber: 98, status: 'PASSED', sha: 'sha-456', summary: 'Update code' })
+    const other2 = createRun({ runNumber: 97, status: 'PASSED', sha: 'sha-456', summary: 'Update code' })
+
+    const allRuns = [other1, other2]
+
+    for (let i = 96; i >= 0; i--) {
+      allRuns.push(createRun({ runNumber: i, status: 'PASSED', sha: 'sha-456', summary: 'Update code' }))
+    }
+
+    const commitInfo = { sha: 'sha-123', message: 'add new feature with a really long commit message to see what happens' } as CommitInfo
+
+    mountDebugDetailedView({ currentRun: other1, allRuns: [latest, ...allRuns], currentCommitInfo: commitInfo, cloudProjectUrl: 'https://cloud.cypress.io/projects/ypt4pf/' })
+
+    // This should only show when the list is expanded
+    cy.contains('We found more than 100 runs.').should('not.exist')
+
+    cy.findByTestId('debug-toggle').click()
+
+    cy.contains('We found more than 100 runs.').should('be.visible')
+    cy.findByRole('link', { name: 'Go to Cypress Cloud to see all runs' }).should('be.visible').should('have.attr', 'href', 'https://cloud.cypress.io/projects/ypt4pf/')
+
+    cy.percySnapshot()
+  })
+
   describe('Switch to latest run button', () => {
     it('shows "Switch to latest run" when current is not latest', () => {
       const latest = createRun({ runNumber: 3, status: 'PASSED', sha: 'sha-123', summary: 'Update code #2' })

diff --git a/packages/app/src/debug/DebugRunNavigation.vue b/packages/app/src/debug/DebugRunNavigation.vue
@@ -68,56 +68,63 @@
     </div>
 
     <TransitionQuickFadeVue>
-      <div
-        v-if="showRuns"
-        id="debug-runs-container"
-        class="max-h-30vh overflow-y-scroll"
-        data-cy="debug-runs-container"
-      >
-        <ul
-          class="my-8px relative before:(content-DEFAULT top-20px bottom-10px w-5px border-2 border-dashed border-l-0 border-y-0 border-r-gray-100 left-[19px] absolute) "
-          data-cy="debug-historical-runs"
+      <div v-if="showRuns">
+        <div
+          id="debug-runs-container"
+          class="max-h-30vh overflow-y-scroll"
+          data-cy="debug-runs-container"
         >
-          <li
-            v-for="sha of Object.keys(groupByCommit)"
-            :key="sha"
-            :data-cy="`commit-${sha}`"
+          <ul
+            class="my-8px relative before:(content-DEFAULT top-20px bottom-10px w-5px border-2 border-dashed border-l-0 border-y-0 border-r-gray-100 left-[19px] absolute) "
+            data-cy="debug-historical-runs"
           >
-            <div class="flex my-10px mx-16px items-center">
-              <DebugCommitIcon class="flex-shrink-0" />
-              <LightText class="flex-shrink-0 ml-12px truncate">
-                {{ sha.slice(0, 7) }}
-              </LightText>
-              <Dot />
-              <span
-                class="font-medium text-sm text-gray-800 truncate"
-                :title="groupByCommit[sha].message!"
-              >
-                {{ groupByCommit[sha].message }}
-              </span>
-              <span
-                v-if="sha === currentCommitInfo?.sha"
-                data-cy="tag-checked-out"
-                class="border rounded font-medium border-gray-100 border-1 flex-shrink-0
+            <li
+              v-for="sha of Object.keys(groupByCommit)"
+              :key="sha"
+              :data-cy="`commit-${sha}`"
+            >
+              <div class="flex my-10px mx-16px items-center">
+                <DebugCommitIcon class="flex-shrink-0" />
+                <LightText class="flex-shrink-0 ml-12px truncate">
+                  {{ sha.slice(0, 7) }}
+                </LightText>
+                <Dot />
+                <span
+                  class="font-medium text-sm text-gray-800 truncate"
+                  :title="groupByCommit[sha].message!"
+                >
+                  {{ groupByCommit[sha].message }}
+                </span>
+                <span
+                  v-if="sha === currentCommitInfo?.sha"
+                  data-cy="tag-checked-out"
+                  class="border rounded font-medium border-gray-100 border-1 flex-shrink-0
               h-16px ml-8px px-4px text-12px text-purple-400 leading-16px
               align-middle inline-flex items-center"
-              >
-                Checked out
-              </span>
-            </div>
-
-            <ul v-if="groupByCommit[sha].runs">
-              <DebugRunNavigationRow
-                v-for="run of groupByCommit[sha].runs"
-                :key="run?.runNumber!"
-                :run-number="run?.runNumber!"
-                :is-current-run="isCurrentRun(run!)"
-                :gql="run!"
-                @change-run="changeRun(run!)"
-              />
-            </ul>
-          </li>
-        </ul>
+                >
+                  Checked out
+                </span>
+              </div>
+
+              <ul v-if="groupByCommit[sha].runs">
+                <DebugRunNavigationRow
+                  v-for="run of groupByCommit[sha].runs"
+                  :key="run?.runNumber!"
+                  :run-number="run?.runNumber!"
+                  :is-current-run="isCurrentRun(run!)"
+                  :gql="run!"
+                  @change-run="changeRun(run!)"
+                />
+              </ul>
+            </li>
+          </ul>
+        </div>
+        <div
+          v-if="runs.length === 100"
+          class="border-t border-indigo-100"
+        >
+          <DebugRunNavigationLimitMessage :cloud-project-url="cloudProjectUrl" />
+        </div>
       </div>
     </TransitionQuickFadeVue>
   </div>
@@ -133,6 +140,7 @@ import { DebugRunNavigationFragment, DebugRunNavigationRunInfoFragment, DebugRun
 import DebugResults from './DebugResults.vue'
 import DebugRunNumber from './DebugRunNumber.vue'
 import DebugCommitIcon from './DebugCommitIcon.vue'
+import DebugRunNavigationLimitMessage from './DebugRunNavigationLimitMessage.vue'
 import { IconChevronRightSmall } from '@cypress-design/vue-icon'
 import { useDebugRunSummary } from './useDebugRunSummary'
 import { useI18n } from '@cy/i18n'
@@ -173,6 +181,7 @@ fragment DebugRunNavigationRunInfo on CloudRun {
 gql`
 fragment DebugRunNavigation on CloudProject {
   id
+  cloudProjectUrl
   allRuns: runsByCommitShas(commitShas: $commitShas) {
     id
     ...DebugRunNavigationRunInfo
@@ -189,6 +198,7 @@ mutation DebugRunNavigation_moveToRun($runNumber: Int!) {
 const props = defineProps<{
   runs: NonNullable<DebugRunNavigationFragment['allRuns']>
   currentRunNumber: number
+  cloudProjectUrl?: string
   currentCommitInfo?: { sha: string, message: string } | null
 }>()
 

diff --git a/packages/app/src/debug/DebugRunNavigationLimitMessage.cy.tsx b/packages/app/src/debug/DebugRunNavigationLimitMessage.cy.tsx
@@ -0,0 +1,17 @@
+import DebugRunNavigationLimitMessage from './DebugRunNavigationLimitMessage.vue'
+
+describe('DebugRunNavigationLimitMessage', () => {
+  it('renders link if cloudProjectUrl is passed', () => {
+    cy.mount(<DebugRunNavigationLimitMessage cloudProjectUrl="https://cloud.cypress.io/projects/ypt4pf/" />)
+
+    cy.findByRole('link', { name: 'Go to Cypress Cloud to see all runs' }).should('be.visible').should('have.attr', 'href', 'https://cloud.cypress.io/projects/ypt4pf/')
+
+    cy.percySnapshot()
+  })
+
+  it('does not render link if cloudProjectUrl is falsy', () => {
+    cy.mount(<DebugRunNavigationLimitMessage cloudProjectUrl="" />)
+
+    cy.findByRole('link', { name: 'Go to Cypress Cloud to see all runs' }).should('not.exist')
+  })
+})
diff --git a/packages/app/src/debug/DebugRunNavigationLimitMessage.vue b/packages/app/src/debug/DebugRunNavigationLimitMessage.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex text-sm p-4 align-center">
+    <div class="mr-2 pt-[2px]">
+      <IconWarningCircle
+        stroke-color="gray-500"
+        fill-color="gray-50"
+      />
+    </div>
+    <div class="text-gray-700">
+      {{ t('debugPage.foundMoreThan100Runs') }}
+      <ExternalLink
+        v-if="cloudProjectUrl"
+        :href="cloudProjectUrl"
+      >
+        {{ t('debugPage.goToCypressCloud') }}
+      </ExternalLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import { useI18n } from '@cy/i18n'
+import { IconWarningCircle } from '@cypress-design/vue-icon'
+
+const { t } = useI18n()
+
+defineProps<{ cloudProjectUrl?: string }>()
+
+</script>
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
@@ -692,6 +692,8 @@
     "mostRecentRun": "You are on the most recent run",
     "switchToLatestRun": "Switch to latest run",
     "switchRun": "Switch run",
+    "foundMoreThan100Runs": "We found more than 100 runs.",
+    "goToCypressCloud": "Go to Cypress Cloud to see all runs",
     "emptyStates": {
       "debugDirectlyInCypress": "Debug failed CI runs directly in Cypress",
       "reviewRerunAndDebug": "Review, rerun, and debug failed CI test runs that are recorded to Cypress Cloud – all from within your local Cypress app.",