From 150b04cbe55c06da88d3487683352d594ad2b4e7 Mon Sep 17 00:00:00 2001
From: Bill Glesias <bglesias@gmail.com>
Date: Thu, 24 Aug 2023 19:36:24 -0400
Subject: [PATCH] chore: add v13 welcome page content (#27549)

* feat: add v13 splash page content (wip)

chore: add video link for v13 inside graphql context and root resolver. add migration tests outside of migration manager and update component tests to test aspects

chore: update copy to most recent. Needs onlink deployments

chore: opt for named slot in major version welcome as we still want to show the changes whether or not the video is present

chore: fix video margin by shrinking the margin for a more appealing loadout

chore: update onlinks for what is expected in deploy

chore: adjust margins around video, move video up, and reduce margin on major welcome title

chore: bump release date to 8/29

chore: update stubbed query to reference actual video

* Update packages/launchpad/src/migration/MajorVersionWelcome.vue

Co-authored-by: Mark Noonan <mark@cypress.io>

* Update packages/launchpad/src/migration/MajorVersionWelcome.vue

Co-authored-by: Mark Noonan <mark@cypress.io>

* chore: update code elements to be inlinecodefragments

* chore: update utm links to reflect correct nomenclature

* stub migration src in  network performance launchpad test on video as abortcontroller is difficult to test with current ctx setup

---------

Co-authored-by: Mark Noonan <mark@cypress.io>
---
 .../data-context/src/data/coreDataShape.ts    |   2 +
 .../src/sources/MigrationDataSource.ts        |  31 +++++
 .../support/mock-graphql/stubgql-Query.ts     |   9 ++
 packages/graphql/schemas/schema.graphql       |   3 +
 .../src/schemaTypes/objectTypes/gql-Query.ts  |  11 ++
 .../launchpad/cypress/e2e/migration.cy.ts     |  66 +++++++++++
 .../launchpad/cypress/e2e/slow-network.cy.ts  |  14 ++-
 packages/launchpad/src/Main.vue               |  21 +++-
 .../src/migration/MajorVersionWelcome.cy.tsx  |  26 ++---
 .../src/migration/MajorVersionWelcome.vue     | 106 ++++++++++--------
 packages/types/src/constants.ts               |   2 +-
 .../migration-v12-to-v13/cypress.config.js    |  10 ++
 .../cypress/e2e/spec.cy.js                    |   5 +
 13 files changed, 244 insertions(+), 62 deletions(-)
 create mode 100644 system-tests/projects/migration-v12-to-v13/cypress.config.js
 create mode 100644 system-tests/projects/migration-v12-to-v13/cypress/e2e/spec.cy.js

diff --git a/packages/data-context/src/data/coreDataShape.ts b/packages/data-context/src/data/coreDataShape.ts
index 85d766a8f0f7..14e1e9e9a18e 100644
--- a/packages/data-context/src/data/coreDataShape.ts
+++ b/packages/data-context/src/data/coreDataShape.ts
@@ -79,6 +79,7 @@ export interface WizardDataShape {
 export interface MigrationDataShape {
   // TODO: have the model of migration here
   step: MigrationStep
+  videoEmbedHtml: string | null
   legacyConfigForMigration?: LegacyCypressConfigJson | null
   filteredSteps: MigrationStep[]
   flags: {
@@ -214,6 +215,7 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
     },
     migration: {
       step: 'renameAuto',
+      videoEmbedHtml: null,
       legacyConfigForMigration: null,
       filteredSteps: [...MIGRATION_STEPS],
       flags: {
diff --git a/packages/data-context/src/sources/MigrationDataSource.ts b/packages/data-context/src/sources/MigrationDataSource.ts
index 0d2d67790aa3..a5c00f14b086 100644
--- a/packages/data-context/src/sources/MigrationDataSource.ts
+++ b/packages/data-context/src/sources/MigrationDataSource.ts
@@ -96,6 +96,37 @@ export class MigrationDataSource {
     return this.ctx.lifecycleManager.metaState.needsCypressJsonMigration && Boolean(legacyConfigFileExists)
   }
 
+  async getVideoEmbedHtml () {
+    if (this.ctx.coreData.migration.videoEmbedHtml) {
+      return this.ctx.coreData.migration.videoEmbedHtml
+    }
+
+    const versionData = await this.ctx.versions.versionData()
+    const embedOnLink = `https://on.cypress.io/v13-video-embed/${versionData.current.version}`
+
+    debug(`Getting videoEmbedHtml at link: ${embedOnLink}`)
+
+    // Time out request if it takes longer than 3 seconds
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 3000)
+
+    try {
+      const response = await this.ctx.util.fetch(embedOnLink, { method: 'GET', signal: controller.signal })
+      const { videoHtml } = await response.json()
+
+      this.ctx.update((d) => {
+        d.migration.videoEmbedHtml = videoHtml
+      })
+
+      return videoHtml
+    } catch {
+      // fail silently, no user-facing error is needed
+      return null
+    } finally {
+      clearTimeout(timeoutId)
+    }
+  }
+
   async getComponentTestingMigrationStatus () {
     debug('getComponentTestingMigrationStatus: start')
     if (!this.legacyConfig || !this.ctx.currentProject) {
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
index 14dabf0b80a0..4f242eefcb51 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
@@ -43,4 +43,13 @@ export const stubQuery: MaybeResolver<Query> = {
   scaffoldedFiles () {
     return null
   },
+  videoEmbedHtml () {
+    return `<iframe
+      src="https://player.vimeo.com/video/855168407?h=0cbc785eef"
+      class="rounded h-full bg-gray-1000 w-full"
+      frameborder="0"
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowfullscreen
+    />`
+  },
 }
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 0e01dd78f46f..4068e7ea242d 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -2053,6 +2053,9 @@ type Query {
   """Previous versions of cypress and their release date"""
   versions: VersionData
 
+  """Markup for the migration landing page video embed"""
+  videoEmbedHtml: String
+
   """A list of warnings"""
   warnings: [ErrorWrapper!]!
 
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts
index 58a3156d3aa9..c01c4c437536 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts
@@ -146,6 +146,17 @@ export const Query = objectType({
       description: 'Unique node machine identifier for this instance - may be nil if unable to resolve',
       resolve: async (source, args, ctx) => await ctx.coreData.machineId,
     })
+
+    t.string('videoEmbedHtml', {
+      description: 'Markup for the migration landing page video embed',
+      resolve: (source, args, ctx) => {
+        // NOTE: embedded video is not always a part of the v9 - v10 migration experience
+        // in the case of v1x - v13, we want to show an embedded video to users installing the major
+        // version for the first time without going through the steps of the migration resolver, hence
+        // why this lives in the root resolver but the migration context
+        return ctx.migration.getVideoEmbedHtml()
+      },
+    })
   },
   sourceType: {
     module: '@packages/graphql',
diff --git a/packages/launchpad/cypress/e2e/migration.cy.ts b/packages/launchpad/cypress/e2e/migration.cy.ts
index 7b1e21ea05c4..85eb6db7ff2d 100644
--- a/packages/launchpad/cypress/e2e/migration.cy.ts
+++ b/packages/launchpad/cypress/e2e/migration.cy.ts
@@ -1,4 +1,5 @@
 import type { ProjectFixtureDir } from '@tooling/system-tests'
+import type { SinonStub } from 'sinon'
 import { getPathForPlatform } from './support/getPathForPlatform'
 
 // @ts-ignore
@@ -1731,3 +1732,68 @@ describe('Migrate custom config files', () => {
     cy.contains(err)
   })
 })
+
+describe('v13 migration welcome page with video', () => {
+  function stubVideoHtml (): void {
+    cy.withCtx((ctx, o) => {
+      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
+        return '<span>Stubbed Video Content</span>'
+      })
+    })
+  }
+
+  function unstubVideoHtml (): void {
+    cy.withCtx((ctx, o) => {
+      const restoreFn = (ctx.migration.getVideoEmbedHtml as SinonStub).restore
+
+      restoreFn?.()
+    })
+  }
+
+  beforeEach(() => {
+    stubVideoHtml()
+  })
+
+  it('Welcome page should appear if video is not present', () => {
+    unstubVideoHtml()
+
+    cy.scaffoldProject('migration-v12-to-v13')
+    cy.openProject('migration-v12-to-v13')
+    cy.withCtx((ctx, o) => {
+      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
+        return null
+      })
+    })
+
+    cy.visitLaunchpad()
+    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
+    cy.get('[data-cy="video-container"]').should('not.exist')
+  })
+
+  it('Welcome page should appear if video is present', () => {
+    unstubVideoHtml()
+
+    cy.scaffoldProject('migration-v12-to-v13')
+    cy.openProject('migration-v12-to-v13')
+
+    cy.visitLaunchpad()
+    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
+    cy.get('[data-cy="video-container"]').should('be.visible')
+  })
+
+  it('should only hit the video on link once & cache it', () => {
+    unstubVideoHtml()
+
+    cy.scaffoldProject('migration-v12-to-v13')
+    cy.openProject('migration-v12-to-v13')
+
+    cy.visitLaunchpad()
+    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
+
+    cy.visitLaunchpad()
+    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
+    cy.withCtx((ctx, o) => {
+      expect((ctx.util.fetch as SinonStub).args.filter((a) => String(a[0]).includes('v13-video-embed')).length).to.eq(1)
+    })
+  })
+})
diff --git a/packages/launchpad/cypress/e2e/slow-network.cy.ts b/packages/launchpad/cypress/e2e/slow-network.cy.ts
index 849ea912553d..22ad5dbc5b0a 100644
--- a/packages/launchpad/cypress/e2e/slow-network.cy.ts
+++ b/packages/launchpad/cypress/e2e/slow-network.cy.ts
@@ -3,7 +3,14 @@ import type Sinon from 'sinon'
 describe('slow network: launchpad', () => {
   beforeEach(() => {
     cy.scaffoldProject('todos')
+
     cy.withCtx((ctx, o) => {
+      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
+        // stubbing the AbortController is a bit difficult with fetch ctx, so instead
+        // assume the migration handler itself returned null from a timeout
+        return null
+      })
+
       const currentStubbbedFetch = ctx.util.fetch;
 
       (ctx.util.fetch as Sinon.SinonStub).restore()
@@ -12,9 +19,12 @@ describe('slow network: launchpad', () => {
         const dfd = o.pDefer()
 
         o.testState.pendingFetches.push(dfd)
+
+        let resolveTime = 60000
+
         const result = await currentStubbbedFetch(input, init)
 
-        setTimeout(dfd.resolve, 60000)
+        setTimeout(dfd.resolve, resolveTime)
         await dfd.promise
 
         return result
@@ -30,6 +40,8 @@ describe('slow network: launchpad', () => {
     })
   })
 
+  // NOTE: testing the videoEmbedHTML query abortController with the current setup is a bit difficult.
+  // The timeout happens as needed, but is not functioning correctly in this E2E test
   it('loads through to the browser screen when the network is slow', () => {
     cy.loginUser()
     cy.visitLaunchpad()
diff --git a/packages/launchpad/src/Main.vue b/packages/launchpad/src/Main.vue
index d7dc8d4240aa..b2c9fc375dca 100644
--- a/packages/launchpad/src/Main.vue
+++ b/packages/launchpad/src/Main.vue
@@ -6,8 +6,19 @@
     <MajorVersionWelcome
       v-if="shouldShowWelcome"
       class="pt-[64px]"
+      :video-html="videoHtml"
       @clearLandingPage="handleClearLandingPage"
-    />
+    >
+      <template
+        v-if="videoHtml"
+        #video
+      >
+        <div
+          class="major-version-welcome-video"
+          v-html="videoHtml"
+        />
+      </template>
+    </MajorVersionWelcome>
     <div
       v-else
       class="px-[24px] pt-[86px] pb-[24px]"
@@ -134,6 +145,7 @@ fragment MainLaunchpadQueryData on Query {
       id
     }
   }
+  videoEmbedHtml
   isGlobalMode
   ...GlobalPage
   ...ScaffoldedFiles
@@ -213,4 +225,11 @@ const shouldShowWelcome = computed(() => {
   return false
 })
 
+const videoHtml = computed(() => query.data.value?.videoEmbedHtml || '')
+
 </script>
+<style scoped lang="scss">
+.major-version-welcome-video {
+  aspect-ratio: 15/9;
+}
+</style>
diff --git a/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx b/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
index c50dc97ce89d..9efbaf2989ea 100644
--- a/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
+++ b/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
@@ -8,21 +8,17 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
   it('renders expected interactive content', () => {
     const continueStub = cy.stub().as('clearLandingPage')
 
-    cy.mount(<MajorVersionWelcome onClearLandingPage={continueStub} />)
+    cy.mount(<MajorVersionWelcome onClearLandingPage={continueStub}/>)
 
     cy.contains('h1', 'What\'s New in Cypress').should('be.visible')
 
     cy.get('[data-cy="release-highlights"]').within(() => {
-      cy.contains('a[href="https://on.cypress.io/changelog#12-0-0"]', '12.0.0')
-      cy.contains('a[href="https://on.cypress.io/changelog#12-0-0"]', 'changelog')
-      cy.contains('a[href="https://on.cypress.io/migration-guide#Migrating-to-Cypress-12-0"]', 'Migration Guide')
-
-      cy.contains('a[href="https://on.cypress.io/origin"]', 'cy.origin()')
-      cy.contains('a[href="https://on.cypress.io/session"]', 'cy.session()')
-      cy.contains('a[href="https://on.cypress.io/retry-ability"]', 'Retry-ability Guide')
+      cy.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0"]', '13.0.0')
+      cy.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0"]', 'changelog')
     })
 
     cy.get('[data-cy="previous-release-highlights"]').within(() => {
+      cy.contains('a[href="https://on.cypress.io/changelog#12-0-0"]', '12.0.0')
       cy.contains('a[href="https://on.cypress.io/changelog#11-0-0"]', '11.0.0')
       cy.contains('a[href="https://on.cypress.io/changelog#10-0-0"]', '10.0.0')
     })
@@ -37,15 +33,17 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
   })
 
   it('renders correct time for releases and overflows correctly', () => {
-    cy.clock(Date.UTC(2022, 10, 8))
+    cy.clock(Date.UTC(2023, 7, 30))
     cy.mount(<MajorVersionWelcome />)
-    cy.contains('11.0.0 Released just now')
-    cy.contains('10.0.0 Released 5 months ago')
+    cy.contains('13.0.0 Released just now')
+    cy.contains('12.0.0 Released 9 months ago')
+    cy.contains('11.0.0 Released 10 months ago')
+    cy.contains('10.0.0 Released last year')
     cy.tick(interval('1 minute'))
-    cy.contains('11.0.0 Released 1 minute ago')
+    cy.contains('13.0.0 Released 1 minute ago')
     cy.tick(interval('1 month'))
-    cy.contains('11.0.0 Released last month')
-    cy.contains('10.0.0 Released 6 months ago')
+    cy.contains('13.0.0 Released last month')
+    cy.contains('12.0.0 Released 10 months ago')
 
     cy.viewport(1280, 500)
 
diff --git a/packages/launchpad/src/migration/MajorVersionWelcome.vue b/packages/launchpad/src/migration/MajorVersionWelcome.vue
index 1376cbe15b16..c448925daef2 100644
--- a/packages/launchpad/src/migration/MajorVersionWelcome.vue
+++ b/packages/launchpad/src/migration/MajorVersionWelcome.vue
@@ -27,81 +27,69 @@
             class="p-[16px]"
             data-cy="release-highlights"
           >
-            <h1 class="font-medium text-center mb-[28px] tracking-tighter text-[22px] leading-snug text-gray-1000">
+            <h1 class="font-medium text-center mb-[8px] tracking-tighter text-[22px] leading-snug text-gray-1000">
               {{ t('majorVersionWelcome.title') }}
             </h1>
+
+            <div
+              v-if="slots['video']"
+              class="border-transparent rounded mb-6 bg-gray-50/50 border-4px text-center max-w-80vw w-688px overflow-hidden"
+            >
+              <div
+                class="bg-white rounded-t border-4px-gray-500 w-full p-24px"
+                data-cy="video-container"
+              >
+                <slot name="video" />
+              </div>
+            </div>
+
             <div class="mb-[16px]">
               <ExternalLink
-                href="https://on.cypress.io/changelog#12-0-0"
+                href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0"
                 class="font-bold text-indigo-500"
               >
-                12.0.0
+                13.0.0
               </ExternalLink>
               <span class="font-light pl-[10px] text-gray-500 text-[14px]">
-                Released {{ versionReleaseDates['12'] }}
+                Released {{ versionReleaseDates['13'] }}
               </span>
             </div>
             <div class="children:mb-[16px]">
               <p>
-                For a complete list of updates and breaking changes in v12.0.0, please review our
-                <ExternalLink href="https://on.cypress.io/changelog#12-0-0">
+                For a complete list of updates please review our
+                <ExternalLink href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
                   <!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
-                  changelog</ExternalLink>.
-              </p>
-
-              <h2 class="font-bold text-[18px] text-jade-1000">
-                Testing Multi-Origin Workflows
-              </h2>
-
-              <p>
-                Cypress now has full support for testing multiple origins in a single test with the <ExternalLink href="https://on.cypress.io/origin">
-                  <code>cy.origin()</code>
-                </ExternalLink> command! To take a deep-dive into how this works, read our
-
-                <ExternalLink href="https://on.cypress.io/cy-origin-journey">
+                  changelog</ExternalLink>. To take a deep-dive into this release, read our <ExternalLink href="https://on.cypress.io/cypress-13-release?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
                   <!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
                   blog post</ExternalLink>.
               </p>
 
-              <h2 class="font-bold mt-[24px] mb-[16px] text-[18px] text-jade-1000">
-                Test Isolation
+              <h2 class="font-bold text-[18px] text-jade-1000">
+                Test Replay
               </h2>
 
               <p>
-                Cypress now ensures each test runs in a clean browser context by default. We now clear the page, <code>cookies</code>, <code>localStorage</code>, and <code>sessionStorage</code> before each test to guide developers towards writing independent tests from the start.
+                Test Replay brings the debugging experience you know and love from the Cypress app directly into your recorded tests in Cypress Cloud. Previously, trying to debug failures and flake in CI was painful and time consuming with only videos & screenshots. Test Replay provides a way to inspect the DOM, network events, and console logs of your application from your tests exactly as they ran in CI.
               </p>
-              <p>
-                If your existing tests relied on a previous test to run successfully, you might need to make some modifications to your test suite. See the
 
-                <ExternalLink href="https://on.cypress.io/migration-guide#Migrating-to-Cypress-12-0">
-                  Migration Guide
-                </ExternalLink>
-
-                for more details on what you can expect.
+              <p>
+                Test Replay is available in all Cypress Cloud plans. To start using Test Replay, simply record a run to Cypress Cloud. Learn more in our <ExternalLink href="https://on.cypress.io/test-replay?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
+                  <!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
+                  documentation</ExternalLink>.
               </p>
 
               <h2 class="font-bold mt-[24px] mb-[16px] text-[18px] text-jade-1000">
-                We Now Store The Browser Context, So You Don’t Have To
+                Changes to video defaults
               </h2>
 
               <p>
-                The <ExternalLink href="https://on.cypress.io/session">
-                  <code>cy.session()</code>
-                </ExternalLink> command complements test isolation by providing a way to save and share browser contexts between tests and specs in a single run on the same machine.
+                <InlineCodeFragment>video</InlineCodeFragment> and <InlineCodeFragment>videoCompression</InlineCodeFragment> are now set to <InlineCodeFragment>false</InlineCodeFragment> by default. Recording and compressing videos can be resource intensive, often impacting the duration of tests running in CI. Test Replay now serves as the primary replacement for debugging via video. We’ve changed these video options to be opt-in so you can configure recording video based on your needs.
               </p>
 
-              <h2 class="font-bold mt-[24px] mb-[16px] text-[18px] text-jade-1000">
-                Detaching Ourselves From Detached Dom Errors
-              </h2>
-
               <p>
-                We have made enhancements to how Cypress manages DOM element resolution to reduce the likelihood of hitting the dreaded detached DOM errors due to maintaining stale DOM references. We've updated our
-
-                <ExternalLink href="https://on.cypress.io/retry-ability">
-                  Retry-ability Guide
-                </ExternalLink>
-
-                with all the details if you'd like to learn more.
+                The <InlineCodeFragment>shouldUploadVideoOnPass</InlineCodeFragment> option is no longer available. This option was mostly used to skip video compression for unused videos which is now skipped by default. If you want to control which videos are saved locally or uploaded to Cypress Cloud, see our <ExternalLink href="https://on.cypress.io/migration-guide?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0">
+                  documentation
+                </ExternalLink> for our recommended workaround.
               </p>
             </div>
           </div>
@@ -113,6 +101,31 @@
             <h2 class="font-bold mt-[24px] mb-[12px] text-[14px] text-gray-600">
               Previous release highlights
             </h2>
+            <div class="pb-[8px]">
+              <ExternalLink
+                href="https://on.cypress.io/changelog#12-0-0"
+                class="font-bold text-indigo-500"
+              >
+                12.0.0
+              </ExternalLink>
+              <span class="font-light pl-[10px] text-gray-500 text-[14px]">
+                Released {{ versionReleaseDates['12'] }}
+              </span>
+            </div>
+            <p class="text-[14px] leading-[20px]">
+              We made <ExternalLink href="https://on.cypress.io/origin">
+                <InlineCodeFragment>cy.origin()</InlineCodeFragment>
+              </ExternalLink>, <ExternalLink href="https://on.cypress.io/session">
+                <InlineCodeFragment>cy.session()</InlineCodeFragment>
+              </ExternalLink>, and test isolation generally available to allow users to test multiple origin workflows while allowing users to rehydrate test state in a consistent manner.
+              <br>
+              <br>
+              Read about the v12.0.0 changes in our
+              <ExternalLink href="https://on.cypress.io/cypress-12-release">
+                <!--eslint-disable-next-line vue/multiline-html-element-content-newline-->
+                blog post</ExternalLink>.
+            </p>
+            <br>
             <div class="pb-[8px]">
               <ExternalLink
                 href="https://on.cypress.io/changelog#11-0-0"
@@ -188,8 +201,9 @@
 import Button from '@cy/components/Button.vue'
 import { useI18n } from '@cy/i18n'
 import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
+import InlineCodeFragment from '@cy/components/InlineCodeFragment.vue'
 import { useScroll, useElementSize, useTimeAgo } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, useSlots } from 'vue'
 
 const { t } = useI18n()
 
@@ -197,6 +211,7 @@ const scroller = ref<HTMLElement | null>(null)
 const wrapper = ref<HTMLElement | null>(null)
 const { arrivedState, y: scrollerY } = useScroll(scroller)
 const { height: wrapperHeight } = useElementSize(wrapper)
+const slots = useSlots()
 
 const emit = defineEmits<{
   (eventName: 'clearLandingPage', value: void): void
@@ -212,6 +227,7 @@ const versionReleaseDates = computed(() => {
     '10': useTimeAgo(Date.UTC(2022, 5, 1)).value,
     '11': useTimeAgo(Date.UTC(2022, 10, 8)).value,
     '12': useTimeAgo(Date.UTC(2022, 11, 6)).value,
+    '13': useTimeAgo(Date.UTC(2023, 7, 30)).value,
   }
 })
 
diff --git a/packages/types/src/constants.ts b/packages/types/src/constants.ts
index fcc99956557a..e1df518af270 100644
--- a/packages/types/src/constants.ts
+++ b/packages/types/src/constants.ts
@@ -25,7 +25,7 @@ export const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm'] as const
 
 // Note: ONLY change this in code that will be merged into a release branch
 // for a new major version of Cypress
-export const MAJOR_VERSION_FOR_CONTENT = '12'
+export const MAJOR_VERSION_FOR_CONTENT = '13'
 
 export const RUN_ALL_SPECS_KEY = '__all' as const
 
diff --git a/system-tests/projects/migration-v12-to-v13/cypress.config.js b/system-tests/projects/migration-v12-to-v13/cypress.config.js
new file mode 100644
index 000000000000..2bc2cffcff93
--- /dev/null
+++ b/system-tests/projects/migration-v12-to-v13/cypress.config.js
@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents (on, config) {
+      // implement node event listeners here
+    },
+  },
+  supportFile: false,
+})
diff --git a/system-tests/projects/migration-v12-to-v13/cypress/e2e/spec.cy.js b/system-tests/projects/migration-v12-to-v13/cypress/e2e/spec.cy.js
new file mode 100644
index 000000000000..cdb3c3ecd844
--- /dev/null
+++ b/system-tests/projects/migration-v12-to-v13/cypress/e2e/spec.cy.js
@@ -0,0 +1,5 @@
+describe('migration v12 to v13', () => {
+  it('passes', () => {
+    expect(true).to.be.true
+  })
+})