[Data Explorer][Discover 2.0] Implement saved search embeddable

[ananzh]

Issue Resolve

#4233

Description

Overall Functioning

• Dashboard could load a saved search
• saved search should display data grid table
• view single document link is clickable and should see a single doc with two formats (JSON and table)
• view surrounding document link is clickable and should see surrounding documents

Top Nav

• should display time range of first added saved search
• change time range can update all saved searches
• filter can update all saved searches
• search query can search all saved searches

Data grid table

• filter for value button in Table should work
• filter out value button in Table should work
• should sort
• should be able to move column, except time and _source
• should be able to remove column. If all columns (except time) are removed, should display default _source.
• pagination should work

Context view

• when expand doc, filter for value should work
• when expand doc, filter out value should work
• when expand doc, toggle column should work
• when expand doc, exist button should work

Panel Options

• should be able to edit search
• should be able to clone panel
• should be able to edit panel title
• should be able to remove a panel

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
  • yarn test:ftr
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

Merging #5081 (12465d3) into feature/deangular (c4e9b5a) will decrease coverage by 0.05%.
The diff coverage is 3.84%.

@@                  Coverage Diff                  @@
##           feature/deangular    #5081      +/-   ##
=====================================================
- Coverage              66.61%   66.57%   -0.05%     
=====================================================
  Files                   3283     3285       +2     
  Lines                  63132    63158      +26     
  Branches               10030    10031       +1     
=====================================================
- Hits                   42056    42046      -10     
- Misses                 18616    18645      +29     
- Partials                2460     2467       +7     

Flag	Coverage Δ
Linux_1	35.16% <3.84%> (-0.03%)	⬇️
Linux_2	55.23% <ø> (ø)
Linux_3	43.52% <ø> (ø)
Linux_4	35.43% <ø> (ø)
Windows_1	?
Windows_2	55.20% <ø> (ø)
Windows_3	43.53% <ø> (ø)
Windows_4	35.43% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
...er/public/embeddable/search_embeddable_factory.tsx	0.00% <0.00%> (ø)
src/plugins/discover/public/index.ts	0.00% <ø> (ø)
src/plugins/discover/public/plugin.ts	0.00% <0.00%> (ø)
...rc/plugins/discover/public/embeddable/constants.ts	100.00% <100.00%> (ø)

... and 7 files with indirect coverage changes

[ashwin-pc]

Love it, great job migrating this so cleanly. Just a few questions and suggestions

[ashwin-pc]

Suggested change

	const editUrl = services.addBasePath(`/app/discover${url}`);
	const editUrl = services.addBasePath(`/app/data-explorer/discover${url}`);

[ashwin-pc]

Are you sure we want this? The doctable component will already add a scrollbar when the height of the container exceeds the height of the rows combined.

[ashwin-pc]

Suggested change

	const discoverEmbeddableProps = {
	columns: searchProps.columns,
	indexPattern: searchProps.indexPattern,
	onAddColumn: searchProps.onAddColumn,
	onFilter: searchProps.onFilter,
	onRemoveColumn: searchProps.onRemoveColumn,
	onSort: searchProps.onSort,
	rows: searchProps.rows,
	onSetColumns: searchProps.onSetColumns,
	sort: searchProps.sort,
	displayTimeColumn: searchProps.displayTimeColumn,
	services: searchProps.services,
	totalHitCount: searchProps.totalHitCount,
	} as DiscoverEmbeddableProps & { totalHitCount: number };
	const discoverEmbeddableProps: DiscoverEmbeddableProps = {
	columns: searchProps.columns,
	indexPattern: searchProps.indexPattern,
	onAddColumn: searchProps.onAddColumn,
	onFilter: searchProps.onFilter,
	onRemoveColumn: searchProps.onRemoveColumn,
	onSort: searchProps.onSort,
	rows: searchProps.rows,
	onSetColumns: searchProps.onSetColumns,
	sort: searchProps.sort,
	displayTimeColumn: searchProps.displayTimeColumn,
	services: searchProps.services,
	totalHitCount: searchProps.totalHitCount,
	};

The difference is that this way, typescript ensures that discoverEmbeddableProps conforms to DiscoverEmbeddableProps and does not forceable change the type of your object to DiscoverEmbeddableProps.

Also DiscoverEmbeddableProps already has totalHitCount as defined on line 20

[ashwin-pc]

import only the lodash functions you need for better tree shaking.

[ashwin-pc]

Can you add a screenshot to the PR too so that its easy to see what the new change looks like?

[ananzh]

Can you add a screenshot to the PR too so that its easy to see what the new change looks like?

added on the top. also demo it in the developer meeting today.

[ashwin-pc]

Ship it :)