[Enterprise Search] Rewire overview designs.

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_card/elasticsearch_card.tsx

@@ -11,9 +11,9 @@ import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle, EuiSpacer } fro
 
 import { i18n } from '@kbn/i18n';
 
+import { ElasticsearchResources } from '../../../shared/elasticsearch_resources';
 import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { ELASTICSEARCH_GUIDE_PATH } from '../../routes';
-import { ElasticsearchResources } from '../elasticsearch_resources';
 
 export const ElasticsearchCard: React.FC = () => {
   return (

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_guide/elasticsearch_guide.tsx

@@ -24,10 +24,10 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { docLinks } from '../../../shared/doc_links';
+import { ElasticsearchResources } from '../../../shared/elasticsearch_resources';
 
 import { ElasticsearchClientInstructions } from '../elasticsearch_client_instructions';
 import { ElasticsearchCloudId } from '../elasticsearch_cloud_id';
-import { ElasticsearchResources } from '../elasticsearch_resources';
 
 // Replace FormattedMessage with i18n strings
 

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

@@ -7,3 +7,4 @@
 
 export { useEnterpriseSearchOverviewNav } from './nav';
 export { EnterpriseSearchOverviewPageTemplate } from './page_template';
+export { EnterpriseSearchOverviewHeaderActions } from './kibana_header_actions';

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { mount } from 'enzyme';
+
+import { EuiPopover, EuiButtonEmpty } from '@elastic/eui';
+
+import { EnterpriseSearchOverviewHeaderActions } from './kibana_header_actions';
+
+describe('Enterprise Search overview HeaderActions', () => {
+  it('renders', () => {
+    const wrapper = mount(<EnterpriseSearchOverviewHeaderActions />);
+    const popover = wrapper.find(EuiPopover);
+
+    expect(popover.find(EuiButtonEmpty).text()).toContain('Deployment details');
+    expect(popover.prop('isOpen')).toBeFalsy();
+  });
+
+  it('opens popover when clicked', () => {
+    const wrapper = mount(<EnterpriseSearchOverviewHeaderActions />);
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toBeFalsy();
+    wrapper.find(EuiPopover).find(EuiButtonEmpty).simulate('click');
+    wrapper.update();
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toBeTruthy();
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx

@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+
+import {
+  EuiHeaderLinks,
+  EuiIcon,
+  EuiCopy,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiPopover,
+  EuiFormRow,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiPopoverTitle,
+  EuiPopoverFooter,
+  EuiText,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+export const EnterpriseSearchOverviewHeaderActions: React.FC = () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  // TODO change it with actual value
+  const clientId = 'fgdshjafghj13eshfdjag718yfhjdskf';
+
+  return (
+    <EuiHeaderLinks>
+      <EuiPopover
+        button={
+          <EuiButtonEmpty onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+            <EuiIcon type="iInCircle" />
+            &nbsp;
+            {i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails', {
+              defaultMessage: 'Deployment details',
+            })}
+          </EuiButtonEmpty>
+        }
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+      >
+        <EuiPopoverTitle>
+          {i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails', {
+            defaultMessage: 'Deployment details',
+          })}
+        </EuiPopoverTitle>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails.description', {
+              defaultMessage:
+                'Send data to Elastic from your applications by referencing your deployment and Elasticsearch information.',
+            })}
+          </p>
+        </EuiText>
+        <EuiSpacer />
+        <EuiFormRow
+          fullWidth
+          label={i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails.clientIdLabel', {
+            defaultMessage: 'Client ID',
+          })}
+        >
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow>
+              <EuiFieldText readOnly value={clientId} fullWidth />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiCopy
+                beforeMessage={i18n.translate(
+                  'xpack.enterpriseSearch.overview.deploymentDetails.copyToClipboard',
+                  { defaultMessage: 'Copy to clipboard' }
+                )}
+                afterMessage={i18n.translate(
+                  'xpack.enterpriseSearch.overview.deploymentDetails.copiedToClipboard',
+                  { defaultMessage: 'Copied Client ID to clipboard' }
+                )}
+                textToCopy={clientId}
+              >
+                {(copy) => (
+                  <EuiButtonIcon
+                    aria-label={i18n.translate(
+                      'xpack.enterpriseSearch.overview.deploymentDetails.copyButtonAriaLabel',
+                      { defaultMessage: 'Copy to clipboard' }
+                    )}
+                    onClick={copy}
+                    iconType="copyClipboard"
+                    color="primary"
+                    display="base"
+                    size="s"
+                  />
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
+        <EuiPopoverFooter>
+          {/* TODO need link to Create and manage API keys*/}
+          <EuiButton>
+            {i18n.translate('xpack.enterpriseSearch.overview.createAndManageButton', {
+              defaultMessage: 'Create and manage API keys',
+            })}
+          </EuiButton>
+        </EuiPopoverFooter>
+      </EuiPopover>
+    </EuiHeaderLinks>
+  );
+};

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

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { OverviewContent } from './overview_content';

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx

