Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[home] Fix add sample data page layout #102647

Merged
merged 9 commits into from
Jun 21, 2021
Merged

[home] Fix add sample data page layout #102647

Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
28dfd22
Fix add sample data layout
pgayvallet Jun 18, 2021
91bab98
remove useless change
pgayvallet Jun 18, 2021
aa93a0c
Merge remote-tracking branch 'upstream/master' into kbn-102260-add-sa…
pgayvallet Jun 21, 2021
aaed4d7
use KibanaPageTemplate
pgayvallet Jun 21, 2021
b0a2cf5
Merge remote-tracking branch 'upstream/master' into kbn-102260-add-sa…
pgayvallet Jun 21, 2021
9c0b476
use pageHeader for the header
pgayvallet Jun 21, 2021
3f86624
move tabs inside header
pgayvallet Jun 21, 2021
4420799
tweaks
pgayvallet Jun 21, 2021
52cee52
fix imports
pgayvallet Jun 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 34 additions & 52 deletions src/plugins/home/public/application/components/tutorial_directory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,22 @@
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
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 { getTutorials } from '../load_tutorials';

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 { KibanaPageTemplate } from '../../../../kibana_react/public';
import { getTutorials } from '../load_tutorials';

const ALL_TAB_ID = 'all';
const SAMPLE_DATA_TAB_ID = 'sampleData';
Expand Down Expand Up @@ -184,17 +180,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 = () => {
Expand Down Expand Up @@ -258,41 +250,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>
);
}
}
Expand Down