From f78d38358988e84c41902ca259e0e254084f6063 Mon Sep 17 00:00:00 2001
From: AtofStryker <bglesias@gmail.com>
Date: Wed, 8 Jan 2025 16:43:41 -0500
Subject: [PATCH] chore: update welcome screen for Cypress 14

---
 .../data-context/src/data/coreDataShape.ts    |   2 -
 .../src/sources/MigrationDataSource.ts        |  31 -----
 .../support/mock-graphql/stubgql-Query.ts     |  10 --
 packages/graphql/schemas/schema.graphql       |   3 -
 .../src/schemaTypes/objectTypes/gql-Query.ts  |  11 --
 .../launchpad/cypress/e2e/migration.cy.ts     | 122 ------------------
 .../launchpad/cypress/e2e/slow-network.cy.ts  |   7 -
 packages/launchpad/src/Main.vue               |   3 -
 .../src/migration/MajorVersionWelcome.cy.tsx  |  23 ++--
 .../src/migration/MajorVersionWelcome.vue     |  79 +++++-------
 10 files changed, 45 insertions(+), 246 deletions(-)

diff --git a/packages/data-context/src/data/coreDataShape.ts b/packages/data-context/src/data/coreDataShape.ts
index 3e37c90a35ee..658ffced2aad 100644
--- a/packages/data-context/src/data/coreDataShape.ts
+++ b/packages/data-context/src/data/coreDataShape.ts
@@ -94,7 +94,6 @@ export interface WizardDataShape {
 export interface MigrationDataShape {
   // TODO: have the model of migration here
   step: MigrationStep
-  videoEmbedHtml: string | null
   legacyConfigForMigration?: LegacyCypressConfigJson | null
   filteredSteps: MigrationStep[]
   flags: {
@@ -225,7 +224,6 @@ 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 a5c00f14b086..0d2d67790aa3 100644
--- a/packages/data-context/src/sources/MigrationDataSource.ts
+++ b/packages/data-context/src/sources/MigrationDataSource.ts
@@ -96,37 +96,6 @@ 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 8a2b9860bf48..14dabf0b80a0 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
@@ -43,14 +43,4 @@ export const stubQuery: MaybeResolver<Query> = {
   scaffoldedFiles () {
     return null
   },
-  videoEmbedHtml () {
-    return `<iframe
-      src="https://player.vimeo.com/video/855168407?h=0cbc785eef"
-      title="Video about what is new in Cypress"
-      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 0faec7ad8153..88a903053c51 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -2074,9 +2074,6 @@ 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 04e3aa7ae97a..d040b2cfbdba 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts
@@ -146,17 +146,6 @@ 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 efd360e06656..94d3e96610e9 100644
--- a/packages/launchpad/cypress/e2e/migration.cy.ts
+++ b/packages/launchpad/cypress/e2e/migration.cy.ts
@@ -1,5 +1,4 @@
 import type { ProjectFixtureDir } from '@tooling/system-tests'
-import type { SinonStub } from 'sinon'
 import { getPathForPlatform } from './support/getPathForPlatform'
 
 // @ts-ignore
@@ -1661,124 +1660,3 @@ describe('Migrate custom config files', () => {
     cy.contains(err)
   })
 })
-
-describe('v13 migration welcome page with video', () => {
-  it('Welcome page should appear if video is not present (failure)', () => {
-    cy.withCtx((ctx, o) => {
-      const originalGetVideoEmbedHtml = ctx.migration.getVideoEmbedHtml
-
-      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
-        const mockMigrationSourceGetVideoEmbedHtmlCTX = {
-          ctx: {
-            coreData: {
-              migration: {
-                videoEmbedHtml: undefined,
-              },
-            },
-            versions: {
-              versionData: () => {
-                return {
-                  current: {
-                    version: '13.0.0',
-                  },
-                }
-              },
-            },
-            util: {
-              fetch: () => {
-                throw new Error('kaboom')
-              },
-            },
-          },
-        }
-
-        return originalGetVideoEmbedHtml.apply(mockMigrationSourceGetVideoEmbedHtmlCTX)
-      })
-    })
-
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    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 not present (timeout)', () => {
-    cy.withCtx((ctx, o) => {
-      const originalGetVideoEmbedHtml = ctx.migration.getVideoEmbedHtml
-
-      o.sinon.stub(ctx.migration, 'getVideoEmbedHtml').callsFake(async () => {
-        const mockMigrationSourceGetVideoEmbedHtmlCTX = {
-          ctx: {
-            coreData: {
-              migration: {
-                videoEmbedHtml: undefined,
-              },
-            },
-            versions: {
-              versionData: () => {
-                return {
-                  current: {
-                    version: '13.0.0',
-                  },
-                }
-              },
-            },
-            util: {
-              fetch: () => {
-                return new Promise((resolve, reject) => {
-                  setTimeout(() => {
-                    // the request should time out before this body is returned
-                    resolve({
-                      json () {
-                        return {
-                          videoHtml: '<span>Stubbed Video Content</span>',
-                        }
-                      },
-                    })
-                  }, 4000)
-                })
-              },
-            },
-          },
-        }
-
-        return originalGetVideoEmbedHtml.apply(mockMigrationSourceGetVideoEmbedHtmlCTX)
-      })
-    })
-
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    cy.contains(cy.i18n.majorVersionWelcome.title, {
-      timeout: 8000,
-    }).should('be.visible')
-
-    cy.get('[data-cy="video-container"]').should('not.exist')
-  })
-
-  it('Welcome page should appear if video is present', () => {
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    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', () => {
-    cy.scaffoldProject('migration-v12-to-v13')
-    cy.openProject('migration-v12-to-v13')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    cy.contains(cy.i18n.majorVersionWelcome.title).should('be.visible')
-
-    cy.visitLaunchpad({ showWelcome: true })
-    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 5f5ebbbb7c0d..b7133dcfc0ba 100644
--- a/packages/launchpad/cypress/e2e/slow-network.cy.ts
+++ b/packages/launchpad/cypress/e2e/slow-network.cy.ts
@@ -5,12 +5,6 @@ describe('slow network: launchpad', () => {
     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 currentStubbedFetch = ctx.util.fetch;
 
       (ctx.util.fetch as Sinon.SinonStub).restore()
@@ -40,7 +34,6 @@ 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()
diff --git a/packages/launchpad/src/Main.vue b/packages/launchpad/src/Main.vue
index fdba61598ce4..e162825c99e1 100644
--- a/packages/launchpad/src/Main.vue
+++ b/packages/launchpad/src/Main.vue
@@ -148,7 +148,6 @@ fragment MainLaunchpadQueryData on Query {
       id
     }
   }
-  videoEmbedHtml
   isGlobalMode
   ...GlobalPage
   ...ScaffoldedFiles
@@ -278,8 +277,6 @@ const shouldShowWelcome = computed(() => {
   return false
 })
 
-const videoHtml = computed(() => query.data.value?.videoEmbedHtml || '')
-
 </script>
 <style scoped lang="scss">
 .major-version-welcome-video {
diff --git a/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx b/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
index ff136e3e5121..a3e8840f442a 100644
--- a/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
+++ b/packages/launchpad/src/migration/MajorVersionWelcome.cy.tsx
@@ -8,17 +8,17 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
   it('renders expected interactive content', () => {
     const continueStub = cy.stub().as('clearLandingPage')
 
-    // @ts-expect-error
     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?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.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v14#14-0-0"]', '14.0.0')
+      cy.contains('a[href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v14#14-0-0"]', 'changelog')
     })
 
     cy.get('[data-cy="previous-release-highlights"]').within(() => {
+      cy.contains('a[href="https://on.cypress.io/changelog#13-0-0"]', '13.0.0')
       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')
@@ -34,17 +34,18 @@ describe('<MajorVersionWelcome />', { viewportWidth: 1280, viewportHeight: 1400
   })
 
   it('renders correct time for releases and overflows correctly', () => {
-    cy.clock(Date.UTC(2023, 7, 29))
+    cy.clock(Date.UTC(2025, 0, 10))
     cy.mount(<MajorVersionWelcome />)
-    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.contains('14.0.0 Released just now')
+    cy.contains('13.0.0 Released last year')
+    cy.contains('12.0.0 Released 2 years ago')
+    cy.contains('11.0.0 Released 2 years ago')
+    cy.contains('10.0.0 Released 3 years ago')
     cy.tick(interval('1 minute'))
-    cy.contains('13.0.0 Released 1 minute ago')
+    cy.contains('14.0.0 Released 1 minute ago')
     cy.tick(interval('1 month'))
-    cy.contains('13.0.0 Released last month')
-    cy.contains('12.0.0 Released 10 months ago')
+    cy.contains('14.0.0 Released last month')
+    cy.contains('13.0.0 Released last year')
 
     cy.viewport(1280, 500)
 
diff --git a/packages/launchpad/src/migration/MajorVersionWelcome.vue b/packages/launchpad/src/migration/MajorVersionWelcome.vue
index c6242cacadba..7b49db2dfdec 100644
--- a/packages/launchpad/src/migration/MajorVersionWelcome.vue
+++ b/packages/launchpad/src/migration/MajorVersionWelcome.vue
@@ -31,65 +31,29 @@
               {{ 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?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v13#13-0-0"
+                href="https://on.cypress.io/changelog?utm_source=Binary%3A+App&utm_medium=splash-page&utm_campaign=v14#14-0-0"
                 class="font-bold text-indigo-500"
               >
-                13.0.0
+                14.0.0
               </ExternalLink>
               <span class="font-light pl-[10px] text-gray-500 text-[14px]">
-                Released {{ versionReleaseDates['13'] }}
+                Released {{ versionReleaseDates['14'] }}
               </span>
             </div>
             <div class="children:mb-[16px]">
               <p>
-                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>. 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>.
+                We’ve improved performance of component testing and added support for new framework and dev server versions.
               </p>
-
-              <h2 class="font-bold text-[18px] text-jade-1000">
-                Test Replay
-              </h2>
-
               <p>
-                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.
+                This release also includes breaking changes to <InlineCodeFragment>cy.origin</InlineCodeFragment> that are necessary to handle
+                Chrome’s deprecation of <InlineCodeFragment>document.domain</InlineCodeFragment>, this should fix issues for some users in recent Chrome versions. Support for older versions of Node.js, Linux distributions, browsers and component testing frameworks and dev servers is also removed.
               </p>
-
               <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">
+                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=v14#14-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">
-                Changes to video defaults
-              </h2>
-
-              <p>
-                <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>
-
-              <p>
-                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.
+                  changelog</ExternalLink>.
               </p>
             </div>
           </div>
@@ -101,6 +65,29 @@
             <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#13-0-0"
+                class="font-bold text-indigo-500"
+              >
+                13.0.0
+              </ExternalLink>
+              <span class="font-light pl-[10px] text-gray-500 text-[14px]">
+                Released {{ versionReleaseDates['13'] }}
+              </span>
+            </div>
+            <p class="text-[14px] leading-[20px]">
+              We introduced <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-->
+                Test Replay </ExternalLink> and made changes to default values for video configuration.
+              <br>
+              <br>
+              Read about the v13.0.0 changes in our
+              <ExternalLink href="https://on.cypress.io/cypress-13-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#12-0-0"
@@ -201,7 +188,7 @@ 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, useSlots } from 'vue'
+import { computed, ref } from 'vue'
 
 const { t } = useI18n()
 
@@ -209,7 +196,6 @@ 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
@@ -226,6 +212,7 @@ const versionReleaseDates = computed(() => {
     '11': useTimeAgo(Date.UTC(2022, 10, 8)).value,
     '12': useTimeAgo(Date.UTC(2022, 11, 6)).value,
     '13': useTimeAgo(Date.UTC(2023, 7, 29)).value,
+    '14': useTimeAgo(Date.UTC(2025, 0, 10)).value,
   }
 })