feat(launchpad): Directory Upload in Global Mode

[marktnoonan]

• Closes UNIFY-270

How has the user experience changed?

No visible change. But directory upload is now possible by

• Dragging a directory into the drop zone
• Clicking the drop zone
• Interacting with the "browse manually" button

How to test

Upload a project folder by dragging it to the drop zone or manually adding it. A hidden <div> element with the test id upload-name should be populated with the name of your project.

Additional Information

When dragging, this allows users to drag any file in, not specifically directories. If the manual upload feature is used, this does currently only allow directories. Not sure if that issue for drag is something we want to dig into in this PR. It may be better handled when we add the general handling of uploaded files and go to whatever error state is needed when the upload was not a cypress project.

PR Tasks

• Have tests been added/updated?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[CLAassistant]

All committers have signed the CLA.

[JessicaSachs]

This looks good to me, but I have to check it out and run it manually still.

[ImCesar]

Currently we add a project with the directories path. Technically I don't think it's the biggest deal if we can only select a file because we can chop off the file and send the directory path to the addProject mutation. From a DX perspective it may be a bit confusing on what file the developer is supposed to drag into this field. Does it really matter if we chop off the file from the path? Is it better to go with the cypress.json file for consistency?

[lmiller1990]

Some comments

[lmiller1990]

Do we need a null check here (maybe, maybe not?)

[marktnoonan]

When the selectProject function is up and running, here we should probably validate that the directory that was dragged in is actually a Cypress project, and go to an error state if it's not.

Though if we don't have that flow in another ticket yet, maybe now's the time to pin down that interaction?

[lmiller1990]

If we want to avoid potentially accidentally selecting another file input, we could scope the query to this component with a template ref:

<template>
  <div ref="root">
    <!-- ... -->
  </div>
</template>

<script setup>
const root = ref<HTMLDivElement>()

onMounted(() => {
  root.value?.querySelector('input')
})

</script>

[marktnoonan]

Yeah this seems good, done

[marktnoonan]

@ImCesar In this situation people will be able to drag in a directory, I edited the PR to use that wording as it was unclear before. The main issue is that currently, using the drag feature, they could also upload any other regular file. During manual upload, they can only pick directories, so it's going to force them to pick the project folder.

But I could totally see somebody dragging a cypress.json file in as a 'project'. We might need to explain somewhere that a "project" means "directory containing a cypress.json", or whatever our exact rules are. Or just, if we get a path that's not a directory, check the parent like you suggest.

That validation can happen here and get some feedback to the user about why their upload didn't work, though it may go well with the ticket that implements the addProject functionality, since I guess there you are already doing things that would reveal if the path was not a real project.

[lmiller1990]

Weird, not sure why circle is not running here. Code looks good though.