Skip to content

Commit

Permalink
[8.x] [Search] Onboarding ux improvements (#196726) (#196927)
Browse files Browse the repository at this point in the history 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Search] Onboarding ux improvements
(#196726)](#196726)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Yan
Savitski","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-18T16:32:33Z","message":"[Search]
Onboarding ux improvements (#196726)\n\nAcceptance Criteria\r\n\r\n- [x]
Update Use in Playground to be a filled button and labelled\r\n“Search
in Playground” (not empty button)\r\n- [x] Include View in Discover as a
default button in page header\r\n- [x] Hide 'Add reference' in context
menu when documents not presented\r\nin index to avoid duplication of
this button\r\n- [x] Add Spacer in settings\r\n\r\n<img width=\"1212\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/bcdfca68-b30f-4597-9e80-b0f27fcf6c9b\">\r\n<img
width=\"1212\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/48d78874-806f-4ba1-bca6-ba5516e4fcfa\">","sha":"01d32b0dc0f377d8608a4b63c455b4982b1f33d3","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-minor","v8.16.0"],"title":"[Search]
Onboarding ux
improvements","number":196726,"url":"https://github.com/elastic/kibana/pull/196726","mergeCommit":{"message":"[Search]
Onboarding ux improvements (#196726)\n\nAcceptance Criteria\r\n\r\n- [x]
Update Use in Playground to be a filled button and labelled\r\n“Search
in Playground” (not empty button)\r\n- [x] Include View in Discover as a
default button in page header\r\n- [x] Hide 'Add reference' in context
menu when documents not presented\r\nin index to avoid duplication of
this button\r\n- [x] Add Spacer in settings\r\n\r\n<img width=\"1212\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/bcdfca68-b30f-4597-9e80-b0f27fcf6c9b\">\r\n<img
width=\"1212\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/48d78874-806f-4ba1-bca6-ba5516e4fcfa\">","sha":"01d32b0dc0f377d8608a4b63c455b4982b1f33d3"}},"sourceBranch":"main","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196726","number":196726,"mergeCommit":{"message":"[Search]
Onboarding ux improvements (#196726)\n\nAcceptance Criteria\r\n\r\n- [x]
Update Use in Playground to be a filled button and labelled\r\n“Search
in Playground” (not empty button)\r\n- [x] Include View in Discover as a
default button in page header\r\n- [x] Hide 'Add reference' in context
menu when documents not presented\r\nin index to avoid duplication of
this button\r\n- [x] Add Spacer in settings\r\n\r\n<img width=\"1212\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/bcdfca68-b30f-4597-9e80-b0f27fcf6c9b\">\r\n<img
width=\"1212\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/48d78874-806f-4ba1-bca6-ba5516e4fcfa\">","sha":"01d32b0dc0f377d8608a4b63c455b4982b1f33d3"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Yan Savitski <[email protected]>
  • Loading branch information
@kibanamachine @yansavitski
kibanamachine and yansavitski authored Oct 18, 2024
1 parent ecf451f commit 17ddf8d
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 119 deletions.
68 changes: 41 additions & 27 deletions x-pack/plugins/search_indices/public/components/indices/details_page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@ import {
EuiTabbedContent,
EuiTabbedContentTab,
useEuiTheme,
EuiButton,
} from '@elastic/eui';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
import { ApiKeyForm } from '@kbn/search-api-keys-components';
import { useNavigateToDiscover } from '../../hooks/use_navigate_to_discover';
import { useIndex } from '../../hooks/api/use_index';
import { useKibana } from '../../hooks/use_kibana';
import { ConnectionDetails } from '../connection_details/connection_details';
Expand Down Expand Up @@ -71,13 +73,14 @@ export const SearchIndexDetailsPage = () => {
await playgroundLocator.navigate({ 'default-index': index.name });
}
}, [share, index]);
const navigateToDiscover = useNavigateToDiscover(indexName);

const [isDocumentsExists, setDocumentsExists] = useState<boolean>(false);
const [hasDocuments, setHasDocuments] = useState<boolean>(false);
const [isDocumentsLoading, setDocumentsLoading] = useState<boolean>(true);
useEffect(() => {
setDocumentsLoading(isInitialLoading);
setDocumentsExists(!(!isInitialLoading && indexDocuments?.results?.data.length === 0));
}, [indexDocuments, isInitialLoading, setDocumentsExists, setDocumentsLoading]);
setHasDocuments(!(!isInitialLoading && indexDocuments?.results?.data.length === 0));
}, [indexDocuments, isInitialLoading, setHasDocuments, setDocumentsLoading]);

