Merge branch 'develop' into tgriesser/spike/spike

* develop:
  feat: add --auto-cancel-after-failures flag (#25237)
  chore: exclude collaborator issues/PRs from triage project (#25769)
  misc: Increase max failures in IATR badge to 99 (#25737)
  misc: improve debug loading text wrap responsiveness (#25703)

.github/workflows/triage_add_to_project.yml

@@ -12,9 +12,25 @@ jobs:
   add-to-triage-project:
     name: Add to triage project
     runs-on: ubuntu-latest
+    env:
+      PROJECT_NUMBER: 9
+      GITHUB_TOKEN: ${{ secrets.ADD_TO_PROJECT_TOKEN }}
     steps:
-      - uses: actions/[email protected]
+      - name: is-collaborator
+        run: |
+          gh api graphql -f query='
+            query($org: String!, $repo: String!, $user: String!) {
+              repository(owner: $org, name: $repo) {
+                collaborators(query: $user, first: 1) {
+                  totalCount
+                }
+              }
+            } ' -f org=${{ github.repository_owner }} -f repo=${{ github.event.repository.name }} -f user=${{ github.actor }} > collaborators.json
+
+          echo 'IS_COLLABORATOR='$(jq -r '.data.repository.collaborators.totalCount' collaborators.json) >> $GITHUB_ENV
+      - uses: actions/[email protected]
+        # only add issues/prs from outside contributors to the project
+        if: ${{ env.IS_COLLABORATOR == 0 }}
         with:
-          project-url: https://github.com/orgs/cypress-io/projects/9
+          project-url: https://github.com/orgs/${{github.repository_owner}}/projects/${{env.PROJECT_NUMBER}}
           github-token: ${{ secrets.ADD_TO_PROJECT_TOKEN }}
-

cli/CHANGELOG.md

@@ -11,12 +11,15 @@ _Released 02/14/2023 (PENDING)_
 **Features:**
 
 - Added the "Open in IDE" feature for failed tests reported from the Debug page. Addressed in [#25691](https://github.com/cypress-io/cypress/pull/25691).
+- Added a new CLI flag, called [`--auto-cancel-after-failures`](https://docs.cypress.io/guides/guides/command-line#Options), that overrides the project-level CI ["Auto Cancellation"](https://docs.cypress.io/guides/cloud/smart-orchestration#Auto-Cancellation) value when recording to the Cloud. This gives Cloud users on Business and Enterprise plans the flexibility to alter the auto-cancellation value per run. Addressed in [#25237](https://github.com/cypress-io/cypress/pull/25237).
 
 **Misc:**
 
 - Improved the layout of the Debug Page on smaller viewports when there is a pending run. Addresses [#25664](https://github.com/cypress-io/cypress/issues/25664).
 - Improved the layout of the Debug Page when displaying informational messages. Addresses [#25669](https://github.com/cypress-io/cypress/issues/25669).
 - Icons in Debug page will no longer shrink at small viewports. Addresses [#25665](https://github.com/cypress-io/cypress/issues/25665).
+- Increased maximum number of failing tests to reflect in sidebar badge to 99. Addresses [#25662](https://github.com/cypress-io/cypress/issues/25662).
+- Improved the layout of the Debug Page empty states on smaller viewports. Addressed in [#25703](https://github.com/cypress-io/cypress/pull/25703).
 - Increased the spacing between elements and their associated tooltip and added borders around artifact links on the Debug Page. Addresses [#25666](https://github.com/cypress-io/cypress/issues/25666).
 
 **Dependency Updates:**

cli/__snapshots__/cli_spec.js

@@ -67,29 +67,30 @@ exports['shows help for run --foo 1'] = `
   Runs Cypress tests from the CLI without the GUI
 
   Options:
-    -b, --browser <browser-name-or-path>       runs Cypress in the browser with the given name. if a filesystem path is supplied, Cypress will attempt to use the browser at that path.
-    --ci-build-id <id>                         the unique identifier for a run on your CI provider. typically a "BUILD_ID" env var. this value is automatically detected for most CI providers
-    --component                                runs component tests
-    -c, --config <config>                      sets configuration values. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs}.
-    -C, --config-file <config-file>            path to script file where configuration values are set. defaults to "cypress.config.{js,ts,mjs,cjs}".
-    --e2e                                      runs end to end tests
-    -e, --env <env>                            sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs} or cypress.env.json
-    --group <name>                             a named group for recorded runs in Cypress Cloud
-    -k, --key <record-key>                     your secret Record Key. you can omit this if you set a CYPRESS_RECORD_KEY environment variable.
-    --headed                                   displays the browser instead of running headlessly
-    --headless                                 hide the browser instead of running headed (default for cypress run)
-    --no-exit                                  keep the browser open after tests finish
-    --parallel                                 enables concurrent runs and automatic load balancing of specs across multiple machines or processes
-    -p, --port <port>                          runs Cypress on a specific port. overrides any value in cypress.config.{js,ts,mjs,cjs}.
-    -P, --project <project-path>               path to the project
-    -q, --quiet                                run quietly, using only the configured reporter
-    --record [bool]                            records the run. sends test results, screenshots and videos to Cypress Cloud.
-    -r, --reporter <reporter>                  runs a specific mocha reporter. pass a path to use a custom reporter. defaults to "spec"
-    -o, --reporter-options <reporter-options>  options for the mocha reporter. defaults to "null"
-    -s, --spec <spec>                          runs specific spec file(s). defaults to "all"
-    -t, --tag <tag>                            named tag(s) for recorded runs in Cypress Cloud
-    --dev                                      runs cypress in development and bypasses binary check
-    -h, --help                                 display help for command
+    --auto-cancel-after-failures <test-failure-count || false>  overrides the project-level Cloud configuration to set the failed test threshold for auto cancellation or to disable auto cancellation when recording to the Cloud
+    -b, --browser <browser-name-or-path>                        runs Cypress in the browser with the given name. if a filesystem path is supplied, Cypress will attempt to use the browser at that path.
+    --ci-build-id <id>                                          the unique identifier for a run on your CI provider. typically a "BUILD_ID" env var. this value is automatically detected for most CI providers
+    --component                                                 runs component tests
+    -c, --config <config>                                       sets configuration values. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs}.
+    -C, --config-file <config-file>                             path to script file where configuration values are set. defaults to "cypress.config.{js,ts,mjs,cjs}".
+    --e2e                                                       runs end to end tests
+    -e, --env <env>                                             sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs} or cypress.env.json
+    --group <name>                                              a named group for recorded runs in Cypress Cloud
+    -k, --key <record-key>                                      your secret Record Key. you can omit this if you set a CYPRESS_RECORD_KEY environment variable.
+    --headed                                                    displays the browser instead of running headlessly
+    --headless                                                  hide the browser instead of running headed (default for cypress run)
+    --no-exit                                                   keep the browser open after tests finish
+    --parallel                                                  enables concurrent runs and automatic load balancing of specs across multiple machines or processes
+    -p, --port <port>                                           runs Cypress on a specific port. overrides any value in cypress.config.{js,ts,mjs,cjs}.
+    -P, --project <project-path>                                path to the project
+    -q, --quiet                                                 run quietly, using only the configured reporter
+    --record [bool]                                             records the run. sends test results, screenshots and videos to Cypress Cloud.
+    -r, --reporter <reporter>                                   runs a specific mocha reporter. pass a path to use a custom reporter. defaults to "spec"
+    -o, --reporter-options <reporter-options>                   options for the mocha reporter. defaults to "null"
+    -s, --spec <spec>                                           runs specific spec file(s). defaults to "all"
+    -t, --tag <tag>                                             named tag(s) for recorded runs in Cypress Cloud
+    --dev                                                       runs cypress in development and bypasses binary check
+    -h, --help                                                  display help for command
   -------
   stderr:
   -------

cli/lib/cli.js

@@ -93,6 +93,7 @@ const parseVariableOpts = (fnArgs, args) => {
 }
 
 const descriptions = {
+  autoCancelAfterFailures: 'overrides the project-level Cloud configuration to set the failed test threshold for auto cancellation or to disable auto cancellation when recording to the Cloud',
   browser: 'runs Cypress in the browser with the given name. if a filesystem path is supplied, Cypress will attempt to use the browser at that path.',
   cacheClear: 'delete all cached binaries',
   cachePrune: 'deletes all cached binaries except for the version currently in use',
@@ -242,6 +243,7 @@ const addCypressRunCommand = (program) => {
   .command('run')
   .usage('[options]')
   .description('Runs Cypress tests from the CLI without the GUI')
+  .option('--auto-cancel-after-failures <test-failure-count || false>', text('autoCancelAfterFailures'))
   .option('-b, --browser <browser-name-or-path>', text('browser'))
   .option('--ci-build-id <id>', text('ciBuildId'))
   .option('--component', text('component'))

cli/lib/exec/run.js

@@ -45,6 +45,10 @@ const processRunOptions = (options = {}) => {
 
   const args = ['--run-project', options.project]
 
+  if (options.autoCancelAfterFailures || options.autoCancelAfterFailures === 0 || options.autoCancelAfterFailures === false) {
+    args.push('--auto-cancel-after-failures', options.autoCancelAfterFailures)
+  }
+
   if (options.browser) {
     args.push('--browser', options.browser)
   }

cli/lib/util.js

@@ -192,6 +192,7 @@ const dequote = (str) => {
 
 const parseOpts = (opts) => {
   opts = _.pick(opts,
+    'autoCancelAfterFailures',
     'browser',
     'cachePath',
     'cacheList',

cli/test/lib/cli_spec.js

@@ -493,6 +493,16 @@ describe('cli', () => {
       this.exec('run --ci-build-id "123" --group "staging"')
       expect(run.start).to.be.calledWith({ ciBuildId: '123', group: 'staging' })
     })
+
+    it('call run with --auto-cancel-after-failures', () => {
+      this.exec('run --auto-cancel-after-failures 4')
+      expect(run.start).to.be.calledWith({ autoCancelAfterFailures: '4' })
+    })
+
+    it('call run with --auto-cancel-after-failures with false', () => {
+      this.exec('run --auto-cancel-after-failures false')
+      expect(run.start).to.be.calledWith({ autoCancelAfterFailures: 'false' })
+    })
   })
 
   context('cypress open', () => {

cli/test/lib/cypress_spec.js

@@ -100,10 +100,27 @@ describe('cypress', function () {
     }
 
     it('calls run#start, passing in options', () => {
-      return cypress.run({ spec: 'foo' })
+      return cypress.run({ spec: 'foo', autoCancelAfterFailures: 4 })
       .then(getStartArgs)
       .then((args) => {
         expect(args.spec).to.equal('foo')
+        expect(args.autoCancelAfterFailures).to.equal(4)
+      })
+    })
+
+    it('calls run#start, passing in autoCancelAfterFailures false', () => {
+      return cypress.run({ autoCancelAfterFailures: false })
+      .then(getStartArgs)
+      .then((args) => {
+        expect(args.autoCancelAfterFailures).to.equal(false)
+      })
+    })
+
+    it('calls run#start, passing in autoCancelAfterFailures 0', () => {
+      return cypress.run({ autoCancelAfterFailures: 0 })
+      .then(getStartArgs)
+      .then((args) => {
+        expect(args.autoCancelAfterFailures).to.equal(0)
       })
     })
 

cli/test/lib/exec/run_spec.js

@@ -216,5 +216,23 @@ describe('exec run', function () {
         ])
       })
     })
+
+    it('spawns with --auto-cancel-after-failures value', function () {
+      return run.start({ autoCancelAfterFailures: 4 })
+      .then(() => {
+        expect(spawn.start).to.be.calledWith([
+          '--run-project', process.cwd(), '--auto-cancel-after-failures', 4,
+        ])
+      })
+    })
+
+    it('spawns with --auto-cancel-after-failures value false', function () {
+      return run.start({ autoCancelAfterFailures: false })
+      .then(() => {
+        expect(spawn.start).to.be.calledWith([
+          '--run-project', process.cwd(), '--auto-cancel-after-failures', false,
+        ])
+      })
+    })
   })
 })

cli/types/cypress-npm-api.d.ts

@@ -95,6 +95,10 @@ declare namespace CypressCommandLine {
      * Specify the specs to run
      */
     spec: string
+    /**
+     * Specify the number of failures to cancel a run being recorded to the Cloud or false to disable auto-cancellation.
+     */
+    autoCancelAfterFailures: number | false
   }
 
   /**

cli/types/cypress.d.ts

@@ -5776,6 +5776,7 @@ declare namespace Cypress {
     specPattern?: string[]
     system: SystemDetails
     tag?: string
+    autoCancelAfterFailures?: number | false
   }
 
   interface DevServerConfig {

packages/app/src/debug/empty/DebugEmptyStates.cy.tsx

@@ -33,6 +33,10 @@ describe('Debug page empty states', () => {
       cy.findByRole('link', { name: 'Learn about project setup in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/adding-new-project?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
+
+      cy.viewport(600, 600)
+
+      cy.percySnapshot('responsive')
     })
   })
 

packages/app/src/debug/empty/DebugEmptyView.vue

@@ -24,18 +24,16 @@
         :rows="loadingRows"
       >
         <template #header>
-          <div class="bg-white border rounded-md flex border-gray-100 w-max p-5px text-14px text-gray-700">
-            <div><i-cy-status-failed_x12 /></div>
-            <div class="bg-gray-700 h-1px mx-5px mt-7px w-5px" />
-            <div
-              v-if="exampleTestName"
-              class="bg-gray-100 h-13px mx-1 pb-1px w-1px"
-            />
-            <div
-              v-if="exampleTestName"
-              class="mx-1 text-14px text-gray-700"
-            >
-              {{ exampleTestName }}
+          <div class="flex">
+            <div class="bg-white border rounded-md flex border-gray-100 py-4px px-8px text-14px text-gray-700 gap-8px items-center">
+              <i-cy-status-failed_x12 class="h-12px w-12px" />
+              <span>-</span>
+              <div
+                v-if="exampleTestName"
+                class="border-l border-gray-100 pl-8px"
+              >
+                {{ exampleTestName }}
+              </div>
             </div>
           </div>
         </template>

packages/app/src/navigation/SidebarNavigation.cy.tsx

@@ -170,10 +170,14 @@ describe('SidebarNavigation', () => {
     it('renders failure badge', () => {
       mountComponent({ cloudProject: { status: 'FAILED', numFailedTests: 1 } })
       cy.findByLabelText('Relevant run had 1 test failure').should('be.visible').contains('1')
-      cy.percySnapshot('Debug Badge:failed')
+      cy.percySnapshot('Debug Badge:failed:single-digit')
 
       mountComponent({ cloudProject: { status: 'FAILED', numFailedTests: 10 } })
-      cy.findByLabelText('Relevant run had 10 test failures').should('be.visible').contains('9+')
+      cy.findByLabelText('Relevant run had 10 test failures').should('be.visible').contains('10')
+      cy.percySnapshot('Debug Badge:failed:double-digit')
+
+      mountComponent({ cloudProject: { status: 'FAILED', numFailedTests: 100 } })
+      cy.findByLabelText('Relevant run had 100 test failures').should('be.visible').contains('99+')
       cy.percySnapshot('Debug Badge:failed:truncated')
     })
 

packages/app/src/navigation/SidebarNavigation.vue

@@ -202,9 +202,9 @@ watchEffect(() => {
     let countToDisplay = '0'
 
     if (totalFailed) {
-      countToDisplay = totalFailed < 9
+      countToDisplay = totalFailed < 99
         ? String(totalFailed)
-        : '9+'
+        : '99+'
     }
 
     if (status === 'FAILED') {

packages/app/src/navigation/SidebarNavigationRow.vue

@@ -82,7 +82,23 @@ const props = withDefaults(defineProps <{
 })
 
 const badgeVariant = computed(() => {
-  return props.isNavBarExpanded ? 'ml-16px h-20px text-sm leading-3' : 'absolute outline-gray-1000 outline-2px outline bottom-0 left-36px text-xs h-16px leading-2'
+  const classes: string[] = []
+
+  if (props.isNavBarExpanded) {
+    classes.push('ml-16px', 'h-20px', 'text-sm', 'leading-3')
+  } else {
+    classes.push('absolute', 'outline-gray-1000', 'outline-2px', 'outline', 'bottom-0', 'text-xs', 'h-16px', 'leading-2')
+
+    // Keep failure count from overflowing sidebar (#25662)
+    if ((props.badge.status === 'failed' || props.badge.status === 'error') && props.badge.value.length >= 3) {
+      classes.push('right-4px')
+    } else {
+      // Anything else should left-align and overflow sidebar if needed
+      classes.push('left-36px')
+    }
+  }
+
+  return classes
 })
 
 const badgeColorStyles = {