Skip to content

Commit ebc33a2

Browse files
author
cchaos
committed
Example: Page Header
1 parent 56cf855 commit ebc33a2

2 files changed

Lines changed: 97 additions & 134 deletions

File tree

‎x-pack/plugins/index_management/public/application/sections/home/home.tsx‎

Lines changed: 53 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,7 @@
88
import React, { useEffect } from 'react';
99
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
1010
import { FormattedMessage } from '@kbn/i18n/react';
11-
import {
12-
EuiButtonEmpty,
13-
EuiFlexGroup,
14-
EuiFlexItem,
15-
EuiPageBody,
16-
EuiPageContent,
17-
EuiSpacer,
18-
EuiTab,
19-
EuiTabs,
20-
EuiTitle,
21-
} from '@elastic/eui';
11+
import { EuiButtonEmpty, EuiPageHeader, EuiSpacer } from '@elastic/eui';
2212
import { documentationService } from '../../services/documentation';
2313
import { DataStreamList } from './data_stream_list';
2414
import { IndexList } from './index_list';
@@ -93,73 +83,59 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
9383
}, []);
9484

9585
return (
96-
<EuiPageBody>
97-
<EuiPageContent>
98-
<EuiTitle size="l">
99-
<EuiFlexGroup alignItems="center">
100-
<EuiFlexItem grow={true}>
101-
<h1 data-test-subj="appTitle">
102-
<FormattedMessage
103-
id="xpack.idxMgmt.home.appTitle"
104-
defaultMessage="Index Management"
105-
/>
106-
</h1>
107-
</EuiFlexItem>
108-
<EuiFlexItem grow={false}>
109-
<EuiButtonEmpty
110-
href={documentationService.getIdxMgmtDocumentationLink()}
111-
target="_blank"
112-
iconType="help"
113-
data-test-subj="documentationLink"
114-
>
115-
<FormattedMessage
116-
id="xpack.idxMgmt.home.idxMgmtDocsLinkText"
117-
defaultMessage="Index Management docs"
118-
/>
119-
</EuiButtonEmpty>
120-
</EuiFlexItem>
121-
</EuiFlexGroup>
122-
</EuiTitle>
86+
<>
87+
<EuiPageHeader
88+
pageTitle={
89+
<span data-test-subj="appTitle">
90+
<FormattedMessage id="xpack.idxMgmt.home.appTitle" defaultMessage="Index Management" />
91+
</span>
92+
}
93+
bottomBorder
94+
rightSideItems={[
95+
<EuiButtonEmpty
96+
href={documentationService.getIdxMgmtDocumentationLink()}
97+
target="_blank"
98+
iconType="help"
99+
data-test-subj="documentationLink"
100+
>
101+
<FormattedMessage
102+
id="xpack.idxMgmt.home.idxMgmtDocsLinkText"
103+
defaultMessage="Index Management docs"
104+
/>
105+
</EuiButtonEmpty>,
106+
]}
107+
tabs={tabs.map((tab) => ({
108+
onClick: () => onSectionChange(tab.id),
109+
isSelected: tab.id === section,
110+
key: tab.id,
111+
'data-test-subj': `${tab.id}Tab`,
112+
label: tab.name,
113+
}))}
114+
/>
123115

124-
<EuiSpacer size="m" />
116+
<EuiSpacer size="l" />
125117

126-
<EuiTabs>
127-
{tabs.map((tab) => (
128-
<EuiTab
129-
onClick={() => onSectionChange(tab.id)}
130-
isSelected={tab.id === section}
131-
key={tab.id}
132-
data-test-subj={`${tab.id}Tab`}
133-
>
134-
{tab.name}
135-
</EuiTab>
136-
))}
137-
</EuiTabs>
138-
139-
<EuiSpacer size="m" />
140-
141-
<Switch>
142-
<Route
143-
exact
144-
path={[`/${Section.DataStreams}`, `/${Section.DataStreams}/:dataStreamName?`]}
145-
component={DataStreamList}
146-
/>
147-
<Route exact path={`/${Section.Indices}`} component={IndexList} />
148-
<Route
149-
exact
150-
path={[`/${Section.IndexTemplates}`, `/${Section.IndexTemplates}/:templateName?`]}
151-
component={TemplateList}
152-
/>
153-
<Route
154-
exact
155-
path={[
156-
`/${Section.ComponentTemplates}`,
157-
`/${Section.ComponentTemplates}/:componentTemplateName?`,
158-
]}
159-
component={ComponentTemplateList}
160-
/>
161-
</Switch>
162-
</EuiPageContent>
163-
</EuiPageBody>
118+
<Switch>
119+
<Route
120+
exact
121+
path={[`/${Section.DataStreams}`, `/${Section.DataStreams}/:dataStreamName?`]}
122+
component={DataStreamList}
123+
/>
124+
<Route exact path={`/${Section.Indices}`} component={IndexList} />
125+
<Route
126+
exact
127+
path={[`/${Section.IndexTemplates}`, `/${Section.IndexTemplates}/:templateName?`]}
128+
component={TemplateList}
129+
/>
130+
<Route
131+
exact
132+
path={[
133+
`/${Section.ComponentTemplates}`,
134+
`/${Section.ComponentTemplates}/:componentTemplateName?`,
135+
]}
136+
component={ComponentTemplateList}
137+
/>
138+
</Switch>
139+
</>
164140
);
165141
};

