DataViews: fix field reordering and visibility logic #64999

oandregal · 2024-09-03T10:36:38Z

Part of #55083

What & Why?

This PR fixes a few issues around field reordering & visibility:

Displays moving controls for combined fields. Combined fields could be reordered via the view config popup but lacked the same controls in the table header.
Prevent fields that are part of a combined field from being displayed when they are listed in view.fields.
Do not display hidden fields that cannot be made visible in view config.
When view.fields is not provided: reordering fields should work.
When view.fields is not provided: the properties panel in view config should be visible. Reordering & visibility was still available via the table header.
When view.fields is not provided: display combined fields properly.

How?

Refactored the logic that deals with visibility & reordering fields.

Testing Instructions

Displays moving controls for combined fields

Go to "Site editor > Templates" and switch to table layout.
Verify the reordering controls are visible for combined fields.

Before	After

Prevent fields that are part of a combined field from being displayed when they are listed in `view.fields`

Add title in view.fields for the Templates Page.
Go to "Site editor > Templates" and switch to table layout.
The expected result is that the title field (with Template label) is not visible in the table and the view config properties panel.

Before	After

Do not display hidden fields that cannot be made visible in view config

npm install && npm run storybook:dev.
Go to the default story for DataViews in storybook and verify the type field is not listed in hidden fields.

Before	After

When `view.fields` is not provided: reordering fields should work.

Remove view.fields and view.layout.combinedFields for the Templates Page.
Go to "Site editor > Templates" and switch to table layout.
The expected result is that reordering fields works.

Before

240903-table-header-with-no-view-fields-before.mov

After

240903-table-header-with-no-view-fields-after.mov

When `view.fields` is not provided: the properties panel in view config should be visible

Remove view.fields and view.layout.combinedFields for the Templates Page.
Go to "Site editor > Templates" and switch to table layout.
The expected result is that the properties panel within the view config is visible.

Before	After

When `view.fields` is not provided: display combined fields properly

Remove view.fields for the Templates Page.
Go to "Site editor > Templates" and switch to table layout.
The expected result is that both the table & the properties panel display the proper fields (the combined template plus preview and author which are not part of any combination):

Before	After

github-actions · 2024-09-03T10:36:52Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: oandregal <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jorgefilipecosta <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2024-09-03T10:57:48Z

Flaky tests detected in 2c2d801.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10681307930
📝 Reported issues:

[Flaky Test] Should insert content using the global inserter #57525 in /test/e2e/specs/widgets/editing-widgets.spec.js

oandregal · 2024-09-03T10:59:10Z

This actually stems from wanting to fix this issue #64381 (comment) but then I noticed there was a few other ones.

youknowriad · 2024-09-03T11:04:09Z

Prevent fields that are part of a combined field from being displayed when they are listed in view.fields

I feel we should be able to show the fields individually in separate columns if we choose to.

youknowriad · 2024-09-03T11:07:03Z

packages/dataviews/src/components/dataviews-view-config/index.tsx

