[8.x] [Onboarding] Search detail document list tweaks (#194804) (#195982)

# Backport This will backport the following commits from `main` to `8.x`: - [[Onboarding] Search detail document list tweaks (#194804)](https://github.com/elastic/kibana/pull/194804)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Joe McElroy <joseph.mcelroy@elastic.co>
2025-04-25 02:09:32 -04:00 · 2024-10-12 08:04:30 +11:00 · 2024-10-12 08:04:30 +11:00 · 18d03f264d
commit 18d03f264d
parent 5eafc27e2a
12 changed files with 310 additions and 156 deletions
--- a/packages/kbn-search-index-documents/components/result/constants.ts
+++ b/packages/kbn-search-index-documents/components/result/constants.ts
@ -0,0 +1,10 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const PERMANENTLY_TRUNCATED_FIELDS = ['dense_vector', 'sparse_vector'];
--- a/packages/kbn-search-index-documents/components/result/index.ts
+++ b/packages/kbn-search-index-documents/components/result/index.ts
@ -12,4 +12,5 @@ export {
  resultMetaData,
  resultToFieldFromMappingResponse,
  resultToFieldFromMappings as resultToField,
+  reorderFieldsInImportance,
 } from './result_metadata';
--- a/packages/kbn-search-index-documents/components/result/result.scss
+++ b/packages/kbn-search-index-documents/components/result/result.scss
@ -1,20 +1,36 @@
-.resultField:nth-child(odd) {
-  background-color: $euiColorLightestShade;
-}
-
 .resultField {
-  padding: $euiSizeXS $euiSizeS;
+  padding: 0;
+  border-bottom: 1px solid $euiColorLightShade;
+  position: relative;

-  > .euiTableRowCell {
+  &:last-child {
+    border-bottom: none;
+  }
+
+  >.euiTableRow:hover {
+    background-color: $euiColorEmptyShade;
+  }
+
+  >.euiTableRowCell {
    border-top: none;
    border-bottom: none;

-    > .euiTableCellContent {
-      padding: $euiSizeXS;
+    >.euiTableCellContent {
+      padding: $euiSizeS;
+      font-family: $euiCodeFontFamily;
+      color: $euiColorMediumShade;
    }
  }
 }

+.denseVectorFieldValue {
+  position: absolute;
+  right: 0;
+  top: $euiSizeS;
+  background-color: $euiColorEmptyShade;
+  padding: 0 $euiSizeS;
+}
+
 .resultExpandColumn {
  border-left: $euiBorderThin;
  align-items: flex-start;
@ -31,4 +47,4 @@
  display: flex;
  align-items: center;
  justify-content: flex-start;
-}
+}
--- a/packages/kbn-search-index-documents/components/result/result.tsx
+++ b/packages/kbn-search-index-documents/components/result/result.tsx
@ -13,8 +13,8 @@ import {
  EuiButtonIcon,
  EuiFlexGroup,
  EuiFlexItem,
-  EuiPanel,
-  EuiSpacer,
+  EuiHorizontalRule,
+  EuiSplitPanel,
  EuiToolTip,
 } from '@elastic/eui';

@ -66,99 +66,65 @@ export const Result: React.FC<ResultProps> = ({
  const toolTipContent = <>{tooltipText}</>;

  return (
-    <EuiPanel
-      hasBorder
-      data-test-subj="search-index-documents-result"
-      paddingSize={compactCard ? 's' : 'l'}
-    >
-      <EuiFlexGroup gutterSize="none">
-        <EuiFlexItem>
-          <EuiFlexGroup
-            direction="column"
-            gutterSize="none"
-            responsive={false}
-            justifyContent="spaceAround"
-          >
-            <EuiFlexItem grow={false}>
-              {compactCard && (
-                <ResultHeader
-                  title={
-                    metaData.title ??
-                    i18n.translate('searchIndexDocuments.result.title.id', {
-                      defaultMessage: 'Document id: {id}',
-                      values: { id: metaData.id },
-                    })
-                  }
-                  metaData={{
-                    ...metaData,
-                    onDocumentDelete,
-                  }}
-                />
-              )}
-              {!compactCard && (
-                <RichResultHeader
-                  showScore={showScore}
-                  title={
-                    metaData.title ??
-                    i18n.translate('searchIndexDocuments.result.title.id', {
-                      defaultMessage: 'Document id: {id}',
-                      values: { id: metaData.id },
-                    })
-                  }
-                  onTitleClick={onDocumentClick}
-                  metaData={{
-                    ...metaData,
-                    onDocumentDelete,
-                  }}
-                  rightSideActions={
-                    <EuiFlexItem grow={false}>
-                      <EuiToolTip position="left" content={toolTipContent}>
-                        <EuiButtonIcon
-                          iconType={isExpanded ? 'fold' : 'unfold'}
-                          color={isExpanded ? 'danger' : 'primary'}
-                          onClick={(e: React.MouseEvent<HTMLElement>) => {
-                            e.stopPropagation();
-                            setIsExpanded(!isExpanded);
-                          }}
-                          aria-label={tooltipText}
-                        />
-                      </EuiToolTip>
-                    </EuiFlexItem>
-                  }
-                />
-              )}
-            </EuiFlexItem>
-            <EuiFlexItem>
-              {!compactCard &&
-                ((isExpanded && fields.length > 0) ||
-                  (!isExpanded && fields.slice(0, defaultVisibleFields).length > 0)) && (
-                  <EuiSpacer size="l" />
-                )}
-              <ResultFields
-                isExpanded={isExpanded}
-                fields={isExpanded ? fields : fields.slice(0, defaultVisibleFields)}
+    <EuiSplitPanel.Outer hasBorder={true} data-test-subj="search-index-documents-result">
+      <EuiSplitPanel.Inner paddingSize="m" color="plain" className="resultHeaderContainer">
+        <EuiFlexGroup gutterSize="none" alignItems="center">
+          <EuiFlexItem>
+            {compactCard && (
+              <ResultHeader
+                title={
+                  metaData.title ??
+                  i18n.translate('searchIndexDocuments.result.title.id', {
+                    defaultMessage: 'Document id: {id}',
+                    values: { id: metaData.id },
+                  })
+                }
+                metaData={metaData}
              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        {compactCard && (
-          <EuiFlexItem grow={false}>
-            <div className="resultExpandColumn">
-              <EuiToolTip position="left" content={toolTipContent}>
-                <EuiButtonIcon
-                  iconType={isExpanded ? 'fold' : 'unfold'}
-                  color="text"
-                  onClick={(e: React.MouseEvent<HTMLElement>) => {
-                    e.stopPropagation();
-                    setIsExpanded(!isExpanded);
-                  }}
-                  aria-label={tooltipText}
-                />
-              </EuiToolTip>
-            </div>
+            )}
+
+            {!compactCard && (
+              <RichResultHeader
+                showScore={showScore}
+                title={
+                  metaData.title ??
+                  i18n.translate('searchIndexDocuments.result.title.id', {
+                    defaultMessage: 'Document id: {id}',
+                    values: { id: metaData.id },
+                  })
+                }
+                onTitleClick={onDocumentClick}
+                metaData={{
+                  ...metaData,
+                  onDocumentDelete,
+                }}
+              />
+            )}
          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    </EuiPanel>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip position="left" content={toolTipContent}>
+              <EuiButtonIcon
+                size="xs"
+                iconType={isExpanded ? 'fold' : 'unfold'}
+                color={isExpanded ? 'danger' : 'primary'}
+                data-test-subj={isExpanded ? 'documentShowLessFields' : 'documentShowMoreFields'}
+                onClick={(e: React.MouseEvent<HTMLElement>) => {
+                  e.stopPropagation();
+                  setIsExpanded(!isExpanded);
+                }}
+                aria-label={tooltipText}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiSplitPanel.Inner>
+      <EuiHorizontalRule margin="none" />
+      <EuiSplitPanel.Inner paddingSize="m">
+        <ResultFields
+          isExpanded={isExpanded}
+          fields={isExpanded ? fields : fields.slice(0, defaultVisibleFields)}
+        />
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
  );
 };
--- a/packages/kbn-search-index-documents/components/result/result_field.tsx
+++ b/packages/kbn-search-index-documents/components/result/result_field.tsx
@ -9,17 +9,12 @@

 import React from 'react';

-import {
-  EuiCodeBlock,
-  EuiIcon,
-  EuiTableRow,
-  EuiTableRowCell,
-  EuiText,
-  EuiToken,
-} from '@elastic/eui';
+import { EuiTableRow, EuiTableRowCell, EuiText, EuiToken } from '@elastic/eui';

 import { euiThemeVars } from '@kbn/ui-theme';
 import { ResultFieldProps } from './result_types';
+import { PERMANENTLY_TRUNCATED_FIELDS } from './constants';
+import { ResultFieldValue } from './result_field_value';

 const iconMap: Record<string, string> = {
  boolean: 'tokenBoolean',
@ -64,9 +59,11 @@ export const ResultField: React.FC<ResultFieldProps> = ({
  iconType,
  fieldName,
  fieldValue,
-  fieldType,
+  fieldType = 'object',
  isExpanded,
 }) => {
+  const shouldTruncate = !isExpanded || PERMANENTLY_TRUNCATED_FIELDS.includes(fieldType);
+
  return (
    <EuiTableRow className="resultField">
      <EuiTableRowCell className="resultFieldRowCell" width={euiThemeVars.euiSizeL} valign="middle">
@ -79,31 +76,16 @@ export const ResultField: React.FC<ResultFieldProps> = ({
      </EuiTableRowCell>
      <EuiTableRowCell
        className="resultFieldRowCell"
-        width="25%"
+        width="20%"
        truncateText={!isExpanded}
        valign="middle"
      >
-        <EuiText size="xs">{fieldName}</EuiText>
+        <EuiText size="s" color="default">
+          {fieldName}
+        </EuiText>
      </EuiTableRowCell>
-      <EuiTableRowCell
-        className="resultFieldRowCell"
-        width={euiThemeVars.euiSizeXXL}
-        valign="middle"
-      >
-        <EuiIcon type="sortRight" color="subdued" />
-      </EuiTableRowCell>
-      <EuiTableRowCell className="resultFieldRowCell" truncateText={!isExpanded} valign="middle">
-        {(fieldType === 'object' ||
-          fieldType === 'array' ||
-          fieldType === 'nested' ||
-          Array.isArray(fieldValue)) &&
-        isExpanded ? (
-          <EuiCodeBlock language="json" overflowHeight="250" transparentBackground>
-            {fieldValue}
-          </EuiCodeBlock>
-        ) : (
-          <EuiText size="xs">{fieldValue}</EuiText>
-        )}
+      <EuiTableRowCell className="resultFieldRowCell" truncateText={shouldTruncate} valign="middle">
+        <ResultFieldValue fieldValue={fieldValue} fieldType={fieldType} isExpanded={isExpanded} />
      </EuiTableRowCell>
    </EuiTableRow>
  );
--- a/packages/kbn-search-index-documents/components/result/result_field_value.tsx
+++ b/packages/kbn-search-index-documents/components/result/result_field_value.tsx
@ -0,0 +1,94 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+
+import {
+  EuiBadge,
+  EuiCodeBlock,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { PERMANENTLY_TRUNCATED_FIELDS } from './constants';
+
+interface ResultFieldValueProps {
+  fieldValue: string;
+  fieldType: string;
+  isExpanded?: boolean;
+}
+
+export const ResultFieldValue: React.FC<ResultFieldValueProps> = ({
+  fieldValue,
+  fieldType,
+  isExpanded = false,
+}) => {
+  if (
+    isExpanded &&
+    fieldType &&
+    (['object', 'array', 'nested'].includes(fieldType) || Array.isArray(fieldValue))
+  ) {
+    return (
+      <EuiCodeBlock language="json" transparentBackground fontSize="s">
+        {fieldValue}
+      </EuiCodeBlock>
+    );
+  } else if (PERMANENTLY_TRUNCATED_FIELDS.includes(fieldType)) {
+    return (
+      <>
+        <EuiText size="s" color="default">
+          {fieldValue}
+        </EuiText>
+        {fieldType === 'dense_vector' && (
+          <div className={'denseVectorFieldValue'}>
+            <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="s">
+              <EuiFlexItem>
+                <EuiBadge color="hollow">
+                  {i18n.translate('searchIndexDocuments.result.value.denseVector.dimLabel', {
+                    defaultMessage: '{value} dims',
+                    values: {
+                      value: JSON.parse(fieldValue).length,
+                    },
+                  })}
+                </EuiBadge>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiCopy textToCopy={fieldValue}>
+                  {(copy) => (
+                    <EuiIcon
+                      type="copyClipboard"
+                      onClick={copy}
+                      data-test-subj="copyDenseVector"
+                      aria-label={i18n.translate(
+                        'searchIndexDocuments.result.value.denseVector.copy',
+                        {
+                          defaultMessage: 'Copy vector',
+                        }
+                      )}
+                    />
+                  )}
+                </EuiCopy>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+        )}
+      </>
+    );
+  } else {
+    return (
+      <EuiText size="s" color="default">
+        {fieldValue}
+      </EuiText>
+    );
+  }
+};
--- a/packages/kbn-search-index-documents/components/result/result_header.tsx
+++ b/packages/kbn-search-index-documents/components/result/result_header.tsx
@ -17,8 +17,8 @@ import {
  EuiPopover,
  EuiPopoverFooter,
  EuiPopoverTitle,
-  EuiText,
  EuiTextColor,
+  EuiTitle,
 } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
@ -95,18 +95,18 @@ const MetadataPopover: React.FC<MetaDataProps> = ({ id, onDocumentDelete }) => {
 export const ResultHeader: React.FC<Props> = ({ title, metaData }) => {
  return (
    <div className="resultHeader">
-      <EuiText size="s">
-        <EuiFlexGroup alignItems="center" gutterSize="s">
-          <EuiFlexItem>
-            <strong>{title}</strong>
+      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
+        <EuiFlexItem>
+          <EuiTitle size="xs">
+            <h4>{title}</h4>
+          </EuiTitle>
+        </EuiFlexItem>
+        {!!metaData && (
+          <EuiFlexItem grow={false}>
+            <MetadataPopover {...metaData} />
          </EuiFlexItem>
-          {!!metaData && (
-            <EuiFlexItem grow={false}>
-              <MetadataPopover {...metaData} />
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </EuiText>
+        )}
+      </EuiFlexGroup>
    </div>
  );
 };
--- a/packages/kbn-search-index-documents/components/result/result_metadata.test.ts
+++ b/packages/kbn-search-index-documents/components/result/result_metadata.test.ts
@ -9,7 +9,8 @@

 import { SearchHit } from '@elastic/elasticsearch/lib/api/types';

-import { resultTitle } from './result_metadata';
+import { reorderFieldsInImportance, resultTitle } from './result_metadata';
+import { FieldProps } from './result_types';

 const makeSearchHit = (source: undefined | unknown): SearchHit =>
  ({
@ -27,3 +28,45 @@ describe('resultTitle', () => {
    expect(resultTitle(makeSearchHit(undefined))).toEqual(undefined);
  });
 });
+
+describe('reorderFieldsInImportance', () => {
+  it('sorts fields by type and name', () => {
+    const fields: FieldProps[] = [
+      { fieldName: 'field6', fieldType: 'sparse_vector', fieldValue: 'value6' },
+      { fieldName: 'field1', fieldType: 'semantic_text', fieldValue: 'value1' },
+      { fieldName: 'field2', fieldType: 'dense_vector', fieldValue: 'value2' },
+      { fieldName: 'field3', fieldType: 'sparse_vector', fieldValue: 'value3' },
+      { fieldName: 'field4', fieldType: 'semantic_text', fieldValue: 'value4' },
+      { fieldName: 'field5', fieldType: 'dense_vector', fieldValue: 'value5' },
+    ];
+    const sortedFields = [
+      { fieldName: 'field1', fieldType: 'semantic_text', fieldValue: 'value1' },
+      { fieldName: 'field4', fieldType: 'semantic_text', fieldValue: 'value4' },
+      { fieldName: 'field2', fieldType: 'dense_vector', fieldValue: 'value2' },
+      { fieldName: 'field5', fieldType: 'dense_vector', fieldValue: 'value5' },
+      { fieldName: 'field3', fieldType: 'sparse_vector', fieldValue: 'value3' },
+      { fieldName: 'field6', fieldType: 'sparse_vector', fieldValue: 'value6' },
+    ];
+    expect(reorderFieldsInImportance(fields)).toEqual(sortedFields);
+  });
+
+  it('sorts fields if they are special fields', () => {
+    const fields: FieldProps[] = [
+      { fieldName: 'field2', fieldType: 'dense_vector', fieldValue: 'value2' },
+      { fieldName: 'body_content', fieldType: 'sparse_vector', fieldValue: 'value3' },
+      { fieldName: 'headings', fieldType: 'text', fieldValue: 'value1' },
+      { fieldName: 'field4', fieldType: 'semantic_text', fieldValue: 'value4' },
+      { fieldName: 'field5', fieldType: 'dense_vector', fieldValue: 'value5' },
+      { fieldName: 'field6', fieldType: 'sparse_vector', fieldValue: 'value6' },
+    ];
+    const sortedFields = [
+      { fieldName: 'headings', fieldType: 'text', fieldValue: 'value1' },
+      { fieldName: 'field4', fieldType: 'semantic_text', fieldValue: 'value4' },
+      { fieldName: 'field2', fieldType: 'dense_vector', fieldValue: 'value2' },
+      { fieldName: 'field5', fieldType: 'dense_vector', fieldValue: 'value5' },
+      { fieldName: 'body_content', fieldType: 'sparse_vector', fieldValue: 'value3' },
+      { fieldName: 'field6', fieldType: 'sparse_vector', fieldValue: 'value6' },
+    ];
+    expect(reorderFieldsInImportance(fields)).toEqual(sortedFields);
+  });
+});
--- a/packages/kbn-search-index-documents/components/result/result_metadata.ts
+++ b/packages/kbn-search-index-documents/components/result/result_metadata.ts
@ -12,7 +12,7 @@ import type {
  MappingProperty,
  SearchHit,
 } from '@elastic/elasticsearch/lib/api/types';
-import type { MetaDataProps } from './result_types';
+import type { MetaDataProps, FieldProps } from './result_types';

 const TITLE_KEYS = ['title', 'name'];

@ -44,10 +44,45 @@ export const resultMetaData = (result: SearchHit): MetaDataProps => ({
  score: result._score,
 });

+const MAPPING_TYPE_ORDER = ['semantic_text', 'dense_vector', 'sparse_vector'];
+const SPECIAL_NAME_FIELDS = ['headings'];
+
+/**
+ * Reorders an array of fields based on their importance.
+ *
+ * The function sorts the fields by checking if their names are in the `SPECIAL_NAME_FIELDS` array first and then by
+ * their mapping type (semantic_text, dense_vector, sparse_vector) if they are not in the `SPECIAL_NAME_FIELDS` array.
+ *
+ * @param fields - An array of field properties to be reordered.
+ * @returns The reordered array of field properties.
+ */
+export const reorderFieldsInImportance = (fields: FieldProps[]) => {
+  return fields.sort((a, b) => {
+    const specialA = SPECIAL_NAME_FIELDS.indexOf(a.fieldName);
+    const specialB = SPECIAL_NAME_FIELDS.indexOf(b.fieldName);
+
+    if (specialA !== -1 || specialB !== -1) {
+      if (specialA === -1) return 1;
+      if (specialB === -1) return -1;
+      return specialA - specialB;
+    }
+
+    const typeA = MAPPING_TYPE_ORDER.indexOf(a.fieldType);
+    const typeB = MAPPING_TYPE_ORDER.indexOf(b.fieldType);
+    const orderA = typeA === -1 ? MAPPING_TYPE_ORDER.length : typeA;
+    const orderB = typeB === -1 ? MAPPING_TYPE_ORDER.length : typeB;
+
+    if (orderA === orderB) {
+      return a.fieldName.localeCompare(b.fieldName);
+    }
+    return orderA - orderB;
+  });
+};
+
 export const resultToFieldFromMappingResponse = (
  result: SearchHit,
  mappings?: IndicesGetMappingResponse
-) => {
+): FieldProps[] => {
  if (mappings && mappings[result._index] && result._source && !Array.isArray(result._source)) {
    if (typeof result._source === 'object') {
      return Object.entries(result._source).map(([key, value]) => {
@ -65,7 +100,7 @@ export const resultToFieldFromMappingResponse = (
 export const resultToFieldFromMappings = (
  result: SearchHit,
  mappings?: Record<string, MappingProperty>
-) => {
+): FieldProps[] => {
  if (mappings && result._source && !Array.isArray(result._source)) {
    return Object.entries(result._source).map(([key, value]) => {
      return {
--- a/packages/kbn-search-index-documents/components/result/result_types.ts
+++ b/packages/kbn-search-index-documents/components/result/result_types.ts
@ -7,12 +7,12 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import { SearchHit } from '@elastic/elasticsearch/lib/api/types';
+import { MappingProperty, SearchHit } from '@elastic/elasticsearch/lib/api/types';
 import { IconType } from '@elastic/eui';

 export interface ResultFieldProps {
  fieldName: string;
-  fieldType?: string;
+  fieldType: string;
  fieldValue: string;
  iconType?: IconType;
  isExpanded?: boolean;
@ -24,3 +24,9 @@ export interface MetaDataProps {
  score?: SearchHit['_score'];
  showScore?: boolean;
 }
+
+export interface FieldProps {
+  fieldName: string;
+  fieldType: Exclude<MappingProperty['type'], undefined>;
+  fieldValue: string;
+}
--- a/packages/kbn-search-index-documents/components/result/rich_result_header.tsx
+++ b/packages/kbn-search-index-documents/components/result/rich_result_header.tsx
@ -67,7 +67,7 @@ const MetadataPopover: React.FC<MetaDataProps> = ({
  const metaDataIcon = (
    <EuiButtonIcon
      display="empty"
-      size="xs"
+      size="s"
      iconType="iInCircle"
      color="primary"
      data-test-subj="documentMetadataButton"
@ -186,7 +186,7 @@ export const RichResultHeader: React.FC<Props> = ({
    <EuiFlexItem
      grow
      css={css`
-        min-height: ${euiTheme.base * 3}px;
+        min-height: ${euiTheme.base * 1}px;
        max-height: ${euiTheme.base * 8}px;
      `}
    >
@ -204,12 +204,12 @@ export const RichResultHeader: React.FC<Props> = ({
                  <EuiFlexItem>
                    {onTitleClick ? (
                      <EuiLink onClick={onTitleClick} color="text">
-                        <EuiTitle size="xs">
+                        <EuiTitle size="s">
                          <h4>{title}</h4>
                        </EuiTitle>
                      </EuiLink>
                    ) : (
-                      <EuiTitle size="xs">
+                      <EuiTitle size="s">
                        <h4>{title}</h4>
                      </EuiTitle>
                    )}
--- a/x-pack/plugins/search_indices/public/components/index_documents/document_list.tsx
+++ b/x-pack/plugins/search_indices/public/components/index_documents/document_list.tsx
@ -12,6 +12,7 @@ import { Result, resultMetaData, resultToField } from '@kbn/search-index-documen

 import { EuiSpacer } from '@elastic/eui';

+import { reorderFieldsInImportance } from '@kbn/search-index-documents';
 import { RecentDocsActionMessage } from './recent_docs_action_message';
 import { useDeleteDocument } from '../../hooks/api/use_delete_document';

@ -32,7 +33,7 @@ export const DocumentList = ({ indexName, docs, mappingProperties }: DocumentLis
        return (
          <React.Fragment key={doc._id}>
            <Result
-              fields={resultToField(doc, mappingProperties)}
+              fields={reorderFieldsInImportance(resultToField(doc, mappingProperties))}
              metaData={resultMetaData(doc)}
              onDocumentDelete={() => {
                mutate({ id: doc._id! });