mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
Remove deprecated EUI components in kibana_react (#166225)
## Summary Closes https://github.com/elastic/kibana/issues/161422 In this PR: - [x] Removes `KibanaPageTemplate` utilities from `kibana_react` - [x] Migrates remaining users of `KibanaPageTemplate` from `kibana_react` to the one from `@kbn/shared-ux-page-kibana-template` - [x] `src/plugins/home/public/application/components/tutorial_directory.js` - [x] `src/plugins/home/public/application/components/tutorial/tutorial.js` - [x] `x-pack/plugins/osquery/public/components/empty_state.tsx` ## Visual Changes Below are the main visual differences this PR introduces. Sample data page before: <img width="1419" alt="Screenshot 2023-09-13 at 12 12 11" src="cbad5bd2-9c51-486c-a48d-ac44a80cdbf7"> Sample data page now: <img width="1456" alt="Screenshot 2023-09-13 at 12 12 18" src="4118db78-89e8-41ed-a3d3-51a221dde857"> Tutorials page before: <img width="1402" alt="Screenshot 2023-09-13 at 13 09 58" src="b51af548-211a-4a59-9143-b82f2ff55678"> Tutorials page now: <img width="1439" alt="Screenshot 2023-09-13 at 13 10 04" src="f71590a3-7c3d-4f60-a460-47aacdfcbf09"> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Vadim Kibana
GitHub
parent
a71242686a
commit
dfcf60ae33
21 changed files with 159 additions and 1094 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
exports[`KibanaPageTemplate render basic template 1`] = `
|
exports[`KibanaPageTemplate render basic template 1`] = `
|
||||||
<div
|
<div
|
||||||
class="euiPageTemplate kbnPageTemplate emotion-euiPageOuter-row-grow"
|
class="euiPageTemplate kbnPageTemplate emotion-euiPageOuter-row-grow"
|
||||||
style="min-block-size:max(0, 100vh);padding-block-start:0"
|
style="min-block-size:calc(100vh - var(--euiFixedHeadersOffset, 0));padding-block-start:0"
|
||||||
>
|
>
|
||||||
<main
|
<main
|
||||||
class="emotion-euiPageInner"
|
class="emotion-euiPageInner"
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,8 @@ exports[`KibanaPageTemplateInner isEmpty no pageHeader 1`] = `
|
||||||
exports[`KibanaPageTemplateInner isEmpty pageHeader & children 1`] = `
|
exports[`KibanaPageTemplateInner isEmpty pageHeader & children 1`] = `
|
||||||
<_EuiPageTemplate
|
<_EuiPageTemplate
|
||||||
className="kbnPageTemplate"
|
className="kbnPageTemplate"
|
||||||
minHeight={0}
|
grow={false}
|
||||||
|
minHeight="calc(100vh - var(--euiFixedHeadersOffset, 0))"
|
||||||
offset={0}
|
offset={0}
|
||||||
>
|
>
|
||||||
<_EuiPageHeader
|
<_EuiPageHeader
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,8 @@ export const KibanaPageTemplateInner: FC<Props> = ({
|
||||||
// the following props can be removed to allow the template to auto-handle
|
// the following props can be removed to allow the template to auto-handle
|
||||||
// the fixed header and banner heights.
|
// the fixed header and banner heights.
|
||||||
offset={0}
|
offset={0}
|
||||||
minHeight={0}
|
minHeight={header ? 'calc(100vh - var(--euiFixedHeadersOffset, 0))' : 0}
|
||||||
|
grow={header ? false : undefined}
|
||||||
{...rest}
|
{...rest}
|
||||||
>
|
>
|
||||||
{sideBar}
|
{sideBar}
|
||||||
|
|
|
||||||
|
|
@ -1,160 +1,166 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
|
exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
|
||||||
<KibanaPageTemplate
|
<_KibanaPageTemplate
|
||||||
template="empty"
|
template="empty"
|
||||||
>
|
>
|
||||||
<div>
|
<_EuiPageSection>
|
||||||
<InjectIntl(IntroductionUI)
|
<div>
|
||||||
basePath={
|
<InjectIntl(IntroductionUI)
|
||||||
Object {
|
basePath={
|
||||||
"prepend": [Function],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
description="tutorial used to drive jest tests"
|
|
||||||
notices={null}
|
|
||||||
title="jest test tutorial"
|
|
||||||
/>
|
|
||||||
<EuiSpacer />
|
|
||||||
<InjectIntl(InstructionSetUi)
|
|
||||||
instructionVariants={
|
|
||||||
Array [
|
|
||||||
Object {
|
Object {
|
||||||
"id": "platform id",
|
"prepend": [Function],
|
||||||
"instructions": Array [
|
}
|
||||||
Object {
|
|
||||||
"title": "onPrem instructions",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
isCloudEnabled={false}
|
|
||||||
offset={1}
|
|
||||||
onStatusCheck={[Function]}
|
|
||||||
paramValues={Object {}}
|
|
||||||
replaceTemplateStrings={[Function]}
|
|
||||||
setParameter={[Function]}
|
|
||||||
statusCheckState="NOT_CHECKED"
|
|
||||||
title="Instruction title"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</KibanaPageTemplate>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`isCloudEnabled is false should render ON_PREM instructions with instruction toggle 1`] = `
|
|
||||||
<KibanaPageTemplate
|
|
||||||
template="empty"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<InjectIntl(IntroductionUI)
|
|
||||||
basePath={
|
|
||||||
Object {
|
|
||||||
"prepend": [Function],
|
|
||||||
}
|
}
|
||||||
}
|
description="tutorial used to drive jest tests"
|
||||||
description="tutorial used to drive jest tests"
|
notices={null}
|
||||||
iconType="logoApache"
|
title="jest test tutorial"
|
||||||
notices={null}
|
/>
|
||||||
title="jest test tutorial"
|
<EuiSpacer />
|
||||||
/>
|
<InjectIntl(InstructionSetUi)
|
||||||
<EuiSpacer />
|
instructionVariants={
|
||||||
<EuiFormRow
|
|
||||||
describedByIds={Array []}
|
|
||||||
display="row"
|
|
||||||
hasChildLabel={true}
|
|
||||||
hasEmptyLabelSpace={false}
|
|
||||||
labelType="label"
|
|
||||||
>
|
|
||||||
<EuiButtonGroup
|
|
||||||
buttonSize="m"
|
|
||||||
color="text"
|
|
||||||
idSelected="onPrem"
|
|
||||||
isFullWidth={true}
|
|
||||||
legend="Deployment type"
|
|
||||||
onChange={[Function]}
|
|
||||||
options={
|
|
||||||
Array [
|
Array [
|
||||||
Object {
|
Object {
|
||||||
"data-test-subj": "selfManagedTutorial",
|
"id": "platform id",
|
||||||
"id": "onPrem",
|
"instructions": Array [
|
||||||
"label": "Self managed",
|
Object {
|
||||||
},
|
"title": "onPrem instructions",
|
||||||
Object {
|
},
|
||||||
"data-test-subj": "onCloudTutorial",
|
],
|
||||||
"id": "onPremElasticCloud",
|
|
||||||
"label": "Elastic Cloud",
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
isCloudEnabled={false}
|
||||||
|
offset={1}
|
||||||
|
onStatusCheck={[Function]}
|
||||||
|
paramValues={Object {}}
|
||||||
|
replaceTemplateStrings={[Function]}
|
||||||
|
setParameter={[Function]}
|
||||||
|
statusCheckState="NOT_CHECKED"
|
||||||
|
title="Instruction title"
|
||||||
/>
|
/>
|
||||||
</EuiFormRow>
|
</div>
|
||||||
<EuiSpacer />
|
</_EuiPageSection>
|
||||||
<InjectIntl(InstructionSetUi)
|
</_KibanaPageTemplate>
|
||||||
instructionVariants={
|
`;
|
||||||
Array [
|
|
||||||
|
exports[`isCloudEnabled is false should render ON_PREM instructions with instruction toggle 1`] = `
|
||||||
|
<_KibanaPageTemplate
|
||||||
|
template="empty"
|
||||||
|
>
|
||||||
|
<_EuiPageSection>
|
||||||
|
<div>
|
||||||
|
<InjectIntl(IntroductionUI)
|
||||||
|
basePath={
|
||||||
Object {
|
Object {
|
||||||
"id": "platform id",
|
"prepend": [Function],
|
||||||
"instructions": Array [
|
}
|
||||||
|
}
|
||||||
|
description="tutorial used to drive jest tests"
|
||||||
|
iconType="logoApache"
|
||||||
|
notices={null}
|
||||||
|
title="jest test tutorial"
|
||||||
|
/>
|
||||||
|
<EuiSpacer />
|
||||||
|
<EuiFormRow
|
||||||
|
describedByIds={Array []}
|
||||||
|
display="row"
|
||||||
|
hasChildLabel={true}
|
||||||
|
hasEmptyLabelSpace={false}
|
||||||
|
labelType="label"
|
||||||
|
>
|
||||||
|
<EuiButtonGroup
|
||||||
|
buttonSize="m"
|
||||||
|
color="text"
|
||||||
|
idSelected="onPrem"
|
||||||
|
isFullWidth={true}
|
||||||
|
legend="Deployment type"
|
||||||
|
onChange={[Function]}
|
||||||
|
options={
|
||||||
|
Array [
|
||||||
Object {
|
Object {
|
||||||
"title": "onPrem instructions",
|
"data-test-subj": "selfManagedTutorial",
|
||||||
|
"id": "onPrem",
|
||||||
|
"label": "Self managed",
|
||||||
},
|
},
|
||||||
],
|
Object {
|
||||||
},
|
"data-test-subj": "onCloudTutorial",
|
||||||
]
|
"id": "onPremElasticCloud",
|
||||||
}
|
"label": "Elastic Cloud",
|
||||||
isCloudEnabled={false}
|
},
|
||||||
offset={1}
|
]
|
||||||
onStatusCheck={[Function]}
|
}
|
||||||
paramValues={Object {}}
|
/>
|
||||||
replaceTemplateStrings={[Function]}
|
</EuiFormRow>
|
||||||
setParameter={[Function]}
|
<EuiSpacer />
|
||||||
statusCheckState="NOT_CHECKED"
|
<InjectIntl(InstructionSetUi)
|
||||||
title="Instruction title"
|
instructionVariants={
|
||||||
/>
|
Array [
|
||||||
</div>
|
Object {
|
||||||
</KibanaPageTemplate>
|
"id": "platform id",
|
||||||
|
"instructions": Array [
|
||||||
|
Object {
|
||||||
|
"title": "onPrem instructions",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
isCloudEnabled={false}
|
||||||
|
offset={1}
|
||||||
|
onStatusCheck={[Function]}
|
||||||
|
paramValues={Object {}}
|
||||||
|
replaceTemplateStrings={[Function]}
|
||||||
|
setParameter={[Function]}
|
||||||
|
statusCheckState="NOT_CHECKED"
|
||||||
|
title="Instruction title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</_EuiPageSection>
|
||||||
|
</_KibanaPageTemplate>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = `
|
exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = `
|
||||||
<KibanaPageTemplate
|
<_KibanaPageTemplate
|
||||||
template="empty"
|
template="empty"
|
||||||
>
|
>
|
||||||
<div>
|
<_EuiPageSection>
|
||||||
<InjectIntl(IntroductionUI)
|
<div>
|
||||||
basePath={
|
<InjectIntl(IntroductionUI)
|
||||||
Object {
|
basePath={
|
||||||
"prepend": [Function],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
description="tutorial used to drive jest tests"
|
|
||||||
iconType="logoApache"
|
|
||||||
notices={null}
|
|
||||||
title="jest test tutorial"
|
|
||||||
/>
|
|
||||||
<EuiSpacer />
|
|
||||||
<InjectIntl(InstructionSetUi)
|
|
||||||
instructionVariants={
|
|
||||||
Array [
|
|
||||||
Object {
|
Object {
|
||||||
"id": "platform id",
|
"prepend": [Function],
|
||||||
"instructions": Array [
|
}
|
||||||
Object {
|
}
|
||||||
"title": "elasticCloud instructions",
|
description="tutorial used to drive jest tests"
|
||||||
},
|
iconType="logoApache"
|
||||||
],
|
notices={null}
|
||||||
},
|
title="jest test tutorial"
|
||||||
]
|
/>
|
||||||
}
|
<EuiSpacer />
|
||||||
isCloudEnabled={true}
|
<InjectIntl(InstructionSetUi)
|
||||||
offset={1}
|
instructionVariants={
|
||||||
onStatusCheck={[Function]}
|
Array [
|
||||||
paramValues={Object {}}
|
Object {
|
||||||
replaceTemplateStrings={[Function]}
|
"id": "platform id",
|
||||||
setParameter={[Function]}
|
"instructions": Array [
|
||||||
statusCheckState="NOT_CHECKED"
|
Object {
|
||||||
title="Instruction title"
|
"title": "elasticCloud instructions",
|
||||||
/>
|
},
|
||||||
</div>
|
],
|
||||||
</KibanaPageTemplate>
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
isCloudEnabled={true}
|
||||||
|
offset={1}
|
||||||
|
onStatusCheck={[Function]}
|
||||||
|
paramValues={Object {}}
|
||||||
|
replaceTemplateStrings={[Function]}
|
||||||
|
setParameter={[Function]}
|
||||||
|
statusCheckState="NOT_CHECKED"
|
||||||
|
title="Instruction title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</_EuiPageSection>
|
||||||
|
</_KibanaPageTemplate>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ import * as StatusCheckStates from './status_check_states';
|
||||||
import { injectI18n, FormattedMessage } from '@kbn/i18n-react';
|
import { injectI18n, FormattedMessage } from '@kbn/i18n-react';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { getServices } from '../../kibana_services';
|
import { getServices } from '../../kibana_services';
|
||||||
import { KibanaPageTemplate } from '@kbn/kibana-react-plugin/public';
|
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||||
|
|
||||||
const INSTRUCTIONS_TYPE = {
|
const INSTRUCTIONS_TYPE = {
|
||||||
ELASTIC_CLOUD: 'elasticCloud',
|
ELASTIC_CLOUD: 'elasticCloud',
|
||||||
|
|
@ -360,7 +360,7 @@ class TutorialUi extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
let content;
|
let content;
|
||||||
if (this.state.notFound) {
|
if (this.state.notFound) {
|
||||||
content = (
|
return (
|
||||||
<KibanaPageTemplate
|
<KibanaPageTemplate
|
||||||
isEmptyState={true}
|
isEmptyState={true}
|
||||||
pageHeader={{
|
pageHeader={{
|
||||||
|
|
@ -435,7 +435,11 @@ class TutorialUi extends React.Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <KibanaPageTemplate template="empty">{content}</KibanaPageTemplate>;
|
return (
|
||||||
|
<KibanaPageTemplate template="empty">
|
||||||
|
<KibanaPageTemplate.Section>{content}</KibanaPageTemplate.Section>
|
||||||
|
</KibanaPageTemplate>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ import { SampleDataTab } from '@kbn/home-sample-data-tab';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { Synopsis } from './synopsis';
|
import { Synopsis } from './synopsis';
|
||||||
import { getServices } from '../kibana_services';
|
import { getServices } from '../kibana_services';
|
||||||
import { KibanaPageTemplate } from '@kbn/kibana-react-plugin/public';
|
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||||
import { getTutorials } from '../load_tutorials';
|
import { getTutorials } from '../load_tutorials';
|
||||||
|
|
||||||
const SAMPLE_DATA_TAB_ID = 'sampleData';
|
const SAMPLE_DATA_TAB_ID = 'sampleData';
|
||||||
|
|
@ -257,7 +257,7 @@ class TutorialDirectoryUi extends React.Component {
|
||||||
rightSideItems: headerLinks ? [headerLinks] : [],
|
rightSideItems: headerLinks ? [headerLinks] : [],
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{this.renderTabContent()}
|
<KibanaPageTemplate.Section>{this.renderTabContent()}</KibanaPageTemplate.Section>
|
||||||
</KibanaPageTemplate>
|
</KibanaPageTemplate>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -54,17 +54,13 @@ export { POSITIONS, WEIGHTS, TOOLBAR_BUTTON_SIZES, ToolbarButton } from './toolb
|
||||||
export { reactRouterNavigate, reactRouterOnClickHandler } from './react_router_navigate';
|
export { reactRouterNavigate, reactRouterOnClickHandler } from './react_router_navigate';
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
KibanaPageTemplateProps,
|
|
||||||
NoDataPageActions,
|
NoDataPageActions,
|
||||||
NoDataPageActionsProps,
|
NoDataPageActionsProps,
|
||||||
NoDataPageProps,
|
NoDataPageProps,
|
||||||
ElasticAgentCardProps,
|
ElasticAgentCardProps,
|
||||||
} from './page_template';
|
} from './page_template';
|
||||||
export {
|
export {
|
||||||
KibanaPageTemplate,
|
|
||||||
KibanaPageTemplateSolutionNavAvatar,
|
KibanaPageTemplateSolutionNavAvatar,
|
||||||
NO_DATA_PAGE_MAX_WIDTH,
|
|
||||||
NO_DATA_PAGE_TEMPLATE_PROPS,
|
|
||||||
NO_DATA_RECOMMENDED,
|
NO_DATA_RECOMMENDED,
|
||||||
NoDataPage,
|
NoDataPage,
|
||||||
ElasticAgentCard,
|
ElasticAgentCard,
|
||||||
|
|
|
||||||
|
|
@ -1,440 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`KibanaPageTemplate render basic template 1`] = `
|
|
||||||
<div
|
|
||||||
class="euiPage euiPageTemplate kbnPageTemplate emotion-euiPage-row-grow"
|
|
||||||
style="min-height:460px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiPageBody emotion-euiPageBody"
|
|
||||||
>
|
|
||||||
<header
|
|
||||||
class="euiPageHeader emotion-euiPageHeader-l-border"
|
|
||||||
title="test"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiPageHeaderContent emotion-euiPageHeaderContent-l"
|
|
||||||
style="max-width:1200px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexGroup euiPageHeaderContent__top emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexItem emotion-euiFlexItem-grow-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiText emotion-euiText-constrainedWidth-m"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
test
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiFlexItem emotion-euiFlexItem-growZero"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexItem emotion-euiFlexItem-growZero"
|
|
||||||
>
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div
|
|
||||||
class="euiPanel euiPanel--plain euiPageContent euiPageContent--borderRadiusNone emotion-euiPanel-grow-none-plain"
|
|
||||||
role="main"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiPageContentBody euiPageContentBody--paddingLarge euiPageContentBody--restrictWidth-default"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`KibanaPageTemplate render custom empty prompt only 1`] = `
|
|
||||||
<KibanaPageTemplateInner
|
|
||||||
isEmptyState={true}
|
|
||||||
>
|
|
||||||
<EuiEmptyPrompt
|
|
||||||
title={
|
|
||||||
<h1>
|
|
||||||
custom test
|
|
||||||
</h1>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</KibanaPageTemplateInner>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`KibanaPageTemplate render custom empty prompt with page header 1`] = `
|
|
||||||
<KibanaPageTemplateInner
|
|
||||||
isEmptyState={true}
|
|
||||||
pageHeader={
|
|
||||||
Object {
|
|
||||||
"description": "test",
|
|
||||||
"iconType": "test",
|
|
||||||
"rightSideItems": Array [
|
|
||||||
"test",
|
|
||||||
],
|
|
||||||
"title": "test",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<EuiEmptyPrompt
|
|
||||||
title={
|
|
||||||
<h1>
|
|
||||||
custom test
|
|
||||||
</h1>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</KibanaPageTemplateInner>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`KibanaPageTemplate render default empty prompt 1`] = `
|
|
||||||
<KibanaPageTemplateInner
|
|
||||||
isEmptyState={true}
|
|
||||||
pageHeader={
|
|
||||||
Object {
|
|
||||||
"description": "test",
|
|
||||||
"iconType": "test",
|
|
||||||
"rightSideItems": Array [
|
|
||||||
"test",
|
|
||||||
],
|
|
||||||
"title": "test",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`KibanaPageTemplate render noDataContent 1`] = `
|
|
||||||
<WithSolutionNavBar(NoDataConfigPage)
|
|
||||||
noDataConfig={
|
|
||||||
Object {
|
|
||||||
"actions": Object {
|
|
||||||
"beats": Object {},
|
|
||||||
"custom": Object {},
|
|
||||||
"elasticAgent": Object {},
|
|
||||||
},
|
|
||||||
"docsLink": "test",
|
|
||||||
"solution": "Elastic",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
solutionNav={
|
|
||||||
Object {
|
|
||||||
"icon": "solution",
|
|
||||||
"items": Array [
|
|
||||||
Object {
|
|
||||||
"id": "1",
|
|
||||||
"items": Array [
|
|
||||||
Object {
|
|
||||||
"id": "1.1",
|
|
||||||
"items": undefined,
|
|
||||||
"name": "Ingest Node Pipelines",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"id": "1.2",
|
|
||||||
"items": undefined,
|
|
||||||
"name": "Logstash Pipelines",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"id": "1.3",
|
|
||||||
"items": undefined,
|
|
||||||
"name": "Beats Central Management",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
"name": "Ingest",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"id": "2",
|
|
||||||
"items": Array [
|
|
||||||
Object {
|
|
||||||
"id": "2.1",
|
|
||||||
"items": undefined,
|
|
||||||
"name": "Index Management",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"id": "2.2",
|
|
||||||
"items": undefined,
|
|
||||||
"name": "Index Lifecycle Policies",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"id": "2.3",
|
|
||||||
"items": undefined,
|
|
||||||
"name": "Snapshot and Restore",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
"name": "Data",
|
|
||||||
"tabIndex": undefined,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
"name": "Solution",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`KibanaPageTemplate render solutionNav 1`] = `
|
|
||||||
<div
|
|
||||||
class="euiPage euiPageTemplate kbnPageTemplate emotion-euiPage-row-grow"
|
|
||||||
style="min-height:460px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiPageSideBar euiPageSideBar--sticky kbnPageTemplate__pageSideBar"
|
|
||||||
>
|
|
||||||
<nav
|
|
||||||
aria-hidden="false"
|
|
||||||
aria-labelledby="euiSideNav_generated-id_heading"
|
|
||||||
class="euiSideNav kbnPageTemplateSolutionNav"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
class="euiTitle euiSideNav__heading emotion-euiTitle-xs"
|
|
||||||
id="euiSideNav_generated-id_heading"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
aria-label="Solution"
|
|
||||||
class="euiAvatar euiAvatar--m euiAvatar--user kbnPageTemplateSolutionNavAvatar emotion-euiAvatar-user-m-uppercase-plain"
|
|
||||||
role="img"
|
|
||||||
title="Solution"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiAvatar__icon"
|
|
||||||
data-euiicon-type="solution"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<strong>
|
|
||||||
Solution
|
|
||||||
</strong>
|
|
||||||
</h2>
|
|
||||||
<div
|
|
||||||
class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
|
|
||||||
id="euiSideNav_generated-id_content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Ingest
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem__items"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--trunk"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Ingest Node Pipelines
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--trunk"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Logstash Pipelines
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--trunk"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Beats Central Management
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Data
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem__items"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--trunk"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Index Management
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--trunk"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Index Lifecycle Policies
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItem euiSideNavItem--trunk"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiSideNavItemButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__content"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
|
|
||||||
>
|
|
||||||
Snapshot and Restore
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<button
|
|
||||||
aria-label="Collapse side navigation"
|
|
||||||
class="euiButtonIcon kbnPageTemplateSolutionNavCollapseButton emotion-euiButtonIcon-s-empty-text"
|
|
||||||
title="Collapse side navigation"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="euiButtonIcon__icon"
|
|
||||||
color="inherit"
|
|
||||||
data-euiicon-type="menuLeft"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiPanel euiPanel--plain euiPageBody emotion-euiPanel-grow-none-plain-hasShadow-euiPageBody"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiPageBody emotion-euiPageBody-l"
|
|
||||||
>
|
|
||||||
<header
|
|
||||||
class="euiPageHeader emotion-euiPageHeader-headerMargin"
|
|
||||||
title="test"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiPageHeaderContent emotion-euiPageHeaderContent-border-l"
|
|
||||||
style="max-width:1200px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexGroup euiPageHeaderContent__top emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexItem emotion-euiFlexItem-grow-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiText emotion-euiText-constrainedWidth-m"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
test
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="euiFlexItem emotion-euiFlexItem-growZero"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiFlexItem emotion-euiFlexItem-growZero"
|
|
||||||
>
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div
|
|
||||||
class="euiPanel euiPanel--transparent euiPageContent euiPageContent--borderRadiusNone emotion-euiPanel-grow-none-transparent"
|
|
||||||
role="main"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="euiPageContentBody euiPageContentBody--restrictWidth-default"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
@ -6,9 +6,5 @@
|
||||||
* Side Public License, v 1.
|
* Side Public License, v 1.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export type { KibanaPageTemplateProps } from './page_template';
|
|
||||||
export { KibanaPageTemplate } from './page_template';
|
|
||||||
export { KibanaPageTemplateSolutionNavAvatar, KibanaPageTemplateSolutionNav } from './solution_nav';
|
export { KibanaPageTemplateSolutionNavAvatar, KibanaPageTemplateSolutionNav } from './solution_nav';
|
||||||
export * from './no_data_page';
|
export * from './no_data_page';
|
||||||
export { withSolutionNav } from './with_solution_nav';
|
|
||||||
export { NO_DATA_PAGE_MAX_WIDTH, NO_DATA_PAGE_TEMPLATE_PROPS } from './util';
|
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,3 @@
|
||||||
|
|
||||||
export * from './no_data_page';
|
export * from './no_data_page';
|
||||||
export * from './no_data_card';
|
export * from './no_data_card';
|
||||||
export * from './no_data_config_page';
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
||||||
* Side Public License, v 1.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export { NoDataConfigPage, NoDataConfigPageWithSolutionNavBar } from './no_data_config_page';
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
||||||
* Side Public License, v 1.
|
|
||||||
*/
|
|
||||||
import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
|
|
||||||
import React from 'react';
|
|
||||||
import { NoDataPage } from '../no_data_page';
|
|
||||||
import { withSolutionNav } from '../../with_solution_nav';
|
|
||||||
import { KibanaPageTemplateProps } from '../../page_template';
|
|
||||||
import { getClasses, NO_DATA_PAGE_TEMPLATE_PROPS } from '../../util';
|
|
||||||
|
|
||||||
export const NoDataConfigPage = (props: KibanaPageTemplateProps) => {
|
|
||||||
const { className, noDataConfig, ...rest } = props;
|
|
||||||
|
|
||||||
if (!noDataConfig) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const template = NO_DATA_PAGE_TEMPLATE_PROPS.template;
|
|
||||||
const classes = getClasses(template, className);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<EuiPageTemplate
|
|
||||||
data-test-subj={props['data-test-subj']}
|
|
||||||
template={template}
|
|
||||||
className={classes}
|
|
||||||
{...rest}
|
|
||||||
{...NO_DATA_PAGE_TEMPLATE_PROPS}
|
|
||||||
>
|
|
||||||
<NoDataPage {...noDataConfig} />
|
|
||||||
</EuiPageTemplate>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const NoDataConfigPageWithSolutionNavBar = withSolutionNav(NoDataConfigPage);
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
.kbnPageTemplate__pageSideBar {
|
|
||||||
overflow: hidden;
|
|
||||||
// Temporary hack till the sizing is changed directly in EUI
|
|
||||||
min-width: 248px;
|
|
||||||
|
|
||||||
@include euiCanAnimate {
|
|
||||||
transition: min-width $euiAnimSpeedFast $euiAnimSlightResistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.kbnPageTemplate__pageSideBar--shrink {
|
|
||||||
min-width: $euiSizeXXL;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kbnPageTemplate--centeredBody & {
|
|
||||||
border-bottom: $euiBorderThin;
|
|
||||||
|
|
||||||
@include euiBreakpoint('m', 'l', 'xl') {
|
|
||||||
border-bottom: none;
|
|
||||||
border-right: $euiBorderThin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,173 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
||||||
* Side Public License, v 1.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { shallow, render } from 'enzyme';
|
|
||||||
import { KibanaPageTemplate, KibanaPageTemplateProps } from './page_template';
|
|
||||||
import { EuiEmptyPrompt } from '@elastic/eui';
|
|
||||||
import { KibanaPageTemplateSolutionNavProps } from './solution_nav';
|
|
||||||
|
|
||||||
const navItems: KibanaPageTemplateSolutionNavProps['items'] = [
|
|
||||||
{
|
|
||||||
name: 'Ingest',
|
|
||||||
id: '1',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'Ingest Node Pipelines',
|
|
||||||
id: '1.1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Logstash Pipelines',
|
|
||||||
id: '1.2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Beats Central Management',
|
|
||||||
id: '1.3',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Data',
|
|
||||||
id: '2',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'Index Management',
|
|
||||||
id: '2.1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Index Lifecycle Policies',
|
|
||||||
id: '2.2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Snapshot and Restore',
|
|
||||||
id: '2.3',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
|
|
||||||
solution: 'Elastic',
|
|
||||||
actions: {
|
|
||||||
elasticAgent: {},
|
|
||||||
beats: {},
|
|
||||||
custom: {},
|
|
||||||
},
|
|
||||||
docsLink: 'test',
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('KibanaPageTemplate', () => {
|
|
||||||
test('render default empty prompt', () => {
|
|
||||||
const component = shallow(
|
|
||||||
<KibanaPageTemplate
|
|
||||||
isEmptyState={true}
|
|
||||||
pageHeader={{
|
|
||||||
iconType: 'test',
|
|
||||||
title: 'test',
|
|
||||||
description: 'test',
|
|
||||||
rightSideItems: ['test'],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(component).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render custom empty prompt only', () => {
|
|
||||||
const component = shallow(
|
|
||||||
<KibanaPageTemplate isEmptyState={true}>
|
|
||||||
<EuiEmptyPrompt title={<h1>custom test</h1>} />
|
|
||||||
</KibanaPageTemplate>
|
|
||||||
);
|
|
||||||
expect(component).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render custom empty prompt with page header', () => {
|
|
||||||
const component = shallow(
|
|
||||||
<KibanaPageTemplate
|
|
||||||
isEmptyState={true}
|
|
||||||
pageHeader={{
|
|
||||||
iconType: 'test',
|
|
||||||
title: 'test',
|
|
||||||
description: 'test',
|
|
||||||
rightSideItems: ['test'],
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<EuiEmptyPrompt title={<h1>custom test</h1>} />
|
|
||||||
</KibanaPageTemplate>
|
|
||||||
);
|
|
||||||
expect(component).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render basic template', () => {
|
|
||||||
const component = render(
|
|
||||||
<KibanaPageTemplate
|
|
||||||
pageHeader={{
|
|
||||||
iconType: 'test',
|
|
||||||
title: 'test',
|
|
||||||
description: 'test',
|
|
||||||
rightSideItems: ['test'],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(component).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render solutionNav', () => {
|
|
||||||
const component = render(
|
|
||||||
<KibanaPageTemplate
|
|
||||||
pageHeader={{
|
|
||||||
iconType: 'test',
|
|
||||||
title: 'test',
|
|
||||||
description: 'test',
|
|
||||||
rightSideItems: ['test'],
|
|
||||||
}}
|
|
||||||
solutionNav={{
|
|
||||||
name: 'Solution',
|
|
||||||
icon: 'solution',
|
|
||||||
items: navItems,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(component).toMatchSnapshot();
|
|
||||||
expect(component.find('div.kbnPageTemplate__pageSideBar').length).toBe(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render noDataContent', () => {
|
|
||||||
const component = shallow(
|
|
||||||
<KibanaPageTemplate
|
|
||||||
pageHeader={{
|
|
||||||
iconType: 'test',
|
|
||||||
title: 'test',
|
|
||||||
description: 'test',
|
|
||||||
rightSideItems: ['test'],
|
|
||||||
}}
|
|
||||||
solutionNav={{
|
|
||||||
name: 'Solution',
|
|
||||||
icon: 'solution',
|
|
||||||
items: navItems,
|
|
||||||
}}
|
|
||||||
noDataConfig={noDataConfig}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(component).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render sidebar classes', () => {
|
|
||||||
const component = shallow(
|
|
||||||
<KibanaPageTemplate
|
|
||||||
solutionNav={{
|
|
||||||
name: 'Solution',
|
|
||||||
icon: 'solution',
|
|
||||||
items: navItems,
|
|
||||||
}}
|
|
||||||
pageSideBarProps={{ className: 'customClass' }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(component.html().includes('kbnPageTemplate__pageSideBar customClass')).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
||||||
* Side Public License, v 1.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import './page_template.scss';
|
|
||||||
|
|
||||||
import React, { FunctionComponent } from 'react';
|
|
||||||
import { EuiPageTemplateProps_Deprecated } from '@elastic/eui';
|
|
||||||
import { KibanaPageTemplateSolutionNavProps } from './solution_nav';
|
|
||||||
|
|
||||||
import {
|
|
||||||
NoDataPageProps,
|
|
||||||
NoDataConfigPage,
|
|
||||||
NoDataConfigPageWithSolutionNavBar,
|
|
||||||
} from './no_data_page';
|
|
||||||
import { KibanaPageTemplateInner, KibanaPageTemplateWithSolutionNav } from './page_template_inner';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A thin wrapper around EuiPageTemplate with a few Kibana specific additions
|
|
||||||
* @deprecated Use `KibanaPageTemplateProps` from `@kbn/shared-ux-page-kibana-template-types`.
|
|
||||||
*/
|
|
||||||
export type KibanaPageTemplateProps = EuiPageTemplateProps_Deprecated & {
|
|
||||||
/**
|
|
||||||
* Changes the template type depending on other props provided.
|
|
||||||
* With `pageHeader` only: Uses `centeredBody` and fills an EuiEmptyPrompt with `pageHeader` info.
|
|
||||||
* With `children` only: Uses `centeredBody`
|
|
||||||
* With `pageHeader` and `children`: Uses `centeredContent`
|
|
||||||
*/
|
|
||||||
isEmptyState?: boolean;
|
|
||||||
/**
|
|
||||||
* Quick creation of EuiSideNav. Hooks up mobile instance too
|
|
||||||
*/
|
|
||||||
solutionNav?: KibanaPageTemplateSolutionNavProps;
|
|
||||||
/**
|
|
||||||
* Accepts a configuration object, that when provided, ignores pageHeader and children and instead
|
|
||||||
* displays Agent, Beats, and custom cards to direct users to the right ingest location
|
|
||||||
*/
|
|
||||||
noDataConfig?: NoDataPageProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @deprecated Use `KibanaPageTemplate` from `@kbn/shared-ux-page-kibana-template`. */
|
|
||||||
export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
|
|
||||||
template,
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
solutionNav,
|
|
||||||
noDataConfig,
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
/**
|
|
||||||
* If passing the custom template of `noDataConfig`
|
|
||||||
*/
|
|
||||||
if (noDataConfig && solutionNav) {
|
|
||||||
return (
|
|
||||||
<NoDataConfigPageWithSolutionNavBar
|
|
||||||
data-test-subj={rest['data-test-subj']}
|
|
||||||
className={className}
|
|
||||||
noDataConfig={noDataConfig}
|
|
||||||
solutionNav={solutionNav}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (noDataConfig) {
|
|
||||||
return (
|
|
||||||
<NoDataConfigPage
|
|
||||||
data-test-subj={rest['data-test-subj']}
|
|
||||||
className={className}
|
|
||||||
noDataConfig={noDataConfig}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (solutionNav) {
|
|
||||||
return (
|
|
||||||
<KibanaPageTemplateWithSolutionNav
|
|
||||||
template={template}
|
|
||||||
className={className}
|
|
||||||
solutionNav={solutionNav}
|
|
||||||
children={children}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<KibanaPageTemplateInner
|
|
||||||
template={template}
|
|
||||||
className={className}
|
|
||||||
children={children}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
||||||
* Side Public License, v 1.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { FunctionComponent } from 'react';
|
|
||||||
|
|
||||||
import { EuiEmptyPrompt, EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
|
|
||||||
import { withSolutionNav } from './with_solution_nav';
|
|
||||||
import { KibanaPageTemplateProps } from './page_template';
|
|
||||||
import { getClasses } from './util';
|
|
||||||
|
|
||||||
type Props = KibanaPageTemplateProps;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A thin wrapper around EuiPageTemplate with a few Kibana specific additions
|
|
||||||
*/
|
|
||||||
export const KibanaPageTemplateInner: FunctionComponent<Props> = ({
|
|
||||||
template,
|
|
||||||
className,
|
|
||||||
pageHeader,
|
|
||||||
children,
|
|
||||||
isEmptyState,
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
/**
|
|
||||||
* An easy way to create the right content for empty pages
|
|
||||||
*/
|
|
||||||
const emptyStateDefaultTemplate = 'centeredBody';
|
|
||||||
if (isEmptyState && pageHeader && !children) {
|
|
||||||
template = template ?? emptyStateDefaultTemplate;
|
|
||||||
const { iconType, pageTitle, description, rightSideItems } = pageHeader;
|
|
||||||
pageHeader = undefined;
|
|
||||||
children = (
|
|
||||||
<EuiEmptyPrompt
|
|
||||||
iconType={iconType}
|
|
||||||
iconColor={''} // This is likely a solution or app logo, so keep it multi-color
|
|
||||||
title={pageTitle ? <h1>{pageTitle}</h1> : undefined}
|
|
||||||
body={description ? <p>{description}</p> : undefined}
|
|
||||||
actions={rightSideItems}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else if (isEmptyState && pageHeader && children) {
|
|
||||||
template = template ?? 'centeredContent';
|
|
||||||
} else if (isEmptyState && !pageHeader) {
|
|
||||||
template = template ?? emptyStateDefaultTemplate;
|
|
||||||
}
|
|
||||||
|
|
||||||
const classes = getClasses(template, className);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<EuiPageTemplate template={template} className={classes} pageHeader={pageHeader} {...rest}>
|
|
||||||
{children}
|
|
||||||
</EuiPageTemplate>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const KibanaPageTemplateWithSolutionNav = withSolutionNav(KibanaPageTemplateInner);
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
||||||
* Side Public License, v 1.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { KibanaPageTemplateProps } from '../page_template';
|
|
||||||
|
|
||||||
export const NO_DATA_PAGE_MAX_WIDTH = 950;
|
|
||||||
|
|
||||||
export const NO_DATA_PAGE_TEMPLATE_PROPS: KibanaPageTemplateProps = {
|
|
||||||
restrictWidth: NO_DATA_PAGE_MAX_WIDTH,
|
|
||||||
template: 'centeredBody',
|
|
||||||
pageContentProps: {
|
|
||||||
hasShadow: false,
|
|
||||||
color: 'transparent',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -7,4 +7,3 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export { getClasses } from './presentation';
|
export { getClasses } from './presentation';
|
||||||
export * from './constants';
|
|
||||||
|
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
||||||
* or more contributor license agreements. Licensed under the Elastic License
|
|
||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
||||||
* Side Public License, v 1.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { ComponentType, useState } from 'react';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { useIsWithinBreakpoints } from '@elastic/eui';
|
|
||||||
import { EuiPageSideBarProps_Deprecated as EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar';
|
|
||||||
import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav';
|
|
||||||
import { KibanaPageTemplateProps } from '.';
|
|
||||||
|
|
||||||
// https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
|
|
||||||
function getDisplayName(Component: ComponentType<any>) {
|
|
||||||
return Component.displayName || Component.name || 'UnnamedComponent';
|
|
||||||
}
|
|
||||||
|
|
||||||
type SolutionNavProps = KibanaPageTemplateProps & {
|
|
||||||
solutionNav: KibanaPageTemplateSolutionNavProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed';
|
|
||||||
|
|
||||||
export const withSolutionNav = (WrappedComponent: ComponentType<KibanaPageTemplateProps>) => {
|
|
||||||
const WithSolutionNav = (props: SolutionNavProps) => {
|
|
||||||
const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
|
|
||||||
const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
|
|
||||||
const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(
|
|
||||||
!JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY)))
|
|
||||||
);
|
|
||||||
const { solutionNav, ...propagatedProps } = props;
|
|
||||||
const { children, isEmptyState, template } = propagatedProps;
|
|
||||||
const toggleOpenOnDesktop = () => {
|
|
||||||
setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop);
|
|
||||||
// Have to store it as the opposite of the default we want
|
|
||||||
localStorage.setItem(SOLUTION_NAV_COLLAPSED_KEY, JSON.stringify(isSideNavOpenOnDesktop));
|
|
||||||
};
|
|
||||||
const sideBarClasses = classNames(
|
|
||||||
'kbnPageTemplate__pageSideBar',
|
|
||||||
{
|
|
||||||
'kbnPageTemplate__pageSideBar--shrink':
|
|
||||||
isMediumBreakpoint || (isLargerBreakpoint && !isSideNavOpenOnDesktop),
|
|
||||||
},
|
|
||||||
props.pageSideBarProps?.className
|
|
||||||
);
|
|
||||||
|
|
||||||
const templateToUse = isEmptyState && !template ? 'centeredContent' : template;
|
|
||||||
|
|
||||||
const pageSideBar = (
|
|
||||||
<KibanaPageTemplateSolutionNav
|
|
||||||
isOpenOnDesktop={isSideNavOpenOnDesktop}
|
|
||||||
onCollapse={toggleOpenOnDesktop}
|
|
||||||
{...solutionNav}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
const pageSideBarProps = {
|
|
||||||
paddingSize: 'none',
|
|
||||||
...props.pageSideBarProps,
|
|
||||||
className: sideBarClasses,
|
|
||||||
} as EuiPageSideBarProps; // needed because for some reason 'none' is not recognized as a valid value for paddingSize
|
|
||||||
return (
|
|
||||||
<WrappedComponent
|
|
||||||
{...propagatedProps}
|
|
||||||
pageSideBar={pageSideBar}
|
|
||||||
pageSideBarProps={pageSideBarProps}
|
|
||||||
template={templateToUse}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</WrappedComponent>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
WithSolutionNav.displayName = `WithSolutionNavBar(${getDisplayName(WrappedComponent)})`;
|
|
||||||
return WithSolutionNav;
|
|
||||||
};
|
|
||||||
|
|
@ -9,7 +9,7 @@ import React, { useCallback, useMemo } from 'react';
|
||||||
import { FormattedMessage } from '@kbn/i18n-react';
|
import { FormattedMessage } from '@kbn/i18n-react';
|
||||||
import { EuiButton } from '@elastic/eui';
|
import { EuiButton } from '@elastic/eui';
|
||||||
|
|
||||||
import { KibanaPageTemplate } from '@kbn/kibana-react-plugin/public';
|
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||||
import { INTEGRATIONS_PLUGIN_ID } from '@kbn/fleet-plugin/common';
|
import { INTEGRATIONS_PLUGIN_ID } from '@kbn/fleet-plugin/common';
|
||||||
import { pagePathGetters } from '@kbn/fleet-plugin/public';
|
import { pagePathGetters } from '@kbn/fleet-plugin/public';
|
||||||
import { isModifiedEvent, isLeftClickEvent, useKibana } from '../common/lib/kibana';
|
import { isModifiedEvent, isLeftClickEvent, useKibana } from '../common/lib/kibana';
|
||||||
|
|
|
||||||
|
|
@ -77,5 +77,6 @@
|
||||||
"@kbn/core-saved-objects-server",
|
"@kbn/core-saved-objects-server",
|
||||||
"@kbn/monaco",
|
"@kbn/monaco",
|
||||||
"@kbn/io-ts-utils",
|
"@kbn/io-ts-utils",
|
||||||
|
"@kbn/shared-ux-page-kibana-template",
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue