[Curation] Add promoted/hidden documents section & logic + Restore de…

…faults button (#94769)

* Set up promoted & hidden documents logic

* Set up result utility for converting CurationResult to Result

* Set up AddResultButton in documents sections

- not hooked up to anything right now, but will be in the next PR

* Add HiddenDocuments section

* Add PromotedDocuments section w/ draggable results

* Update OrganicDocuments results with promote/hide actions

* Add the Restore Defaults button+logic

* PR feedback: key ID

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -32,8 +32,43 @@ export const SUCCESS_MESSAGE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.curations.deleteSuccessMessage',
   { defaultMessage: 'Successfully removed curation.' }
 );
+export const RESTORE_CONFIRMATION = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.curations.restoreConfirmation',
+  {
+    defaultMessage:
+      'Are you sure you want to clear your changes and return to your default results?',
+  }
+);
 
 export const RESULT_ACTIONS_DIRECTIONS = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.curations.resultActionsDescription',
   { defaultMessage: 'Promote results by clicking the star, hide them by clicking the eye.' }
 );
+export const PROMOTE_DOCUMENT_ACTION = {
+  title: i18n.translate('xpack.enterpriseSearch.appSearch.engine.curations.promoteButtonLabel', {
+    defaultMessage: 'Promote this result',
+  }),
+  iconType: 'starPlusEmpty',
+  iconColor: 'primary',
+};
+export const DEMOTE_DOCUMENT_ACTION = {
+  title: i18n.translate('xpack.enterpriseSearch.appSearch.engine.curations.demoteButtonLabel', {
+    defaultMessage: 'Demote this result',
+  }),
+  iconType: 'starMinusFilled',
+  iconColor: 'primary',
+};
+export const HIDE_DOCUMENT_ACTION = {
+  title: i18n.translate('xpack.enterpriseSearch.appSearch.engine.curations.hideButtonLabel', {
+    defaultMessage: 'Hide this result',
+  }),
+  iconType: 'eyeClosed',
+  iconColor: 'danger',
+};
+export const SHOW_DOCUMENT_ACTION = {
+  title: i18n.translate('xpack.enterpriseSearch.appSearch.engine.curations.showButtonLabel', {
+    defaultMessage: 'Show this result',
+  }),
+  iconType: 'eye',
+  iconColor: 'primary',
+};

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

@@ -12,7 +12,7 @@ import { setMockActions, setMockValues, rerender } from '../../../../__mocks__';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import { EuiPageHeader } from '@elastic/eui';
 
