Engines Overview: simplify header

- now that the header/actions, chrome/telemetry, & empty state etc. are all DRY'd out by the template, there's no need for a separate header component
- we can simply dry out the header action, which will shortly be removed with the 7.14 launch

- note: for empty state changes: mostly indenting, the new template automatically creates a subdued panel for us in empty state so no need to include one manually

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useValues, useActions } from 'kea';
 
-import { EuiPageContent, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { EuiButtonTo } from '../../../../shared/react_router_helpers';
@@ -20,86 +20,72 @@ import { ENGINE_CREATION_PATH } from '../../../routes';
 
 import { SampleEngineCreationCta } from '../../sample_engine_creation_cta/sample_engine_creation_cta';
 
-import { EnginesOverviewHeader } from './header';
-
 export const EmptyState: React.FC = () => {
   const {
     myRole: { canManageEngines },
   } = useValues(AppLogic);
   const { sendAppSearchTelemetry } = useActions(TelemetryLogic);
 
-  return (
-    <>
-      <EnginesOverviewHeader />
-      <EuiPageContent color="subdued">
-        {canManageEngines ? (
-          <EuiEmptyPrompt
-            data-test-subj="AdminEmptyEnginesPrompt"
-            iconType={EngineIcon}
-            title={
-              <h2>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
-                  defaultMessage: 'Create your first engine',
-                })}
-              </h2>
-            }
-            titleSize="l"
-            body={
-              <p>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
-                  defaultMessage:
-                    'An App Search engine stores the documents for your search experience.',
-                })}
-              </p>
-            }
-            actions={
-              <>
-                <EuiButtonTo
-                  data-test-subj="EmptyStateCreateFirstEngineCta"
-                  fill
-                  to={ENGINE_CREATION_PATH}
-                  onClick={() =>
-                    sendAppSearchTelemetry({
-                      action: 'clicked',
-                      metric: 'create_first_engine_button',
-                    })
-                  }
-                >
-                  {i18n.translate(
-                    'xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta',
-                    { defaultMessage: 'Create an engine' }
-                  )}
-                </EuiButtonTo>
-                <EuiSpacer size="xxl" />
-                <SampleEngineCreationCta />
-              </>
-            }
-          />
-        ) : (
-          <EuiEmptyPrompt
-            data-test-subj="NonAdminEmptyEnginesPrompt"
-            iconType={EngineIcon}
-            title={
-              <h2>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
-                  defaultMessage: 'No engines available',
-                })}
-              </h2>
-            }
-            body={
-              <p>
-                {i18n.translate(
-                  'xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description',
-                  {
-                    defaultMessage:
-                      'Contact your App Search administrator to either create or grant you access to an engine.',
-                  }
-                )}
-              </p>
+  return canManageEngines ? (
+    <EuiEmptyPrompt
+      data-test-subj="AdminEmptyEnginesPrompt"
+      iconType={EngineIcon}
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
+            defaultMessage: 'Create your first engine',
+          })}
+        </h2>
+      }
+      titleSize="l"
+      body={
+        <p>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
+            defaultMessage: 'An App Search engine stores the documents for your search experience.',
+          })}
+        </p>
+      }
+      actions={
+        <>
+          <EuiButtonTo
+            data-test-subj="EmptyStateCreateFirstEngineCta"
+            fill
+            to={ENGINE_CREATION_PATH}
+            onClick={() =>
+              sendAppSearchTelemetry({
+                action: 'clicked',
+                metric: 'create_first_engine_button',
+              })
             }
-          />
-        )}
-      </EuiPageContent>
-    </>
+          >
+            {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta', {
+              defaultMessage: 'Create an engine',
+            })}
+          </EuiButtonTo>
+          <EuiSpacer size="xxl" />
+          <SampleEngineCreationCta />
+        </>
+      }
+    />
+  ) : (
+    <EuiEmptyPrompt
+      data-test-subj="NonAdminEmptyEnginesPrompt"
+      iconType={EngineIcon}
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
+            defaultMessage: 'No engines available',
+          })}
+        </h2>
+      }
+      body={
+        <p>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description', {
+            defaultMessage:
+              'Contact your App Search administrator to either create or grant you access to an engine.',
+          })}
+        </p>
+      }
+    />
   );
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/index.ts

