[Search] Onboarding ux improvements

x-pack/plugins/search_indices/public/components/indices/details_page.tsx

@@ -13,6 +13,7 @@ import {
   EuiTabbedContent,
   EuiTabbedContentTab,
   useEuiTheme,
+  EuiButton,
 } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -71,6 +72,12 @@ export const SearchIndexDetailsPage = () => {
       await playgroundLocator.navigate({ 'default-index': index.name });
     }
   }, [share, index]);
+  const navigateToDiscover = useCallback(async () => {
+    const discoverLocator = share.url.locators.get('DISCOVER_APP_LOCATOR');
+    if (discoverLocator && indexName) {
+      await discoverLocator.navigate({ dataViewSpec: { title: indexName } });
+    }
+  }, [share, indexName]);
 
   const [isDocumentsExists, setDocumentsExists] = useState<boolean>(false);
   const [isDocumentsLoading, setDocumentsLoading] = useState<boolean>(true);
@@ -221,8 +228,37 @@ export const SearchIndexDetailsPage = () => {
             bottomBorder={false}
             rightSideItems={[
               <EuiFlexGroup gutterSize="m">
-                <EuiFlexItem>
-                  {!isDocumentsExists ? (
+                {isDocumentsExists ? (
+                  <>
+                    <EuiFlexItem>
+                      <EuiButtonEmpty
+                        isLoading={isDocumentsLoading}
+                        data-test-subj="useInPlaygroundLink"
+                        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"
@@ -232,33 +268,15 @@ export const SearchIndexDetailsPage = () => {
                     >
                       <FormattedMessage
                         id="xpack.searchIndices.indexAction.ApiReferenceButtonLabel"
-                        defaultMessage="{buttonLabel}"
-                        values={{
-                          buttonLabel: isDocumentsLoading ? 'Loading' : 'API Reference',
-                        }}
+                        defaultMessage="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',
-                        }}
-                      />
-                    </EuiButtonEmpty>
-                  )}
-                </EuiFlexItem>
+                  </EuiFlexItem>
+                )}
                 <EuiFlexItem>
                   <SearchIndexDetailsPageMenuItemPopover
                     handleDeleteIndexModal={handleDeleteIndexModal}
-                    navigateToPlayground={navigateToPlayground}
+                    showApiReference={isDocumentsExists}
                   />
                 </EuiFlexItem>
               </EuiFlexGroup>,

x-pack/plugins/search_indices/public/components/indices/details_page_menu_item.tsx

@@ -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

x-pack/plugins/search_indices/public/components/indices/details_page_settings.tsx

@@ -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 {
@@ -20,5 +21,10 @@ export const SearchIndexDetailsSettings = ({ indexName }: SearchIndexDetailsSett
     [indexManagement, history]
   );
 
-  return <IndexSettingsComponent indexName={indexName} />;
+  return (
+    <>
+      <EuiSpacer />
+      <IndexSettingsComponent indexName={indexName} />
+    </>
+  );
 };