Skip to content

Commit

Permalink
Home & Kibana Overview Page Template Update (elastic#103003)
Browse files Browse the repository at this point in the history
* apply page template comp to kibana overview

* apply page template comp to home page

* clean up

* strip null actions from array

* update snapshot and remove outdated import

* fix tests and update snapshots

* update tests and snapshots

* Switch to KibanaPageTemplate; use template=“empty”

* update snapshots

* make `EuiCard` transparent

* updated snapshots

* restored data-test-subj="homeApp"

* change scope of styles

* update snapshots
  • Loading branch information
MichaelMarcialis authored Jun 26, 2021
1 parent c6d04a9 commit df8787b
Show file tree
Hide file tree
Showing 23 changed files with 1,743 additions and 2,185 deletions.
1,344 changes: 612 additions & 732 deletions src/plugins/home/public/application/components/__snapshots__/home.test.js.snap

Large diffs are not rendered by default.

16 changes: 0 additions & 16 deletions src/plugins/home/public/application/components/_home.scss
Original file line number Diff line number Diff line change
@@ -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;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.homSolutions {
margin-top: -($euiSizeXL + $euiSizeL + $euiSizeM);
}

.homSolutions__content {
min-height: $euiSize * 16;

Expand Down
99 changes: 49 additions & 50 deletions src/plugins/home/public/application/components/home.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand All @@ -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>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
22 changes: 2 additions & 20 deletions src/plugins/kibana_overview/public/components/_overview.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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});
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit df8787b

Please sign in to comment.