[home] Fix add sample data page layout (elastic#102647)

* Fix add sample data layout * remove useless change * use KibanaPageTemplate * use pageHeader for the header * move tabs inside header * tweaks * fix imports
pgayvallet · Jun 21, 2021 · 8247b2d · 8247b2d
1 parent ed5e184
commit 8247b2d
Showing 1 changed file with 33 additions and 59 deletions.
diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -9,27 +9,15 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { Synopsis } from './synopsis';
 import { SampleDataSetCards } from './sample_data_set_cards';
 import { getServices } from '../kibana_services';
-
-import {
-  EuiPage,
-  EuiTabs,
-  EuiTab,
-  EuiFlexItem,
-  EuiFlexGrid,
-  EuiFlexGroup,
-  EuiSpacer,
-  EuiTitle,
-  EuiPageBody,
-} from '@elastic/eui';
-
+import { KibanaPageTemplate } from '../../../../kibana_react/public';
 import { getTutorials } from '../load_tutorials';
 
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-
 const ALL_TAB_ID = 'all';
 const SAMPLE_DATA_TAB_ID = 'sampleData';
 
@@ -184,17 +172,13 @@ class TutorialDirectoryUi extends React.Component {
     });
   };
 
-  renderTabs = () => {
-    return this.tabs.map((tab, index) => (
-      <EuiTab
-        data-test-subj={`homeTab-${tab.id}`}
-        onClick={() => this.onSelectedTabChanged(tab.id)}
-        isSelected={tab.id === this.state.selectedTabId}
-        key={index}
-      >
-        {tab.name}
-      </EuiTab>
-    ));
+  getTabs = () => {
+    return this.tabs.map((tab) => ({
+      label: tab.name,
+      onClick: () => this.onSelectedTabChanged(tab.id),
+      isSelected: tab.id === this.state.selectedTabId,
+      'data-test-subj': `homeTab-${tab.id}`,
+    }));
   };
 
   renderTabContent = () => {
@@ -258,41 +242,31 @@ class TutorialDirectoryUi extends React.Component {
     ) : null;
   };
 
-  renderHeader = () => {
-    const notices = this.renderNotices();
+  render() {
     const headerLinks = this.renderHeaderLinks();
+    const tabs = this.getTabs();
+    const notices = this.renderNotices();
 
     return (
-      <>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>
-                <FormattedMessage
-                  id="home.tutorial.addDataToKibanaTitle"
-                  defaultMessage="Add data"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          {headerLinks ? <EuiFlexItem grow={false}>{headerLinks}</EuiFlexItem> : null}
-        </EuiFlexGroup>
-        {notices}
-      </>
-    );
-  };
-
-  render() {
-    return (
-      <EuiPage restrictWidth={1200}>
-        <EuiPageBody>
-          {this.renderHeader()}
-          <EuiSpacer size="m" />
-          <EuiTabs>{this.renderTabs()}</EuiTabs>
-          <EuiSpacer />
-          {this.renderTabContent()}
-        </EuiPageBody>
-      </EuiPage>
+      <KibanaPageTemplate
+        restrictWidth={1200}
+        template="empty"
+        pageHeader={{
+          pageTitle: (
+            <FormattedMessage id="home.tutorial.addDataToKibanaTitle" defaultMessage="Add data" />
+          ),
+          tabs,
+          rightSideItems: headerLinks ? [headerLinks] : [],
+        }}
+      >
+        {notices && (
+          <>
+            {notices}
+            <EuiSpacer size="s" />
+          </>
+        )}
+        {this.renderTabContent()}
+      </KibanaPageTemplate>
     );
   }
 }