[Enterprise Search] Updated product_selector to match new No Data screens

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

@@ -23,7 +23,7 @@ export const LicenseCallout: React.FC = () => {
   if (hasPlatinumLicense && !isTrial) return null;
 
   return (
-    <EuiPanel hasShadow={false} hasBorder className="productCard" paddingSize="l">
+    <EuiPanel hasBorder color="transparent" paddingSize="l">
       <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={7}>
           <EuiText>

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

@@ -6,54 +6,10 @@
  */
 
 .productCard {
-  margin: $euiSizeS;
-
   &__imageContainer {
-    max-height: 115px;
-    overflow: hidden;
-    background-color: #0076CC;
-
-    @include euiBreakpoint('s', 'm', 'l', 'xl') {
-      max-height: none;
-    }
-  }
-
-  &__image {
-    width: 100%;
-    height: auto;
-  }
-
-  .euiCard__content {
-    max-width: 350px;
-    margin-top: $euiSizeL;
-
-    @include euiBreakpoint('s', 'm', 'l', 'xl') {
-      margin-top: $euiSizeXL;
-    }
-  }
-
-  .euiCard__title {
-    margin-bottom: $euiSizeM;
-    font-weight: $euiFontWeightBold;
-
-    @include euiBreakpoint('s', 'm', 'l', 'xl') {
-      margin-bottom: $euiSizeL;
-      font-size: $euiSizeL;
-    }
-  }
-
-  .euiCard__description {
-    font-weight: $euiFontWeightMedium;
-    color: $euiColorMediumShade;
-    margin-bottom: $euiSize;
-  }
-
-  .euiCard__footer {
-    margin-bottom: $euiSizeS;
-
-    @include euiBreakpoint('s', 'm', 'l', 'xl') {
-      margin-bottom: $euiSizeM;
-      font-size: $euiSizeL;
+    @include euiBreakpoint('xs') {
+      max-height: 115px;
+      overflow: hidden;
     }
   }
 }

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

@@ -11,8 +11,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiPage } from '@elastic/eui';
-
 import { LicenseCallout } from '../license_callout';
 import { ProductCard } from '../product_card';
 import { SetupGuideCta } from '../setup_guide';
@@ -25,7 +23,6 @@ describe('ProductSelector', () => {
     setMockValues({ config: { host: '' } });
     const wrapper = shallow(<ProductSelector access={{}} />);
 
-    expect(wrapper.find(EuiPage).hasClass('enterpriseSearchOverview')).toBe(true);
     expect(wrapper.find(ProductCard)).toHaveLength(2);
     expect(wrapper.find(SetupGuideCta)).toHaveLength(1);
     expect(wrapper.find(LicenseCallout)).toHaveLength(0);

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

@@ -9,20 +9,14 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiPageContentBody,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTitle,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import {
+  KibanaPageTemplate,
+  KibanaPageTemplateSolutionNavAvatar,
+  NO_DATA_PAGE_TEMPLATE_PROPS,
+} from '../../../../../../../../src/plugins/kibana_react/public';
 import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { KibanaLogic } from '../../../shared/kibana';
 import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
@@ -51,52 +45,53 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({ access }) => {
   const shouldShowWorkplaceSearchCard = !config.host || hasWorkplaceSearchAccess;
 
   return (
-    <EuiPage restrictWidth className="enterpriseSearchOverview">
+    <KibanaPageTemplate {...NO_DATA_PAGE_TEMPLATE_PROPS}>
       <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" />
+
+      <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} image={WorkplaceSearchImage} />
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+
+      <EuiSpacer size="xxl" />
 
-      <EuiPageBody>
-        <TrialCallout />
-        <EuiPageHeader>
-          <EuiPageHeaderSection className="enterpriseSearchOverview__header">
-            <EuiTitle size="l">
-              <h1>
-                {i18n.translate('xpack.enterpriseSearch.overview.heading', {
-                  defaultMessage: 'Welcome to Elastic Enterprise Search',
-                })}
-              </h1>
-            </EuiTitle>
-            <EuiSpacer />
-            <EuiText>
-              <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>
-          </EuiPageHeaderSection>
-        </EuiPageHeader>
-        <EuiPageContentBody>
-          <EuiFlexGroup justifyContent="center" gutterSize="xl">
-            {shouldShowAppSearchCard && (
-              <EuiFlexItem grow={false} className="enterpriseSearchOverview__card">
-                <ProductCard product={APP_SEARCH_PLUGIN} image={AppSearchImage} />
-              </EuiFlexItem>
-            )}
-            {shouldShowWorkplaceSearchCard && (
-              <EuiFlexItem grow={false} className="enterpriseSearchOverview__card">
-                <ProductCard product={WORKPLACE_SEARCH_PLUGIN} image={WorkplaceSearchImage} />
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-          <EuiSpacer size="xxl" />
-          {config.host ? <LicenseCallout /> : <SetupGuideCta />}
-        </EuiPageContentBody>
-      </EuiPageBody>
-    </EuiPage>
+      {config.host ? <LicenseCallout /> : <SetupGuideCta />}
+    </KibanaPageTemplate>
   );
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/setup_guide/setup_guide_cta.scss

@@ -6,20 +6,7 @@
  */
 
 .enterpriseSearchSetupCta {
-  margin: $euiSize auto $euiSizeXL;
-
-  // Clickable EuiPanel override - line panel up with product cards
-  &.euiPanel--isClickable {
-    width: calc(100% - #{$euiSize});
-  }
-
-  &__text {
-    max-width: $euiSize * 40;
-  }
-
   &__image {
-    display: block;
-    max-width: 100%;
     width: $euiSize * 10;
     margin: 0 auto;
 

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

@@ -16,6 +16,6 @@ describe('SetupGuideCta', () => {
     const wrapper = shallow(<SetupGuideCta />);
 
     expect(wrapper.find('.enterpriseSearchSetupCta')).toHaveLength(1);
-    expect(wrapper.find('img')).toHaveLength(1);
+    expect(wrapper.find('EuiImage')).toHaveLength(1);
   });
 });

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiImage } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { EuiPanelTo } from '../../../shared/react_router_helpers';
@@ -22,9 +22,11 @@ export const SetupGuideCta: React.FC = () => (
     paddingSize="l"
     className="enterpriseSearchSetupCta"
     data-test-subj="setupGuideLink"
+    hasBorder
+    color="transparent"
   >
     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-      <EuiFlexItem className="enterpriseSearchSetupCta__text">
+      <EuiFlexItem>
         <EuiTitle size="s">
           <h2>{PRODUCT_SELECTOR_CALLOUT_HEADING}</h2>
         </EuiTitle>
@@ -36,7 +38,7 @@ export const SetupGuideCta: React.FC = () => (
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <img src={CtaImage} alt="" className="enterpriseSearchSetupCta__image" />
+        <EuiImage src={CtaImage} alt="" className="enterpriseSearchSetupCta__image" />
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiPanelTo>

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

@@ -19,8 +19,6 @@ import { ProductSelector } from './components/product_selector';
 import { SetupGuide } from './components/setup_guide';
 import { ROOT_PATH, SETUP_GUIDE_PATH } from './routes';
 
-import './index.scss';
-
 export const EnterpriseSearch: React.FC<InitialAppData> = ({ access = {} }) => {
   const { errorConnecting } = useValues(HttpLogic);
   const { config } = useValues(KibanaLogic);

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

@@ -64,7 +64,7 @@ describe('renderApp', () => {
 
     it('renders EnterpriseSearch', () => {
       mount(EnterpriseSearch);
-      expect(mockContainer.querySelector('.enterpriseSearchOverview')).not.toBeNull();
+      expect(mockContainer.querySelector('.kbnPageTemplate')).not.toBeNull();
     });
 
     it('renders AppSearch', () => {