[7.x] Home & Kibana Overview Page Template Update (#103003)

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

@@ -1,19 +1,3 @@
-@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%;
-}
-
 .homData--expanded {
   flex-direction: column;
 

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

@@ -1,7 +1,3 @@
-.homSolutions {
-  margin-top: -($euiSizeXL + $euiSizeL + $euiSizeM);
-}
-
 .homSolutions__content {
   min-height: $euiSize * 16;
 

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

@@ -13,8 +13,9 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
 import {
+  KibanaPageTemplate,
+  overviewPageActions,
   OverviewPageFooter,
-  OverviewPageHeader,
 } from '../../../../../../src/plugins/kibana_react/public';
 import { HOME_APP_BASE_PATH } from '../../../common/constants';
 import { FeatureCatalogueCategory } from '../../services';
@@ -113,7 +114,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 +125,56 @@ export class Home extends Component {
     }
 
     return (
-      <main
-        aria-labelledby="kbnOverviewPageHeader__title"
-        className="homWrapper"
+      <KibanaPageTemplate
         data-test-subj="homeApp"
+        pageHeader={{
+          pageTitle: <FormattedMessage id="home.header.title" defaultMessage="Home" />,
+          rightSideItems: overviewPageActions({
+            addBasePath,
+            application,
+            showDevToolsLink: true,
+            showManagementLink: true,
+          }),
+        }}
+        template="empty"
       >
-        <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');
+          }}
+        />
+      </KibanaPageTemplate>
     );
   }
 

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,18 +1,5 @@
-@import '../../../../core/public/mixins';
-
-.kbnOverviewWrapper {
-  @include kibanaFullBodyMinHeight();
-  background-color: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-}
-
-.kbnOverviewContent {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: $euiSizeXL $euiSize;
-  width: 100%;
-
+.kbnOverviewApps__item,
+.kbnOverviewMore__item {
   // Ensure card heights are stretched equally when wrapped with this element
   .kbnRedirectCrossAppLinks {
     align-items: flex-start;
@@ -109,11 +96,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"

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

@@ -74,7 +74,7 @@ export const GettingStarted: FC<Props> = ({ addBasePath, isDarkTheme, apps }) =>
                 <EuiFlexItem key={title}>
                   <EuiCard
                     description={subtitle}
-                    display="plain"
+                    display="transparent"
                     icon={<EuiIcon color="text" size="l" type={icon} />}
                     layout="horizontal"
                     paddingSize="none"