From a8cec560a6f56922243d4fc7f4e31280807d770e Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 16 Oct 2024 02:33:38 +1100
Subject: [PATCH] [8.x] [Onboarding] UX Feedback - Slight Tweaks to search
 detail (#194873) (#196314)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Onboarding] UX Feedback - Slight Tweaks to search detail
(#194873)](https://github.com/elastic/kibana/pull/194873)

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

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

<!--BACKPORT [{"author":{"name":"Michael
DeFazio","email":"michael.defazio@elastic.co"},"sourceCommit":{"committedDate":"2024-10-15T13:33:31Z","message":"[Onboarding]
UX Feedback - Slight Tweaks to search detail (#194873)\n\nTweaks to
search
details\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a583a9d9-b059-4ce1-beaa-f7c733feabf0\r\n\r\n---------\r\n\r\nCo-authored-by:
Joseph McElroy <joseph.mcelroy@elastic.co>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"545f5a42f7af27bad33e272aa67eb59ac27e04ce","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"[Onboarding]
UX Feedback - Slight Tweaks to search
detail","number":194873,"url":"https://github.com/elastic/kibana/pull/194873","mergeCommit":{"message":"[Onboarding]
UX Feedback - Slight Tweaks to search detail (#194873)\n\nTweaks to
search
details\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a583a9d9-b059-4ce1-beaa-f7c733feabf0\r\n\r\n---------\r\n\r\nCo-authored-by:
Joseph McElroy <joseph.mcelroy@elastic.co>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"545f5a42f7af27bad33e272aa67eb59ac27e04ce"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194873","number":194873,"mergeCommit":{"message":"[Onboarding]
UX Feedback - Slight Tweaks to search detail (#194873)\n\nTweaks to
search
details\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a583a9d9-b059-4ce1-beaa-f7c733feabf0\r\n\r\n---------\r\n\r\nCo-authored-by:
Joseph McElroy <joseph.mcelroy@elastic.co>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"545f5a42f7af27bad33e272aa67eb59ac27e04ce"}}]}]
BACKPORT-->

Co-authored-by: Michael DeFazio <michael.defazio@elastic.co>
---
 .../src/components/api_key_form.tsx           |  2 +-
 .../src/providers/search_api_key_provider.tsx |  2 +-
 .../src/form_info_field/form_info_field.tsx   |  1 +
 .../components/indices/details_page.tsx       | 59 +++++++++----------
 .../components/quick_stats/quick_stat.tsx     |  9 ++-
 .../svl_search_index_detail_page.ts           |  9 ---
 .../test_suites/search/search_index_detail.ts |  5 --
 7 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/packages/kbn-search-api-keys-components/src/components/api_key_form.tsx b/packages/kbn-search-api-keys-components/src/components/api_key_form.tsx
index 02e5a46b640ac..0a94f3e336897 100644
--- a/packages/kbn-search-api-keys-components/src/components/api_key_form.tsx
+++ b/packages/kbn-search-api-keys-components/src/components/api_key_form.tsx
@@ -47,7 +47,7 @@ export const ApiKeyForm: React.FC<ApiKeyFormProps> = ({ hasTitle = true }) => {
         actions={[
           <EuiButtonIcon
             iconType={apiKeyIsVisible ? 'eyeClosed' : 'eye'}
-            color="success"
+            color="text"
             onClick={toggleApiKeyVisibility}
             data-test-subj="showAPIKeyButton"
             aria-label={i18n.translate('searchApiKeysComponents.apiKeyForm.showApiKey', {
diff --git a/packages/kbn-search-api-keys-components/src/providers/search_api_key_provider.tsx b/packages/kbn-search-api-keys-components/src/providers/search_api_key_provider.tsx
index d524280cfb613..a3d3ce2aea830 100644
--- a/packages/kbn-search-api-keys-components/src/providers/search_api_key_provider.tsx
+++ b/packages/kbn-search-api-keys-components/src/providers/search_api_key_provider.tsx
@@ -169,7 +169,7 @@ export const SearchApiKeyProvider: React.FC<React.PropsWithChildren> = ({ childr
   }, [state.status, createApiKey, validateApiKey]);
 
   const value: APIKeyContext = {
-    displayedApiKey: state.status === Status.showHiddenKey ? API_KEY_MASK : state.apiKey,
+    displayedApiKey: state.status === Status.showPreviewKey ? state.apiKey : API_KEY_MASK,
     apiKey: state.apiKey,
     toggleApiKeyVisibility: handleShowKeyVisibility,
     updateApiKey,
diff --git a/x-pack/packages/search/shared_ui/src/form_info_field/form_info_field.tsx b/x-pack/packages/search/shared_ui/src/form_info_field/form_info_field.tsx
index c99daba9f4537..5a63ad81ced21 100644
--- a/x-pack/packages/search/shared_ui/src/form_info_field/form_info_field.tsx
+++ b/x-pack/packages/search/shared_ui/src/form_info_field/form_info_field.tsx
@@ -73,6 +73,7 @@ export const FormInfoField: React.FC<FormInfoFieldProps> = ({
             <EuiButtonIcon
               onClick={copy}
               iconType="copy"
+              color="text"
               data-test-subj={copyValueDataTestSubj}
               aria-label={i18n.translate('xpack.searchSharedUI.formInfoField.copyMessage', {
                 defaultMessage: 'Copy to clipboard',
diff --git a/x-pack/plugins/search_indices/public/components/indices/details_page.tsx b/x-pack/plugins/search_indices/public/components/indices/details_page.tsx
index 8cc673d073101..4d82ac053f65c 100644
--- a/x-pack/plugins/search_indices/public/components/indices/details_page.tsx
+++ b/x-pack/plugins/search_indices/public/components/indices/details_page.tsx
@@ -6,14 +6,13 @@
  */
 
 import {
-  EuiPageSection,
-  EuiButton,
   EuiPageTemplate,
   EuiFlexItem,
   EuiFlexGroup,
   EuiButtonEmpty,
   EuiTabbedContent,
   EuiTabbedContentTab,
+  useEuiTheme,
 } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -159,6 +158,7 @@ export const SearchIndexDetailsPage = () => {
   const handleDeleteIndexModal = useCallback(() => {
     setShowDeleteIndexModal(!isShowingDeleteModal);
   }, [isShowingDeleteModal]);
+  const { euiTheme } = useEuiTheme();
 
   if (isInitialLoading || isMappingsInitialLoading) {
     return (
@@ -187,24 +187,13 @@ export const SearchIndexDetailsPage = () => {
         />
       ) : (
         <>
-          <EuiPageSection>
-            <EuiButton
-              data-test-subj="backToIndicesButton"
-              color="text"
-              iconType="arrowLeft"
-              onClick={() => navigateToIndexListPage()}
-            >
-              <FormattedMessage
-                id="xpack.searchIndices.backToIndicesButtonLabel"
-                defaultMessage="Back to indices"
-              />
-            </EuiButton>
-          </EuiPageSection>
           <EuiPageTemplate.Header
+            restrictWidth
             data-test-subj="searchIndexDetailsHeader"
             pageTitle={index?.name}
+            bottomBorder={false}
             rightSideItems={[
-              <EuiFlexGroup gutterSize="none">
+              <EuiFlexGroup gutterSize="m">
                 <EuiFlexItem>
                   {!isDocumentsExists ? (
                     <EuiButtonEmpty
@@ -248,23 +237,29 @@ export const SearchIndexDetailsPage = () => {
               </EuiFlexGroup>,
             ]}
           />
-          <EuiPageTemplate.Section grow={false}>
+          <EuiPageTemplate.Section
+            grow={false}
+            restrictWidth
+            css={{ padding: `0 ${euiTheme.size.l} ${euiTheme.size.l}` }}
+          >
             <EuiFlexGroup direction="column">
-              <EuiFlexItem>
-                <EuiFlexGroup css={{ overflow: 'auto' }}>
-                  <EuiFlexItem css={{ flexShrink: 0 }}>
-                    <ConnectionDetails />
-                  </EuiFlexItem>
-                  <EuiFlexItem css={{ flexShrink: 0 }}>
-                    <ApiKeyForm />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiFlexGroup>
-                  <QuickStats index={index} mappings={mappings} />
-                </EuiFlexGroup>
-              </EuiFlexItem>
+              <EuiFlexGroup direction="column">
+                <EuiFlexItem>
+                  <EuiFlexGroup css={{ overflow: 'auto' }} wrap>
+                    <EuiFlexItem grow={false} css={{ minWidth: 400 }}>
+                      <ConnectionDetails />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false} css={{ minWidth: 400 }}>
+                      <ApiKeyForm />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFlexGroup>
+                    <QuickStats index={index} mappings={mappings} />
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
               <EuiFlexItem>
                 <EuiFlexItem>
                   <EuiTabbedContent
diff --git a/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx b/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx
index 0d72835ad5779..006906f8dd295 100644
--- a/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx
+++ b/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiPanel,
+  EuiTitle,
   EuiText,
   useEuiTheme,
   useGeneratedHtmlId,
@@ -83,12 +84,14 @@ export const QuickStat: React.FC<BaseQuickStatProps> = ({
               <EuiIcon type={icon} color={iconColor} />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiText>
+              <EuiTitle size="xxs">
                 <h4>{title}</h4>
-              </EuiText>
+              </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiText color="subdued">{secondaryTitle}</EuiText>
+              <EuiText size="s" color="subdued">
+                {secondaryTitle}
+              </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPanel>
diff --git a/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts b/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts
index ca28207f54195..ed11a09c26b66 100644
--- a/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts
+++ b/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts
@@ -23,15 +23,6 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
     async expectUseInPlaygroundLinkExists() {
       await testSubjects.existOrFail('useInPlaygroundLink', { timeout: 5000 });
     },
-    async expectBackToIndicesButtonExists() {
-      await testSubjects.existOrFail('backToIndicesButton', { timeout: 2000 });
-    },
-    async clickBackToIndicesButton() {
-      await testSubjects.click('backToIndicesButton');
-    },
-    async expectBackToIndicesButtonRedirectsToListPage() {
-      await testSubjects.existOrFail('indicesList');
-    },
     async expectConnectionDetails() {
       await testSubjects.existOrFail('connectionDetailsEndpoint', { timeout: 2000 });
       expect(await (await testSubjects.find('connectionDetailsEndpoint')).getVisibleText()).to.be(
diff --git a/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts b/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts
index 66f15151441ae..aea757f7edea1 100644
--- a/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts
+++ b/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts
@@ -96,11 +96,6 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await pageObjects.svlSearchIndexDetailPage.expectAPIKeyToBeVisibleInCodeBlock(apiKey);
       });
 
-      it('back to indices button should redirect to list page', async () => {
-        await pageObjects.svlSearchIndexDetailPage.expectBackToIndicesButtonExists();
-        await pageObjects.svlSearchIndexDetailPage.clickBackToIndicesButton();
-        await pageObjects.svlSearchIndexDetailPage.expectBackToIndicesButtonRedirectsToListPage();
-      });
       describe('With data', () => {
         before(async () => {
           await es.index({