dashboard: use unique-er IDs for embedded plugins, fixes #702

CHANGELOG.md

@@ -119,6 +119,7 @@ What we need to do to release Uppy 1.0
 - [ ] docs: improve on React docs https://uppy.io/docs/react/, add small example for each component maybe? Dashboard, DragDrop, ProgressBar? No need to make separate pages for all of them, just headings on the same page. Right now docs are confusing, because they focus on DashboardModal. Also problems with syntax highlight on https://uppy.io/docs/react/dashboard-modal/.
 - [ ] docs: add note in docs or solve the .run() issue, see #756
 - [ ] core: add `uppy.getFiles()` method (@goto-bus-stop / #770)
+- [x] dashboard: fix duplicate plugin IDs, see #702 (@goto-bus-stop)
 
 ## 0.24.2
 

src/core/Core.js

@@ -822,12 +822,9 @@ class Uppy {
 
     let existsPluginAlready = this.getPlugin(pluginId)
     if (existsPluginAlready) {
-      let msg = `Already found a plugin named '${existsPluginAlready.id}'.
-        Tried to use: '${pluginId}'.
-        Uppy is currently limited to running one of every plugin.
-        Share your use case with us over at
-        https://github.com/transloadit/uppy/issues/
-        if you want us to reconsider.`
+      let msg = `Already found a plugin named '${existsPluginAlready.id}'. ` +
+        `Tried to use: '${pluginId}'.\n` +
+        `Uppy plugins must have unique 'id' options. See https://uppy.io/docs/plugins/#id.`
       throw new Error(msg)
     }
 

src/plugins/Dashboard/index.js

@@ -521,6 +521,7 @@ module.exports = class Dashboard extends Plugin {
 
     if (!this.opts.disableStatusBar) {
       this.uppy.use(StatusBar, {
+        id: `${this.id}:StatusBar`,
         target: this,
         hideUploadButton: this.opts.hideUploadButton,
         showProgressDetails: this.opts.showProgressDetails,
@@ -531,12 +532,14 @@ module.exports = class Dashboard extends Plugin {
 
     if (!this.opts.disableInformer) {
       this.uppy.use(Informer, {
+        id: `${this.id}:Informer`,
         target: this
       })
     }
 
     if (!this.opts.disableThumbnailGenerator) {
       this.uppy.use(ThumbnailGenerator, {
+        id: `${this.id}:ThumbnailGenerator`,
         thumbnailWidth: this.opts.thumbnailWidth
       })
     }

src/plugins/Dashboard/index.test.js

@@ -0,0 +1,14 @@
+const Core = require('../../core')
+const DashboardPlugin = require('./index')
+const StatusBarPlugin = require('../StatusBar')
+
+describe('Dashboard', () => {
+  it('can safely be added together with the StatusBar without id conflicts', () => {
+    const core = new Core()
+    core.use(StatusBarPlugin)
+
+    expect(() => {
+      core.use(DashboardPlugin, { inline: false })
+    }).not.toThrow()
+  })
+})