Enterprise search overview views

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.test.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { EuiPanel } from '@elastic/eui';
+import { EuiButton } from '../../../shared/react_router_helpers';
+
+import { ProductCard } from './';
+
+describe('ProductCard', () => {
+  const props = {
+    name: 'App Search',
+    description: 'Find ya apps here!',
+    img: 'img',
+    buttonPath: '/app_search',
+  };
+
+  it('renders the overview page and product cards', () => {
+    const wrapper = shallow(<ProductCard {...props} />);
+    const button = wrapper.find(EuiButton);
+
+    expect(wrapper.find(EuiPanel)).toHaveLength(1);
+    expect(button.prop('to')).toEqual('/app_search');
+    expect(button.prop('data-test-subj')).toEqual('LaunchAppSearchButton');
+  });
+});

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

@@ -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.
+ */
+
+import React from 'react';
+
+import { EuiTitle, EuiPanel } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import { formatTestSubj } from '../../../shared/format_test_subj';
+import { EuiButton } from '../../../shared/react_router_helpers';
+
+interface IProductCard {
+  name: string;
+  description: string;
+  img: string;
+  buttonPath: string;
+}
+
+export const ProductCard: React.FC<IProductCard> = ({ name, description, img, buttonPath }) => {
+  return (
+    <EuiPanel className="card product-card" paddingSize="none">
+      <div className="product-card__image-container">
+        <img
+          className="product-card__image"
+          alt={i18n.translate('xpack.enterpriseSearch.productCard.productCardImage', {
+            defaultMessage: `${name} Dashboard`,
+          })}
+          src={img}
+        />
+      </div>
+      <div className="product-card__content">
+        <div className="product-card__inner-content">
+          <EuiTitle size="m">
+            <h2 className="card__title">
+              {i18n.translate('xpack.enterpriseSearch.productCard.productCardHeading', {
+                defaultMessage: `Elastic ${name}`,
+              })}
+            </h2>
+          </EuiTitle>
+          <p className="card__description">{description}</p>
+          <EuiButton fill to={buttonPath} data-test-subj={`Launch${formatTestSubj(name)}Button`}>
+            {i18n.translate('xpack.enterpriseSearch.productCard.productCardButton', {
+              defaultMessage: `Launch ${name}`,
+            })}
+          </EuiButton>
+        </div>
+      </div>
+    </EuiPanel>
+  );
+};

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

