Relation Widget Improvements (Resource Lists, Video Galleries, ...)

[ChristopherChudzicki]

As a course author, I want to more easily create resource lists and video galleries.

Resource lists and video galleries are powered by the Relation widget with sortable: true. The sortable relation widget includes a selection field with a typeahead for filtering the search space. This select field has a few deficiences:

• it shows a limited number of items
• some of the displayed items are disabled (the ones already added)
• To add an item, users must (a) enter search text, (b) click the option, (c) verify the selection by clicking click "Add". Step (c) is redundant and it clears the filter text, which can be annoying.

Designs and Mockups

Acceptance Criteria:

• [ ] 1. Clicking an option should immediately add its value to the sortable list. The "Add" button should be removed.
• [ ] 2. Adding an item to the list should preserve the filter text.
• [ ] 3. Already-selected items should be filtered from the options listing rather than disabled. [^1]
• [ ] 4. The options-listing should include more items. Ideally this would be an asynchronously loaded infinite scroll. The library we use for the select field is react-select, which does not support asynchronous infinite scroll. But there is a wrapper around it that does: https://www.npmjs.com/package/react-select-async-paginate

[^1]: The Relation widget already behaves this way when multiple: true, sortable: false.

[pdpinch]

Related to https://github.com/mitodl/hq/issues/1700

I'd like to be careful with rolling this out. It will need some extra testing on RC. Is there a reasonable way to put it behind a feature flag?

[ChristopherChudzicki]

I'd like to be careful with rolling this out. It will need some extra testing on RC. Is there a reasonable way to put it behind a feature flag?

I think we should be able to do that. Would flagging by env be good enough, or do we want it by user?

@pdpinch Question: Looking at the code a little more closely, Do we want these changes to also affect the website-collection widget? relation (with sortable=true) and website-collection are basically the same widgets, just one is for sortable lists of resources and one is for sortable lists of sites. E.g., website-collection is used for course lists in ocw-www (example).

Most of the relevant code changes are to a shared dependency of RelationField and WebsiteCollectionField, a dependency that is only used by these two components. (Namely, SortableSelect).

@HussainTaj-arbisoft What do you think?

[HussainTaj-arbisoft]

looking at the code a little more closely, Do we want these changes to also affect the website-collection widget?

Regarding these changes' effects, they will affect all of the dropdown/select type UI we have. That is because we'll have to make some changes in the SelectField component.

Changes will inherently be available to the website-collection field. We can explicitly turn them off for the website-collection field if that is something required. However, I believe it has the same UX issues as the resource list, so it should be better to let the change happen.

In any case, using feature flags would be a good idea since this affects so much.

[HussainTaj-arbisoft]

I'd like to be careful with rolling this out. It will need some extra testing on RC. Is there a reasonable way to put it behind a feature flag?

I think we should be able to do that. Would flagging by env be good enough, or do we want it by user?

@pdpinch what do you think?

[pdpinch]

Would flagging by env be good enough, or do we want it by user?

Flagging per environment would be sufficient in this case. That said, if I'm able to choose a feature flagging vendor this week, then we could use a system that supports both options.

[HussainTaj-arbisoft]

@pdpinch I added feature flags through env in https://github.com/mitodl/ocw-studio/pull/1888 to test the core conditional logic.

Should I wait for a decision on the flag distribution service or put the PR up for review?

[pdpinch]

Since you've already added the environment flag, let's proceed.

We'll learn how to add LaunchDarkly to OCW next time.