[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 {
+    >.euiTableCellContent {
-      padding: $euiSizeXS;
+      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,
+  EuiHorizontalRule,
-  EuiSpacer,
+  EuiSplitPanel,
  EuiToolTip,
 } from '@elastic/eui';
@ -66,99 +66,65 @@ export const Result: React.FC<ResultProps> = ({
  const toolTipContent = <>{tooltipText}</>;
  return (
-    <EuiPanel
+    <EuiSplitPanel.Outer hasBorder={true} data-test-subj="search-index-documents-result">
-      hasBorder
+      <EuiSplitPanel.Inner paddingSize="m" color="plain" className="resultHeaderContainer">
-      data-test-subj="search-index-documents-result"
+        <EuiFlexGroup gutterSize="none" alignItems="center">
-      paddingSize={compactCard ? 's' : 'l'}
+          <EuiFlexItem>
-    >
+            {compactCard && (
-      <EuiFlexGroup gutterSize="none">
+              <ResultHeader
-        <EuiFlexItem>
+                title={
-          <EuiFlexGroup
+                  metaData.title ??
-            direction="column"
+                  i18n.translate('searchIndexDocuments.result.title.id', {
-            gutterSize="none"
+                    defaultMessage: 'Document id: {id}',
-            responsive={false}
+                    values: { id: metaData.id },
-            justifyContent="spaceAround"
+                  })
-          >
+                }
-            <EuiFlexItem grow={false}>
+                metaData={metaData}
              {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)}
              />
-            </EuiFlexItem>
+            )}
-          </EuiFlexGroup>
+
-        </EuiFlexItem>
+            {!compactCard && (
-        {compactCard && (
+              <RichResultHeader
-          <EuiFlexItem grow={false}>
+                showScore={showScore}
-            <div className="resultExpandColumn">
+                title={
-              <EuiToolTip position="left" content={toolTipContent}>
+                  metaData.title ??
-                <EuiButtonIcon
+                  i18n.translate('searchIndexDocuments.result.title.id', {
-                  iconType={isExpanded ? 'fold' : 'unfold'}
+                    defaultMessage: 'Document id: {id}',
-                  color="text"
+                    values: { id: metaData.id },
-                  onClick={(e: React.MouseEvent<HTMLElement>) => {
+                  })
-                    e.stopPropagation();
+                }
-                    setIsExpanded(!isExpanded);
+                onTitleClick={onDocumentClick}
-                  }}
+                metaData={{
-                  aria-label={tooltipText}
+                  ...metaData,
-                />
+                  onDocumentDelete,
-              </EuiToolTip>
+                }}
-            </div>
+              />
            )}
          </EuiFlexItem>
-        )}
+          <EuiFlexItem grow={false}>
-      </EuiFlexGroup>
+            <EuiToolTip position="left" content={toolTipContent}>
-    </EuiPanel>
+              <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 {
+import { EuiTableRow, EuiTableRowCell, EuiText, EuiToken } from '@elastic/eui';
  EuiCodeBlock,
  EuiIcon,
  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
+      <EuiTableRowCell className="resultFieldRowCell" truncateText={shouldTruncate} valign="middle">
-        className="resultFieldRowCell"
+        <ResultFieldValue fieldValue={fieldValue} fieldType={fieldType} isExpanded={isExpanded} />
        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>
    </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" justifyContent="spaceBetween" gutterSize="s">
-        <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>
-          <EuiFlexItem>
+          <EuiTitle size="xs">
-            <strong>{title}</strong>
+            <h4>{title}</h4>
          </EuiTitle>
        </EuiFlexItem>
        {!!metaData && (
          <EuiFlexItem grow={false}>
            <MetadataPopover {...metaData} />
          </EuiFlexItem>
-          {!!metaData && (
+        )}
-            <EuiFlexItem grow={false}>
+      </EuiFlexGroup>
              <MetadataPopover {...metaData} />
            </EuiFlexItem>
          )}
        </EuiFlexGroup>
      </EuiText>
    </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! });