Home & Kibana Overview Page Template Update

src/plugins/home/public/application/components/_home.scss

@@ -1,17 +1,5 @@
-@import '../../../../../core/public/mixins';
-
-.homWrapper {
-  @include kibanaFullBodyMinHeight();
-  background-color: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-}
-
-.homContent {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: $euiSizeXL $euiSize;
-  width: 100%;
+.homPageHeader--hasOverlap {
+  padding-bottom: ($euiSizeL * 2);
 }
 
 .homData--expanded {

src/plugins/home/public/application/components/_solutions_section.scss

@@ -1,5 +1,5 @@
 .homSolutions {
-  margin-top: -($euiSizeXL + $euiSizeL + $euiSizeM);
+  margin-top: -(($euiSizeL * 2) + $euiSizeM);
 }
 
 .homSolutions__content {

src/plugins/home/public/application/components/home.js

@@ -9,12 +9,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPageTemplate } from '@elastic/eui';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
 import {
+  overviewPageActions,
   OverviewPageFooter,
-  OverviewPageHeader,
 } from '../../../../../../src/plugins/kibana_react/public';
 import { HOME_APP_BASE_PATH } from '../../../common/constants';
 import { FeatureCatalogueCategory } from '../../services';
@@ -113,7 +113,7 @@ export class Home extends Component {
 
   renderNormal() {
     const { addBasePath, solutions, directories } = this.props;
-    const { trackUiMetric } = getServices();
+    const { application, trackUiMetric } = getServices();
     const devTools = this.findDirectoryById('console');
     const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
     const manageDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
@@ -124,58 +124,55 @@ export class Home extends Component {
     }
 
     return (
-      <main
-        aria-labelledby="kbnOverviewPageHeader__title"
-        className="homWrapper"
-        data-test-subj="homeApp"
+      <EuiPageTemplate
+        pageHeader={{
+          className: `homPageHeader ${solutions.length ? ' homPageHeader--hasOverlap' : null}`,
+          pageTitle: <FormattedMessage id="home.header.title" defaultMessage="Home" />,
+          rightSideItems: overviewPageActions({
+            addBasePath,
+            application,
+            showDevToolsLink: true,
+            showManagementLink: true,
+          }),
+        }}
       >
-        <OverviewPageHeader
-          addBasePath={addBasePath}
-          overlap={solutions.length}
-          showDevToolsLink
-          showManagementLink
-          title={<FormattedMessage id="home.header.title" defaultMessage="Home" />}
-        />
-
-        <div className="homContent">
-          {solutions.length ? (
-            <SolutionsSection
-              addBasePath={addBasePath}
-              solutions={solutions}
-              directories={directories}
-            />
-          ) : null}
-
-          <EuiFlexGroup
-            className={`homData ${
-              addDataFeatures.length === 1 && manageDataFeatures.length === 1
-                ? 'homData--compressed'
-                : 'homData--expanded'
-            }`}
-          >
-            <EuiFlexItem>
-              <AddData addBasePath={addBasePath} features={addDataFeatures} />
-            </EuiFlexItem>
-
-            <EuiFlexItem>
-              <ManageData addBasePath={addBasePath} features={manageDataFeatures} />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
-          <EuiHorizontalRule margin="xl" aria-hidden="true" />
-
-          <OverviewPageFooter
+        {solutions.length ? (
+          <SolutionsSection
             addBasePath={addBasePath}
-            path={HOME_APP_BASE_PATH}
-            onSetDefaultRoute={() => {
-              trackUiMetric(METRIC_TYPE.CLICK, 'set_home_as_default_route');
-            }}
-            onChangeDefaultRoute={() => {
-              trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
-            }}
+            solutions={solutions}
+            directories={directories}
           />
-        </div>
-      </main>
+        ) : null}
+
+        <EuiFlexGroup
+          className={`homData ${
+            addDataFeatures.length === 1 && manageDataFeatures.length === 1
+              ? 'homData--compressed'
+              : 'homData--expanded'
+          }`}
+        >
+          <EuiFlexItem>
+            <AddData addBasePath={addBasePath} features={addDataFeatures} />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <ManageData addBasePath={addBasePath} features={manageDataFeatures} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiHorizontalRule margin="xl" aria-hidden="true" />
+
+        <OverviewPageFooter
+          addBasePath={addBasePath}
+          path={HOME_APP_BASE_PATH}
+          onSetDefaultRoute={() => {
+            trackUiMetric(METRIC_TYPE.CLICK, 'set_home_as_default_route');
+          }}
+          onChangeDefaultRoute={() => {
+            trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
+          }}
+        />
+      </EuiPageTemplate>
     );
   }
 

src/plugins/home/public/application/components/home.test.js

@@ -25,8 +25,8 @@ jest.mock('../kibana_services', () => ({
 }));
 
 jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
+  overviewPageActions: jest.fn().mockReturnValue([]),
   OverviewPageFooter: jest.fn().mockReturnValue(<></>),
-  OverviewPageHeader: jest.fn().mockReturnValue(<></>),
 }));
 
 describe('home', () => {

src/plugins/kibana_overview/public/components/_overview.scss

@@ -1,27 +1,11 @@
-@import '../../../../core/public/mixins';
-
-.kbnOverviewWrapper {
-  @include kibanaFullBodyMinHeight();
-  background-color: $euiColorEmptyShade;
+// Ensure card heights are stretched equally when wrapped with this element
+.kbnRedirectCrossAppLinks {
+  align-items: flex-start;
   display: flex;
+  flex: 1;
   flex-direction: column;
 }
 
-.kbnOverviewContent {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: $euiSizeXL $euiSize;
-  width: 100%;
-
-  // Ensure card heights are stretched equally when wrapped with this element
-  .kbnRedirectCrossAppLinks {
-    align-items: flex-start;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-}
-
 .kbnOverviewApps__item {
   .kbnOverviewApps__group--primary & {
     @include euiBreakpoint('m', 'l', 'xl') {
@@ -109,11 +93,6 @@
   }
 }
 
-// Accounting for no `flush="both"` prop on EuiButtonEmpty
-.kbnOverviewDataAdd__actionButton {
-  margin-right: 0;
-}
-
 .kbnOverviewDataManage__item:not(:only-child) {
   @include euiBreakpoint('m', 'l', 'xl') {
     flex: 0 0 calc(50% - #{$euiSizeM * 2});

src/plugins/kibana_overview/public/components/add_data/add_data.tsx

@@ -45,7 +45,7 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => {
           <div>
             <EuiButtonEmpty
               className="kbnOverviewDataAdd__actionButton"
-              flush="left"
+              flush="both"
               href={addBasePath('#/tutorial_directory/sampleData')}
               iconType="visTable"
               size="xs"