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

Jump to bottom

feat: add footer to the settings #18867

Merged
merged 3 commits into from
Nov 14, 2021
Merged

feat: add footer to the settings #18867

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13fbff7
feat: add footer to the settings
elevatebart Nov 10, 2021
053e9bc
Merge branch 'unified-desktop-gui' into feat/settings-footer
elevatebart Nov 10, 2021
fee75d3
update i18n
lmiller1990 Nov 14, 2021
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
8 changes: 8 additions & 0 deletions packages/app/cypress/e2e/integration/settings.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})
9 changes: 7 additions & 2 deletions packages/app/src/settings/SettingsContainer.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
})
31 changes: 29 additions & 2 deletions packages/app/src/settings/SettingsContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -48,4 +69,10 @@ fragment SettingsContainer on Query {
const props = defineProps<{
gql: SettingsContainerFragment
}>()

const openElectron = useMutation(SettingsContainer_ReconfigureProjectDocument)

function reconfigure () {
openElectron.executeMutation({})
}
</script>
4 changes: 4 additions & 0 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 @@ -310,6 +310,10 @@
"testingPreferences": {
"title": "Testing Preferences",
"description": "Configure your testing environment with these flags"
},
"footer": {
"text": "You can reconfigure the component testing settings for this project if you’re experiencing issues with your Cypress configuration.",
Copy link
Contributor

Choose a reason for hiding this comment

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

This message should be specific to the currently selected testing type i.e. You can reconfigure the ${testingType} testing settings for this project if you’re experiencing issues with your Cypress configuration.

Copy link
Contributor

Choose a reason for hiding this comment

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

How about we just say "You can reconfigure the settings for ..." since you can potentially change to another testing type.

"button": "Reconfigure Project"
}
},
"runs": {
Expand Down