@@ -0,0 +1,161 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { useValues } from 'kea';
+
+import {
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiImage,
+  EuiLink,
+  EuiPageBody,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import { Chat } from '@kbn/cloud-plugin/public';
+import { i18n } from '@kbn/i18n';
+
+import { AddContentEmptyPrompt } from '../../../shared/add_content_empty_prompt';
+import { docLinks } from '../../../shared/doc_links';
+import { ElasticsearchResources } from '../../../shared/elasticsearch_resources';
+import { GettingStartedSteps } from '../../../shared/getting_started_steps';
+import { KibanaLogic } from '../../../shared/kibana';
+import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
+
+import { EnterpriseSearchOverviewPageTemplate } from '../layout';
+import { LicenseCallout } from '../license_callout';
+import illustration from '../product_selector/lock_light.svg';
+import { SetupGuideCta } from '../setup_guide';
+
+import { TrialCallout } from '../trial_callout';
+
+interface ProductSelectorProps {
+  access: {
+    hasAppSearchAccess?: boolean;
+    hasWorkplaceSearchAccess?: boolean;
+  };
+  isWorkplaceSearchAdmin: boolean;
+}
+
+export const OverviewContent: React.FC<ProductSelectorProps> = ({ access }) => {
+  const { hasAppSearchAccess, hasWorkplaceSearchAccess } = access;
+  const { config } = useValues(KibanaLogic);
+
+  // If Enterprise Search hasn't been set up yet, show all products. Otherwise, only show products the user has access to
+  const shouldShowAppSearchCard = !config.host || hasAppSearchAccess;
+  const shouldShowWorkplaceSearchCard = !config.host || hasWorkplaceSearchAccess;
+
+  // If Enterprise Search has been set up and the user does not have access to either product, show a message saying they
+  // need to contact an administrator to get access to one of the products.
+  const shouldShowEnterpriseSearchCards = shouldShowAppSearchCard || shouldShowWorkplaceSearchCard;
+
+  const productCards = (
+    <>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <GettingStartedSteps />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <ElasticsearchResources />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="xxl" />
+
+      {config.host ? <LicenseCallout /> : <SetupGuideCta />}
+    </>
+  );
+
+  const insufficientAccessMessage = (
+    <EuiEmptyPrompt
+      icon={
+        <EuiImage
+          size="fullWidth"
+          src={illustration}
+          alt={i18n.translate(
+            'xpack.enterpriseSearch.overviewContent.insufficientPermissionsIllustration',
+            { defaultMessage: 'Insufficient permissions illustration' }
+          )}
+        />
+      }
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.overviewContent.insufficientPermissionsTitle', {
+            defaultMessage: 'Insufficient permissions',
+          })}
+        </h2>
+      }
+      layout="horizontal"
+      color="plain"
+      body={
+        <>
+          <p>
+            {i18n.translate('xpack.enterpriseSearch.overviewContent.insufficientPermissionsBody', {
+              defaultMessage:
+                'You don’t have access to view this page. If you feel this may be an error, please contact your administrator.',
+            })}
+          </p>
+        </>
+      }
+      actions={
+        <EuiButton color="primary" fill href="/">
+          {i18n.translate(
+            'xpack.enterpriseSearch.overviewContent.insufficientPermissionsButtonLabel',
+            {
+              defaultMessage: 'Go to the Kibana dashboard',
+            }
+          )}
+        </EuiButton>
+      }
+      footer={
+        <>
+          <EuiTitle size="xxs">
+            <span>
+              {i18n.translate(
+                'xpack.enterpriseSearch.overviewContent.insufficientPermissionsFooterBody',
+                {
+                  defaultMessage: 'Go to the Kibana dashboard',
+                }
+              )}
+            </span>
+          </EuiTitle>{' '}
+          <EuiLink href={docLinks.kibanaSecurity} target="_blank">
+            {i18n.translate(
+              'xpack.enterpriseSearch.overviewContent.insufficientPermissionsFooterLinkLabel',
+              {
+                defaultMessage: 'Read documentation',
+              }
+            )}
+          </EuiLink>
+        </>
+      }
+    />
+  );
+  return (
+    <EnterpriseSearchOverviewPageTemplate
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.enterpriseSearch.overviewContent.heading', {
+          defaultMessage: 'Welcome to Enterprise Search',
+        }),
+      }}
+    >
+      <SetPageChrome />
+      <SendTelemetry action="viewed" metric="overview" />
+      <TrialCallout />
+      <EuiPageBody paddingSize="none">
+        <AddContentEmptyPrompt />
+        <EuiSpacer size="xxl" />
+        {shouldShowEnterpriseSearchCards ? productCards : insufficientAccessMessage}
+        <Chat />
+      </EuiPageBody>
+    </EnterpriseSearchOverviewPageTemplate>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.scss

@@ -0,0 +1,7 @@
+.addContentEmptyPrompt {
+  @include euiBreakpoint('xs','s') {
+    flex-direction: column-reverse;
+  }
+
+  border-bottom: $euiBorderThin;
+}

x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.test.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { EuiLinkTo } from '../react_router_helpers';
+
+import { AddContentEmptyPrompt } from '.';
+
+describe('AddContentEmptyPrompt', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => {
+    wrapper = shallow(<AddContentEmptyPrompt />);
+  });
+
+  it('renders', () => {
+    expect(wrapper.find('h2').text()).toEqual('Add content to Enterprise Search');
+    expect(wrapper.find(EuiLinkTo).prop('to')).toEqual(
+      '/app/enterprise_search/content/search_indices'
+    );
+  });
+});