+					: enableHiding,
+			};
+		} );
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {


I think this works for now, but my thinking is that ultimately, we should find a way for the layouts to actually "inject" logic here. Or (which is what I had in mind) to have some kind of a slot and the "properties" area be specific per layout. For instance in "table", we should be able to "combine" fields if we want.

I agree. If we aim to make the layouts "registerable/unregisterable" by 3rd parties we cannot have this kind of logic in the view config (or any other component).

I've looked at the current usage of layouts in this component and this is what I see:

grid layout check to show/hide the density picker.

table layout check to show/hide the ability to reorder fields.

table layout check to inject "virtual fields" (aka combined).

All of them could be solved by providing a layout.supports thing somewhere. Using that approach, it'd still be DataViews' responsibility to define which "features" are supported.

Or (which is what I had in mind) to have some kind of a slot and the "properties" area be specific per layout. For instance in "table", we should be able to "combine" fields if we want.

This approach would be a lot more open. However, every layout would have to implement the same actions (reordering, visibility, etc.).

In any case, not for this PR 😅

Actually, layout.supports could also be a nice thing to have for consumers that want to "lock in" (aka remove options) a bit more the user experience.

This approach would be a lot more open. However, every layout would have to implement the same actions (reordering, visibility, etc.).

Yes, but for list view we have badges..., for grid we have columns and rows...

oandregal · 2024-09-03T11:42:03Z

Prevent fields that are part of a combined field from being displayed when they are listed in view.fields

I feel we should be able to show the fields individually in separate columns if we choose to.

I could be convinced otherwise, but I can't imagine use cases for this.

Anyway, if we wanted this, we should consider it at the user level (expose them in the view config under "hidden fields"). A feature that is related is the ability for users to "combine"/"split" fields. Not sure how both things would work together, so I'd rather leave this out of this PR.

youknowriad · 2024-09-03T11:45:01Z

I could be convinced otherwise, but I can't imagine use cases for this.

I agree that if we allow people to combine and split combined fields, it becomes kind of useless. I'm fine keeping the current state of the PR.

jorgefilipecosta

I have thoroughly tested the reordering and hiding functionality of patterns, templates, and pages view, and everything seems to be working well. I didn't encounter any unexpected issues with the code changes, so it looks like we can go ahead and merge this change. 👍

oandregal added 12 commits September 3, 2024 11:49

Centralize logic in FieldControl

efbac20

Logic for combined fields

6042f92

Add comment

e1d2cd7

Extract utils

7a47ded

Table: use getVisibleFieldIds util

56d8a67

Sort properties by view.fields order

27a1b8d

Hidden fields should not include the special media field

d8549d9

Allow re-ordering when view.fields is undefined

98ec9d3

Consider combined field in visibleFields if no view.fields is provided

4a0602d

Use fieldId instead of field.id

ed9b897

Fix column reordering when no view.fields is provided

d34fec7

Display moving controls for combined fields

2c2d801

oandregal added [Type] Bug An existing feature does not function as intended [Feature] Data Views Work surrounding upgrading and evolving views in the site editor and beyond labels Sep 3, 2024

oandregal self-assigned this Sep 3, 2024

oandregal requested review from youknowriad, jameskoster, jorgefilipecosta and ntsekouras September 3, 2024 10:55

oandregal mentioned this pull request Sep 3, 2024

Add: Reorder control at the field level on the new view config UI. #64381

Merged

youknowriad reviewed Sep 3, 2024

View reviewed changes

oandregal mentioned this pull request Sep 3, 2024

DataViews: Combine featured image and title in the posts table #63449

Open

jorgefilipecosta approved these changes Sep 3, 2024

View reviewed changes

oandregal merged commit 7c0638b into trunk Sep 3, 2024
77 checks passed

oandregal deleted the fix/dataviews-field-reordering-and-visibility branch September 3, 2024 14:18

github-actions bot added this to the Gutenberg 19.2 milestone Sep 3, 2024

WontonSam mentioned this pull request Sep 12, 2024

[Snyk] Upgrade @wordpress/eslint-plugin from 11.1.0 to 20.3.0 WontonSam/woocommerce-admin#266

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DataViews: fix field reordering and visibility logic #64999

DataViews: fix field reordering and visibility logic #64999

oandregal commented Sep 3, 2024 •

edited

Loading

github-actions bot commented Sep 3, 2024 •

edited

Loading

github-actions bot commented Sep 3, 2024

oandregal commented Sep 3, 2024

youknowriad commented Sep 3, 2024

youknowriad Sep 3, 2024

oandregal Sep 3, 2024 •

edited

Loading

oandregal Sep 3, 2024

oandregal Sep 3, 2024 •

edited

Loading

youknowriad Sep 3, 2024

oandregal commented Sep 3, 2024

youknowriad commented Sep 3, 2024

jorgefilipecosta left a comment

DataViews: fix field reordering and visibility logic #64999

DataViews: fix field reordering and visibility logic #64999

Conversation

oandregal commented Sep 3, 2024 • edited Loading

What & Why?

How?

Testing Instructions

Displays moving controls for combined fields

Prevent fields that are part of a combined field from being displayed when they are listed in view.fields

Do not display hidden fields that cannot be made visible in view config

When view.fields is not provided: reordering fields should work.

When view.fields is not provided: the properties panel in view config should be visible

When view.fields is not provided: display combined fields properly

github-actions bot commented Sep 3, 2024 • edited Loading

github-actions bot commented Sep 3, 2024

oandregal commented Sep 3, 2024

youknowriad commented Sep 3, 2024

youknowriad Sep 3, 2024

Choose a reason for hiding this comment

oandregal Sep 3, 2024 • edited Loading

Choose a reason for hiding this comment

oandregal Sep 3, 2024

Choose a reason for hiding this comment

oandregal Sep 3, 2024 • edited Loading

Choose a reason for hiding this comment

youknowriad Sep 3, 2024

Choose a reason for hiding this comment

oandregal commented Sep 3, 2024

youknowriad commented Sep 3, 2024

jorgefilipecosta left a comment

Choose a reason for hiding this comment

oandregal commented Sep 3, 2024 •

edited

Loading

Prevent fields that are part of a combined field from being displayed when they are listed in `view.fields`

When `view.fields` is not provided: reordering fields should work.

When `view.fields` is not provided: the properties panel in view config should be visible

When `view.fields` is not provided: display combined fields properly

github-actions bot commented Sep 3, 2024 •

edited

Loading

oandregal Sep 3, 2024 •

edited

Loading

oandregal Sep 3, 2024 •

edited

Loading