[8.x] Update Search Index Document Card design. (#194061) (#194555)

# Backport This will backport the following commits from `main` to `8.x`: - [Update Search Index Document Card design. (#194061)](#194061)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Efe Gürkan YALAMAN <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Alex Szabo <[email protected]>
elastic · Oct 2, 2024 · 272f3bb · 272f3bb
1 parent 5c4afed
commit 272f3bb
Show file tree

Hide file tree

Showing 20 changed files with 611 additions and 247 deletions.
diff --git a/packages/kbn-search-index-documents/components/document_list.tsx b/packages/kbn-search-index-documents/components/document_list.tsx
@@ -9,7 +9,7 @@
 
 import React, { useState } from 'react';
 
-import { MappingProperty, SearchHit } from '@elastic/elasticsearch/lib/api/types';
+import type { IndicesGetMappingResponse, SearchHit } from '@elastic/elasticsearch/lib/api/types';
 
 import {
   EuiButtonEmpty,
@@ -30,18 +30,22 @@ import { i18n } from '@kbn/i18n';
 
 import { FormattedMessage, FormattedNumber } from '@kbn/i18n-react';
 
-import { resultMetaData, resultToField } from './result/result_metadata';
+import { resultMetaData, resultToFieldFromMappingResponse } from './result/result_metadata';
 
 import { Result } from '..';
+import { type ResultProps } from './result/result';
+
 interface DocumentListProps {
   dataTelemetryIdPrefix: string;
   docs: SearchHit[];
   docsPerPage: number;
   isLoading: boolean;
-  mappings: Record<string, MappingProperty> | undefined;
+  mappings: IndicesGetMappingResponse | undefined;
   meta: Pagination;
   onPaginate: (newPageIndex: number) => void;
-  setDocsPerPage: (docsPerPage: number) => void;
+  setDocsPerPage?: (docsPerPage: number) => void;
+  onDocumentClick?: (doc: SearchHit) => void;
+  resultProps?: Partial<ResultProps>;
 }
 
 export const DocumentList: React.FC<DocumentListProps> = ({
@@ -53,6 +57,8 @@ export const DocumentList: React.FC<DocumentListProps> = ({
   meta,
   onPaginate,
   setDocsPerPage,
+  onDocumentClick,
+  resultProps = {},
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -99,7 +105,12 @@ export const DocumentList: React.FC<DocumentListProps> = ({
       {docs.map((doc) => {
         return (
           <React.Fragment key={doc._id}>
-            <Result fields={resultToField(doc, mappings)} metaData={resultMetaData(doc)} />
+            <Result
+              fields={resultToFieldFromMappingResponse(doc, mappings)}
+              metaData={resultMetaData(doc)}
+              onDocumentClick={onDocumentClick ? () => onDocumentClick(doc) : undefined}
+              {...resultProps}
+            />
             <EuiSpacer size="s" />
           </React.Fragment>
         );
@@ -116,81 +127,83 @@ export const DocumentList: React.FC<DocumentListProps> = ({
             onPageClick={onPaginate}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiPopover
-            aria-label={i18n.translate('searchIndexDocuments.documentList.docsPerPage', {
-              defaultMessage: 'Document count per page dropdown',
-            })}
-            button={
-              <EuiButtonEmpty
-                data-telemetry-id={`${dataTelemetryIdPrefix}-documents-docsPerPage`}
-                size="s"
-                iconType="arrowDown"
-                iconSide="right"
-                onClick={() => {
-                  setIsPopoverOpen(true);
-                }}
-              >
-                {i18n.translate('searchIndexDocuments.documentList.pagination.itemsPerPage', {
-                  defaultMessage: 'Documents per page: {docPerPage}',
-                  values: { docPerPage: docsPerPage },
-                })}
-              </EuiButtonEmpty>
-            }
-            isOpen={isPopoverOpen}
-            closePopover={() => {
-              setIsPopoverOpen(false);
-            }}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel
-              size="s"
-              items={[
-                <EuiContextMenuItem
-                  key="10 rows"
-                  icon={getIconType(10)}
+        {setDocsPerPage && (
+          <EuiFlexItem grow={false}>
+            <EuiPopover
+              aria-label={i18n.translate('searchIndexDocuments.documentList.docsPerPage', {
+                defaultMessage: 'Document count per page dropdown',
+              })}
+              button={
+                <EuiButtonEmpty
+                  data-telemetry-id={`${dataTelemetryIdPrefix}-documents-docsPerPage`}
+                  size="s"
+                  iconType="arrowDown"
+                  iconSide="right"
                   onClick={() => {
-                    setIsPopoverOpen(false);
-                    setDocsPerPage(10);
+                    setIsPopoverOpen(true);
                   }}
                 >
-                  {i18n.translate('searchIndexDocuments.documentList.paginationOptions.option', {
-                    defaultMessage: '{docCount} documents',
-                    values: { docCount: 10 },
+                  {i18n.translate('searchIndexDocuments.documentList.pagination.itemsPerPage', {
+                    defaultMessage: 'Documents per page: {docPerPage}',
+                    values: { docPerPage: docsPerPage },
                   })}
-                </EuiContextMenuItem>,
+                </EuiButtonEmpty>
+              }
+              isOpen={isPopoverOpen}
+              closePopover={() => {
+                setIsPopoverOpen(false);
+              }}
+              panelPaddingSize="none"
+              anchorPosition="downLeft"
+            >
+              <EuiContextMenuPanel
+                size="s"
+                items={[
+                  <EuiContextMenuItem
+                    key="10 rows"
+                    icon={getIconType(10)}
+                    onClick={() => {
+                      setIsPopoverOpen(false);
+                      setDocsPerPage(10);
+                    }}
+                  >
+                    {i18n.translate('searchIndexDocuments.documentList.paginationOptions.option', {
+                      defaultMessage: '{docCount} documents',
+                      values: { docCount: 10 },
+                    })}
+                  </EuiContextMenuItem>,
 
-                <EuiContextMenuItem
-                  key="25 rows"
-                  icon={getIconType(25)}
-                  onClick={() => {
-                    setIsPopoverOpen(false);
-                    setDocsPerPage(25);
-                  }}
-                >
-                  {i18n.translate('searchIndexDocuments.documentList.paginationOptions.option', {
-                    defaultMessage: '{docCount} documents',
-                    values: { docCount: 25 },
-                  })}
-                </EuiContextMenuItem>,
-                <EuiContextMenuItem
-                  key="50 rows"
-                  icon={getIconType(50)}
-                  onClick={() => {
-                    setIsPopoverOpen(false);
-                    setDocsPerPage(50);
-                  }}
-                >
-                  {i18n.translate('searchIndexDocuments.documentList.paginationOptions.option', {
-                    defaultMessage: '{docCount} documents',
-                    values: { docCount: 50 },
-                  })}
-                </EuiContextMenuItem>,
-              ]}
-            />
-          </EuiPopover>
-        </EuiFlexItem>
+                  <EuiContextMenuItem
+                    key="25 rows"
+                    icon={getIconType(25)}
+                    onClick={() => {
+                      setIsPopoverOpen(false);
+                      setDocsPerPage(25);
+                    }}
+                  >
+                    {i18n.translate('searchIndexDocuments.documentList.paginationOptions.option', {
+                      defaultMessage: '{docCount} documents',
+                      values: { docCount: 25 },
+                    })}
+                  </EuiContextMenuItem>,
+                  <EuiContextMenuItem
+                    key="50 rows"
+                    icon={getIconType(50)}
+                    onClick={() => {
+                      setIsPopoverOpen(false);
+                      setDocsPerPage(50);
+                    }}
+                  >
+                    {i18n.translate('searchIndexDocuments.documentList.paginationOptions.option', {
+                      defaultMessage: '{docCount} documents',
+                      values: { docCount: 50 },
+                    })}
+                  </EuiContextMenuItem>,
+                ]}
+              />
+            </EuiPopover>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
 
       <EuiSpacer />

diff --git a/packages/kbn-search-index-documents/components/documents_list.test.tsx b/packages/kbn-search-index-documents/components/documents_list.test.tsx
@@ -58,8 +58,14 @@ describe('DocumentList', () => {
         },
       ],
       mappings: {
-        AvgTicketPrice: {
-          type: 'float' as const,
+        kibana_sample_data_flights: {
+          mappings: {
+            properties: {
+              AvgTicketPrice: {
+                type: 'float' as const,
+              },
+            },
+          },
         },
       },
     };

diff --git a/packages/kbn-search-index-documents/components/result/index.ts b/packages/kbn-search-index-documents/components/result/index.ts
@@ -8,4 +8,8 @@
  */
 
 export { Result } from './result';
-export { resultMetaData, resultToField } from './result_metadata';
+export {
+  resultMetaData,
+  resultToFieldFromMappingResponse,
+  resultToFieldFromMappings as resultToField,
+} from './result_metadata';