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

* [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 <scotty.bollinger@elastic.co>

Author: Constance

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/assets/app_search.png

@@ -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/assets/bg_enterprise_search.png

@@ -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;
+    }
+  }
+}