feat(netlify-cms-widget-relation): use react-select and add support for multiple entries #1936

alexandernanberg · 2018-12-05T20:34:19Z

Summary

Related to #1928 but this only focuses on the existing relation widget. The behavior should be the same as the old one. Before I continue on this I'd like some confirmation if this can "live" beside the other PR, did this pretty quickly to play around a bit.

Test plan

So far just manual testing – should probably add some unit tests

verythorough · 2018-12-05T20:41:48Z

Preview proposed changes to netlifycms.org in the link below:

Built with commit 23fdc64

https://deploy-preview-1936--netlify-cms-www.netlify.com

verythorough · 2018-12-05T20:42:56Z

Preview proposed changes to the CMS demo site in the link below:

Built with commit 23fdc64

https://deploy-preview-1936--cms-demo.netlify.com

leonardodino · 2018-12-09T02:00:42Z

Horray! 🎉

was going to do something like this today, you just saved me a bunch of effort (:

erquhart · 2018-12-11T16:20:01Z

Going to hold onto this until we finish implementing tests for the widgets, working on it as we speak.

leonardodino · 2018-12-11T16:58:08Z

I left some off-band review here: https://github.com/alexandernanberg/netlify-cms/pull/1

it's mostly compatibility with the code I implemented earlier in #1928

thumbs-up for testing it, especially with something like react-testing-library that allows the changing of implementation

erquhart · 2018-12-11T17:13:47Z

That's exactly what we're using 👍

shaunbent · 2019-01-02T10:47:03Z

Just ran into a use case where I needed to use multiple select in the relationship component. So happy to see this PR open. Awesome work @alexandernanberg.

Looking forward to seeing this merged.

codedre · 2019-01-28T17:50:33Z

Is there an estimate of when this might be merged in?

erquhart · 2019-02-03T01:29:01Z

@alexandernanberg apologies for the delay - this is a 1000% improvement, merging. Please keep 'em coming!

erquhart

Ah, did find one bug - an existing value doesn't show when you load an entry, only after focusing the relation field: https://deploy-preview-1936--cms-demo.netlify.com/#/collections/kitchenSink/entries/a-big-entry-with-all-the-things

alexandernanberg · 2019-02-03T10:43:56Z

No worries! Huh weird - I'll have a look asap (probably in a day or two)

barthc · 2019-02-04T00:12:54Z

@alexandernanberg any reason why you omitted the relation widget's fieldsmetadata in this PR?

erquhart · 2019-02-04T16:49:29Z

@barthc I don't see any mention of fieldsmetadata?

alexandernanberg · 2019-02-06T07:33:35Z

I guess the relation widget should be updated to work like the select widget (with the changes in #2054)?

Though I'm not sure that I'm 100% onboard with the changes in that PR in retrospect, kind of makes sense to keep the same type always to me. Uncertain if it will break some Gatsby configs because you expect to receive an empty array instead of null 🤔

alexandernanberg · 2019-02-06T08:37:16Z

Also the bug seems to have gone away... not sure why ¯_(ツ)_/¯

erquhart · 2019-02-08T19:39:19Z

Good point on null vs. string in the other PR. Strictness of GraphQL is still something we (as a community) have to figure out.

It looks like the preview isn't working here, but it is working on master. There was always an issue where the preview sometimes didn't show initially, but you can test by typing "json" into the field and selecting the "This is a JSON front matter post" entry.

You'll notice on master it loads the preview, but in this PR updating the value still doesn't show the preview.

erquhart · 2019-02-08T19:44:12Z

Ah, it's the thing @barthc was talking about, figured I was missing something when he said that 🙄

The original onChange call passes in an object for fieldsMetadata: https://github.com/netlify/netlify-cms/pull/1936/files#diff-1c6e2a499213935b7c1b04dbb4e1ca1cL110

The new onChange will need to do the same, as this provides the connection between the selection value and the related entry.

Note: in case you don't have it, the Redux dev tools extension is super helpful for troubleshooting.

alexandernanberg · 2019-02-13T07:31:58Z

I think the metadata should work like before now. But I found some other bugs that I've been unable to solve... if you search for eg. "YAML" and select that post, then try to select another one without searching the selectedValue will be null. That's because queryHits.get just returns the hit for "YAML".

Not sure how we'd handle this 🤔

erquhart · 2019-02-13T14:33:30Z

Gotcha - the previews are definitely fixed, thanks for that 👍👍

@barthc would you be up for reviewing this and weighing in on the queryHits.get question?

barthc · 2019-02-13T18:29:24Z

A couple of things. The kitchen sinkrelation widget preview doesn't work on initial load here. On master everything inside componentDidMount and componentDidUpdate does the trick, looks like you ommited those too.

That's because queryHits.get just returns the hit for "YAML".
Not sure how we'd handle this

I suggest you store the initial defaultOptions and concat them here. The idea is to always make the defaultOptions avalaible for selection inside the getSelectedValue function.

barthc · 2019-02-15T13:19:24Z

@alexandernanberg if you don't mind, I would like to push a commit, that would address my comments.

alexandernanberg · 2019-02-15T15:48:45Z

@barthc That would be great since I don't have time right now. You should have push access to my fork now!

It would be nice it we could solve the intial preview without updating the state imo, but that might not be possible? 🤔

…or multiple entries

barthc · 2019-02-18T15:34:48Z

@alexandernanberg @erquhart review?

alexandernanberg

I'm thinking since we have all the "options/hits" already loaded in allOptions, does it still make sense to query them?

LGTM otherwise 👍

alexandernanberg · 2019-02-19T07:22:17Z

packages/netlify-cms-widget-relation/src/RelationControl.js

+      onChange(fromJS(value), {
+        [field.get('name')]: {
+          [field.get('collection')]: {
+            [last(value)]: !isEmpty(selectedOption) && last(selectedOption).data,


I'm not sure how the underlying mechanics works here but wouldn't it be better to have this as a list somehow – instead of just picking the last item

The last item will always be the newly added item on the list, so we are guaranteed that all selected item will have their metadata in store. We cannot use list here because that would mean using List() as key here [last(value)].

barthc · 2019-02-19T11:07:52Z

I'm thinking since we have all the "options/hits" already loaded in allOptions, does it still make sense to query them?

Yes we have all hits, but we still need to select the items that matches the query using the fuzzy module. The best we can do is cache results for backend listAllEntries which should improve performance and help fix #1357 but that will be handled in a separate PR.

erquhart

Thanks for all of your work on this @alexandernanberg! Thanks for reviewing and wrapping it up @barthc, and extra thanks for the tests, they help a lot!!

sanscheese · 2019-02-25T12:09:09Z

Does this mean this should now be available for everyone use? Is there an example of code for the config.yml?

barthc · 2019-02-25T12:42:33Z

@sanscheese you would need to add the multiple options to the widget multiple: true just like you would do for select widget.

@erquhart we need to merge this #2112 to update the doc.

sanscheese · 2019-02-25T13:02:40Z

@barthc Hmm. I tried that. It looks like the field is still using react-autosuggestion rather than react-select for me. (So I can type to find a tag)

This is the field I've setup in my config.yml

- label: "Tags"
    name: "tags"
    widget: "relation"
    collection: "tags"
    displayFields: ["title"]
    searchFields: ["title"]
    valueField: "title"
    multiple: true

My admin/index.html file is using https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js

I can see the new multi-relation using the kitchenSink in the dev-test admin of this netlify-cms repo but have noticed it's config.yml is using widget: 'relationKitchenSinkPost which made me think is still not released for full use yet?

barthc · 2019-02-25T13:13:12Z

@erquhart is the new relation widget released yet?

erquhart · 2019-02-25T16:25:42Z

No, releasing today. Was working on some way to provide next releases instead of going straight to latest, but it's quite complicated with Lerna, independent versions, and conventional commits.

sanscheese · 2019-02-25T16:27:29Z

This is amazing timing for me! Congrats, and great work on this! 😀

erquhart · 2019-02-28T15:51:39Z

Update: this was released in 2.5.0 🎉

FredrikSigvartsen · 2019-03-07T12:28:16Z

Update: this was released in 2.5.0 🎉

I must say: It looks and works very well! Great work!

tomrutgers mentioned this pull request Dec 12, 2018

Determine testing strategies #1013

Closed

28 tasks

leonardodino mentioned this pull request Jan 16, 2019

[WIP] New (Multi-)Relation Widget #1928

Closed

11 tasks

erquhart approved these changes Feb 3, 2019

View reviewed changes

erquhart suggested changes Feb 3, 2019

View reviewed changes

erquhart mentioned this pull request Feb 3, 2019

Relation Widget Displays Value Instead of DisplayValue on Selection #1982

Closed

erquhart mentioned this pull request Feb 5, 2019

Relation with valueField: title looses relation on update #2063

Closed

erquhart mentioned this pull request Feb 13, 2019

Add a dedicated tag widget #391

Closed

Alexander Nanberg added 2 commits February 17, 2019 16:44

feat(netlify-cms-ui-default): add react-select styles

dbe5ded

feat(netlify-cms-widget-relation): use react-select and add support f…

9dffb92

…or multiple entries

Alexander Nanberg and others added 5 commits February 17, 2019 20:02

Remove react-autosuggestion dependency

47c288a

Minor cleanup

527c3d0

Don't omit metadata in onChange

f6aa7a8

feedback fixes

992b702

add tests

23fdc64

alexandernanberg commented Feb 19, 2019

View reviewed changes

erquhart approved these changes Feb 19, 2019

View reviewed changes

erquhart merged commit 518f6fb into decaporg:master Feb 19, 2019

barthc mentioned this pull request Feb 21, 2019

Relation widget crashes if valueField doesn't return string or component. #1116

Closed

feat(netlify-cms-widget-relation): use react-select and add support for multiple entries #1936

feat(netlify-cms-widget-relation): use react-select and add support for multiple entries #1936

Conversation

alexandernanberg commented Dec 5, 2018

verythorough commented Dec 5, 2018 • edited by netlify bot Loading

verythorough commented Dec 5, 2018 • edited by netlify bot Loading

leonardodino commented Dec 9, 2018

erquhart commented Dec 11, 2018

leonardodino commented Dec 11, 2018

erquhart commented Dec 11, 2018

shaunbent commented Jan 2, 2019

codedre commented Jan 28, 2019

erquhart commented Feb 3, 2019

erquhart left a comment

Choose a reason for hiding this comment

alexandernanberg commented Feb 3, 2019

barthc commented Feb 4, 2019

erquhart commented Feb 4, 2019

alexandernanberg commented Feb 6, 2019

alexandernanberg commented Feb 6, 2019

erquhart commented Feb 8, 2019

erquhart commented Feb 8, 2019 • edited Loading

alexandernanberg commented Feb 13, 2019

erquhart commented Feb 13, 2019

barthc commented Feb 13, 2019

barthc commented Feb 15, 2019

alexandernanberg commented Feb 15, 2019 • edited Loading

barthc commented Feb 18, 2019

alexandernanberg left a comment • edited Loading

Choose a reason for hiding this comment

alexandernanberg Feb 19, 2019

Choose a reason for hiding this comment

barthc Feb 19, 2019 • edited Loading

Choose a reason for hiding this comment

barthc commented Feb 19, 2019

erquhart left a comment

Choose a reason for hiding this comment

sanscheese commented Feb 25, 2019

barthc commented Feb 25, 2019

sanscheese commented Feb 25, 2019 • edited Loading

barthc commented Feb 25, 2019

erquhart commented Feb 25, 2019 • edited Loading

sanscheese commented Feb 25, 2019

erquhart commented Feb 28, 2019

FredrikSigvartsen commented Mar 7, 2019

verythorough commented Dec 5, 2018 •

edited by netlify bot

Loading

verythorough commented Dec 5, 2018 •

edited by netlify bot

Loading

erquhart commented Feb 8, 2019 •

edited

Loading

alexandernanberg commented Feb 15, 2019 •

edited

Loading

alexandernanberg left a comment •

edited

Loading

barthc Feb 19, 2019 •

edited

Loading

sanscheese commented Feb 25, 2019 •

edited

Loading

erquhart commented Feb 25, 2019 •

edited

Loading