[Enterprise Search] Add Overview landing page/plugin (#76734) (#77113)

* [public] Register Enterprise search plugin

+ move new Home strings to constants

* [server] Register plugin access/visibility

* Set up Enterprise Search Kibana Chrome

- Add SetEnterpriseSearchChrome
- Update Enterprise Search breadcrumbs to link to new overview plugin (+ update overview plugin URL per team discussion)
  - Add ability to break out of React Router basename by not using history.createhref
  - Update createHref mock to more closely match Kibana urls (adding /app prefix)
- Minor documentation fix

* Set up Enterprise Search plugin telemetry

- client-side: SendEnterpriseSearchTelemetry
- server-side: register saved objects, usage collector, etc.

* Enterprise search overview views (#23)

* Add formatTestSubj util

This allows us to correctly format strings into our casing for data-test-subj attrs

* Add images and stylesheet

* Add product card component

* Add index component

* Remove unused styles

* Fix inter-plugin links
- by add shouldNotCreateHref prop to RR helpers
- similiar to breadcrumb change

* Fix/clean up CSS

- Prefer EUI components over bespoke CSS (e.g. EuiCard)
- Remove unused or unspecific CSS
- Pull out product card CSS to its component
- Fix kebab-cased CSS classes to camelCased

* Clean up ProductCard props

- Prefer passing in our plugin consts instead of separate props
- Move productCardDescription to constants
- Update tests

* Add telemetry clicked actions to product buttons

+ revert data-test-subj strings to previous implementation
+ prune format_test_subj helper by using lodash util directly

* [PR feedback] Add new plugin to applicationUsageSchema per telemetry team request

* Fix failing functional navLinks test

* Fix telemetry schema test

* [Perf] Optimize assets size by switching from 300kb SVG to 25kb PNG

* Only show product cards if the user has access to that product

- adds access checks
- fixes flex/CSS to show one card at a time

Co-authored-by: Scotty Bollinger <[email protected]>

Co-authored-by: Scotty Bollinger <[email protected]>

src/plugins/kibana_usage_collection/server/collectors/application_usage/schema.ts

@@ -66,6 +66,7 @@ export const applicationUsageSchema = {
   csm: commonSchema,
   canvas: commonSchema,
   dashboard_mode: commonSchema, // It's a forward app so we'll likely never report it
+  enterpriseSearch: commonSchema,
   appSearch: commonSchema,
   workplaceSearch: commonSchema,
   graph: commonSchema,

src/plugins/telemetry/schema/oss_plugins.json

@@ -414,6 +414,34 @@
             }
           }
         },
+        "enterpriseSearch": {
+          "properties": {
+            "clicks_total": {
+              "type": "long"
+            },
+            "clicks_7_days": {
+              "type": "long"
+            },
+            "clicks_30_days": {
+              "type": "long"
+            },
+            "clicks_90_days": {
+              "type": "long"
+            },
+            "minutes_on_screen_total": {
+              "type": "float"
+            },
+            "minutes_on_screen_7_days": {
+              "type": "float"
+            },
+            "minutes_on_screen_30_days": {
+              "type": "float"
+            },
+            "minutes_on_screen_90_days": {
+              "type": "float"
+            }
+          }
+        },
         "appSearch": {
           "properties": {
             "clicks_total": {

x-pack/plugins/enterprise_search/common/constants.ts

@@ -11,7 +11,24 @@ export const ENTERPRISE_SEARCH_PLUGIN = {
   NAME: i18n.translate('xpack.enterpriseSearch.productName', {
     defaultMessage: 'Enterprise Search',
   }),
-  URL: '/app/enterprise_search',
+  NAV_TITLE: i18n.translate('xpack.enterpriseSearch.navTitle', {
+    defaultMessage: 'Overview',
+  }),
+  SUBTITLE: i18n.translate('xpack.enterpriseSearch.featureCatalogue.subtitle', {
+    defaultMessage: 'Search everything',
+  }),
+  DESCRIPTIONS: [
+    i18n.translate('xpack.enterpriseSearch.featureCatalogueDescription1', {
+      defaultMessage: 'Build a powerful search experience.',
+    }),
+    i18n.translate('xpack.enterpriseSearch.featureCatalogueDescription2', {
+      defaultMessage: 'Connect your users to relevant data.',
+    }),
+    i18n.translate('xpack.enterpriseSearch.featureCatalogueDescription3', {
+      defaultMessage: 'Unify your team content.',
+    }),
+  ],
+  URL: '/app/enterprise_search/overview',
 };
 
 export const APP_SEARCH_PLUGIN = {
@@ -23,6 +40,10 @@ export const APP_SEARCH_PLUGIN = {
     defaultMessage:
       'Leverage dashboards, analytics, and APIs for advanced application search made simple.',
   }),
+  CARD_DESCRIPTION: i18n.translate('xpack.enterpriseSearch.appSearch.productCardDescription', {
+    defaultMessage:
+      'Elastic App Search provides user-friendly tools to design and deploy a powerful search to your websites or web/mobile applications.',
+  }),
   URL: '/app/enterprise_search/app_search',
   SUPPORT_URL: 'https://discuss.elastic.co/c/enterprise-search/app-search/',
 };
@@ -36,6 +57,13 @@ export const WORKPLACE_SEARCH_PLUGIN = {
     defaultMessage:
       'Search all documents, files, and sources available across your virtual workplace.',
   }),
+  CARD_DESCRIPTION: i18n.translate(
+    'xpack.enterpriseSearch.workplaceSearch.productCardDescription',
+    {
+      defaultMessage:
+        "Unify all your team's content in one place, with instant connectivity to popular productivity and collaboration tools.",
+    }
+  ),
   URL: '/app/enterprise_search/workplace_search',
   SUPPORT_URL: 'https://discuss.elastic.co/c/enterprise-search/workplace-search/',
 };

