-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Onboarding][Index detail] Update right side menu items (#194604)
## Summary In this PR, updates search index detail page right side menu item. The drop down menu item is updated to have : * Api reference doc link * Use in playground link which navigates to playground selecting this index name When documents exists right side header action is replaced with `Use in playground` else `Api reference doc link` ### Screenshot <img width="1728" alt="Screenshot 2024-10-01 at 11 07 45 AM" src="https://github.com/user-attachments/assets/026c89f8-08fa-41cf-b47f-73fcc2fb07ef"> <img width="1728" alt="Screenshot 2024-10-01 at 11 08 20 AM" src="https://github.com/user-attachments/assets/447641e0-8693-466a-a4d7-32764f86bf01"> **How to test:** 1. Enable searchIndices plugin in `kibana.dev.yml` as this plugin is behind Feature flag ``` xpack.searchIndices.enabled: true ``` 2. [Create new index](https://www.elastic.co/guide/en/elasticsearch/reference/current/indices-create-index.html) 3. Navigate to `/app/elasticsearch/indices/index_details/${indexName}/data` 4. Confirm index header action is `Api Reference doc` 5. Add documents confirm index header action is changed to `Use in playground` 6. Confirm menu item shows delete index, use in playground & api reference doc link ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed
- Loading branch information
1 parent
dfee928
commit d482a0a
Showing
6 changed files
with
243 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
132 changes: 132 additions & 0 deletions
132
x-pack/plugins/search_indices/public/components/indices/details_page_menu_item.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { | ||
| EuiButtonIcon, | ||
| EuiContextMenuItem, | ||
| EuiContextMenuPanel, | ||
| EuiIcon, | ||
| EuiPopover, | ||
| EuiText, | ||
| } from '@elastic/eui'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import React, { MouseEventHandler, ReactElement, useState } from 'react'; | ||
| import { useKibana } from '../../hooks/use_kibana'; | ||
|
|
||
| enum MenuItems { | ||
| playground = 'playground', | ||
| apiReference = 'apiReference', | ||
| deleteIndex = 'deleteIndex', | ||
| } | ||
| interface MenuItemsAction { | ||
| href?: string; | ||
| onClick?: (() => void) | MouseEventHandler; | ||
| } | ||
|
|
||
| const SearchIndexDetailsPageMenuItemPopoverItems = [ | ||
| { | ||
| type: MenuItems.playground, | ||
| iconType: 'launch', | ||
| dataTestSubj: 'moreOptionsPlayground', | ||
| iconComponent: <EuiIcon type="launch" />, | ||
| target: undefined, | ||
| text: ( | ||
| <EuiText size="s"> | ||
| {i18n.translate('xpack.searchIndices.moreOptions.playgroundLabel', { | ||
| defaultMessage: 'Use in Playground', | ||
| })} | ||
| </EuiText> | ||
| ), | ||
| color: undefined, | ||
| }, | ||
| { | ||
| type: MenuItems.apiReference, | ||
| iconType: 'documentation', | ||
| dataTestSubj: 'moreOptionsApiReference', | ||
| iconComponent: <EuiIcon type="documentation" />, | ||
| target: '_blank', | ||
| text: ( | ||
| <EuiText size="s"> | ||
| {i18n.translate('xpack.searchIndices.moreOptions.apiReferenceLabel', { | ||
| defaultMessage: 'API Reference', | ||
| })} | ||
| </EuiText> | ||
| ), | ||
| color: undefined, | ||
| }, | ||
| { | ||
| type: MenuItems.deleteIndex, | ||
| iconType: 'trash', | ||
| dataTestSubj: 'moreOptionsDeleteIndex', | ||
| iconComponent: <EuiIcon color="danger" type="trash" />, | ||
| target: undefined, | ||
| text: ( | ||
| <EuiText size="s" color="danger"> | ||
| {i18n.translate('xpack.searchIndices.moreOptions.deleteIndexLabel', { | ||
| defaultMessage: 'Delete Index', | ||
| })} | ||
| </EuiText> | ||
| ), | ||
| color: 'danger', | ||
| }, | ||
| ]; | ||
| interface SearchIndexDetailsPageMenuItemPopoverProps { | ||
| handleDeleteIndexModal: () => void; | ||
| navigateToPlayground: () => void; | ||
| } | ||
|
|
||
| export const SearchIndexDetailsPageMenuItemPopover = ({ | ||
| handleDeleteIndexModal, | ||
| navigateToPlayground, | ||
| }: SearchIndexDetailsPageMenuItemPopoverProps) => { | ||
| const [showMoreOptions, setShowMoreOptions] = useState<boolean>(false); | ||
| const { docLinks } = useKibana().services; | ||
| const contextMenuItemsActions: Record<MenuItems, MenuItemsAction> = { | ||
| playground: { | ||
| href: undefined, | ||
| onClick: navigateToPlayground, | ||
| }, | ||
| apiReference: { href: docLinks.links.apiReference, onClick: undefined }, | ||
| deleteIndex: { href: undefined, onClick: handleDeleteIndexModal }, | ||
| }; | ||
| const contextMenuItems: ReactElement[] = SearchIndexDetailsPageMenuItemPopoverItems.map( | ||
| (item) => ( | ||
| <EuiContextMenuItem | ||
| key={item.iconType} | ||
| icon={item.iconComponent} | ||
| href={contextMenuItemsActions[item.type]?.href} | ||
| size="s" | ||
| onClick={contextMenuItemsActions[item.type]?.onClick} | ||
| target={item.target} | ||
| data-test-subj={item.dataTestSubj} | ||
| color={item.color} | ||
| > | ||
| {item.text} | ||
| </EuiContextMenuItem> | ||
| ) | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiPopover | ||
| isOpen={showMoreOptions} | ||
| closePopover={() => setShowMoreOptions(!showMoreOptions)} | ||
| button={ | ||
| <EuiButtonIcon | ||
| iconType="boxesVertical" | ||
| onClick={() => setShowMoreOptions(!showMoreOptions)} | ||
| size="m" | ||
| data-test-subj="moreOptionsActionButton" | ||
| aria-label={i18n.translate('xpack.searchIndices.moreOptions.ariaLabel', { | ||
| defaultMessage: 'More options', | ||
| })} | ||
| /> | ||
| } | ||
| > | ||
| <EuiContextMenuPanel data-test-subj="moreOptionsContextMenu" items={contextMenuItems} /> | ||
| </EuiPopover> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.