@uppy/dashboard: auto discover and install plugins without target

e2e/clients/react/App.jsx

@@ -4,13 +4,18 @@ import Uppy from '@uppy/core'
 import React, { useState } from 'react'
 import { Dashboard, DashboardModal, DragDrop } from '@uppy/react'
 import ThumbnailGenerator from '@uppy/thumbnail-generator'
+import RemoteSources from '@uppy/remote-sources'
 
 import '@uppy/core/dist/style.css'
 import '@uppy/dashboard/dist/style.css'
 import '@uppy/drag-drop/dist/style.css'
 
 export default function App () {
-  const uppyDashboard = new Uppy({ id: 'dashboard' })
+  const RemoteSourcesOptions = {
+    companionUrl: 'http://companion.uppy.io',
+    sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
+  }
+  const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, { ...RemoteSourcesOptions })
   const uppyModal = new Uppy({ id: 'modal' })
   const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
   const [open, setOpen] = useState(false)

e2e/cypress/integration/react.spec.ts

@@ -13,6 +13,16 @@ describe('@uppy/react', () => {
       .each((element) => expect(element).attr('src').to.include('blob:'))
   })
 
+  it('should render Dashboard with Remote Sources plugin pack', () => {
+    const sources = ['My Device', 'Google Drive', 'OneDrive', 'Unsplash', 'Zoom', 'Link']
+    cy.get('#dashboard .uppy-DashboardTab-name')
+      .each((item, index, list) => {
+        expect(list).to.have.length(6)
+        // Returns the current element from the loop
+        expect(Cypress.$(item).text()).to.eq(sources[index])
+      })
+  })
+
   it('should render Modal in React and show thumbnails', () => {
     cy.get('#open').click()
     cy.get('@modal-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true })

packages/@uppy/core/src/Uppy.js

@@ -1245,6 +1245,8 @@ class Uppy {
     }
     plugin.install()
 
+    this.emit('plugin-added', plugin)
+
     return this
   }
 

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

@@ -749,6 +749,7 @@ export default class Dashboard extends UIPlugin {
     this.startListeningToResize()
     document.addEventListener('paste', this.handlePasteOnBody)
 
+    this.uppy.on('plugin-added', this.#autoDiscoverPlugins)
     this.uppy.on('plugin-remove', this.removeTarget)
     this.uppy.on('file-added', this.hideAllPanels)
     this.uppy.on('dashboard:modal-closed', this.hideAllPanels)
@@ -782,6 +783,7 @@ export default class Dashboard extends UIPlugin {
     document.removeEventListener('paste', this.handlePasteOnBody)
 
     window.removeEventListener('popstate', this.handlePopState, false)
+    this.uppy.off('plugin-added', this.#autoDiscoverPlugins)
     this.uppy.off('plugin-remove', this.removeTarget)
     this.uppy.off('file-added', this.hideAllPanels)
     this.uppy.off('dashboard:modal-closed', this.hideAllPanels)
@@ -1015,10 +1017,29 @@ export default class Dashboard extends UIPlugin {
     })
   }
 
-  discoverProviderPlugins = () => {
-    this.uppy.iteratePlugins((plugin) => {
-      if (plugin && !plugin.target && plugin.opts && plugin.opts.target === this.constructor) {
-        this.addTarget(plugin)
+  #addSpecifiedPlugins = () => {
+    const plugins = this.opts.plugins || []
+
+    plugins.forEach((pluginID) => {
+      const plugin = this.uppy.getPlugin(pluginID)
+      if (plugin) {
+        plugin.mount(this, plugin)
+      } else {
+        this.uppy.log(`[Uppy] Dashboard could not find plugin '${pluginID}', make sure to uppy.use() the plugins you are specifying`, 'warning')
+      }
+    })
+  }
+
+  #autoDiscoverPlugins = () => {
+    // Only these types belong on the Dashboard,
+    // we wouldn’t want to try and mount Compressor or Tus, for example.
+    const typesAllowed = ['acquirer', 'editor']
+    this.uppy.iteratePlugins(plugin => {
+      if (plugin && !plugin.opts?.target && typesAllowed.includes(plugin.type)) {
+        const pluginAlreadyAdded = this.getPluginState().targets.some(
+          installedPlugin => plugin.id === installedPlugin.id,
+        )
+        if (!pluginAlreadyAdded) this.addTarget(plugin)
       }
     })
   }
@@ -1055,15 +1076,6 @@ export default class Dashboard extends UIPlugin {
       this.mount(target, this)
     }
 
-    const plugins = this.opts.plugins || []
-
-    plugins.forEach((pluginID) => {
-      const plugin = this.uppy.getPlugin(pluginID)
-      if (plugin) {
-        plugin.mount(this, plugin)
-      }
-    })
-
     if (!this.opts.disableStatusBar) {
       this.uppy.use(StatusBar, {
         id: `${this.id}:StatusBar`,
@@ -1111,7 +1123,8 @@ export default class Dashboard extends UIPlugin {
       this.darkModeMediaQuery.addListener(this.handleSystemDarkModeChange)
     }
 
-    this.discoverProviderPlugins()
+    this.#addSpecifiedPlugins()
+    this.#autoDiscoverPlugins()
     this.initEvents()
   }
 

packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx

@@ -384,7 +384,7 @@ export default class ProviderView extends View {
         // and that will allow the user to start the upload, so we need to make sure we have
         // finished all async operations before we add any file
         // see https://github.com/transloadit/uppy/pull/4384
-        this.plugin.uppy.log('Adding remote provider files')
+        this.plugin.uppy.log('Adding files from a remote provider')
         this.plugin.uppy.addFiles(newFiles.map((file) => this.getTagFile(file)))
 
         this.plugin.setPluginState({ filterInput: '' })

packages/@uppy/remote-sources/src/index.js

@@ -1,5 +1,4 @@
 import { BasePlugin } from '@uppy/core'
-import Dashboard from '@uppy/dashboard'
 import Dropbox from '@uppy/dropbox'
 import GoogleDrive from '@uppy/google-drive'
 import Instagram from '@uppy/instagram'
@@ -34,11 +33,10 @@ export default class RemoteSources extends BasePlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = this.opts.id || 'RemoteSources'
-    this.type = 'acquirer'
+    this.type = 'preset'
 
     const defaultOptions = {
       sources: Object.keys(availablePlugins),
-      target: Dashboard,
     }
     this.opts = { ...defaultOptions, ...opts }