Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Apr 14, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
97f252e
update strings
rachelruderman Apr 13, 2022
0539a5b
link to configuration docs
rachelruderman Apr 13, 2022
e9745e9
add test for settigscontainer footer
rachelruderman Apr 13, 2022
eb71453
Remove mutation SettingsContainer_ReconfigureProject
rachelruderman Apr 13, 2022
fe0de9e
Merge branch '10.0-release' into unify-1532
Apr 13, 2022
a94af13
remove old test
rachelruderman Apr 14, 2022
6c5a252
Merge branch 'unify-1532' of github.com:cypress-io/cypress into unify…
rachelruderman Apr 14, 2022
9e0cea7
Use testingType variable in en-US string
Apr 14, 2022
99d58c0
use footerText variable
rachelruderman Apr 14, 2022
56d6049
Merge branch 'unify-1532' of github.com:cypress-io/cypress into unify…
rachelruderman Apr 14, 2022
8cf3375
use testingType variable in test
rachelruderman Apr 14, 2022
ed1ee3b
Merge branch '10.0-release' into unify-1532
ZachJW34 Apr 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions packages/app/cypress/e2e/settings.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
7 changes: 7 additions & 0 deletions packages/app/src/settings/SettingsContainer.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used a component test instead of an e2e test to get some experience with CT 😄 in general, when both approaches are equal, do we have a preference for one or the other?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For verifying text content I prefer to keep it in the component tests.

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)
})
})
25 changes: 11 additions & 14 deletions packages/app/src/settings/SettingsContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Above for the t('settingsPage.footer.text') should be modified to include the testing type since it's currently wired to only show component. Something like:

const footerText = computed(() => t('settingsPage.footer.text', { testingType: props.gql.currentProject?.currentTestingType === 'component' ? 'component' : 'E2E' }))

Then you can render {{ footerText }}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great callout!

: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'
Expand All @@ -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 {
Expand All @@ -91,9 +93,4 @@ const props = defineProps<{
gql: SettingsContainerFragment
}>()

const openElectron = useMutation(SettingsContainer_ReconfigureProjectDocument)

function reconfigure () {
openElectron.executeMutation({})
}
</script>
5 changes: 3 additions & 2 deletions packages/frontend-shared/src/locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down