feat: add spec pattern modal #19801
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { SpecPatternModalFragmentDoc } from '../generated/graphql-test' | ||
| import SpecPatternModal from './SpecPatternModal.vue' | ||
| import { defaultMessages } from '@cy/i18n' | ||
|
|
||
| describe('<SpecPatternModal />', () => { | ||
| it('should not render if closed', () => { | ||
| cy.mountFragment(SpecPatternModalFragmentDoc, { | ||
| render (gql) { | ||
| return (<SpecPatternModal gql={gql} show={false} />) | ||
| }, | ||
| }) | ||
|
|
||
| cy.get('[data-cy="spec-pattern-modal"]').should('not.exist') | ||
| }) | ||
|
|
||
| it('should render and close', () => { | ||
| const closeSpy = cy.stub().as('closeSpy') | ||
|
|
||
| cy.mountFragment(SpecPatternModalFragmentDoc, { | ||
| render (gql) { | ||
| return (<SpecPatternModal gql={gql} show={true} onClose={closeSpy} />) | ||
| }, | ||
| }) | ||
|
|
||
| cy.get('[data-cy="spec-pattern-modal"]').should('be.visible') | ||
| cy.contains('h2', defaultMessages.components.specPatternModal.title) | ||
| cy.get('[data-cy="external"]').should('have.attr', 'href').and('eq', 'https://on.cypress.io') | ||
| cy.get('[data-cy="spec-pattern"]').should('be.visible') | ||
|
|
||
| cy.percySnapshot() | ||
|
|
||
| cy.get('[data-cy="open-config-file"').should('be.visible') | ||
| cy.contains('button', defaultMessages.createSpec.updateSpecPattern) | ||
|
|
||
| cy.contains('button', defaultMessages.components.modal.dismiss).click() | ||
|
|
||
| cy.get('@closeSpy').should('have.been.called') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <template> | ||
| <StandardModal | ||
| class="transition-all transition duration-200" | ||
| variant="bare" | ||
| :title="t('components.specPatternModal.title')" | ||
| :model-value="show" | ||
| data-cy="spec-pattern-modal" | ||
| help-link="https://on.cypress.io" | ||
| @update:model-value="emits('close')" | ||
| > | ||
| <div | ||
| class="w-full p-24px sm:min-w-640px" | ||
| > | ||
| <SpecPatterns | ||
| :gql="props.gql" | ||
| class="border-gray-100 rounded border-px" | ||
| /> | ||
| </div> | ||
| <StandardModalFooter | ||
| class="flex items-center h-72px gap-16px" | ||
| > | ||
| <OpenConfigFileInIDE> | ||
| <Button size="lg"> | ||
| <template #prefix> | ||
| <i-cy-code-editor_x16 class="icon-dark-white" /> | ||
| </template> | ||
| {{ t('createSpec.updateSpecPattern') }} | ||
| </Button> | ||
| </OpenConfigFileInIDE> | ||
| <Button | ||
| variant="outline" | ||
| size="lg" | ||
| @click="emits('close')" | ||
| > | ||
| {{ t('components.modal.dismiss') }} | ||
| </Button> | ||
| </StandardModalFooter> | ||
| </StandardModal> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import StandardModal from '@cy/components/StandardModal.vue' | ||
| import SpecPatterns from '../components/SpecPatterns.vue' | ||
| import { useI18n } from '@cy/i18n' | ||
| import type { SpecPatternModalFragment } from '../generated/graphql' | ||
| import { gql } from '@urql/core' | ||
| import StandardModalFooter from '@cy/components/StandardModalFooter.vue' | ||
| import Button from '../../../frontend-shared/src/components/Button.vue' | ||
| import OpenConfigFileInIDE from '../../../frontend-shared/src/gql-components/OpenConfigFileInIDE.vue' | ||
|
|
||
| gql` | ||
| fragment SpecPatternModal on CurrentProject { | ||
| id | ||
| ...SpecPatterns | ||
| } | ||
| ` | ||
|
|
||
| const props = defineProps<{ | ||
| gql: SpecPatternModalFragment | ||
| show: boolean | ||
| }>() | ||
|
|
||
| const { t } = useI18n() | ||
|
|
||
| const emits = defineEmits<{ | ||
| (eventName: 'close'): void | ||
| }>() | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,15 @@ | ||
| <template> | ||
| <Dialog | ||
| :open="modelValue" | ||
| class="fixed inset-0 z-10 overflow-y-auto" | ||
| @close="clickOutside && closeModal()" | ||
| > | ||
| <div class="flex items-center justify-center min-h-screen"> | ||
| <slot | ||
| name="overlay" | ||
| :classes="'fixed inset-0'" | ||
| > | ||
| <DialogOverlay class="fixed inset-0 bg-gray-800 opacity-90" /> | ||
| </slot> | ||
| <div | ||
| class="bg-white rounded mx-auto ring-[#9095AD40] ring-4 relative" | ||
|
|
@@ -27,7 +27,7 @@ | |
|
|
||
| <DialogDescription | ||
| v-if="$slots.description" | ||
| class="font-normal text-gray-700 p-24px" | ||
| > | ||
| <slot name="description" /> | ||
| </DialogDescription> | ||
|
|
@@ -72,7 +72,7 @@ const props = withDefaults(defineProps<{ | |
| }>(), { | ||
| clickOutside: true, | ||
| modelValue: false, | ||
| helpText: 'Need help', | ||
| helpLink: 'https://on.cypress.io', | ||
| class: undefined, | ||
| variant: undefined, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| <template> | ||
| <template v-if="query?.data?.value"> | ||
| <button | ||
| data-cy="open-config-file" | ||
| class="hocus-link-default underline-purple-500" | ||
| @click="showCypressConfigInIDE()" | ||
| > | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -32,6 +32,9 @@ | |
| }, | ||
| "specPattern": { | ||
| "matches": "{0} Matches" | ||
| }, | ||
| "specPatternModal": { | ||
| "title": "Spec pattern settings" | ||
| } | ||
| }, | ||
| "clipboard": { | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we combine the
v-ifand:show? It looks like they do same thing (conditionally hide/show?)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think they have different purposes here. It might be better to make the v-if depend just on
props.gql.currentProjectso that the SpecPatternModal component renders only once, when there is acurrentProject, and keepbindingsOpento only manage the open/closed state. With the current v-if we add/remove the component from the DOM, at the same time as we are opening and closing the modal.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@marktnoonan I'll implement what you've stated above, and also rename some variables as
bindingsOpenwas a copy and paste and it should be named more contextually.