feat: add "dot" version of "new" badge (#25882)

Co-authored-by: astone123 <adams@cypress.io>

cli/CHANGELOG.md

@@ -8,6 +8,7 @@ _Released 02/28/2023 (PENDING)_
 - It is now possible to set `hostOnly` cookies with [`cy.setCookie()`](https://docs.cypress.io/api/commands/setcookie) for a given domain. Addresses [#16856](https://github.com/cypress-io/cypress/issues/16856) and [#17527](https://github.com/cypress-io/cypress/issues/17527).
 - 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).
+- 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,