[Index Management] Mappings empty state

[wildemat]

@elastic/kibana-management: I need your input on a display change to index mappings that affects the mapping pages within stack management.

This is part of a larger effort to redesign and consolidate index management between search and stack management. See [Epic][Design] Index Management Improvements.

Summary

When a user has no index mappings, we'd like to show a minimalistic prompt (design) for field creation:

There are 4 variations of the mappings tab (screenshots below):

1. Stack Management -> Index Management
2. Stack Management -> Content Connectors
3. Search Solution -> Index Management
4. Search Solution -> Content Connectors

Within search, we'd like to just show the new empty prompt (Add fields to your data...) and hide the extra context items (About index mappings... and Transform your searchable content).

I'd like to know if @elastic/kibana-management would like the same treatment, or if I should update this PR to only apply the empty state to search solution.

We can also try a variation where the right-hand context items do not display in the empty state, but show up again when fields are added.

The current state of this PR shows the empty state on every mappings tab, alongside whatever extra context items are already there.

There is duplicated code across these various mappings displays. (see #213509 for example). This PR isn't meant to solve that. However I think if we agree on a single version to show, it'll make that task easier.

Changes

• Leverage EuiEmptyPrompt to display a CTA to add a field
• During field creation, if they have no saved fields yet, hide the "filter" bar and "list/json" buttons. Those don't provide helpful context until after fields exist.
• Provide a link to mapping documentation
• Added a few unit tests to verify the proper show/hide behavior of the empty prompt

Screenshots

Sample interaction:

indexmgmt.emptystate.mov

Stack Management Index Management:

path: app/management/data/index_management/indices/index_details?indexName={indexName}&tab=mappings

Stack Management Content Connectors:

path: app/management/data/content_connectors/connectors/{connectorID}/index_mappings

Search Solution Index Management:

path: search/app/elasticsearch/indices/index_details/{indexName}/mappings

Search Solution Content Connectors:

path: search/app/elasticsearch/content/connectors/{connectorID}/index_mappings

Tests

➜  kibana git:(search/indices/mappings/empty-state) ✗ yarn test:jest \
'x-pack/platform/plugins/shared/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx' \
-t '\<IndexDetailsPage /\> Mappings tab' \
-c './x-pack/platform/plugins/shared/index_management/jest.config.js' \
--verbose=false

yarn run v1.22.22

 PASS  x-pack/platform/plugins/shared/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx (14.015 s)

Test Suites: 1 passed, 1 total
Tests:       63 skipped, 25 passed, 88 total
Snapshots:   0 total
Time:        14.332 s, estimated 15 s
Ran all test suites matching /x-pack\/platform\/plugins\/shared\/index_management\/__jest__\/client_integration\/index_details_page\/index_details_page.test.tsx/i with tests matching "\<IndexDetailsPage /\> Mappings tab".
 debg CIStatsReporter committerHash: 85e34139f9a5740b9cd7
✨  Done in 17.15s.

Closes https://github.com/elastic/search-team/issues/9737

[mdefazio]

For the empty state for Stack Index Management, I think we can only show the empty state, but once they have mappings, then show the 'About mappings' block on the right.

[ElenaStoeva]

Thanks for working on this @wildemat! It completelly makes sense to me to have the same empty state for all index pages in Kibana, but I'll first discuss it with the team to see if everyone is onboard - I added this to our next team sync-up agenda.

Also, I noticed that when Kibana is in High contrast mode, a weird border is being displayed - probably surrounding the component below the empty state promp:

[mattkime]

It would be nice if the design scaled well for smaller screen sizes

[mattkime]

I'm curious why Search Solution Index Management doesn't have the explanatory text. Not looking to debate it, just want to verify its been considered.

[mattkime]

There are some relatively minor issues that myself and others have pointed out although it looks like its on the right track overall. I'll take another look when these have been addressed.

[mdefazio]

I'm curious why Search Solution Index Management doesn't have the explanatory text. Not looking to debate it, just want to verify its been considered.

I'm not sure I remember why we removed it. I'm good keeping these consistent and showing it on the search views.

[mdefazio]

But I think our empty state should be doing the job of this block, and only show the right sidebar block when there are mappings. I think we're aligned on that, but wanted to reiterate.

[wildemat]

New changes (diff):

• consolidated "About" and "transform" content to one version
• removed the now unused setIndexMappingContent function in the extension.
• removed the manually displayed "About" and "Transform" code from content connectors.
• Fixed empty div showing on high contrast mode

Screenshots:

Empty Mappings

Non-Empty Mappings

indexMappingEmptyState.mov

Summary

I attempted the conditional display of the extra help content here, but in the current plugin's architecture it may be too much scope to make that happen for now.

As a compromise, the various versions of "About" and "Transform" content was consolidated into a single version in the index management mapping component.

2 of the alternate versions were from Search Content Connectors and Stack Mgmt Content Connectors. Both of which are being deprecated.

Serverless Search had a different version as well, but it was never being displayed due to showAboutMappings set to false

[wildemat]

On small screen:

[wildemat]

Note, the following data-test-subj items will be removed:

• Connectors in stack and enterprise search:
  • enterpriseSearchSearchIndexIndexMappingsLearnHowToCustomizeIndexMappingsAndSettingsLink
  • enterpriseSearchSearchIndexIndexMappingsLearnMoreLink
• Search indices
  • serverlessSearchIndexMappingsDocsLinkLearnMoreAboutIngestPipelinesLink

They can be replaced with:
* indexDetailsMappingsDocsLink
* indexDetailsMappingsLearnMoreLink

However, after grepping, I found no tests that used those data-test-subj values. They may however be used somewhere for telemetry

[seialkali]

LGTM

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: d031485

Failed CI Steps

• FTR Configs #18
• Scout Test Run Builder
• Build and Deploy to Cloud

Test Failures

• [job] [logs] Scout Test Run Builder / serverless-security - EUI testing wrapper: EuiDataGrid - data grid, run
• [job] [logs] FTR Configs #18 / Space awareness package install "after all" hook in "package install"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
indexManagement	665	666	+1
serverlessSearch	349	348	-1
total			-0

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/index-management-shared-types	149	147	-2

Async chunks

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

id	before	after	diff
contentConnectors	458.4KB	455.8KB	-2.5KB
enterpriseSearch	1.0MB	1.0MB	-2.5KB
indexManagement	688.6KB	690.8KB	+2.1KB
searchIndices	196.0KB	196.0KB	-21.0B
total			-2.9KB

Page load bundle

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

id	before	after	diff
indexManagement	31.8KB	31.5KB	-332.0B
serverlessSearch	30.7KB	29.4KB	-1.3KB
total			-1.6KB

Unknown metric groups

API count

id	before	after	diff
@kbn/index-management-shared-types	149	147	-2

History

• 💔 Build #342226 failed 0003324
• 💔 Build #342194 failed 0d84009
• 💛 Build #341071 was flaky f33c9ca
• 💛 Build #340933 was flaky c5893ec

[mattkime]

Looks good and works well in stack management/ index management