[7.x] [App Search] Wired up Suggestion detail data (elastic#113796) (e…

…lastic#113969) * [App Search] Wired up Suggestion detail data (elastic#113796) * Fix mock value after type update in elastic#113861 * Fix test after type update in elastic#113861 Co-authored-by: Jason Stoltzfus <jastoltz24@gmail.com>
thomasneirynck · Oct 5, 2021 · 389fd95 · 389fd95
1 parent 67ddd49
commit 389fd95
Show file tree

Hide file tree

Showing 8 changed files with 591 additions and 25 deletions.
diff --git a/.../app_search/components/curations/views/curation_suggestion/curation_result_panel.test.tsx b/.../app_search/components/curations/views/curation_suggestion/curation_result_panel.test.tsx
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { setMockValues } from '../../../../../__mocks__/kea_logic';
+
 import React from 'react';
 
 import { shallow } from 'enzyme';
@@ -14,6 +16,13 @@ import { Result } from '../../../result';
 import { CurationResultPanel } from './curation_result_panel';
 
 describe('CurationResultPanel', () => {
+  const values = {
+    isMetaEngine: true,
+    engine: {
+      schema: {},
+    },
+  };
+
   const results = [
     {
       id: { raw: 'foo' },
@@ -25,6 +34,10 @@ describe('CurationResultPanel', () => {
     },
   ];
 
+  beforeAll(() => {
+    setMockValues(values);
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -33,6 +46,11 @@ describe('CurationResultPanel', () => {
     const wrapper = shallow(<CurationResultPanel variant="current" results={results} />);
     expect(wrapper.find('[data-test-subj="suggestedText"]').exists()).toBe(false);
     expect(wrapper.find(Result).length).toBe(2);
+    expect(wrapper.find(Result).at(0).props()).toEqual({
+      result: results[0],
+      isMetaEngine: true,
+      schemaForTypeHighlights: values.engine.schema,
+    });
   });
 
   it('renders a no results message when there are no results', () => {
@@ -41,6 +59,11 @@ describe('CurationResultPanel', () => {
     expect(wrapper.find(Result).length).toBe(0);
   });
 
+  it('renders the correct count', () => {
+    const wrapper = shallow(<CurationResultPanel variant="current" results={results} />);
+    expect(wrapper.find('[data-test-subj="curationCount"]').prop('children')).toBe(2);
+  });
+
   it('shows text about automation when variant is "suggested"', () => {
     const wrapper = shallow(<CurationResultPanel variant="suggested" results={results} />);
     expect(wrapper.find('[data-test-subj="suggestedText"]').exists()).toBe(true);

diff --git a/...tions/app_search/components/curations/views/curation_suggestion/curation_result_panel.tsx b/...tions/app_search/components/curations/views/curation_suggestion/curation_result_panel.tsx
@@ -7,6 +7,8 @@
 
 import React from 'react';
 
+import { useValues } from 'kea';
+
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,6 +19,8 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { EngineLogic } from '../../../engine';
+
 import { Result } from '../../../result';
 import { Result as ResultType } from '../../../result/types';
 import './curation_result_panel.scss';
@@ -27,14 +31,14 @@ interface Props {
 }
 
 export const CurationResultPanel: React.FC<Props> = ({ variant, results }) => {
-  // TODO wire up
-  const count = 3;
+  const { isMetaEngine, engine } = useValues(EngineLogic);
+  const count = results.length;
 
   return (
     <>
       <EuiFlexGroup className="curationResultPanel__header" gutterSize="s">
         <EuiFlexItem grow={false}>
-          <EuiNotificationBadge>{count}</EuiNotificationBadge>
+          <EuiNotificationBadge data-test-subj="curationCount">{count}</EuiNotificationBadge>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiTitle size="xxxs">
@@ -70,7 +74,11 @@ export const CurationResultPanel: React.FC<Props> = ({ variant, results }) => {
         {results.length > 0 ? (
           results.map((result) => (
             <EuiFlexItem grow={false} key={result.id.raw}>
-              <Result result={result} isMetaEngine={false} />
+              <Result
+                result={result}
+                isMetaEngine={isMetaEngine}
+                schemaForTypeHighlights={engine.schema}
+              />
             </EuiFlexItem>
           ))
         ) : (

diff --git a/...ns/app_search/components/curations/views/curation_suggestion/curation_suggestion.test.tsx b/...ns/app_search/components/curations/views/curation_suggestion/curation_suggestion.test.tsx
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { setMockActions, setMockValues } from '../../../../../__mocks__/kea_logic';
+import '../../../../../__mocks__/shallow_useeffect.mock';
 import { mockUseParams } from '../../../../../__mocks__/react_router';
 import '../../../../__mocks__/engine_logic.mock';
 
@@ -14,12 +16,65 @@ import { shallow } from 'enzyme';
 
 import { AppSearchPageTemplate } from '../../../layout';
 
+import { Result } from '../../../result';
+
+import { CurationResultPanel } from './curation_result_panel';
 import { CurationSuggestion } from './curation_suggestion';
 
 describe('CurationSuggestion', () => {
+  const values = {
+    suggestion: {
+      query: 'foo',
+      updated_at: '2021-07-08T14:35:50Z',
+      promoted: ['1', '2', '3'],
+    },
+    suggestedPromotedDocuments: [
+      {
+        id: {
+          raw: '1',
+        },
+        _meta: {
+          id: '1',
+          engine: 'some-engine',
+        },
+      },
+      {
+        id: {
+          raw: '2',
+        },
+        _meta: {
+          id: '2',
+          engine: 'some-engine',
+        },
+      },
+      {
+        id: {
+          raw: '3',
+        },
+        _meta: {
+          id: '3',
+          engine: 'some-engine',
+        },
+      },
+    ],
+    isMetaEngine: true,
+    engine: {
+      schema: {},
+    },
+  };
+
+  const actions = {
+    loadSuggestion: jest.fn(),
+  };
+
+  beforeAll(() => {
+    setMockValues(values);
+    setMockActions(actions);
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseParams.mockReturnValue({ query: 'some%20query' });
+    mockUseParams.mockReturnValue({ query: 'foo' });
   });
 
   it('renders', () => {
@@ -28,19 +83,21 @@ describe('CurationSuggestion', () => {
     expect(wrapper.is(AppSearchPageTemplate)).toBe(true);
   });
 
-  it('displays the decoded query in the title', () => {
-    const wrapper = shallow(<CurationSuggestion />);
-
-    expect(wrapper.prop('pageHeader').pageTitle).toEqual('some query');
+  it('loads data on initialization', () => {
+    shallow(<CurationSuggestion />);
+    expect(actions.loadSuggestion).toHaveBeenCalled();
   });
 
-  // TODO This will need to come from somewhere else when wired up
-  it('displays an empty query if "" is encoded in as the qery', () => {
-    mockUseParams.mockReturnValue({ query: '%22%22' });
+  it('shows suggested promoted documents', () => {
+    const wrapper = shallow(<CurationSuggestion />);
+    const suggestedResultsPanel = wrapper.find(CurationResultPanel).at(1);
+    expect(suggestedResultsPanel.prop('results')).toEqual(values.suggestedPromotedDocuments);
+  });
 
+  it('displays the query in the title', () => {
     const wrapper = shallow(<CurationSuggestion />);
 
-    expect(wrapper.prop('pageHeader').pageTitle).toEqual('""');
+    expect(wrapper.prop('pageHeader').pageTitle).toEqual('foo');
   });
 
   it('displays has a button to display organic results', () => {
@@ -52,4 +109,24 @@ describe('CurationSuggestion', () => {
     wrapper.find('[data-test-subj="showOrganicResults"]').simulate('click');
     expect(wrapper.find('[data-test-subj="organicResults"]').exists()).toBe(false);
   });
+
+  it('displays proposed organic results', () => {
+    const wrapper = shallow(<CurationSuggestion />);
+    wrapper.find('[data-test-subj="showOrganicResults"]').simulate('click');
+    expect(wrapper.find('[data-test-subj="proposedOrganicResults"]').find(Result).length).toBe(4);
+    expect(wrapper.find(Result).at(0).prop('isMetaEngine')).toEqual(true);
+    expect(wrapper.find(Result).at(0).prop('schemaForTypeHighlights')).toEqual(
+      values.engine.schema
+    );
+  });
+
+  it('displays current organic results', () => {
+    const wrapper = shallow(<CurationSuggestion />);
+    wrapper.find('[data-test-subj="showOrganicResults"]').simulate('click');
+    expect(wrapper.find('[data-test-subj="currentOrganicResults"]').find(Result).length).toBe(4);
+    expect(wrapper.find(Result).at(0).prop('isMetaEngine')).toEqual(true);
+    expect(wrapper.find(Result).at(0).prop('schemaForTypeHighlights')).toEqual(
+      values.engine.schema
+    );
+  });
 });
diff --git a/...cations/app_search/components/curations/views/curation_suggestion/curation_suggestion.tsx b/...cations/app_search/components/curations/views/curation_suggestion/curation_suggestion.tsx
@@ -5,7 +5,9 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { useActions, useValues } from 'kea';
 
 import {
   EuiButtonEmpty,
@@ -19,6 +21,7 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { useDecodedParams } from '../../../../utils/encode_path_params';
+import { EngineLogic } from '../../../engine';
 import { AppSearchPageTemplate } from '../../../layout';
 import { Result } from '../../../result';
 import { Result as ResultType } from '../../../result/types';
@@ -27,26 +30,37 @@ import { getCurationsBreadcrumbs } from '../../utils';
 import { CurationActionBar } from './curation_action_bar';
 import { CurationResultPanel } from './curation_result_panel';
 
+import { CurationSuggestionLogic } from './curation_suggestion_logic';
 import { DATA } from './temp_data';
 
 export const CurationSuggestion: React.FC = () => {
   const { query } = useDecodedParams();
+  const curationSuggestionLogic = CurationSuggestionLogic({ query });
+  const { loadSuggestion } = useActions(curationSuggestionLogic);
+  const { engine, isMetaEngine } = useValues(EngineLogic);
+  const { suggestion, suggestedPromotedDocuments, dataLoading } =
+    useValues(curationSuggestionLogic);
   const [showOrganicResults, setShowOrganicResults] = useState(false);
   const currentOrganicResults = [...DATA].splice(5, 4);
   const proposedOrganicResults = [...DATA].splice(2, 4);
 
-  const queryTitle = query === '""' ? query : `${query}`;
+  const suggestionQuery = suggestion?.query || '';
+
+  useEffect(() => {
+    loadSuggestion();
+  }, []);
 
   return (
     <AppSearchPageTemplate
+      isLoading={dataLoading}
       pageChrome={getCurationsBreadcrumbs([
         i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.curations.suggestedCuration.breadcrumbLabel',
-          { defaultMessage: 'Suggested: {query}', values: { query } }
+          { defaultMessage: 'Suggested: {query}', values: { query: suggestionQuery } }
         ),
       ])}
       pageHeader={{
-        pageTitle: queryTitle,
+        pageTitle: suggestionQuery,
       }}
     >
       <CurationActionBar
@@ -57,17 +71,27 @@ export const CurationSuggestion: React.FC = () => {
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiTitle size="xxs">
-            <h2>Current</h2>
+            <h2>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.curations.suggestedCuration.currentTitle',
+                { defaultMessage: 'Current' }
+              )}
+            </h2>
           </EuiTitle>
           <EuiSpacer size="s" />
           <CurationResultPanel variant="current" results={[...DATA].splice(0, 3)} />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiTitle size="xxs">
-            <h2>Suggested</h2>
+            <h2>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.curations.suggestedCuration.suggestionTitle',
+                { defaultMessage: 'Suggested' }
+              )}
+            </h2>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <CurationResultPanel variant="suggested" results={[...DATA].splice(3, 2)} />
+          <CurationResultPanel variant="suggested" results={suggestedPromotedDocuments} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
@@ -81,7 +105,15 @@ export const CurationSuggestion: React.FC = () => {
           onClick={() => setShowOrganicResults(!showOrganicResults)}
           data-test-subj="showOrganicResults"
         >
-          {showOrganicResults ? 'Collapse' : 'Expand'} organic search results
+          {showOrganicResults
+            ? i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.curations.suggestedCuration.collapseButtonLabel',
+                { defaultMessage: 'Collapse organic search results' }
+              )
+            : i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.curations.suggestedCuration.expandButtonLabel',
+                { defaultMessage: 'Expand organic search results' }
+              )}
         </EuiButtonEmpty>
         {showOrganicResults && (
           <>
@@ -90,21 +122,37 @@ export const CurationSuggestion: React.FC = () => {
               <EuiFlexGroup gutterSize="m">
                 <EuiFlexItem>
                   {currentOrganicResults.length > 0 && (
-                    <EuiFlexGroup direction="column" gutterSize="s">
+                    <EuiFlexGroup
+                      direction="column"
+                      gutterSize="s"
+                      data-test-subj="currentOrganicResults"
+                    >
                       {currentOrganicResults.map((result: ResultType) => (
                         <EuiFlexItem grow={false} key={result.id.raw}>
-                          <Result result={result} isMetaEngine={false} />
+                          <Result
+                            result={result}
+                            isMetaEngine={isMetaEngine}
+                            schemaForTypeHighlights={engine.schema}
+                          />
                         </EuiFlexItem>
                       ))}
                     </EuiFlexGroup>
                   )}
                 </EuiFlexItem>
                 <EuiFlexItem>
                   {proposedOrganicResults.length > 0 && (
-                    <EuiFlexGroup direction="column" gutterSize="s">
+                    <EuiFlexGroup
+                      direction="column"
+                      gutterSize="s"
+                      data-test-subj="proposedOrganicResults"
+                    >
                       {proposedOrganicResults.map((result: ResultType) => (
                         <EuiFlexItem grow={false} key={result.id.raw}>
-                          <Result result={result} isMetaEngine={false} />
+                          <Result
+                            result={result}
+                            isMetaEngine={isMetaEngine}
+                            schemaForTypeHighlights={engine.schema}
+                          />
                         </EuiFlexItem>
                       ))}
                     </EuiFlexGroup>