Merge branch 'develop' into issue-21856

circle.yml

@@ -537,7 +537,7 @@ commands:
  DEBUG=<<parameters.debug>> \
  CYPRESS_KONFIG_ENV=production \
  CYPRESS_RECORD_KEY=${TEST_LAUNCHPAD_RECORD_KEY:-$MAIN_RECORD_KEY} \
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  PERCY_ENABLE=${PERCY_TOKEN:-0} \
  PERCY_PARALLEL_TOTAL=-1 \
  $cmd yarn workspace @packages/<<parameters.package>> cypress:run:<<parameters.type>> --browser <<parameters.browser>> --record --parallel --group <<parameters.package>>-<<parameters.type>>
@@ -562,15 +562,15 @@ commands:
 
  DEBUG=<<parameters.debug>> \
  CYPRESS_KONFIG_ENV=production \
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  PERCY_ENABLE=${PERCY_TOKEN:-0} \
  PERCY_PARALLEL_TOTAL=-1 \
  yarn workspace @packages/<<parameters.package>> cypress:run:<<parameters.type>> --browser <<parameters.browser>> --spec $TESTFILES
  fi
  - run:
  command: |
  if [[ <<parameters.package>> == 'app' && <<parameters.percy>> == 'true' && -d "packages/app/cypress/screenshots/runner/screenshot/screenshot.cy.tsx/percy" ]]; then
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  PERCY_ENABLE=${PERCY_TOKEN:-0} \
  PERCY_PARALLEL_TOTAL=-1 \
  yarn percy upload packages/app/cypress/screenshots/runner/screenshot/screenshot.cy.tsx/percy
@@ -1213,7 +1213,7 @@ jobs:
  run-vite-dev-server-integration-tests
  - run:
  command: |
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  yarn percy build:finalize
 
  cli-visual-tests:
@@ -1235,7 +1235,7 @@ jobs:
  - run:
  name: Upload CLI snapshots for diffing
  command: |
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  PERCY_ENABLE=${PERCY_TOKEN:-0} \
  PERCY_PARALLEL_TOTAL=-1 \
  yarn percy snapshot ./cli/visual-snapshots
@@ -1580,7 +1580,7 @@ jobs:
  command: |
  CYPRESS_KONFIG_ENV=production \
  CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  PERCY_ENABLE=${PERCY_TOKEN:-0} \
  PERCY_PARALLEL_TOTAL=-1 \
  yarn percy exec --parallel -- -- \
@@ -1603,7 +1603,7 @@ jobs:
  command: |
  CYPRESS_KONFIG_ENV=production \
  CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  PERCY_ENABLE=${PERCY_TOKEN:-0} \
  PERCY_PARALLEL_TOTAL=-1 \
  yarn percy exec --parallel -- -- \
@@ -1625,7 +1625,7 @@ jobs:
  command: |
  CYPRESS_KONFIG_ENV=production \
  CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
- PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+ PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
  PERCY_ENABLE=${PERCY_TOKEN:-0} \
  PERCY_PARALLEL_TOTAL=-1 \
  yarn percy exec --parallel -- -- \

cli/types/cypress.d.ts

@@ -2941,7 +2941,7 @@ declare namespace Cypress {
  /**
  * Hosts mappings to IP addresses.
  */
- hosts: null | string[]
+ hosts: null | {[key: string]: string}
  /**
  * Whether Cypress was launched via 'cypress open' (interactive mode)
  */

npm/vite-dev-server/src/constants.ts

@@ -3,4 +3,6 @@ export const configFiles = [
  'vite.config.js',
  'vite.config.mjs',
  'vite.config.cjs',
+ 'vite.config.mts',
+ 'vite.config.cts',
 ]

packages/app/package.json

@@ -76,16 +76,20 @@
  "vite": {
  "optimizeDeps": {
  "include": [
+ "@cypress/parse-domain",
  "@headlessui/vue",
  "@iconify/iconify",
  "@percy/cypress",
  "@testing-library/cypress/add-commands",
+ "@toycode/markdown-it-class",
  "@urql/exchange-execute",
  "@urql/vue",
  "@vueuse/core",
+ "ansi-to-html",
  "bluebird",
  "cypress-real-events",
  "dedent",
+ "debug",
  "events",
  "fake-uuid",
  "floating-vue",
@@ -95,12 +99,15 @@
  "graphql/jsutils/Path",
  "gravatar",
  "human-interval",
+ "javascript-time-ago",
  "lodash",
+ "markdown-it",
  "mobx",
  "nanoid",
  "pinia",
  "shiki",
  "socket.io-client",
+ "url",
  "vue",
  "vue-demi",
  "vue-toastification",

packages/app/src/specs/LastUpdatedHeader.vue

@@ -4,13 +4,13 @@
  :is-interactive="true"
  show-group="last-updated-header"
  >
- <div
- class="cursor-default decoration-dotted underline underline-gray-300 underline-offset-4"
- tabindex="0"
+ <button
+ type="button"
+ class="cursor-default decoration-dotted underline underline-gray-300 underline-offset-4 font-medium"
  data-cy="last-updated-header"
  >
  {{ t('specPage.lastUpdated.header') }}
- </div>
+ </button>
  <template
  #popper
  >

packages/app/src/specs/RunStatusDots.cy.tsx

@@ -125,4 +125,14 @@ describe('<RunStatusDots />', () => {
  cy.findAllByTestId('run-status-dot-latest').should('not.have.class', 'animate-spin')
  })
  })
+
+ it('builds href with UTM params', () => {
+ const runs = fakeRuns(['PASSED'])
+
+ mountWithRuns(runs)
+
+ cy.get('a')
+ .should('have.attr', 'href')
+ .and('contain', 'utm_campaign=PASSED')
+ })
 })

