chore: fix some tests, minor refactor

packages/app/src/navigation/KeyboardBindingsModal.vue

@@ -5,7 +5,7 @@
  :title="t('sidebar.keyboardShortcuts.title')"
  :model-value="show"
  data-cy="keyboard-modal"
- help-link=""
+ :no-help="true"
  @update:model-value="emits('close')"
  >
  <ul class="m-24px w-384px">

packages/app/src/runner/studio/StudioSaveModal.vue

@@ -1,6 +1,7 @@
 <template>
  <StandardModal
  :model-value="props.open"
+ :no-help="true"
  variant="bare"
  data-cy="studio-save-modal"
  @update:model-value="emit('close')"

packages/frontend-shared/src/components/StandardModal.cy.tsx

@@ -35,6 +35,32 @@ describe('<StandardModal />', { viewportWidth: 800, viewportHeight: 400 }, () =>
  cy.percySnapshot()
  })
 
+ it('does not render helpLink when noHelp is true', () => {
+ cy.mount(
+ <StandardModal
+ class="w-400px"
+ modelValue={true}
+ noHelp={true}
+ title={title}
+ >
+ {body}
+ </StandardModal>,
+ )
+
+ cy.contains('a', defaultMessages.links.needHelp).should('not.exist')
+
+ cy.findByLabelText(defaultMessages.actions.close, {
+ selector: 'button',
+ })
+ .should('be.visible')
+ .and('not.be.disabled')
+
+ cy.contains('h2', title).should('be.visible')
+ cy.contains(body).should('be.visible')
+
+ cy.percySnapshot()
+ })
+
  it('bare variant renders without padding in body', () => {
  cy.mount(<StandardModal
  class="w-400px"

packages/frontend-shared/src/components/StandardModal.vue

@@ -17,6 +17,7 @@
  :class="props.class || ''"
  >
  <StandardModalHeader
+ :no-help="noHelp"
  :help-link="helpLink"
  :help-text="helpText"
  @close="closeModal"
@@ -72,12 +73,14 @@ const props = withDefaults(defineProps<{
  helpLink?: string
  helpText?: string
  variant?: 'bare'
+ noHelp?: boolean
  title?: string
  class?: string | string[] | Record<string, any>
 }>(), {
  modelValue: false,
  helpText: `${defaultMessages.links.needHelp}`,
- helpLink: '',
+ noHelp: false,
+ helpLink: 'https://on.cypress.io',
  class: undefined,
  variant: undefined,
  title: '',

packages/frontend-shared/src/components/StandardModalHeader.vue

@@ -6,18 +6,20 @@
  <DialogTitle class="text-gray-900 text-18px inline-block">
  <slot />
  </DialogTitle>
- <span
- v-if="helpLink.length"
- class="border-t border-t-gray-100 h-6px mx-8px w-32px inline-block"
- /> <ExternalLink
- v-if="helpLink.length"
- :href="helpLink"
- class="outline-transparent text-indigo-500 text-16px group"
- >
- <span class="group-hocus:underline">{{ helpText }}</span>
+
+ <template v-if="!noHelp">
+ <span class="border-t border-t-gray-100 h-6px mx-8px w-32px inline-block" />
+ <ExternalLink
+ :href="helpLink"
+ class="outline-transparent text-indigo-500 text-16px group"
+ >
+ <span class="group-hocus:underline">{{ helpText }}</span>
+ </ExternalLink>
+
  <i-cy-circle-bg-question-mark_x16 class="ml-8px -top-2px relative inline-block icon-dark-indigo-500 icon-light-indigo-100" />
- </ExternalLink>
+ </template>
  </div>
+
  <button
  :aria-label="t(`actions.close`)"
  class="border-transparent rounded-full outline-none border-1 group"
@@ -35,10 +37,13 @@ import { useI18n } from '@cy/i18n'
 
 const { t } = useI18n()
 
-defineProps<{
+withDefaults(defineProps<{
  helpLink: string
  helpText: string
-}>()
+ noHelp?: boolean
+}>(), {
+ noHelp: false,
+})
 
 defineEmits<{
  (eventName: 'close'): void

packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue

@@ -4,7 +4,7 @@
  variant="bare"
  :title="title"
  :model-value="show"
- help-link=""
+ :no-help="true"
  @update:model-value="emits('close')"
  >
  <div class="p-24px text-gray-700">

packages/reporter/cypress/e2e/tests.cy.ts

@@ -199,6 +199,10 @@ describe('studio controls', () => {
  })
 
  describe('button', () => {
+ beforeEach(() => {
+ runner.emit('reporter:start', { studioActive: false })
+ })
+
  it('displays studio icon with half transparency when hovering over test title', { scrollBehavior: false }, () => {
  cy.contains('test 1')
  .closest('.runnable-wrapper')