[Table list view] Improve UX (phase 1)

[sebelga]

This PR is the phase 1 for the work to enhance the UX of the <TableListView />. It consist mainly in converting the component exposed by the kibana_react plugin into a package, refactor and cleanup the interface and integrate the package into

• Dashboard
• Visualisation
• Maps
• Graphs

It contains the following intermediate PR that have already been reviewed

• [TableListView] Refactor to function component #135807
• [Table list view] Break into smaller components #136002
• [Table list view]: convert to package #138244
• [Table list view] Integrate package in Dashboard #139556
• [Table list view] Integrate package into visualizations, maps, graphs #140040

How to test

• Launch the cloud deployment
• Navigate to the list view of the above apps and make sure that everything works as expected, mainly:
  • search filter
  • tags
  • description
  • navigate to details / edit view

[sebelga]

@elasticmachine merge upstream

[sebelga]

@elasticmachine merge upstream

[sebelga]

@elasticmachine merge upstream

[sebelga]

@elasticmachine merge upstream

[sebelga]

@elasticmachine merge upstream

[sebelga]

@elasticmachine merge upstream

[kertal]

DataDiscovery.team code LGTM, tested with 🍜 deployment, just changes in Graph, Table list providing the selection of available Graph saved objects, works as expected 👍

[ThomThomson]

Presentation team changes LGTM!

[nreese]

kibana-gis changes LGTM

[cjcenizal]

Changes to Data Streams test LGTM.

[majagrubic]

I tested this in Storybook, in Chrome on Mac OSX. I didn't run Kibana nor tested application-specific changes. Shared-ux changes and conversion to package look good to me. My only question is if we're planning on adding more unit tests to components, like ListLimitWarning and ConfirmDeleteModal components.

[sebelga]

@elasticmachine merge upstream

[sebelga]

@elasticmachine merge upstream

[sebelga]

Thanks for the review @majagrubic !

My only question is if we're planning on adding more unit tests to components, like ListLimitWarning and ConfirmDeleteModal components.

Probably not. I prefer component integration tests over unit tests. They give higher confidence in the test coverage.

• I will test: "Is there a warning message above the table if the limit (passed to the table) is lower than the length of items of the table?". --> I test a business rule. If that message is rendered by a <ListLimitWarning /> component or a <FooWarning /> component I don't need to know.
• I will not test: "Snapshot the ListLimitWarning component and make sure it renders." --> it does not give me any confidence that the app works as expected. I just know that a React component renders.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 22d8d37
• Storybooks Preview
• Cloud Deployment

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
dashboard	382	398	+16
graph	220	289	+69
kibanaReact	313	311	-2
maps	924	994	+70
visualizations	304	320	+16
total			+169

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
@kbn/content-management-table-list	-	10	+10
kibanaReact	214	151	-63
total			-53

Any counts in public APIs

Total count of every any typed public API. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats any for more detailed information.

id	before	after	diff
@kbn/test-jest-helpers	8	5	-3

Async chunks

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

id	before	after	diff
dashboard	366.6KB	387.4KB	+20.8KB
graph	412.7KB	450.0KB	+37.3KB
kibanaReact	208.1KB	208.1KB	-3.0B
maps	2.6MB	2.6MB	+37.3KB
visualizations	198.5KB	217.9KB	+19.4KB
total			+114.9KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
@kbn/content-management-table-list	-	4	+4

Page load bundle

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

id	before	after	diff
dashboard	72.5KB	72.2KB	-258.0B
graph	7.1KB	7.2KB	+49.0B
kibanaReact	63.0KB	52.1KB	-11.0KB
maps	81.3KB	81.5KB	+168.0B
total			-11.0KB

Unknown metric groups

API count

id	before	after	diff
@kbn/content-management-table-list	-	12	+12
kibanaReact	251	184	-67
total			-55

ESLint disabled line counts

id	before	after	diff
@kbn/content-management-table-list	-	2	+2
kibanaReact	13	12	-1
total			+1

miscellaneous assets size

id	before	after	diff
graph	928.6KB	1.1MB	+161.8KB
maps	497.0KB	658.8KB	+161.8KB
total			+323.5KB

References to deprecated APIs

id	before	after	diff
savedObjects	48	52	+4

Total ESLint disabled count

id	before	after	diff
@kbn/content-management-table-list	-	2	+2
kibanaReact	17	16	-1
total			+1

History

• 💚 Build #73205 succeeded 2e3fd17
• 💚 Build #73051 succeeded 308eb38
• 💚 Build #73047 succeeded 775424f
• 💔 Build #72888 failed fdae39c
• 💚 Build #72561 succeeded e64112a

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

cc @sebelga