Update Search Index Document Card design. (elastic#194061)

## Summary https://github.com/user-attachments/assets/552e1198-ba95-45d6-b13b-e1b26060d34c This PR adds an option to add a richer design for Result card. Defaults still stay the same with old design. Screenshot from Index Management. <img width="1139" alt="Screenshot 2024-09-27 at 14 52 25" src="https://github.com/user-attachments/assets/754a22c5-c3db-4385-b1ad-4e93a8615b9c"> Added a bunch of options to show score, show amount of fields to show when collapsed by default etc. ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 5bc33cd)
kibanamachine · Oct 1, 2024 · 347eb76 · 347eb76
1 parent 077537c
commit 347eb76
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';