[App Search] Wired up organic results on Curation Suggestions view (#…

…114717)

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/types.ts

@@ -13,11 +13,19 @@ export interface CurationSuggestion {
   updated_at: string;
   promoted: string[];
   status: 'pending' | 'applied' | 'automated' | 'rejected' | 'disabled';
-  curation_id?: string;
+  curation_id?: string; // The id of an existing curation that this suggestion would affect
   operation: 'create' | 'update' | 'delete';
   override_manual_curation?: boolean;
 }
 
+// A curation suggestion with linked ids hydrated with actual values
+export interface HydratedCurationSuggestion
+  extends Omit<CurationSuggestion, 'promoted' | 'curation_id'> {
+  organic: Curation['organic'];
+  promoted: Curation['promoted'];
+  curation?: Curation;
+}
+
 export interface Curation {
   id: string;
   last_updated: string;

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curation_suggestion/curation_suggestion.test.tsx

@@ -14,6 +14,8 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
+import { EuiEmptyPrompt } from '@elastic/eui';
+
 import { AppSearchPageTemplate } from '../../../layout';
 
 import { Result } from '../../../result';
@@ -26,44 +28,29 @@ describe('CurationSuggestion', () => {
     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',
-        },
-      },
-    ],
-    curation: {
-      promoted: [
+      promoted: [{ id: '4', foo: 'foo' }],
+      organic: [
         {
-          id: '4',
-          foo: 'foo',
+          id: { raw: '3', snippet: null },
+          foo: { raw: 'bar', snippet: null },
+          _meta: { id: '3' },
         },
       ],
+      curation: {
+        promoted: [{ id: '1', foo: 'foo' }],
+        organic: [
+          {
+            id: { raw: '5', snippet: null },
+            foo: { raw: 'bar', snippet: null },
+            _meta: { id: '5' },
+          },
+          {
+            id: { raw: '6', snippet: null },
+            foo: { raw: 'bar', snippet: null },
+            _meta: { id: '6' },
+          },
+        ],
+      },
     },
     isMetaEngine: true,
     engine: {
@@ -99,19 +86,18 @@ describe('CurationSuggestion', () => {
   it('shows existing promoted documents', () => {
     const wrapper = shallow(<CurationSuggestion />);
     const suggestedResultsPanel = wrapper.find(CurationResultPanel).at(0);
-    // gets populated from 'curation' in state, and converted to results format (i.e, has raw properties, etc.)
     expect(suggestedResultsPanel.prop('results')).toEqual([
       {
         id: {
-          raw: '4',
+          raw: '1',
           snippet: null,
         },
         foo: {
           raw: 'foo',
           snippet: null,
         },
         _meta: {
-          id: '4',
+          id: '1',
         },
       },
     ]);
@@ -120,7 +106,21 @@ describe('CurationSuggestion', () => {
   it('shows suggested promoted documents', () => {
     const wrapper = shallow(<CurationSuggestion />);
     const suggestedResultsPanel = wrapper.find(CurationResultPanel).at(1);
-    expect(suggestedResultsPanel.prop('results')).toEqual(values.suggestedPromotedDocuments);
+    expect(suggestedResultsPanel.prop('results')).toEqual([
+      {
+        id: {
+          raw: '4',
+          snippet: null,
+        },
+        foo: {
+          raw: 'foo',
+          snippet: null,
+        },
+        _meta: {
+          id: '4',
+        },
+      },
+    ]);
   });
 
   it('displays the query in the title', () => {
@@ -142,20 +142,59 @@ describe('CurationSuggestion', () => {
   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(
+    const resultsWrapper = wrapper.find('[data-test-subj="proposedOrganicResults"]').find(Result);
+    expect(resultsWrapper.length).toBe(1);
+    expect(resultsWrapper.find(Result).at(0).prop('result')).toEqual({
+      id: { raw: '3', snippet: null },
+      foo: { raw: 'bar', snippet: null },
+      _meta: { id: '3' },
+    });
+    expect(resultsWrapper.find(Result).at(0).prop('isMetaEngine')).toEqual(true);
+    expect(resultsWrapper.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(
+    const resultWrapper = wrapper.find('[data-test-subj="currentOrganicResults"]').find(Result);
+    expect(resultWrapper.length).toBe(2);
+    expect(resultWrapper.find(Result).at(0).prop('result')).toEqual({
+      id: { raw: '5', snippet: null },
+      foo: { raw: 'bar', snippet: null },
+      _meta: { id: '5' },
+    });
+    expect(resultWrapper.find(Result).at(0).prop('isMetaEngine')).toEqual(true);
+    expect(resultWrapper.find(Result).at(0).prop('schemaForTypeHighlights')).toEqual(
       values.engine.schema
     );
   });
+
+  it('shows an empty prompt when there are no organic results', () => {
+    setMockValues({
+      ...values,
+      suggestion: {
+        ...values.suggestion,
+        organic: [],
+        curation: {
+          ...values.suggestion.curation,
+          organic: [],
+        },
+      },
+    });
+    const wrapper = shallow(<CurationSuggestion />);
+    wrapper.find('[data-test-subj="showOrganicResults"]').simulate('click');
+    expect(wrapper.find('[data-test-subj="currentOrganicResults"]').exists()).toBe(false);
+    expect(wrapper.find('[data-test-subj="proposedOrganicResults"]').exists()).toBe(false);
+    expect(wrapper.find(EuiEmptyPrompt).exists()).toBe(true);
+  });
+
+  it('renders even if no data is set yet', () => {
+    setMockValues({
+      suggestion: null,
+    });
+    const wrapper = shallow(<CurationSuggestion />);
+    expect(wrapper.find(AppSearchPageTemplate).exists()).toBe(true);
+  });
 });

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curation_suggestion/curation_suggestion.tsx

@@ -11,6 +11,7 @@ import { useActions, useValues } from 'kea';
 
 import {
   EuiButtonEmpty,
+  EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -20,6 +21,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { LeafIcon } from '../../../../../shared/icons';
 import { useDecodedParams } from '../../../../utils/encode_path_params';
 import { EngineLogic } from '../../../engine';
 import { AppSearchPageTemplate } from '../../../layout';
@@ -32,19 +34,23 @@ 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 { engine, isMetaEngine } = useValues(EngineLogic);
   const curationSuggestionLogic = CurationSuggestionLogic({ query });
   const { loadSuggestion } = useActions(curationSuggestionLogic);
-  const { suggestion, suggestedPromotedDocuments, curation, dataLoading } =
-    useValues(curationSuggestionLogic);
+  const { suggestion, dataLoading } = useValues(curationSuggestionLogic);
   const [showOrganicResults, setShowOrganicResults] = useState(false);
-  const currentOrganicResults = [...DATA].splice(5, 4);
-  const proposedOrganicResults = [...DATA].splice(2, 4);
-  const existingCurationResults = curation ? curation.promoted.map(convertToResultFormat) : [];
+  const currentOrganicResults = suggestion?.curation?.organic || [];
+  const proposedOrganicResults = suggestion?.organic || [];
+  const totalNumberOfOrganicResults = currentOrganicResults.length + proposedOrganicResults.length;
+  const existingCurationResults = suggestion?.curation
+    ? suggestion.curation.promoted.map(convertToResultFormat)
+    : [];
+  const suggestedPromotedDocuments = suggestion?.promoted
+    ? suggestion?.promoted.map(convertToResultFormat)
+    : [];
 
   const suggestionQuery = suggestion?.query || '';
 
@@ -114,7 +120,24 @@ export const CurationSuggestion: React.FC = () => {
                 { defaultMessage: 'Expand organic search results' }
               )}
         </EuiButtonEmpty>
-        {showOrganicResults && (
+        {showOrganicResults && totalNumberOfOrganicResults === 0 && (
+          <EuiEmptyPrompt
+            iconType={LeafIcon}
+            title={
+              <h4>
+                {i18n.translate(
+                  'xpack.enterpriseSearch.appSearch.engine.curations.suggestedCuration.noOrganicResultsTitle',
+                  { defaultMessage: 'No results' }
+                )}
+              </h4>
+            }
+            body={i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.curations.suggestedCuration.noOrganicResultsDescription',
+              { defaultMessage: 'No organic search results were returned for this query' }
+            )}
+          />
+        )}
+        {showOrganicResults && totalNumberOfOrganicResults > 0 && (
           <>
             <EuiHorizontalRule margin="none" />
             <EuiPanel hasShadow={false} data-test-subj="organicResults">