Dataviews: "badgeFields" values should be displayed as individual badges when is an array of values

[juanmaguitar]

Description

When a field listed in badgeFields contains an array of values, it should show each one of the items as individual badges.

Step-by-step reproduction instructions

1- Clone https://github.com/WordPress/gutenberg/ repo and install dependencies 2- Edit packages/dataviews/src/components/dataviews/stories/index.story.js and add badgeFields to the LAYOUT_GRID settings

[ LAYOUT_GRID ]: {
            layout: {
                mediaField: 'image',
                primaryField: 'title',
                badgeFields: [ 'categories' ],
            },
        },

2- Run npm run storybook:dev 3- Go to /?path=/story/dataviews-dataviews--default and check how the categories values are shown in the Grid view

Because of the render prop of categories all values are joined under the same badge

See "categories" definition

``` { label: 'Categories', id: 'categories', elements: [ { value: 'Space', label: 'Space' }, { value: 'NASA', label: 'NASA' }, { value: 'Planet', label: 'Planet' }, { value: 'Solar system', label: 'Solar system' }, { value: 'Ice giant', label: 'Ice giant' }, ], filterBy: { operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ], }, getValue: ( { item } ) => { return item.categories; }, render: ( { item } ) => { return item.categories.join( ',' ); }, enableSorting: false, }, ```

I think the expected behaviour here would be:

• no need of specifying a render prop
• no need of specifying a getValue prop (what is this for? it seems to work the same without it)
• Dataviews component is able to detect when badgeFields value is an array of values and display individual badges (FlexItem) for each one of them.

At the branch badgefields-array-topics of wordpress-juanmaguitar/devblog-dataview-plugin project you can see another example of this. This is an issue when there are several values as badgeFields

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[imrraaj]

Hey @juanmaguitar, I can reproduce this. I can render the individual badges. However, I was wondering whether we need to get rid of the render prop since it is used everywhere else in the fixture.js file

https://github.com/WordPress/gutenberg/blob/7a7cdd750305148096f77353a82f58f0e614319a/packages/dataviews/src/components/dataviews/stories/fixtures.js#L172-L253

One way I can think of is to get the name of the field from the badgeFields array and then render the badges given for a particular item. Can you share your thoughts?