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

arturi · 2023-03-03T16:59:26Z

Why this change?

People are confused by having to use a plugin without a target and then listing it in Dashboard’s plugin=['Audio', 'GoogleDrive'...] array.
RemoteSources currently don't work with @uppy/react. RemoteSources sets target: Dashboard by default, this PR removes it.
Reduces boilerplate.
Order of plugins doesn’t matter: can use Dashboard plugins before Dashboard.

This idea was discussed when React components were first introduced: #170 (comment).

It seems that discoverProviderPlugins() doesn’t work currently, or I can’t understand how it worked.

With this PR you can use target manually still (the old way), or let the Dashboard auto-mount plugins (the new way).

Before:

uppy.use(Dashboard)
  .use(Webcam, { target: Dashboard })
  .use(ImageEditor, { target: Dashboard })
  .use(ScreenCapture, { target: Dashboard })

After:

uppy.use(ScreenCapture)
  .use(Dashboard)
  .use(Webcam)
  .use(ImageEditor)

Todo:

check unmount

mifi

nice stuff! requires a major release, right?

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

mifi · 2023-03-06T05:23:09Z

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

@@ -38,7 +37,6 @@ export default class RemoteSources extends BasePlugin {

    const defaultOptions = {
      sources: Object.keys(availablePlugins),
-      target: Dashboard,


this is a breaking change, right?

Yes, for RemoteSources unfortunately. But not for the Dashboard. But if you update RemoteSources and not the Dashboard, it will stop working, true.

Can we make that opt-in somehow? Maybe by adding an option ignoreTarget: true, and we would remove both options in the next major, wdyt?

Hope we can figure out something without adding more options. Either by letting plugins do breaking changes whenever they want or by skipping this feature in remote sources for now.

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

Murderlon

Nice experimentation! I like the idea but have some questions:

This forcibly sets the target? What if you have 3 plugins you want on dashboard and 1 elsewhere, will the last one be forced added too? How do you prevent this from happening?
Does this deprecate the plugins array?

After discussions I think we would need tests too:

e2e test in every framework
unit tests for different cases (such as in my first question)

And of course docs :)

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

arturi · 2023-03-06T10:27:25Z

This forcibly sets the target? What if you have 3 plugins you want on dashboard and 1 elsewhere, will the last one be forced added too?

No, this only sets the target id you didn‘t specify a target:
if (plugin && !plugin.opts?.target && typesAllowed.includes(plugin.type))

Does this deprecate the plugins array?

No, trying to keep it.

e2e test in every framework

Sounds like an overkill just for this PR / change. We could make sure existing tests account for some plugins with no target.

Murderlon · 2023-03-06T10:54:14Z

Sounds like an overkill just for this PR / change. We could make sure existing tests account for some plugins with no target.

Since we shippped remote sources without testing frameworks I'd say it's quite important. But don't worry, it's quite trivial to add!

Add the plugin here:

uppy/e2e/clients/react/App.jsx

Line 13 in 222e511

const uppyDashboard = new Uppy({ id: 'dashboard' })

Check whether it rendered correctly, similar to this:

uppy/e2e/cypress/integration/react.spec.ts

Lines 9 to 14 in 222e511

    
           it('should render Dashboard in React and show thumbnails', () => { 
        
             cy.get('@dashboard-input').selectFile(['cypress/fixtures/images/cat.jpg', 'cypress/fixtures/images/traffic.jpg'], { force:true }) 
        
             cy.get('#dashboard .uppy-Dashboard-Item-previewImg') 
        
               .should('have.length', 2) 
        
               .each((element) => expect(element).attr('src').to.include('blob:')) 
        
           })

Can be done in couple minutes.

arturi · 2023-03-06T10:59:45Z

Can be done in couple minutes.

Thanks for the example! But what about Vue, Angular, Svelte, you mentioned every framework? Seems like that one is only React? We do have Vue too.

Murderlon · 2023-03-06T11:03:46Z

We have the same setup for Vue so that's also a quick addition. Perhaps we can leave it at that for now. Just good to know whether it works in something else than React too.

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

Co-authored-by: Mikael Finstad <finstaden@gmail.com>

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

…it/uppy into dashboard-auto-install

Murderlon

Code LGTM. Have we tested what happens when you use multiple Uppy instances and multiple Dashboards on the page? Or one drag-drop and one dashboard which share a plugin?

arturi · 2023-10-12T22:19:01Z

Checked with multiple instances, plugins were installed to the correct instances.

* main: @uppy/vue: export FileInput (#4736) examples: update `server.py` (#4732) @uppy/aws-s3-multipart: fix `uploadURL` when using `PUT` (#4701) @uppy/dashboard: auto discover and install plugins without target (#4343) e2e: upgrade Cypress (#4731) @uppy/core: mark the package as side-effect free (#4730) Bump postcss from 8.4.16 to 8.4.31 (#4723) meta: test with the latest versions of Node.js (#4729)

| Package | Version | Package | Version | | ------------------------- | ------- | ------------------------- | ------- | | @uppy/angular | 0.6.1 | @uppy/progress-bar | 3.0.4 | | @uppy/audio | 1.1.4 | @uppy/provider-views | 3.6.0 | | @uppy/aws-s3 | 3.4.0 | @uppy/react | 3.1.4 | | @uppy/aws-s3-multipart | 3.8.0 | @uppy/remote-sources | 1.1.0 | | @uppy/box | 2.1.4 | @uppy/screen-capture | 3.1.3 | | @uppy/companion | 4.10.0 | @uppy/status-bar | 3.2.5 | | @uppy/companion-client | 3.5.0 | @uppy/store-default | 3.0.5 | | @uppy/compressor | 1.0.5 | @uppy/store-redux | 3.0.5 | | @uppy/core | 3.6.0 | @uppy/svelte | 3.1.1 | | @uppy/dashboard | 3.6.0 | @uppy/thumbnail-generator | 3.0.6 | | @uppy/drop-target | 2.0.2 | @uppy/transloadit | 3.3.2 | | @uppy/dropbox | 3.1.4 | @uppy/tus | 3.3.2 | | @uppy/facebook | 3.1.3 | @uppy/unsplash | 3.2.3 | | @uppy/file-input | 3.0.4 | @uppy/url | 3.3.4 | | @uppy/form | 3.0.3 | @uppy/utils | 5.5.2 | | @uppy/golden-retriever | 3.1.1 | @uppy/vue | 1.1.0 | | @uppy/google-drive | 3.3.0 | @uppy/webcam | 3.3.4 | | @uppy/image-editor | 2.2.2 | @uppy/xhr-upload | 3.4.2 | | @uppy/informer | 3.0.4 | @uppy/zoom | 2.1.3 | | @uppy/instagram | 3.1.3 | uppy | 3.18.0 | | @uppy/onedrive | 3.1.4 | | | - @uppy/aws-s3-multipart: fix `TypeError` (Antoine du Hamel / #4748) - meta: Bump tough-cookie from 4.1.2 to 4.1.3 (dependabot[bot] / #4750) - meta: example: simplify code by using built-in `throwIfAborted` (Antoine du Hamel / #4749) - @uppy/aws-s3-multipart: pass `signal` as separate arg for backward compat (Antoine du Hamel / #4746) - meta: fix TS integration (Antoine du Hamel / #4741) - meta: fix js2ts check (Antoine du Hamel) - meta: add support for TypeScript plugins (Antoine du Hamel / #4640) - @uppy/vue: export FileInput (mdxiaohu / #4736) - meta: examples: update `server.py` (codehero7386 / #4732) - @uppy/aws-s3-multipart: fix `uploadURL` when using `PUT` (Antoine du Hamel / #4701) - @uppy/dashboard: auto discover and install plugins without target (Artur Paikin / #4343) - meta: e2e: upgrade Cypress (Antoine du Hamel / #4731) - @uppy/core: mark the package as side-effect free (Antoine du Hamel / #4730) - meta: Bump postcss from 8.4.16 to 8.4.31 (dependabot[bot] / #4723) - meta: test with the latest versions of Node.js (Antoine du Hamel / #4729) - meta: e2e: update Parcel (Antoine du Hamel / #4726) - meta: uppy: fix types (Antoine du Hamel / #4721) - @uppy/core: type more events (Antoine du Hamel / #4719) - @uppy/svelte: fix TS build command (Antoine du Hamel / #4720) - @uppy/companion: Bucket fn also remote files (Mikael Finstad / #4693) - @uppy/companion-client: fixup! Added Companion OAuth Key type (Murderlon / #4668) - @uppy/companion-client: Added Companion OAuth Key type (Chris Pratt / #4668) - meta: check for formatting in CI (Antoine du Hamel / #4714) - meta: bump get-func-name from 2.0.0 to 2.0.2 (dependabot[bot] / #4709) - meta: run Prettier on existing files (Antoine du Hamel / #4713)

arturi added 2 commits March 3, 2023 16:43

Dashboard: auto discover plugins no matter when they were installed

7b65201

Remove target from RemoteSoruces, making it compatible with @uppy/react

84a9caf

arturi requested review from mifi and Murderlon March 3, 2023 16:59

arturi changed the title ~~@uppy/dashboard: auto install~~ @uppy/dashboard: auto discover and install plugins without target Mar 3, 2023

mifi reviewed Mar 6, 2023

View reviewed changes

Murderlon reviewed Mar 6, 2023

View reviewed changes

packages/@uppy/dashboard/src/Dashboard.jsx Outdated Show resolved Hide resolved

mifi reviewed Mar 6, 2023

View reviewed changes

packages/@uppy/dashboard/src/Dashboard.jsx Show resolved Hide resolved

mifi reviewed Mar 6, 2023

View reviewed changes

packages/@uppy/dashboard/src/Dashboard.jsx Outdated Show resolved Hide resolved

Murderlon requested a review from aduh95 March 14, 2023 12:38

kvz mentioned this pull request Mar 20, 2023

many users confused by the fact that you need to define plugins twice transloadit/uppy.io#66

Closed

arturi self-assigned this Jun 6, 2023

arturi and others added 6 commits September 21, 2023 21:08

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

5f87002

Co-authored-by: Mikael Finstad <finstaden@gmail.com>

Merge branch 'main' into dashboard-auto-install

a23bad2

Removed comments, added comments

9091c5e

better comment

38dc220

Change type — otherwise gets listed on Dashboard sources

aa61c4a

Add RemoteSources to React test

7d40214

aheimlich reviewed Sep 22, 2023

View reviewed changes

packages/@uppy/dashboard/src/Dashboard.jsx Outdated Show resolved Hide resolved

arturi added 5 commits September 26, 2023 22:49

Add RemoteSources to React example

64d0007

Add tests

68a1a4a

Refactor for less iteration for each plugin, rename functions

b726e99

Prevent error when opts are undefined

97c992b

Merge branch 'main' into dashboard-auto-install

3726a3e

arturi requested a review from Murderlon October 5, 2023 13:56

remove console.logs

e64c951

arturi added 4 commits October 5, 2023 14:58

Merge branch 'main' into dashboard-auto-install

4c40aad

Merge branch 'dashboard-auto-install' of https://github.com/transload…

d8ed931

…it/uppy into dashboard-auto-install

prettier

275b00a

Merge branch 'main' into dashboard-auto-install

384af76

Murderlon reviewed Oct 9, 2023

View reviewed changes

arturi merged commit 8b25208 into main Oct 12, 2023
18 checks passed

arturi deleted the dashboard-auto-install branch October 12, 2023 22:19

github-actions bot mentioned this pull request Oct 20, 2023

Release: uppy@3.18.0 #4754

Merged

H4NG-MAN mentioned this pull request Oct 23, 2023

[Snyk] Security upgrade @uppy/companion from 0.17.5 to 4.10.1 H4NG-MAN/uppy#174

Open

Murderlon mentioned this pull request Mar 26, 2024

Consider removing the plugins array and how to document target option #5021

Closed

2 tasks

Murderlon mentioned this pull request May 6, 2024

Remove target option from examples and document consistently #5146

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

arturi commented Mar 3, 2023 •

edited

Loading

mifi left a comment

mifi Mar 6, 2023

arturi Mar 6, 2023

aduh95 Oct 6, 2023

Murderlon Oct 9, 2023

Murderlon left a comment

arturi commented Mar 6, 2023 •

edited

Loading

Murderlon commented Mar 6, 2023

arturi commented Mar 6, 2023

Murderlon commented Mar 6, 2023

Murderlon left a comment

arturi commented Oct 12, 2023

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

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

Conversation

arturi commented Mar 3, 2023 • edited Loading

mifi left a comment

Choose a reason for hiding this comment

mifi Mar 6, 2023

Choose a reason for hiding this comment

arturi Mar 6, 2023

Choose a reason for hiding this comment

aduh95 Oct 6, 2023

Choose a reason for hiding this comment

Murderlon Oct 9, 2023

Choose a reason for hiding this comment

Murderlon left a comment

Choose a reason for hiding this comment

arturi commented Mar 6, 2023 • edited Loading

Murderlon commented Mar 6, 2023

arturi commented Mar 6, 2023

Murderlon commented Mar 6, 2023

Murderlon left a comment

Choose a reason for hiding this comment

arturi commented Oct 12, 2023

arturi commented Mar 3, 2023 •

edited

Loading

arturi commented Mar 6, 2023 •

edited

Loading