From 28d8f3521ff8a7226481387a742309faade5ba60 Mon Sep 17 00:00:00 2001
From: jordanpowell88 <jordan@jpdesigning.com>
Date: Tue, 16 May 2023 11:11:04 -0400
Subject: [PATCH] chore: cleanup PR

---
 cli/CHANGELOG.md                                     |  2 +-
 packages/app/src/debug/DebugContainer.vue            |  2 --
 packages/app/src/debug/empty/DebugBranchError.cy.tsx |  5 +++--
 packages/app/src/debug/empty/DebugEmptyStates.cy.tsx |  2 +-
 packages/app/src/debug/empty/DebugEmptyView.vue      |  1 +
 packages/frontend-shared/src/warning/Warning.cy.tsx  | 12 ++++++++++++
 packages/frontend-shared/src/warning/Warning.vue     | 12 +++++++-----
 7 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 47a23fb24342..47922f5daf6b 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -5,7 +5,7 @@ _Released 05/23/2023 (PENDING)_
 
 **Features:**
 
-- Add Git related messages for the Runs and Debug Page when users aren't using Git or their 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. Fixes [#26680](https://github.com/cypress-io/cypress/issues/26680).
 
 **Bugfixes:**
 
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 2aca19de5db0..01ce56950015 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -195,8 +195,6 @@ fragment DebugSpecs on Query {
 
 const props = withDefaults(defineProps<{
   gql?: DebugSpecsFragment
-  // This prop is just to stub the error state for now
-  showError?: boolean
   isLoading?: boolean
   commitsAhead?: number
   online?: boolean
diff --git a/packages/app/src/debug/empty/DebugBranchError.cy.tsx b/packages/app/src/debug/empty/DebugBranchError.cy.tsx
index bf46949895d5..4f682992322c 100644
--- a/packages/app/src/debug/empty/DebugBranchError.cy.tsx
+++ b/packages/app/src/debug/empty/DebugBranchError.cy.tsx
@@ -1,10 +1,11 @@
 import DebugBranchError from './DebugBranchError.vue'
+import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 
 describe('<DebugBranchError />', () => {
   it('can mount', () => {
     cy.mount(<DebugBranchError />)
-    cy.contains('No runs found for your branch')
-    cy.contains('Cypress uses Git to show runs for your branch. Ensure that version control is properly configured and that you are sending Git information to Cypress Cloud.')
+    cy.contains(defaultMessages.debugPage.emptyStates.noRunsFoundForBranch)
+    cy.contains(defaultMessages.debugPage.emptyStates.noRunsForBranchMessage)
     cy.contains('Learn more').should('have.attr', 'href', 'https://on.cypress.io/git-info?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
   })
 })
diff --git a/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
index b2226b6a0942..25508bd93095 100644
--- a/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
+++ b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
@@ -122,7 +122,7 @@ describe('Debug page empty states', { defaultCommandTimeout: 250 }, () => {
   context('not using git', () => {
     it('renders', () => {
       mountWithGql(<DebugError />)
-
+      cy.findByText('Git repository not detected').should('be.visible')
       cy.percySnapshot()
     })
   })
diff --git a/packages/app/src/debug/empty/DebugEmptyView.vue b/packages/app/src/debug/empty/DebugEmptyView.vue
index f8cc7e52eb5a..f9e54e5b613d 100644
--- a/packages/app/src/debug/empty/DebugEmptyView.vue
+++ b/packages/app/src/debug/empty/DebugEmptyView.vue
@@ -4,6 +4,7 @@
       <component
         :is="icon"
         v-if="icon"
+        class="icon-dark-gray-500 icon-light-indigo-100"
       />
       <div v-else>
         <i-cy-box-open_x48 class="icon-dark-gray-500 icon-light-indigo-100" />
diff --git a/packages/frontend-shared/src/warning/Warning.cy.tsx b/packages/frontend-shared/src/warning/Warning.cy.tsx
index 6512ec6c0f38..0289c69a92df 100644
--- a/packages/frontend-shared/src/warning/Warning.cy.tsx
+++ b/packages/frontend-shared/src/warning/Warning.cy.tsx
@@ -48,4 +48,16 @@ describe('<Warning />', () => {
     cy.get(`[aria-label=${defaultMessages.components.alert.dismissAriaLabel}`).first().click()
     cy.wrap(onUpdate).should('be.called')
   })
+
+  it('renders with a Learn more Link', () => {
+    const link = 'https://on.cypress.io/git-info'
+
+    cy.mount(() => (<div class="p-4"><Warning
+      title={title}
+      message={message}
+      helpLinkHref={link}
+    /></div>))
+
+    cy.contains('Learn more').should('have.attr', 'href', link)
+  })
 })
diff --git a/packages/frontend-shared/src/warning/Warning.vue b/packages/frontend-shared/src/warning/Warning.vue
index 26aa96d75c61..b3ae7e48a15b 100644
--- a/packages/frontend-shared/src/warning/Warning.vue
+++ b/packages/frontend-shared/src/warning/Warning.vue
@@ -13,6 +13,12 @@
       class="warning-markdown"
       v-html="markdown"
     />
+    <ExternalLink
+      v-if="helpLinkHref"
+      :href="helpLinkHref"
+    >
+      {{ t('links.learnMoreButton') }}
+    </ExternalLink>
     <Button
       v-if="retryable"
       size="md"
@@ -30,6 +36,7 @@ import ErrorOutlineIcon from '~icons/cy/status-errored-outline_x16.svg'
 import { useMarkdown } from '@packages/frontend-shared/src/composables/useMarkdown'
 import Alert from '@cy/components/Alert.vue'
 import Button from '@cy/components/Button.vue'
+import ExternalLink from '../gql-components/ExternalLink.vue'
 import RefreshIcon from '~icons/cy/refresh_x16'
 import { computed, ref } from 'vue'
 import { useVModels } from '@vueuse/core'
@@ -66,11 +73,6 @@ let message = computed(() => {
     return [props.message, `        ${ props.details }`].join('\n\n')
   }
 
-  if (props.helpLinkHref) {
-    // eslint-disable-next-line prefer-template
-    return props.message + ` <span class="ml-[4px]"><a href="${props.helpLinkHref}" class="text-indigo-500 hocus-link-default">${t('links.learnMoreButton')}</a></span>`
-  }
-
   return props.message
 })