@@ -0,0 +1,154 @@
+/*
+ * 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.
+ */
+
+.euiCallOut a {
+  text-decoration: underline;
+}
+
+.product-selector-callout {
+  margin-bottom: 20px;
+
+  @include euiBreakpoint('s', 'm', 'l', 'xl') {
+    margin-top: -20px;
+    margin-bottom: 40px;
+  }
+
+  &--expired {
+    max-width: 600px;
+  }
+}
+
+.euiPage {
+  padding-top: 78px;
+  background-image: url('./assets/bg_enterprise_search.svg')!important;
+  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;
+  }
+}
+
+.euiPageHeader {
+  margin-bottom: 24px;
+}
+
+.euiPageHeaderSection {
+  text-align: center;
+  margin: auto;
+}
+
+.euiTitle--large {
+  text-align: center;
+}
+
+.euiTitle--small {
+  font-weight: 500;
+  color: $euiColorMediumShade;
+  font-size: 15px;
+  margin-top: 0;
+
+  @include euiBreakpoint('s', 'm', 'l', 'xl') {
+    font-size: 19px;
+    margin-bottom: 22px;
+  }
+}
+
+.euiTitle+.euiTitle {
+  margin-top: 0;
+
+  @include euiBreakpoint('s', 'm', 'l', 'xl') {
+    margin-top: 8px;
+  }
+}
+
+.product-cards {
+  @include euiBreakpoint('m', 'l', 'xl') {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+}
+
+.card {
+  border-radius: 8px;
+  margin-bottom: 32px;
+
+  @include euiBreakpoint('m', 'l', 'xl') {
+    margin-bottom: 50px;
+  }
+
+  &__title {
+    font-weight: bold;
+    margin-bottom: 13px;
+    font-size: 18px;
+    line-height: 1.3;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      font-size: 24px;
+      margin-bottom: 19px;
+    }
+  }
+
+  &__description {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 1.45;
+    color: $euiColorMediumShade;
+    margin-bottom: 15px;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      font-size: 14px;
+      margin-bottom: 22px;
+    }
+  }
+}
+
+.product-card {
+  overflow: hidden;
+
+  @include euiBreakpoint('m', 'l', 'xl') {
+    width: calc(50% - 25px);
+  }
+
+  &__image-container {
+    max-height: 115px;
+    overflow: hidden;
+    background-color: #0076CC;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      max-height: none;
+    }
+  }
+
+  &__image {
+    width: 100%;
+    height: auto;
+  }
+
+  &__content {
+    padding: 30px;
+
+    @include euiBreakpoint('s', 'm', 'l', 'xl') {
+      padding: 41px 41px 46px;
+    }
+  }
+
+  &__inner-content {
+    max-width: 350px;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+
+.product-card+.product-card {
+  @include euiBreakpoint('m', 'l', 'xl') {
+    margin-left: 50px;
+  }
+}

x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.test.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 { EuiPage } from '@elastic/eui';
+
+import { EnterpriseSearch } from './';
+import { ProductCard } from './components/product_card';
+
+describe('EnterpriseSearch', () => {
+  it('renders the overview page and product cards', () => {
+    const wrapper = shallow(<EnterpriseSearch />);
+
+    expect(wrapper.find(EuiPage)).toHaveLength(1);
+    expect(wrapper.find(ProductCard)).toHaveLength(2);
+  });
+});

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

@@ -5,16 +5,85 @@
  */
 
 import React from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiPageContentBody,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 import { SetEnterpriseSearchChrome as SetPageChrome } from '../shared/kibana_chrome';
 import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../shared/telemetry';
 
+import AppSearchImage from './assets/app_search.png';
+import WorkplaceSearchImage from './assets/workplace_search.png';
+import { ProductCard } from './components/product_card';
+
+import './index.scss';
+
 export const EnterpriseSearch: React.FC = () => {
   return (
-    <>
+    <EuiPage restrictWidth>
       <SetPageChrome isRoot />
       <SendTelemetry action="viewed" metric="overview" />
-      Hello world
-    </>
+
+      <EuiPageBody>
+        <EuiPageHeader>
+          <EuiPageHeaderSection>
+            <EuiTitle size="l">
+              <h1>
+                {i18n.translate('xpack.enterpriseSearch.overview.heading', {
+                  defaultMessage: 'Welcome to Elastic Enterprise Search',
+                })}
+              </h1>
+            </EuiTitle>
+            <EuiTitle size="s">
+              <p>
+                {i18n.translate('xpack.enterpriseSearch.overview.subHeading', {
+                  defaultMessage: 'Select a product to get started',
+                })}
+              </p>
+            </EuiTitle>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
+        <EuiPageContentBody>
+          <div className="enterprise-search-home__content-wrapper">
+            <div className="product-cards">
+              <ProductCard
+                name={i18n.translate('xpack.enterpriseSearch.appSearch.productName', {
+                  defaultMessage: 'App Search',
+                })}
+                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.',
+                  }
+                )}
+                img={AppSearchImage}
+                buttonPath="../app_search"
+              />
+              <ProductCard
+                name={i18n.translate('xpack.enterpriseSearch.workplaceSearch.productName', {
+                  defaultMessage: 'Workplace Search',
+                })}
+                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.",
+                  }
+                )}
+                img={WorkplaceSearchImage}
+                buttonPath="../workplace_search"
+              />
+            </div>
+          </div>
+        </EuiPageContentBody>
+      </EuiPageBody>
+    </EuiPage>
   );
 };

x-pack/plugins/enterprise_search/public/applications/shared/format_test_subj/format_test_subj.test.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { formatTestSubj } from './';
+
+describe('formatTestSubj', () => {
+  it('should format string to correct casing', () => {
+    expect(formatTestSubj('foo_bar BAZ')).toEqual('FooBarBaz');
+  });
+});

x-pack/plugins/enterprise_search/public/applications/shared/format_test_subj/format_test_subj.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 _camelCase from 'lodash/camelCase';
+import _upperFirst from 'lodash/upperFirst';
+
+export const formatTestSubj = (str: string) => _upperFirst(_camelCase(str));

x-pack/plugins/enterprise_search/public/applications/shared/format_test_subj/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 { formatTestSubj } from './format_test_subj';