chore: make git message warnings remain dismissable (#26812)

* feat: make git message warnings remain dismissable * chore: update CHANGELOG * chore: update CHANGELOG * chore: remove unneeded code * chore: update BannerId types * chore: fix queryies * chore: clean up PR * chore: move TrackedWarning to frontend-shared * chore: update import * ref: move TrackedWarning to TrackedBanner * chore: udpate CHANGELOG * fix: update TrackedBanner to parse markdown message * chore: set TrackedBanner default message prop * chore: update RunsContainer * chore: add missing tests and update alert type --------- Co-authored-by: Stokes Player <[email protected]>
cypress-io · Jun 5, 2023 · d77341e · d77341e · cypress-bot · Jun 5, 2023
1 parent 9721a26
commit d77341e
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 9 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -10,11 +10,16 @@ _Released 06/06/2023 (PENDING)_
 
 ## 12.13.0
 
+_Pending_
+
+**Bugfixes:**
+- Make Git-related messages on the [Runs page](https://docs.cypress.io/guides/core-concepts/cypress-app#Runs) remain dismissed. Addresses [#26808](https://github.com/cypress-io/cypress/issues/26808)
+
 _Released 05/23/2023_
 
 **Features:**
 
-- Adds Git-related messages for the [Runs page](https://docs.cypress.io/guides/core-concepts/cypress-app#Runs) and [Debug page](https://docs.cypress.io/guides/cloud/runs#Debug) when users aren't using Git or there are no recorded runs for the current branch. Fixes [#26680](https://github.com/cypress-io/cypress/issues/26680).
+- Add Git-related messages for the [Runs page](https://docs.cypress.io/guides/core-concepts/cypress-app#Runs) and [Debug page](https://docs.cypress.io/guides/cloud/runs#Debug) when users aren't using Git or there are no recorded runs for the current branch. Addresses [#26680](https://github.com/cypress-io/cypress/issues/26680).
 
 **Bugfixes:**
 

diff --git a/packages/app/src/runs/RunsContainer.cy.tsx b/packages/app/src/runs/RunsContainer.cy.tsx
@@ -144,7 +144,28 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
       })
 
       cy.get('h3').contains(defaultMessages.runs.empty.gitRepositoryNotDetected)
-      cy.get('p').contains(defaultMessages.runs.empty.ensureGitSetupCorrectly)
+      cy.contains(defaultMessages.runs.empty.ensureGitSetupCorrectly)
+    })
+
+    it('dismisses the alert', () => {
+      const userProjectStatusStore = useUserProjectStatusStore()
+
+      userProjectStatusStore.setProjectFlag('isUsingGit', false)
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
+
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        onResult: (result) => {
+          result.cloudViewer = cloudViewer
+        },
+        render (gqlVal) {
+          return <RunsContainer gql={gqlVal} online />
+        },
+      })
+
+      cy.get('h3').contains(defaultMessages.runs.empty.gitRepositoryNotDetected)
+      cy.contains(defaultMessages.runs.empty.ensureGitSetupCorrectly)
+      cy.get('[data-cy=alert-suffix-icon]').click()
+      cy.get('[data-cy=alert-header]').should('not.exist')
     })
   })
 
@@ -175,5 +196,34 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
       // The utm_source will be Binary%3A+App in production`open` mode but we assert using Binary%3A+Launchpad as this is the value in CI
       cy.contains(defaultMessages.links.learnMoreButton).should('have.attr', 'href', 'https://on.cypress.io/git-info?utm_source=Binary%3A+Launchpad&utm_medium=Runs+Tab&utm_campaign=No+Runs+Found')
     })
+
+    it('dismisses the alert', () => {
+      const { setUserFlag, setProjectFlag, cloudStatusMatches } = useUserProjectStatusStore()
+
+      setUserFlag('isLoggedIn', true)
+      setUserFlag('isMemberOfOrganization', true)
+      setProjectFlag('isProjectConnected', true)
+      setProjectFlag('hasNoRecordedRuns', true)
+      setProjectFlag('hasNonExampleSpec', true)
+      setProjectFlag('isConfigLoaded', true)
+      setProjectFlag('isUsingGit', true)
+
+      expect(cloudStatusMatches('needsRecordedRun')).equals(true)
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        onResult: (result) => {
+          result.cloudViewer = cloudViewer
+        },
+        render (gqlVal) {
+          return <RunsContainer gql={gqlVal} online />
+        },
+      })
+
+      cy.get('h3').contains(defaultMessages.runs.empty.noRunsFoundForBranch)
+      cy.get('p').contains(defaultMessages.runs.empty.noRunsForBranchMessage)
+      // The utm_source will be Binary%3A+App in production`open` mode but we assert using Binary%3A+Launchpad as this is the value in CI
+      cy.contains(defaultMessages.links.learnMoreButton).should('have.attr', 'href', 'https://on.cypress.io/git-info?utm_source=Binary%3A+Launchpad&utm_medium=Runs+Tab&utm_campaign=No+Runs+Found')
+      cy.get('[data-cy=alert-suffix-icon]').click()
+      cy.get('[data-cy=alert-header]').should('not.exist')
+    })
   })
 })
