= ({
+ template,
+ className,
+ pageHeader,
+ children,
+ isEmptyState,
+ ...rest
+}) => {
+ /**
+ * An easy way to create the right content for empty pages
+ */
+ const emptyStateDefaultTemplate = 'centeredBody';
+ let header = pageHeader;
+
+ if (isEmptyState) {
+ if (pageHeader && !children) {
+ template = template ?? emptyStateDefaultTemplate;
+ const { iconType, pageTitle, description, rightSideItems } = pageHeader;
+ const title = pageTitle ? {pageTitle}
: undefined;
+ const body = description ? {description}
: undefined;
+ header = undefined;
+ children = (
+
+ );
+ } else if (pageHeader && children) {
+ template = template ?? 'centeredContent';
+ } else if (!pageHeader) {
+ template = template ?? emptyStateDefaultTemplate;
+ }
+ }
+
+ const classes = getClasses(template, className);
+ return (
+
+ {children}
+
+ );
+};
+
+export const KibanaPageTemplateWithSolutionNav = withSolutionNav(KibanaPageTemplateInner);
diff --git a/packages/kbn-shared-ux-components/src/page_template/types.ts b/packages/kbn-shared-ux-components/src/page_template/types.ts
new file mode 100644
index 0000000000000..cd4764a976db8
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/types.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { EuiPageTemplateProps } from '@elastic/eui';
+import { KibanaPageTemplateSolutionNavProps } from './solution_nav';
+import { NoDataPageProps } from './no_data_page';
+
+export type KibanaPageTemplateProps = EuiPageTemplateProps & {
+ /**
+ * 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;
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/util/constants.ts b/packages/kbn-shared-ux-components/src/page_template/util/constants.ts
new file mode 100644
index 0000000000000..92dbe1cb16279
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/util/constants.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 '../types';
+
+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',
+ paddingSize: 'none',
+ },
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/util/index.ts b/packages/kbn-shared-ux-components/src/page_template/util/index.ts
new file mode 100644
index 0000000000000..adfefdf834566
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/util/index.ts
@@ -0,0 +1,10 @@
+/*
+ * 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 { getClasses } from './presentation';
+export * from './constants';
diff --git a/packages/kbn-shared-ux-components/src/page_template/util/presentation.ts b/packages/kbn-shared-ux-components/src/page_template/util/presentation.ts
new file mode 100644
index 0000000000000..ab7144ee37b57
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/util/presentation.ts
@@ -0,0 +1,13 @@
+/*
+ * 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 classNames from 'classnames';
+
+export const getClasses = (template: string | undefined, className: string | undefined) => {
+ return classNames('kbnPageTemplate', { [`kbnPageTemplate--${template}`]: template }, className);
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.test.tsx b/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.test.tsx
new file mode 100644
index 0000000000000..0d0ac4cf71bfc
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.test.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+import { withSolutionNav } from './with_solution_nav';
+import { KibanaPageTemplateSolutionNavProps } from './solution_nav';
+
+const TestComponent = () => {
+ return This is a wrapped component
;
+};
+
+const items: 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 solutionNav = {
+ name: 'Kibana',
+ icon: 'logoKibana',
+ items,
+};
+
+describe('WithSolutionNav', () => {
+ test('renders wrapped component', () => {
+ const WithSolutionNavTestComponent = withSolutionNav(TestComponent);
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('with children', () => {
+ const WithSolutionNavTestComponent = withSolutionNav(TestComponent);
+ const component = shallow(
+
+ Child component
+
+ );
+ expect(component).toMatchSnapshot();
+ expect(component.find('.child').html()).toContain('Child component');
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx
new file mode 100644
index 0000000000000..07d78dc87f40b
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx
@@ -0,0 +1,76 @@
+/*
+ * 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 } from '@elastic/eui/src/components/page/page_side_bar';
+import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav';
+import { KibanaPageTemplateProps } from './types';
+
+// https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
+function getDisplayName(Component: ComponentType) {
+ return Component.displayName || Component.name || 'UnnamedComponent';
+}
+
+type SolutionNavProps = KibanaPageTemplateProps & {
+ solutionNav: KibanaPageTemplateSolutionNavProps;
+};
+
+const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed';
+
+export const withSolutionNav = (WrappedComponent: ComponentType) => {
+ 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 = (
+
+ );
+ 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 (
+
+ {children}
+
+ );
+ };
+
+ WithSolutionNav.displayName = `WithSolutionNavBar(${getDisplayName(WrappedComponent)})`;
+
+ return WithSolutionNav;
+};