[8.x] [Search Playground] Search Preview and Document Viewer (elastic…

…#192096) (elastic#193004) # Backport This will backport the following commits from `main` to `8.x`: - [[Search Playground] Search Preview and Document Viewer (elastic#192096)](elastic#192096)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Efe Gürkan YALAMAN <[email protected]>
kibanamachine · Sep 16, 2024 · 831fdc1 · 831fdc1
1 parent 0e8f537
commit 831fdc1
Show file tree

Hide file tree

Showing 18 changed files with 493 additions and 87 deletions.
diff --git a/x-pack/plugins/search_playground/common/index.ts b/x-pack/plugins/search_playground/common/index.ts
@@ -5,8 +5,16 @@
  * 2.0.
  */
 
+import { Pagination } from './types';
+
 export const PLUGIN_ID = 'searchPlayground';
 export const PLUGIN_NAME = 'Playground';
 export const PLUGIN_PATH = '/app/search_playground';
 
 export const SEARCH_MODE_FEATURE_FLAG_ID = 'searchPlayground:searchModeEnabled';
+
+export const DEFAULT_PAGINATION: Pagination = {
+  from: 0,
+  size: 10,
+  total: 0,
+};
diff --git a/x-pack/plugins/search_playground/common/types.ts b/x-pack/plugins/search_playground/common/types.ts
@@ -50,6 +50,7 @@ export enum APIRoutes {
   POST_CHAT_MESSAGE = '/internal/search_playground/chat',
   POST_QUERY_SOURCE_FIELDS = '/internal/search_playground/query_source_fields',
   GET_INDICES = '/internal/search_playground/indices',
+  POST_SEARCH_QUERY = '/internal/search_playground/search',
 }
 
 export enum LLMs {
@@ -82,3 +83,9 @@ export interface ModelProvider {
   promptTokenLimit: number;
   provider: LLMs;
 }
+
+export interface Pagination {
+  from: number;
+  size: number;
+  total: number;
+}
diff --git a/x-pack/plugins/search_playground/kibana.jsonc b/x-pack/plugins/search_playground/kibana.jsonc
@@ -12,6 +12,7 @@
     ],
     "requiredPlugins": [
       "actions",
+      "data",
       "encryptedSavedObjects",
       "navigation",
       "share",
@@ -25,7 +26,8 @@
       "usageCollection",
     ],
     "requiredBundles": [
-      "kibanaReact"
+      "kibanaReact",
+      "unifiedDocViewer"
     ]
   }
 }
