feat: add footer to the settings (#18867)

* feat: add footer to the settings

* update i18n

Co-authored-by: Lachlan Miller <[email protected]>

Author: Barthélémy Ledoux

packages/app/cypress/e2e/integration/settings.spec.ts

@@ -30,4 +30,12 @@ describe('Settings', { viewportWidth: 1200 }, () => {
     cy.findByText('Testing Preferences').should('be.visible')
     cy.findByText('Proxy Settings').should('be.visible')
   })
+
+  it('calls a reconfigure mutation when click on the footer button', () => {
+    cy.visitApp()
+    cy.get('[href="#/settings"]').click()
+    cy.intercept('mutation-SettingsContainer_ReconfigureProject', { 'data': { 'reconfigureProject': true } }).as('ReconfigureProject')
+    cy.findByText('Reconfigure Project').click()
+    cy.wait('@ReconfigureProject')
+  })
 })

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

@@ -2,14 +2,19 @@ import { SettingsContainerFragmentDoc } from '../generated/graphql-test'
 import { defaultMessages } from '@cy/i18n'
 import SettingsContainer from './SettingsContainer.vue'
 
-describe('<SettingsContainer />', () => {
+describe('<SettingsContainer />', { viewportHeight: 800, viewportWidth: 900 }, () => {
   it('renders', () => {
-    cy.viewport(900, 800)
     cy.mountFragment(SettingsContainerFragmentDoc, { render: (gql) => <SettingsContainer gql={gql} /> })
 
     cy.contains('Project Settings').click()
 
     cy.findByText(defaultMessages.settingsPage.projectId.title).should('be.visible')
     cy.findByText(defaultMessages.settingsPage.config.title).should('be.visible').click()
   })
+
+  it('renders a footer', () => {
+    cy.mountFragment(SettingsContainerFragmentDoc, { render: (gql) => <SettingsContainer gql={gql} /> })
+    cy.findByText(defaultMessages.settingsPage.footer.text)
+    cy.findByText(defaultMessages.settingsPage.footer.button)
+  })
 })

packages/app/src/settings/SettingsContainer.vue

@@ -22,21 +22,42 @@
         :gql="props.gql.currentProject"
       />
     </SettingsCard>
+    <hr class="border-gray-100 my-32px">
+    <p class="leading-24px text-16px text-light max-w-500px text-gray-500 mx-auto text-center">
+      {{ t('settingsPage.footer.text') }}
+    </p>
+    <Button
+      class="my-16px mx-auto"
+      variant="outline"
+      :prefix-icon="SettingsIcon"
+      prefix-icon-class="icon-dark-gray-500 icon-light-gray-50"
+      @click="reconfigure"
+    >
+      {{ t('settingsPage.footer.button') }}
+    </Button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from '@cy/i18n'
-import { gql } from '@urql/vue'
+import { gql, useMutation } from '@urql/vue'
+import Button from '@cy/components/Button.vue'
 import SettingsCard from './SettingsCard.vue'
 import ProjectSettings from './project/ProjectSettings.vue'
 import DeviceSettings from './device/DeviceSettings.vue'
-import type { SettingsContainerFragment } from '../generated/graphql'
+import { SettingsContainer_ReconfigureProjectDocument, SettingsContainerFragment } from '../generated/graphql'
 import IconLaptop from '~icons/cy/laptop_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
+}
+`
+
 gql`
 fragment SettingsContainer on Query {
   currentProject {
@@ -48,4 +69,10 @@ fragment SettingsContainer on Query {
 const props = defineProps<{
   gql: SettingsContainerFragment
 }>()
+
+const openElectron = useMutation(SettingsContainer_ReconfigureProjectDocument)
+
+function reconfigure () {
+  openElectron.executeMutation({})
+}
 </script>

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

@@ -310,6 +310,10 @@
     "testingPreferences": {
       "title": "Testing Preferences",
       "description": "Configure your testing environment with these flags"
+    },
+    "footer": {
+      "text": "You can reconfigure the settings for this project if you’re experiencing issues with your Cypress configuration.",
+      "button": "Reconfigure Project"
     }
   },
   "runs": {