[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)](#194873)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Michael DeFazio <[email protected]>
elastic · Oct 15, 2024 · a8cec56 · a8cec56
1 parent db2adf7
commit a8cec56
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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({