Page MenuHomePhabricator

VE Dialog on the Test Instance: Add media selector
Closed, ResolvedPublic13 Estimated Story Points

Description

Implement a new input type to open the media selector and use it to find/add images to templates based on the process outlined in the investigation ticket, T258195: Investigation: Link to VE media selector. Add this functionality to the 'file' parameter type.

Requirements

  • Parameter type 'file' gets custom behavior, based on OOUI 'SelectFileInputWidget'.
  • Placeholder text says "No file is selected" unless there is a default value. If there is, display the default in the input like other VE dialog input types. The button text should say 'Add file'
  • Clicking 'Add file' opens the media selector to the 'Search' tab
  • Once the selector is open, the user is able to switch between the two tabs.
  • The media selector opens on top of the VE template dialog, covering it (so it looks like it's part of the same dialog) and expanding in size for search, staying the same size for upload
  • The media selector allows a user to proceed through the screens to the point of clicking the button 'Use this image,' without inputing additional information (such as caption or alt text). Screenshots detail this in the investigation ticket T258195.
  • When a user clicks, 'Use this image,' the file name is passed into the VE template dialog without the prefix.
  • Users can type in or paste in a file name without using the button to find a file.
  • Users can still use the button to add a file name when there is text inside the input field. If the user closes out of the media selector, the existing text stays. If the user selects a new image or uploads a new one, the text is replaced.
  • Allow to use the media selector to choose the following media types on commons: image, movie, pdf, audio.
  • Once a file has been selected and added to the template, or when editing a template where a file has already been selected, the button text should be changed to "Change file".
  • Clicking the "Change file" button should open the media selector in the 'Search' tab and follow the same behaviour as specified above.

Nice to have

  • If the parameter is missing example and default values, show placeholder text 'No file is selected'

Mock

Screen Shot 2020-08-26 at 10.50.01.png (128×488 px, 13 KB)

Event Timeline

Lena_WMDE set the point value for this task to 13.Aug 20 2020, 9:42 AM
ECohen_WMDE renamed this task from DRAFT - VE Dialog on the Test Instance: Add media selector to VE Dialog on the Test Instance: Add media selector.Aug 20 2020, 10:03 AM
ECohen_WMDE updated the task description. (Show Details)
ECohen_WMDE moved this task from Backlog to Ready for pickup on the WMDE-Templates-FocusArea board.
This comment was removed by awight.

@ECohen_WMDE

Users can type in or paste in a file name without using the button to find a file.

Currently, the "File" type has no special behavior, it's just a text entry widget. Should we give the text field the same behaviors as the "Page" type, where typing brings up an autocomplete list of existing files matching the current value? This would be easy and IMO makes sense.

@ECohen_WMDE, I discovered a "showImages" flag in the code which would give us an MVP with almost no effort, if this sounds interesting? Of course, we could incrementally enhance the dialog with the more elaborate change described in this task, but this might be a reasonable intermediate step or a fallback plan.

Visit the commonswiki Special:RecentChangesLinked form and click the first text field:

image.png (603×589 px, 108 KB)

Change 622850 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@master] Show image autocomplete for "File" parameters

https://gerrit.wikimedia.org/r/622850

FWIW, the patch above implements a basic image-preview autocomplete, which is consistent with TemplateWizard's handling for these fields.

awight moved this task from Doing to Sprint Backlog on the WMDE-QWERTY-Sprint-2020-08-26 board.
awight subscribed.

Thanks for the info @awight. We decided that using the existing media selector will give users a few additional, important features, making it worth the extra effort: it's a true search (the order of the search term is not an issue), the results are more easily navigable, and users see a larger, full preview of the image before choosing it.

After discussing with @Lena_WMDE, we decided that for the user testing let's take out the autocomplete and test the design as outlined in the task. It's nice to know though that we have a reasonable back-up if we run into any major issues along the way.

@ECohen_WMDE Great, I agree that the feature as you designed it will be better. I'll remove the patch from the test instance.

Meanwhile, also @Lena_WMDE would you prefer that I cancel the autocomplete patch I've sent upstream, or leave it in the queue? No problem going either way on this, I just wanted to alert you that it's sitting there and might be merged if the maintainers like the idea.

Parameter type 'file' gets a custom input type based on OOUI 'SelectFileInputWidget'. Placeholder text says "No file is selected" unless there is a default value. If there is, display the default in the input like other VE dialog input types. The button text should say 'Add file'

I don't think this is quite right. The SelectFileInputWidget is meant for directly uploading files, has no text input capability, and doesn't connect to the wiki's files. Instead, how about:

  • Based on TitleInputWidget (currently used by "Page" parameters).
  • Limit to the "File:" namespace and hide the prefix.
  • Style like the SelectFileInputWidget, with an "Add file" button spliced onto the right side of the input.

Ya sorry for the confusion, that's why I said based on. It should look the same but function differently. I think your proposal makes sense for that. I'm not seeing TitleInputWidget though, do you mean TextInputWidget? I checked the one being used by the 'Page' parameter and looks good to me.

Ya sorry for the confusion, that's why I said based on. It should look the same but function differently. I think your proposal makes sense for that. I'm not seeing TitleInputWidget though, do you mean TextInputWidget? I checked the one being used by the 'Page' parameter and looks good to me.

+1 Sounds like we have the same understanding. Yeah there seems to be a class hierarchy and some domain boundaries around oojs-ui, so TitleInputWidget is provided by MediaWiki-core but not "base" oojs-ui, so it isn't on the demo pages. (Something that should be addressed!) The "Page" parameter and a few of the TemplateWizard fields use TitleInputWidget.

Going ahead with this plan :-)

Change 623412 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@master] [WIP] Experiment with a new FileInputWidget

https://gerrit.wikimedia.org/r/623412

Change 622850 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Show image autocomplete for "File" parameters

https://gerrit.wikimedia.org/r/622850

Meanwhile, also @Lena_WMDE would you prefer that I cancel the autocomplete patch I've sent upstream, or leave it in the queue? No problem going either way on this, I just wanted to alert you that it's sitting there and might be merged if the maintainers like the idea.

😊 well this question was answered by default, sorry: the patch is merged upstream now.

After some IRC discussion, I believe we can't use the MWMediaDialog directly. It's designed to produce an entire transclusion, comes with caption inputs and so on. The search and upload interfaces are already reusable components, but @matmarex points out that having these wrapped in a higher-level reusable widget will enhance all use cases, for example the gallery which only allows search at the moment. We don't necessarily have to upstream this component, but it might be the easiest way to implement our feature.

Change 624680 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Special widget and dialog for File parameters

https://gerrit.wikimedia.org/r/624680

Change 624681 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Integrate preview and media selector

https://gerrit.wikimedia.org/r/624681

Change 624680 merged by Awight:
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Special widget and dialog for File parameters

https://gerrit.wikimedia.org/r/624680

Change 624681 merged by Awight:
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Integrate preview and media selector

https://gerrit.wikimedia.org/r/624681

Lena_WMDE claimed this task.

Change 626368 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@master] [POC] Integrate preview and media selector

https://gerrit.wikimedia.org/r/626368

Change 626368 abandoned by Awight:
[mediawiki/extensions/VisualEditor@master] [POC] Integrate preview and media selector

Reason:
Moved to a gitlab branch, https://gitlab.com/wmde/mediawiki-extensions-VisualEditor/-/tree/file-type

https://gerrit.wikimedia.org/r/626368

Change 623412 abandoned by Awight:
[mediawiki/extensions/VisualEditor@master] [POC] Special widget and dialog for File parameters

Reason:
Moved to a gitlab branch, https://gitlab.com/wmde/mediawiki-extensions-VisualEditor/-/tree/file-type

https://gerrit.wikimedia.org/r/623412