fix: drag and drop to be correct directory (#18400)

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
Co-authored-by: Tim Griesser <tgriesser10@gmail.com>

Author: 3 people

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

@@ -110,21 +110,33 @@ export class ProjectActions {
   }
 
   async addProject (args: MutationAddProjectArgs) {
-    const dirStat = await this.ctx.fs.stat(args.path)
+    const projectRoot = await this.getDirectoryPath(args.path)
 
-    if (!dirStat.isDirectory()) {
-      throw new Error(`Cannot add ${args.path} as a project, it is not a directory`)
-    }
-
-    const found = this.projects.find((x) => x.projectRoot === args.path)
+    const found = this.projects.find((x) => x.projectRoot === projectRoot)
 
     if (!found) {
-      this.projects.push({ projectRoot: args.path })
-      this.api.insertProjectToCache(args.path)
+      this.projects.push({ projectRoot })
+      this.api.insertProjectToCache(projectRoot)
     }
 
     if (args.open) {
-      await this.setActiveProject(args.path)
+      await this.setActiveProject(projectRoot)
+    }
+  }
+
+  private async getDirectoryPath (projectRoot: string) {
+    try {
+      const { dir, base } = path.parse(projectRoot)
+      const fullPath = path.join(dir, base)
+      const dirStat = await this.ctx.fs.stat(fullPath)
+
+      if (dirStat.isDirectory()) {
+        return fullPath
+      }
+
+      return dir
+    } catch (exception) {
+      throw Error(`Cannot add ${projectRoot} to projects as it does not exist in the file system`)
     }
   }
 

packages/frontend-shared/src/locales/en-US.json

@@ -86,7 +86,7 @@
     "empty": {
       "title": "Welcome to Cypress!",
       "helper": "Add your first project below to start testing with Cypress.",
-      "dropText": "Drag your project here or {0}",
+      "dropText": "Drag your project directory here or {0}",
       "browseManually": "browse manually."
     },
     "searchPlaceholder": "Search Projects",

packages/launchpad/src/global/GlobalEmpty.vue

@@ -47,7 +47,6 @@
 </template>
 
 <script lang="ts" setup>
-import { getDirectoryPath } from '../utils/getDirectoryPath'
 import { useI18n } from '@cy/i18n'
 import IconPlaceholder from '~icons/icons8/circle-thin'
 import { FileSelector, Dropzone } from 'vue3-file-selector'
@@ -62,9 +61,12 @@ const emits = defineEmits<{
   (e: 'addProject', value: string): void
 }>()
 
+type WebkitFile = File & { path: string }
 watch(files, (newVal) => {
   if (newVal.length) {
-    emits('addProject', getDirectoryPath(newVal as FileList))
+    const file = newVal[0] as WebkitFile
+
+    emits('addProject', file.path)
   }
 })
 

packages/launchpad/src/global/GlobalPageHeader.vue

@@ -27,7 +27,6 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { getDirectoryPath } from '../utils/getDirectoryPath'
 import Button from '@cy/components/Button.vue'
 import Input from '@cy/components/Input.vue'
 import IconPlus from '~icons/mdi/plus'
@@ -52,9 +51,22 @@ function handleButtonClick () {
 
 function handleFileSelection (e: Event) {
   const target = e.target as HTMLInputElement
-  const dirPath = getDirectoryPath(target.files)
+  const files = target.files
+  const path = getFilePath(files)
 
-  emits('addProject', dirPath)
+  emits('addProject', path)
+}
+
+type WebkitFile = File & { path: string }
+function getFilePath (files: FileList | null) {
+  if (files) {
+    const file = files[0] as WebkitFile
+    const path = file?.path ?? ''
+
+    return path
+  }
+
+  return ''
 }
 
 const localValue = useModelWrapper(props, emits, 'modelValue')