feat(widget-relation): target file collections

[d4rekanguok]

(This PR continues the discussion in #3717 & may replace it)

Summary

Allowing relation widget to target file collections, using query as suggested by @erezrokah

Test plan

A picture of a cute animal (not mandatory but encouraged)

closes #800
closes #3717

[d4rekanguok]

@erezrokah Using query as suggested, I was able to get it working more properly with less code modification vs. using loadEntry.

I planed to query all entries in a file collections then filter them by slug in parseHitOptions, but I think it wouldn't work without changing these lines to make extract optional:

https://github.com/netlify/netlify-cms/blob/6042383b9db696902f34636f12f44cbfea30562e/packages/netlify-cms-core/src/backend.ts#L428-L429

What I ended up doing is this:

    const file = fields.get('file');

    const queryPromise = file
      ? query(forID, collection, ['slug'], file)  // get a single entry with exact match
      : query(forID, collection, searchFieldsArray, term);

I'm also temporary using searchFields for the target field instead of valueField as suggested, since valueField can be used for object list. I think we may want to use a new field for this instead, since it's pretty different than searchFields for a folder collection (it shouldn't accept an array):

# target a simple list
  - label: Tags
    name: tags
    widget: relation
    collection: settings
    file: general
    searchFields: simpleList

# target an object list
  - label: Categories
    name: categories
    widget: relation
    collection: settings
    file: general
    searchFields: objectList
    valueField: id
    displayFields: '{{id}} | {{description}}'
   
# somewhere else...

collections:
  - name: settings
    files:
      - name: general
        fields:
          - { label: 'Tags', name: 'simpleList', widget: 'list' }
          - label: Categories, 
            name: objectList
            widget: list
            fields:
              - { label: 'id', name: 'id', widget: 'string' }
              - { label: 'desc', name: 'description', widget: 'string' }

Overall I prefer this over loadEntry, since it's much more inline with the current relation widget.

[d4rekanguok]

ah oops this is from a previous experiment, I'll delete this code

[d4rekanguok]

Variable naming here is aweful, but I have a hard time coming up with something better. Perhaps this whole block could be rewritten to be better

[barthc]

Not sure I understand why the field that will be searched for in the file collection is assumed to be an array.

[d4rekanguok]

You're right, I should add an array check here, thanks for spotting this!

[erezrokah]

@d4rekanguok, I rebased the branch and added a commit with the valueField approach, allowing wildcards.
For example:

collections:
  - name: posts
    label: Posts
    label_singular: 'Post'
    folder: content/posts
    create: true
    fields:
      - label: Title
        name: title
        widget: string
      - label: Relation
        name: relation
        widget: relation
        collection: files
        valueField: categories.*.id
        searchFields: [categories.*.name] # not really used
        displayFields: [categories.*.name]
        file: categories
  - name: files
    label: Files
    label_singular: 'File'
    files:
      - label: Categories
        name: categories
        file: _data/_cats.json
        fields:
          - label: Categories
            name: categories
            widget: list
            allow_add: true
            fields:
              - label: Name
                name: name
                widget: string
              - label: Id
                name: id
                widget: string

This keeps the same semantics for the fields, and allows nesting in a generic way.
WDYT?

[erezrokah]

Makes sure displayField is always a list to avoid checking it later like https://github.com/netlify/netlify-cms/pull/3754/files#diff-1c6e2a499213935b7c1b04dbb4e1ca1cL135

[d4rekanguok]

Neat, yes this looks great!

[d4rekanguok]

Oh this is really neat 👍