[Curation] Add promoted/hidden documents section & logic + Restore defaults button

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

@@ -37,3 +37,17 @@ 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 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.tsx

@@ -20,7 +20,7 @@ import { Loading } from '../../../../shared/loading';
 import { MANAGE_CURATION_TITLE } from '../constants';
 
 import { CurationLogic } from './curation_logic';
-import { OrganicDocuments } from './documents';
+import { OrganicDocuments, HiddenDocuments } from './documents';
 import { ActiveQuerySelect, ManageQueriesModal } from './queries';
 
 interface Props {
@@ -61,7 +61,8 @@ export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
 
       {/* TODO: PromotedDocuments section */}
       <OrganicDocuments />
-      {/* TODO: HiddenDocuments section */}
+      <EuiSpacer />
+      <HiddenDocuments />
 
       {/* TODO: AddResult flyout */}
     </>

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

@@ -0,0 +1,83 @@
+/*
+ * 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 { setMockValues, setMockActions } from '../../../../../__mocks__';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiEmptyPrompt, EuiButtonEmpty } from '@elastic/eui';
+
+import { DataPanel } from '../../../data_panel';
+import { CurationResult } from '../results';
+
+import { HiddenDocuments } from './';
+
+describe('HiddenDocuments', () => {
+  const values = {
+    curation: {
+      hidden: [
+        { id: 'mock-document-1' },
+        { id: 'mock-document-2' },
+        { id: 'mock-document-3' },
+        { id: 'mock-document-4' },
+        { id: 'mock-document-5' },
+      ],
+    },
+    hiddenDocumentsLoading: false,
+  };
+  const actions = {
+    removeHiddenId: jest.fn(),
+    clearHiddenIds: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(values);
+    setMockActions(actions);
+  });
+
+  it('renders a list of hidden documents', () => {
+    const wrapper = shallow(<HiddenDocuments />);
+
+    expect(wrapper.find(CurationResult)).toHaveLength(5);
+  });
+
+  it('renders an empty state & hides the panel actions when empty', () => {
+    setMockValues({ ...values, curation: { hidden: [] } });
+    const wrapper = shallow(<HiddenDocuments />);
+
+    expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
+    expect(wrapper.find(DataPanel).prop('action')).toBe(false);
+  });
+
+  it('renders a loading state', () => {
+    setMockValues({ ...values, hiddenDocumentsLoading: true });
+    const wrapper = shallow(<HiddenDocuments />);
+
+    expect(wrapper.find(DataPanel).prop('isLoading')).toEqual(true);
+  });
+
+  describe('actions', () => {
+    it('renders results with an action button that un-hides the result', () => {
+      const wrapper = shallow(<HiddenDocuments />);
+      const result = wrapper.find(CurationResult).last();
+      result.prop('actions')[0].onClick();
+
+      expect(actions.removeHiddenId).toHaveBeenCalledWith('mock-document-5');
+    });
+
+    it('renders a restore all button that un-hides all hidden results', () => {
+      const wrapper = shallow(<HiddenDocuments />);
+      const panelActions = shallow(wrapper.find(DataPanel).prop('action') as React.ReactElement);
+
+      panelActions.find(EuiButtonEmpty).simulate('click');
+      expect(actions.clearHiddenIds).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,99 @@
+/*
+ * 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 { useValues, useActions } from 'kea';
+
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { DataPanel } from '../../../data_panel';
+
+import { SHOW_DOCUMENT_ACTION } from '../../constants';
+import { CurationLogic } from '../curation_logic';
+import { AddResultButton, CurationResult, convertToResultFormat } from '../results';
+
+export const HiddenDocuments: React.FC = () => {
+  const { clearHiddenIds, removeHiddenId } = useActions(CurationLogic);
+  const { curation, hiddenDocumentsLoading } = useValues(CurationLogic);
+
+  const documents = curation.hidden;
+  const hasDocuments = documents.length > 0;
+
+  return (
+    <DataPanel
+      filled
+      iconType="eyeClosed"
+      title={
+        <h2>
+          {i18n.translate(
+            'xpack.enterpriseSearch.appSearch.engine.curations.hiddenDocuments.title',
+            { defaultMessage: 'Hidden documents' }
+          )}
+        </h2>
+      }
+      subtitle={i18n.translate(
+        'xpack.enterpriseSearch.appSearch.engine.curations.hiddenDocuments.description',
+        { defaultMessage: 'Hidden documents will not appear in organic results.' }
+      )}
+      action={
+        hasDocuments && (
+          <EuiFlexGroup gutterSize="s">
+            <EuiFlexItem>
+              <AddResultButton />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiButtonEmpty onClick={clearHiddenIds} iconType="menuUp" size="s">
+                {i18n.translate(
+                  'xpack.enterpriseSearch.appSearch.engine.curations.hiddenDocuments.removeAllButtonLabel',
+                  { defaultMessage: 'Restore all' }
+                )}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )
+      }
+      isLoading={hiddenDocumentsLoading}
+    >
+      {hasDocuments ? (
+        documents.map((document) => (
+          <CurationResult
+            key={document.id}
+            result={convertToResultFormat(document)}
+            actions={[
+              {
+                ...SHOW_DOCUMENT_ACTION,
+                onClick: () => removeHiddenId(document.id),
+              },
+            ]}
+          />
+        ))
+      ) : (
+        <EuiEmptyPrompt
+          titleSize="s"
+          title={
+            <h3>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.curations.hiddenDocuments.emptyTitle',
+                { defaultMessage: 'No documents are being hidden for this query' }
+              )}
+            </h3>
+          }
+          body={i18n.translate(
+            'xpack.enterpriseSearch.appSearch.engine.curations.hiddenDocuments.emptyDescription',
+            {
+              defaultMessage:
+                'Hide documents by clicking the eye icon on the organic results above, or search and hide a result manually.',
+            }
+          )}
+          actions={<AddResultButton />}
+        />
+      )}
+    </DataPanel>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { OrganicDocuments } from './organic_documents';
+export { HiddenDocuments } from './hidden_documents';