Merge branch '10.0-release' into fix-migration-ui

packages/data-context/src/actions/MigrationActions.ts

@@ -103,6 +103,10 @@ export class MigrationActions {
     }
   }
 
+  async closeManualRenameWatcher () {
+    await this.ctx.migration.closeManualRenameWatcher()
+  }
+
   async assertSuccessfulConfigMigration (configExtension: 'js' | 'ts' = 'js') {
     const actual = formatConfig(await this.ctx.actions.file.readFileInProject(`cypress.config.${configExtension}`))
     const expected = formatConfig(await this.ctx.actions.file.readFileInProject(`expected-cypress.config.${configExtension}`))

packages/data-context/src/sources/MigrationDataSource.ts

@@ -22,6 +22,9 @@ import {
 } from './migration'
 
 import type { FilePart } from './migration/format'
+import Debug from 'debug'
+
+const debug = Debug('cypress:data-context:sources:MigrationDataSource')
 
 export interface MigrationFile {
   testingType: TestingType
@@ -66,7 +69,7 @@ export class MigrationDataSource {
   hasE2ESpec: boolean = flags.hasE2ESpec
   hasPluginsFile: boolean = flags.hasPluginsFile
 
-  private componentTestingMigrationWatcher?: chokidar.FSWatcher
+  private componentTestingMigrationWatcher: chokidar.FSWatcher | null = null
   componentTestingMigrationStatus?: ComponentTestingMigrationStatus
   private _oldConfigPromise: Promise<OldCypressConfig> | null = null
 
@@ -102,7 +105,9 @@ export class MigrationDataSource {
   }
 
   async getComponentTestingMigrationStatus () {
+    debug('getComponentTestingMigrationStatus: start')
     const config = await this.parseCypressConfig()
+
     const componentFolder = getComponentFolder(config)
 
     if (!config || !this.ctx.currentProject) {
@@ -116,15 +121,20 @@ export class MigrationDataSource {
       return null
     }
 
+    debug('getComponentTestingMigrationStatus: componentFolder', componentFolder)
+
     if (!this.componentTestingMigrationWatcher) {
-      const onFileMoved = (status: ComponentTestingMigrationStatus) => {
+      debug('getComponentTestingMigrationStatus: initializing watcher')
+      const onFileMoved = async (status: ComponentTestingMigrationStatus) => {
         this.componentTestingMigrationStatus = status
+        debug('getComponentTestingMigrationStatus: file moved %O', status)
 
         if (status.completed) {
-          this.componentTestingMigrationWatcher?.close()
+          await this.componentTestingMigrationWatcher?.close()
+          this.componentTestingMigrationWatcher = null
         }
 
-        // TODO(lachlan): is this the right plcae to use the emitter?
+        // TODO(lachlan): is this the right place to use the emitter?
         this.ctx.deref.emitter.toLaunchpad()
       }
 
@@ -137,6 +147,7 @@ export class MigrationDataSource {
 
       this.componentTestingMigrationStatus = status
       this.componentTestingMigrationWatcher = watcher
+      debug('getComponentTestingMigrationStatus: watcher initialized. Status: %o', status)
     }
 
     if (!this.componentTestingMigrationStatus) {
@@ -153,6 +164,7 @@ export class MigrationDataSource {
 
     const config = await this.parseCypressConfig()
 
+    debug('supportFilesForMigrationGuide: config %O', config)
     if (!await shouldShowRenameSupport(this.ctx.currentProject, config)) {
       return null
     }
@@ -164,8 +176,12 @@ export class MigrationDataSource {
     try {
       const supportFiles = await supportFilesForMigration(this.ctx.currentProject)
 
+      debug('supportFilesForMigrationGuide: supportFiles %O', supportFiles)
+
       return supportFiles
-    } catch {
+    } catch (err) {
+      debug('supportFilesForMigrationGuide: err %O', err)
+
       return null
     }
   }
@@ -305,6 +321,14 @@ export class MigrationDataSource {
     return this._step
   }
 
+  async closeManualRenameWatcher () {
+    if (this.componentTestingMigrationWatcher) {
+      debug('setStep: stopping watcher')
+      await this.componentTestingMigrationWatcher.close()
+      this.componentTestingMigrationWatcher = null
+    }
+  }
+
   setStep (step: MIGRATION_STEP) {
     this._step = step
   }

packages/data-context/src/sources/migration/utils.ts

@@ -69,14 +69,14 @@ export interface ComponentTestingMigrationStatus {
   completed: boolean
 }
 
-export function initComponentTestingMigration (
+export async function initComponentTestingMigration (
   projectRoot: string,
   componentFolder: string,
   testFiles: string[],
   onFileMoved: (status: ComponentTestingMigrationStatus) => void,
 ): Promise<{
   status: ComponentTestingMigrationStatus
-  watcher: chokidar.FSWatcher
+  watcher: chokidar.FSWatcher | null
 }> {
   const watchPaths = testFiles.map((glob) => {
     return path.join(componentFolder, glob)
@@ -88,19 +88,33 @@ export function initComponentTestingMigration (
     },
   )
 
-  let filesToBeMoved: Map<string, FileToBeMigratedManually> = globby.sync(watchPaths, {
+  let filesToBeMoved: Map<string, FileToBeMigratedManually> = (await globby(watchPaths, {
     cwd: projectRoot,
-  }).reduce<Map<string, FileToBeMigratedManually>>((acc, relative) => {
+  })).reduce<Map<string, FileToBeMigratedManually>>((acc, relative) => {
     acc.set(relative, { relative, moved: false })
 
     return acc
   }, new Map())
 
+  if (filesToBeMoved.size === 0) {
+    // this should not happen as the step should be hidden in this case
+    // but files can have been moved manually before clicking next
+    return {
+      status: {
+        files: filesToBeMoved,
+        completed: true,
+      },
+      watcher: null,
+    }
+  }
+
   watcher.on('unlink', (unlinkedPath) => {
     const file = filesToBeMoved.get(unlinkedPath)
 
     if (!file) {
-      throw Error(`Watcher incorrectly triggered while watching ${file}`)
+      throw Error(`Watcher incorrectly triggered ${unlinkedPath}
+      while watching ${Array.from(filesToBeMoved.keys()).join(', ')}
+      projectRoot: ${projectRoot}`)
     }
 
     file.moved = true

packages/frontend-shared/cypress/fixtures/config.json

@@ -103,11 +103,6 @@
     "from": "default",
     "field": "experimentalSourceRewriting"
   },
-  {
-    "value": false,
-    "from": "default",
-    "field": "experimentalStudio"
-  },
   {
     "value": false,
     "from": "default",

packages/graphql/schemas/schema.graphql

@@ -760,6 +760,9 @@ type Mutation {
   """Check if a give spec file will match the project spec pattern"""
   matchesSpecPattern(specFile: String!): Boolean!
 
+  """While migrating to 10+ skip manual rename step"""
+  migrateCloseManualRenameWatcher: Boolean
+
   """Merges the component testing config in cypress.config.{js,ts}"""
   migrateComponentTesting: Query
 

packages/graphql/src/schemaTypes/objectTypes/gql-Migration.ts

@@ -170,6 +170,11 @@ export const Migration = objectType({
       description: 'List of files needing manual conversion',
       type: ManualMigration,
       resolve: async (source, args, ctx) => {
+        // avoid starting the watcher when not on this step
+        if (ctx.migration.step !== 'renameManual') {
+          return null
+        }
+
         const status = await ctx.migration.getComponentTestingMigrationStatus()
 
         if (!status) {

packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts

@@ -508,6 +508,16 @@ export const mutation = mutationType({
       },
     })
 
+    t.field('migrateCloseManualRenameWatcher', {
+      description: 'While migrating to 10+ skip manual rename step',
+      type: 'Boolean',
+      resolve: async (_, args, ctx) => {
+        await ctx.actions.migration.closeManualRenameWatcher()
+
+        return true
+      },
+    })
+
     t.field('finishedRenamingComponentSpecs', {
       description: 'user has finished migration component specs - move to next step',
       type: Query,

packages/launchpad/src/migration/MigrationWizard.vue

@@ -4,7 +4,7 @@
       {{ t('migration.wizard.title') }}
     </h1>
     <p
-      class="text-center mx-42px mt-12px mb-32px text-body-gray-600 text-18px"
+      class="mx-42px mt-12px text-center mb-32px text-body-gray-600 text-18px"
     >
       {{ t('migration.wizard.description') }}
     </p>
@@ -134,12 +134,17 @@
         </template>
       </MigrationStep>
     </template>
+    <Spinner
+      v-else
+      class="mx-auto mt-100px"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeMount, ref } from 'vue'
 import { gql, useMutation, useQuery } from '@urql/vue'
+import Spinner from '@cy/components/Spinner.vue'
 import Button from '@cy/components/Button.vue'
 import ArrowRightIcon from '~icons/cy/arrow-right_x16.svg'
 import MigrationStep from './fragments/MigrationStep.vue'
@@ -196,6 +201,7 @@ mutation MigrationWizard_Start {
     migration {
       filteredSteps {
         id
+        ...MigrationStep
       }
     }
   }
@@ -217,6 +223,7 @@ gql`
 mutation MigrationWizard_RenameSpecs($skip: Boolean, $before: [String!], $after: [String!]) {
   migrateRenameSpecs(skip: $skip, before: $before, after: $after) {
     migration {
+      ...RenameSpecsManual
       filteredSteps {
         id
         isCurrentStep

packages/launchpad/src/migration/RenameSpecsManual.vue

@@ -73,13 +73,14 @@
 </template>
 
 <script lang="ts" setup>
+import { onUnmounted } from 'vue'
 import CodeTag from '@cy/components/CodeTag.vue'
 import { useI18n } from '@cy/i18n'
 import MigrationTitle from './fragments/MigrationTitle.vue'
 import MigrationList from './fragments/MigrationList.vue'
 import MigrationListItem from './fragments/MigrationListItem.vue'
-import { gql } from '@urql/vue'
-import type { RenameSpecsManualFragment } from '../generated/graphql'
+import { gql, useMutation } from '@urql/vue'
+import { RenameSpecsManualFragment, RenameSpecsManual_CloseWatcherDocument } from '../generated/graphql'
 
 gql`
 fragment RenameSpecsManual on Migration {
@@ -94,9 +95,21 @@ fragment RenameSpecsManual on Migration {
   }
 }`
 
+gql`
+mutation RenameSpecsManual_CloseWatcher {
+  migrateCloseManualRenameWatcher
+}
+`
+
 const props = defineProps<{
   gql: RenameSpecsManualFragment
 }>()
 
+const closeWatcherMutation = useMutation(RenameSpecsManual_CloseWatcherDocument)
+
+onUnmounted(() => {
+  closeWatcherMutation.executeMutation({})
+})
+
 const { t } = useI18n()
 </script>