Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Improve Datatable content height with custom row height #127134

Merged
merged 10 commits into from
Mar 9, 2022

Conversation

dej611
Copy link
Contributor

@dej611 dej611 commented Mar 8, 2022

Summary

Fixes #123654

This PR introduces a new Custom option for the Lens datatable row height, aligning the configuration UI to the Discover/EUI one.
By default the option is set to single:

Screenshot 2022-03-08 at 11 54 36

It is possible to change the option to Auto, which maps to previous Fit row to content.
The new Custom option will default to 2 lines, but it can go up to 20, with a minimum value of 1:

Screenshot 2022-03-08 at 11 54 47

In order to better handle the new state the previous fitRowToContent state prop has been migrated to a combination of these new props:

rowHeight: "single" | "auto" | "custom"
rowHeightLines: number

Note that rowHeightLines is ignored when the rowHeight prop is set to Auto even when forwarded to the table visualization code.

Note: there's a known bug with the Custom option when shrinking down the height. It seems to be a EUI bug (issue TBD)

resize_bug

Note 2: since introducing the custom row height this error appeared from Jest execution:

console.error
      Warning: `NaN` is an invalid value for the `height` css style property.
          in div (created by EuiDataGridCell)
          in EuiDataGridCell (created by Cell)
          in Cell (created by Grid)
          in div (created by EuiDataGridInnerElement)
          in EuiDataGridInnerElement (created by Grid)
          in div (created by Grid)
          in Grid (created by EuiDataGridBody)
          in EuiDataGridBody (created by EuiDataGrid)
          in div (created by EuiDataGrid)
          in div (created by EuiDataGrid)
          in div (created by EuiFocusTrap)
          in EuiFocusTrap (created by EuiDataGrid)
          in EuiDataGrid (created by DatatableComponent)
          in div (created by VisualizationContainer)
          in VisualizationContainer (created by DatatableComponent)
          in DatatableComponent (created by WrapperComponent)
          in WrapperComponent

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27)
      at warnStyleValueIsNaN (node_modules/react-dom/cjs/react-dom.development.js:6443:5)
      at warnValidStyle (node_modules/react-dom/cjs/react-dom.development.js:6466:9)
      at setValueForStyles (node_modules/react-dom/cjs/react-dom.development.js:6530:9)
      at updateDOMProperties (node_modules/react-dom/cjs/react-dom.development.js:7758:7)
      at updateProperties (node_modules/react-dom/cjs/react-dom.development.js:8182:3)
      at commitUpdate (node_modules/react-dom/cjs/react-dom.development.js:9538:3)

I've tried to fix as in EUI exposing the _isJest flag on Jest setup, but that didn't work.

Checklist

Delete any items that are not applicable to this PR.

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk Probability Severity Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space. Low High Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. High Low Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled. Medium High Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

@dej611 dej611 added release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens backport:skip This commit does not require backporting v8.2.0 labels Mar 8, 2022
@dej611 dej611 marked this pull request as ready for review March 8, 2022 15:28
@dej611 dej611 requested review from a team as code owners March 8, 2022 15:28
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

Copy link
Contributor

@nreese nreese left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kibina gis changes LGTM
code review

@dej611
Copy link
Contributor Author

dej611 commented Mar 9, 2022

@elasticmachine merge upstream

@flash1293
Copy link
Contributor

You can use multi-row, but the content isn't wrapping (defeating the point of the feature):
Screenshot 2022-03-09 at 11 10 04

Screenshot 2022-03-09 at 11 10 33

@dej611
Copy link
Contributor Author

dej611 commented Mar 9, 2022

@flash1293 fixed the issue.
I removed the class condition by mistake when committing, but now it has been restored:
Screenshot 2022-03-09 at 12 14 34

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
lens 335 341 +6

Async chunks

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

id before after diff
lens 1.1MB 1.1MB +1.3KB

Page load bundle

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

id before after diff
lens 44.4KB 44.4KB +42.0B
Unknown metric groups

API count

id before after diff
lens 386 392 +6

History

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

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and works as expected, LGTM

@dej611 dej611 merged commit b7f3271 into elastic:main Mar 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting Feature:Lens release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.2.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Lens] Align "row height" terminology to Discover, custom row heights
6 participants