Use OOUI Layouts instead of table to display/edit multi-lingual captions on File page
Open, Needs TriagePublic

Description

On the File page multi-lingual captions are displayed and edited using a table, each caption being on a separate row

The captions should probably be displayed using OOUI HorizontalLayout elements instead

From the review comments on the patch that introduced the table:

While this works, it's not really the OOUI way, AIUI (although that can be quite the PITA sometimes, and definitely would be to overhaul now)

There's a mixin (OO.ui.mixin.GroupElement) that lets you add/edit/... OOUI widgets (addItems, removeItems, getItems, ...).

This class could basically be something like this:

var panel = new OO.ui.FieldsetLayout();
panel.addItems( [
    new OO.ui.HorizontalLayout( {
        items: [
            new OO.ui.DropdownWidget(), // language selector
            new OO.ui.TextInputWidget(), // caption text
            new OO.ui.ButtonWidget() // delete button
        ]
    } ),
    new OO.ui.HorizontalLayout( {
        items: [
            new OO.ui.DropdownWidget(), // language selector
            new OO.ui.TextInputWidget(), // caption text
            new OO.ui.ButtonWidget() // delete button
        ]
    } )
] );

And then you would:

   panel.getItems().each( function ( item )
{
       // process all values per line
   } );

Above is a very simplified example. In practice, these element probably won't suffice as-is (the dropdown will have to be something custom for ULS, for example), so you'd need to create multiple classes for each of these elements. That's the PITA part :)