[App Search] Refactor EuiPageHeader components to use new props inste…

…ad of children (elastic#95454) * Update EuiPageHeaders with basic titles * Update engine creation views - meta engine - move to description + misc fix - non-heading EuiTitles that do not match the standalone UI * Update EuiPageHeaders with simpler actions * Update Documents page header + test reorg - move DocumentCreationButton tests to its own test block * Update EnginesOverviewHeader (+ refactors) - Switch from FormattedMessage to i18n to match rest of repo - Switch to eslint-disbable instead of doing a buttonProps workaround (this will get deleted anyway post-migration) * whoops
smith · Mar 26, 2021 · 6b59fe3 · 6b59fe3
1 parent 95e308a
commit 6b59fe3
Show file tree

Hide file tree

Showing 17 changed files with 143 additions and 199 deletions.
diff --git a/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
@@ -11,7 +11,6 @@ import { useActions, useValues } from 'kea';
 
 import {
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiTitle,
   EuiPageContentBody,
   EuiPanel,
@@ -55,13 +54,7 @@ export const Credentials: React.FC = () => {
   return (
     <>
       <SetPageChrome trail={[CREDENTIALS_TITLE]} />
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{CREDENTIALS_TITLE}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+      <EuiPageHeader pageTitle={CREDENTIALS_TITLE} />
       <EuiPageContentBody>
         {shouldShowCredentialsForm && <CredentialsFlyout />}
         <EuiPanel className="eui-textCenter">

diff --git a/...prise_search/public/applications/app_search/components/curations/views/curations.test.tsx b/...prise_search/public/applications/app_search/components/curations/views/curations.test.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 
 import { shallow, ReactWrapper } from 'enzyme';
 
-import { EuiBasicTable, EuiEmptyPrompt } from '@elastic/eui';
+import { EuiPageHeader, EuiBasicTable, EuiEmptyPrompt } from '@elastic/eui';
 
 import { Loading } from '../../../../shared/loading';
 
@@ -64,7 +64,7 @@ describe('Curations', () => {
   it('renders', () => {
     const wrapper = shallow(<Curations />);
 
-    expect(wrapper.find('h1').text()).toEqual('Curated results');
+    expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Curated results');
     expect(wrapper.find(CurationsTable)).toHaveLength(1);
   });
 

diff --git a/...enterprise_search/public/applications/app_search/components/curations/views/curations.tsx b/...enterprise_search/public/applications/app_search/components/curations/views/curations.tsx
@@ -11,9 +11,7 @@ import { useValues, useActions } from 'kea';
 
 import {
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiPageContent,
-  EuiTitle,
   EuiBasicTable,
   EuiBasicTableColumn,
   EuiEmptyPrompt,
@@ -47,18 +45,14 @@ export const Curations: React.FC = () => {
 
   return (
     <>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{CURATIONS_OVERVIEW_TITLE}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
+      <EuiPageHeader
+        pageTitle={CURATIONS_OVERVIEW_TITLE}
+        rightSideItems={[
           <EuiButtonTo to={generateEnginePath(ENGINE_CURATIONS_NEW_PATH)} fill>
             {CREATE_NEW_CURATION_TITLE}
-          </EuiButtonTo>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+          </EuiButtonTo>,
+        ]}
+      />
       <EuiPageContent>
         <FlashMessages />
         <CurationsTable />

diff --git a/...prise_search/public/applications/app_search/components/documents/document_detail.test.tsx b/...prise_search/public/applications/app_search/components/documents/document_detail.test.tsx
@@ -14,7 +14,7 @@ import { useParams } from 'react-router-dom';
 
 import { shallow } from 'enzyme';
 
-import { EuiPageContent, EuiBasicTable } from '@elastic/eui';
+import { EuiPageHeader, EuiPageContent, EuiBasicTable } from '@elastic/eui';
 
 import { Loading } from '../../../shared/loading';
 import { ResultFieldValue } from '../result';
@@ -102,7 +102,8 @@ describe('DocumentDetail', () => {
 
   it('will delete the document when the delete button is pressed', () => {
     const wrapper = shallow(<DocumentDetail engineBreadcrumb={['test']} />);
-    const button = wrapper.find('[data-test-subj="DeleteDocumentButton"]');
+    const header = wrapper.find(EuiPageHeader).dive().children().dive();
+    const button = header.find('[data-test-subj="DeleteDocumentButton"]');
 
     button.simulate('click');
 

diff --git a/...enterprise_search/public/applications/app_search/components/documents/document_detail.tsx b/...enterprise_search/public/applications/app_search/components/documents/document_detail.tsx
@@ -13,8 +13,6 @@ import { useActions, useValues } from 'kea';
 import {
   EuiButton,
   EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
   EuiPageContentBody,
   EuiPageContent,
   EuiBasicTable,
@@ -79,13 +77,9 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
   return (
     <>
       <SetPageChrome trail={[...engineBreadcrumb, DOCUMENTS_TITLE, documentTitle]} />
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{DOCUMENT_DETAIL_TITLE(documentTitle)}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
+      <EuiPageHeader
+        pageTitle={DOCUMENT_DETAIL_TITLE(documentTitle)}
+        rightSideItems={[
           <EuiButton
             color="danger"
             iconType="trash"
@@ -95,9 +89,9 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
             {i18n.translate('xpack.enterpriseSearch.appSearch.documentDetail.deleteButton', {
               defaultMessage: 'Delete',
             })}
-          </EuiButton>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+          </EuiButton>,
+        ]}
+      />
       <EuiPageContent>
         <EuiPageContentBody>
           <FlashMessages />

diff --git a/.../enterprise_search/public/applications/app_search/components/documents/documents.test.tsx b/.../enterprise_search/public/applications/app_search/components/documents/documents.test.tsx
@@ -9,7 +9,9 @@ import { setMockValues } from '../../../__mocks__/kea.mock';
 
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { EuiPageHeader } from '@elastic/eui';
 
 import { DocumentCreationButton } from './document_creation_button';
 import { SearchExperience } from './search_experience';
@@ -32,46 +34,61 @@ describe('Documents', () => {
     expect(wrapper.find(SearchExperience).exists()).toBe(true);
   });
 
-  it('renders a DocumentCreationButton if the user can manage engine documents', () => {
-    setMockValues({
-      ...values,
-      myRole: { canManageEngineDocuments: true },
+  describe('DocumentCreationButton', () => {
+    const getHeader = (wrapper: ShallowWrapper) =>
+      wrapper.find(EuiPageHeader).dive().children().dive();
+
+    it('renders a DocumentCreationButton if the user can manage engine documents', () => {
+      setMockValues({
+        ...values,
+        myRole: { canManageEngineDocuments: true },
+      });
+
+      const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+      expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(true);
     });
 
-    const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
-    expect(wrapper.find(DocumentCreationButton).exists()).toBe(true);
-  });
+    it('does not render a DocumentCreationButton if the user cannot manage engine documents', () => {
+      setMockValues({
+        ...values,
+        myRole: { canManageEngineDocuments: false },
+      });
 
-  describe('Meta Engines', () => {
-    it('renders a Meta Engines message if this is a meta engine', () => {
+      const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
+      expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(false);
+    });
+
+    it('does not render a DocumentCreationButton for meta engines even if the user can manage engine documents', () => {
       setMockValues({
         ...values,
+        myRole: { canManageEngineDocuments: true },
         isMetaEngine: true,
       });
 
       const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
-      expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(true);
+      expect(getHeader(wrapper).find(DocumentCreationButton).exists()).toBe(false);
     });
+  });
 
-    it('does not render a Meta Engines message if this is not a meta engine', () => {
+  describe('Meta Engines', () => {
+    it('renders a Meta Engines message if this is a meta engine', () => {
       setMockValues({
         ...values,
-        isMetaEngine: false,
+        isMetaEngine: true,
       });
 
       const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
-      expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(false);
+      expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(true);
     });
 
-    it('does not render a DocumentCreationButton even if the user can manage engine documents', () => {
+    it('does not render a Meta Engines message if this is not a meta engine', () => {
       setMockValues({
         ...values,
-        myRole: { canManageEngineDocuments: true },
-        isMetaEngine: true,
+        isMetaEngine: false,
       });
 
       const wrapper = shallow(<Documents engineBreadcrumb={['test']} />);
-      expect(wrapper.find(DocumentCreationButton).exists()).toBe(false);
+      expect(wrapper.find('[data-test-subj="MetaEnginesCallout"]').exists()).toBe(false);
     });
   });
 });
diff --git a/...ugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx b/...ugins/enterprise_search/public/applications/app_search/components/documents/documents.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiPageHeader, EuiPageHeaderSection, EuiTitle, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiPageHeader, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { FlashMessages } from '../../../shared/flash_messages';
@@ -33,18 +33,14 @@ export const Documents: React.FC<Props> = ({ engineBreadcrumb }) => {
   return (
     <>
       <SetPageChrome trail={[...engineBreadcrumb, DOCUMENTS_TITLE]} />
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{DOCUMENTS_TITLE}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        {myRole.canManageEngineDocuments && !isMetaEngine && (
-          <EuiPageHeaderSection>
-            <DocumentCreationButton />
-          </EuiPageHeaderSection>
-        )}
-      </EuiPageHeader>
+      <EuiPageHeader
+        pageTitle={DOCUMENTS_TITLE}
+        rightSideItems={
+          myRole.canManageEngineDocuments && !isMetaEngine
+            ? [<DocumentCreationButton />]
+            : undefined
+        }
+      />
       <FlashMessages />
       {isMetaEngine && (
         <>

diff --git a/...rise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx b/...rise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
@@ -18,9 +18,7 @@ import {
   EuiSelect,
   EuiPageBody,
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiSpacer,
-  EuiText,
   EuiTitle,
   EuiButton,
   EuiPanel,
@@ -49,13 +47,7 @@ export const EngineCreation: React.FC = () => {
   return (
     <div data-test-subj="EngineCreation">
       <SetPageChrome trail={[ENGINE_CREATION_TITLE]} />
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{ENGINE_CREATION_TITLE}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+      <EuiPageHeader pageTitle={ENGINE_CREATION_TITLE} />
       <EuiPageBody>
         <FlashMessages />
         <EuiPanel>
@@ -68,7 +60,7 @@ export const EngineCreation: React.FC = () => {
               }}
             >
               <EuiTitle>
-                <EuiText>{ENGINE_CREATION_FORM_TITLE}</EuiText>
+                <h2>{ENGINE_CREATION_FORM_TITLE}</h2>
               </EuiTitle>
               <EuiSpacer />
               <EuiFlexGroup>

diff --git a/.../public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx b/.../public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { shallow, ShallowWrapper } from 'enzyme';
 
-import { EuiButton } from '@elastic/eui';
+import { EuiPageHeader, EuiButton } from '@elastic/eui';
 
 import { docLinks } from '../../../shared/doc_links';
 
@@ -25,11 +25,12 @@ describe('EmptyEngineOverview', () => {
   });
 
   it('renders', () => {
-    expect(wrapper.find('h1').text()).toEqual('Engine setup');
+    expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Engine setup');
   });
 
   it('renders a documentation link', () => {
-    expect(wrapper.find(EuiButton).prop('href')).toEqual(`${docLinks.appSearchBase}/index.html`);
+    const header = wrapper.find(EuiPageHeader).dive().children().dive();
+    expect(header.find(EuiButton).prop('href')).toEqual(`${docLinks.appSearchBase}/index.html`);
   });
 
   it('renders document creation components', () => {

diff --git a/...earch/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx b/...earch/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx
@@ -7,13 +7,7 @@
 
 import React from 'react';
 
-import {
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiPageContentBody,
-  EuiTitle,
-  EuiButton,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiPageContentBody, EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { FlashMessages } from '../../../shared/flash_messages';
@@ -23,25 +17,20 @@ import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_cre
 export const EmptyEngineOverview: React.FC = () => {
   return (
     <>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>
-              {i18n.translate('xpack.enterpriseSearch.appSearch.engine.overview.empty.heading', {
-                defaultMessage: 'Engine setup',
-              })}
-            </h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
+      <EuiPageHeader
+        pageTitle={i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.overview.empty.heading',
+          { defaultMessage: 'Engine setup' }
+        )}
+        rightSideItems={[
           <EuiButton href={`${DOCS_PREFIX}/index.html`} target="_blank">
             {i18n.translate(
               'xpack.enterpriseSearch.appSearch.engine.overview.empty.headingAction',
               { defaultMessage: 'View documentation' }
             )}
-          </EuiButton>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+          </EuiButton>,
+        ]}
+      />
       <FlashMessages />
       <EuiPageContentBody>
         <DocumentCreationButtons />

diff --git a/...ublic/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx b/...ublic/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx
@@ -11,13 +11,15 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
+import { EuiPageHeader } from '@elastic/eui';
+
 import { UnavailablePrompt, TotalStats, TotalCharts, RecentApiLogs } from './components';
 import { EngineOverviewMetrics } from './engine_overview_metrics';
 
 describe('EngineOverviewMetrics', () => {
   it('renders', () => {
     const wrapper = shallow(<EngineOverviewMetrics />);
-    expect(wrapper.find('h1').text()).toEqual('Engine overview');
+    expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Engine overview');
   });
 
   it('renders an unavailable prompt if engine data is still indexing', () => {