[Enterprise Search] Update Product Selector and add Setup Guide

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

@@ -5,8 +5,9 @@
  */
 
 import '../../../__mocks__/kea.mock';
+import '../../../__mocks__/shallow_usecontext.mock';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { shallow } from 'enzyme';
 
 import { EuiCard } from '@elastic/eui';
@@ -26,6 +27,7 @@ describe('ProductCard', () => {
   });
 
   it('renders an App Search card', () => {
+    (useContext as jest.Mock).mockImplementationOnce(() => ({ config: { host: 'localhost' } }));
     const wrapper = shallow(<ProductCard product={APP_SEARCH_PLUGIN} image="as.jpg" />);
     const card = wrapper.find(EuiCard).dive().shallow();
 
@@ -35,12 +37,14 @@ describe('ProductCard', () => {
     const button = card.find(EuiButton);
     expect(button.prop('to')).toEqual('/app/enterprise_search/app_search');
     expect(button.prop('data-test-subj')).toEqual('LaunchAppSearchButton');
+    expect(button.prop('children')).toEqual('Launch App Search');
 
     button.simulate('click');
     expect(sendTelemetry).toHaveBeenCalledWith(expect.objectContaining({ metric: 'app_search' }));
   });
 
   it('renders a Workplace Search card', () => {
+    (useContext as jest.Mock).mockImplementationOnce(() => ({ config: { host: 'localhost' } }));
     const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image="ws.jpg" />);
     const card = wrapper.find(EuiCard).dive().shallow();
 
@@ -50,10 +54,22 @@ describe('ProductCard', () => {
     const button = card.find(EuiButton);
     expect(button.prop('to')).toEqual('/app/enterprise_search/workplace_search');
     expect(button.prop('data-test-subj')).toEqual('LaunchWorkplaceSearchButton');
+    expect(button.prop('children')).toEqual('Launch Workplace Search');
 
     button.simulate('click');
     expect(sendTelemetry).toHaveBeenCalledWith(
       expect.objectContaining({ metric: 'workplace_search' })
     );
   });
+
+  it('renders correct button text when host not present', () => {
+    (useContext as jest.Mock).mockImplementation(() => ({ config: { host: '' } }));
+
+    const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image="ws.jpg" />);
+    const card = wrapper.find(EuiCard).dive().shallow();
+    const button = card.find(EuiButton);
+
+    expect(button.prop('data-test-subj')).toEqual('SetupWorkplaceSearchButton');
+    expect(button.prop('children')).toEqual('Setup Workplace Search');
+  });
 });

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

@@ -4,13 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { useValues } from 'kea';
 import upperFirst from 'lodash/upperFirst';
 import snakeCase from 'lodash/snakeCase';
 import { i18n } from '@kbn/i18n';
 import { EuiCard, EuiTextColor } from '@elastic/eui';
 
+import { KibanaContext, IKibanaContext } from '../../../index';
+
 import { EuiButton } from '../../../shared/react_router_helpers';
 import { sendTelemetry } from '../../../shared/telemetry';
 import { HttpLogic } from '../../../shared/http';
@@ -30,6 +32,25 @@ interface IProductCard {
 
 export const ProductCard: React.FC<IProductCard> = ({ product, image }) => {
   const { http } = useValues(HttpLogic);
+  const {
+    config: { host },
+  } = useContext(KibanaContext) as IKibanaContext;
+
+  const LAUNCH_BUTTON_TEXT = i18n.translate(
+    'xpack.enterpriseSearch.overview.productCard.launchButton',
+    {
+      defaultMessage: 'Launch {productName}',
+      values: { productName: product.NAME },
+    }
+  );
+
+  const SETUP_BUTTON_TEXT = i18n.translate(
+    'xpack.enterpriseSearch.overview.productCard.setupButton',
+    {
+      defaultMessage: 'Setup {productName}',
+      values: { productName: product.NAME },
+    }
+  );
 
   return (
     <EuiCard
@@ -59,12 +80,8 @@ export const ProductCard: React.FC<IProductCard> = ({ product, image }) => {
               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 },
-          })}
+          {host ? LAUNCH_BUTTON_TEXT : SETUP_BUTTON_TEXT}
         </EuiButton>
       }
     />

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_selector/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 { ProductSelector } from './product_selector';

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