packages/app/src/specs/RunStatusDots.vue

@@ -11,13 +11,11 @@
  >
  <component
  :is="latestRun? ExternalLink : 'div'"
- :href="latestRun?.url || '#'"
- :use-default-hocus="false"
+ :href="dashboardUrl"
  >
  <div
  class="flex justify-end items-center"
  data-cy="run-status-dots"
- tabindex="0"
  >
  <div
  v-for="(dot,i) in dotClasses"
@@ -49,7 +47,7 @@
  >
  <ExternalLink
  v-if="latestRun"
- :href="latestRun.url ?? '#'"
+ :href="dashboardUrl"
  :use-default-hocus="false"
  >
  <SpecRunSummary
@@ -77,6 +75,7 @@ import QueuedIcon from '~icons/cy/queued-solid_x16.svg'
 import RunningIcon from '~icons/cy/running-outline_x16.svg'
 import SpecRunSummary from './SpecRunSummary.vue'
 import { gql } from '@urql/vue'
+import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 
 gql`
 fragment RunStatusDots on RemoteFetchableCloudProjectSpecResult {
@@ -195,6 +194,20 @@ const latestDot = computed(() => {
  }
 })
 
+const dashboardUrl = computed(() => {
+ if (latestRun.value?.url) {
+ return getUrlWithParams({
+ url: latestRun.value.url,
+ params: {
+ utm_medium: 'Specs Latest Runs Dots',
+ utm_campaign: latestDot.value.status,
+ },
+ })
+ }
+
+ return '#'
+})
+
 </script>
 
 <style lang="scss">

packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx

@@ -91,7 +91,7 @@ describe('SpecHeaderCloudDataTooltip', () => {
  .should('be.visible')
  .and('contain', get(defaultMessages, msgKeys.connected).replace('{0}', get(defaultMessages, msgKeys.docs)))
 
- cy.get('button').should('not.exist')
+ cy.findByTestId('cloud-data-tooltip-content').find('button').should('not.exist')
 
  cy.percySnapshot()
  })

packages/app/src/specs/SpecHeaderCloudDataTooltip.vue

@@ -4,9 +4,9 @@
  :is-interactive="true"
  :show-group="VALUES[mode].header"
  >
- <div
- class="cursor-default decoration-dotted underline underline-gray-300 underline-offset-4"
- tabindex="0"
+ <button
+ type="button"
+ class="cursor-default font-medium decoration-dotted underline underline-gray-300 underline-offset-4"
  >
  <span
  class="hidden lg:flex"
@@ -16,17 +16,17 @@
  class="lg:hidden"
  data-cy="short-header-text"
  >{{ t(VALUES[mode].shortHeader || VALUES[mode].header) }}</span>
- </div>
+ </button>
  <template
  #popper
  >
  <div
- class="flex flex-col mx-4 text-sm text-center p-4 items-center"
+ class="flex flex-col mx-4 text-sm text-center py-4 px-2 items-center"
  data-cy="cloud-data-tooltip-content"
  >
  <div
- :class="{'m-2': projectConnectionStatus!== 'CONNECTED'}"
- class="max-w-235px"
+ :class="{'my-2': projectConnectionStatus!== 'CONNECTED'}"
+ class="max-w-300px"
  >
  <i18n-t
  scope="global"

packages/app/src/specs/SpecsListHeader.vue

@@ -48,7 +48,7 @@
  data-cy="new-spec-button"
  :prefix-icon="IconAdd"
  prefix-icon-class="justify-center text-lg text-center icon-light-transparent icon-dark-white"
- class="min-w-127px"
+ class="min-w-134px"
  size="lg"
  @click="emit('showCreateSpecModal')"
  >

packages/app/src/specs/SpecsListRowItem.vue

@@ -27,7 +27,7 @@
  <div>
  <slot name="latest-runs" />
  </div>
- <div class="invisible md:col-span-2 md:visible">
+ <div class="hidden md:col-span-2 md:block">
  <slot name="average-duration" />
  </div>
  </template>

packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx

@@ -162,6 +162,44 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
  })
  })
 
+ context('responsive design', () => {
+ beforeEach(() => {
+ cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
+ onResult: (result) => {
+ result.currentProject = null
+ },
+ render: (gqlVal) => (
+ <div class="border-current border-1 h-700px resize overflow-auto">
+ <HeaderBarContent gql={gqlVal} />
+ </div>
+ ),
+ })
+ })
+
+ // https://github.com/cypress-io/cypress/issues/21842
+ it('shows docs menu correctly on small viewports', () => {
+ // Simulate the small viewport.
+ cy.viewport(767, 800)
+
+ // show docs menu
+ cy.contains('button', text.docsMenu.docsHeading).click()
+
+ // docs menu flex direction is column when viewport width is small
+ cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'column')
+ })
+
+ it('shows docs menu correctly on wider viewports', () => {
+ // Change the viewport size to wide.
+ cy.viewport(768, 800)
+
+ // show docs menu
+ cy.contains('button', text.docsMenu.docsHeading).click()
+
+ // docs menu flex direction is row when viewport width is big enough.
+ cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'row')
+ })
+ })
+
  it('does not show hint when on latest version of Cypress', () => {
  mountFragmentWithData({
  versions: {

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

@@ -143,7 +143,8 @@
  </template>
  <div
  v-if="docsMenuVariant === 'main'"
- class="flex p-16px gap-24px"
+ data-cy="docs-menu-container"
+ class="flex p-16px gap-24px flex-col md:flex-row"
  >
  <DocsMenuContent
  :current-project-exists="!!props.gql?.currentProject"