[App Search] Add final Analytics table components (#89233) (#90055)

* Add new AnalyticsSection component

* Update views that use AnalyticsSection

* [Setup] Update types + final API logic data

- export query types so that new table components can use them
- reorganize type keys by their (upcoming) table column order, remove unused tags from document obj

* [Setup] Migrate InlineTagsList component

- used for tags columns in all tables

* Create basic AnalyticsTable component

- there's a lot of logic separated out into constants.tsx right now, I promise it will make more sense when the one-off tables get added

* Update all views that use AnalyticsTable

+ add 'view all' button links to overview tables

* Add RecentQueriesTable component

- Why is the API for this specific table so different? who knows, but it do be that way

* Update views with RecentQueryTable

* Add QueryClicksTable component to QueryDetails view

* Create AnalyticsSearch bar for queries subpages

* [Polish] Add some space to the bottom of analytics pages

* [Design feedback] Tweak header + search form layout

- Have analytics filter form be on its own row separate from page title
- Change AnalyticsSearch to stretch to full width + add placeholder text + match header gutter + remain one line on mobile

* [PR feedback] Type clarification

* [PR feedback] Clear mocks

* [PR suggestion] File rename

constants.tsx -> shared_columns.tsx

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

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

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/analytics_layout.tsx

@@ -7,6 +7,7 @@
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useValues, useActions } from 'kea';
+import { EuiSpacer } from '@elastic/eui';
 
 import { KibanaLogic } from '../../../shared/kibana';
 import { FlashMessages } from '../../../shared/flash_messages';
@@ -47,6 +48,7 @@ export const AnalyticsLayout: React.FC<Props> = ({
       <FlashMessages />
       <LogRetentionCallout type={LogRetentionOptions.Analytics} />
       {children}
+      <EuiSpacer />
     </>
   );
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/analytics_logic.test.ts

@@ -30,6 +30,11 @@ describe('AnalyticsLogic', () => {
     dataLoading: true,
     analyticsUnavailable: false,
     allTags: [],
+    recentQueries: [],
+    topQueries: [],
+    topQueriesNoResults: [],
+    topQueriesNoClicks: [],
+    topQueriesWithClicks: [],
     totalQueries: 0,
     totalQueriesNoResults: 0,
     totalClicks: 0,
@@ -38,6 +43,7 @@ describe('AnalyticsLogic', () => {
     queriesNoResultsPerDay: [],
     clicksPerDay: [],
     queriesPerDayForQuery: [],
+    topClicksForQuery: [],
     startDate: '',
   };
 
@@ -130,16 +136,7 @@ describe('AnalyticsLogic', () => {
         expect(AnalyticsLogic.values).toEqual({
           ...DEFAULT_VALUES,
           dataLoading: false,
-          analyticsUnavailable: false,
-          allTags: ['some-tag'],
-          startDate: '1970-01-01',
-          totalClicks: 1000,
-          totalQueries: 5000,
-          totalQueriesNoResults: 500,
-          queriesPerDay: [10, 50, 100],
-          queriesNoResultsPerDay: [1, 2, 3],
-          clicksPerDay: [0, 10, 50],
-          // TODO: Replace this with ...MOCK_ANALYTICS_RESPONSE once all data is set
+          ...MOCK_ANALYTICS_RESPONSE,
         });
       });
     });
@@ -152,12 +149,7 @@ describe('AnalyticsLogic', () => {
         expect(AnalyticsLogic.values).toEqual({
           ...DEFAULT_VALUES,
           dataLoading: false,
-          analyticsUnavailable: false,
-          allTags: ['some-tag'],
-          startDate: '1970-01-01',
-          totalQueriesForQuery: 50,
-          queriesPerDayForQuery: [25, 0, 25],
-          // TODO: Replace this with ...MOCK_QUERY_RESPONSE once all data is set
+          ...MOCK_QUERY_RESPONSE,
         });
       });
     });

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/analytics_logic.ts

@@ -62,6 +62,36 @@ export const AnalyticsLogic = kea<MakeLogicType<AnalyticsValues, AnalyticsAction
         onQueryDataLoad: (_, { allTags }) => allTags,
       },
     ],
+    recentQueries: [
+      [],
+      {
+        onAnalyticsDataLoad: (_, { recentQueries }) => recentQueries,
+      },
+    ],
+    topQueries: [
+      [],
+      {
+        onAnalyticsDataLoad: (_, { topQueries }) => topQueries,
+      },
+    ],
+    topQueriesNoResults: [
+      [],
+      {
+        onAnalyticsDataLoad: (_, { topQueriesNoResults }) => topQueriesNoResults,
+      },
+    ],
+    topQueriesNoClicks: [
+      [],
+      {
+        onAnalyticsDataLoad: (_, { topQueriesNoClicks }) => topQueriesNoClicks,
+      },
+    ],
+    topQueriesWithClicks: [
+      [],
+      {
+        onAnalyticsDataLoad: (_, { topQueriesWithClicks }) => topQueriesWithClicks,
+      },
+    ],
     totalQueries: [
       0,
       {
@@ -110,6 +140,12 @@ export const AnalyticsLogic = kea<MakeLogicType<AnalyticsValues, AnalyticsAction
         onQueryDataLoad: (_, { queriesPerDayForQuery }) => queriesPerDayForQuery,
       },
     ],
