Added a SuggestionsTable to Curations view (#113123)

elastic · Sep 27, 2021 · 1767bee · 1767bee
1 parent 3e5d5f4
commit 1767bee
Show file tree

Hide file tree

Showing 10 changed files with 309 additions and 20 deletions.
diff --git a/...search/public/applications/app_search/components/curations/components/curations_table.tsx b/...search/public/applications/app_search/components/curations/components/curations_table.tsx
@@ -19,6 +19,7 @@ import { convertMetaToPagination, handlePageChange } from '../../../../shared/ta
 
 import { ENGINE_CURATION_PATH } from '../../../routes';
 import { FormattedDateTime } from '../../../utils/formatted_date_time';
+import { DataPanel } from '../../data_panel';
 import { generateEnginePath } from '../../engine';
 
 import { CurationsLogic } from '../curations_logic';
@@ -101,17 +102,29 @@ export const CurationsTable: React.FC = () => {
   ];
 
   return (
-    <EuiBasicTable
-      columns={columns}
-      items={curations}
-      responsive
-      hasActions
-      loading={dataLoading}
-      pagination={{
-        ...convertMetaToPagination(meta),
-        hidePerPageOptions: true,
-      }}
-      onChange={handlePageChange(onPaginate)}
-    />
+    <DataPanel
+      hasBorder
+      iconType="package"
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.engine.curations.table.title', {
+            defaultMessage: 'Active curations',
+          })}
+        </h2>
+      }
+    >
+      <EuiBasicTable
+        columns={columns}
+        items={curations}
+        responsive
+        hasActions
+        loading={dataLoading}
+        pagination={{
+          ...convertMetaToPagination(meta),
+          hidePerPageOptions: true,
+        }}
+        onChange={handlePageChange(onPaginate)}
+      />
+    </DataPanel>
   );
 };
