misc: remove New badge for debug page navigation icon (#25992)

Author: astone123

cli/CHANGELOG.md

@@ -7,6 +7,10 @@ _Released 03/14/2023 (PENDING)_
 
 - It is now possible to control the number of connection attempts to the browser using the CYPRESS_CONNECT_RETRY_THRESHOLD Environment Variable. Learn more [here](https://docs.cypress.io/guides/references/advanced-installation#Environment-variables). Addressed in [#25848](https://github.com/cypress-io/cypress/pull/25848).
 
+**Misc:**
+
+- Removed "New" badge in the navigation bar for the debug page icon. Addresses [#25925](https://github.com/cypress-io/cypress/issues/25925)
+
 **Dependency Updates:**
 
 - Upgraded [`mocha-junit-reporter`](https://github.com/michaelleeallen/mocha-junit-reporter) from `2.1.0` to `2.2.0` to be able to use [new placeholders](https://github.com/michaelleeallen/mocha-junit-reporter/pull/163) such as `[suiteFilename]` or `[suiteName]` when defining the test report name. Addressed in [#25922](https://github.com/cypress-io/cypress/pull/25922).

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

@@ -250,34 +250,6 @@ 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

@@ -5,7 +5,6 @@ import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 import { cloneDeep } from 'lodash'
 import { IATR_RELEASE } from '@packages/frontend-shared/src/utils/isAllowedFeature'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
-import interval from 'human-interval'
 
 function mountComponent (props: { initialNavExpandedVal?: boolean, cloudProject?: { status: CloudRunStatus, numFailedTests: number }, isLoading?: boolean, online?: boolean} = {}) {
   const withDefaults = { initialNavExpandedVal: false, isLoading: false, online: true, ...props }
@@ -127,44 +126,8 @@ describe('SidebarNavigation', () => {
   })
 
   context('debug status badge', () => {
-    it('renders new badge without cloudProject', { viewportWidth: 1280 }, () => {
-      cy.clock(IATR_RELEASE)
-
-      mountComponent()
-      cy.tick(1000) //wait for debounce
-
-      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')
-    })
-
-    it('renders new badge when run status is "NOTESTS" or "RUNNING"', () => {
-      cy.clock(IATR_RELEASE + interval('1 month'))
-
-      for (const status of ['NOTESTS', 'RUNNING'] as CloudRunStatus[]) {
-        mountComponent({ cloudProject: { status, numFailedTests: 0 } })
-        cy.tick(1000) //wait for debounce
-        cy.findByLabelText('New Debug feature', {
-          selector: '[data-cy=debug-badge-dot]',
-        }).should('be.visible')
-      }
-    })
-
-    it('renders no badge if no cloudProject and released > 2 months ago', () => {
-      // Set to February 15, 2023 to see this fail
-      cy.clock(IATR_RELEASE + interval('3 months'))
+    it('renders no badge if no cloudProject', () => {
       mountComponent()
-      cy.tick(1000) //wait for debounce
       cy.findByLabelText('New Debug feature').should('not.exist')
     })
 
@@ -218,16 +181,5 @@ describe('SidebarNavigation', () => {
       cy.tick(1000) //wait for debounce
       cy.findByLabelText('New Debug feature').should('not.exist')
     })
-
-    it('renders new badge if offline', () => {
-      cy.clock(IATR_RELEASE)
-
-      mountComponent({ online: false })
-
-      cy.tick(1000) //wait for debounce
-      cy.findByLabelText('New Debug feature', {
-        selector: '[data-cy=debug-badge-dot]',
-      }).should('be.visible')
-    })
   })
 })

packages/app/src/navigation/SidebarNavigation.vue

@@ -109,7 +109,6 @@ import { useRoute } from 'vue-router'
 import SidebarNavigationHeader from './SidebarNavigationHeader.vue'
 import { useDebounceFn, useWindowSize } from '@vueuse/core'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
-import { isAllowedFeature } from '@packages/frontend-shared/src/utils/isAllowedFeature'
 
 const { t } = useI18n()
 
@@ -178,18 +177,13 @@ watchEffect(() => {
     return
   }
 
-  const showNewBadge = isAllowedFeature('debugNewBadge', loginConnectStore)
-  const newBadge: Badge = { value: t('sidebar.debug.new'), status: 'success', label: t('sidebar.debug.debugFeature') }
-
   if (props.gql?.currentProject?.cloudProject?.__typename === 'CloudProject'
     && props.gql.currentProject.cloudProject.runByNumber
     && props.online
   ) {
     const { status, totalFailed } = props.gql.currentProject.cloudProject.runByNumber || {}
 
     if (status === 'NOTESTS' || status === 'RUNNING') {
-      setDebugBadge(showNewBadge ? newBadge : undefined)
-
       return
     }
 
@@ -225,8 +219,6 @@ watchEffect(() => {
 
     return
   }
-
-  setDebugBadge(showNewBadge ? newBadge : undefined)
 })
 
 const navigation = computed<{ name: string, icon: FunctionalComponent, href: string, badge?: Badge }[]>(() => {

packages/app/src/navigation/SidebarNavigationRow.vue

@@ -48,19 +48,13 @@
         {{ name }}
       </span>
       <span
-        v-if="badge && !showDot"
+        v-if="badge"
         :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 }}
@@ -72,14 +66,9 @@
 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
@@ -118,26 +107,6 @@ 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/frontend-shared/src/locales/en-US.json

@@ -238,7 +238,6 @@
       "ariaLabel": "Pages"
     },
     "debug": {
-      "new": "New",
       "debugFeature": "New Debug feature",
       "passed": "Relevant run passed",
       "failed": "Relevant run had {n} test failure | Relevant run had {n} test failures",

packages/frontend-shared/src/utils/isAllowedFeature.ts

@@ -2,7 +2,7 @@ import interval from 'human-interval'
 import { BannerIds } from '@packages/types'
 import type { LoginConnectStore, UserStatus } from '../store'
 
-type Feature = 'specsListBanner' | 'docsCiPrompt' | 'debugNewBadge'
+type Feature = 'specsListBanner' | 'docsCiPrompt'
 type RulesSet = { base: boolean[] } & Partial<Record<UserStatus, boolean[]>>
 type Rules = Record<Feature, RulesSet>
 
@@ -95,14 +95,6 @@ export const isAllowedFeature = (
       isLoggedOut: [],
       allTasksCompleted: [],
     },
-    debugNewBadge: {
-      base: [!minTimeSinceEvent(IATR_RELEASE, '2 months')],
-      needsRecordedRun: [],
-      needsOrgConnect: [],
-      needsProjectConnect: [],
-      isLoggedOut: [],
-      allTasksCompleted: [],
-    },
   }
 
   const baseRules = [...rules[featureName].base]