diff --git a/packages/app/src/runs/RunsContainer.vue b/packages/app/src/runs/RunsContainer.vue
@@ -27,23 +27,39 @@
       data-cy="runs"
       class="flex flex-col pb-[24px] gap-[16px]"
     >
-      <Warning
+      <TrackedBanner
         v-if="userProjectStatusStore.cloudStatusMatches('needsRecordedRun') && userProjectStatusStore.project.isUsingGit"
         :title="t('runs.empty.noRunsFoundForBranch')"
-        :message="noRunsForBranchMessage"
-      />
+        :banner-id="ACI_052023_NO_RUNS_FOUND_FOR_BRANCH"
+        dismissible
+        status="warning"
+        :has-banner-been-shown="false"
+        :event-data="undefined"
+      >
+        <div
+          ref="markdownTarget"
+          class="warning-markdown"
+          v-html="markdown"
+        />
+      </TrackedBanner>
       <Warning
         v-if="!online"
         :title="t('launchpadErrors.noInternet.header')"
         :message="t('launchpadErrors.noInternet.message')"
         :dismissible="false"
         class="mx-auto mb-[24px]"
       />
-      <Warning
+      <TrackedBanner
         v-if="!userProjectStatusStore.project.isUsingGit"
         :title="t('runs.empty.gitRepositoryNotDetected')"
-        :message="t('runs.empty.ensureGitSetupCorrectly')"
-      />
+        :banner-id="ACI_052023_GIT_NOT_DETECTED"
+        :has-banner-been-shown="false"
+        status="warning"
+        dismissible
+        :event-data="undefined"
+      >
+        {{ t('runs.empty.ensureGitSetupCorrectly') }}
+      </TrackedBanner>
       <RunCard
         v-for="run of currentProject?.cloudProject?.runs?.nodes"
         :key="run.id"
@@ -69,9 +85,16 @@ import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/u
 import { RUNS_PROMO_CAMPAIGNS, RUNS_TAB_MEDIUM } from './utils/constants'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 import { getUtmSource } from '@packages/frontend-shared/src/utils/getUtmSource'
+import TrackedBanner from '../specs/banners/TrackedBanner.vue'
+import { BannerIds } from '@packages/types/src'
+import { useMarkdown } from '@packages/frontend-shared/src/composables/useMarkdown'
 
 const { t } = useI18n()
 
+const markdownTarget = ref()
+
+const { ACI_052023_GIT_NOT_DETECTED, ACI_052023_NO_RUNS_FOUND_FOR_BRANCH } = BannerIds
+
 const emit = defineEmits<{
   (e: 'reExecuteRunsQuery'): void
 }>()
@@ -220,6 +243,8 @@ const noRunsForBranchMessage = computed(() => {
   return `${message} ${link}`
 })
 
+const { markdown } = useMarkdown(markdownTarget, noRunsForBranchMessage.value, { classes: { code: ['bg-warning-200'] } })
+
 const userProjectStatusStore = useUserProjectStatusStore()
 
 watch(() => userProjectStatusStore.project.isProjectConnected, (newVal, oldVal) => {

diff --git a/packages/app/src/specs/banners/TrackedBanner.cy.tsx b/packages/app/src/specs/banners/TrackedBanner.cy.tsx
@@ -126,5 +126,15 @@ describe('<TrackedBanner />', () => {
         cy.get('@recordEvent').should('not.have.been.called')
       })
     })
+
+    context('when eventData is undefined', () => {
+      it('should not record event', () => {
+        cy.mount({
+          render: () => <TrackedBanner bannerId="test-banner" hasBannerBeenShown={false} eventData={undefined} />,
+        })
+
+        cy.get('@recordEvent').should('not.have.been.called')
+      })
+    })
   })
 })
diff --git a/packages/app/src/specs/banners/TrackedBanner.vue b/packages/app/src/specs/banners/TrackedBanner.vue
@@ -28,7 +28,7 @@ type AlertComponentProps = InstanceType<typeof Alert>['$props']
 interface TrackedBannerComponentProps extends AlertComponentProps {
   bannerId: string
   hasBannerBeenShown: boolean
-  eventData: EventData
+  eventData: EventData | undefined
 }
 
 gql`

diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
@@ -48,6 +48,8 @@ export const BannerIds = {
   ACI_082022_CONNECT_PROJECT: 'aci_082022_connectProject',
   ACI_082022_RECORD: 'aci_082022_record',
   CT_052023_AVAILABLE: 'ct_052023_available',
+  ACI_052023_NO_RUNS_FOUND_FOR_BRANCH: 'aci_052023_noRunsFoundForBranch',
+  ACI_052023_GIT_NOT_DETECTED: 'aci_052023_gitNotDetected',
 } as const
 
 type BannerKeys = keyof typeof BannerIds