feat: replace reconfigure button on settings page with link to config doc (#21077)

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

Author: Rachel

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

@@ -27,19 +27,6 @@ describe('App: Settings', () => {
     cy.get('button').contains('Log In')
   })
 
-  it('can reconfigure a project', () => {
-    cy.startAppServer('e2e')
-    cy.visitApp('settings')
-    cy.withCtx((ctx, o) => {
-      o.sinon.stub(ctx.actions.project, 'reconfigureProject')
-    })
-
-    cy.findByText('Reconfigure Project').click()
-    cy.withRetryableCtx((ctx) => {
-      expect(ctx.actions.project.reconfigureProject).to.have.been.called
-    })
-  })
-
   describe('Cloud Settings', () => {
     it('shows the projectId section when there is a projectId', () => {
       cy.withCtx(async (ctx, o) => {

packages/app/src/settings/SettingsContainer.cy.tsx

@@ -50,4 +50,11 @@ describe('<SettingsContainer />', { viewportHeight: 800, viewportWidth: 900 }, (
 
     cy.findByText(defaultMessages.settingsPage.projectId.title).should('not.exist')
   })
+
+  it('renders footer with CTA button', () => {
+    mountSettingsContainer()
+    cy.contains('p', defaultMessages.settingsPage.footer.text.replace('{testingType}', 'E2E'))
+    cy.contains('a', defaultMessages.settingsPage.footer.button)
+    .should('have.attr', 'href', defaultMessages.settingsPage.footer.buttonLink)
+  })
 })

packages/app/src/settings/SettingsContainer.vue

@@ -36,23 +36,25 @@
     </div>
     <hr class="border-gray-100">
     <p class="mx-auto font-light text-center text-gray-500 max-w-500px text-16px leading-24px">
-      {{ t('settingsPage.footer.text') }}
+      {{ footerText }}
     </p>
     <Button
       class="mx-auto group"
       variant="outline"
       :prefix-icon="SettingsIcon"
       prefix-icon-class="icon-dark-gray-500 icon-light-gray-50 group-hocus:icon-dark-indigo-400 group-hocus:icon-light-indigo-50"
-      @click="reconfigure"
+      :href="t('settingsPage.footer.buttonLink')"
     >
       {{ t('settingsPage.footer.button') }}
     </Button>
   </div>
 </template>
 
 <script lang="ts" setup>
+
+import { computed } from 'vue'
 import { useI18n } from '@cy/i18n'
-import { gql, useMutation } from '@urql/vue'
+import { gql } from '@urql/vue'
 import Button from '@cy/components/Button.vue'
 import ExternalEditorSettings from './device/ExternalEditorSettings.vue'
 import ProxySettings from './device/ProxySettings.vue'
@@ -61,19 +63,19 @@ import ProjectSettings from './project/ProjectSettings.vue'
 import CloudSettings from '../settings/project/CloudSettings.vue'
 import TestingPreferences from './device/TestingPreferences.vue'
 import type { SettingsContainerFragment } from '../generated/graphql'
-import { SettingsContainer_ReconfigureProjectDocument } from '../generated/graphql'
 import IconLaptop from '~icons/cy/laptop_x24.svg'
 import IconOdometer from '~icons/cy/object-odometer_x24.svg'
 import IconFolder from '~icons/cy/folder-outline_x24.svg'
 import SettingsIcon from '~icons/cy/settings_x16.svg'
 
 const { t } = useI18n()
 
-gql`
-mutation SettingsContainer_ReconfigureProject {
-  reconfigureProject
-}
-`
+const footerText = computed(() => {
+  return t('settingsPage.footer.text',
+    { testingType: props.gql.currentProject?.currentTestingType === 'component'
+      ? 'component'
+      : 'E2E' })
+})
 
 gql`
 fragment SettingsContainer on Query {
@@ -91,9 +93,4 @@ const props = defineProps<{
   gql: SettingsContainerFragment
 }>()
 
-const openElectron = useMutation(SettingsContainer_ReconfigureProjectDocument)
-
-function reconfigure () {
-  openElectron.executeMutation({})
-}
 </script>

packages/frontend-shared/src/locales/en-US.json

@@ -410,8 +410,9 @@
       }
     },
     "footer": {
-      "text": "You can reconfigure the settings for this project if you're experiencing issues with your Cypress configuration.",
-      "button": "Reconfigure Project"
+      "text": "You can reconfigure the {testingType} testing settings for this project if you're experiencing issues with your Cypress configuration.",
+      "button": "Configuration Guide",
+      "buttonLink": "https://docs.cypress.io/guides/references/configuration"
     }
   },
   "runs": {