@@ -0,0 +1,60 @@
+/*
+ * 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 '../../../__mocks__/shallow_usecontext.mock';
+
+import React, { useContext } from 'react';
+import { shallow } from 'enzyme';
+import { EuiPage } from '@elastic/eui';
+
+import '../../../__mocks__/kea.mock';
+import { useValues } from 'kea';
+
+import { ProductSelector } from './';
+import { ProductCard } from '../product_card';
+
+describe('ProductSelector', () => {
+  beforeEach(() => {
+    (useValues as jest.Mock).mockReturnValue({ errorConnecting: false });
+  });
+
+  it('renders the overview page and product cards with no host set', () => {
+    (useContext as jest.Mock).mockImplementationOnce(() => ({ config: { host: '' } }));
+    const wrapper = shallow(<ProductSelector access={{}} />);
+
+    expect(wrapper.find(EuiPage).hasClass('enterpriseSearchOverview')).toBe(true);
+    expect(wrapper.find(ProductCard)).toHaveLength(2);
+  });
+
+  describe('access checks when host is set', () => {
+    beforeEach(() => {
+      (useContext as jest.Mock).mockImplementationOnce(() => ({ config: { host: 'localhost' } }));
+    });
+    it('does not render the App Search card if the user does not have access to AS', () => {
+      const wrapper = shallow(
+        <ProductSelector access={{ hasAppSearchAccess: false, hasWorkplaceSearchAccess: true }} />
+      );
+
+      expect(wrapper.find(ProductCard)).toHaveLength(1);
+      expect(wrapper.find(ProductCard).prop('product').ID).toEqual('workplaceSearch');
+    });
+
+    it('does not render the Workplace Search card if the user does not have access to WS', () => {
+      const wrapper = shallow(
+        <ProductSelector access={{ hasAppSearchAccess: true, hasWorkplaceSearchAccess: false }} />
+      );
+
+      expect(wrapper.find(ProductCard)).toHaveLength(1);
+      expect(wrapper.find(ProductCard).prop('product').ID).toEqual('appSearch');
+    });
+
+    it('does not render any cards if the user does not have access', () => {
+      const wrapper = shallow(<ProductSelector access={{}} />);
+
+      expect(wrapper.find(ProductCard)).toHaveLength(0);
+    });
+  });
+});

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

@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+/*
+ * 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 {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPageContentBody,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { KibanaContext, IKibanaContext } from '../../../index';
+
+import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
+
+import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
+
+import { ProductCard } from '../product_card';
+
+import AppSearchImage from '../../assets/app_search.png';
+import WorkplaceSearchImage from '../../assets/workplace_search.png';
+
+interface IProductSelectorProps {
+  access: {
+    hasAppSearchAccess?: boolean;
+    hasWorkplaceSearchAccess?: boolean;
+  };
+}
+
+export const ProductSelector: React.FC<IProductSelectorProps> = ({ access }) => {
+  const { hasAppSearchAccess, hasWorkplaceSearchAccess } = access;
+  const {
+    config: { host },
+  } = useContext(KibanaContext) as IKibanaContext;
+
+  return (
+    <EuiPage restrictWidth className="enterpriseSearchOverview">
+      <SetPageChrome isRoot />
+      <SendTelemetry action="viewed" metric="overview" />
+
+      <EuiPageBody>
+        <EuiPageHeader>
+          <EuiPageHeaderSection className="enterpriseSearchOverview__header">
+            <EuiTitle size="l">
+              <h1 className="enterpriseSearchOverview__heading">
+                {i18n.translate('xpack.enterpriseSearch.overview.heading', {
+                  defaultMessage: 'Welcome to Elastic Enterprise Search',
+                })}
+              </h1>
+            </EuiTitle>
+            <EuiTitle size="s">
+              <p className="enterpriseSearchOverview__subheading">
+                {i18n.translate('xpack.enterpriseSearch.overview.subheading', {
+                  defaultMessage: 'Select a product to get started',
+                })}
+              </p>
+            </EuiTitle>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
+        <EuiPageContentBody>
+          <EuiFlexGroup justifyContent="center" gutterSize="xl">
+            {(!host || hasAppSearchAccess) && (
+              <EuiFlexItem grow={false} className="enterpriseSearchOverview__card">
+                <ProductCard product={APP_SEARCH_PLUGIN} image={AppSearchImage} />
+              </EuiFlexItem>
+            )}
+            {(!host || hasWorkplaceSearchAccess) && (
+              <EuiFlexItem grow={false} className="enterpriseSearchOverview__card">
+                <ProductCard product={WORKPLACE_SEARCH_PLUGIN} image={WorkplaceSearchImage} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+          <EuiSpacer />
+        </EuiPageContentBody>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/setup_guide/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 { SetupGuide } from './setup_guide';

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

@@ -0,0 +1,21 @@
+/*
+ * 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 { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide';
+import { SetupGuide } from './';
+
+describe('SetupGuide', () => {
+  it('renders', () => {
+    const wrapper = shallow(<SetupGuide />);
+
+    expect(wrapper.find(SetupGuideLayout)).toHaveLength(1);
+    expect(wrapper.find(SetPageChrome)).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,62 @@
+/*
+ * 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 { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+
+import { ENTERPRISE_SEARCH_PLUGIN } from '../../../../../common/constants';
+import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide';
+import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
+import GettingStarted from './assets/getting_started.png';
+
+export const SetupGuide: React.FC = () => (
+  <SetupGuideLayout
+    productName={ENTERPRISE_SEARCH_PLUGIN.NAME}
+    productEuiIcon="logoEnterpriseSearch"
+    standardAuthLink="https://www.elastic.co/guide/en/app-search/current/security-and-users.html#app-search-self-managed-security-and-user-management-standard"
+    elasticsearchNativeAuthLink="https://www.elastic.co/guide/en/app-search/current/security-and-users.html#app-search-self-managed-security-and-user-management-elasticsearch-native-realm"
+  >
+    <SetPageChrome
+      text={i18n.translate('xpack.enterpriseSearch.setupGuide.title', {
+        defaultMessage: 'Setup Guide',
+      })}
+    />
+    <SendTelemetry action="viewed" metric="setup_guide" />
+
+    <a href="https://www.elastic.co/enterprise-search" target="_blank" rel="noopener noreferrer">
+      <img
+        className="setupGuide__thumbnail"
+        src={GettingStarted}
+        alt={i18n.translate('xpack.enterpriseSearch.enterpriseSearch.setupGuide.videoAlt', {
+          defaultMessage: 'Getting started with Enterprise Search',
+        })}
+        width="1280"
+        height-="720"
+      />
+    </a>
+
+    <EuiTitle size="s">
+      <p>
+        <FormattedMessage
+          id="xpack.enterpriseSearch.enterpriseSearch.setupGuide.description"
+          defaultMessage="Search everything, anywhere. Easily implement powerful, modern search experiences for your busy team. Quickly add pre-tuned search to your website, app, or workplace. Search it all, simply."
+        />
+      </p>
+    </EuiTitle>
+    <EuiSpacer size="m" />
+    <EuiText>
+      <p>
+        <FormattedMessage
+          id="xpack.enterpriseSearch.enterpriseSearch.setupGuide.notConfigured"
+          defaultMessage="Enterprise Search is not configured in your Kibana instance yet."
+        />
+      </p>
+    </EuiText>
+  </SetupGuideLayout>
+);