[Lens] Hide column in table

[flash1293]

Fixes #85140

This PR allows to hide a column in lens data table. There's an action in the cell popover as well as a switch in the dimension editor:

This PR also restructures the data table shape a little on all levels to make it easier to work with (especially considering the fact we will add many more settings to individual columns)

New state and expression shape

The old state looked like this:

{
  layers: Array<{
    columnIds: string[];
    columnWidth: ColumnWidthState[];
    layerId: string;
  }>;
  sorting?: SortingState;
}

As we are going to add many more config settings to specific columns, this PR changes the state to this easier to manager shape:

{
  layerId: string;
  columns: Array<ColumnState>;
  sorting?: SortingState;
}

interface ColumnState {
  columnId: string;
  width?: number;
  hidden?: boolean;
  // to be continued
}

This is also reflected on the expression layer, the new layout looks like this:

lens_datatable column={lens_datatable_column columnId="a" width=300} column={lens_datatable_column columnId="b"} ...

Functional tests

I slightly restructured functional tests by starting a separate "table" test file, moving some things over from the very crowded "smokescreen" test file, extending it with a test for hiding the column.

[flash1293]

Thanks for the review everyone. I think all of the reported problems were caused by this pretty basic mistake:

+                hidden: !column.hidden,
-                hidden: !!column.hidden,

The edit action didn't actually toggle the hidden flag... It should be fixed now

I'd suggest to make the last visible column visibility disabled. I cannot see no use for it, at least in a single visualization configuration. Maybe in a dashboard could have "some sense" with some sort of filters, but that's a different flow.

I see the reasoning, but I don't think we should do this, because it unnecessarily restricts the user (e.g. if they only want to have a single visible column and switch from col1 to col2, now they first have to make col2 visible, then hide col1 because the switch will be disabled if they would do it the other way around). I think it makes sense to disable settings if they can't be applied to the visualization or would cause some harm, but that doesn't apply in this case IMHO.

[flash1293]

Toggling the column visibility from the dropdown menu triggers a waterfall of RangerError for max call stack size in the console

I saw this behavior before, AFAIK it's a bug of the EUI data grid. I will check with the most recent update whether it still persists.

Edit: Tested this and it's still happening. I will investigate this separately, but I'm not sure whether we can fix it from the Kibana side.

[flash1293]

@dej611 @wylieconlon I added an indicator for the dimension trigger and moved the flag into the dimension editor.

With the indicator I think a separate popover is not really justified and the consistency of where functionalities are shown is more important.

[dej611]

The "hidden" icon is not shown for Metrics:

I may also suggest to use the same eyeClosed icon for the column dropdown menu for consistency.

I am not fully convinced about the ability to hide all columns and show a blank canvas: perhaps at least one column has to be shown? Not a blocker, but it would be nice to have it sorted.

[wylieconlon]

Tested again in FF and the new UI seems to have no issues with syncing. LGTM!

[flash1293]

@elasticmachine merge upstream

[flash1293]

@dej611

The "hidden" icon is not shown for Metrics:

Thanks, fixed

I am not fully convinced about the ability to hide all columns and show a blank canvas: perhaps at least one column has to be shown? Not a blocker, but it would be nice to have it sorted.

I don't really see when it would be relevant, but I don't have a strong opinion on it either - added the logic to disable the last visible column switch.

[dej611]

While the panel toggle component is disabled for the last column:

You can still have a blank table passing thru the column dropdown Hide:

As said, it's not a blocker, either way is fine as long as it's consistent.

Also the Reset width action in the column dropdown is always enabled. If clicked nothing happens.

Edit: nvm, I guess the dropdown arrow icon is too close to the border and my click has been captured as "resize" action rather than "open" action on the icon. I've tried few times and if I click on the right side of the icon that issue does not happen 👍

[flash1293]

@dej611 Fixed that as well and also added the same icon as you mentioned above.

[dej611]

All tested on Chrome and FF. 👍

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 7847e86
• Documentation Changes

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	478	479	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
lens	873.7KB	876.2KB	+2.5KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
lens	34.3KB	34.3KB	-100.0B

History

• 💚 Build #103396 succeeded b2ba6b9
• 💔 Build #103389 failed 4ebca5f
• 💚 Build #102922 succeeded db3ab50
• 💔 Build #102906 failed db88277
• 💚 Build #102525 succeeded 064794b

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream