MetaEditor + ImageEditor - new state machine logic

[lakesare]

Fixes #4878, implicitly fixes #4442.

Implements "file list ⟷ metaEditor ⟷ imageEditor" state machine we discussed in Slack.

Tested with all combinations of:

• .use(ImageEditor, { target: Dashboard }) present/absent
• autoOpenFileEditor true/false
• metaFields present/absent

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/Dashboard.js b/packages/@uppy/dashboard/lib/Dashboard.js
index d5a44dd..fc6a331 100644
--- a/packages/@uppy/dashboard/lib/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/Dashboard.js
@@ -139,6 +139,24 @@ export default class Dashboard extends UIPlugin {
         this.uppy.getPlugin(editor.id).selectFile(file);
       });
     };
+    this.closeFileEditor = () => {
+      const {
+        metaFields,
+      } = this.getPluginState();
+      const isMetaEditorEnabled = metaFields && metaFields.length > 0;
+      if (isMetaEditorEnabled) {
+        this.setPluginState({
+          showFileEditor: false,
+          activeOverlayType: "FileCard",
+        });
+      } else {
+        this.setPluginState({
+          showFileEditor: false,
+          fileCardFor: null,
+          activeOverlayType: "AddFiles",
+        });
+      }
+    };
     this.saveFileEditor = () => {
       const {
         targets,
@@ -147,7 +165,7 @@ export default class Dashboard extends UIPlugin {
       editors.forEach(editor => {
         this.uppy.getPlugin(editor.id).save();
       });
-      this.hideAllPanels();
+      this.closeFileEditor();
     };
     this.openModal = () => {
       const {
@@ -552,7 +570,14 @@ export default class Dashboard extends UIPlugin {
       writable: true,
       value: files => {
         const firstFile = files[0];
-        if (this.canEditFile(firstFile)) {
+        const {
+          metaFields,
+        } = this.getPluginState();
+        const isMetaEditorEnabled = metaFields && metaFields.length > 0;
+        const isFileEditorEnabled = this.canEditFile(firstFile);
+        if (isMetaEditorEnabled) {
+          this.toggleFileCard(true, firstFile.id);
+        } else if (isFileEditorEnabled) {
           this.openFileEditor(firstFile);
         }
       },
@@ -578,7 +603,6 @@ export default class Dashboard extends UIPlugin {
       this.uppy.on("plugin-remove", this.removeTarget);
       this.uppy.on("file-added", this.hideAllPanels);
       this.uppy.on("dashboard:modal-closed", this.hideAllPanels);
-      this.uppy.on("file-editor:complete", this.hideAllPanels);
       this.uppy.on("complete", this.handleComplete);
       this.uppy.on(
         "files-added",
@@ -615,7 +639,6 @@ export default class Dashboard extends UIPlugin {
       this.uppy.off("plugin-remove", this.removeTarget);
       this.uppy.off("file-added", this.hideAllPanels);
       this.uppy.off("dashboard:modal-closed", this.hideAllPanels);
-      this.uppy.off("file-editor:complete", this.hideAllPanels);
       this.uppy.off("complete", this.handleComplete);
       this.uppy.off(
         "files-added",
@@ -771,6 +794,7 @@ export default class Dashboard extends UIPlugin {
         activePickerPanel: pluginState.activePickerPanel,
         showFileEditor: pluginState.showFileEditor,
         saveFileEditor: this.saveFileEditor,
+        closeFileEditor: this.closeFileEditor,
         disableInteractiveElements: this.disableInteractiveElements,
         animateOpenClose: this.opts.animateOpenClose,
         isClosing: pluginState.isClosing,
diff --git a/packages/@uppy/dashboard/lib/components/EditorPanel.js b/packages/@uppy/dashboard/lib/components/EditorPanel.js
index 279bdc5..3008be5 100644
--- a/packages/@uppy/dashboard/lib/components/EditorPanel.js
+++ b/packages/@uppy/dashboard/lib/components/EditorPanel.js
@@ -4,7 +4,7 @@ function EditorPanel(props) {
   const file = props.files[props.fileCardFor];
   const handleCancel = () => {
     props.uppy.emit("file-editor:cancel", file);
-    props.hideAllPanels();
+    props.closeFileEditor();
   };
   return h(
     "div",

[Murderlon]

LGTM