[Enterprise Search] Consistent spacing fixes

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/authentication_panel/authentication_panel.tsx

@@ -9,10 +9,12 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
+import { PageIntroduction } from '../../../../../../shared/page_introduction/page_introduction';
+
 import { AuthenticationPanelDeleteConfirmationModal } from './auth_panel_delete_confirm_modal';
 import { AuthenticationPanelActions } from './authentication_panel_actions';
 import { AuthenticationPanelEditContent } from './authentication_panel_edit_content';
@@ -27,28 +29,27 @@ export const AuthenticationPanel: React.FC = () => {
   return (
     <>
       <div className="authenticationPanel">
-        <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
+        <PageIntroduction
+          actions={[<AuthenticationPanelActions />]}
+          description={
+            <p>
+              <FormattedMessage
+                id="xpack.enterpriseSearch.crawler.authenticationPanel.description"
+                defaultMessage="Setup authentication to enable crawling protected content for this domain."
+              />
+            </p>
+          }
+          title={
             <EuiTitle size="s">
               <h2>
                 {i18n.translate('xpack.enterpriseSearch.crawler.authenticationPanel.title', {
                   defaultMessage: 'Authentication',
                 })}
               </h2>
             </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <AuthenticationPanelActions />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiText size="s" color="subdued">
-          <p>
-            <FormattedMessage
-              id="xpack.enterpriseSearch.crawler.authenticationPanel.description"
-              defaultMessage="Setup authentication to enable crawling protected content for this domain."
-            />
-          </p>
-        </EuiText>
+          }
+        />
+        <EuiSpacer size="l" />
         {isEditing ? <AuthenticationPanelEditContent /> : <AuthenticationPanelViewContent />}
       </div>
       {isModalVisible && <AuthenticationPanelDeleteConfirmationModal />}

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/crawl_rules_table.test.tsx

@@ -30,6 +30,7 @@ describe('CrawlRulesTable', () => {
     crawlRules,
     domainId: '6113e1407a2f2e6f42489794',
     indexName,
+    title: 'Crawl rules',
   };
   beforeEach(() => {
     jest.clearAllMocks();

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/crawl_rules_table.tsx

@@ -18,6 +18,7 @@ import {
   EuiLink,
   EuiSelect,
   EuiText,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -39,6 +40,7 @@ export interface CrawlRulesTableProps {
   description?: React.ReactNode;
   domainId: string;
   indexName: string;
+  title?: React.ReactNode;
 }
 
 export const getReadableCrawlerRule = (rule: CrawlerRules) => {
@@ -99,17 +101,14 @@ const DEFAULT_DESCRIPTION = (
   <p>
     <FormattedMessage
       id="xpack.enterpriseSearch.crawler.crawlRulesTable.description"
-      defaultMessage="Create a crawl rule to include or exclude pages whose URL matches the rule. Rules run in sequential order, and each URL is evaluated according to the first match. {link}"
-      values={{
-        link: (
-          <EuiLink href={docLinks.crawlerManaging} target="_blank" external>
-            {i18n.translate('xpack.enterpriseSearch.crawler.crawlRulesTable.descriptionLinkText', {
-              defaultMessage: 'Learn more about crawl rules',
-            })}
-          </EuiLink>
-        ),
-      }}
+      defaultMessage="Create a crawl rule to include or exclude pages whose URL matches the rule. Rules run in sequential order, and each URL is evaluated according to the first match."
     />
+    <EuiSpacer size="s" />
+    <EuiLink href={docLinks.crawlerManaging} target="_blank" external>
+      {i18n.translate('xpack.enterpriseSearch.crawler.crawlRulesTable.descriptionLinkText', {
+        defaultMessage: 'Learn more about crawl rules',
+      })}
+    </EuiLink>
   </p>
 );
 
@@ -119,6 +118,7 @@ export const CrawlRulesTable: React.FC<CrawlRulesTableProps> = ({
   indexName,
   crawlRules,
   defaultCrawlRule,
+  title,
 }) => {
   const { updateCrawlRules } = useActions(CrawlerDomainDetailLogic);
 
@@ -251,7 +251,7 @@ export const CrawlRulesTable: React.FC<CrawlRulesTableProps> = ({
         updateCrawlRules(newCrawlRules as CrawlRule[]);
         clearFlashMessages();
       }}
-      title=""
+      title={title || ''}
       uneditableItems={defaultCrawlRule ? [defaultCrawlRule] : undefined}
       canRemoveLastItem
     />

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/crawler_domain_detail_tabs.tsx

@@ -43,14 +43,20 @@ export const CrawlerDomainDetailTabs: React.FC<CrawlerDomainDetailTabsProps> = (
       content: (
         <>
           <EuiSpacer />
-          <EuiTitle size="s">
-            <h2>
-              {i18n.translate('xpack.enterpriseSearch.crawler.entryPointsTable.title', {
-                defaultMessage: 'Entry points',
-              })}
-            </h2>
-          </EuiTitle>
-          <EntryPointsTable domain={domain} indexName={indexName} items={domain.entryPoints} />
+          <EntryPointsTable
+            domain={domain}
+            indexName={indexName}
+            items={domain.entryPoints}
+            title={
+              <EuiTitle size="s">
+                <h2>
+                  {i18n.translate('xpack.enterpriseSearch.crawler.entryPointsTable.title', {
+                    defaultMessage: 'Entry points',
+                  })}
+                </h2>
+              </EuiTitle>
+            }
+          />
         </>
       ),
       id: CrawlerDomainTabId.ENTRY_POINTS,
@@ -74,14 +80,20 @@ export const CrawlerDomainDetailTabs: React.FC<CrawlerDomainDetailTabsProps> = (
       content: (
         <>
           <EuiSpacer />
-          <EuiTitle size="s">
-            <h2>
-              {i18n.translate('xpack.enterpriseSearch.crawler.sitemapsTable.title', {
-                defaultMessage: 'Sitemaps',
-              })}
-            </h2>
-          </EuiTitle>
-          <SitemapsTable domain={domain} indexName={indexName} items={domain.sitemaps} />
+          <SitemapsTable
+            domain={domain}
+            indexName={indexName}
+            items={domain.sitemaps}
+            title={
+              <EuiTitle size="s">
+                <h2>
+                  {i18n.translate('xpack.enterpriseSearch.crawler.sitemapsTable.title', {
+                    defaultMessage: 'Sitemaps',
+                  })}
+                </h2>
+              </EuiTitle>
+            }
+          />
         </>
       ),
       id: CrawlerDomainTabId.SITE_MAPS,
@@ -93,18 +105,20 @@ export const CrawlerDomainDetailTabs: React.FC<CrawlerDomainDetailTabsProps> = (
       content: (
         <>
           <EuiSpacer />
-          <EuiTitle size="s">
-            <h2>
-              {i18n.translate('xpack.enterpriseSearch.crawler.crawlRulesTable.title', {
-                defaultMessage: 'Crawl rules',
-              })}
-            </h2>
-          </EuiTitle>
           <CrawlRulesTable
             domainId={domain.id}
             indexName={indexName}
             crawlRules={domain.crawlRules}
             defaultCrawlRule={domain.defaultCrawlRule}
+            title={
+              <EuiTitle size="s">
+                <h2>
+                  {i18n.translate('xpack.enterpriseSearch.crawler.crawlRulesTable.title', {
+                    defaultMessage: 'Crawl rules',
+                  })}
+                </h2>
+              </EuiTitle>
+            }
           />
         </>
       ),

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/deduplication_panel/deduplication_panel.test.tsx

@@ -14,7 +14,6 @@ import { shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 
 import {
-  EuiButton,
   EuiButtonEmpty,
   EuiContextMenuItem,
   EuiPopover,
@@ -26,6 +25,8 @@ import {
 
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 
+import { PageIntroduction } from '../../../../../../shared/page_introduction/page_introduction';
+
 import { rerender } from '../../../../../../test_helpers';
 
 import { DeduplicationPanel } from './deduplication_panel';
@@ -61,8 +62,11 @@ describe('DeduplicationPanel', () => {
 
   it('contains a button to reset to defaults', () => {
     const wrapper = shallow(<DeduplicationPanel />);
+    const dedupeButton = shallow(
+      <div>{wrapper.find(PageIntroduction).prop('actions')}</div>
+    ).children();
 
-    wrapper.find('EuiFlexGroup').first().dive().find(EuiButton).simulate('click');
+    dedupeButton.simulate('click');
 
     expect(MOCK_ACTIONS.submitDeduplicationUpdate).toHaveBeenCalledWith({
       fields: [],

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/deduplication_panel/deduplication_panel.tsx

@@ -21,7 +21,6 @@ import {
   EuiSelectable,
   EuiSpacer,
   EuiSwitch,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 
@@ -31,6 +30,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import { docLinks } from '../../../../../../shared/doc_links';
+import { PageIntroduction } from '../../../../../../shared/page_introduction/page_introduction';
 import { CrawlerDomainDetailLogic } from '../crawler_domain_detail_logic';
 
 import { getCheckedOptionLabels, getSelectableOptions } from './utils';
@@ -55,17 +55,17 @@ export const DeduplicationPanel: React.FC = () => {
   return (
     <div className="deduplicationPanel">
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
+      <PageIntroduction
+        title={
           <EuiTitle size="s">
             <h2>
               {i18n.translate('xpack.enterpriseSearch.crawler.deduplicationPanel.title', {
                 defaultMessage: 'Duplicate document handling',
               })}
             </h2>
           </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        }
+        actions={
           <EuiButton
             data-telemetry-id="entSearchContent-crawler-domainDetail-deduplication-reset"
             color="warning"
@@ -81,31 +81,25 @@ export const DeduplicationPanel: React.FC = () => {
               }
             )}
           </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
-      <EuiText size="s" color="subdued">
-        <p>
-          <FormattedMessage
-            id="xpack.enterpriseSearch.crawler.deduplicationPanel.description"
-            defaultMessage="The web crawler only indexes unique pages. Choose which fields the crawler should use when
+        }
+        description={
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.crawler.deduplicationPanel.description"
+              defaultMessage="The web crawler only indexes unique pages. Choose which fields the crawler should use when
           considering which pages are duplicates. Deselect all schema fields to allow duplicate
-          documents on this domain. {documentationLink}."
-            values={{
-              documentationLink: (
-                <EuiLink href={docLinks.crawlerManaging} target="_blank" external>
-                  {i18n.translate(
-                    'xpack.enterpriseSearch.crawler.deduplicationPanel.learnMoreMessage',
-                    {
-                      defaultMessage: 'Learn more about content hashing',
-                    }
-                  )}
-                </EuiLink>
-              ),
-            }}
-          />
-        </p>
-      </EuiText>
+          documents on this domain."
+            />
+          </p>
+        }
+        links={
+          <EuiLink href={docLinks.crawlerManaging} external>
+            {i18n.translate('xpack.enterpriseSearch.crawler.deduplicationPanel.learnMoreMessage', {
+              defaultMessage: 'Learn more about content hashing',
+            })}
+          </EuiLink>
+        }
+      />
       <EuiSpacer />
       <EuiSwitch
         data-telemetry-id="entSearchContent-crawler-domainDetail-deduplication-preventDuplicates"

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/entry_points_table.tsx

@@ -27,9 +27,15 @@ export interface EntryPointsTableProps {
   domain: CrawlerDomain;
   indexName: string;
   items: EntryPoint[];
+  title?: string | React.ReactNode;
 }
 
-export const EntryPointsTable: React.FC<EntryPointsTableProps> = ({ domain, indexName, items }) => {
+export const EntryPointsTable: React.FC<EntryPointsTableProps> = ({
+  domain,
+  indexName,
+  items,
+  title,
+}) => {
   const { onAdd, onDelete, onUpdate } = useActions(EntryPointsTableLogic);
   const field = 'value';
 
@@ -76,7 +82,8 @@ export const EntryPointsTable: React.FC<EntryPointsTableProps> = ({ domain, inde
           {i18n.translate('xpack.enterpriseSearch.crawler.entryPointsTable.description', {
             defaultMessage:
               'Include the most important URLs for your website here. Entry point URLs will be the first pages to be indexed and processed for links to other pages.',
-          })}{' '}
+          })}
+          <EuiSpacer size="s" />
           <EuiLink href={docLinks.crawlerManaging} target="_blank" external>
             {i18n.translate('xpack.enterpriseSearch.crawler.entryPointsTable.learnMoreLinkText', {
               defaultMessage: 'Learn more about entry points.',
@@ -130,7 +137,7 @@ export const EntryPointsTable: React.FC<EntryPointsTableProps> = ({ domain, inde
       onAdd={onAdd}
       onDelete={onDelete}
       onUpdate={onUpdate}
-      title=""
+      title={title}
       disableReordering
     />
   );