@uppy/dashboard: add new autoOpen option

[subvertallchris]

Based on our conversation in #4991, this adds a new optional option to the Dashboard, autoOpenView with type autoOpenView?: 'meta' | 'editor'. It defaults to meta when not provided.

I did not complete the second request in the PR, a new "meta-editor:start" event. I can see how to make the change but I'd like someone with more context, experience with Uppy, and authority to make this change. As far as I can tell, it will require reworking the existing events in a way that I could consider a breaking change and not suitable for inclusion in this PR. I'll comment on that issue with notes about it.

---

Fixes #4991

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/Dashboard.js b/packages/@uppy/dashboard/lib/Dashboard.js
index d32a8cf..5829f94 100644
--- a/packages/@uppy/dashboard/lib/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/Dashboard.js
@@ -70,6 +70,7 @@ const defaultOptions = {
   showNativePhotoCameraButton: false,
   showNativeVideoCameraButton: false,
   theme: "light",
+  autoOpen: null,
   autoOpenFileEditor: false,
   disabled: false,
   disableLocalFiles: false,
@@ -90,9 +91,18 @@ var _addSupportedPluginIfNoTarget = _classPrivateFieldLooseKey("addSupportedPlug
 export default class Dashboard extends UIPlugin {
   constructor(uppy, _opts) {
     var _this$opts4, _this$opts4$doneButto, _this$opts5, _this$opts5$onRequest;
+    let autoOpen;
+    if (!_opts) {
+      autoOpen = null;
+    } else if (_opts.autoOpen === undefined) {
+      autoOpen = _opts.autoOpenFileEditor ? "imageEditor" : null;
+    } else {
+      autoOpen = _opts.autoOpen;
+    }
     super(uppy, {
       ...defaultOptions,
       ..._opts,
+      autoOpen,
     });
     Object.defineProperty(this, _disabledNodes, {
       writable: true,
@@ -621,10 +631,10 @@ export default class Dashboard extends UIPlugin {
           metaFields,
         } = this.getPluginState();
         const isMetaEditorEnabled = metaFields && metaFields.length > 0;
-        const isFileEditorEnabled = this.canEditFile(firstFile);
-        if (isMetaEditorEnabled) {
+        const isImageEditorEnabled = this.canEditFile(firstFile);
+        if (isMetaEditorEnabled && this.opts.autoOpen === "metaEditor") {
           this.toggleFileCard(true, firstFile.id);
-        } else if (isFileEditorEnabled) {
+        } else if (isImageEditorEnabled && this.opts.autoOpen === "imageEditor") {
           this.openFileEditor(firstFile);
         }
       },
@@ -664,7 +674,7 @@ export default class Dashboard extends UIPlugin {
       if (this.opts.inline) {
         this.el.addEventListener("keydown", this.handleKeyDownInInline);
       }
-      if (this.opts.autoOpenFileEditor) {
+      if (this.opts.autoOpen) {
         this.uppy.on(
           "files-added",
           _classPrivateFieldLooseBase(this, _openFileEditorWhenFilesAdded)[_openFileEditorWhenFilesAdded],
@@ -700,7 +710,7 @@ export default class Dashboard extends UIPlugin {
       if (this.opts.inline) {
         this.el.removeEventListener("keydown", this.handleKeyDownInInline);
       }
-      if (this.opts.autoOpenFileEditor) {
+      if (this.opts.autoOpen) {
         this.uppy.off(
           "files-added",
           _classPrivateFieldLooseBase(this, _openFileEditorWhenFilesAdded)[_openFileEditorWhenFilesAdded],
diff --git a/packages/@uppy/react/lib/DashboardModal.js b/packages/@uppy/react/lib/DashboardModal.js
index 489a16c..9374119 100644
--- a/packages/@uppy/react/lib/DashboardModal.js
+++ b/packages/@uppy/react/lib/DashboardModal.js
@@ -37,85 +37,17 @@ class DashboardModal extends Component {
   installPlugin() {
     const {
       id = "react:DashboardModal",
-      uppy,
-      target,
+      target = this.container,
       open,
       onRequestClose,
-      closeModalOnClickOutside,
-      disablePageScrollWhenModalOpen,
-      inline,
-      plugins,
-      width,
-      height,
-      showProgressDetails,
-      note,
-      metaFields,
-      proudlyDisplayPoweredByUppy,
-      autoOpenFileEditor,
-      animateOpenClose,
-      browserBackButtonClose,
-      closeAfterFinish,
-      disableStatusBar,
-      disableInformer,
-      disableThumbnailGenerator,
-      disableLocalFiles,
-      disabled,
-      hideCancelButton,
-      hidePauseResumeButton,
-      hideProgressAfterFinish,
-      hideRetryButton,
-      hideUploadButton,
-      showLinkToFileUploadResult,
-      showRemoveButtonAfterComplete,
-      showSelectedFiles,
-      waitForThumbnailsBeforeUpload,
-      fileManagerSelectionType,
-      theme,
-      thumbnailType,
-      thumbnailWidth,
-      locale,
+      uppy,
     } = this.props;
     const options = {
+      ...this.props,
       id,
       target,
-      closeModalOnClickOutside,
-      disablePageScrollWhenModalOpen,
-      inline,
-      plugins,
-      width,
-      height,
-      showProgressDetails,
-      note,
-      metaFields,
-      proudlyDisplayPoweredByUppy,
-      autoOpenFileEditor,
-      animateOpenClose,
-      browserBackButtonClose,
-      closeAfterFinish,
-      disableStatusBar,
-      disableInformer,
-      disableThumbnailGenerator,
-      disableLocalFiles,
-      disabled,
-      hideCancelButton,
-      hidePauseResumeButton,
-      hideProgressAfterFinish,
-      hideRetryButton,
-      hideUploadButton,
-      showLinkToFileUploadResult,
-      showRemoveButtonAfterComplete,
-      showSelectedFiles,
-      waitForThumbnailsBeforeUpload,
-      fileManagerSelectionType,
-      theme,
-      thumbnailType,
-      thumbnailWidth,
-      locale,
       onRequestCloseModal: onRequestClose,
     };
-    if (!options.target) {
-      options.target = this.container;
-    }
     delete options.uppy;
     uppy.use(DashboardPlugin, options);
     this.plugin = uppy.getPlugin(options.id);
@@ -157,7 +89,7 @@ DashboardModal.propTypes = {
   note: PropTypes.string,
   metaFields,
   proudlyDisplayPoweredByUppy: PropTypes.bool,
-  autoOpenFileEditor: PropTypes.bool,
+  autoOpen: PropTypes.oneOf(["imageEditor", "metaEditor", null]),
   animateOpenClose: PropTypes.bool,
   browserBackButtonClose: PropTypes.bool,
   closeAfterFinish: PropTypes.bool,
@@ -211,7 +143,7 @@ DashboardModal.defaultProps = {
   showRemoveButtonAfterComplete: false,
   browserBackButtonClose: false,
   theme: "light",
-  autoOpenFileEditor: false,
+  autoOpen: false,
   disabled: false,
   disableLocalFiles: false,
   open: undefined,

[subvertallchris]

Ping @lakesare

[lakesare]

@Murderlon, could you take a look at this PR please - it concerns the autoOpenFileEditor/autoOpen options we discussed in Slack.

The context is: turns out people sometimes rely on auto opening the image editor in particular, because that's their means of enforcing the image aspect ratio (they suppress the CANCEL button in various ways).

This PR deprecates the boolean autoOpenFileEditor option in a backwards-compatible way, and adds the autoOpen option that lets us specify what to open.

[Murderlon]

Makes sense 👍

This also needs to docs PR in https://github.com/transloadit/uppy.io/

[Murderlon]

Writing the docs I realised it's weird that I have to write "use fileEditor if @uppy/image-editor is installed". Why don't we name that option imageEditor?

[lakesare]

@Murderlon, we discussed this with Artur in Slack:

Evgenia: As far as I know we don't have any other file editors and don't plan to add any - might it be a good idea to rename autoOpenFileEditor to autoOpenImageEditor"?

Artur: Probably yes. I thought we might have other editors, like adding a signature to PDF, highlight text etc, maybe edit a text file. But yes, the reality today is, there is only an image editor and the button text is customizable should the need arise.

I think we should leave it as fileEditor for the time being - I can see the possibility of the editors for new file formats getting added, especially now that's we're integrating uppy with some ai functionality.

[Murderlon]

Anytime a decision is made because we might do something in the future, a tiny premature optimisation red flag is raised in my mind. Maybe we never build it, maybe we find out that it's actually weird to magically repurpose fileEditor to open different things depending on the file and we prefer to do it with explicit options. What if people only want to auto open for images and not for all our future file editors. We don't know.

That doesn't mean we must change fileEditor, but I'd rather base our reasoning on what we know. And with what I see now I prefer to be explicit and call it what it does, imageEditor.

[lakesare]

@Murderlon, agreed.
Introduction of a new option is a good time to change the names, so I'll do it in this PR.

[Murderlon]

Bit of unfortunate timing but migrating dashboard to TS PR was just merged so there is a conflict.