@uppy/dashboard: add new `autoOpen` option (#5001)

* Add autoOpenView option that defaults to meta

* <Dashboard/> - deprecate `autoOpenFileEditor`, use `autoOpen` instead

* tests - account for the case where `opts` are undefined

* Update packages/@uppy/dashboard/src/Dashboard.jsx

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* types - properly deprecate option `autoOpenFileEditor`

* everywhere - rename "fileEditor" => "imageEditor"

* <DashboardModal/> - refactor `props` passing

* types - copypaste types

* Dashboard.tsx - autoOpen: `false` => `null`

* change the default value too

---------

Co-authored-by: Evgenia Karunus <lakesare@gmail.com>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>

packages/@uppy/dashboard/src/Dashboard.tsx

@@ -150,6 +150,8 @@ export interface DashboardOptions<M extends Meta, B extends Body>
   theme?: 'auto' | 'dark' | 'light'
   trigger?: string
   width?: string | number
+  autoOpen?: 'metaEditor' | 'imageEditor' | null
+  /** @deprecated use option autoOpen instead */
   autoOpenFileEditor?: boolean
   disabled?: boolean
   disableLocalFiles?: boolean
@@ -195,6 +197,7 @@ const defaultOptions = {
   showNativePhotoCameraButton: false,
   showNativeVideoCameraButton: false,
   theme: 'light',
+  autoOpen: null,
   autoOpenFileEditor: false,
   disabled: false,
   disableLocalFiles: false,
@@ -243,7 +246,17 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
   private removeDragOverClassTimeout: ReturnType<typeof setTimeout>
 
   constructor(uppy: Uppy<M, B>, opts?: DashboardOptions<M, B>) {
-    super(uppy, { ...defaultOptions, ...opts })
+    // support for the legacy `autoOpenFileEditor` option,
+    // TODO: we can remove this code when we update the Uppy major version
+    let autoOpen: DashboardOptions<M, B>['autoOpen']
+    if (!opts) {
+      autoOpen = null
+    } else if (opts.autoOpen === undefined) {
+      autoOpen = opts.autoOpenFileEditor ? 'imageEditor' : null
+    } else {
+      autoOpen = opts.autoOpen
+    }
+    super(uppy, { ...defaultOptions, ...opts, autoOpen })
     this.id = this.opts.id || 'Dashboard'
     this.title = 'Dashboard'
     this.type = 'orchestrator'
@@ -939,11 +952,11 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
 
     const { metaFields } = this.getPluginState()
     const isMetaEditorEnabled = metaFields && metaFields.length > 0
-    const isFileEditorEnabled = this.canEditFile(firstFile)
+    const isImageEditorEnabled = this.canEditFile(firstFile)
 
-    if (isMetaEditorEnabled) {
+    if (isMetaEditorEnabled && this.opts.autoOpen === 'metaEditor') {
       this.toggleFileCard(true, firstFile.id)
-    } else if (isFileEditorEnabled) {
+    } else if (isImageEditorEnabled && this.opts.autoOpen === 'imageEditor') {
       this.openFileEditor(firstFile)
     }
   }
@@ -985,7 +998,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
       this.el!.addEventListener('keydown', this.handleKeyDownInInline)
     }
 
-    if (this.opts.autoOpenFileEditor) {
+    if (this.opts.autoOpen) {
       this.uppy.on('files-added', this.#openFileEditorWhenFilesAdded)
     }
   }
@@ -1018,7 +1031,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
       this.el!.removeEventListener('keydown', this.handleKeyDownInInline)
     }
 
-    if (this.opts.autoOpenFileEditor) {
+    if (this.opts.autoOpen) {
       this.uppy.off('files-added', this.#openFileEditorWhenFilesAdded)
     }
   }

packages/@uppy/dashboard/types/index.d.ts

@@ -65,6 +65,8 @@ export interface DashboardOptions extends Options {
   theme?: 'auto' | 'dark' | 'light'
   trigger?: string
   width?: string | number
+  autoOpen?: 'metaEditor' | 'imageEditor' | null
+  /** @deprecated use option autoOpen instead */
   autoOpenFileEditor?: boolean
   disabled?: boolean
   disableLocalFiles?: boolean

packages/@uppy/react/src/DashboardModal.js

@@ -37,90 +37,15 @@ class DashboardModal extends Component {
   }
 
   installPlugin () {
-    const {
-      id = 'react:DashboardModal',
-      uppy,
-      target,
-      open,
-      onRequestClose,
-      closeModalOnClickOutside,
-      disablePageScrollWhenModalOpen,
-      inline,
-      plugins, // eslint-disable-line no-shadow
-      width,
-      height,
-      showProgressDetails,
-      note,
-      metaFields, // eslint-disable-line no-shadow
-      proudlyDisplayPoweredByUppy,
-      autoOpenFileEditor,
-      animateOpenClose,
-      browserBackButtonClose,
-      closeAfterFinish,
-      disableStatusBar,
-      disableInformer,
-      disableThumbnailGenerator,
-      disableLocalFiles,
-      disabled,
-      hideCancelButton,
-      hidePauseResumeButton,
-      hideProgressAfterFinish,
-      hideRetryButton,
-      hideUploadButton,
-      showLinkToFileUploadResult,
-      showRemoveButtonAfterComplete,
-      showSelectedFiles,
-      waitForThumbnailsBeforeUpload,
-      fileManagerSelectionType,
-      theme,
-      thumbnailType,
-      thumbnailWidth,
-      locale, // eslint-disable-line no-shadow
-    } = this.props
+    const { id='react:DashboardModal', target=this.container, open, onRequestClose, 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)
@@ -146,6 +71,7 @@ class DashboardModal extends Component {
   }
 }
 
+/* eslint-disable react/no-unused-prop-types */
 DashboardModal.propTypes = {
   uppy: uppyPropType.isRequired,
   target: typeof window !== 'undefined' ? PropTypes.instanceOf(window.HTMLElement) : PropTypes.any,
@@ -161,7 +87,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,
@@ -186,7 +112,7 @@ DashboardModal.propTypes = {
   thumbnailWidth: PropTypes.number,
   locale,
 }
-// Must be kept in sync with @uppy/dashboard/src/Dashboard.jsx.
+// Must be kept in sync with @uppy/dashboard/src/Dashboard.tsx.
 DashboardModal.defaultProps = {
   metaFields: [],
   plugins: [],
@@ -217,7 +143,7 @@ DashboardModal.defaultProps = {
   showRemoveButtonAfterComplete: false,
   browserBackButtonClose: false,
   theme: 'light',
-  autoOpenFileEditor: false,
+  autoOpen: false,
   disabled: false,
   disableLocalFiles: false,