@@ -5,6 +5,6 @@
  * 2.0.
  */
 
-export { EnginesOverviewHeader } from './header';
+export { LaunchAppSearchButton } from './launch_as_button';
 export { EmptyState } from './empty_state';
 export { EmptyMetaEnginesState } from './empty_meta_engines_state';

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx → x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.test.tsx

@@ -12,23 +12,11 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiPageHeader } from '@elastic/eui';
-
-import { EnginesOverviewHeader } from './';
-
-describe('EnginesOverviewHeader', () => {
-  const wrapper = shallow(<EnginesOverviewHeader />)
-    .find(EuiPageHeader)
-    .dive()
-    .children()
-    .dive();
-
-  it('renders', () => {
-    expect(wrapper.find('h1').text()).toEqual('Engines overview');
-  });
+import { LaunchAppSearchButton } from './';
 
+describe('LaunchAppSearchButton', () => {
   it('renders a launch app search button that sends telemetry on click', () => {
-    const button = wrapper.find('[data-test-subj="launchButton"]');
+    const button = shallow(<LaunchAppSearchButton />);
 
     expect(button.prop('href')).toBe('http://localhost:3002/as');
     expect(button.prop('isDisabled')).toBeFalsy();

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { useActions } from 'kea';
+
+import { EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { getAppSearchUrl } from '../../../../shared/enterprise_search_url';
+import { TelemetryLogic } from '../../../../shared/telemetry';
+
+export const LaunchAppSearchButton: React.FC = () => {
+  const { sendAppSearchTelemetry } = useActions(TelemetryLogic);
+
+  return (
+    // eslint-disable-next-line @elastic/eui/href-or-on-click
+    <EuiButton
+      size="s"
+      iconType="popout"
+      href={getAppSearchUrl()}
+      target="_blank"
+      onClick={() =>
+        sendAppSearchTelemetry({
+          action: 'clicked',
+          metric: 'header_launch_button',
+        })
+      }
+      data-test-subj="launchButton"
+    >
+      {i18n.translate('xpack.enterpriseSearch.appSearch.productCta', {
+        defaultMessage: 'Launch App Search',
+      })}
+    </EuiButton>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/constants.ts

@@ -11,6 +11,11 @@ export const ENGINES_TITLE = i18n.translate('xpack.enterpriseSearch.appSearch.en
   defaultMessage: 'Engines',
 });
 
+export const ENGINES_OVERVIEW_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.enginesOverview.title',
+  { defaultMessage: 'Engines overview' }
+);
+
 export const META_ENGINES_TITLE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.metaEngines.title',
   { defaultMessage: 'Meta Engines' }

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx

@@ -28,10 +28,11 @@ import { EngineIcon, MetaEngineIcon } from '../../icons';
 import { ENGINE_CREATION_PATH, META_ENGINE_CREATION_PATH } from '../../routes';
 import { AppSearchPageTemplate } from '../layout';
 
-import { EnginesOverviewHeader, EmptyState, EmptyMetaEnginesState } from './components';
+import { LaunchAppSearchButton, EmptyState, EmptyMetaEnginesState } from './components';
 import { EnginesTable } from './components/tables/engines_table';
 import { MetaEnginesTable } from './components/tables/meta_engines_table';
 import {
+  ENGINES_OVERVIEW_TITLE,
   CREATE_AN_ENGINE_BUTTON_LABEL,
   CREATE_A_META_ENGINE_BUTTON_LABEL,
   ENGINES_TITLE,
@@ -71,12 +72,14 @@ export const EnginesOverview: React.FC = () => {
     <AppSearchPageTemplate
       pageViewTelemetry="engines_overview"
       pageChrome={[ENGINES_TITLE]}
-      pageHeader={{ children: <EnginesOverviewHeader /> }}
+      pageHeader={{
+        pageTitle: ENGINES_OVERVIEW_TITLE,
+        rightSideItems: [<LaunchAppSearchButton />],
+      }}
       isLoading={dataLoading}
       isEmptyState={!engines.length}
       emptyState={<EmptyState />}
     >
-      <EnginesOverviewHeader />
       <EuiPanel hasBorder>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>