[Enterprise Search] Revert Overview design changes (#128039)

x-pack/plugins/enterprise_search/README.md

@@ -6,13 +6,13 @@ This plugin provides Kibana user interfaces for managing the Enterprise Search s
 
 ### App Search
 
-<img src="./public/applications/enterprise_search/assets/app_search.png" width="400" height="255">
+<img src="./public/applications/enterprise_search_overview/assets/app_search.png" width="400" height="255">
 
 Add rich, relevant search to your apps and websites. https://www.elastic.co/app-search/
 
 ### Workplace Search
 
-<img src="./public/applications/enterprise_search/assets/workplace_search.png" width="400" height="255">
+<img src="./public/applications/enterprise_search_overview/assets/workplace_search.png" width="400" height="255">
 
 Unify all your team's content into a personalized search experience. https://www.elastic.co/workplace-search/
 

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

@@ -23,13 +23,13 @@ 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 size="s">
+          <EuiText>
             <h3>{PRODUCT_SELECTOR_CALLOUT_HEADING}</h3>
           </EuiText>
-          <EuiText size="xs">{LICENSE_CALLOUT_BODY}</EuiText>
+          <EuiText size="s">{LICENSE_CALLOUT_BODY}</EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={1} />
         <EuiFlexItem grow={false}>

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

@@ -24,10 +24,11 @@ describe('ProductCard', () => {
   });
 
   it('renders an App Search card', () => {
-    const wrapper = shallow(<ProductCard product={APP_SEARCH_PLUGIN} />);
+    const wrapper = shallow(<ProductCard product={APP_SEARCH_PLUGIN} image="as.jpg" />);
     const card = wrapper.find(EuiCard).dive().shallow();
 
     expect(card.find('h2').text()).toEqual('Elastic App Search');
+    expect(card.find('.productCard__image').prop('src')).toEqual('as.jpg');
 
     const button = card.find(EuiButtonTo);
     expect(button.prop('to')).toEqual('/app/enterprise_search/app_search');
@@ -41,10 +42,11 @@ describe('ProductCard', () => {
   });
 
   it('renders a Workplace Search card', () => {
-    const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} />);
+    const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image="ws.jpg" />);
     const card = wrapper.find(EuiCard).dive().shallow();
 
     expect(card.find('h2').text()).toEqual('Elastic Workplace Search');
+    expect(card.find('.productCard__image').prop('src')).toEqual('ws.jpg');
 
     const button = card.find(EuiButtonTo);
     expect(button.prop('to')).toEqual('/app/enterprise_search/workplace_search');
@@ -60,7 +62,7 @@ describe('ProductCard', () => {
   it('renders correct button text when host not present', () => {
     setMockValues({ config: { host: '' } });
 
-    const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} />);
+    const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image="ws.jpg" />);
     const card = wrapper.find(EuiCard).dive().shallow();
     const button = card.find(EuiButtonTo);
 

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

@@ -27,10 +27,11 @@ interface ProductCardProps {
     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);
 
@@ -53,19 +54,22 @@ export const ProductCard: React.FC<ProductCardProps> = ({ product, url }) => {
   return (
     <EuiCard
       className="productCard"
-      textAlign="left"
       titleElement="h2"
-      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={
         <EuiButtonTo
+          fill
           to={url || product.URL}
-          color="success"
           shouldNotCreateHref
           onClick={() =>
             sendEnterpriseSearchTelemetry({

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

@@ -91,10 +91,10 @@ describe('ProductSelector', () => {
       expect(wrapper.find(ProductCard).prop('product').ID).toEqual('appSearch');
     });
 
-    it('renders empty prompts and no cards or license callout if the user does not have access', () => {
+    it('renders empty prompt and no cards or license callout if the user does not have access', () => {
       const wrapper = shallow(<ProductSelector {...props} />);
 
-      expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(2);
+      expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
       expect(wrapper.find(ProductCard)).toHaveLength(0);
       expect(wrapper.find(LicenseCallout)).toHaveLength(0);
     });

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

@@ -22,7 +22,11 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { KibanaPageTemplateSolutionNavAvatar } from '../../../../../../../../src/plugins/kibana_react/public';
+import {
+  KibanaPageTemplate,
+  KibanaPageTemplateSolutionNavAvatar,
+  NO_DATA_PAGE_TEMPLATE_PROPS,
+} from '../../../../../../../../src/plugins/kibana_react/public';
 import { Chat } from '../../../../../../cloud/public';
 import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { docLinks } from '../../../shared/doc_links';
@@ -30,17 +34,14 @@ 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 AppSearchImage from '../../assets/app_search.png';
+import WorkplaceSearchImage from '../../assets/workplace_search.png';
 import { LicenseCallout } from '../license_callout';
 import { ProductCard } from '../product_card';
 import { SetupGuideCta } from '../setup_guide';
 import { TrialCallout } from '../trial_callout';
 
-import lockLightIllustration from './lock_light.svg';
-import searchIndicesIllustration from './search_indices.svg';
-
-// The EUI EmptyState component has a max-width of 850px, so we need to ensure that the layout looks as expected.
-const MAX_WIDTH = 850;
+import illustration from './lock_light.svg';
 
 interface ProductSelectorProps {
   access: {
@@ -74,12 +75,16 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
       <EuiFlexGroup justifyContent="center" gutterSize="xl">
         {shouldShowAppSearchCard && (
           <EuiFlexItem grow={false}>
-            <ProductCard product={APP_SEARCH_PLUGIN} />
+            <ProductCard product={APP_SEARCH_PLUGIN} image={AppSearchImage} />
           </EuiFlexItem>
         )}
         {shouldShowWorkplaceSearchCard && (
           <EuiFlexItem grow={false}>
-            <ProductCard product={WORKPLACE_SEARCH_PLUGIN} url={WORKPLACE_SEARCH_URL} />
+            <ProductCard
+              product={WORKPLACE_SEARCH_PLUGIN}
+              url={WORKPLACE_SEARCH_URL}
+              image={WorkplaceSearchImage}
+            />
           </EuiFlexItem>
         )}
       </EuiFlexGroup>
@@ -92,18 +97,7 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
 
   const insufficientAccessMessage = (
     <EuiEmptyPrompt
-      icon={
-        <EuiImage
-          size="fullWidth"
-          src={lockLightIllustration}
-          alt={i18n.translate(
-            'xpack.enterpriseSearch.overview.insufficientPermissions.image.altText',
-            {
-              defaultMessage: 'Insufficient permissions illustration',
-            }
-          )}
-        />
-      }
+      icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
       title={
         <h2>
           {i18n.translate('xpack.enterpriseSearch.overview.insufficientPermissionsTitle', {
@@ -152,12 +146,7 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
     />
   );
   return (
-    <EnterpriseSearchOverviewPageTemplate
-      pageChrome={[]}
-      pageViewTelemetry="Overview"
-      isLoading={false}
-      restrictWidth={MAX_WIDTH}
-    >
+    <KibanaPageTemplate {...NO_DATA_PAGE_TEMPLATE_PROPS}>
       <SetPageChrome />
       <SendTelemetry action="viewed" metric="overview" />
       <TrialCallout />
@@ -167,7 +156,9 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
           iconType="logoEnterpriseSearch"
           size="xxl"
         />
+
         <EuiSpacer />
+
         <h1>
           {i18n.translate('xpack.enterpriseSearch.overview.heading', {
             defaultMessage: 'Welcome to Elastic Enterprise Search',
@@ -184,62 +175,8 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({
         </p>
       </EuiText>
       <EuiSpacer size="xxl" />
-      <EuiEmptyPrompt
-        title={
-          <h2>
-            {i18n.translate('xpack.enterpriseSearch.overview.emptyState.heading', {
-              defaultMessage: 'Create your first search index',
-            })}
-          </h2>
-        }
-        layout="horizontal"
-        color="plain"
-        icon={
-          <EuiImage
-            size="fullWidth"
-            src={searchIndicesIllustration}
-            alt={i18n.translate('xpack.enterpriseSearch.overview.searchIndices.image.altText', {
-              defaultMessage: 'Search indices illustration',
-            })}
-          />
-        }
-        body={
-          <p>
-            {i18n.translate('xpack.enterpriseSearch.emptyState.description', {
-              defaultMessage:
-                'Use Enterprise Search to build search experiences for all your content. Crawl your websites, connect to a third party, or connect to an existing Elasticsearch index.',
-            })}
-          </p>
-        }
-        actions={
-          <EuiButton color="primary" fill>
-            {i18n.translate('xpack.enterpriseSearch.overview.emptyState.buttonTitle', {
-              defaultMessage: 'Create search index',
-            })}
-          </EuiButton>
-        }
-        footer={
-          <>
-            <EuiTitle size="xxs">
-              <span>
-                {i18n.translate('xpack.enterpriseSearch.overview.emptyState.footerTextTitle', {
-                  defaultMessage: 'Want to learn more?',
-                })}
-              </span>
-            </EuiTitle>
-            &nbsp;
-            {/* TODO: Needs link to docs */}
-            <EuiLink href="#" target="_blank">
-              {i18n.translate('xpack.enterpriseSearch.overview.emptyState.footerLinkTitle', {
-                defaultMessage: 'Read the docs',
-              })}
-            </EuiLink>
-          </>
-        }
-      />
-      <EuiSpacer size="xxl" />
       {shouldShowEnterpriseSearchCards ? productCards : insufficientAccessMessage}
       <Chat />
-    </EnterpriseSearchOverviewPageTemplate>
+    </KibanaPageTemplate>
   );
 };

x-pack/plugins/enterprise_search/public/applications/shared/licensing/manage_license_button.tsx

@@ -21,13 +21,7 @@ export const ManageLicenseButton: React.FC<EuiButtonProps> = (props) => {
   const { canManageLicense } = useValues(LicensingLogic);
 
   return canManageLicense ? (
-    <EuiButtonTo
-      {...props}
-      color="primary"
-      size="s"
-      to="/app/management/stack/license_management"
-      shouldNotCreateHref
-    >
+    <EuiButtonTo {...props} to="/app/management/stack/license_management" shouldNotCreateHref>
       {i18n.translate('xpack.enterpriseSearch.licenseManagementLink', {
         defaultMessage: 'Manage your license',
       })}