From 1f8646a7e8c40fc337bf3cfff0a4baf648b53797 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Mon, 11 Apr 2022 14:25:18 +0200
Subject: [PATCH 01/11] Rewire overview page with new designs

- Fix issues caused by VS Code
- Bind add content button for empty prompt
- Add content icons to assets
- Add text for icons and tooltip
- Add link to Elasticsearch Guide
- Add context menu for create button
- Add some more css changes that VS Code deleted
- Add Header popover to show deployment details
- Filter SVG colors
---
 .../add_content_empty_prompt.scss             |   7 +
 .../add_content_empty_prompt.tsx              |  98 ++++++++++
 .../add_content_empty_prompt/index.ts         |   8 +
 .../search_indices.svg                        |   0
 .../elasticsearch_resources.tsx               |   4 +-
 .../getting_started_steps.tsx                 | 182 ++++++++++++++++++
 .../getting_started_steps/icon_row.scss       |  11 ++
 .../getting_started_steps/icon_row.tsx        | 115 +++++++++++
 .../components/getting_started_steps/index.ts |   8 +
 .../components/layout/index.ts                |   1 +
 .../layout/kibana_header_actions.tsx          | 114 +++++++++++
 .../license_callout/license_callout.tsx       |   2 +-
 .../components/product_card/product_card.tsx  |  10 +-
 .../product_selector/product_selector.tsx     | 108 ++++-------
 .../enterprise_search_overview/index.tsx      |  10 +-
 15 files changed, 596 insertions(+), 82 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.scss
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/index.ts
 rename x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/{product_selector => add_content_empty_prompt}/search_indices.svg (100%)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/index.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.scss b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.scss
