Sites - In table options, The hide button doesn't work

[davemart-in]

Description

There are two related issues related to this:

1. The tooltip should not have [object Object]
2. Clicking this link does nothing

Expected

We should not see [object Object] and the hide icon once clicked should hide the column. If we can't get that to work for one reason or another, we should hide this icon altogether.

[allilevine]

What I've found so far:

The tooltip should not have [object Object]

This is happening because of a known upstream issue where the expected field label type is a string. We're using React elements:

wp-calypso/client/hosting/sites/components/sites-dataviews/index.tsx

Line 121 in fabbc80

// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.

Clicking this link does nothing

We have enableHiding set to false for all of these (though even with it set to true, the column isn't hidden). I think with false we're seeing the intended behavior: the hide icon is visible but not clickable.

I'd recommend working with core to fix these upstream.

[davemart-in]

I'd recommend working with core to fix these upstream.

@jameskoster thoughts on who would be good to ping on this on the core side of things?

[allilevine]

There is something weird about the hover color vs. the DataViews example:

Calypso	DataViews

It doesn't stay grayed out on hover like the example.

[allilevine]

This is happening because of a known upstream issue where the expected field label type is a string. We're using React elements:

I see there's now a header for fields, I could try adding it:

https://github.com/WordPress/gutenberg/blob/b1d925530d22a8531a0f9c32ffe8ec4430005ab7/packages/dataviews/src/types.ts#L90C2-L94C33

[allilevine]

I opened these two PRs to improve the experience:

• Sites: Move react elements to headers instead of labels #94785
• Fix hover style override for disabled elements #94786

The hide icon is still visible, though.

[jameskoster]

@jameskoster thoughts on who would be good to ping on this on the core side of things?

@jorgefilipecosta worked on this recently. If the tooltip is problematic maybe we simplify; "Hide" / "Show"?

When field visibility cannot be toggled the button should be rendered as disabled with accessibleWhenDisabled and a tooltip explaining that the field cannot be hidden.

[lsl]

Closing stale, I think this might have already been fixed upstream as I was able to revert back to using labels in the override cleanup a while back. New file location here: https://github.com/Automattic/wp-calypso/blob/trunk/client/sites/components/Nsites-dataviews/index.tsx#L127