diff --git a/...public/applications/app_search/components/curations/components/suggestions_table.test.tsx b/...public/applications/app_search/components/curations/components/suggestions_table.test.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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 { mockKibanaValues, setMockValues } from '../../../../__mocks__/kea_logic';
+import '../../../__mocks__/engine_logic.mock';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiBasicTable } from '@elastic/eui';
+
+import { SuggestionsTable } from './suggestions_table';
+
+describe('SuggestionsTable', () => {
+  const { navigateToUrl } = mockKibanaValues;
+
+  const values = {
+    engineName: 'some-engine',
+  };
+
+  beforeAll(() => {
+    setMockValues(values);
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const getColumn = (index: number) => {
+    const wrapper = shallow(<SuggestionsTable />);
+    const table = wrapper.find(EuiBasicTable);
+    const columns = table.prop('columns');
+    return columns[index];
+  };
+
+  const renderColumn = (index: number) => {
+    const column = getColumn(index);
+    // @ts-ignore
+    return (...props) => {
+      // @ts-ignore
+      return shallow(column.render(...props));
+    };
+  };
+
+  it('renders', () => {
+    const wrapper = shallow(<SuggestionsTable />);
+    expect(wrapper.find(EuiBasicTable).exists()).toBe(true);
+  });
+
+  it('show a suggestions query with a link', () => {
+    const wrapper = renderColumn(0)('test');
+    expect(wrapper.prop('href')).toBe(
+      '/app/enterprise_search/engines/some-engine/curations/suggestions/test'
+    );
+    expect(wrapper.text()).toEqual('test');
+  });
+
+  it('contains an updated at timestamp', () => {
+    const wrapper = renderColumn(1)('2021-07-08T14:35:50Z');
+    expect(wrapper.find('FormattedDate').exists()).toBe(true);
+  });
+
+  it('contains a promoted documents count', () => {
+    const wrapper = renderColumn(2)(['a', 'b', 'c']);
+    expect(wrapper.text()).toEqual('3');
+  });
+
+  it('has a view action', () => {
+    const column = getColumn(3);
+    // @ts-ignore
+    const actions = column.actions;
+    actions[0].onClick({
+      query: 'foo',
+    });
+    expect(navigateToUrl).toHaveBeenCalledWith('/engines/some-engine/curations/suggestions/foo');
+  });
+});
diff --git a/...arch/public/applications/app_search/components/curations/components/suggestions_table.tsx b/...arch/public/applications/app_search/components/curations/components/suggestions_table.tsx
@@ -0,0 +1,141 @@
+/*
+ * 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 { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { VIEW_BUTTON_LABEL } from '../../../../shared/constants';
+import { LightbulbIcon } from '../../../../shared/icons';
+import { KibanaLogic } from '../../../../shared/kibana';
+import { EuiLinkTo } from '../../../../shared/react_router_helpers';
+import { convertMetaToPagination, handlePageChange } from '../../../../shared/table_pagination';
+import { ENGINE_CURATION_SUGGESTION_PATH } from '../../../routes';
+import { FormattedDateTime } from '../../../utils/formatted_date_time';
+import { DataPanel } from '../../data_panel';
+import { generateEnginePath } from '../../engine';
+import { CurationSuggestion } from '../types';
+import { convertToDate } from '../utils';
+
+const getSuggestionRoute = (query: string) => {
+  return generateEnginePath(ENGINE_CURATION_SUGGESTION_PATH, { query });
+};
+
+const columns: Array<EuiBasicTableColumn<CurationSuggestion>> = [
+  {
+    field: 'query',
+    name: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.column.queryTableHeader',
+      { defaultMessage: 'Query' }
+    ),
+    render: (query: string) => <EuiLinkTo to={getSuggestionRoute(query)}>{query}</EuiLinkTo>,
+  },
+  {
+    field: 'updated_at',
+    dataType: 'string',
+    name: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.column.lastUpdatedTableHeader',
+      { defaultMessage: 'Last updated' }
+    ),
+    render: (dateString: string) => <FormattedDateTime date={convertToDate(dateString)} />,
+  },
+  {
+    field: 'promoted',
+    name: i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.column.promotedDocumentsTableHeader',
+      { defaultMessage: 'Promoted documents' }
+    ),
+    render: (promoted: string[]) => <span>{promoted.length}</span>,
+  },
+  {
+    actions: [
+      {
+        name: VIEW_BUTTON_LABEL,
+        description: i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.viewTooltip',
+          { defaultMessage: 'View suggestion' }
+        ),
+        type: 'icon',
+        icon: 'eye',
+        onClick: (item) => {
+          const { navigateToUrl } = KibanaLogic.values;
+          const query = item.query;
+          navigateToUrl(getSuggestionRoute(query));
+        },
+      },
+    ],
+    width: '120px',
+  },
+];
+
+export const SuggestionsTable: React.FC = () => {
+  // TODO wire up this data
+  const items: CurationSuggestion[] = [
+    {
+      query: 'foo',
+      updated_at: '2021-07-08T14:35:50Z',
+      promoted: ['1', '2'],
+    },
+  ];
+  const meta = {
+    page: {
+      current: 1,
+      size: 10,
+      total_results: 100,
+      total_pages: 10,
+    },
+  };
+  const totalSuggestions = meta.page.total_results;
+  // TODO
+  // @ts-ignore
+  const onPaginate = (...params) => {
+    // eslint-disable-next-line no-console
+    console.log('paging...');
+    // eslint-disable-next-line no-console
+    console.log(params);
+  };
+  const isLoading = false;
+
+  return (
+    <DataPanel
+      iconType={LightbulbIcon}
+      title={
+        <h2>
+          {i18n.translate(
+            'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.title',
+            {
+              defaultMessage: '{totalSuggestions} Suggestions',
+              values: { totalSuggestions },
+            }
+          )}
+        </h2>
+      }
+      subtitle={i18n.translate(
+        'xpack.enterpriseSearch.appSearch.engine.curations.suggestionsTable.description',
+        {
+          defaultMessage:
+            'Based on your analytics, results for the following queries could be improved by promoting some documents.',
+        }
+      )}
+      hasBorder
+    >
+      <EuiBasicTable
+        columns={columns}
+        items={items}
+        responsive
+        hasActions
+        loading={isLoading}
+        pagination={{
+          ...convertMetaToPagination(meta),
+          hidePerPageOptions: true,
+        }}
+        onChange={handlePageChange(onPaginate)}
+      />
+    </DataPanel>
+  );
+};
diff --git a/...ck/plugins/enterprise_search/public/applications/app_search/components/curations/types.ts b/...ck/plugins/enterprise_search/public/applications/app_search/components/curations/types.ts
@@ -8,6 +8,11 @@
 import { Meta } from '../../../../../common/types';
 import { Result } from '../result/types';
 
+export interface CurationSuggestion {
+  query: string;
+  updated_at: string;
+  promoted: string[];
+}
 export interface Curation {
   id: string;
   last_updated: string;

diff --git a/...rch/public/applications/app_search/components/curations/views/curations_overview.test.tsx b/...rch/public/applications/app_search/components/curations/views/curations_overview.test.tsx
@@ -26,7 +26,7 @@ describe('CurationsOverview', () => {
     setMockValues({ curations: [] });
     const wrapper = shallow(<CurationsOverview />);
 
-    expect(wrapper.is(EmptyState)).toBe(true);
+    expect(wrapper.find(EmptyState).exists()).toBe(true);
   });
 
   it('renders a curations table when there are curations present', () => {

diff --git a/...e_search/public/applications/app_search/components/curations/views/curations_overview.tsx b/...e_search/public/applications/app_search/components/curations/views/curations_overview.tsx
@@ -9,19 +9,27 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 
 import { CurationsTable, EmptyState } from '../components';
+import { SuggestionsTable } from '../components/suggestions_table';
 import { CurationsLogic } from '../curations_logic';
 
 export const CurationsOverview: React.FC = () => {
   const { curations } = useValues(CurationsLogic);
 
-  return curations.length ? (
-    <EuiPanel hasBorder>
-      <CurationsTable />
-    </EuiPanel>
-  ) : (
-    <EmptyState />
+  // TODO
+  const shouldShowSuggestions = true;
+
+  return (
+    <>
+      {shouldShowSuggestions && (
+        <>
+          <SuggestionsTable />
+          <EuiSpacer />
+        </>
+      )}
+      {curations.length > 0 ? <CurationsTable /> : <EmptyState />}
+    </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts
@@ -49,6 +49,7 @@ export const ENGINE_RESULT_SETTINGS_PATH = `${ENGINE_PATH}/result_settings`;
 export const ENGINE_CURATIONS_PATH = `${ENGINE_PATH}/curations`;
 export const ENGINE_CURATIONS_NEW_PATH = `${ENGINE_CURATIONS_PATH}/new`;
 export const ENGINE_CURATION_PATH = `${ENGINE_CURATIONS_PATH}/:curationId`;
+export const ENGINE_CURATION_SUGGESTION_PATH = `${ENGINE_CURATIONS_PATH}/suggestions/:query`;
 
 export const ENGINE_SEARCH_UI_PATH = `${ENGINE_PATH}/search_ui`;
 export const ENGINE_API_LOGS_PATH = `${ENGINE_PATH}/api_logs`;
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/constants/actions.ts b/x-pack/plugins/enterprise_search/public/applications/shared/constants/actions.ts
@@ -49,3 +49,7 @@ export const RESET_DEFAULT_BUTTON_LABEL = i18n.translate(
   'xpack.enterpriseSearch.actions.resetDefaultButtonLabel',
   { defaultMessage: 'Reset to default' }
 );
+
+export const VIEW_BUTTON_LABEL = i18n.translate('xpack.enterpriseSearch.actions.viewButtonLabel', {
+  defaultMessage: 'View',
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/icons/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/icons/index.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { LightbulbIcon } from './lightbulb_icon';
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/icons/lightbulb_icon.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/icons/lightbulb_icon.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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';
+
+// TODO: This icon will be added to EUI soon - we should remove this custom SVG when once it's available in EUI
+export const LightbulbIcon: React.FC = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="euiIcon"
+    width={16}
+    height={16}
+    {...props}
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.4934 8.12804C11.4134 7.39347 12 6.26556 12 5C12 2.79086 10.2091 1 8 1C5.79086 1 4 2.79086 4 5C4 6.28899 4.6086 7.43538 5.55822 8.16854C6.27087 8.71875 6.9811 9.6127 6.99963 10.7647L7.5 10.9211V7.20711L6.14645 5.85355C5.95118 5.65829 5.95118 5.34171 6.14645 5.14645C6.34171 4.95118 6.65829 4.95118 6.85355 5.14645L8 6.29289L9.14645 5.14645C9.34171 4.95118 9.65829 4.95118 9.85355 5.14645C10.0488 5.34171 10.0488 5.65829 9.85355 5.85355L8.5 7.20711V11.2336L9 11.3898V10.8927C9 9.66814 9.7538 8.71852 10.4934 8.12804ZM11.1173 8.90952C10.4961 9.40552 10 10.0977 10 10.8927V12.0699C10 12.4072 9.67283 12.6478 9.35086 12.5471L6.65782 11.7056C6.26647 11.5833 6 11.2208 6 10.8108C6 10.0656 5.53698 9.4155 4.94711 8.96009C3.76279 8.04573 3 6.61195 3 5C3 2.23858 5.23858 0 8 0C10.7614 0 13 2.23858 13 5C13 6.58253 12.2648 7.99335 11.1173 8.90952ZM6.65813 12.5257C6.39616 12.4383 6.113 12.5799 6.02567 12.8419C5.93835 13.1039 6.07993 13.387 6.3419 13.4744L8.85539 14.3122C8.94176 14.341 9.00001 14.4218 9.00001 14.5128C9.00001 14.6572 8.85858 14.7592 8.72161 14.7135L6.65813 14.0257C6.39616 13.9383 6.113 14.0799 6.02567 14.3419C5.93835 14.6039 6.07993 14.887 6.3419 14.9744L8.40539 15.6622C9.18988 15.9237 10 15.3398 10 14.5128C10 13.9914 9.66633 13.5284 9.17161 13.3635L6.65813 12.5257Z"
+    />
+  </svg>
+);