diff --git a/x-pack/plugins/search_playground/public/components/header.tsx b/x-pack/plugins/search_playground/public/components/header.tsx
@@ -115,7 +115,7 @@ export const Header: React.FC<HeaderProps> = ({
       <EuiPageHeaderSection>
         <EuiFlexGroup alignItems="center">
           {showDocs && <PlaygroundHeaderDocs />}
-          <Toolbar />
+          <Toolbar selectedPageMode={selectedPageMode} />
         </EuiFlexGroup>
       </EuiPageHeaderSection>
     </EuiPageTemplate.Header>

diff --git a/x-pack/plugins/search_playground/public/components/search_mode/empty_results.tsx b/x-pack/plugins/search_playground/public/components/search_mode/empty_results.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export interface EmptyResultsArgs {
+  query?: string;
+}
+
+export const EmptyResults: React.FC<EmptyResultsArgs> = ({ query }) => {
+  return (
+    <EuiEmptyPrompt
+      body={
+        <p>
+          {query
+            ? i18n.translate('xpack.searchPlayground.resultList.emptyWithQuery.text', {
+                defaultMessage: 'No result found for: {query}',
+                values: { query },
+              })
+            : i18n.translate('xpack.searchPlayground.resultList.empty.text', {
+                defaultMessage: 'No results found',
+              })}
+        </p>
+      }
+    />
+  );
+};
diff --git a/x-pack/plugins/search_playground/public/components/search_mode/result_list.tsx b/x-pack/plugins/search_playground/public/components/search_mode/result_list.tsx
@@ -5,54 +5,117 @@
  * 2.0.
  */
 
+import React, { useEffect, useState } from 'react';
+
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
+  EuiPagination,
   EuiPanel,
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import React from 'react';
 
-const DEMO_DATA = [
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-  { id: '123321', name: 'John Doe', age: 25 },
-];
+import { UnifiedDocViewerFlyout } from '@kbn/unified-doc-viewer-plugin/public';
+
+import type { DataView } from '@kbn/data-views-plugin/public';
+import type { EsHitRecord } from '@kbn/discover-utils/types';
+import type { SearchHit } from '@elastic/elasticsearch/lib/api/types';
+import { buildDataTableRecord } from '@kbn/discover-utils';
+import { i18n } from '@kbn/i18n';
+import { Pagination } from '../../types';
+import { getPageCounts } from '../../utils/pagination_helper';
+import { EmptyResults } from './empty_results';
+import { useKibana } from '../../hooks/use_kibana';
+
+export interface ResultListArgs {
+  searchResults: SearchHit[];
+  pagination: Pagination;
+  onPaginationChange: (nextPage: number) => void;
+  searchQuery?: string;
+}
 
-export const ResultList: React.FC = () => {
+export const ResultList: React.FC<ResultListArgs> = ({
+  searchResults,
+  pagination,
+  onPaginationChange,
+  searchQuery = '',
+}) => {
+  const {
+    services: { data },
+  } = useKibana();
+  const [dataView, setDataView] = useState<DataView | null>(null);
+  useEffect(() => {
+    data.dataViews.getDefaultDataView().then((d) => setDataView(d));
+  }, [data]);
+  const [flyoutDocId, setFlyoutDocId] = useState<string | undefined>(undefined);
+  const { totalPage, page } = getPageCounts(pagination);
+  const hit =
+    flyoutDocId &&
+    buildDataTableRecord(searchResults.find((item) => item._id === flyoutDocId) as EsHitRecord);
   return (
     <EuiPanel grow={false}>
       <EuiFlexGroup direction="column" gutterSize="none">
-        {DEMO_DATA.map((item, index) => {
-          return (
-            <>
-              <EuiFlexItem key={item.id + '-' + index} grow>
-                <EuiFlexGroup direction="column" gutterSize="xs">
-                  <EuiFlexItem grow>
-                    <EuiTitle size="xs">
-                      <h2>{item.id}</h2>
-                    </EuiTitle>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow>
-                    <EuiText size="s">
-                      <p>{item.name}</p>
-                    </EuiText>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-              {index !== DEMO_DATA.length - 1 && <EuiHorizontalRule margin="m" />}
-            </>
-          );
-        })}
+        {searchResults.length === 0 && (
+          <EuiFlexItem>
+            <EmptyResults query={searchQuery} />
+          </EuiFlexItem>
+        )}
+        {searchResults.length !== 0 &&
+          searchResults.map((item, index) => {
+            return (
+              <>
+                <EuiFlexItem
+                  key={item._id + '-' + index}
+                  onClick={() => setFlyoutDocId(item._id)}
+                  grow
+                >
+                  <EuiFlexGroup direction="column" gutterSize="xs">
+                    <EuiFlexItem grow>
+                      <EuiTitle size="xs">
+                        <h3>ID:{item._id}</h3>
+                      </EuiTitle>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow>
+                      <EuiText size="s">
+                        <p>
+                          {i18n.translate('xpack.searchPlayground.resultList.result.score', {
+                            defaultMessage: 'Document score: {score}',
+                            values: { score: item._score },
+                          })}
+                        </p>
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                {index !== searchResults.length - 1 && <EuiHorizontalRule margin="m" />}
+              </>
+            );
+          })}
+        {searchResults.length !== 0 && (
+          <EuiFlexItem>
+            <EuiPagination
+              pageCount={totalPage}
+              activePage={page}
+              onPageClick={onPaginationChange}
+            />
+          </EuiFlexItem>
+        )}
+        {flyoutDocId && dataView && hit && (
+          <UnifiedDocViewerFlyout
+            services={{}}
+            onClose={() => setFlyoutDocId(undefined)}
+            isEsqlQuery={false}
+            columns={[]}
+            hit={hit}
+            dataView={dataView}
+            onAddColumn={() => {}}
+            onRemoveColumn={() => {}}
+            setExpandedDoc={() => {}}
+            flyoutType="overlay"
+          />
+        )}
       </EuiFlexGroup>
     </EuiPanel>
   );

diff --git a/x-pack/plugins/search_playground/public/components/search_mode/search_mode.tsx b/x-pack/plugins/search_playground/public/components/search_mode/search_mode.tsx
@@ -6,20 +6,50 @@
  */
 
 import {
-  EuiButton,
   EuiEmptyPrompt,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSearchBar,
+  EuiForm,
   useEuiTheme,
 } from '@elastic/eui';
 import React from 'react';
 import { css } from '@emotion/react';
+import { Controller, useController, useFormContext } from 'react-hook-form';
+import { i18n } from '@kbn/i18n';
+import { useQueryClient } from '@tanstack/react-query';
+import { DEFAULT_PAGINATION } from '../../../common';
 import { ResultList } from './result_list';
+import { ChatForm, ChatFormFields, Pagination } from '../../types';
+import { useSearchPreview } from '../../hooks/use_search_preview';
+import { getPaginationFromPage } from '../../utils/pagination_helper';
 
 export const SearchMode: React.FC = () => {
   const { euiTheme } = useEuiTheme();
-  const showResults = true; // TODO demo
+  const { control, handleSubmit } = useFormContext();
+  const {
+    field: { value: searchBarValue },
+    formState: { isSubmitting },
+  } = useController<ChatForm, ChatFormFields.searchQuery>({
+    name: ChatFormFields.searchQuery,
+  });
+
+  const [searchQuery, setSearchQuery] = React.useState<{
+    query: string;
+    pagination: Pagination;
+  }>({ query: searchBarValue, pagination: DEFAULT_PAGINATION });
+
+  const { results, pagination } = useSearchPreview(searchQuery);
+
+  const queryClient = useQueryClient();
+  const handleSearch = async (query = searchBarValue, paginationParam = DEFAULT_PAGINATION) => {
+    queryClient.resetQueries({ queryKey: ['search-preview-results'] });
+    setSearchQuery({ query, pagination: paginationParam });
+  };
+
+  const onPagination = (page: number) => {
+    handleSearch(searchBarValue, getPaginationFromPage(page, pagination.size, pagination));
+  };
 
   return (
     <EuiFlexGroup direction="row" justifyContent="center">
@@ -31,25 +61,55 @@ export const SearchMode: React.FC = () => {
       >
         <EuiFlexGroup direction="column">
           <EuiFlexItem grow={false}>
-            <EuiSearchBar />
+            <EuiForm component="form" onSubmit={handleSubmit(() => handleSearch())}>
+              <Controller
+                control={control}
+                name={ChatFormFields.searchQuery}
+                render={({ field }) => (
+                  <EuiFieldText
+                    {...field}
+                    value={searchBarValue}
+                    icon="search"
+                    fullWidth
+                    placeholder={i18n.translate(
+                      'xpack.searchPlayground.searchMode.searchBar.placeholder',
+                      { defaultMessage: 'Search for documents' }
+                    )}
+                    isLoading={isSubmitting}
+                  />
+                )}
+              />
+            </EuiForm>
           </EuiFlexItem>
           <EuiFlexItem className="eui-yScroll">
             <EuiFlexGroup direction="column">
               <EuiFlexItem>
-                {showResults ? (
-                  <ResultList />
+                {searchQuery.query ? (
+                  <ResultList
+                    searchResults={results}
+                    pagination={pagination}
+                    onPaginationChange={onPagination}
+                    searchQuery={searchQuery.query}
+                  />
                 ) : (
                   <EuiEmptyPrompt
                     iconType={'checkInCircleFilled'}
                     iconColor="success"
-                    title={<h2>Ready to search</h2>}
+                    title={
+                      <h2>
+                        {i18n.translate('xpack.searchPlayground.searchMode.readyToSearch', {
+                          defaultMessage: 'Ready to search',
+                        })}
+                      </h2>
+                    }
                     body={
                       <p>
-                        Type in a query in the search bar above or view the query we automatically
-                        created for you.
+                        {i18n.translate('xpack.searchPlayground.searchMode.searchPrompt', {
+                          defaultMessage:
+                            'Type in a query in the search bar above or view the query we automatically created for you.',
+                        })}
                       </p>
                     }
-                    actions={<EuiButton>View the query</EuiButton>}
                   />
                 )}
               </EuiFlexItem>

diff --git a/x-pack/plugins/search_playground/public/components/toolbar.tsx b/x-pack/plugins/search_playground/public/components/toolbar.tsx
@@ -9,12 +9,15 @@ import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 import { DataActionButton } from './data_action_button';
 import { ViewCodeAction } from './view_code/view_code_action';
+import { PlaygroundPageMode } from '../types';
 
-export const Toolbar: React.FC = () => {
+export const Toolbar: React.FC<{ selectedPageMode: PlaygroundPageMode }> = ({
+  selectedPageMode = PlaygroundPageMode.chat,
+}) => {
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center" data-test-subj="playground-header-actions">
       <DataActionButton />
-      <ViewCodeAction />
+      <ViewCodeAction selectedPageMode={selectedPageMode} />
     </EuiFlexGroup>
   );
 };