x-pack/plugins/enterprise_search/common/types/index.ts

@@ -18,6 +18,10 @@ export interface IInitialAppData {
   ilmEnabled?: boolean;
   isFederatedAuth?: boolean;
   configuredLimits?: IConfiguredLimits;
+  access?: {
+    hasAppSearchAccess: boolean;
+    hasWorkplaceSearchAccess: boolean;
+  };
   appSearch?: IAppSearchAccount;
   workplaceSearch?: IWorkplaceSearchInitialData;
 }

x-pack/plugins/enterprise_search/public/applications/__mocks__/react_router_history.mock.ts

@@ -9,7 +9,7 @@
  * Jest to accept its use within a jest.mock()
  */
 export const mockHistory = {
-  createHref: jest.fn(({ pathname }) => `/enterprise_search${pathname}`),
+  createHref: jest.fn(({ pathname }) => `/app/enterprise_search${pathname}`),
   push: jest.fn(),
   location: {
     pathname: '/current-path',

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ProductCard } from './product_card';

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.scss

@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+.productCard {
+  margin: $euiSizeS;
+
+  &__imageContainer {
+    max-height: 115px;
+    overflow: hidden;
+    background-color: #0076cc;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      max-height: none;
+    }
+  }
+
+  &__image {
+    width: 100%;
+    height: auto;
+  }
+
+  .euiCard__content {
+    max-width: 350px;
+    margin-top: $euiSizeL;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      margin-top: $euiSizeXL;
+    }
+  }
+
+  .euiCard__title {
+    margin-bottom: $euiSizeM;
+    font-weight: $euiFontWeightBold;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      margin-bottom: $euiSizeL;
+      font-size: $euiSizeL;
+    }
+  }
+
+  .euiCard__description {
+    font-weight: $euiFontWeightMedium;
+    color: $euiColorMediumShade;
+    margin-bottom: $euiSize;
+  }
+
+  .euiCard__footer {
+    margin-bottom: $euiSizeS;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      margin-bottom: $euiSizeM;
+      font-size: $euiSizeL;
+    }
+  }
+}

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.test.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 { EuiCard } from '@elastic/eui';
+import { EuiButton } from '../../../shared/react_router_helpers';
+import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
+
+jest.mock('../../../shared/telemetry', () => ({
+  sendTelemetry: jest.fn(),
+}));
+import { sendTelemetry } from '../../../shared/telemetry';
+
+import { ProductCard } from './';
+
+describe('ProductCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders an App Search card', () => {
+    const wrapper = shallow(<ProductCard product={APP_SEARCH_PLUGIN} image="as.jpg" />);
+    const card = wrapper.find(EuiCard).dive().shallow();
+
+    expect(card.find('h2').text()).toEqual('Elastic App Search');
+    expect(card.find('.productCard__image').prop('src')).toEqual('as.jpg');
+
+    const button = card.find(EuiButton);
+    expect(button.prop('to')).toEqual('/app/enterprise_search/app_search');
+    expect(button.prop('data-test-subj')).toEqual('LaunchAppSearchButton');
+
+    button.simulate('click');
+    expect(sendTelemetry).toHaveBeenCalledWith(expect.objectContaining({ metric: 'app_search' }));
+  });
+
+  it('renders a Workplace Search card', () => {
+    const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image="ws.jpg" />);
+    const card = wrapper.find(EuiCard).dive().shallow();
+
+    expect(card.find('h2').text()).toEqual('Elastic Workplace Search');
+    expect(card.find('.productCard__image').prop('src')).toEqual('ws.jpg');
+
+    const button = card.find(EuiButton);
+    expect(button.prop('to')).toEqual('/app/enterprise_search/workplace_search');
+    expect(button.prop('data-test-subj')).toEqual('LaunchWorkplaceSearchButton');
+
+    button.simulate('click');
+    expect(sendTelemetry).toHaveBeenCalledWith(
+      expect.objectContaining({ metric: 'workplace_search' })
+    );
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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, { useContext } from 'react';
+import upperFirst from 'lodash/upperFirst';
+import snakeCase from 'lodash/snakeCase';
+import { i18n } from '@kbn/i18n';
+import { EuiCard, EuiTextColor } from '@elastic/eui';
+
+import { EuiButton } from '../../../shared/react_router_helpers';
+import { sendTelemetry } from '../../../shared/telemetry';
+import { KibanaContext, IKibanaContext } from '../../../index';
+
+import './product_card.scss';
+
+interface IProductCard {
+  // Expects product plugin constants (@see common/constants.ts)
+  product: {
+    ID: string;
+    NAME: string;
+    CARD_DESCRIPTION: string;
+    URL: string;
+  };
+  image: string;
+}
+
+export const ProductCard: React.FC<IProductCard> = ({ product, image }) => {
+  const { http } = useContext(KibanaContext) as IKibanaContext;
+
+  return (
+    <EuiCard
+      className="productCard"
+      titleElement="h2"
+      title={i18n.translate('xpack.enterpriseSearch.overview.productCard.heading', {
+        defaultMessage: `Elastic {productName}`,
+        values: { productName: product.NAME },
+      })}
+      image={
+        <div className="productCard__imageContainer">
+          <img src={image} className="productCard__image" alt="" role="presentation" />
+        </div>
+      }
+      paddingSize="l"
+      description={<EuiTextColor color="subdued">{product.CARD_DESCRIPTION}</EuiTextColor>}
+      footer={
+        <EuiButton
+          fill
+          to={product.URL}
+          shouldNotCreateHref={true}
+          onClick={() =>
+            sendTelemetry({
+              http,
+              product: 'enterprise_search',
+              action: 'clicked',
+              metric: snakeCase(product.ID),
+            })
+          }
+          data-test-subj={`Launch${upperFirst(product.ID)}Button`}
+        >
+          {i18n.translate('xpack.enterpriseSearch.overview.productCard.button', {
+            defaultMessage: `Launch {productName}`,
+            values: { productName: product.NAME },
+          })}
+        </EuiButton>
+      }
+    />
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.scss

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+.enterpriseSearchOverview {
+  padding-top: 78px;
+  background-image: url('./assets/bg_enterprise_search.png');
+  background-repeat: no-repeat;
+  background-size: 670px;
+  background-position: center -27px;
+
+  @include euiBreakpoint('m', 'l', 'xl') {
+    padding-top: 158px;
+    background-size: 1160px;
+    background-position: center -48px;
+  }
+
+  &__header {
+    text-align: center;
+    margin: auto;
+  }
+
+  &__heading {
+    @include euiBreakpoint('xs', 's') {
+      font-size: $euiFontSizeXL;
+      line-height: map-get(map-get($euiTitles, 'm'), 'line-height');
+    }
+  }
+
+  &__subheading {
+    color: $euiColorMediumShade;
+    font-size: $euiFontSize;
+
+    @include euiBreakpoint('m', 'l', 'xl') {
+      font-size: $euiFontSizeL;
+      margin-bottom: $euiSizeL;
+    }
+  }
+
+  // EUI override
+  .euiTitle + .euiTitle {
+    margin-top: 0;
+
+    @include euiBreakpoint('m', 'l', 'xl') {
+      margin-top: $euiSizeS;
+    }
+  }
+
+  .enterpriseSearchOverview__card {
+    flex-basis: 50%;
+  }
+}