useEffect(() => {
chrome.docTitle.change(indexName);
Expand Down Expand Up @@ -221,8 +224,37 @@ export const SearchIndexDetailsPage = () => {
bottomBorder={false}
rightSideItems={[
<EuiFlexGroup gutterSize="m">
<EuiFlexItem>
{!isDocumentsExists ? (
{hasDocuments ? (
<>
<EuiFlexItem>
<EuiButtonEmpty
isLoading={isDocumentsLoading}
data-test-subj="viewInDiscoverLink"
onClick={navigateToDiscover}
>
<FormattedMessage
id="xpack.searchIndices.indexAction.useInPlaygroundButtonLabel"
defaultMessage="View in Discover"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem>
<EuiButton
isLoading={isDocumentsLoading}
data-test-subj="useInPlaygroundLink"
onClick={navigateToPlayground}
iconType="launch"
fill
>
<FormattedMessage
id="xpack.searchIndices.indexAction.useInPlaygroundButtonLabel"
defaultMessage="Search in Playground"
/>
</EuiButton>
</EuiFlexItem>
</>
) : (
<EuiFlexItem>
<EuiButtonEmpty
href={docLinks.links.apiReference}
target="_blank"
Expand All @@ -232,33 +264,15 @@ export const SearchIndexDetailsPage = () => {
>
<FormattedMessage
id="xpack.searchIndices.indexAction.ApiReferenceButtonLabel"
defaultMessage="{buttonLabel}"
values={{
buttonLabel: isDocumentsLoading ? 'Loading' : 'API Reference',
}}
/>
</EuiButtonEmpty>
) : (
<EuiButtonEmpty
isLoading={isDocumentsLoading}
iconType="launch"
data-test-subj="useInPlaygroundLink"
onClick={navigateToPlayground}
>
<FormattedMessage
id="xpack.searchIndices.indexAction.useInPlaygroundButtonLabel"
defaultMessage="{buttonLabel}"
values={{
buttonLabel: isDocumentsLoading ? 'Loading' : 'Use in Playground',
}}
defaultMessage="API Reference"
/>
</EuiButtonEmpty>
)}
</EuiFlexItem>
</EuiFlexItem>
)}
<EuiFlexItem>
<SearchIndexDetailsPageMenuItemPopover
handleDeleteIndexModal={handleDeleteIndexModal}
navigateToPlayground={navigateToPlayground}
showApiReference={hasDocuments}
/>
</EuiFlexItem>
</EuiFlexGroup>,
Expand Down
114 changes: 34 additions & 80 deletions x-pack/plugins/search_indices/public/components/indices/details_page_menu_item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,101 +14,55 @@ import {
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { MouseEventHandler, ReactElement, useState } from 'react';
import React, { ReactElement, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n-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;
showApiReference: boolean;
}

export const SearchIndexDetailsPageMenuItemPopover = ({
showApiReference = false,
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) => (
const contextMenuItems = [
showApiReference && (
<EuiContextMenuItem
key={item.iconType}
icon={item.iconComponent}
href={contextMenuItemsActions[item.type]?.href}
key="apiReference"
icon={<EuiIcon type="documentation" />}
href={docLinks.links.apiReference}
size="s"
onClick={contextMenuItemsActions[item.type]?.onClick}
target={item.target}
data-test-subj={item.dataTestSubj}
color={item.color}
target="_blank"
data-test-subj="moreOptionsApiReference"
>
{item.text}
<EuiText size="s">
<FormattedMessage
id="xpack.searchIndices.moreOptions.apiReferenceLabel"
defaultMessage="API Reference"
/>
</EuiText>
</EuiContextMenuItem>
)
);
),
<EuiContextMenuItem
key="deleteIndex"
icon={<EuiIcon color="danger" type="trash" />}
size="s"
onClick={handleDeleteIndexModal}
data-test-subj="moreOptionsDeleteIndex"
color="danger"
>
<EuiText size="s" color="danger">
<FormattedMessage
id="xpack.searchIndices.moreOptions.deleteIndexLabel"
defaultMessage="Delete Index"
/>
</EuiText>
</EuiContextMenuItem>,
].filter(Boolean) as ReactElement[];

return (
<EuiPopover
Expand Down
8 changes: 7 additions & 1 deletion x-pack/plugins/search_indices/public/components/indices/details_page_settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import React from 'react';
import { useMemo } from 'react';
import { EuiSpacer } from '@elastic/eui';
import { useKibana } from '../../hooks/use_kibana';

interface SearchIndexDetailsSettingsProps {
Expand All @@ -20,5 +21,10 @@ export const SearchIndexDetailsSettings = ({ indexName }: SearchIndexDetailsSett
[indexManagement, history]
);

return <IndexSettingsComponent indexName={indexName} />;
return (
<>
<EuiSpacer />
<IndexSettingsComponent indexName={indexName} />
</>
);
};
22 changes: 22 additions & 0 deletions x-pack/plugins/search_indices/public/hooks/use_navigate_to_discover.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* 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 { useCallback } from 'react';
import { useKibana } from './use_kibana';

const DISCOVER_LOCATOR_ID = 'DISCOVER_APP_LOCATOR';

export const useNavigateToDiscover = (indexName: string) => {
const { share } = useKibana().services;

return useCallback(async () => {
const discoverLocator = share.url.locators.get(DISCOVER_LOCATOR_ID);
if (discoverLocator && indexName) {
await discoverLocator.navigate({ dataViewSpec: { title: indexName } });
}
}, [share, indexName]);
};
10 changes: 6 additions & 4 deletions x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
async expectAPIReferenceDocLinkExists() {
await testSubjects.existOrFail('ApiReferenceDoc', { timeout: 2000 });
},
async expectUseInPlaygroundLinkExists() {
async expectActionItemReplacedWhenHasDocs() {
await testSubjects.missingOrFail('ApiReferenceDoc', { timeout: 2000 });
await testSubjects.existOrFail('useInPlaygroundLink', { timeout: 5000 });
await testSubjects.existOrFail('viewInDiscoverLink', { timeout: 5000 });
},
async expectConnectionDetails() {
await testSubjects.existOrFail('connectionDetailsEndpoint', { timeout: 2000 });
Expand Down Expand Up @@ -76,9 +78,6 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
async expectMoreOptionsOverviewMenuIsShown() {
await testSubjects.existOrFail('moreOptionsContextMenu');
},
async expectPlaygroundButtonExistsInMoreOptions() {
await testSubjects.existOrFail('moreOptionsPlayground');
},
async expectToNavigateToPlayground(indexName: string) {
await testSubjects.click('moreOptionsPlayground');
expect(await browser.getCurrentUrl()).contain(
Expand All @@ -89,6 +88,9 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
async expectAPIReferenceDocLinkExistsInMoreOptions() {
await testSubjects.existOrFail('moreOptionsApiReference', { timeout: 2000 });
},
async expectAPIReferenceDocLinkMissingInMoreOptions() {
await testSubjects.missingOrFail('moreOptionsApiReference', { timeout: 2000 });
},
async expectDeleteIndexButtonExistsInMoreOptions() {
await testSubjects.existOrFail('moreOptionsDeleteIndex');
},
Expand Down
13 changes: 6 additions & 7 deletions x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
await pageObjects.svlSearchIndexDetailPage.expectIndexDetailPageHeader();
await pageObjects.svlSearchIndexDetailPage.expectSearchIndexDetailsTabsExists();
await pageObjects.svlSearchIndexDetailPage.expectAPIReferenceDocLinkExists();
await pageObjects.svlSearchIndexDetailPage.expectAPIReferenceDocLinkMissingInMoreOptions();
});
it('should have embedded dev console', async () => {
await testHasEmbeddedConsole(pageObjects);
Expand Down Expand Up @@ -117,7 +118,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
await svlSearchNavigation.navigateToIndexDetailPage(indexName);
});
it('menu action item should be replaced with playground', async () => {
await pageObjects.svlSearchIndexDetailPage.expectUseInPlaygroundLinkExists();
await pageObjects.svlSearchIndexDetailPage.expectActionItemReplacedWhenHasDocs();
});
it('should have link to API reference doc link in options menu', async () => {
await pageObjects.svlSearchIndexDetailPage.clickMoreOptionsActionsButton();
await pageObjects.svlSearchIndexDetailPage.expectAPIReferenceDocLinkExistsInMoreOptions();
});
it('should have index documents', async () => {
await pageObjects.svlSearchIndexDetailPage.expectHasIndexDocuments();
Expand Down Expand Up @@ -167,12 +172,6 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
await pageObjects.svlSearchIndexDetailPage.clickMoreOptionsActionsButton();
await pageObjects.svlSearchIndexDetailPage.expectMoreOptionsOverviewMenuIsShown();
});
it('should have link to API reference doc link', async () => {
await pageObjects.svlSearchIndexDetailPage.expectAPIReferenceDocLinkExistsInMoreOptions();
});
it('should have link to playground', async () => {
await pageObjects.svlSearchIndexDetailPage.expectPlaygroundButtonExistsInMoreOptions();
});
it('should delete index', async () => {
await pageObjects.svlSearchIndexDetailPage.expectDeleteIndexButtonExistsInMoreOptions();
await pageObjects.svlSearchIndexDetailPage.clickDeleteIndexButton();
Expand Down

0 comments on commit 17ddf8d

Please sign in to comment.