new file mode 100644
index 0000000000000..c0fafb151174d
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/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;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
new file mode 100644
index 0000000000000..aff6cc478b66d
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 { generatePath } from 'react-router-dom';
+
+import dedent from 'dedent';
+
+import {
+  EuiImage,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiLink,
+  EuiPanel,
+  EuiTitle,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants';
+import { SEARCH_INDICES_PATH } from '../../../enterprise_search_content/routes';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
+import searchIndicesIllustration from './search_indices.svg';
+import './add_content_empty_prompt.scss';
+
+export const AddContentEmptyPrompt: React.FC = () => {
+  return (
+    <EuiPanel color="transparent" paddingSize="l">
+      <EuiFlexGroup className="addContentEmptyPrompt" justifyContent="spaceBetween" direction="row">
+        <EuiFlexItem grow>
+          <EuiFlexGroup direction="column" responsive={false}>
+            <EuiFlexItem grow>
+              <EuiTitle>
+                <h2>
+                  {i18n.translate('xpack.enterpriseSearch.overview.emptyState.heading', {
+                    defaultMessage: 'Add content to Enterprise Search',
+                  })}
+                </h2>
+              </EuiTitle>
+              <EuiSpacer size="l" />
+              <EuiText grow={false}>
+                <p>
+                  {i18n.translate('xpack.enterpriseSearch.emptyState.description', {
+                    defaultMessage: dedent`Data you add in Enterprise Search is called a Search index and
+                            it's searchable in both App and Workplace Search. Now you can use your connectors in
+                            App Search and your web crawlers in Workplace Search.`,
+                  })}
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup alignItems="center" >
+                <EuiFlexItem grow={false}>
+                  <EuiLinkTo
+                    to={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + SEARCH_INDICES_PATH)}
+                    shouldNotCreateHref
+                  >
+                    <EuiButton color="primary" fill>
+                      {i18n.translate('xpack.enterpriseSearch.overview.emptyState.buttonTitle', {
+                        defaultMessage: 'Add content to Enterprise Search',
+                      })}
+                    </EuiButton>
+                  </EuiLinkTo>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiLink href="#" target="_blank">
+                    {i18n.translate('xpack.enterpriseSearch.overview.emptyState.footerLinkTitle', {
+                      defaultMessage: 'Learn more',
+                    })}
+                  </EuiLink>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiImage
+            size="l"
+            float="right"
+            src={searchIndicesIllustration}
+            alt={i18n.translate('xpack.enterpriseSearch.overview.searchIndices.image.altText', {
+              defaultMessage: 'Search indices illustration',
+            })}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/index.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/index.ts
new file mode 100644
index 0000000000000..1ae85c30a2f5c
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/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 { AddContentEmptyPrompt } from './add_content_empty_prompt';
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/search_indices.svg b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/search_indices.svg
similarity index 100%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/search_indices.svg
rename to x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/search_indices.svg
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/elasticsearch_resources.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/elasticsearch_resources.tsx
index b7d0390f40077..b4f3930bed772 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/elasticsearch_resources.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/elasticsearch_resources.tsx
@@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n';
 import { docLinks } from '../../../shared/doc_links';
 
 export const ElasticsearchResources: React.FC = () => (
-  <EuiPanel hasShadow={false} color="subdued">
+  <EuiPanel hasShadow grow={false} color="subdued">
     <EuiTitle size="xs">
       <h4>
         {i18n.translate('xpack.enterpriseSearch.overview.elasticsearchResources.title', {
@@ -40,7 +40,7 @@ export const ElasticsearchResources: React.FC = () => (
     <EuiLink href={docLinks.clientsGuide} target="_blank">
       {i18n.translate(
         'xpack.enterpriseSearch.overview.elasticsearchResources.elasticsearchClients',
-        { defaultMessage: 'Elasticsearch clients' }
+        { defaultMessage: 'Setup a language client' }
       )}
     </EuiLink>
     <EuiSpacer size="s" />
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
new file mode 100644
index 0000000000000..812098c906ef8
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
@@ -0,0 +1,182 @@
+/*
+ * 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 dedent from 'dedent';
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPopover,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
+import { ELASTICSEARCH_GUIDE_PATH } from '../../routes';
+
+import { IconRow } from './icon_row';
+
+export const GettingStartedSteps: React.FC = () => {
+  // TODO replace with logic file
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiSteps
+            steps={[
+              {
+                title: i18n.translate(
+                  'xpack.enterpriseSearch.overview.gettingStartedSteps.addData.title',
+                  { defaultMessage: 'Add your documents and data to Enterprise Search' }
+                ),
+                children: (
+                  <>
+                    <EuiText>
+                      <p>
+                        {i18n.translate(
+                          'xpack.enterpriseSearch.overview.gettingStartedSteps.addData.message',
+                          {
+                            defaultMessage: dedent`Get started by adding your data to Enterprise Search.
+                            You can use the Elastic Web Crawler, API endpoints, existing Elasticsearch
+                            indices or third party connectors like Google Drive, Microsoft Sharepoint and more.`,
+                          }
+                        )}
+                      </p>
+                    </EuiText>
+                    <EuiSpacer size="m" />
+                    <IconRow />
+                  </>
+                ),
+                status: 'current',
+              },
+              {
+                title: i18n.translate(
+                  'xpack.enterpriseSearch.overview.gettingStartedSteps.buildSearchExperience.title',
+                  { defaultMessage: 'Build a search experience' }
+                ),
+                children: (
+                  <>
+                    <EuiText>
+                      <p>
+                        {i18n.translate(
+                          'xpack.enterpriseSearch.overview.gettingStartedSteps.buildSearchExperience.message',
+                          {
+                            defaultMessage: dedent`You can use Search Engines to build customized search experiences for
+                          your customers or internal teams with App Search or Workplace Search. Or you can use Search UI
+                          to connect directly to an Elasticsearch index to build client-side search experinces for your users.`,
+                          }
+                        )}
+                      </p>
+                    </EuiText>
+                    <EuiSpacer size="m" />
+                    <EuiFlexGroup alignItems="center" gutterSize="s">
+                      <EuiFlexItem grow={false}>
+                        <EuiPopover
+                          button={
+                            <EuiButton iconType="arrowDown" iconSide="right" fill>
+                              {i18n.translate(
+                                'xpack.enterpriseSearch.overview.gettingStartedSteps.createASearchEngineButton',
+                                { defaultMessage: 'Create a search engine' }
+                              )}
+                            </EuiButton>
+                          }
+                          isOpen={isPopoverOpen}
+                          onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                        >
+                          <EuiContextMenuPanel
+                            items={[
+                              <EuiContextMenuItem key="" onClick={() => {}}>
+                                <EuiText size="s">
+                                  <h4>
+                                    {i18n.translate(
+                                      'xpack.enterpriseSearch.overview.gettingStartedSteps.createAppSearchEngine.title',
+                                      { defaultMessage: 'Create an App Search engine' }
+                                    )}
+                                  </h4>
+                                  {i18n.translate(
+                                    'xpack.enterpriseSearch.overview.gettingStartedSteps.createAppSearchEngine.description',
+                                    {
+                                      defaultMessage:
+                                        'All the power of Elasticsearch, without the learning curve.',
+                                    }
+                                  )}
+                                </EuiText>
+                              </EuiContextMenuItem>,
+                              <EuiContextMenuItem key="" onClick={() => {}}>
+                                <EuiText size="s">
+                                  <h4>
+                                    {i18n.translate(
+                                      'xpack.enterpriseSearch.overview.gettingStartedSteps.createWorkplaceSearchGroup.title',
+                                      { defaultMessage: 'Create a Workplace Search group' }
+                                    )}
+                                  </h4>
+                                  {i18n.translate(
+                                    'xpack.enterpriseSearch.overview.gettingStartedSteps.createWorkplaceSearchGroup.description',
+                                    {
+                                      defaultMessage:
+                                        'A secure search experience for internal teams',
+                                    }
+                                  )}
+                                </EuiText>
+                              </EuiContextMenuItem>,
+                            ]}
+                          />
+                        </EuiPopover>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiLinkTo to={ELASTICSEARCH_GUIDE_PATH}>
+                          <EuiIcon type="iInCircle" />
+                          &nbsp;
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.overview.gettingStartedSteps.searchWithElasticsearchLink',
+                            { defaultMessage: 'Search with the Elasticsearch API' }
+                          )}
+                        </EuiLinkTo>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </>
+                ),
+                status: 'incomplete',
+              },
+              {
+                title: i18n.translate(
+                  'xpack.enterpriseSearch.overview.gettingStartedSteps.tuneSearchExperience.title',
+                  { defaultMessage: 'Tune your search relevance' }
+                ),
+                children: (
+                  <EuiText>
+                    <p>
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.overview.gettingStartedSteps.tuneSearchExperience.message',
+                        {
+                          defaultMessage: dedent`Dive into analytics and tune the result settings to help your
+                          users find exactly what they're looking for`,
+                        }
+                      )}
+                    </p>
+                  </EuiText>
+                ),
+                status: 'incomplete',
+              },
+            ]}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss
new file mode 100644
index 0000000000000..ee40c4c5ed01b
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss
@@ -0,0 +1,11 @@
+.grayscaleSvg {
+    filter: grayscale(1);
+}
+
+.addManyMoreButton {
+  border: $euiBorderThin;
+}
+
+.iconTooltip {
+  border-bottom: $euiBorderThin;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
new file mode 100644
index 0000000000000..dc8a9b85fbe01
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiBadge, EuiToolTip, EuiText } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import { images } from '../../../workplace_search/components/shared/assets/source_icons';
+
+import './icon_row.scss';
+
+const icons = [
+  {
+    icon: 'logoElasticsearch',
+    title: 'Elasticsearch',
+    tooltip: i18n.translate('xpack.enterpriseSearch.overview.iconRow.elasticsearch.tooltip', {
+      defaultMessage:
+        'Use App and Workplace Search Search Engines with existing Elasticsearch indices',
+    }),
+  },
+  {
+    icon: 'desktop',
+    title: i18n.translate('xpack.enterpriseSearch.overview.iconRow.api.title', {
+      defaultMessage: 'API',
+    }),
+    tooltip: i18n.translate('xpack.enterpriseSearch.overview.iconRow.api.tooltip', {
+      defaultMessage: 'POST documents to an API endpoint from your own applications',
+    }),
+  },
+  {
+    icon: 'globe',
+    title: i18n.translate('xpack.enterpriseSearch.overview.iconRow.crawler.title', {
+      defaultMessage: 'Elastic Web Crawler',
+    }),
+    tooltip: i18n.translate('xpack.enterpriseSearch.overview.iconRow.crawler.tooltip', {
+      defaultMessage: 'Automatically index content from your websites',
+    }),
+  },
+  {
+    icon: images.confluence,
+    title: i18n.translate('xpack.enterpriseSearch.overview.iconRow.confluence.title', {
+      defaultMessage: 'Confluence',
+    }),
+    tooltip: i18n.translate('xpack.enterpriseSearch.overview.iconRow.confluence.tooltip', {
+      defaultMessage: 'Index content from Atlassian Confluence',
+    }),
+  },
+  {
+    icon: images.googleDrive,
+    title: i18n.translate('xpack.enterpriseSearch.overview.iconRow.googleDrive.title', {
+      defaultMessage: 'Google Drive',
+    }),
+    tooltip: i18n.translate('xpack.enterpriseSearch.overview.iconRow.googleDrive.tooltip', {
+      defaultMessage: 'Index documents from Google Drive',
+    }),
+  },
+  {
+    icon: images.sharePoint,
+    title: i18n.translate('xpack.enterpriseSearch.overview.iconRow.sharePoint.title', {
+      defaultMessage: 'Microsoft SharePoint',
+    }),
+    tooltip: i18n.translate('xpack.enterpriseSearch.overview.iconRow.sharePoint.tooltip', {
+      defaultMessage: 'Index content from Microsoft SharePoint',
+    }),
+  },
+  {
+    icon: images.github,
+    title: i18n.translate('xpack.enterpriseSearch.overview.iconRow.github.title', {
+      defaultMessage: 'GitHub',
+    }),
+    tooltip: i18n.translate('xpack.enterpriseSearch.overview.iconRow.github.tooltip', {
+      defaultMessage: 'Index issues, pull requests, and more from GitHub',
+    }),
+  },
+];
+
+export const IconRow: React.FC = () => {
+  return (
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+          {icons.map((item) => {
+            return (
+              <EuiFlexItem grow={false}>
+                <EuiToolTip
+                  content={
+                    <EuiText>
+                      <h4 className="iconTooltip">{item.title}</h4>
+                      {item.tooltip}
+                    </EuiText>
+                  }
+                >
+                  <EuiIcon className="grayscaleSvg" type={item.icon} size="m" color="text" />
+                </EuiToolTip>
+              </EuiFlexItem>
+            );
+          })}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiBadge color="hollow">
+          {i18n.translate('xpack.enterpriseSearch.overview.iconRow.manyMoreBadge', {
+            defaultMessage: 'And many more',
+          })}
+        </EuiBadge>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/index.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/index.ts
new file mode 100644
index 0000000000000..71ad56d84cb09
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/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 { GettingStartedSteps } from './getting_started_steps';
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/index.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/index.ts
index 09a1e910fbbda..ea69823f82b87 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/index.ts
+++ b/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';
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx
new file mode 100644
index 0000000000000..25d4b102d8307
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx
index 0611c5f5ca7a3..d1469c663b283 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx
@@ -23,7 +23,7 @@ export const LicenseCallout: React.FC = () => {
   if (hasPlatinumLicense && !isTrial) return null;
 
   return (
-    <EuiPanel hasBorder color="transparent" paddingSize="l">
+    <EuiPanel color="primary" paddingSize="l">
       <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={7}>
           <EuiText>
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
index 33b7658788f62..55f0456820813 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
@@ -27,11 +27,10 @@ interface ProductCardProps {
     CARD_DESCRIPTION: string;
     URL: string;
   };
-  image: string;
   url?: string;
 }
 
-export const ProductCard: React.FC<ProductCardProps> = ({ product, image, url }) => {
+export const ProductCard: React.FC<ProductCardProps> = ({ product, url }) => {
   const { sendEnterpriseSearchTelemetry } = useActions(TelemetryLogic);
   const { config } = useValues(KibanaLogic);
 
@@ -55,15 +54,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({ product, image, url })
     <EuiCard
       className="productCard"
       titleElement="h2"
+      textAlign="left"
+      hasBorder
       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={
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx
index d525e6ec4eb52..7cec32b1d946c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx
@@ -16,31 +16,25 @@ import {
   EuiFlexItem,
   EuiImage,
   EuiLink,
+  EuiPageBody,
   EuiSpacer,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import { Chat } from '@kbn/cloud-plugin/public';
 import { i18n } from '@kbn/i18n';
 
-import {
-  KibanaPageTemplate,
-  KibanaPageTemplateSolutionNavAvatar,
-  NO_DATA_PAGE_TEMPLATE_PROPS,
-} from '@kbn/kibana-react-plugin/public';
-
-import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { docLinks } from '../../../shared/doc_links';
 import { KibanaLogic } from '../../../shared/kibana';
 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 { ElasticsearchCard } from '../elasticsearch_card';
+import { AddContentEmptyPrompt } from '../add_content_empty_prompt/';
+import { ElasticsearchResources } from '../elasticsearch_resources';
+import { GettingStartedSteps } from '../getting_started_steps';
+import { EnterpriseSearchOverviewPageTemplate } from '../layout';
 import { LicenseCallout } from '../license_callout';
-import { ProductCard } from '../product_card';
 import { SetupGuideCta } from '../setup_guide';
+
 import { TrialCallout } from '../trial_callout';
 
 import illustration from './lock_light.svg';
@@ -53,10 +47,7 @@ interface ProductSelectorProps {
   isWorkplaceSearchAdmin: boolean;
 }
 
-export const ProductSelector: React.FC<ProductSelectorProps> = ({
-  access,
-  isWorkplaceSearchAdmin,
-}) => {
+export const ProductSelector: React.FC<ProductSelectorProps> = ({ access }) => {
   const { hasAppSearchAccess, hasWorkplaceSearchAccess } = access;
   const { config } = useValues(KibanaLogic);
 
@@ -68,33 +59,16 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
   // need to contact an administrator to get access to one of the products.
   const shouldShowEnterpriseSearchCards = shouldShowAppSearchCard || shouldShowWorkplaceSearchCard;
 
-  const WORKPLACE_SEARCH_URL = isWorkplaceSearchAdmin
-    ? WORKPLACE_SEARCH_PLUGIN.URL
-    : WORKPLACE_SEARCH_PLUGIN.NON_ADMIN_URL;
-
   const productCards = (
     <>
-      <EuiFlexGroup justifyContent="center" gutterSize="xl">
-        {shouldShowAppSearchCard && (
-          <EuiFlexItem grow={false}>
-            <ProductCard product={APP_SEARCH_PLUGIN} image={AppSearchImage} />
-          </EuiFlexItem>
-        )}
-        {shouldShowWorkplaceSearchCard && (
-          <EuiFlexItem grow={false}>
-            <ProductCard
-              product={WORKPLACE_SEARCH_PLUGIN}
-              url={WORKPLACE_SEARCH_URL}
-              image={WorkplaceSearchImage}
-            />
-          </EuiFlexItem>
-        )}
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <GettingStartedSteps />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <ElasticsearchResources />
+        </EuiFlexItem>
       </EuiFlexGroup>
-
-      <EuiSpacer size="xxl" />
-
-      <ElasticsearchCard />
-
       <EuiSpacer size="xxl" />
 
       {config.host ? <LicenseCallout /> : <SetupGuideCta />}
@@ -103,7 +77,16 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
 
   const insufficientAccessMessage = (
     <EuiEmptyPrompt
-      icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
+      icon={
+        <EuiImage
+          size="fullWidth"
+          src={illustration}
+          alt={i18n.translate(
+            'xpack.enterpriseSearch.overview.insufficientPermissionsIllustration',
+            { defaultMessage: 'Insufficient permissions illustration' }
+          )}
+        />
+      }
       title={
         <h2>
           {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsTitle', {
@@ -152,37 +135,22 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
     />
   );
   return (
-    <KibanaPageTemplate {...NO_DATA_PAGE_TEMPLATE_PROPS}>
+    <EnterpriseSearchOverviewPageTemplate
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.enterpriseSearch.overview.heading', {
+          defaultMessage: 'Welcome to Enterprise Search',
+        }),
+      }}
+    >
       <SetPageChrome />
       <SendTelemetry action="viewed" metric="overview" />
       <TrialCallout />
-      <EuiText textAlign="center">
-        <KibanaPageTemplateSolutionNavAvatar
-          name="Enterprise Search"
-          iconType="logoEnterpriseSearch"
-          size="xxl"
-        />
-
-        <EuiSpacer />
-
-        <h1>
-          {i18n.translate('xpack.enterpriseSearch.overview.heading', {
-            defaultMessage: 'Welcome to Elastic Enterprise Search',
-          })}
-        </h1>
-        <p>
-          {config.host
-            ? i18n.translate('xpack.enterpriseSearch.overview.subheading', {
-                defaultMessage: 'Add search to your app or organization.',
-              })
-            : i18n.translate('xpack.enterpriseSearch.overview.setupHeading', {
-                defaultMessage: 'Choose a product to set up and get started.',
-              })}
-        </p>
-      </EuiText>
-      <EuiSpacer size="xxl" />
-      {shouldShowEnterpriseSearchCards ? productCards : insufficientAccessMessage}
-      <Chat />
-    </KibanaPageTemplate>
+      <EuiPageBody paddingSize="none">
+        <AddContentEmptyPrompt />
+        <EuiSpacer size="xxl" />
+        {shouldShowEnterpriseSearchCards ? productCards : insufficientAccessMessage}
+        <Chat />
+      </EuiPageBody>
+    </EnterpriseSearchOverviewPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
index d643738352721..9448449fb8037 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { useValues } from 'kea';
@@ -18,6 +18,7 @@ import { VersionMismatchPage } from '../shared/version_mismatch';
 
 import { ElasticsearchGuide } from './components/elasticsearch_guide';
 import { ErrorConnecting } from './components/error_connecting';
+import { EnterpriseSearchOverviewHeaderActions } from './components/layout';
 import { ProductSelector } from './components/product_selector';
 import { SetupGuide } from './components/setup_guide';
 import { ROOT_PATH, SETUP_GUIDE_PATH, ELASTICSEARCH_GUIDE_PATH } from './routes';
@@ -29,7 +30,12 @@ export const EnterpriseSearchOverview: React.FC<InitialAppData> = ({
   kibanaVersion,
 }) => {
   const { errorConnectingMessage } = useValues(HttpLogic);
-  const { config } = useValues(KibanaLogic);
+  const { config, renderHeaderActions } = useValues(KibanaLogic);
+
+  // TODO check if it needs to be stopped for rendering
+  useEffect(() => {
+    renderHeaderActions(EnterpriseSearchOverviewHeaderActions);
+  }, []);
 
   const showErrorConnecting = !!(config.host && errorConnectingMessage);
   const incompatibleVersions = !!(

From 742ac8a0a81c4c9d5a7b8780ad14813915f527ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Wed, 13 Apr 2022 01:02:29 +0200
Subject: [PATCH 02/11] Fix some issues

---
 .../add_content_empty_prompt.tsx              |  9 +++----
 .../getting_started_steps.tsx                 | 25 ++++++++++---------
 .../getting_started_steps/icon_row.tsx        |  4 +--
 .../product_selector.test.tsx                 | 10 +++-----
 .../translations/translations/fr-FR.json      |  2 --
 .../translations/translations/ja-JP.json      |  2 --
 .../translations/translations/zh-CN.json      |  2 --
 7 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
index aff6cc478b66d..fbd692877b21c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
@@ -9,8 +9,6 @@ import React from 'react';
 
 import { generatePath } from 'react-router-dom';
 
-import dedent from 'dedent';
-
 import {
   EuiImage,
   EuiFlexGroup,
@@ -50,15 +48,14 @@ export const AddContentEmptyPrompt: React.FC = () => {
               <EuiText grow={false}>
                 <p>
                   {i18n.translate('xpack.enterpriseSearch.emptyState.description', {
-                    defaultMessage: dedent`Data you add in Enterprise Search is called a Search index and
-                            it's searchable in both App and Workplace Search. Now you can use your connectors in
-                            App Search and your web crawlers in Workplace Search.`,
+                    defaultMessage:
+                      "Data you add in Enterprise Search is called a Search index and it's searchable in both App and Workplace Search. Now you can use your connectors in App Search and your web crawlers in Workplace Search.",
                   })}
                 </p>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiFlexGroup alignItems="center" >
+              <EuiFlexGroup alignItems="center">
                 <EuiFlexItem grow={false}>
                   <EuiLinkTo
                     to={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + SEARCH_INDICES_PATH)}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
index 812098c906ef8..a83b06fbc606d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
@@ -7,8 +7,6 @@
 
 import React, { useState } from 'react';
 
-import dedent from 'dedent';
-
 import {
   EuiButton,
   EuiFlexGroup,
@@ -51,9 +49,8 @@ export const GettingStartedSteps: React.FC = () => {
                         {i18n.translate(
                           'xpack.enterpriseSearch.overview.gettingStartedSteps.addData.message',
                           {
-                            defaultMessage: dedent`Get started by adding your data to Enterprise Search.
-                            You can use the Elastic Web Crawler, API endpoints, existing Elasticsearch
-                            indices or third party connectors like Google Drive, Microsoft Sharepoint and more.`,
+                            defaultMessage:
+                              'Get started by adding your data to Enterprise Search. You can use the Elastic Web Crawler, API endpoints, existing Elasticsearch indices or third party connectors like Google Drive, Microsoft Sharepoint and more.',
                           }
                         )}
                       </p>
@@ -76,9 +73,8 @@ export const GettingStartedSteps: React.FC = () => {
                         {i18n.translate(
                           'xpack.enterpriseSearch.overview.gettingStartedSteps.buildSearchExperience.message',
                           {
-                            defaultMessage: dedent`You can use Search Engines to build customized search experiences for
-                          your customers or internal teams with App Search or Workplace Search. Or you can use Search UI
-                          to connect directly to an Elasticsearch index to build client-side search experinces for your users.`,
+                            defaultMessage:
+                              'You can use Search Engines to build customized search experiences for your customers or internal teams with App Search or Workplace Search. Or you can use Search UI to connect directly to an Elasticsearch index to build client-side search experinces for your users.',
                           }
                         )}
                       </p>
@@ -88,7 +84,12 @@ export const GettingStartedSteps: React.FC = () => {
                       <EuiFlexItem grow={false}>
                         <EuiPopover
                           button={
-                            <EuiButton iconType="arrowDown" iconSide="right" fill>
+                            <EuiButton
+                              iconType="arrowDown"
+                              iconSide="right"
+                              fill
+                              onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                            >
                               {i18n.translate(
                                 'xpack.enterpriseSearch.overview.gettingStartedSteps.createASearchEngineButton',
                                 { defaultMessage: 'Create a search engine' }
@@ -96,7 +97,7 @@ export const GettingStartedSteps: React.FC = () => {
                             </EuiButton>
                           }
                           isOpen={isPopoverOpen}
-                          onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                          closePopover={() => setIsPopoverOpen(false)}
                         >
                           <EuiContextMenuPanel
                             items={[
@@ -164,8 +165,8 @@ export const GettingStartedSteps: React.FC = () => {
                       {i18n.translate(
                         'xpack.enterpriseSearch.overview.gettingStartedSteps.tuneSearchExperience.message',
                         {
-                          defaultMessage: dedent`Dive into analytics and tune the result settings to help your
-                          users find exactly what they're looking for`,
+                          defaultMessage:
+                            "Dive into analytics and tune the result settings to help your users find exactly what they're looking for",
                         }
                       )}
                     </p>
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
index dc8a9b85fbe01..e7ed88c1fb80e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
@@ -85,9 +85,9 @@ export const IconRow: React.FC = () => {
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
-          {icons.map((item) => {
+          {icons.map((item, index) => {
             return (
-              <EuiFlexItem grow={false}>
+              <EuiFlexItem grow={false} key={index}>
                 <EuiToolTip
                   content={
                     <EuiText>
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx
index 0a6b331b36540..693c0de627c23 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx
@@ -33,10 +33,8 @@ describe('ProductSelector', () => {
     setMockValues({ config: { host: '' } });
     const wrapper = shallow(<ProductSelector {...props} />);
 
-    expect(wrapper.find(ProductCard)).toHaveLength(2);
     expect(wrapper.find(SetupGuideCta)).toHaveLength(1);
     expect(wrapper.find(LicenseCallout)).toHaveLength(0);
-    expect(wrapper.find(ElasticsearchCard)).toHaveLength(1);
   });
 
   it('renders the trial callout', () => {
@@ -46,7 +44,7 @@ describe('ProductSelector', () => {
     expect(wrapper.find(TrialCallout)).toHaveLength(1);
   });
 
-  it('passes correct URL when Workplace Search user is not an admin', () => {
+  it.skip('passes correct URL when Workplace Search user is not an admin', () => {
     setMockValues({ config: { host: '' } });
     const wrapper = shallow(<ProductSelector {...props} isWorkplaceSearchAdmin={false} />);
 
@@ -69,7 +67,7 @@ describe('ProductSelector', () => {
       expect(wrapper.find(LicenseCallout)).toHaveLength(1);
     });
 
-    it('does not render the App Search card if the user does not have access to AS', () => {
+    it.skip('does not render the App Search card if the user does not have access to AS', () => {
       const wrapper = shallow(
         <ProductSelector
           {...props}
@@ -81,7 +79,7 @@ describe('ProductSelector', () => {
       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', () => {
+    it.skip('does not render the Workplace Search card if the user does not have access to WS', () => {
       const wrapper = shallow(
         <ProductSelector
           {...props}
@@ -97,9 +95,7 @@ describe('ProductSelector', () => {
       const wrapper = shallow(<ProductSelector {...props} />);
 
       expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
-      expect(wrapper.find(ProductCard)).toHaveLength(0);
       expect(wrapper.find(LicenseCallout)).toHaveLength(0);
-      expect(wrapper.find(ElasticsearchCard)).toHaveLength(0);
     });
   });
 });
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index 11a6e812fc6c5..008f558f96c2b 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -9170,8 +9170,6 @@
     "xpack.enterpriseSearch.overview.productCard.launchButton": "Ouvrir {productName}",
     "xpack.enterpriseSearch.overview.productCard.setupButton": "Configurer {productName}",
     "xpack.enterpriseSearch.overview.setupCta.description": "Ajoutez des fonctions de recherche à votre application ou à votre organisation interne avec Elastic App Search et Workplace Search. Regardez la vidéo pour savoir ce qu'il est possible de faire lorsque la recherche est facilitée.",
-    "xpack.enterpriseSearch.overview.setupHeading": "Choisissez un produit à configurer et lancez-vous.",
-    "xpack.enterpriseSearch.overview.subheading": "Ajoutez une fonction de recherche à votre application ou à votre organisation.",
     "xpack.enterpriseSearch.productSelectorCalloutTitle": "Des fonctionnalités de niveau entreprise pour les grandes et petites équipes",
     "xpack.enterpriseSearch.readOnlyMode.warning": "Enterprise Search est en mode de lecture seule. Vous ne pourrez pas effectuer de changements tels que création, modification ou suppression.",
     "xpack.enterpriseSearch.roleMapping.addRoleMappingButtonLabel": "Ajouter un mapping",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 4bcda727275db..c98ff2432c356 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -10677,8 +10677,6 @@
     "xpack.enterpriseSearch.overview.productCard.launchButton": "{productName}を開く",
     "xpack.enterpriseSearch.overview.productCard.setupButton": "{productName}をセットアップ",
     "xpack.enterpriseSearch.overview.setupCta.description": "Elastic App Search および Workplace Search を使用して、アプリまたは社内組織に検索を追加できます。検索が簡単になるとどのような利点があるのかについては、動画をご覧ください。",
-    "xpack.enterpriseSearch.overview.setupHeading": "セットアップする製品を選択し、開始してください。",
-    "xpack.enterpriseSearch.overview.subheading": "アプリまたは組織に検索機能を追加できます。",
     "xpack.enterpriseSearch.overview.productName": "Enterprise Search",
     "xpack.enterpriseSearch.productSelectorCalloutTitle": "あらゆる規模のチームに対応するエンタープライズ級の機能",
     "xpack.enterpriseSearch.readOnlyMode.warning": "エンタープライズ サーチは読み取り専用モードです。作成、編集、削除などの変更を実行できません。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index df6bc86f5e56a..58f449e76bf54 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -10696,8 +10696,6 @@
     "xpack.enterpriseSearch.overview.productCard.launchButton": "打开 {productName}",
     "xpack.enterpriseSearch.overview.productCard.setupButton": "设置 {productName}",
     "xpack.enterpriseSearch.overview.setupCta.description": "通过 Elastic App Search 和 Workplace Search，将搜索添加到您的应用或内部组织中。观看视频，了解方便易用的搜索功能可以帮您做些什么。",
-    "xpack.enterpriseSearch.overview.setupHeading": "选择产品进行设置并开始使用。",
-    "xpack.enterpriseSearch.overview.subheading": "将搜索功能添加到您的应用或组织。",
     "xpack.enterpriseSearch.overview.productName": "Enterprise Search",
     "xpack.enterpriseSearch.productSelectorCalloutTitle": "适用于大型和小型团队的企业级功能",
     "xpack.enterpriseSearch.readOnlyMode.warning": "企业搜索处于只读模式。您将无法执行更改，例如创建、编辑或删除。",

From 90f5adf02ec879bb4da23b5ef380303f80b2092c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Tue, 19 Apr 2022 15:14:30 +0200
Subject: [PATCH 03/11] Review changes

---
 .../elasticsearch_card/elasticsearch_card.tsx |   2 +-
 .../elasticsearch_guide.tsx                   |   2 +-
 .../getting_started_steps.tsx                 | 183 ------------------
 .../getting_started_steps/icon_row.scss       |  11 --
 .../components/overview_content/index.ts      |   8 +
 .../overview_content/overview_content.tsx     | 155 +++++++++++++++
 .../components/product_card/product_card.tsx  |  12 +-
 .../product_selector/product_selector.tsx     | 108 +++++++----
 .../enterprise_search_overview/index.tsx      |  11 +-
 .../add_content_empty_prompt.scss             |   0
 .../add_content_empty_prompt.tsx              |   6 +-
 .../add_content_empty_prompt/index.ts         |   0
 .../search_indices.svg                        |   0
 .../elasticsearch_resources.tsx               |   2 +-
 .../elasticsearch_resources/index.ts          |   0
 .../getting_started_steps.tsx                 | 180 +++++++++++++++++
 .../getting_started_steps/icon_row.scss       |  13 ++
 .../getting_started_steps/icon_row.tsx        |   4 +-
 .../getting_started_steps/index.ts            |   0
 19 files changed, 445 insertions(+), 252 deletions(-)
 delete mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
 delete mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/index.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/add_content_empty_prompt/add_content_empty_prompt.scss (100%)
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/add_content_empty_prompt/add_content_empty_prompt.tsx (93%)
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/add_content_empty_prompt/index.ts (100%)
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/add_content_empty_prompt/search_indices.svg (100%)
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/elasticsearch_resources/elasticsearch_resources.tsx (97%)
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/elasticsearch_resources/index.ts (100%)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/getting_started_steps/icon_row.tsx (95%)
 rename x-pack/plugins/enterprise_search/public/applications/{enterprise_search_overview/components => shared}/getting_started_steps/index.ts (100%)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_card/elasticsearch_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_card/elasticsearch_card.tsx
index 0283249ac2890..fd84267ebb8e4 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_card/elasticsearch_card.tsx
+++ b/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 (
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_guide/elasticsearch_guide.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_guide/elasticsearch_guide.tsx
index fb1bc7a2820e2..d722cfd637cce 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_guide/elasticsearch_guide.tsx
+++ b/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
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
deleted file mode 100644
index a83b06fbc606d..0000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/getting_started_steps.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
- * 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 {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiPopover,
-  EuiSpacer,
-  EuiSteps,
-  EuiText,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
-import { EuiLinkTo } from '../../../shared/react_router_helpers';
-
-import { ELASTICSEARCH_GUIDE_PATH } from '../../routes';
-
-import { IconRow } from './icon_row';
-
-export const GettingStartedSteps: React.FC = () => {
-  // TODO replace with logic file
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  return (
-    <>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiSteps
-            steps={[
-              {
-                title: i18n.translate(
-                  'xpack.enterpriseSearch.overview.gettingStartedSteps.addData.title',
-                  { defaultMessage: 'Add your documents and data to Enterprise Search' }
-                ),
-                children: (
-                  <>
-                    <EuiText>
-                      <p>
-                        {i18n.translate(
-                          'xpack.enterpriseSearch.overview.gettingStartedSteps.addData.message',
-                          {
-                            defaultMessage:
-                              'Get started by adding your data to Enterprise Search. You can use the Elastic Web Crawler, API endpoints, existing Elasticsearch indices or third party connectors like Google Drive, Microsoft Sharepoint and more.',
-                          }
-                        )}
-                      </p>
-                    </EuiText>
-                    <EuiSpacer size="m" />
-                    <IconRow />
-                  </>
-                ),
-                status: 'current',
-              },
-              {
-                title: i18n.translate(
-                  'xpack.enterpriseSearch.overview.gettingStartedSteps.buildSearchExperience.title',
-                  { defaultMessage: 'Build a search experience' }
-                ),
-                children: (
-                  <>
-                    <EuiText>
-                      <p>
-                        {i18n.translate(
-                          'xpack.enterpriseSearch.overview.gettingStartedSteps.buildSearchExperience.message',
-                          {
-                            defaultMessage:
-                              'You can use Search Engines to build customized search experiences for your customers or internal teams with App Search or Workplace Search. Or you can use Search UI to connect directly to an Elasticsearch index to build client-side search experinces for your users.',
-                          }
-                        )}
-                      </p>
-                    </EuiText>
-                    <EuiSpacer size="m" />
-                    <EuiFlexGroup alignItems="center" gutterSize="s">
-                      <EuiFlexItem grow={false}>
-                        <EuiPopover
-                          button={
-                            <EuiButton
-                              iconType="arrowDown"
-                              iconSide="right"
-                              fill
-                              onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-                            >
-                              {i18n.translate(
-                                'xpack.enterpriseSearch.overview.gettingStartedSteps.createASearchEngineButton',
-                                { defaultMessage: 'Create a search engine' }
-                              )}
-                            </EuiButton>
-                          }
-                          isOpen={isPopoverOpen}
-                          closePopover={() => setIsPopoverOpen(false)}
-                        >
-                          <EuiContextMenuPanel
-                            items={[
-                              <EuiContextMenuItem key="" onClick={() => {}}>
-                                <EuiText size="s">
-                                  <h4>
-                                    {i18n.translate(
-                                      'xpack.enterpriseSearch.overview.gettingStartedSteps.createAppSearchEngine.title',
-                                      { defaultMessage: 'Create an App Search engine' }
-                                    )}
-                                  </h4>
-                                  {i18n.translate(
-                                    'xpack.enterpriseSearch.overview.gettingStartedSteps.createAppSearchEngine.description',
-                                    {
-                                      defaultMessage:
-                                        'All the power of Elasticsearch, without the learning curve.',
-                                    }
-                                  )}
-                                </EuiText>
-                              </EuiContextMenuItem>,
-                              <EuiContextMenuItem key="" onClick={() => {}}>
-                                <EuiText size="s">
-                                  <h4>
-                                    {i18n.translate(
-                                      'xpack.enterpriseSearch.overview.gettingStartedSteps.createWorkplaceSearchGroup.title',
-                                      { defaultMessage: 'Create a Workplace Search group' }
-                                    )}
-                                  </h4>
-                                  {i18n.translate(
-                                    'xpack.enterpriseSearch.overview.gettingStartedSteps.createWorkplaceSearchGroup.description',
-                                    {
-                                      defaultMessage:
-                                        'A secure search experience for internal teams',
-                                    }
-                                  )}
-                                </EuiText>
-                              </EuiContextMenuItem>,
-                            ]}
-                          />
-                        </EuiPopover>
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <EuiLinkTo to={ELASTICSEARCH_GUIDE_PATH}>
-                          <EuiIcon type="iInCircle" />
-                          &nbsp;
-                          {i18n.translate(
-                            'xpack.enterpriseSearch.overview.gettingStartedSteps.searchWithElasticsearchLink',
-                            { defaultMessage: 'Search with the Elasticsearch API' }
-                          )}
-                        </EuiLinkTo>
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </>
-                ),
-                status: 'incomplete',
-              },
-              {
-                title: i18n.translate(
-                  'xpack.enterpriseSearch.overview.gettingStartedSteps.tuneSearchExperience.title',
-                  { defaultMessage: 'Tune your search relevance' }
-                ),
-                children: (
-                  <EuiText>
-                    <p>
-                      {i18n.translate(
-                        'xpack.enterpriseSearch.overview.gettingStartedSteps.tuneSearchExperience.message',
-                        {
-                          defaultMessage:
-                            "Dive into analytics and tune the result settings to help your users find exactly what they're looking for",
-                        }
-                      )}
-                    </p>
-                  </EuiText>
-                ),
-                status: 'incomplete',
-              },
-            ]}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </>
-  );
-};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss
deleted file mode 100644
index ee40c4c5ed01b..0000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.grayscaleSvg {
-    filter: grayscale(1);
-}
-
-.addManyMoreButton {
-  border: $euiBorderThin;
-}
-
-.iconTooltip {
-  border-bottom: $euiBorderThin;
-}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/index.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/index.ts
new file mode 100644
index 0000000000000..83d1f526c36cb
--- /dev/null
+++ b/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';
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
new file mode 100644
index 0000000000000..1477def03a1b3
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
@@ -0,0 +1,155 @@
+/*
+ * 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.overview.insufficientPermissionsIllustration',
+            { defaultMessage: 'Insufficient permissions illustration' }
+          )}
+        />
+      }
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsTitle', {
+            defaultMessage: 'Insufficient permissions',
+          })}
+        </h2>
+      }
+      layout="horizontal"
+      color="plain"
+      body={
+        <>
+          <p>
+            {i18n.translate('xpack.enterpriseSearch.overview.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.overview.insufficientPermissionsButtonLabel', {
+            defaultMessage: 'Go to the Kibana dashboard',
+          })}
+        </EuiButton>
+      }
+      footer={
+        <>
+          <EuiTitle size="xxs">
+            <span>
+              {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsFooterBody', {
+                defaultMessage: 'Go to the Kibana dashboard',
+              })}
+            </span>
+          </EuiTitle>{' '}
+          <EuiLink href={docLinks.kibanaSecurity} target="_blank">
+            {i18n.translate(
+              'xpack.enterpriseSearch.overview.insufficientPermissionsFooterLinkLabel',
+              {
+                defaultMessage: 'Read documentation',
+              }
+            )}
+          </EuiLink>
+        </>
+      }
+    />
+  );
+  return (
+    <EnterpriseSearchOverviewPageTemplate
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.enterpriseSearch.overview.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>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
index 55f0456820813..6d1bfcc08ac2c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
@@ -21,16 +21,17 @@ import './product_card.scss';
 
 interface ProductCardProps {
   // Expects product plugin constants (@see common/constants.ts)
-  product: {
+ product: {
     ID: string;
     NAME: string;
     CARD_DESCRIPTION: string;
     URL: string;
   };
+  image: string;
   url?: string;
 }
 
-export const ProductCard: React.FC<ProductCardProps> = ({ product, url }) => {
+export const ProductCard: React.FC<ProductCardProps> = ({ product, image, url }) => {
   const { sendEnterpriseSearchTelemetry } = useActions(TelemetryLogic);
   const { config } = useValues(KibanaLogic);
 
@@ -54,12 +55,15 @@ export const ProductCard: React.FC<ProductCardProps> = ({ product, url }) => {
     <EuiCard
       className="productCard"
       titleElement="h2"
-      textAlign="left"
-      hasBorder
       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={
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx
index 7cec32b1d946c..d525e6ec4eb52 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.tsx
@@ -16,25 +16,31 @@ import {
   EuiFlexItem,
   EuiImage,
   EuiLink,
-  EuiPageBody,
   EuiSpacer,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import { Chat } from '@kbn/cloud-plugin/public';
 import { i18n } from '@kbn/i18n';
 
+import {
+  KibanaPageTemplate,
+  KibanaPageTemplateSolutionNavAvatar,
+  NO_DATA_PAGE_TEMPLATE_PROPS,
+} from '@kbn/kibana-react-plugin/public';
+
+import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { docLinks } from '../../../shared/doc_links';
 import { KibanaLogic } from '../../../shared/kibana';
 import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
 
-import { AddContentEmptyPrompt } from '../add_content_empty_prompt/';
-import { ElasticsearchResources } from '../elasticsearch_resources';
-import { GettingStartedSteps } from '../getting_started_steps';
-import { EnterpriseSearchOverviewPageTemplate } from '../layout';
+import AppSearchImage from '../../assets/app_search.png';
+import WorkplaceSearchImage from '../../assets/workplace_search.png';
+import { ElasticsearchCard } from '../elasticsearch_card';
 import { LicenseCallout } from '../license_callout';
+import { ProductCard } from '../product_card';
 import { SetupGuideCta } from '../setup_guide';
-
 import { TrialCallout } from '../trial_callout';
 
 import illustration from './lock_light.svg';
@@ -47,7 +53,10 @@ interface ProductSelectorProps {
   isWorkplaceSearchAdmin: boolean;
 }
 
-export const ProductSelector: React.FC<ProductSelectorProps> = ({ access }) => {
+export const ProductSelector: React.FC<ProductSelectorProps> = ({
+  access,
+  isWorkplaceSearchAdmin,
+}) => {
   const { hasAppSearchAccess, hasWorkplaceSearchAccess } = access;
   const { config } = useValues(KibanaLogic);
 
@@ -59,16 +68,33 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({ access }) => {
   // need to contact an administrator to get access to one of the products.
   const shouldShowEnterpriseSearchCards = shouldShowAppSearchCard || shouldShowWorkplaceSearchCard;
 
+  const WORKPLACE_SEARCH_URL = isWorkplaceSearchAdmin
+    ? WORKPLACE_SEARCH_PLUGIN.URL
+    : WORKPLACE_SEARCH_PLUGIN.NON_ADMIN_URL;
+
   const productCards = (
     <>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <GettingStartedSteps />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <ElasticsearchResources />
-        </EuiFlexItem>
+      <EuiFlexGroup justifyContent="center" gutterSize="xl">
+        {shouldShowAppSearchCard && (
+          <EuiFlexItem grow={false}>
+            <ProductCard product={APP_SEARCH_PLUGIN} image={AppSearchImage} />
+          </EuiFlexItem>
+        )}
+        {shouldShowWorkplaceSearchCard && (
+          <EuiFlexItem grow={false}>
+            <ProductCard
+              product={WORKPLACE_SEARCH_PLUGIN}
+              url={WORKPLACE_SEARCH_URL}
+              image={WorkplaceSearchImage}
+            />
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
+
+      <EuiSpacer size="xxl" />
+
+      <ElasticsearchCard />
+
       <EuiSpacer size="xxl" />
 
       {config.host ? <LicenseCallout /> : <SetupGuideCta />}
@@ -77,16 +103,7 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({ access }) => {
 
   const insufficientAccessMessage = (
     <EuiEmptyPrompt
-      icon={
-        <EuiImage
-          size="fullWidth"
-          src={illustration}
-          alt={i18n.translate(
-            'xpack.enterpriseSearch.overview.insufficientPermissionsIllustration',
-            { defaultMessage: 'Insufficient permissions illustration' }
-          )}
-        />
-      }
+      icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
       title={
         <h2>
           {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsTitle', {
@@ -135,22 +152,37 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({ access }) => {
     />
   );
   return (
-    <EnterpriseSearchOverviewPageTemplate
-      pageHeader={{
-        pageTitle: i18n.translate('xpack.enterpriseSearch.overview.heading', {
-          defaultMessage: 'Welcome to Enterprise Search',
-        }),
-      }}
-    >
+    <KibanaPageTemplate {...NO_DATA_PAGE_TEMPLATE_PROPS}>
       <SetPageChrome />
       <SendTelemetry action="viewed" metric="overview" />
       <TrialCallout />
-      <EuiPageBody paddingSize="none">
-        <AddContentEmptyPrompt />
-        <EuiSpacer size="xxl" />
-        {shouldShowEnterpriseSearchCards ? productCards : insufficientAccessMessage}
-        <Chat />
-      </EuiPageBody>
-    </EnterpriseSearchOverviewPageTemplate>
+      <EuiText textAlign="center">
+        <KibanaPageTemplateSolutionNavAvatar
+          name="Enterprise Search"
+          iconType="logoEnterpriseSearch"
+          size="xxl"
+        />
+
+        <EuiSpacer />
+
+        <h1>
+          {i18n.translate('xpack.enterpriseSearch.overview.heading', {
+            defaultMessage: 'Welcome to Elastic Enterprise Search',
+          })}
+        </h1>
+        <p>
+          {config.host
+            ? i18n.translate('xpack.enterpriseSearch.overview.subheading', {
+                defaultMessage: 'Add search to your app or organization.',
+              })
+            : i18n.translate('xpack.enterpriseSearch.overview.setupHeading', {
+                defaultMessage: 'Choose a product to set up and get started.',
+              })}
+        </p>
+      </EuiText>
+      <EuiSpacer size="xxl" />
+      {shouldShowEnterpriseSearchCards ? productCards : insufficientAccessMessage}
+      <Chat />
+    </KibanaPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
index 9448449fb8037..996954c936e36 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { useValues } from 'kea';
@@ -18,7 +18,7 @@ import { VersionMismatchPage } from '../shared/version_mismatch';
 
 import { ElasticsearchGuide } from './components/elasticsearch_guide';
 import { ErrorConnecting } from './components/error_connecting';
-import { EnterpriseSearchOverviewHeaderActions } from './components/layout';
+// import { EnterpriseSearchOverviewHeaderActions } from './components/layout';
 import { ProductSelector } from './components/product_selector';
 import { SetupGuide } from './components/setup_guide';
 import { ROOT_PATH, SETUP_GUIDE_PATH, ELASTICSEARCH_GUIDE_PATH } from './routes';
@@ -30,12 +30,7 @@ export const EnterpriseSearchOverview: React.FC<InitialAppData> = ({
   kibanaVersion,
 }) => {
   const { errorConnectingMessage } = useValues(HttpLogic);
-  const { config, renderHeaderActions } = useValues(KibanaLogic);
-
-  // TODO check if it needs to be stopped for rendering
-  useEffect(() => {
-    renderHeaderActions(EnterpriseSearchOverviewHeaderActions);
-  }, []);
+  const { config } = useValues(KibanaLogic);
 
   const showErrorConnecting = !!(config.host && errorConnectingMessage);
   const incompatibleVersions = !!(
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.scss b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.scss
similarity index 100%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.scss
rename to x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.scss
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
similarity index 93%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
rename to x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
index fbd692877b21c..d64a31a6f1942 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/add_content_empty_prompt.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
@@ -23,9 +23,9 @@ import {
 
 import { i18n } from '@kbn/i18n';
 
-import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants';
-import { SEARCH_INDICES_PATH } from '../../../enterprise_search_content/routes';
-import { EuiLinkTo } from '../../../shared/react_router_helpers';
+import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../common/constants';
+import { SEARCH_INDICES_PATH } from '../../enterprise_search_content/routes';
+import { EuiLinkTo } from '../react_router_helpers';
 
 import searchIndicesIllustration from './search_indices.svg';
 import './add_content_empty_prompt.scss';
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/index.ts
similarity index 100%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/index.ts
rename to x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/index.ts
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/search_indices.svg b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/search_indices.svg
similarity index 100%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/add_content_empty_prompt/search_indices.svg
rename to x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/search_indices.svg
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/elasticsearch_resources.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/elasticsearch_resources.tsx
similarity index 97%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/elasticsearch_resources.tsx
rename to x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/elasticsearch_resources.tsx
index b4f3930bed772..6a274e75179b1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/elasticsearch_resources.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/elasticsearch_resources.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { EuiSpacer, EuiPanel, EuiTitle, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { docLinks } from '../../../shared/doc_links';
+import { docLinks } from '../doc_links';
 
 export const ElasticsearchResources: React.FC = () => (
   <EuiPanel hasShadow grow={false} color="subdued">
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/index.ts
similarity index 100%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_resources/index.ts
rename to x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/index.ts
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx
new file mode 100644
index 0000000000000..d574d17d31cef
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx
@@ -0,0 +1,180 @@
+/*
+ * 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 {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPopover,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { ELASTICSEARCH_GUIDE_PATH } from '../../enterprise_search_overview/routes';
+
+import { EuiLinkTo } from '../react_router_helpers';
+
+import { IconRow } from './icon_row';
+
+export const GettingStartedSteps: React.FC = () => {
+  // TODO replace with logic file
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiSteps
+          steps={[
+            {
+              title: i18n.translate(
+                'xpack.enterpriseSearch.overview.gettingStartedSteps.addData.title',
+                { defaultMessage: 'Add your documents and data to Enterprise Search' }
+              ),
+              children: (
+                <>
+                  <EuiText>
+                    <p>
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.overview.gettingStartedSteps.addData.message',
+                        {
+                          defaultMessage:
+                            'Get started by adding your data to Enterprise Search. You can use the Elastic Web Crawler, API endpoints, existing Elasticsearch indices or third party connectors like Google Drive, Microsoft Sharepoint and more.',
+                        }
+                      )}
+                    </p>
+                  </EuiText>
+                  <EuiSpacer size="m" />
+                  <IconRow />
+                </>
+              ),
+              status: 'current',
+            },
+            {
+              title: i18n.translate(
+                'xpack.enterpriseSearch.overview.gettingStartedSteps.buildSearchExperience.title',
+                { defaultMessage: 'Build a search experience' }
+              ),
+              children: (
+                <>
+                  <EuiText>
+                    <p>
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.overview.gettingStartedSteps.buildSearchExperience.message',
+                        {
+                          defaultMessage:
+                            'You can use Search Engines to build customized search experiences for your customers or internal teams with App Search or Workplace Search. Or you can use Search UI to connect directly to an Elasticsearch index to build client-side search experinces for your users.',
+                        }
+                      )}
+                    </p>
+                  </EuiText>
+                  <EuiSpacer size="m" />
+                  <EuiFlexGroup alignItems="center" gutterSize="s">
+                    <EuiFlexItem grow={false}>
+                      <EuiPopover
+                        button={
+                          <EuiButton
+                            iconType="arrowDown"
+                            iconSide="right"
+                            fill
+                            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                          >
+                            {i18n.translate(
+                              'xpack.enterpriseSearch.overview.gettingStartedSteps.createASearchEngineButton',
+                              { defaultMessage: 'Create a search engine' }
+                            )}
+                          </EuiButton>
+                        }
+                        isOpen={isPopoverOpen}
+                        closePopover={() => setIsPopoverOpen(false)}
+                      >
+                        <EuiContextMenuPanel
+                          items={[
+                            <EuiContextMenuItem key="" onClick={() => {}}>
+                              <EuiText size="s">
+                                <h4>
+                                  {i18n.translate(
+                                    'xpack.enterpriseSearch.overview.gettingStartedSteps.createAppSearchEngine.title',
+                                    { defaultMessage: 'Create an App Search engine' }
+                                  )}
+                                </h4>
+                                {i18n.translate(
+                                  'xpack.enterpriseSearch.overview.gettingStartedSteps.createAppSearchEngine.description',
+                                  {
+                                    defaultMessage:
+                                      'All the power of Elasticsearch, without the learning curve.',
+                                  }
+                                )}
+                              </EuiText>
+                            </EuiContextMenuItem>,
+                            <EuiContextMenuItem key="" onClick={() => {}}>
+                              <EuiText size="s">
+                                <h4>
+                                  {i18n.translate(
+                                    'xpack.enterpriseSearch.overview.gettingStartedSteps.createWorkplaceSearchGroup.title',
+                                    { defaultMessage: 'Create a Workplace Search group' }
+                                  )}
+                                </h4>
+                                {i18n.translate(
+                                  'xpack.enterpriseSearch.overview.gettingStartedSteps.createWorkplaceSearchGroup.description',
+                                  {
+                                    defaultMessage: 'A secure search experience for internal teams',
+                                  }
+                                )}
+                              </EuiText>
+                            </EuiContextMenuItem>,
+                          ]}
+                        />
+                      </EuiPopover>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiLinkTo to={ELASTICSEARCH_GUIDE_PATH}>
+                        <EuiIcon type="iInCircle" />
+                        &nbsp;
+                        {i18n.translate(
+                          'xpack.enterpriseSearch.overview.gettingStartedSteps.searchWithElasticsearchLink',
+                          { defaultMessage: 'Search with the Elasticsearch API' }
+                        )}
+                      </EuiLinkTo>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </>
+              ),
+              status: 'incomplete',
+            },
+            {
+              title: i18n.translate(
+                'xpack.enterpriseSearch.overview.gettingStartedSteps.tuneSearchExperience.title',
+                { defaultMessage: 'Tune your search relevance' }
+              ),
+              children: (
+                <EuiText>
+                  <p>
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.overview.gettingStartedSteps.tuneSearchExperience.message',
+                      {
+                        defaultMessage:
+                          "Dive into analytics and tune the result settings to help your users find exactly what they're looking for",
+                      }
+                    )}
+                  </p>
+                </EuiText>
+              ),
+              status: 'incomplete',
+            },
+          ]}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
new file mode 100644
index 0000000000000..18df7f46ee6a2
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
@@ -0,0 +1,13 @@
+.gettingStartedSteps {
+  .grayscaleSvg {
+      filter: grayscale(1);
+  }
+
+  .addManyMoreButton {
+    border: $euiBorderThin;
+  }
+
+  .iconTooltip {
+    border-bottom: $euiBorderThin;
+  }
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.tsx
similarity index 95%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
rename to x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.tsx
index e7ed88c1fb80e..8ae50183914d3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/icon_row.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.tsx
@@ -11,7 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiBadge, EuiToolTip, EuiText } fro
 
 import { i18n } from '@kbn/i18n';
 
-import { images } from '../../../workplace_search/components/shared/assets/source_icons';
+import { images } from '../../workplace_search/components/shared/assets/source_icons';
 
 import './icon_row.scss';
 
@@ -82,7 +82,7 @@ const icons = [
 
 export const IconRow: React.FC = () => {
   return (
-    <EuiFlexGroup gutterSize="s" alignItems="center">
+    <EuiFlexGroup gutterSize="s" alignItems="center" className="gettingStartedSteps">
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
           {icons.map((item, index) => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/index.ts
similarity index 100%
rename from x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/getting_started_steps/index.ts
rename to x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/index.ts

From a9ea42fa53dd40eb7b2f5095ebfd765ad9af7658 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Tue, 19 Apr 2022 15:21:29 +0200
Subject: [PATCH 04/11] Revert some more changes

---
 .../components/license_callout/license_callout.tsx     |  2 +-
 .../components/product_card/product_card.tsx           |  2 +-
 .../product_selector/product_selector.test.tsx         | 10 +++++++---
 .../applications/enterprise_search_overview/index.tsx  |  1 -
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx
index d1469c663b283..0611c5f5ca7a3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/license_callout/license_callout.tsx
@@ -23,7 +23,7 @@ export const LicenseCallout: React.FC = () => {
   if (hasPlatinumLicense && !isTrial) return null;
 
   return (
-    <EuiPanel color="primary" paddingSize="l">
+    <EuiPanel hasBorder color="transparent" paddingSize="l">
       <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={7}>
           <EuiText>
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
index 6d1bfcc08ac2c..33b7658788f62 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_card/product_card.tsx
@@ -21,7 +21,7 @@ import './product_card.scss';
 
 interface ProductCardProps {
   // Expects product plugin constants (@see common/constants.ts)
- product: {
+  product: {
     ID: string;
     NAME: string;
     CARD_DESCRIPTION: string;
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx
index 693c0de627c23..0a6b331b36540 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/product_selector/product_selector.test.tsx
@@ -33,8 +33,10 @@ describe('ProductSelector', () => {
     setMockValues({ config: { host: '' } });
     const wrapper = shallow(<ProductSelector {...props} />);
 
+    expect(wrapper.find(ProductCard)).toHaveLength(2);
     expect(wrapper.find(SetupGuideCta)).toHaveLength(1);
     expect(wrapper.find(LicenseCallout)).toHaveLength(0);
+    expect(wrapper.find(ElasticsearchCard)).toHaveLength(1);
   });
 
   it('renders the trial callout', () => {
@@ -44,7 +46,7 @@ describe('ProductSelector', () => {
     expect(wrapper.find(TrialCallout)).toHaveLength(1);
   });
 
-  it.skip('passes correct URL when Workplace Search user is not an admin', () => {
+  it('passes correct URL when Workplace Search user is not an admin', () => {
     setMockValues({ config: { host: '' } });
     const wrapper = shallow(<ProductSelector {...props} isWorkplaceSearchAdmin={false} />);
 
@@ -67,7 +69,7 @@ describe('ProductSelector', () => {
       expect(wrapper.find(LicenseCallout)).toHaveLength(1);
     });
 
-    it.skip('does not render the App Search card if the user does not have access to AS', () => {
+    it('does not render the App Search card if the user does not have access to AS', () => {
       const wrapper = shallow(
         <ProductSelector
           {...props}
@@ -79,7 +81,7 @@ describe('ProductSelector', () => {
       expect(wrapper.find(ProductCard).prop('product').ID).toEqual('workplaceSearch');
     });
 
-    it.skip('does not render the Workplace Search card if the user does not have access to WS', () => {
+    it('does not render the Workplace Search card if the user does not have access to WS', () => {
       const wrapper = shallow(
         <ProductSelector
           {...props}
@@ -95,7 +97,9 @@ describe('ProductSelector', () => {
       const wrapper = shallow(<ProductSelector {...props} />);
 
       expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
+      expect(wrapper.find(ProductCard)).toHaveLength(0);
       expect(wrapper.find(LicenseCallout)).toHaveLength(0);
+      expect(wrapper.find(ElasticsearchCard)).toHaveLength(0);
     });
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
index 996954c936e36..d643738352721 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/index.tsx
@@ -18,7 +18,6 @@ import { VersionMismatchPage } from '../shared/version_mismatch';
 
 import { ElasticsearchGuide } from './components/elasticsearch_guide';
 import { ErrorConnecting } from './components/error_connecting';
-// import { EnterpriseSearchOverviewHeaderActions } from './components/layout';
 import { ProductSelector } from './components/product_selector';
 import { SetupGuide } from './components/setup_guide';
 import { ROOT_PATH, SETUP_GUIDE_PATH, ELASTICSEARCH_GUIDE_PATH } from './routes';

From f936cafb74c69158223071121094b4b40a5f7dc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Tue, 19 Apr 2022 15:37:55 +0200
Subject: [PATCH 05/11] Fix i18n issues

---
 .../overview_content/overview_content.tsx     | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
index 1477def03a1b3..2b643f78f20ba 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
@@ -81,14 +81,14 @@ export const OverviewContent: React.FC<ProductSelectorProps> = ({ access }) => {
           size="fullWidth"
           src={illustration}
           alt={i18n.translate(
-            'xpack.enterpriseSearch.overview.insufficientPermissionsIllustration',
+            'xpack.enterpriseSearch.overviewContent.insufficientPermissionsIllustration',
             { defaultMessage: 'Insufficient permissions illustration' }
           )}
         />
       }
       title={
         <h2>
-          {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsTitle', {
+          {i18n.translate('xpack.enterpriseSearch.overviewContent.insufficientPermissionsTitle', {
             defaultMessage: 'Insufficient permissions',
           })}
         </h2>
@@ -98,7 +98,7 @@ export const OverviewContent: React.FC<ProductSelectorProps> = ({ access }) => {
       body={
         <>
           <p>
-            {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsBody', {
+            {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.',
             })}
@@ -107,23 +107,29 @@ export const OverviewContent: React.FC<ProductSelectorProps> = ({ access }) => {
       }
       actions={
         <EuiButton color="primary" fill href="/">
-          {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsButtonLabel', {
-            defaultMessage: 'Go to the Kibana dashboard',
-          })}
+          {i18n.translate(
+            'xpack.enterpriseSearch.overviewContent.insufficientPermissionsButtonLabel',
+            {
+              defaultMessage: 'Go to the Kibana dashboard',
+            }
+          )}
         </EuiButton>
       }
       footer={
         <>
           <EuiTitle size="xxs">
             <span>
-              {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsFooterBody', {
-                defaultMessage: 'Go to the Kibana dashboard',
-              })}
+              {i18n.translate(
+                'xpack.enterpriseSearch.overviewContent.insufficientPermissionsFooterBody',
+                {
+                  defaultMessage: 'Go to the Kibana dashboard',
+                }
+              )}
             </span>
           </EuiTitle>{' '}
           <EuiLink href={docLinks.kibanaSecurity} target="_blank">
             {i18n.translate(
-              'xpack.enterpriseSearch.overview.insufficientPermissionsFooterLinkLabel',
+              'xpack.enterpriseSearch.overviewContent.insufficientPermissionsFooterLinkLabel',
               {
                 defaultMessage: 'Read documentation',
               }
@@ -136,7 +142,7 @@ export const OverviewContent: React.FC<ProductSelectorProps> = ({ access }) => {
   return (
     <EnterpriseSearchOverviewPageTemplate
       pageHeader={{
-        pageTitle: i18n.translate('xpack.enterpriseSearch.overview.heading', {
+        pageTitle: i18n.translate('xpack.enterpriseSearch.overviewContent.heading', {
           defaultMessage: 'Welcome to Enterprise Search',
         }),
       }}

From 813bfd3ed9e4aef6f71b0ba75d50a1e7a568149d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Tue, 19 Apr 2022 15:48:02 +0200
Subject: [PATCH 06/11] Lint fixes for sass file

---
 .../shared/getting_started_steps/icon_row.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
index 18df7f46ee6a2..e99e250886f18 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
@@ -1,13 +1,13 @@
 .gettingStartedSteps {
-  .grayscaleSvg {
-      filter: grayscale(1);
-  }
+    .grayscaleSvg {
+        filter: grayscale(1);
+    }
 
-  .addManyMoreButton {
-    border: $euiBorderThin;
-  }
+    .addManyMoreButton {
+      border: $euiBorderThin;
+    }
 
-  .iconTooltip {
-    border-bottom: $euiBorderThin;
-  }
+    .iconTooltip {
+      border-bottom: $euiBorderThin;
+    }
 }

From 3610fcedf35630467310bb3a4f5ce7a5eb6628a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Tue, 19 Apr 2022 16:54:44 +0200
Subject: [PATCH 07/11] Re-fix linting

---
 .../shared/getting_started_steps/icon_row.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
index e99e250886f18..6992cdead2803 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/icon_row.scss
@@ -1,13 +1,13 @@
 .gettingStartedSteps {
-    .grayscaleSvg {
-        filter: grayscale(1);
-    }
+  .grayscaleSvg {
+    filter: grayscale(1);
+  }
 
-    .addManyMoreButton {
-      border: $euiBorderThin;
-    }
+  .addManyMoreButton {
+    border: $euiBorderThin;
+  }
 
-    .iconTooltip {
-      border-bottom: $euiBorderThin;
-    }
+  .iconTooltip {
+    border-bottom: $euiBorderThin;
+  }
 }

From 7c57802f7dfd7403bfb82ca0ec7fa2619417d9d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Wed, 20 Apr 2022 16:49:37 +0200
Subject: [PATCH 08/11] Add render tests

---
 .../layout/kibana_header_actions.test.tsx     | 34 +++++++++++
 .../add_content_empty_prompt.test.tsx         | 29 ++++++++++
 .../add_content_empty_prompt.tsx              |  1 +
 .../elasticsearch_resources.test.tsx          | 47 ++++++++++++++++
 .../getting_started_steps.test.tsx            | 56 +++++++++++++++++++
 .../getting_started_steps.tsx                 |  1 +
 6 files changed, 168 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/elasticsearch_resources.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.test.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.test.tsx
new file mode 100644
index 0000000000000..88f5da60e3627
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.test.tsx
new file mode 100644
index 0000000000000..b9e23f00f06b5
--- /dev/null
+++ b/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'
+    );
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
index d64a31a6f1942..569013879c6ac 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
@@ -69,6 +69,7 @@ export const AddContentEmptyPrompt: React.FC = () => {
                   </EuiLinkTo>
                 </EuiFlexItem>
                 <EuiFlexItem>
+                {/* TODO need link for Learn More link*/}
                   <EuiLink href="#" target="_blank">
                     {i18n.translate('xpack.enterpriseSearch.overview.emptyState.footerLinkTitle', {
                       defaultMessage: 'Learn more',
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/elasticsearch_resources.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/elasticsearch_resources.test.tsx
new file mode 100644
index 0000000000000..3dd3b1c8ddfac
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/elasticsearch_resources/elasticsearch_resources.test.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+jest.mock('../doc_links', () => ({
+  docLinks: {
+    elasticsearchGettingStarted: 'elasticsearchGettingStarted-link',
+    elasticsearchCreateIndex: 'elasticsearchCreateIndex-link',
+    clientsGuide: 'elasticsearchClientsGuide-link',
+  },
+}));
+import React from 'react';
+
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { EuiLink } from '@elastic/eui';
+
+import { ElasticsearchResources } from '.';
+
+describe('ElasticsearchResources', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => {
+    wrapper = shallow(<ElasticsearchResources />);
+  });
+
+  it('renders', () => {
+    expect(wrapper.find('h4').text()).toEqual('Resources');
+
+    expect(wrapper.find(EuiLink).at(0).prop('href')).toEqual('elasticsearchGettingStarted-link');
+    expect(wrapper.find(EuiLink).at(0).text()).toEqual('Getting started with Elasticsearch');
+
+    expect(wrapper.find(EuiLink).at(1).prop('href')).toEqual('elasticsearchCreateIndex-link');
+    expect(wrapper.find(EuiLink).at(1).text()).toEqual('Create a new index');
+
+    expect(wrapper.find(EuiLink).at(2).prop('href')).toEqual('elasticsearchClientsGuide-link');
+    expect(wrapper.find(EuiLink).at(2).text()).toEqual('Setup a language client');
+
+    expect(wrapper.find(EuiLink).at(3).prop('href')).toEqual(
+      'https://github.com/elastic/search-ui/tree/master/packages/search-ui-elasticsearch-connector'
+    );
+    expect(wrapper.find(EuiLink).at(3).text()).toEqual('Search UI for Elasticsearch');
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.test.tsx
new file mode 100644
index 0000000000000..0595e39475b4b
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.test.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+jest.mock('../doc_links', () => ({
+  docLinks: {
+    elasticsearchGettingStarted: 'elasticsearchGettingStarted-link',
+    elasticsearchCreateIndex: 'elasticsearchCreateIndex-link',
+    clientsGuide: 'elasticsearchClientsGuide-link',
+  },
+}));
+import React from 'react';
+
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { EuiSteps } from '@elastic/eui';
+
+import { EuiLinkTo } from '../react_router_helpers';
+
+import { IconRow } from './icon_row';
+
+import { GettingStartedSteps } from '.';
+
+describe('GettingStartedSteps', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => {
+    wrapper = shallow(<GettingStartedSteps />);
+  });
+
+  it('renders', () => {
+    const steps = wrapper
+      .find(EuiSteps)
+      .prop('steps')
+      .map(({ title, children, status, ...rest }) => ({
+        title,
+        status,
+        children: shallow(<div>{children}</div>),
+        ...rest,
+      }));
+
+    expect(steps[0].title).toEqual('Add your documents and data to Enterprise Search');
+    expect(steps[0].status).toEqual('current');
+    expect(steps[0].children.find(IconRow).length).toEqual(1);
+
+    expect(steps[1].title).toEqual('Build a search experience');
+    expect(steps[1].status).toEqual('incomplete');
+    expect(steps[1].children.find(EuiLinkTo).prop('to')).toEqual('/elasticsearch_guide');
+
+    expect(steps[2].title).toEqual('Tune your search relevance');
+    expect(steps[2].status).toEqual('incomplete');
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx
index d574d17d31cef..e9a3f477c7049 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started_steps/getting_started_steps.tsx
@@ -98,6 +98,7 @@ export const GettingStartedSteps: React.FC = () => {
                         isOpen={isPopoverOpen}
                         closePopover={() => setIsPopoverOpen(false)}
                       >
+                        {/* TODO add onclick for these links*/}
                         <EuiContextMenuPanel
                           items={[
                             <EuiContextMenuItem key="" onClick={() => {}}>

From 954dfac5332977032d8303257d5be05cf0c1c8b1 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 20 Apr 2022 15:55:24 +0000
Subject: [PATCH 09/11] [CI] Auto-commit changed files from 'node
 scripts/eslint --no-cache --fix'

---
 .../add_content_empty_prompt/add_content_empty_prompt.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
index 569013879c6ac..0679739a7683c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/add_content_empty_prompt/add_content_empty_prompt.tsx
@@ -69,7 +69,7 @@ export const AddContentEmptyPrompt: React.FC = () => {
                   </EuiLinkTo>
                 </EuiFlexItem>
                 <EuiFlexItem>
-                {/* TODO need link for Learn More link*/}
+                  {/* TODO need link for Learn More link*/}
                   <EuiLink href="#" target="_blank">
                     {i18n.translate('xpack.enterpriseSearch.overview.emptyState.footerLinkTitle', {
                       defaultMessage: 'Learn more',

From ed39cbd8f898d0f126d63663503b378212a20d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?= <efeyalaman@gmail.com>
Date: Thu, 21 Apr 2022 16:51:26 +0200
Subject: [PATCH 10/11] Update
 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx

Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>
---
 .../components/layout/kibana_header_actions.tsx                  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx
index 25d4b102d8307..0383618ecf87b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx
@@ -30,6 +30,7 @@ import { i18n } from '@kbn/i18n';
 export const EnterpriseSearchOverviewHeaderActions: React.FC = () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   // TODO change it with actual value
+  // TODO make this conditional only for users on cloud, as on-prem users will not have a deployment id to show.
   const clientId = 'fgdshjafghj13eshfdjag718yfhjdskf';
 
   return (

From 3df3047dd9a75d4c7aceab53184d617cdebc43b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?=
 <efeguerkan.yalaman@elastic.co>
Date: Thu, 21 Apr 2022 17:19:56 +0200
Subject: [PATCH 11/11] Add tests for overview content

Also made some changes to reduce the churn when we implement this
feature
---
 .../overview_content.test.tsx                 | 73 +++++++++++++++++++
 .../overview_content/overview_content.tsx     | 20 +++--
 2 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.test.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.test.tsx
new file mode 100644
index 0000000000000..53c31eaf0498a
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.test.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 { setMockValues } from '../../../__mocks__/kea_logic';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiEmptyPrompt } from '@elastic/eui';
+
+import { AddContentEmptyPrompt } from '../../../shared/add_content_empty_prompt';
+import { GettingStartedSteps } from '../../../shared/getting_started_steps';
+
+import { LicenseCallout } from '../license_callout';
+import { SetupGuideCta } from '../setup_guide';
+import { TrialCallout } from '../trial_callout';
+
+import { OverviewContent } from '.';
+
+describe('OverviewContent', () => {
+  const props = {
+    access: {},
+    isWorkplaceSearchAdmin: true,
+  };
+
+  it('renders the overview page, Getting Started steps & setup guide CTAs with no host set', () => {
+    setMockValues({ config: { host: '' } });
+    const wrapper = shallow(<OverviewContent {...props} />);
+
+    expect(wrapper.find(GettingStartedSteps)).toHaveLength(1);
+    expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(1);
+    expect(wrapper.find(SetupGuideCta)).toHaveLength(1);
+    expect(wrapper.find(LicenseCallout)).toHaveLength(0);
+  });
+
+  it('renders the trial callout', () => {
+    setMockValues({ config: { host: 'localhost' } });
+    const wrapper = shallow(<OverviewContent {...props} />);
+
+    expect(wrapper.find(TrialCallout)).toHaveLength(1);
+  });
+
+  // TODO Refactor this and other tests according to the search indices permissions
+  describe('access checks when host is set', () => {
+    beforeEach(() => {
+      setMockValues({ config: { host: 'localhost' } });
+    });
+
+    it('renders the license callout when user has access to a product', () => {
+      setMockValues({ config: { host: 'localhost' } });
+      const wrapper = shallow(
+        <OverviewContent {...props} access={{ hasWorkplaceSearchAccess: true }} />
+      );
+
+      expect(wrapper.find(LicenseCallout)).toHaveLength(1);
+    });
+
+    it('renders empty prompt and overview or license callout if the user does not have access', () => {
+      const wrapper = shallow(<OverviewContent {...props} />);
+
+      expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
+      expect(wrapper.find(GettingStartedSteps)).toHaveLength(0);
+      expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(0);
+      expect(wrapper.find(LicenseCallout)).toHaveLength(0);
+      expect(wrapper.find(SetupGuideCta)).toHaveLength(0);
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
index 2b643f78f20ba..3824a09a0bc1c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.tsx
@@ -38,7 +38,7 @@ import { SetupGuideCta } from '../setup_guide';
 
 import { TrialCallout } from '../trial_callout';
 
-interface ProductSelectorProps {
+interface OverviewContentProps {
   access: {
     hasAppSearchAccess?: boolean;
     hasWorkplaceSearchAccess?: boolean;
@@ -46,20 +46,20 @@ interface ProductSelectorProps {
   isWorkplaceSearchAdmin: boolean;
 }
 
-export const OverviewContent: React.FC<ProductSelectorProps> = ({ access }) => {
+export const OverviewContent: React.FC<OverviewContentProps> = ({ 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;
-
+  // TODO Refactor this and the tests according to the search indices permissions
   // 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 shouldShowEnterpriseSearchOverview =
+    !config.host || hasAppSearchAccess || hasWorkplaceSearchAccess;
 
-  const productCards = (
+  const enterpriseSearchOverview = (
     <>
+      <AddContentEmptyPrompt />
+      <EuiSpacer size="xxl" />
       <EuiFlexGroup>
         <EuiFlexItem>
           <GettingStartedSteps />
@@ -151,9 +151,7 @@ export const OverviewContent: React.FC<ProductSelectorProps> = ({ access }) => {
       <SendTelemetry action="viewed" metric="overview" />
       <TrialCallout />
       <EuiPageBody paddingSize="none">
-        <AddContentEmptyPrompt />
-        <EuiSpacer size="xxl" />
-        {shouldShowEnterpriseSearchCards ? productCards : insufficientAccessMessage}
+        {shouldShowEnterpriseSearchOverview ? enterpriseSearchOverview : insufficientAccessMessage}
         <Chat />
       </EuiPageBody>
     </EnterpriseSearchOverviewPageTemplate>