@@ -34,6 +34,7 @@ describe('Curation', () => {
   };
   const actions = {
     loadCuration: jest.fn(),
+    resetCuration: jest.fn(),
   };
 
   beforeEach(() => {
@@ -75,4 +76,33 @@ describe('Curation', () => {
     rerender(wrapper);
     expect(actions.loadCuration).toHaveBeenCalledTimes(2);
   });
+
+  describe('restore defaults button', () => {
+    let restoreDefaultsButton: ShallowWrapper;
+    let confirmSpy: jest.SpyInstance;
+
+    beforeAll(() => {
+      const wrapper = shallow(<Curation {...props} />);
+      const headerActions = wrapper.find(EuiPageHeader).prop('rightSideItems');
+      restoreDefaultsButton = shallow(headerActions![0] as React.ReactElement);
+
+      confirmSpy = jest.spyOn(window, 'confirm');
+    });
+
+    afterAll(() => {
+      confirmSpy.mockRestore();
+    });
+
+    it('resets the curation upon user confirmation', () => {
+      confirmSpy.mockReturnValueOnce(true);
+      restoreDefaultsButton.simulate('click');
+      expect(actions.resetCuration).toHaveBeenCalled();
+    });
+
+    it('does not reset the curation if the user cancels', () => {
+      confirmSpy.mockReturnValueOnce(false);
+      restoreDefaultsButton.simulate('click');
+      expect(actions.resetCuration).not.toHaveBeenCalled();
+    });
+  });
 });

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

@@ -10,17 +10,18 @@ import { useParams } from 'react-router-dom';
 
 import { useValues, useActions } from 'kea';
 
-import { EuiPageHeader, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 import { FlashMessages } from '../../../../shared/flash_messages';
 import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
 import { BreadcrumbTrail } from '../../../../shared/kibana_chrome/generate_breadcrumbs';
 import { Loading } from '../../../../shared/loading';
 
-import { MANAGE_CURATION_TITLE } from '../constants';
+import { MANAGE_CURATION_TITLE, RESTORE_CONFIRMATION } from '../constants';
 
 import { CurationLogic } from './curation_logic';
-import { OrganicDocuments } from './documents';
+import { PromotedDocuments, OrganicDocuments, HiddenDocuments } from './documents';
 import { ActiveQuerySelect, ManageQueriesModal } from './queries';
 
 interface Props {
@@ -29,7 +30,7 @@ interface Props {
 
 export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
   const { curationId } = useParams() as { curationId: string };
-  const { loadCuration } = useActions(CurationLogic({ curationId }));
+  const { loadCuration, resetCuration } = useActions(CurationLogic({ curationId }));
   const { dataLoading, queries } = useValues(CurationLogic({ curationId }));
 
   useEffect(() => {
@@ -43,7 +44,18 @@ export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
       <SetPageChrome trail={[...curationsBreadcrumb, queries.join(', ')]} />
       <EuiPageHeader
         pageTitle={MANAGE_CURATION_TITLE}
-        /* TODO: Restore defaults button */
+        rightSideItems={[
+          <EuiButton
+            color="danger"
+            onClick={() => {
+              if (window.confirm(RESTORE_CONFIRMATION)) resetCuration();
+            }}
+          >
+            {i18n.translate('xpack.enterpriseSearch.appSearch.actions.restoreDefaults', {
+              defaultMessage: 'Restore defaults',
+            })}
+          </EuiButton>,
+        ]}
         responsive={false}
       />
 
@@ -59,9 +71,11 @@ export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
       <EuiSpacer size="xl" />
       <FlashMessages />
 
-      {/* TODO: PromotedDocuments section */}
+      <PromotedDocuments />
+      <EuiSpacer />
       <OrganicDocuments />
-      {/* TODO: HiddenDocuments section */}
+      <EuiSpacer />
+      <HiddenDocuments />
 
       {/* TODO: AddResult flyout */}
     </>

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/curation_logic.test.ts

@@ -51,6 +51,10 @@ describe('CurationLogic', () => {
     queriesLoading: false,
     activeQuery: '',
     organicDocumentsLoading: false,
+    promotedIds: [],
+    promotedDocumentsLoading: false,
+    hiddenIds: [],
+    hiddenDocumentsLoading: false,
   };
 
   beforeEach(() => {
@@ -64,7 +68,7 @@ describe('CurationLogic', () => {
 
   describe('actions', () => {
     describe('onCurationLoad', () => {
-      it('should set curation, queries, activeQuery, & all loading states to false', () => {
+      it('should set curation, queries, activeQuery, promotedIds, hiddenIds, & all loading states to false', () => {
         mount();
 
         CurationLogic.actions.onCurationLoad(MOCK_CURATION_RESPONSE);
@@ -74,9 +78,13 @@ describe('CurationLogic', () => {
           curation: MOCK_CURATION_RESPONSE,
           queries: ['some search'],
           activeQuery: 'some search',
+          promotedIds: ['some-promoted-document'],
+          hiddenIds: ['some-hidden-document'],
           dataLoading: false,
           queriesLoading: false,
           organicDocumentsLoading: false,
+          promotedDocumentsLoading: false,
+          hiddenDocumentsLoading: false,
         });
       });
 
@@ -95,6 +103,8 @@ describe('CurationLogic', () => {
           dataLoading: true,
           queriesLoading: true,
           organicDocumentsLoading: true,
+          promotedDocumentsLoading: true,
+          hiddenDocumentsLoading: true,
         });
 
         CurationLogic.actions.onCurationError();
@@ -104,6 +114,8 @@ describe('CurationLogic', () => {
           dataLoading: false,
           queriesLoading: false,
           organicDocumentsLoading: false,
+          promotedDocumentsLoading: false,
+          hiddenDocumentsLoading: false,
         });
       });
     });
@@ -136,6 +148,121 @@ describe('CurationLogic', () => {
         });
       });
     });
+
+    describe('setPromotedIds', () => {
+      it('should set promotedIds state & promotedDocumentsLoading to true', () => {
+        mount();
+
+        CurationLogic.actions.setPromotedIds(['hello', 'world']);
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          promotedIds: ['hello', 'world'],
+          promotedDocumentsLoading: true,
+        });
+      });
+    });
+
+    describe('addPromotedId', () => {
+      it('should set promotedIds state & promotedDocumentsLoading to true', () => {
+        mount({ promotedIds: ['hello'] });
+
+        CurationLogic.actions.addPromotedId('world');
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          promotedIds: ['hello', 'world'],
+          promotedDocumentsLoading: true,
+        });
+      });
+    });
+
+    describe('removePromotedId', () => {
+      it('should set promotedIds state & promotedDocumentsLoading to true', () => {
+        mount({ promotedIds: ['hello', 'deleteme', 'world'] });
+
+        CurationLogic.actions.removePromotedId('deleteme');
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          promotedIds: ['hello', 'world'],
+          promotedDocumentsLoading: true,
+        });
+      });
+    });
+
+    describe('clearPromotedId', () => {
+      it('should reset promotedIds state & set promotedDocumentsLoading to true', () => {
+        mount({ promotedIds: ['hello', 'world'] });
+
+        CurationLogic.actions.clearPromotedIds();
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          promotedIds: [],
+          promotedDocumentsLoading: true,
+        });
+      });
+    });
+
+    describe('addHiddenId', () => {
+      it('should set hiddenIds state & hiddenDocumentsLoading to true', () => {
+        mount({ hiddenIds: ['hello'] });
+
+        CurationLogic.actions.addHiddenId('world');
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          hiddenIds: ['hello', 'world'],
+          hiddenDocumentsLoading: true,
+        });
+      });
+    });
+
+    describe('removeHiddenId', () => {
+      it('should set hiddenIds state & hiddenDocumentsLoading to true', () => {
+        mount({ hiddenIds: ['hello', 'deleteme', 'world'] });
+
+        CurationLogic.actions.removeHiddenId('deleteme');
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          hiddenIds: ['hello', 'world'],
+          hiddenDocumentsLoading: true,
+        });
+      });
+    });
+
+    describe('clearHiddenId', () => {
+      it('should reset hiddenIds state & set hiddenDocumentsLoading to true', () => {
+        mount({ hiddenIds: ['hello', 'world'] });
+
+        CurationLogic.actions.clearHiddenIds();
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          hiddenIds: [],
+          hiddenDocumentsLoading: true,
+        });
+      });
+    });
+
+    describe('resetCuration', () => {
+      it('should clear promotedIds & hiddenIds & set dataLoading to true', () => {
+        mount({ promotedIds: ['hello'], hiddenIds: ['world'] });
+
+        CurationLogic.actions.resetCuration();
+
+        expect(CurationLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          dataLoading: true,
+          promotedIds: [],
+          promotedDocumentsLoading: true,
+          hiddenIds: [],
+          hiddenDocumentsLoading: true,
+        });
+      });
+    });
   });
 
   describe('listeners', () => {
@@ -187,6 +314,8 @@ describe('CurationLogic', () => {
           {
             queries: ['a', 'b', 'c'],
             activeQuery: 'b',
+            promotedIds: ['d', 'e', 'f'],
+            hiddenIds: ['g'],
           },
           { curationId: 'cur-123456789' }
         );
@@ -199,7 +328,7 @@ describe('CurationLogic', () => {
         expect(http.put).toHaveBeenCalledWith(
           '/api/app_search/engines/some-engine/curations/cur-123456789',
           {
-            body: '{"queries":["a","b","c"],"query":"b","promoted":[],"hidden":[]}', // Uses state currently in CurationLogic
+            body: '{"queries":["a","b","c"],"query":"b","promoted":["d","e","f"],"hidden":["g"]}', // Uses state currently in CurationLogic
           }
         );
         expect(CurationLogic.actions.onCurationLoad).toHaveBeenCalledWith(MOCK_CURATION_RESPONSE);
@@ -249,6 +378,34 @@ describe('CurationLogic', () => {
       it('setActiveQuery', () => {
         CurationLogic.actions.setActiveQuery('test');
       });
+
+      it('setPromotedIds', () => {
+        CurationLogic.actions.setPromotedIds(['test']);
+      });
+
+      it('addPromotedId', () => {
+        CurationLogic.actions.addPromotedId('test');
+      });
+
+      it('removePromotedId', () => {
+        CurationLogic.actions.removePromotedId('test');
+      });
+
+      it('clearPromotedIds', () => {
+        CurationLogic.actions.clearPromotedIds();
+      });
+
+      it('addHiddenId', () => {
+        CurationLogic.actions.addHiddenId('test');
+      });
+
+      it('removeHiddenId', () => {
+        CurationLogic.actions.removeHiddenId('test');
+      });
+
+      it('clearHiddenIds', () => {
+        CurationLogic.actions.clearHiddenIds();
+      });
     });
   });
 });