[Lona Studio] Add easy component duplication

[Devin Abbott]

Summary

When creating a new component, it's common to duplicate an exist component as a starting point. There's an option for this in the app menu under File > Duplicate, but it would be more convenient/discoverable if it were a context menu item in the File Navigator:

Let's add a new Duplicate As... menu item when right-clicking components in the File Navigator. Upon clicking the menu item, we will:

1. Show a dialog prompting the user to choose the filename for the new component
2. Copy the selected file to the chosen filename, and open the new file as a document

Proposed Implementation

1. We'll be adding a new menu item to the File Navigator here: https://github.com/airbnb/Lona/blob/9ee49dfbb9d3dce6309c90b93c51c6949cf4f214/studio/LonaStudio/Workspace/FileNavigator.swift#L188

Note that:

• just like for the Delete menu item, we don't want to show this menu item for the root path
• unlike for Delete, this Duplicate As... menu item should only be available for components, not directories, assets, .json files, or anything else.

2. Upon clicking the menu item, we should show a "save" dialog for choosing a filename. For an example of how to show a "save" a dialog, see: https://github.com/airbnb/Lona/blob/9ee49dfbb9d3dce6309c90b93c51c6949cf4f214/studio/LonaStudio/Workspace/WorkspaceViewController.swift#L659-L674

   If possible, we should prevent the user from choosing a file path outside of the root directory, or show an Alert if they do and prevent the operation.

3. Copy the selected file to the chosen destination. The easiest way to copy a file is probably FileManager.default.copyItem.

4. Open the new file. The method we need to call is already passed into the File Navigator as onAction: https://github.com/airbnb/Lona/blob/9ee49dfbb9d3dce6309c90b93c51c6949cf4f214/studio/LonaStudio/Workspace/WorkspaceViewController.swift#L399

[Volodymyr Klymenko]

I'd like to work on it 🙋‍♂️

[Volodymyr Klymenko]

Here is my progress so far:

It pretty much works as it's supposed to work. The only small thing the needs to be implemented is:
newly created file should be selected in the file navigator.

At the moment, the app opens the duplicated component in the Component Editor after creating it, but the file selection in the file navigator is outdated. How can I update the selected file in the file navigator? I researched the codebase in order to find something similar, but I don't have much success so far. @dabbott

[Devin Abbott]

This looks great! You're right that it would be better if the newly created file were selected, but I think we can merge this as-is and make a separate issue for that after. There are already a bunch of other cases where new files should be selected but aren't.

The file navigator is a separate repo, https://github.com/dabbott/FileTree, and I haven't implemented updating the selection yet. I think that could be an interesting issue for you to try, but I'm not quite sure how it should work yet. I'll take a look this weekend. If it turns out to be super simple I'll just publish a new version that supports selection, otherwise I'll make a follow-up issue.