‎x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx‎

Lines changed: 44 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
* 2.0; you may not use this file except in compliance with the Elastic License
55
* 2.0.
66
*/
7-
87
import {
98
EuiButton,
109
EuiButtonIcon,
@@ -14,15 +13,11 @@ import {
1413
EuiInMemoryTable,
1514
EuiLink,
1615
EuiPageContent,
17-
EuiPageContentBody,
18-
EuiPageContentHeader,
19-
EuiPageContentHeaderSection,
16+
EuiPageHeader,
2017
EuiSpacer,
21-
EuiText,
22-
EuiTitle,
2318
EuiToolTip,
2419
} from '@elastic/eui';
25-
import React, { Component, Fragment } from 'react';
20+
import React, { Component } from 'react';
2621

2722
import { i18n } from '@kbn/i18n';
2823
import { FormattedMessage } from '@kbn/i18n/react';
@@ -136,64 +131,56 @@ export class RoleMappingsGridPage extends Component<Props, State> {
136131
}
137132

138133
return (
139-
<EuiPageContent>
140-
<EuiPageContentHeader>
141-
<EuiPageContentHeaderSection>
142-
<EuiTitle>
143-
<h2>
144-
<FormattedMessage
145-
id="xpack.security.management.roleMappings.roleMappingTitle"
146-
defaultMessage="Role Mappings"
147-
/>
148-
</h2>
149-
</EuiTitle>
150-
<EuiText color="subdued" size="s">
151-
<p>
152-
<FormattedMessage
153-
id="xpack.security.management.roleMappings.roleMappingDescription"
154-
defaultMessage="Role mappings define which roles are assigned to users from an external identity provider. {learnMoreLink}"
155-
values={{
156-
learnMoreLink: (
157-
<EuiLink
158-
href={this.props.docLinks.links.security.mappingRoles}
159-
external={true}
160-
target="_blank"
161-
>
162-
<FormattedMessage
163-
id="xpack.security.management.roleMappings.learnMoreLinkText"
164-
defaultMessage="Learn more."
165-
/>
166-
</EuiLink>
167-
),
168-
}}
169-
/>
170-
</p>
171-
</EuiText>
172-
</EuiPageContentHeaderSection>
173-
<EuiPageContentHeaderSection>
134+
<>
135+
<EuiPageHeader
136+
bottomBorder
137+
pageTitle={
138+
<FormattedMessage
139+
id="xpack.security.management.roleMappings.roleMappingTitle"
140+
defaultMessage="Role Mappings"
141+
/>
142+
}
143+
description={
144+
<FormattedMessage
145+
id="xpack.security.management.roleMappings.roleMappingDescription"
146+
defaultMessage="Role mappings define which roles are assigned to users from an external identity provider. {learnMoreLink}"
147+
values={{
148+
learnMoreLink: (
149+
<EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true}>
150+
<FormattedMessage
151+
id="xpack.security.management.roleMappings.learnMoreLinkText"
152+
defaultMessage="Learn more."
153+
/>
154+
</EuiLink>
155+
),
156+
}}
157+
/>
158+
}
159+
rightSideItems={[
174160
<EuiButton
161+
fill
162+
iconType="plusInCircleFilled"
175163
data-test-subj="createRoleMappingButton"
176164
{...reactRouterNavigate(this.props.history, EDIT_ROLE_MAPPING_PATH)}
177165
>
178166
<FormattedMessage
179167
id="xpack.security.management.roleMappings.createRoleMappingButtonLabel"
180168
defaultMessage="Create role mapping"
181169
/>
182-
</EuiButton>
183-
</EuiPageContentHeaderSection>
184-
</EuiPageContentHeader>
185-
<EuiPageContentBody>
186-
<Fragment>
187-
{!this.state.hasCompatibleRealms && (
188-
<>
189-
<NoCompatibleRealms />
190-
<EuiSpacer />
191-
</>
192-
)}
193-
{this.renderTable()}
194-
</Fragment>
195-
</EuiPageContentBody>
196-
</EuiPageContent>
170+
</EuiButton>,
171+
]}
172+
/>
173+
174+
<EuiSpacer size="l" />
175+
176+
{!this.state.hasCompatibleRealms && (
177+
<>
178+
<NoCompatibleRealms />
179+
<EuiSpacer />
180+
</>
181+
)}
182+
{this.renderTable()}
183+
</>
197184
);
198185
}
199186

0 commit comments

Comments
 (0)