+    topClicksForQuery: [
+      [],
+      {
+        onQueryDataLoad: (_, { topClicksForQuery }) => topClicksForQuery,
+      },
+    ],
     startDate: [
       '',
       {

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_header.scss

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+.analyticsHeader {
+  flex-wrap: wrap;
+
+  &__filters.euiPageHeaderSection {
+    width: 100%;
+    margin: $euiSizeM 0;
+  }
+}

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_header.tsx

@@ -30,6 +30,8 @@ import { AnalyticsLogic } from '../';
 import { DEFAULT_START_DATE, DEFAULT_END_DATE, SERVER_DATE_FORMAT } from '../constants';
 import { convertTagsToSelectOptions } from '../utils';
 
+import './analytics_header.scss';
+
 interface Props {
   title: string;
 }
@@ -60,7 +62,7 @@ export const AnalyticsHeader: React.FC<Props> = ({ title }) => {
   const hasInvalidDateRange = startDate > endDate;
 
   return (
-    <EuiPageHeader>
+    <EuiPageHeader className="analyticsHeader">
       <EuiPageHeaderSection>
         <EuiFlexGroup alignItems="center" justifyContent="flexStart" responsive={false}>
           <EuiFlexItem grow={false}>
@@ -69,13 +71,13 @@ export const AnalyticsHeader: React.FC<Props> = ({ title }) => {
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <LogRetentionTooltip type={LogRetentionOptions.Analytics} />
+            <LogRetentionTooltip type={LogRetentionOptions.Analytics} position="right" />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPageHeaderSection>
-      <EuiPageHeaderSection>
+      <EuiPageHeaderSection className="analyticsHeader__filters">
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="m">
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem>
             <EuiSelect
               options={convertTagsToSelectOptions(allTags)}
               value={currentTag}
@@ -87,7 +89,7 @@ export const AnalyticsHeader: React.FC<Props> = ({ title }) => {
               fullWidth
             />
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem>
             <EuiDatePickerRange
               startDateControl={
                 <EuiDatePicker

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_search.test.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { mockKibanaValues } from '../../../../__mocks__';
+import '../../../__mocks__/engine_logic.mock';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiFieldSearch } from '@elastic/eui';
+
+import { AnalyticsSearch } from './';
+
+describe('AnalyticsSearch', () => {
+  const { navigateToUrl } = mockKibanaValues;
+  const preventDefault = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const wrapper = shallow(<AnalyticsSearch />);
+  const setSearchValue = (value: string) =>
+    wrapper.find(EuiFieldSearch).simulate('change', { target: { value } });
+
+  it('renders', () => {
+    expect(wrapper.find(EuiFieldSearch)).toHaveLength(1);
+  });
+
+  it('updates searchValue state on input change', () => {
+    expect(wrapper.find(EuiFieldSearch).prop('value')).toEqual('');
+
+    setSearchValue('some-query');
+    expect(wrapper.find(EuiFieldSearch).prop('value')).toEqual('some-query');
+  });
+
+  it('sends the user to the query detail page on search', () => {
+    wrapper.find('form').simulate('submit', { preventDefault });
+
+    expect(preventDefault).toHaveBeenCalled();
+    expect(navigateToUrl).toHaveBeenCalledWith(
+      '/engines/some-engine/analytics/query_detail/some-query'
+    );
+  });
+
+  it('falls back to showing the "" query if searchValue is empty', () => {
+    setSearchValue('');
+    wrapper.find('form').simulate('submit', { preventDefault });
+
+    expect(navigateToUrl).toHaveBeenCalledWith(
+      '/engines/some-engine/analytics/query_detail/%22%22' // "" gets encoded
+    );
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_search.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { useValues } from 'kea';
+
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiButton, EuiSpacer } from '@elastic/eui';
+
+import { KibanaLogic } from '../../../../shared/kibana';
+import { ENGINE_ANALYTICS_QUERY_DETAIL_PATH } from '../../../routes';
+import { generateEnginePath } from '../../engine';
+
+export const AnalyticsSearch: React.FC = () => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const { navigateToUrl } = useValues(KibanaLogic);
+  const viewQueryDetails = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    const query = searchValue || '""';
+    navigateToUrl(generateEnginePath(ENGINE_ANALYTICS_QUERY_DETAIL_PATH, { query }));
+  };
+
+  return (
+    <form onSubmit={viewQueryDetails}>
+      <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
+        <EuiFlexItem>
+          <EuiFieldSearch
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            placeholder={i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.analytics.queryDetailSearchPlaceholder',
+              { defaultMessage: 'Go to search term' }
+            )}
+            fullWidth
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton type="submit">
+            {i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.analytics.queryDetailSearchButtonLabel',
+              { defaultMessage: 'View details' }
+            )}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+    </form>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_section.test.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { AnalyticsSection } from './';
+
+describe('AnalyticsSection', () => {
+  it('renders', () => {
+    const wrapper = shallow(
+      <AnalyticsSection title="Lorem ipsum" subtitle="Dolor sit amet.">
+        <div data-test-subj="HelloWorld">Test</div>
+      </AnalyticsSection>
+    );
+
+    expect(wrapper.find('h2').text()).toEqual('Lorem ipsum');
+    expect(wrapper.find('p').text()).toEqual('Dolor sit amet.');
+    expect(wrapper.find('[data-test-subj="HelloWorld"]')).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_section.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { EuiPageContentBody, EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
+
+interface Props {
+  title: string;
+  subtitle: string;
+}
+export const AnalyticsSection: React.FC<Props> = ({ title, subtitle, children }) => (
+  <section>
+    <header>
+      <EuiTitle size="m">
+        <h2>{title}</h2>
+      </EuiTitle>
+      <EuiText size="s" color="subdued">
+        <p>{subtitle}</p>
+      </EuiText>
+    </header>
+    <EuiSpacer size="m" />
+    <EuiPageContentBody>{children}</EuiPageContentBody>
+  </section>
+);