From 0e3553640a89b4a3b56884a8c0e368141cd38eca Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 15 Jun 2021 16:33:41 +0200
Subject: [PATCH] Convert AppServices management pages to KibanaPageTemplate
 (#101779)

---
 .../create_index_pattern_wizard.test.tsx.snap | 344 ++++-----
 .../header/__snapshots__/header.test.tsx.snap | 711 +++++++++++-------
 .../components/header/header.tsx              |  17 +-
 .../create_index_pattern_wizard.tsx           |  25 +-
 .../create_edit_field/create_edit_field.tsx   |  38 +-
 .../edit_index_pattern/edit_index_pattern.tsx |  43 +-
 .../index_header/index_header.tsx             |  76 +-
 .../empty_index_pattern_prompt.test.tsx.snap  |   2 +
 .../empty_index_pattern_prompt.tsx            |   2 +
 .../__snapshots__/empty_state.test.tsx.snap   |   2 +
 .../empty_state/empty_state.tsx               |   4 +-
 .../index_pattern_table.tsx                   |  54 +-
 .../search/sessions_mgmt/components/main.tsx  |  81 +-
 .../public/components/report_listing.tsx      |  46 +-
 .../translations/translations/ja-JP.json      |   1 -
 .../translations/translations/zh-CN.json      |   1 -
 16 files changed, 768 insertions(+), 679 deletions(-)

diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap
index 21248ac9d1dc0b..38a9e470144168 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap
@@ -14,46 +14,46 @@ exports[`CreateIndexPatternWizard defaults to the loading state 1`] = `
 
 exports[`CreateIndexPatternWizard renders index pattern step when there are indices 1`] = `
 <Fragment>
-  <EuiPageContent>
-    <Header
-      docLinks={
-        Object {
-          "DOC_LINK_VERSION": "jest",
-          "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
-          "links": Object {
-            "indexPatterns": Object {},
-            "runtimeFields": Object {},
-            "scriptedFields": Object {},
-          },
-        }
-      }
-      indexPatternName="name"
-      isBeta={false}
-      prompt={null}
-    />
-    <EuiHorizontalRule />
-    <StepIndexPattern
-      allIndices={
-        Array [
-          Object {
-            "name": "myIndexPattern",
-          },
-        ]
+  <Header
+    docLinks={
+      Object {
+        "DOC_LINK_VERSION": "jest",
+        "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
+        "links": Object {
+          "indexPatterns": Object {},
+          "runtimeFields": Object {},
+          "scriptedFields": Object {},
+        },
       }
-      goToNextStep={[Function]}
-      indexPatternCreationType={
-        IndexPatternCreationConfig {
-          "httpClient": null,
-          "isBeta": false,
-          "key": "default",
-          "name": "name",
-          "showSystemIndices": true,
-          "type": "default",
-        }
+    }
+    indexPatternName="name"
+    isBeta={false}
+    prompt={null}
+  />
+  <EuiSpacer
+    size="l"
+  />
+  <StepIndexPattern
+    allIndices={
+      Array [
+        Object {
+          "name": "myIndexPattern",
+        },
+      ]
+    }
+    goToNextStep={[Function]}
+    indexPatternCreationType={
+      IndexPatternCreationConfig {
+        "httpClient": null,
+        "isBeta": false,
+        "key": "default",
+        "name": "name",
+        "showSystemIndices": true,
+        "type": "default",
       }
-      showSystemIndices={true}
-    />
-  </EuiPageContent>
+    }
+    showSystemIndices={true}
+  />
   <EuiGlobalToastList
     dismissToast={[Function]}
     side="right"
@@ -65,40 +65,40 @@ exports[`CreateIndexPatternWizard renders index pattern step when there are indi
 
 exports[`CreateIndexPatternWizard renders the empty state when there are no indices 1`] = `
 <Fragment>
-  <EuiPageContent>
-    <Header
-      docLinks={
-        Object {
-          "DOC_LINK_VERSION": "jest",
-          "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
-          "links": Object {
-            "indexPatterns": Object {},
-            "runtimeFields": Object {},
-            "scriptedFields": Object {},
-          },
-        }
+  <Header
+    docLinks={
+      Object {
+        "DOC_LINK_VERSION": "jest",
+        "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
+        "links": Object {
+          "indexPatterns": Object {},
+          "runtimeFields": Object {},
+          "scriptedFields": Object {},
+        },
       }
-      indexPatternName="name"
-      isBeta={false}
-      prompt={null}
-    />
-    <EuiHorizontalRule />
-    <StepIndexPattern
-      allIndices={Array []}
-      goToNextStep={[Function]}
-      indexPatternCreationType={
-        IndexPatternCreationConfig {
-          "httpClient": null,
-          "isBeta": false,
-          "key": "default",
-          "name": "name",
-          "showSystemIndices": true,
-          "type": "default",
-        }
+    }
+    indexPatternName="name"
+    isBeta={false}
+    prompt={null}
+  />
+  <EuiSpacer
+    size="l"
+  />
+  <StepIndexPattern
+    allIndices={Array []}
+    goToNextStep={[Function]}
+    indexPatternCreationType={
+      IndexPatternCreationConfig {
+        "httpClient": null,
+        "isBeta": false,
+        "key": "default",
+        "name": "name",
+        "showSystemIndices": true,
+        "type": "default",
       }
-      showSystemIndices={true}
-    />
-  </EuiPageContent>
+    }
+    showSystemIndices={true}
+  />
   <EuiGlobalToastList
     dismissToast={[Function]}
     side="right"
@@ -110,40 +110,40 @@ exports[`CreateIndexPatternWizard renders the empty state when there are no indi
 
 exports[`CreateIndexPatternWizard renders time field step when step is set to 2 1`] = `
 <Fragment>
-  <EuiPageContent>
-    <Header
-      docLinks={
-        Object {
-          "DOC_LINK_VERSION": "jest",
-          "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
-          "links": Object {
-            "indexPatterns": Object {},
-            "runtimeFields": Object {},
-            "scriptedFields": Object {},
-          },
-        }
+  <Header
+    docLinks={
+      Object {
+        "DOC_LINK_VERSION": "jest",
+        "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
+        "links": Object {
+          "indexPatterns": Object {},
+          "runtimeFields": Object {},
+          "scriptedFields": Object {},
+        },
       }
-      indexPatternName="name"
-      isBeta={false}
-      prompt={null}
-    />
-    <EuiHorizontalRule />
-    <StepTimeField
-      createIndexPattern={[Function]}
-      goToPreviousStep={[Function]}
-      indexPattern=""
-      indexPatternCreationType={
-        IndexPatternCreationConfig {
-          "httpClient": null,
-          "isBeta": false,
-          "key": "default",
-          "name": "name",
-          "showSystemIndices": true,
-          "type": "default",
-        }
+    }
+    indexPatternName="name"
+    isBeta={false}
+    prompt={null}
+  />
+  <EuiSpacer
+    size="l"
+  />
+  <StepTimeField
+    createIndexPattern={[Function]}
+    goToPreviousStep={[Function]}
+    indexPattern=""
+    indexPatternCreationType={
+      IndexPatternCreationConfig {
+        "httpClient": null,
+        "isBeta": false,
+        "key": "default",
+        "name": "name",
+        "showSystemIndices": true,
+        "type": "default",
       }
-    />
-  </EuiPageContent>
+    }
+  />
   <EuiGlobalToastList
     dismissToast={[Function]}
     side="right"
@@ -155,40 +155,40 @@ exports[`CreateIndexPatternWizard renders time field step when step is set to 2
 
 exports[`CreateIndexPatternWizard renders when there are no indices but there are remote clusters 1`] = `
 <Fragment>
-  <EuiPageContent>
-    <Header
-      docLinks={
-        Object {
-          "DOC_LINK_VERSION": "jest",
-          "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
-          "links": Object {
-            "indexPatterns": Object {},
-            "runtimeFields": Object {},
-            "scriptedFields": Object {},
-          },
-        }
+  <Header
+    docLinks={
+      Object {
+        "DOC_LINK_VERSION": "jest",
+        "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
+        "links": Object {
+          "indexPatterns": Object {},
+          "runtimeFields": Object {},
+          "scriptedFields": Object {},
+        },
       }
-      indexPatternName="name"
-      isBeta={false}
-      prompt={null}
-    />
-    <EuiHorizontalRule />
-    <StepIndexPattern
-      allIndices={Array []}
-      goToNextStep={[Function]}
-      indexPatternCreationType={
-        IndexPatternCreationConfig {
-          "httpClient": null,
-          "isBeta": false,
-          "key": "default",
-          "name": "name",
-          "showSystemIndices": true,
-          "type": "default",
-        }
+    }
+    indexPatternName="name"
+    isBeta={false}
+    prompt={null}
+  />
+  <EuiSpacer
+    size="l"
+  />
+  <StepIndexPattern
+    allIndices={Array []}
+    goToNextStep={[Function]}
+    indexPatternCreationType={
+      IndexPatternCreationConfig {
+        "httpClient": null,
+        "isBeta": false,
+        "key": "default",
+        "name": "name",
+        "showSystemIndices": true,
+        "type": "default",
       }
-      showSystemIndices={true}
-    />
-  </EuiPageContent>
+    }
+    showSystemIndices={true}
+  />
   <EuiGlobalToastList
     dismissToast={[Function]}
     side="right"
@@ -200,46 +200,46 @@ exports[`CreateIndexPatternWizard renders when there are no indices but there ar
 
 exports[`CreateIndexPatternWizard shows system indices even if there are no other indices if the include system indices is toggled 1`] = `
 <Fragment>
-  <EuiPageContent>
-    <Header
-      docLinks={
-        Object {
-          "DOC_LINK_VERSION": "jest",
-          "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
-          "links": Object {
-            "indexPatterns": Object {},
-            "runtimeFields": Object {},
-            "scriptedFields": Object {},
-          },
-        }
-      }
-      indexPatternName="name"
-      isBeta={false}
-      prompt={null}
-    />
-    <EuiHorizontalRule />
-    <StepIndexPattern
-      allIndices={
-        Array [
-          Object {
-            "name": ".kibana ",
-          },
-        ]
+  <Header
+    docLinks={
+      Object {
+        "DOC_LINK_VERSION": "jest",
+        "ELASTIC_WEBSITE_URL": "htts://jestTest.elastic.co",
+        "links": Object {
+          "indexPatterns": Object {},
+          "runtimeFields": Object {},
+          "scriptedFields": Object {},
+        },
       }
-      goToNextStep={[Function]}
-      indexPatternCreationType={
-        IndexPatternCreationConfig {
-          "httpClient": null,
-          "isBeta": false,
-          "key": "default",
-          "name": "name",
-          "showSystemIndices": true,
-          "type": "default",
-        }
+    }
+    indexPatternName="name"
+    isBeta={false}
+    prompt={null}
+  />
+  <EuiSpacer
+    size="l"
+  />
+  <StepIndexPattern
+    allIndices={
+      Array [
+        Object {
+          "name": ".kibana ",
+        },
+      ]
+    }
+    goToNextStep={[Function]}
+    indexPatternCreationType={
+      IndexPatternCreationConfig {
+        "httpClient": null,
+        "isBeta": false,
+        "key": "default",
+        "name": "name",
+        "showSystemIndices": true,
+        "type": "default",
       }
-      showSystemIndices={true}
-    />
-  </EuiPageContent>
+    }
+    showSystemIndices={true}
+  />
   <EuiGlobalToastList
     dismissToast={[Function]}
     side="right"
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap
index 1eadc4d82e985e..ceb5b4f343568e 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap
@@ -17,121 +17,178 @@ exports[`Header should render a different name, prompt, and beta tag if provided
     </div>
   }
 >
-  <div>
-    <EuiTitle>
-      <h1
-        className="euiTitle euiTitle--medium"
-      >
+  <EuiPageHeader
+    bottomBorder={true}
+    pageTitle={
+      <React.Fragment>
         Create test index pattern
-         
-        <EuiBetaBadge
-          label="Beta"
-        >
-          <span
-            className="euiBetaBadge"
-            title="Beta"
-          >
-            Beta
-          </span>
-        </EuiBetaBadge>
-      </h1>
-    </EuiTitle>
-    <EuiSpacer
-      size="s"
+        <React.Fragment>
+           
+          <EuiBetaBadge
+            label="Beta"
+          />
+        </React.Fragment>
+      </React.Fragment>
+    }
+  >
+    <header
+      className="euiPageHeader euiPageHeader--bottomBorder euiPageHeader--responsive euiPageHeader--center"
     >
-      <div
-        className="euiSpacer euiSpacer--s"
-      />
-    </EuiSpacer>
-    <EuiText>
-      <div
-        className="euiText euiText--medium"
+      <EuiPageHeaderContent
+        pageTitle={
+          <React.Fragment>
+            Create test index pattern
+            <React.Fragment>
+               
+              <EuiBetaBadge
+                label="Beta"
+              />
+            </React.Fragment>
+          </React.Fragment>
+        }
+        responsive={true}
       >
-        <p>
-          <FormattedMessage
-            defaultMessage="An index pattern can match a single source, for example, {single}, or {multiple} data sources, {star}."
-            id="indexPatternManagement.createIndexPattern.description"
-            values={
-              Object {
-                "multiple": <strong>
-                  multiple
-                </strong>,
-                "single": <EuiCode>
-                  filebeat-4-3-22
-                </EuiCode>,
-                "star": <EuiCode>
-                  filebeat-*
-                </EuiCode>,
-              }
-            }
+        <div
+          className="euiPageHeaderContent"
+        >
+          <EuiFlexGroup
+            alignItems="flexStart"
+            className="euiPageHeaderContent__top"
+            gutterSize="l"
+            responsive={true}
           >
-            <span>
-              An index pattern can match a single source, for example, 
-              <EuiCode>
-                <EuiCodeBlockImpl
-                  inline={true}
-                >
-                  <span>
-                    <code>
-                      filebeat-4-3-22
-                    </code>
-                  </span>
-                </EuiCodeBlockImpl>
-              </EuiCode>
-              , or 
-              <strong>
-                multiple
-              </strong>
-               data sources, 
-              <EuiCode>
-                <EuiCodeBlockImpl
-                  inline={true}
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+            >
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
                 >
-                  <span>
-                    <code>
-                      filebeat-*
-                    </code>
-                  </span>
-                </EuiCodeBlockImpl>
-              </EuiCode>
-              .
-            </span>
-          </FormattedMessage>
-          <br />
-          <EuiLink
-            external={true}
-            target="_blank"
+                  <EuiTitle
+                    size="l"
+                  >
+                    <h1
+                      className="euiTitle euiTitle--large"
+                    >
+                      Create test index pattern
+                       
+                      <EuiBetaBadge
+                        label="Beta"
+                      >
+                        <span
+                          className="euiBetaBadge"
+                          title="Beta"
+                        >
+                          Beta
+                        </span>
+                      </EuiBetaBadge>
+                    </h1>
+                  </EuiTitle>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <div
+            className="euiPageHeaderContent__bottom"
           >
-            <button
-              className="euiLink euiLink--primary"
-              disabled={false}
-              type="button"
-            >
-              <FormattedMessage
-                defaultMessage="Read documentation"
-                id="indexPatternManagement.createIndexPattern.documentation"
-                values={Object {}}
+            <EuiSpacer>
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
               >
-                <span>
-                  Read documentation
-                </span>
-              </FormattedMessage>
-            </button>
-          </EuiLink>
-        </p>
-      </div>
-    </EuiText>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
-    <div>
-      Test prompt
-    </div>
-  </div>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="An index pattern can match a single source, for example, {single}, or {multiple} data sources, {star}."
+                    id="indexPatternManagement.createIndexPattern.description"
+                    values={
+                      Object {
+                        "multiple": <strong>
+                          multiple
+                        </strong>,
+                        "single": <EuiCode>
+                          filebeat-4-3-22
+                        </EuiCode>,
+                        "star": <EuiCode>
+                          filebeat-*
+                        </EuiCode>,
+                      }
+                    }
+                  >
+                    <span>
+                      An index pattern can match a single source, for example, 
+                      <EuiCode>
+                        <EuiCodeBlockImpl
+                          inline={true}
+                        >
+                          <span>
+                            <code>
+                              filebeat-4-3-22
+                            </code>
+                          </span>
+                        </EuiCodeBlockImpl>
+                      </EuiCode>
+                      , or 
+                      <strong>
+                        multiple
+                      </strong>
+                       data sources, 
+                      <EuiCode>
+                        <EuiCodeBlockImpl
+                          inline={true}
+                        >
+                          <span>
+                            <code>
+                              filebeat-*
+                            </code>
+                          </span>
+                        </EuiCodeBlockImpl>
+                      </EuiCode>
+                      .
+                    </span>
+                  </FormattedMessage>
+                  <br />
+                  <EuiLink
+                    external={true}
+                    target="_blank"
+                  >
+                    <button
+                      className="euiLink euiLink--primary"
+                      disabled={false}
+                      type="button"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Read documentation"
+                        id="indexPatternManagement.createIndexPattern.documentation"
+                        values={Object {}}
+                      >
+                        <span>
+                          Read documentation
+                        </span>
+                      </FormattedMessage>
+                    </button>
+                  </EuiLink>
+                </p>
+              </div>
+            </EuiText>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <div>
+              Test prompt
+            </div>
+          </div>
+        </div>
+      </EuiPageHeaderContent>
+    </header>
+  </EuiPageHeader>
 </Header>
 `;
 
@@ -146,100 +203,145 @@ exports[`Header should render normally 1`] = `
   }
   indexPatternName="test index pattern"
 >
-  <div>
-    <EuiTitle>
-      <h1
-        className="euiTitle euiTitle--medium"
-      >
+  <EuiPageHeader
+    bottomBorder={true}
+    pageTitle={
+      <React.Fragment>
         Create test index pattern
-      </h1>
-    </EuiTitle>
-    <EuiSpacer
-      size="s"
+      </React.Fragment>
+    }
+  >
+    <header
+      className="euiPageHeader euiPageHeader--bottomBorder euiPageHeader--responsive euiPageHeader--center"
     >
-      <div
-        className="euiSpacer euiSpacer--s"
-      />
-    </EuiSpacer>
-    <EuiText>
-      <div
-        className="euiText euiText--medium"
+      <EuiPageHeaderContent
+        pageTitle={
+          <React.Fragment>
+            Create test index pattern
+          </React.Fragment>
+        }
+        responsive={true}
       >
-        <p>
-          <FormattedMessage
-            defaultMessage="An index pattern can match a single source, for example, {single}, or {multiple} data sources, {star}."
-            id="indexPatternManagement.createIndexPattern.description"
-            values={
-              Object {
-                "multiple": <strong>
-                  multiple
-                </strong>,
-                "single": <EuiCode>
-                  filebeat-4-3-22
-                </EuiCode>,
-                "star": <EuiCode>
-                  filebeat-*
-                </EuiCode>,
-              }
-            }
+        <div
+          className="euiPageHeaderContent"
+        >
+          <EuiFlexGroup
+            alignItems="flexStart"
+            className="euiPageHeaderContent__top"
+            gutterSize="l"
+            responsive={true}
           >
-            <span>
-              An index pattern can match a single source, for example, 
-              <EuiCode>
-                <EuiCodeBlockImpl
-                  inline={true}
-                >
-                  <span>
-                    <code>
-                      filebeat-4-3-22
-                    </code>
-                  </span>
-                </EuiCodeBlockImpl>
-              </EuiCode>
-              , or 
-              <strong>
-                multiple
-              </strong>
-               data sources, 
-              <EuiCode>
-                <EuiCodeBlockImpl
-                  inline={true}
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+            >
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
                 >
-                  <span>
-                    <code>
-                      filebeat-*
-                    </code>
-                  </span>
-                </EuiCodeBlockImpl>
-              </EuiCode>
-              .
-            </span>
-          </FormattedMessage>
-          <br />
-          <EuiLink
-            external={true}
-            target="_blank"
+                  <EuiTitle
+                    size="l"
+                  >
+                    <h1
+                      className="euiTitle euiTitle--large"
+                    >
+                      Create test index pattern
+                    </h1>
+                  </EuiTitle>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <div
+            className="euiPageHeaderContent__bottom"
           >
-            <button
-              className="euiLink euiLink--primary"
-              disabled={false}
-              type="button"
-            >
-              <FormattedMessage
-                defaultMessage="Read documentation"
-                id="indexPatternManagement.createIndexPattern.documentation"
-                values={Object {}}
+            <EuiSpacer>
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
               >
-                <span>
-                  Read documentation
-                </span>
-              </FormattedMessage>
-            </button>
-          </EuiLink>
-        </p>
-      </div>
-    </EuiText>
-  </div>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="An index pattern can match a single source, for example, {single}, or {multiple} data sources, {star}."
+                    id="indexPatternManagement.createIndexPattern.description"
+                    values={
+                      Object {
+                        "multiple": <strong>
+                          multiple
+                        </strong>,
+                        "single": <EuiCode>
+                          filebeat-4-3-22
+                        </EuiCode>,
+                        "star": <EuiCode>
+                          filebeat-*
+                        </EuiCode>,
+                      }
+                    }
+                  >
+                    <span>
+                      An index pattern can match a single source, for example, 
+                      <EuiCode>
+                        <EuiCodeBlockImpl
+                          inline={true}
+                        >
+                          <span>
+                            <code>
+                              filebeat-4-3-22
+                            </code>
+                          </span>
+                        </EuiCodeBlockImpl>
+                      </EuiCode>
+                      , or 
+                      <strong>
+                        multiple
+                      </strong>
+                       data sources, 
+                      <EuiCode>
+                        <EuiCodeBlockImpl
+                          inline={true}
+                        >
+                          <span>
+                            <code>
+                              filebeat-*
+                            </code>
+                          </span>
+                        </EuiCodeBlockImpl>
+                      </EuiCode>
+                      .
+                    </span>
+                  </FormattedMessage>
+                  <br />
+                  <EuiLink
+                    external={true}
+                    target="_blank"
+                  >
+                    <button
+                      className="euiLink euiLink--primary"
+                      disabled={false}
+                      type="button"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Read documentation"
+                        id="indexPatternManagement.createIndexPattern.documentation"
+                        values={Object {}}
+                      >
+                        <span>
+                          Read documentation
+                        </span>
+                      </FormattedMessage>
+                    </button>
+                  </EuiLink>
+                </p>
+              </div>
+            </EuiText>
+          </div>
+        </div>
+      </EuiPageHeaderContent>
+    </header>
+  </EuiPageHeader>
 </Header>
 `;
 
@@ -254,99 +356,144 @@ exports[`Header should render without including system indices 1`] = `
   }
   indexPatternName="test index pattern"
 >
-  <div>
-    <EuiTitle>
-      <h1
-        className="euiTitle euiTitle--medium"
-      >
+  <EuiPageHeader
+    bottomBorder={true}
+    pageTitle={
+      <React.Fragment>
         Create test index pattern
-      </h1>
-    </EuiTitle>
-    <EuiSpacer
-      size="s"
+      </React.Fragment>
+    }
+  >
+    <header
+      className="euiPageHeader euiPageHeader--bottomBorder euiPageHeader--responsive euiPageHeader--center"
     >
-      <div
-        className="euiSpacer euiSpacer--s"
-      />
-    </EuiSpacer>
-    <EuiText>
-      <div
-        className="euiText euiText--medium"
+      <EuiPageHeaderContent
+        pageTitle={
+          <React.Fragment>
+            Create test index pattern
+          </React.Fragment>
+        }
+        responsive={true}
       >
-        <p>
-          <FormattedMessage
-            defaultMessage="An index pattern can match a single source, for example, {single}, or {multiple} data sources, {star}."
-            id="indexPatternManagement.createIndexPattern.description"
-            values={
-              Object {
-                "multiple": <strong>
-                  multiple
-                </strong>,
-                "single": <EuiCode>
-                  filebeat-4-3-22
-                </EuiCode>,
-                "star": <EuiCode>
-                  filebeat-*
-                </EuiCode>,
-              }
-            }
+        <div
+          className="euiPageHeaderContent"
+        >
+          <EuiFlexGroup
+            alignItems="flexStart"
+            className="euiPageHeaderContent__top"
+            gutterSize="l"
+            responsive={true}
           >
-            <span>
-              An index pattern can match a single source, for example, 
-              <EuiCode>
-                <EuiCodeBlockImpl
-                  inline={true}
-                >
-                  <span>
-                    <code>
-                      filebeat-4-3-22
-                    </code>
-                  </span>
-                </EuiCodeBlockImpl>
-              </EuiCode>
-              , or 
-              <strong>
-                multiple
-              </strong>
-               data sources, 
-              <EuiCode>
-                <EuiCodeBlockImpl
-                  inline={true}
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+            >
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
                 >
-                  <span>
-                    <code>
-                      filebeat-*
-                    </code>
-                  </span>
-                </EuiCodeBlockImpl>
-              </EuiCode>
-              .
-            </span>
-          </FormattedMessage>
-          <br />
-          <EuiLink
-            external={true}
-            target="_blank"
+                  <EuiTitle
+                    size="l"
+                  >
+                    <h1
+                      className="euiTitle euiTitle--large"
+                    >
+                      Create test index pattern
+                    </h1>
+                  </EuiTitle>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <div
+            className="euiPageHeaderContent__bottom"
           >
-            <button
-              className="euiLink euiLink--primary"
-              disabled={false}
-              type="button"
-            >
-              <FormattedMessage
-                defaultMessage="Read documentation"
-                id="indexPatternManagement.createIndexPattern.documentation"
-                values={Object {}}
+            <EuiSpacer>
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
               >
-                <span>
-                  Read documentation
-                </span>
-              </FormattedMessage>
-            </button>
-          </EuiLink>
-        </p>
-      </div>
-    </EuiText>
-  </div>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="An index pattern can match a single source, for example, {single}, or {multiple} data sources, {star}."
+                    id="indexPatternManagement.createIndexPattern.description"
+                    values={
+                      Object {
+                        "multiple": <strong>
+                          multiple
+                        </strong>,
+                        "single": <EuiCode>
+                          filebeat-4-3-22
+                        </EuiCode>,
+                        "star": <EuiCode>
+                          filebeat-*
+                        </EuiCode>,
+                      }
+                    }
+                  >
+                    <span>
+                      An index pattern can match a single source, for example, 
+                      <EuiCode>
+                        <EuiCodeBlockImpl
+                          inline={true}
+                        >
+                          <span>
+                            <code>
+                              filebeat-4-3-22
+                            </code>
+                          </span>
+                        </EuiCodeBlockImpl>
+                      </EuiCode>
+                      , or 
+                      <strong>
+                        multiple
+                      </strong>
+                       data sources, 
+                      <EuiCode>
+                        <EuiCodeBlockImpl
+                          inline={true}
+                        >
+                          <span>
+                            <code>
+                              filebeat-*
+                            </code>
+                          </span>
+                        </EuiCodeBlockImpl>
+                      </EuiCode>
+                      .
+                    </span>
+                  </FormattedMessage>
+                  <br />
+                  <EuiLink
+                    external={true}
+                    target="_blank"
+                  >
+                    <button
+                      className="euiLink euiLink--primary"
+                      disabled={false}
+                      type="button"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Read documentation"
+                        id="indexPatternManagement.createIndexPattern.documentation"
+                        values={Object {}}
+                      >
+                        <span>
+                          Read documentation
+                        </span>
+                      </FormattedMessage>
+                    </button>
+                  </EuiLink>
+                </p>
+              </div>
+            </EuiText>
+          </div>
+        </div>
+      </EuiPageHeaderContent>
+    </header>
+  </EuiPageHeader>
 </Header>
 `;
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.tsx
index a7e3b2ded75dc6..c708bd3cac33e7 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.tsx
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { EuiBetaBadge, EuiSpacer, EuiTitle, EuiText, EuiCode, EuiLink } from '@elastic/eui';
+import { EuiBetaBadge, EuiCode, EuiLink, EuiPageHeader, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -39,9 +39,9 @@ export const Header = ({
   changeTitle(createIndexPatternHeader);
 
   return (
-    <div>
-      <EuiTitle>
-        <h1>
+    <EuiPageHeader
+      pageTitle={
+        <>
           {createIndexPatternHeader}
           {isBeta ? (
             <>
@@ -53,9 +53,10 @@ export const Header = ({
               />
             </>
           ) : null}
-        </h1>
-      </EuiTitle>
-      <EuiSpacer size="s" />
+        </>
+      }
+      bottomBorder
+    >
       <EuiText>
         <p>
           <FormattedMessage
@@ -82,6 +83,6 @@ export const Header = ({
           {prompt}
         </>
       ) : null}
-    </div>
+    </EuiPageHeader>
   );
 };
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
index 426c5dea3b60f0..a5caecd5ff2c80 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
@@ -6,17 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { ReactElement, Component } from 'react';
-
-import {
-  EuiGlobalToastList,
-  EuiGlobalToastListToast,
-  EuiPageContent,
-  EuiHorizontalRule,
-} from '@elastic/eui';
+import React, { Component, ReactElement } from 'react';
+
+import { EuiGlobalToastList, EuiGlobalToastListToast, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { DocLinksStart } from 'src/core/public';
 import { StepIndexPattern } from './components/step_index_pattern';
 import { StepTimeField } from './components/step_time_field';
@@ -222,9 +217,9 @@ export class CreateIndexPatternWizard extends Component<
       const initialQuery = new URLSearchParams(location.search).get('id') || undefined;
 
       return (
-        <EuiPageContent>
+        <>
           {header}
-          <EuiHorizontalRule />
+          <EuiSpacer size={'l'} />
           <StepIndexPattern
             allIndices={allIndices}
             initialQuery={indexPattern || initialQuery}
@@ -234,15 +229,15 @@ export class CreateIndexPatternWizard extends Component<
               this.state.indexPatternCreationType.getShowSystemIndices() && this.state.step === 1
             }
           />
-        </EuiPageContent>
+        </>
       );
     }
 
     if (step === 2) {
       return (
-        <EuiPageContent>
+        <>
           {header}
-          <EuiHorizontalRule />
+          <EuiSpacer size={'l'} />
           <StepTimeField
             indexPattern={indexPattern}
             goToPreviousStep={this.goToIndexPatternStep}
@@ -250,7 +245,7 @@ export class CreateIndexPatternWizard extends Component<
             indexPatternCreationType={this.state.indexPatternCreationType}
             selectedTimeField={this.state.selectedTimeField}
           />
-        </EuiPageContent>
+        </>
       );
     }
 
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field.tsx
index 5aa9853c5e766f..0c0adc6dd50295 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field.tsx
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field.tsx
@@ -7,15 +7,15 @@
  */
 
 import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { IndexPattern, IndexPatternField } from '../../../../../../plugins/data/public';
 import { useKibana } from '../../../../../../plugins/kibana_react/public';
 import { IndexPatternManagmentContext } from '../../../types';
 import { IndexHeader } from '../index_header';
-import { TAB_SCRIPTED_FIELDS, TAB_INDEXED_FIELDS } from '../constants';
+import { TAB_INDEXED_FIELDS, TAB_SCRIPTED_FIELDS } from '../constants';
 
 import { FieldEditor } from '../../field_editor';
 
@@ -76,26 +76,18 @@ export const CreateEditField = withRouter(
 
     if (spec) {
       return (
-        <EuiPanel paddingSize={'l'}>
-          <EuiFlexGroup direction="column">
-            <EuiFlexItem>
-              <IndexHeader
-                indexPattern={indexPattern}
-                defaultIndex={uiSettings.get('defaultIndex')}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <FieldEditor
-                indexPattern={indexPattern}
-                spec={spec}
-                services={{
-                  indexPatternService: data.indexPatterns,
-                  redirectAway,
-                }}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPanel>
+        <>
+          <IndexHeader indexPattern={indexPattern} defaultIndex={uiSettings.get('defaultIndex')} />
+          <EuiSpacer size={'l'} />
+          <FieldEditor
+            indexPattern={indexPattern}
+            spec={spec}
+            services={{
+              indexPatternService: data.indexPatterns,
+              redirectAway,
+            }}
+          />
+        </>
       );
     } else {
       return <></>;
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx
index e314c00bc8176f..6609605da87d19 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx
@@ -17,7 +17,6 @@ import {
   EuiText,
   EuiLink,
   EuiCallOut,
-  EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -145,15 +144,13 @@ export const EditIndexPattern = withRouter(
     const kibana = useKibana();
     const docsUrl = kibana.services.docLinks!.links.elasticsearch.mapping;
     return (
-      <EuiPanel paddingSize={'l'}>
-        <div data-test-subj="editIndexPattern" role="region" aria-label={headingAriaLabel}>
-          <IndexHeader
-            indexPattern={indexPattern}
-            setDefault={setDefaultPattern}
-            deleteIndexPatternClick={removePattern}
-            defaultIndex={defaultIndex}
-          />
-          <EuiSpacer size="s" />
+      <div data-test-subj="editIndexPattern" role="region" aria-label={headingAriaLabel}>
+        <IndexHeader
+          indexPattern={indexPattern}
+          setDefault={setDefaultPattern}
+          deleteIndexPatternClick={removePattern}
+          defaultIndex={defaultIndex}
+        >
           {showTagsSection && (
             <EuiFlexGroup wrap>
               {Boolean(indexPattern.timeFieldName) && (
@@ -193,19 +190,19 @@ export const EditIndexPattern = withRouter(
               </EuiCallOut>
             </>
           )}
-          <EuiSpacer />
-          <Tabs
-            indexPattern={indexPattern}
-            saveIndexPattern={data.indexPatterns.updateSavedObject.bind(data.indexPatterns)}
-            fields={fields}
-            history={history}
-            location={location}
-            refreshFields={() => {
-              setFields(indexPattern.getNonScriptedFields());
-            }}
-          />
-        </div>
-      </EuiPanel>
+        </IndexHeader>
+        <EuiSpacer />
+        <Tabs
+          indexPattern={indexPattern}
+          saveIndexPattern={data.indexPatterns.updateSavedObject.bind(data.indexPatterns)}
+          fields={fields}
+          history={history}
+          location={location}
+          refreshFields={() => {
+            setFields(indexPattern.getNonScriptedFields());
+          }}
+        />
+      </div>
     );
   }
 );
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/index_header/index_header.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/index_header/index_header.tsx
index 482cd574c8f1d6..c141c228a68f25 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/index_header/index_header.tsx
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/index_header/index_header.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiToolTip, EuiFlexItem, EuiTitle, EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiPageHeader, EuiToolTip } from '@elastic/eui';
 import { IIndexPattern } from 'src/plugins/data/public';
 
 interface IndexHeaderProps {
@@ -40,50 +40,42 @@ const removeTooltip = i18n.translate('indexPatternManagement.editIndexPattern.re
   defaultMessage: 'Remove index pattern.',
 });
 
-export function IndexHeader({
+export const IndexHeader: React.FC<IndexHeaderProps> = ({
   defaultIndex,
   indexPattern,
   setDefault,
   deleteIndexPatternClick,
-}: IndexHeaderProps) {
+  children,
+}) => {
   return (
-    <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-      <EuiFlexItem>
-        <EuiTitle>
-          <h1 data-test-subj="indexPatternTitle">{indexPattern.title}</h1>
-        </EuiTitle>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup responsive={false}>
-          {defaultIndex !== indexPattern.id && setDefault && (
-            <EuiFlexItem>
-              <EuiToolTip content={setDefaultTooltip}>
-                <EuiButtonIcon
-                  color="text"
-                  onClick={setDefault}
-                  iconType="starFilled"
-                  aria-label={setDefaultAriaLabel}
-                  data-test-subj="setDefaultIndexPatternButton"
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-          )}
-
-          {deleteIndexPatternClick && (
-            <EuiFlexItem>
-              <EuiToolTip content={removeTooltip}>
-                <EuiButtonIcon
-                  color="danger"
-                  onClick={deleteIndexPatternClick}
-                  iconType="trash"
-                  aria-label={removeAriaLabel}
-                  data-test-subj="deleteIndexPatternButton"
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiPageHeader
+      pageTitle={<span data-test-subj="indexPatternTitle">{indexPattern.title}</span>}
+      rightSideItems={[
+        defaultIndex !== indexPattern.id && setDefault && (
+          <EuiToolTip content={setDefaultTooltip}>
+            <EuiButtonIcon
+              color="text"
+              onClick={setDefault}
+              iconType="starFilled"
+              aria-label={setDefaultAriaLabel}
+              data-test-subj="setDefaultIndexPatternButton"
+            />
+          </EuiToolTip>
+        ),
+        deleteIndexPatternClick && (
+          <EuiToolTip content={removeTooltip}>
+            <EuiButtonIcon
+              color="danger"
+              onClick={deleteIndexPatternClick}
+              iconType="trash"
+              aria-label={removeAriaLabel}
+              data-test-subj="deleteIndexPatternButton"
+            />
+          </EuiToolTip>
+        ),
+      ].filter(Boolean)}
+    >
+      {children}
+    </EuiPageHeader>
   );
-}
+};
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/__snapshots__/empty_index_pattern_prompt.test.tsx.snap b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/__snapshots__/empty_index_pattern_prompt.test.tsx.snap
index c5e6d1220d8bf8..bc69fa29e69044 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/__snapshots__/empty_index_pattern_prompt.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/__snapshots__/empty_index_pattern_prompt.test.tsx.snap
@@ -3,9 +3,11 @@
 exports[`EmptyIndexPatternPrompt should render normally 1`] = `
 <EuiPageContent
   className="inpEmptyIndexPatternPrompt"
+  color="subdued"
   data-test-subj="emptyIndexPatternPrompt"
   grow={false}
   horizontalPosition="center"
+  verticalPosition="center"
 >
   <EuiFlexGroup
     alignItems="center"
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx
index f1bf912f332d8e..f36f3a38c73805 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx
@@ -41,7 +41,9 @@ export const EmptyIndexPatternPrompt = ({
       data-test-subj="emptyIndexPatternPrompt"
       className="inpEmptyIndexPatternPrompt"
       grow={false}
+      verticalPosition="center"
       horizontalPosition="center"
+      color="subdued"
     >
       <EuiFlexGroup gutterSize="xl" alignItems="center" direction="rowReverse" wrap>
         <EuiFlexItem grow={1} className="inpEmptyIndexPatternPrompt__illustration">
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap
index 1310488c65fab8..957c94c80680d9 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap
@@ -4,9 +4,11 @@ exports[`EmptyState should render normally 1`] = `
 <Fragment>
   <EuiPageContent
     className="inpEmptyState"
+    color="subdued"
     data-test-subj="indexPatternEmptyState"
     grow={false}
     horizontalPosition="center"
+    verticalPosition="center"
   >
     <EuiPageContentHeader>
       <EuiPageContentHeaderSection>
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx
index 240e732752916c..c05f6a1f193b7a 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx
@@ -63,8 +63,10 @@ export const EmptyState = ({
       <EuiPageContent
         className="inpEmptyState"
         grow={false}
-        horizontalPosition="center"
         data-test-subj="indexPatternEmptyState"
+        verticalPosition="center"
+        horizontalPosition="center"
+        color="subdued"
       >
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
index 600d388753cc6a..5b272c5766df08 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
@@ -8,24 +8,20 @@
 
 import {
   EuiBadge,
+  EuiBadgeGroup,
   EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiInMemoryTable,
+  EuiPageHeader,
   EuiSpacer,
-  EuiText,
-  EuiBadgeGroup,
-  EuiPageContent,
-  EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-import React, { useState, useEffect } from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { reactRouterNavigate, useKibana } from '../../../../../plugins/kibana_react/public';
 import { IndexPatternManagmentContext } from '../../types';
 import { CreateButton } from '../create_button';
-import { IndexPatternTableItem, IndexPatternCreationOption } from '../types';
+import { IndexPatternCreationOption, IndexPatternTableItem } from '../types';
 import { getIndexPatterns } from '../utils';
 import { getListBreadcrumbs } from '../breadcrumbs';
 import { EmptyState } from './empty_state';
@@ -54,10 +50,6 @@ const search = {
   },
 };
 
-const ariaRegion = i18n.translate('indexPatternManagement.editIndexPatternLiveRegionAriaLabel', {
-  defaultMessage: 'Index patterns',
-});
-
 const title = i18n.translate('indexPatternManagement.indexPatternTable.title', {
   defaultMessage: 'Index patterns',
 });
@@ -199,25 +191,21 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
   }
 
   return (
-    <EuiPageContent data-test-subj="indexPatternTable" role="region" aria-label={ariaRegion}>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2>{title}</h2>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="indexPatternManagement.indexPatternTable.indexPatternExplanation"
-                defaultMessage="Create and manage the index patterns that help you retrieve your data from Elasticsearch."
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>{createButton}</EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
+    <div data-test-subj="indexPatternTable" role="region" aria-label={title}>
+      <EuiPageHeader
+        pageTitle={title}
+        description={
+          <FormattedMessage
+            id="indexPatternManagement.indexPatternTable.indexPatternExplanation"
+            defaultMessage="Create and manage the index patterns that help you retrieve your data from Elasticsearch."
+          />
+        }
+        bottomBorder
+        rightSideItems={[createButton]}
+      />
+
+      <EuiSpacer size="l" />
+
       <EuiInMemoryTable
         allowNeutralSort={false}
         itemId="id"
@@ -228,7 +216,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
         sorting={sorting}
         search={search}
       />
-    </EuiPageContent>
+    </div>
   );
 };
 
diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/main.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/main.tsx
index 0e5be4b5a51e9f..c398c92abf3a90 100644
--- a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/main.tsx
+++ b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/main.tsx
@@ -5,25 +5,15 @@
  * 2.0.
  */
 
-import {
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiPageBody,
-  EuiPageContent,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiButtonEmpty, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import type { CoreStart, HttpStart } from 'kibana/public';
 import React from 'react';
 import type { SessionsConfigSchema } from '../';
+import { IManagementSectionsPluginsSetup } from '../';
 import type { SearchSessionsMgmtAPI } from '../lib/api';
 import type { AsyncSearchIntroDocumentation } from '../lib/documentation';
-import { TableText } from './';
 import { SearchSessionsMgmtTable } from './table';
-import { IManagementSectionsPluginsSetup } from '../';
 
 interface Props {
   documentation: AsyncSearchIntroDocumentation;
@@ -37,46 +27,37 @@ interface Props {
 
 export function SearchSessionsMgmtMain({ documentation, ...tableProps }: Props) {
   return (
-    <EuiPageBody component="div">
-      <EuiPageContent>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={true}>
-            <EuiTitle size="l">
-              <h1>
-                <FormattedMessage
-                  id="xpack.data.mgmt.searchSessions.main.sectionTitle"
-                  defaultMessage="Search Sessions"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              href={documentation.getElasticsearchDocLink()}
-              target="_blank"
-              iconType="help"
-            >
-              <FormattedMessage
-                id="xpack.data.mgmt.searchSessions.main.backgroundSessionsDocsLinkText"
-                defaultMessage="Documentation"
-              />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="s" />
-        <TableText>
-          <p>
+    <>
+      <EuiPageHeader
+        pageTitle={
+          <FormattedMessage
+            id="xpack.data.mgmt.searchSessions.main.sectionTitle"
+            defaultMessage="Search Sessions"
+          />
+        }
+        description={
+          <FormattedMessage
+            id="xpack.data.mgmt.searchSessions.main.sectionDescription"
+            defaultMessage="Manage your saved search sessions."
+          />
+        }
+        bottomBorder
+        rightSideItems={[
+          <EuiButtonEmpty
+            href={documentation.getElasticsearchDocLink()}
+            target="_blank"
+            iconType="help"
+          >
             <FormattedMessage
-              id="xpack.data.mgmt.searchSessions.main.sectionDescription"
-              defaultMessage="Manage your saved search sessions."
+              id="xpack.data.mgmt.searchSessions.main.backgroundSessionsDocsLinkText"
+              defaultMessage="Documentation"
             />
-          </p>
-        </TableText>
-
-        <EuiHorizontalRule />
+          </EuiButtonEmpty>,
+        ]}
+      />
 
-        <SearchSessionsMgmtTable data-test-subj="search-sessions-mgmt-table" {...tableProps} />
-      </EuiPageContent>
-    </EuiPageBody>
+      <EuiSpacer size="l" />
+      <SearchSessionsMgmtTable data-test-subj="search-sessions-mgmt-table" {...tableProps} />
+    </>
   );
 }
diff --git a/x-pack/plugins/reporting/public/components/report_listing.tsx b/x-pack/plugins/reporting/public/components/report_listing.tsx
index 6442c81a471845..618c91fba07157 100644
--- a/x-pack/plugins/reporting/public/components/report_listing.tsx
+++ b/x-pack/plugins/reporting/public/components/report_listing.tsx
@@ -9,11 +9,10 @@ import {
   EuiBasicTable,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPageContent,
+  EuiPageHeader,
   EuiSpacer,
   EuiText,
   EuiTextColor,
-  EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
@@ -139,38 +138,29 @@ class ReportListingUi extends Component<Props, State> {
 
   public render() {
     return (
-      <div>
-        <EuiPageContent horizontalPosition="center" className="euiPageBody--restrictWidth-default">
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiTitle>
-                <h1>
-                  <FormattedMessage
-                    id="xpack.reporting.listing.reportstitle"
-                    defaultMessage="Reports"
-                  />
-                </h1>
-              </EuiTitle>
-              <EuiText color="subdued" size="s">
-                <p>
-                  <FormattedMessage
-                    id="xpack.reporting.listing.reports.subtitle"
-                    defaultMessage="Get reports generated in Kibana applications."
-                  />
-                </p>
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer />
-          {this.renderTable()}
-        </EuiPageContent>
+      <>
+        <EuiPageHeader
+          pageTitle={
+            <FormattedMessage id="xpack.reporting.listing.reportstitle" defaultMessage="Reports" />
+          }
+          description={
+            <FormattedMessage
+              id="xpack.reporting.listing.reports.subtitle"
+              defaultMessage="Get reports generated in Kibana applications."
+            />
+          }
+        />
+
+        <EuiSpacer size={'l'} />
+        {this.renderTable()}
+
         <EuiSpacer size="s" />
         <EuiFlexGroup justifyContent="spaceBetween" direction="rowReverse">
           <EuiFlexItem grow={false}>
             <ReportDiagnostic apiClient={this.props.apiClient} />
           </EuiFlexItem>
         </EuiFlexGroup>
-      </div>
+      </>
     );
   }
 
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 0fc57664fda1ba..d53d461a695a8d 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -3034,7 +3034,6 @@
     "indexPatternManagement.editIndexPattern.timeFilterHeader": "時刻フィールド：「{timeFieldName}」",
     "indexPatternManagement.editIndexPattern.timeFilterLabel.mappingAPILink": "フィールドマッピング",
     "indexPatternManagement.editIndexPattern.timeFilterLabel.timeFilterDetail": "{indexPatternTitle}でフィールドを表示して編集します。型や検索可否などのフィールド属性はElasticsearchで{mappingAPILink}に基づきます。",
-    "indexPatternManagement.editIndexPatternLiveRegionAriaLabel": "インデックスパターン",
     "indexPatternManagement.emptyIndexPatternPrompt.documentation": "ドキュメンテーションを表示",
     "indexPatternManagement.emptyIndexPatternPrompt.indexPatternExplanation": "Kibanaでは、検索するインデックスを特定するためにインデックスパターンが必要です。インデックスパターンは、昨日のログデータなど特定のインデックス、またはログデータを含むすべてのインデックスを参照できます。",
     "indexPatternManagement.emptyIndexPatternPrompt.learnMore": "詳細について",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index a03bab0917a159..34c3b73dcab0b6 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -3055,7 +3055,6 @@
     "indexPatternManagement.editIndexPattern.timeFilterHeader": "时间字段：“{timeFieldName}”",
     "indexPatternManagement.editIndexPattern.timeFilterLabel.mappingAPILink": "字段映射",
     "indexPatternManagement.editIndexPattern.timeFilterLabel.timeFilterDetail": "查看和编辑 {indexPatternTitle} 中的字段。字段属性，如类型和可搜索性，基于 Elasticsearch 中的 {mappingAPILink}。",
-    "indexPatternManagement.editIndexPatternLiveRegionAriaLabel": "索引模式",
     "indexPatternManagement.emptyIndexPatternPrompt.documentation": "阅读文档",
     "indexPatternManagement.emptyIndexPatternPrompt.indexPatternExplanation": "Kibana 需要索引模式，以识别您要浏览的索引。索引模式可以指向特定索引 (例如昨天的日志数据) ，或包含日志数据的所有索引。",
     "indexPatternManagement.emptyIndexPatternPrompt.learnMore": "希望了解详情？",