Merge branch 'fix/preflight' of /~https://github.com/cypress-io/cypress …

…into fix/preflight

.circleci/workflows.yml

@@ -1499,6 +1499,12 @@ jobs:
     parallelism: 1
     steps:
       - restore_cached_workspace
+      # TODO: Remove this once we switch off self-hosted M1 runners
+      - when:
+          condition:
+            equal: [ *darwin-arm64-executor, << parameters.executor >> ]
+          steps:
+            - run: rm -f /tmp/cypress/junit/*
       - run: yarn workspace @packages/server test-unit cloud/environment_spec.ts
       - verify-mocha-results:
           expectedResultCount: 1
@@ -2717,6 +2723,12 @@ linux-arm64-workflow: &linux-arm64-workflow
         resource_class: arm.medium
         requires:
           - linux-arm64-build
+    - server-unit-tests-cloud-environment:
+        name: linux-arm64-server-unit-tests-cloud-environment
+        executor: linux-arm64
+        resource_class: arm.medium
+        requires:
+          - linux-arm64-build
 
 darwin-x64-workflow: &darwin-x64-workflow
   jobs:
@@ -2810,6 +2822,12 @@ darwin-arm64-workflow: &darwin-arm64-workflow
         resource_class: cypress-io/latest_m1
         requires:
           - darwin-arm64-build
+    - server-unit-tests-cloud-environment:
+        name: darwin-arm64-server-unit-tests-cloud-environment
+        executor: darwin-arm64
+        resource_class: cypress-io/latest_m1
+        requires:
+          - darwin-arm64-build
 
 windows-workflow: &windows-workflow
   jobs:

cli/CHANGELOG.md

@@ -9,6 +9,7 @@ _Released 02/28/2023 (PENDING)_
 - Added a Public API for third party component libraries to define a Framework Definition, embedding their library into the Cypress onboarding workflow. Learn more [here](https://docs.cypress.io/guides/component-testing/third-party-definitions). Implemented in [#25780](/~https://github.com/cypress-io/cypress/pull/25780) and closes [#25638](/~https://github.com/cypress-io/cypress/issues/25638).
 - Added a Debug Page tutorial slideshow for projects that are not connected to Cypress Cloud. Addresses [#25768](/~https://github.com/cypress-io/cypress/issues/25768).
 - Improved various error message around interactions with the Cypress cloud. Implemented in [#25837](/~https://github.com/cypress-io/cypress/pull/25837)
+- Updated the "new" status badge for the Debug page navigation link to be less noticeable when the navigation is collapsed. Addresses [#25739](/~https://github.com/cypress-io/cypress/issues/25739).
 
 **Bugfixes:**
 

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

@@ -250,6 +250,34 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.get('.router-link-active').findByText('Debug').should('be.visible')
     })
 
+    it('Debug "new" notification appears as a dot when nav is collapsed', () => {
+      cy.findByLabelText('New Debug feature')
+      .should('be.visible')
+      .contains('New')
+
+      // in expanded state, expect no dot
+      cy.findByTestId('debug-badge-dot').should('not.exist')
+
+      // collapse the nav
+      cy.findByTestId('toggle-sidebar').click()
+
+      // in collapsed state, find the dot
+      // TODO (Percy): when Percy is enabled for e2e tests
+      // we can stop testing the class name directly here
+      cy.findByLabelText('New Debug feature', {
+        selector: '[data-cy=debug-badge-dot]',
+      })
+      .should('be.visible')
+      .and('have.class', 'bg-jade-500')
+      .invoke('text')
+      .should('eq', '')
+
+      // go to the Spec Runner route by clicking on a test
+      cy.contains('a', 'flower.png').click()
+
+      cy.findByTestId('debug-badge-dot').should('have.class', 'bg-gray-800')
+    })
+
     it('Specs sidebar nav link is not active when a test is running', () => {
       cy.location('hash').should('equal', '#/specs')
       cy.contains('.router-link-exact-active', 'Specs')

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

@@ -133,13 +133,18 @@ describe('SidebarNavigation', () => {
       mountComponent()
       cy.tick(1000) //wait for debounce
 
-      cy.findByLabelText('New Debug feature').should('be.visible').contains('New')
+      cy.findByLabelText('New Debug feature', {
+        selector: '[data-cy=debug-badge-dot]',
+      }).should('be.visible')
+
       cy.percySnapshot('Debug Badge:collapsed')
 
       cy.findByLabelText(defaultMessages.sidebar.toggleLabel.collapsed, {
         selector: 'button',
       }).click()
 
+      cy.tick(1000) //wait for transition
+      cy.findByLabelText('New Debug feature').should('be.visible').contains('New')
       cy.percySnapshot('Debug Badge:expanded badge')
     })
 
@@ -149,7 +154,9 @@ describe('SidebarNavigation', () => {
       for (const status of ['NOTESTS', 'RUNNING'] as CloudRunStatus[]) {
         mountComponent({ cloudProject: { status, numFailedTests: 0 } })
         cy.tick(1000) //wait for debounce
-        cy.findByLabelText('New Debug feature').should('be.visible').contains('New')
+        cy.findByLabelText('New Debug feature', {
+          selector: '[data-cy=debug-badge-dot]',
+        }).should('be.visible')
       }
     })
 
@@ -218,8 +225,9 @@ describe('SidebarNavigation', () => {
       mountComponent({ online: false })
 
       cy.tick(1000) //wait for debounce
-
-      cy.findByLabelText('New Debug feature').should('be.visible').contains('New')
+      cy.findByLabelText('New Debug feature', {
+        selector: '[data-cy=debug-badge-dot]',
+      }).should('be.visible')
     })
   })
 })

packages/app/src/navigation/SidebarNavigationRow.vue

@@ -48,13 +48,19 @@
         {{ name }}
       </span>
       <span
-        v-if="badge"
+        v-if="badge && !showDot"
         :aria-label="badge.label"
         class="rounded-md font-medium text-white p-4px transition-opacity z-1"
         :class="[badgeVariant, badgeColorStyles[badge.status], {'opacity-0': transitioning}]"
       >
         {{ badge.value }}
       </span>
+      <div
+        v-else-if="badge && showDot"
+        :class="[{'opacity-0': transitioning}, dotClass]"
+        :aria-label="badge.label"
+        data-cy="debug-badge-dot"
+      />
     </div>
     <template #popper>
       {{ name }}
@@ -66,9 +72,14 @@
 import { computed, FunctionalComponent, SVGAttributes, watch, ref } from 'vue'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import { promiseTimeout } from '@vueuse/core'
+import { useI18n } from '@cy/i18n'
+import { useRoute } from 'vue-router'
 
 export type Badge = { value: string, status: 'success' | 'failed' | 'error', label: string }
 
+const { t } = useI18n()
+const route = useRoute()
+
 const props = withDefaults(defineProps <{
   icon: FunctionalComponent<SVGAttributes>
   name: string
@@ -107,6 +118,26 @@ const badgeColorStyles = {
   'error': 'bg-warning-500',
 }
 
+const showDot = computed(() => {
+  return props.badge.value === t('sidebar.debug.new') && !props.isNavBarExpanded
+})
+
+const dotClass = computed(() => {
+  const dotColor = route.name === 'SpecRunner' ? 'bg-gray-800' : 'bg-jade-500'
+
+  return `${dotColor}
+  w-10px 
+  h-10px 
+  relative 
+  -bottom-7px 
+  -left-30px 
+  flex-shrink-0
+  z-1 
+  border-2px 
+  border-gray-1000 
+  rounded-full`
+})
+
 const transitioning = ref(false)
 
 // Badge is either absolutely positioned or relative. Since the navbar expands with an animation,

packages/server/lib/cloud/environment.ts

@@ -82,50 +82,37 @@ interface DependencyInformation {
 const getEnvInformationForProjectRoot = async (projectRoot: string, pid: string) => {
   let dependencies = {}
   let errors: { dependency?: string, name: string, message: string, stack: string }[] = []
-  let envDependenciesVar = process.env.CYPRESS_ENV_DEPENDENCIES
+  let envDependencies = process.env.CYPRESS_ENV_DEPENDENCIES
   let envUrl = process.env.CYPRESS_API_URL
   let checkProcessTree
 
-  if (envDependenciesVar) {
-    const envDependenciesInformation = JSON.parse(base64Url.decode(envDependenciesVar)) as DependencyInformation
+  if (envDependencies) {
+    const envDependenciesInformation = JSON.parse(base64Url.decode(envDependencies)) as DependencyInformation
 
     const packageToJsonMapping: Record<string, string> = {}
 
-    envDependenciesInformation.maybeCheckProcessTreeIfPresent.forEach((dependency) => {
-      try {
-        const packageJsonPath = resolvePackagePath(dependency, projectRoot)
+    const processDependency = ({ checkOnFound }) => {
+      return (dependency) => {
+        try {
+          const packageJsonPath = resolvePackagePath(dependency, projectRoot)
 
-        if (packageJsonPath) {
-          packageToJsonMapping[dependency] = packageJsonPath
-          checkProcessTree = true
+          if (packageJsonPath) {
+            packageToJsonMapping[dependency] = packageJsonPath
+            checkProcessTree = checkOnFound
+          }
+        } catch (error) {
+          errors.push({
+            dependency,
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+          })
         }
-      } catch (error) {
-        errors.push({
-          dependency,
-          name: error.name,
-          message: error.message,
-          stack: error.stack,
-        })
       }
-    })
-
-    envDependenciesInformation.neverCheckProcessTreeIfPresent.forEach((dependency) => {
-      try {
-        const packageJsonPath = resolvePackagePath(dependency, projectRoot)
+    }
 
-        if (packageJsonPath) {
-          packageToJsonMapping[dependency] = packageJsonPath
-          checkProcessTree = false
-        }
-      } catch (error) {
-        errors.push({
-          dependency,
-          name: error.name,
-          message: error.message,
-          stack: error.stack,
-        })
-      }
-    })
+    envDependenciesInformation.maybeCheckProcessTreeIfPresent.forEach(processDependency({ checkOnFound: true }))
+    envDependenciesInformation.neverCheckProcessTreeIfPresent.forEach(processDependency({ checkOnFound: false }))
 
     const [{ envUrl: processTreeEnvUrl, error: processTreeError }] = await Promise.all([
       checkProcessTree ? getCypressEnvUrlFromProcessBranch(pid) : { envUrl: undefined, error: undefined },

packages/server/test/support/fixtures/cloud/environment/.gitignore

@@ -1 +1 @@
-!node_modules
+!node_modules

packages/server/test/support/fixtures/cloud/environment/test-project/package.json

@@ -2,4 +2,4 @@
   "name": "test-project",
   "version": "1.0.0",
   "type": "module"
-}
+}