@uppy/provider-view: allow apps to render custom forms in AuthView

[dschmidt]

see #4551 for context, it's a prerequisite for this PR - without #4551 setting customQueryParams has no effect.

This probably still needs some styling love and translation support, but I would like to get a first round of feedback on this approach before I invest more time into this.

[Murderlon]

I think this is too tightly coupled. We probably want some sort of inversion of control here, like is done for metaFields in Dashboard.

[dschmidt]

What is too tightly coupled to what?

I'm not sure what you would like here and what for.
I see, it might indeed be useful to have a custom render function apart from that I would need some examples of what you imagine.

Feel free to push anything if that makes it easier

[Murderlon]

The inputs is tightly coupled to a very specific HTML structure. If someone wants to change even one small thing, it's not possible. Therefor I think it's better to keep something like this flexible with inversion of control: exposing a a function which returns preact elements.

Example from Dashboard:

uppy.use(Dashboard, {
    trigger: '#pick-files',
    metaFields: [
        { id: 'name', name: 'Name', placeholder: 'file name' },
        { id: 'license', name: 'License', placeholder: 'specify license' },
        {
            id: 'caption',
            name: 'Caption',
            placeholder: 'describe what the image is about',
        },
        {
            id: 'public',
            name: 'Public',
            render({ value, onChange, required, form }, h) {
                return h('input', {
                    type: 'checkbox',
                    required,
                    form,
                    onChange: (ev) => onChange(ev.target.checked ? 'on' : ''),
                    defaultChecked: value === 'on',
                });
            },
        },
    ],
});

[dschmidt]

alright, makes sense! I'll try to implement that asap :)

[dschmidt]

Do you think I should reuse RenderMetaFields for this?

[mifi]

In my poc experiment i'm doing like this:

    this.view = new ProviderViews(this, {
      provider: this.provider,
      viewType: 'list',
      showTitles: true,
      showFilter: true,
      showBreadcrumbs: true,
      renderAuthForm: () => (
        <div className="uppy-Provider-authInput">
          <label htmlFor="uppy-Provider-publicLinkURL">
            <span>{this.i18n('publicLinkURLLabel')}</span>
            <input id="uppy-Provider-publicLinkURL" name="webdavUrl" type="text" />
          </label>
          <span>{this.i18n('publicLinkURLDescription')}</span>

          <button style={{ display: 'block' }} type="submit">Submit</button>
        </div>
      ),
    })

not sure if it's the best way but render props are very flexible

[dschmidt]

Yeah, renderMetaFields provides a standard implementation if you don't care too much but allows you to specify custom render method.

This (your implementation) would work for us obviously

[mifi]

I think this can be superseded by #4619