From dfcf60ae33f9482465e5c549023a6ec7b7604acd Mon Sep 17 00:00:00 2001
From: Vadim Kibana <82822460+vadimkibana@users.noreply.github.com>
Date: Mon, 25 Sep 2023 16:04:28 +0200
Subject: [PATCH] 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:
Sample data page now:
Tutorials page before:
Tutorials page now:
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
.../__snapshots__/page_template.test.tsx.snap | 2 +-
.../page_template_inner.test.tsx.snap | 3 +-
.../impl/src/page_template_inner.tsx | 3 +-
.../__snapshots__/tutorial.test.js.snap | 276 +++++------
.../components/tutorial/tutorial.js | 10 +-
.../components/tutorial_directory.js | 4 +-
src/plugins/kibana_react/public/index.ts | 4 -
.../__snapshots__/page_template.test.tsx.snap | 440 ------------------
.../public/page_template/index.ts | 4 -
.../page_template/no_data_page/index.ts | 1 -
.../no_data_config_page/index.tsx | 9 -
.../no_data_config_page.tsx | 38 --
.../public/page_template/page_template.scss | 22 -
.../page_template/page_template.test.tsx | 173 -------
.../public/page_template/page_template.tsx | 98 ----
.../page_template/page_template_inner.tsx | 61 ---
.../public/page_template/util/constants.ts | 20 -
.../public/page_template/util/index.ts | 1 -
.../page_template/with_solution_nav.tsx | 77 ---
.../osquery/public/components/empty_state.tsx | 2 +-
x-pack/plugins/osquery/tsconfig.json | 1 +
21 files changed, 157 insertions(+), 1092 deletions(-)
delete mode 100644 src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
delete mode 100644 src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/index.tsx
delete mode 100644 src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx
delete mode 100644 src/plugins/kibana_react/public/page_template/page_template.scss
delete mode 100644 src/plugins/kibana_react/public/page_template/page_template.test.tsx
delete mode 100644 src/plugins/kibana_react/public/page_template/page_template.tsx
delete mode 100644 src/plugins/kibana_react/public/page_template/page_template_inner.tsx
delete mode 100644 src/plugins/kibana_react/public/page_template/util/constants.ts
delete mode 100644 src/plugins/kibana_react/public/page_template/with_solution_nav.tsx
diff --git a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap
index c57c90acbdcf7..09421e4cb5dd7 100644
--- a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap
+++ b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`KibanaPageTemplate render basic template 1`] = `
<_EuiPageHeader
diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx
index f9b9dcd247de6..5da29ba797041 100644
--- a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx
+++ b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx
@@ -68,7 +68,8 @@ export const KibanaPageTemplateInner: FC = ({
// the following props can be removed to allow the template to auto-handle
// the fixed header and banner heights.
offset={0}
- minHeight={0}
+ minHeight={header ? 'calc(100vh - var(--euiFixedHeadersOffset, 0))' : 0}
+ grow={header ? false : undefined}
{...rest}
>
{sideBar}
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap
index bd4e658b04a99..2cd4388680751 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap
@@ -1,160 +1,166 @@
// 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`] = `
-
-
-
-
-
+
+
-
-
+ "prepend": [Function],
+ }
+ }
+ description="tutorial used to drive jest tests"
+ notices={null}
+ title="jest test tutorial"
+ />
+
+
+
+
+
`;
exports[`isCloudEnabled is false should render ON_PREM instructions with instruction toggle 1`] = `
-
-
-
+
+
-
-
-
+
+
+
+
+
+
-
-
-
-
-
+
+
+
`;
exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = `
-
-
-
-
-
+
+
-
-
+ "prepend": [Function],
+ }
+ }
+ description="tutorial used to drive jest tests"
+ iconType="logoApache"
+ notices={null}
+ title="jest test tutorial"
+ />
+
+
+
+
+
`;
diff --git a/src/plugins/home/public/application/components/tutorial/tutorial.js b/src/plugins/home/public/application/components/tutorial/tutorial.js
index de222dbe6155d..620da42169c35 100644
--- a/src/plugins/home/public/application/components/tutorial/tutorial.js
+++ b/src/plugins/home/public/application/components/tutorial/tutorial.js
@@ -18,7 +18,7 @@ import * as StatusCheckStates from './status_check_states';
import { injectI18n, FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
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 = {
ELASTIC_CLOUD: 'elasticCloud',
@@ -360,7 +360,7 @@ class TutorialUi extends React.Component {
render() {
let content;
if (this.state.notFound) {
- content = (
+ return (
{content};
+ return (
+
+ {content}
+
+ );
}
}
diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index cde8b86f5df22..c5a4c1b27fbab 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -16,7 +16,7 @@ import { SampleDataTab } from '@kbn/home-sample-data-tab';
import { i18n } from '@kbn/i18n';
import { Synopsis } from './synopsis';
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';
const SAMPLE_DATA_TAB_ID = 'sampleData';
@@ -257,7 +257,7 @@ class TutorialDirectoryUi extends React.Component {
rightSideItems: headerLinks ? [headerLinks] : [],
}}
>
- {this.renderTabContent()}
+ {this.renderTabContent()}
);
}
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index f92739d045439..7954559206bb7 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -54,17 +54,13 @@ export { POSITIONS, WEIGHTS, TOOLBAR_BUTTON_SIZES, ToolbarButton } from './toolb
export { reactRouterNavigate, reactRouterOnClickHandler } from './react_router_navigate';
export type {
- KibanaPageTemplateProps,
NoDataPageActions,
NoDataPageActionsProps,
NoDataPageProps,
ElasticAgentCardProps,
} from './page_template';
export {
- KibanaPageTemplate,
KibanaPageTemplateSolutionNavAvatar,
- NO_DATA_PAGE_MAX_WIDTH,
- NO_DATA_PAGE_TEMPLATE_PROPS,
NO_DATA_RECOMMENDED,
NoDataPage,
ElasticAgentCard,
diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
deleted file mode 100644
index 4dea9549670f3..0000000000000
--- a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
+++ /dev/null
@@ -1,440 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`KibanaPageTemplate render basic template 1`] = `
-
-`;
-
-exports[`KibanaPageTemplate render custom empty prompt only 1`] = `
-
-
- custom test
-
- }
- />
-
-`;
-
-exports[`KibanaPageTemplate render custom empty prompt with page header 1`] = `
-
-
- custom test
-
- }
- />
-
-`;
-
-exports[`KibanaPageTemplate render default empty prompt 1`] = `
-
-`;
-
-exports[`KibanaPageTemplate render noDataContent 1`] = `
-
-`;
-
-exports[`KibanaPageTemplate render solutionNav 1`] = `
-
-`;
diff --git a/src/plugins/kibana_react/public/page_template/index.ts b/src/plugins/kibana_react/public/page_template/index.ts
index fda644a284797..65a5db433593a 100644
--- a/src/plugins/kibana_react/public/page_template/index.ts
+++ b/src/plugins/kibana_react/public/page_template/index.ts
@@ -6,9 +6,5 @@
* Side Public License, v 1.
*/
-export type { KibanaPageTemplateProps } from './page_template';
-export { KibanaPageTemplate } from './page_template';
export { KibanaPageTemplateSolutionNavAvatar, KibanaPageTemplateSolutionNav } from './solution_nav';
export * from './no_data_page';
-export { withSolutionNav } from './with_solution_nav';
-export { NO_DATA_PAGE_MAX_WIDTH, NO_DATA_PAGE_TEMPLATE_PROPS } from './util';
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/index.ts b/src/plugins/kibana_react/public/page_template/no_data_page/index.ts
index b5a11722dd397..55661ad6f14f7 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/index.ts
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/index.ts
@@ -8,4 +8,3 @@
export * from './no_data_page';
export * from './no_data_card';
-export * from './no_data_config_page';
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/index.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/index.tsx
deleted file mode 100644
index 0bdde40021398..0000000000000
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/index.tsx
+++ /dev/null
@@ -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';
diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx
deleted file mode 100644
index cae591f571c79..0000000000000
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx
+++ /dev/null
@@ -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 (
-
-
-
- );
-};
-
-export const NoDataConfigPageWithSolutionNavBar = withSolutionNav(NoDataConfigPage);
diff --git a/src/plugins/kibana_react/public/page_template/page_template.scss b/src/plugins/kibana_react/public/page_template/page_template.scss
deleted file mode 100644
index d94daec56235f..0000000000000
--- a/src/plugins/kibana_react/public/page_template/page_template.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/src/plugins/kibana_react/public/page_template/page_template.test.tsx b/src/plugins/kibana_react/public/page_template/page_template.test.tsx
deleted file mode 100644
index aff6082902a34..0000000000000
--- a/src/plugins/kibana_react/public/page_template/page_template.test.tsx
+++ /dev/null
@@ -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(
-
- );
- expect(component).toMatchSnapshot();
- });
-
- test('render custom empty prompt only', () => {
- const component = shallow(
-
- custom test} />
-
- );
- expect(component).toMatchSnapshot();
- });
-
- test('render custom empty prompt with page header', () => {
- const component = shallow(
-
- custom test} />
-
- );
- expect(component).toMatchSnapshot();
- });
-
- test('render basic template', () => {
- const component = render(
-
- );
- expect(component).toMatchSnapshot();
- });
-
- test('render solutionNav', () => {
- const component = render(
-
- );
- expect(component).toMatchSnapshot();
- expect(component.find('div.kbnPageTemplate__pageSideBar').length).toBe(1);
- });
-
- test('render noDataContent', () => {
- const component = shallow(
-
- );
- expect(component).toMatchSnapshot();
- });
-
- test('render sidebar classes', () => {
- const component = shallow(
-
- );
- expect(component.html().includes('kbnPageTemplate__pageSideBar customClass')).toBe(true);
- });
-});
diff --git a/src/plugins/kibana_react/public/page_template/page_template.tsx b/src/plugins/kibana_react/public/page_template/page_template.tsx
deleted file mode 100644
index 42ba9d1873587..0000000000000
--- a/src/plugins/kibana_react/public/page_template/page_template.tsx
+++ /dev/null
@@ -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 = ({
- template,
- className,
- children,
- solutionNav,
- noDataConfig,
- ...rest
-}) => {
- /**
- * If passing the custom template of `noDataConfig`
- */
- if (noDataConfig && solutionNav) {
- return (
-
- );
- }
-
- if (noDataConfig) {
- return (
-
- );
- }
-
- if (solutionNav) {
- return (
-
- );
- }
-
- return (
-
- );
-};
diff --git a/src/plugins/kibana_react/public/page_template/page_template_inner.tsx b/src/plugins/kibana_react/public/page_template/page_template_inner.tsx
deleted file mode 100644
index 001cea5c26a23..0000000000000
--- a/src/plugins/kibana_react/public/page_template/page_template_inner.tsx
+++ /dev/null
@@ -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 = ({
- 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 = (
- {pageTitle} : undefined}
- body={description ? {description}
: undefined}
- actions={rightSideItems}
- />
- );
- } else if (isEmptyState && pageHeader && children) {
- template = template ?? 'centeredContent';
- } else if (isEmptyState && !pageHeader) {
- template = template ?? emptyStateDefaultTemplate;
- }
-
- const classes = getClasses(template, className);
-
- return (
-
- {children}
-
- );
-};
-
-export const KibanaPageTemplateWithSolutionNav = withSolutionNav(KibanaPageTemplateInner);
diff --git a/src/plugins/kibana_react/public/page_template/util/constants.ts b/src/plugins/kibana_react/public/page_template/util/constants.ts
deleted file mode 100644
index 159a6d0d8d4c1..0000000000000
--- a/src/plugins/kibana_react/public/page_template/util/constants.ts
+++ /dev/null
@@ -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',
- },
-};
diff --git a/src/plugins/kibana_react/public/page_template/util/index.ts b/src/plugins/kibana_react/public/page_template/util/index.ts
index adfefdf834566..06edc43d70d57 100644
--- a/src/plugins/kibana_react/public/page_template/util/index.ts
+++ b/src/plugins/kibana_react/public/page_template/util/index.ts
@@ -7,4 +7,3 @@
*/
export { getClasses } from './presentation';
-export * from './constants';
diff --git a/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx b/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx
deleted file mode 100644
index 842573b9d8de4..0000000000000
--- a/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx
+++ /dev/null
@@ -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) {
- 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;
-};
diff --git a/x-pack/plugins/osquery/public/components/empty_state.tsx b/x-pack/plugins/osquery/public/components/empty_state.tsx
index 099e9e22b1f64..18f5afe8eaf5f 100644
--- a/x-pack/plugins/osquery/public/components/empty_state.tsx
+++ b/x-pack/plugins/osquery/public/components/empty_state.tsx
@@ -9,7 +9,7 @@ import React, { useCallback, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
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 { pagePathGetters } from '@kbn/fleet-plugin/public';
import { isModifiedEvent, isLeftClickEvent, useKibana } from '../common/lib/kibana';
diff --git a/x-pack/plugins/osquery/tsconfig.json b/x-pack/plugins/osquery/tsconfig.json
index 6cd1086b8a850..d2344a2581df8 100644
--- a/x-pack/plugins/osquery/tsconfig.json
+++ b/x-pack/plugins/osquery/tsconfig.json
@@ -77,5 +77,6 @@
"@kbn/core-saved-objects-server",
"@kbn/monaco",
"@kbn/io-ts-utils",
+ "@kbn/shared-ux-page-kibana-template",
]
}