# Backport This will backport the following commits from `main` to `8.16`: - [[Index management] Fix a11y focus order in index mappings page (#203361)](https://github.com/elastic/kibana/pull/203361) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Saarika Bhasi","email":"55930906+saarikabhasi@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-10T15:46:20Z","message":"[Index management] Fix a11y focus order in index mappings page (#203361)\n\n## Summary\r\n\r\nFix a11y focus order in index mappings page. When new field is in\r\npending state and after closing edit pending field Flyout.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/dbdf59e5-0ebd-47e0-9b5e-19ab1556e771\r\n\r\n### Test instructions \r\n#### Adding a field\r\n1. Add new field in index mappings page by navigating via tab \r\n2. Notice that type fields combo box is focused\r\n3. Add field and click to Add field button again with in pending fields\r\nform\r\n4. Notice focus is on new create field form\r\n\r\n#### Edit field in pending state\r\n1. Add new fields via tab key\r\n2. click on edit field \r\n3. Try closing, updating and cancelling in the edit field flyout form\r\n4. Notice after edit field flyout is closed, focus is on the pending\r\nfields form","sha":"4b0c0e92693ad759e3ce45b4b259c9908ddd0d51","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-major","v8.16.0","v8.17.0"],"title":"[Index management] Fix a11y focus order in index mappings page ","number":203361,"url":"https://github.com/elastic/kibana/pull/203361","mergeCommit":{"message":"[Index management] Fix a11y focus order in index mappings page (#203361)\n\n## Summary\r\n\r\nFix a11y focus order in index mappings page. When new field is in\r\npending state and after closing edit pending field Flyout.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/dbdf59e5-0ebd-47e0-9b5e-19ab1556e771\r\n\r\n### Test instructions \r\n#### Adding a field\r\n1. Add new field in index mappings page by navigating via tab \r\n2. Notice that type fields combo box is focused\r\n3. Add field and click to Add field button again with in pending fields\r\nform\r\n4. Notice focus is on new create field form\r\n\r\n#### Edit field in pending state\r\n1. Add new fields via tab key\r\n2. click on edit field \r\n3. Try closing, updating and cancelling in the edit field flyout form\r\n4. Notice after edit field flyout is closed, focus is on the pending\r\nfields form","sha":"4b0c0e92693ad759e3ce45b4b259c9908ddd0d51"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.17"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203361","number":203361,"mergeCommit":{"message":"[Index management] Fix a11y focus order in index mappings page (#203361)\n\n## Summary\r\n\r\nFix a11y focus order in index mappings page. When new field is in\r\npending state and after closing edit pending field Flyout.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/dbdf59e5-0ebd-47e0-9b5e-19ab1556e771\r\n\r\n### Test instructions \r\n#### Adding a field\r\n1. Add new field in index mappings page by navigating via tab \r\n2. Notice that type fields combo box is focused\r\n3. Add field and click to Add field button again with in pending fields\r\nform\r\n4. Notice focus is on new create field form\r\n\r\n#### Edit field in pending state\r\n1. Add new fields via tab key\r\n2. click on edit field \r\n3. Try closing, updating and cancelling in the edit field flyout form\r\n4. Notice after edit field flyout is closed, focus is on the pending\r\nfields form","sha":"4b0c0e92693ad759e3ce45b4b259c9908ddd0d51"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com> |
||
---|---|---|
.. | ||
__jest__ | ||
common | ||
public | ||
server | ||
test/fixtures | ||
jest.config.js | ||
kibana.jsonc | ||
README.md | ||
tsconfig.json |
Index Management UI
Extensions service
This service is exposed from the Index Management setup contract and can be used to add content to the indices list and the index details page.
Extensions to the indices list
addBanner(banner: any)
: adds a banner on top of the indices list, for example when some indices run into an ILM issueaddFilter(filter: any)
: adds a filter to the indices list, for example to filter indices managed by ILMaddToggle(toggle: any)
: adds a toggle to the indices list, for example to display hidden indicesaddColumn(column: IndicesListColumn)
: adds a column to the indices list, for example to display an ILM phasesetEmptyListContent(content: EmptyListContent)
: replaces the default empty prompt displayed when there are no indices in the indices list. The empty list content has the following interface:
export interface EmptyListContent {
renderContent: (args: {
createIndexButton: ReturnType<FunctionComponent>;
}) => ReturnType<FunctionComponent>;
}
setIndexDetailsPageRoute
: registers a new route for index details page in indices list table. For example, for serverless search users, navigating to an index on the indices list page will lead to the Search Indices detail page.
Extensions to the indices list and the index details page
addAction(action: any)
: adds an option to the "manage index" menu, for example to add an ILM policy to the indexaddBadge(badge: any)
: adds a badge to the index name, for example to indicate frozen, rollup or follower indices
Extensions to the index details page
addIndexDetailsTab(tab: IndexDetailsTab)
: adds a tab to the index details page. The tab has the following interface:
interface IndexDetailsTab {
// a unique key to identify the tab
id: IndexDetailsTabId;
// a text that is displayed on the tab label, usually a Formatted message component
name: ReactNode;
// a function that renders the content of the tab
renderTabContent: (args: {
index: Index;
getUrlForApp: ApplicationStart['getUrlForApp'];
}) => ReturnType<FunctionComponent>;
// a number to specify the order of the tabs
order: number;
// an optional function to return a boolean for when to render the tab
// if omitted, the tab is always rendered
shouldRenderTab?: (args: { index: Index }) => boolean;
}
An example of adding an ILM tab can be found in this file.
setIndexOverviewContent(content: IndexContent)
: replaces the default content in the overview tab (code block describing adding documents to the index) with the custom content. The custom content has the following interface:
interface IndexContent {
renderContent: (args: {
index: Index;
getUrlForApp: ApplicationStart['getUrlForApp'];
}) => ReturnType<FunctionComponent>;
setIndexMappingsContent(content: IndexContent)
: adds content to the mappings tab of the index details page. The content is displayed in the right bottom corner, below the mappings docs link.
Index data enrichers
The extensions service that allows to render additional UI elements in the indices list and on the index details page often
relies on additional index data that is not available by default. To make these additional data available in the response of
the GET /indices
request, an index data enricher can be registered. A data enricher is essentially an extra request that is
done for the array of indices and the information is added to the response. Currently, 3 data enrichers are registered
by the ILM, Rollup and CCR plugins. Before adding a data enricher, the cost of the additional request should be taken
in consideration (see this file for more details).
Indices tab
Quick steps for testing
Create an index with special characters and verify it renders correctly:
# Renders as %{[@metadata][beat]}-%{[@metadata][version]}-2020.08.23
PUT %25%7B%5B%40metadata%5D%5Bbeat%5D%7D-%25%7B%5B%40metadata%5D%5Bversion%5D%7D-2020.08.23
Data streams tab
Quick steps for testing
Create a data stream using Console and you'll be able to view it in the UI:
# Configure template for creating a data stream
PUT _index_template/ds
{
"index_patterns": ["ds"],
"data_stream": {}
}
# Add a document to the data stream
POST ds/_doc
{
"@timestamp": "2020-01-27"
}
Create a data stream with special characters and verify it renders correctly:
# Configure template for creating a data stream
PUT _index_template/special_ds
{
"index_patterns": ["%{[@metadata][beat]}-%{[@metadata][version]}-2020.08.23"],
"data_stream": {}
}
# Add a document to the data stream, which will render as %{[@metadata][beat]}-%{[@metadata][version]}-2020.08.23
POST %25%7B%5B%40metadata%5D%5Bbeat%5D%7D-%25%7B%5B%40metadata%5D%5Bversion%5D%7D-2020.08.23/_doc
{
"@timestamp": "2020-01-27"
}
Create a data stream configured with data stream lifecyle.
PUT _index_template/my-index-template
{
"index_patterns": ["my-data-stream*"],
"data_stream": { },
"priority": 500,
"template": {
"lifecycle": {
"data_retention": "7d"
}
},
"_meta": {
"description": "Template with data stream lifecycle"
}
}
PUT _data_stream/my-data-stream
Index templates tab
Quick steps for testing
Legacy index templates are only shown in the UI on stateful and if a user has existing legacy index templates. You can test this functionality by creating one in Console:
PUT _template/template_1
{
"index_patterns": ["foo*"]
}
On serverless, Elasticsearch does not support legacy index templates and therefore this functionality is disabled in Kibana via the config xpack.index_management.enableLegacyTemplates
. For more details, see #163518.
To test Cloud-managed templates:
- Add
cluster.metadata.managed_index_templates
setting via Dev Tools:
PUT /_cluster/settings
{
"persistent": {
"cluster.metadata.managed_index_templates": ".cloud-"
}
}
- Create a template with the format:
.cloud-<template_name>
via Dev Tools.
PUT _template/.cloud-example
{
"index_patterns": [ "foobar*"]
}
The UI will now prevent you from editing or deleting this template.
In 7.x, the UI supports types defined as part of the mappings for legacy index templates. To test this out, use the "Load JSON" feature and verify the custom type is preserved:
{
"my_custom_type": {
"_source": {
"enabled": false
},
"properties": {
"name1": {
"type": "keyword"
}
}
}
}