From 4c02548f0f32e21c6240b71f8d237227a508e325 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 16:28:26 +0100
Subject: [PATCH 01/37] [SharedUX] Migrate PageTemplate > SolutionNavAvatar
---
.../kbn-shared-ux-components/src/index.ts | 19 ++++++++
.../src/page_template/index.tsx | 1 +
.../solution_nav_avatar.test.tsx.snap | 9 ++++
.../solution_nav_avatar/index.tsx | 9 ++++
.../solution_nav_avatar.scss | 14 ++++++
.../solution_nav_avatar.stories.tsx | 35 +++++++++++++++
.../solution_nav_avatar.test.tsx | 20 +++++++++
.../solution_nav_avatar.tsx | 45 +++++++++++++++++++
8 files changed, 152 insertions(+)
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/__snapshots__/solution_nav_avatar.test.tsx.snap
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.scss
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.stories.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.tsx
diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index c5e719a904ebdc..2bf228d2fee792 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -94,3 +94,22 @@ export const LazyIconButtonGroup = React.lazy(() =>
* The IconButtonGroup component that is wrapped by the `withSuspence` HOC.
*/
export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
+
+/**
+ * The Lazily-loaded `KibanaPageTemplateSolutionNavAvatar` component. Consumers should use `React.Suspennse` or the
+ * `withSuspense` HOC to load this component.
+ */
+export const KibanaPageTemplateSolutionNavAvatarLazy = React.lazy(() =>
+ import('./page_template/solution_nav_avatar').then(({ KibanaPageTemplateSolutionNavAvatar }) => ({
+ default: KibanaPageTemplateSolutionNavAvatar,
+ }))
+);
+
+/**
+ * A `KibanaPageTemplateSolutionNavAvata` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `LazyNoDataViews` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const KibanaPageTemplateSolutionNavAvatar = withSuspense(
+ KibanaPageTemplateSolutionNavAvatarLazy
+);
diff --git a/packages/kbn-shared-ux-components/src/page_template/index.tsx b/packages/kbn-shared-ux-components/src/page_template/index.tsx
index adbfdce45be767..217bccb1197d1d 100644
--- a/packages/kbn-shared-ux-components/src/page_template/index.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/index.tsx
@@ -7,3 +7,4 @@
*/
export { NoDataCard, ElasticAgentCard } from './no_data_page';
+export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/__snapshots__/solution_nav_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/__snapshots__/solution_nav_avatar.test.tsx.snap
new file mode 100644
index 00000000000000..6cb2aa4423359b
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/__snapshots__/solution_nav_avatar.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
new file mode 100644
index 00000000000000..5f3417eb76cb90
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
@@ -0,0 +1,9 @@
+/*
+ * 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 { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.scss b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.scss
new file mode 100644
index 00000000000000..03ca7dddb90637
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.scss
@@ -0,0 +1,14 @@
+.kbnPageTemplateSolutionNavAvatar {
+ @include euiBottomShadowSmall;
+
+ &--xxl {
+ @include euiBottomShadowMedium;
+ @include size(100px);
+ line-height: 100px;
+ border-radius: 100px;
+ display: inline-block;
+ background: $euiColorEmptyShade url('./assets/texture.svg') no-repeat;
+ background-size: cover, 125%;
+ text-align: center;
+ }
+}
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.stories.tsx
new file mode 100644
index 00000000000000..eff0fa22427ebf
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.stories.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 {
+ KibanaPageTemplateSolutionNavAvatar,
+ KibanaPageTemplateSolutionNavAvatarProps,
+} from './solution_nav_avatar';
+
+export default {
+ title: 'Page Template/Solution Nav Avatar',
+ description: 'A wrapper around EuiAvatar, with some extra styling',
+};
+
+type Params = Pick;
+
+export const PureComponent = (params: Params) => {
+ return ;
+};
+
+PureComponent.argTypes = {
+ name: {
+ control: 'text',
+ defaultValue: 'Solution Name',
+ },
+ size: {
+ control: 'radio',
+ options: ['s', 'm', 'l', 'xl', 'xxl'],
+ },
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.test.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.test.tsx
new file mode 100644
index 00000000000000..497b14bc702360
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.test.tsx
@@ -0,0 +1,20 @@
+/*
+ * 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 } from 'enzyme';
+import { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
+
+describe('KibanaPageTemplateSolutionNavAvatar', () => {
+ test('renders', () => {
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.tsx
new file mode 100644
index 00000000000000..9cef8b1f7c2b25
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 './solution_nav_avatar.scss';
+
+import React from 'react';
+
+import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
+import classNames from 'classnames';
+
+export type KibanaPageTemplateSolutionNavAvatarProps = DistributiveOmit & {
+ /**
+ * Any EuiAvatar size available, or `xxl` for custom large, brand-focused version
+ */
+ size?: EuiAvatarProps['size'] | 'xxl';
+};
+
+/**
+ * Applies extra styling to a typical EuiAvatar
+ */
+export const KibanaPageTemplateSolutionNavAvatar = ({
+ className,
+ size,
+ ...rest
+}: KibanaPageTemplateSolutionNavAvatarProps) => {
+ return (
+ // @ts-ignore
+
+ );
+};
From b0c2032f918453fe043fa8e68536f102e8a8b959 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Fri, 18 Mar 2022 11:00:29 +0100
Subject: [PATCH 02/37] [SharedUX] Migrate PageTemplate > NoDataPage >
ActionCards
---
.../action_cards/action_cards.stories.tsx | 27 +++++++++++++++
.../action_cards/action_cards.styles.ts | 15 +++++++++
.../action_cards/action_cards.test.tsx | 31 +++++++++++++++++
.../action_cards/action_cards.tsx | 33 +++++++++++++++++++
.../no_data_page/action_cards/index.tsx | 9 +++++
5 files changed, 115 insertions(+)
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
new file mode 100644
index 00000000000000..2393f48c909423
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { NoDataCard } from '../no_data_card';
+import { ActionCards } from './action_cards';
+
+export default {
+ title: 'Elastic Action Cards',
+ description: 'A group of ElasticAgentCards or NoDataCards, to be used on NoData page',
+};
+
+export const PureComponent = () => {
+ const action = {
+ recommended: false,
+ button: 'Button',
+ onClick: () => {},
+ };
+ const card1 = ;
+ const card2 = ;
+ return ;
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
new file mode 100644
index 00000000000000..ec5e2d9c84f6a3
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 const ActionCardsStyles = (euiSize: number, isWithinBreakpoints: boolean) => {
+ return {
+ '&:only-child': {
+ minWidth: isWithinBreakpoints ? 'auto' : `${euiSize * 22.5} px`,
+ },
+ };
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
new file mode 100644
index 00000000000000..6223613815f58c
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { shallowWithIntl } from '@kbn/test-jest-helpers';
+import { NoDataCard } from '../no_data_card';
+import { ActionCards } from './action_cards';
+
+describe('ActionCards', () => {
+ const onClick = jest.fn();
+ const action = {
+ recommended: false,
+ button: 'Button text',
+ onClick,
+ };
+ const card = ;
+ const actionCard1 =
{card}
;
+ const actionCard2 =
{card}
;
+
+ test('renders correctly', () => {
+ const component = shallowWithIntl();
+ const actionCards = component.find('div');
+ expect(actionCards.length).toBe(2);
+ expect(actionCards.at(0).key()).toBe('first');
+ expect(actionCards.at(1).key()).toBe('second');
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
new file mode 100644
index 00000000000000..5db261499a4aec
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
+import React, { ReactElement } from 'react';
+import { useIsWithinBreakpoints } from '@elastic/eui';
+import { ElasticAgentCard, NoDataCard } from '../no_data_card';
+import { ActionCardsStyles } from './action_cards.styles';
+
+interface ActionCardsProps {
+ actionCards: Array | ReactElement>;
+}
+export const ActionCards = ({ actionCards }: ActionCardsProps) => {
+ const isWithinBreakpoints = useIsWithinBreakpoints(['xs', 's']);
+ const euiSize = 16;
+ const actionCardsStyle = ActionCardsStyles(euiSize, isWithinBreakpoints);
+
+ const cards = actionCards.map((card) => (
+
+ {card}
+
+ ));
+ return (
+
+ {cards}
+
+ );
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
new file mode 100644
index 00000000000000..0ba8ef86ba5cbd
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
@@ -0,0 +1,9 @@
+/*
+ * 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 { ActionCards } from './action_cards';
From 26643720a349deddc87d174792bfdfc90d967bbb Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Tue, 22 Mar 2022 16:14:02 +0100
Subject: [PATCH 03/37] [SharedUX] Migrate PageTemplate > NoDataPage >
SolutionNav
---
.../no_data_page/no_data_card/index.ts | 1 +
.../__snapshots__/solution_nav.test.tsx.snap | 265 ++++++++++++++++++
.../solution_nav_avatar.test.tsx.snap | 11 +
...solution_nav_collapse_button.test.tsx.snap | 23 ++
.../solution_nav/assets/texture.svg | 1 +
.../src/page_template/solution_nav/index.ts | 14 +
.../solution_nav/solution_nav.scss | 30 ++
.../solution_nav/solution_nav.stories.tsx | 67 +++++
.../solution_nav/solution_nav.test.tsx | 77 +++++
.../solution_nav/solution_nav.tsx | 167 +++++++++++
.../solution_nav/solution_nav_avatar.scss | 14 +
.../solution_nav_avatar.stories.tsx | 35 +++
.../solution_nav/solution_nav_avatar.test.tsx | 20 ++
.../solution_nav/solution_nav_avatar.tsx | 45 +++
.../solution_nav_collapse_button.scss | 47 ++++
.../solution_nav_collapse_button.stories.tsx | 32 +++
.../solution_nav_collapse_button.test.tsx | 29 ++
.../solution_nav_collapse_button.tsx | 59 ++++
18 files changed, 937 insertions(+)
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.scss
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.scss
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
index 328580f6692874..9298a1b3c80e17 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
@@ -7,3 +7,4 @@
*/
export { NoDataCard } from './no_data_card';
export { ElasticAgentCard } from './elastic_agent_card';
+export type { NoDataCardProps } from './types';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
new file mode 100644
index 00000000000000..787868f8f86937
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -0,0 +1,265 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
+
+
+
+ Solution
+
+
+ }
+ isOpenOnMobile={false}
+ 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,
+ },
+ ]
+ }
+ mobileTitle={
+
+
+
+ }
+ toggleOpenOnMobile={[Function]}
+ />
+
+`;
+
+exports[`KibanaPageTemplateSolutionNav renders 1`] = `
+
+
+
+ Solution
+
+
+ }
+ isOpenOnMobile={false}
+ 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,
+ },
+ ]
+ }
+ mobileTitle={
+
+
+
+ }
+ toggleOpenOnMobile={[Function]}
+ />
+
+`;
+
+exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
+
+
+
+
+ Solution
+
+
+ }
+ isOpenOnMobile={false}
+ 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,
+ },
+ ]
+ }
+ mobileTitle={
+
+
+
+
+ }
+ toggleOpenOnMobile={[Function]}
+ />
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
new file mode 100644
index 00000000000000..aa9b86c8f2fbd7
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
new file mode 100644
index 00000000000000..93c3471c169213
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KibanaPageTemplateSolutionNavCollapseButton collapsed 1`] = `
+
+`;
+
+exports[`KibanaPageTemplateSolutionNavCollapseButton renders 1`] = `
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg b/packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg
new file mode 100644
index 00000000000000..fea0d6954343da
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts b/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts
new file mode 100644
index 00000000000000..81c2033a7ce7cf
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 type { KibanaPageTemplateSolutionNavProps } from './solution_nav';
+export { KibanaPageTemplateSolutionNav } from './solution_nav';
+export type { KibanaPageTemplateSolutionNavAvatarProps } from './solution_nav_avatar';
+export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
+export type { KibanaPageTemplateSolutionNavCollapseButtonProps } from './solution_nav_collapse_button';
+export { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.scss b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.scss
new file mode 100644
index 00000000000000..d0070cef729b73
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.scss
@@ -0,0 +1,30 @@
+$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
+@import '@elastic/eui/src/components/side_nav/mixins';
+
+// Put the page background color in the flyout version too
+.kbnPageTemplateSolutionNav__flyout {
+ background-color: $euiPageBackgroundColor;
+}
+
+.kbnPageTemplateSolutionNav {
+ @include euiSideNavEmbellish;
+ @include euiYScroll;
+
+ @include euiBreakpoint('m' ,'l', 'xl') {
+ width: 248px;
+ padding: $euiSizeL;
+ }
+
+ .kbnPageTemplateSolutionNavAvatar {
+ margin-right: $euiSize;
+ }
+}
+
+.kbnPageTemplateSolutionNav--hidden {
+ pointer-events: none;
+ opacity: 0;
+
+ @include euiCanAnimate {
+ transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
+ }
+}
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx
new file mode 100644
index 00000000000000..5d8313a493d8c4
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav';
+
+export default {
+ title: 'Solution Nav',
+ description: 'Solution-specific sidebar',
+};
+
+type Params = Pick;
+
+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',
+ },
+ ],
+ },
+];
+
+export const PureComponent = (params: Params) => {
+ return ;
+};
+
+PureComponent.argTypes = {
+ name: {
+ control: 'text',
+ defaultValue: 'Solution Name',
+ },
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.test.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.test.tsx
new file mode 100644
index 00000000000000..ed90894289169a
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.test.tsx
@@ -0,0 +1,77 @@
+/*
+ * 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 } from 'enzyme';
+import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav';
+
+jest.mock('@elastic/eui', () => ({
+ useIsWithinBreakpoints: (args: string[]) => {
+ return args[0] === 'xs';
+ },
+}));
+
+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',
+ },
+ ],
+ },
+];
+
+describe('KibanaPageTemplateSolutionNav', () => {
+ test('renders', () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('renders with icon', () => {
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ test('accepts EuiSideNavProps', () => {
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
new file mode 100644
index 00000000000000..842ef53d53ab73
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
@@ -0,0 +1,167 @@
+/*
+ * 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 './solution_nav.scss';
+
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import {
+ EuiFlyout,
+ EuiSideNav,
+ EuiSideNavItemType,
+ EuiSideNavProps,
+ useIsWithinBreakpoints,
+} from '@elastic/eui';
+
+import classNames from 'classnames';
+import {
+ KibanaPageTemplateSolutionNavAvatar,
+ KibanaPageTemplateSolutionNavAvatarProps,
+} from './solution_nav_avatar';
+import { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
+
+export type KibanaPageTemplateSolutionNavProps = EuiSideNavProps<{}> & {
+ /**
+ * Name of the solution, i.e. "Observability"
+ */
+ name: KibanaPageTemplateSolutionNavAvatarProps['name'];
+ /**
+ * Solution logo, i.e. "logoObservability"
+ */
+ icon?: KibanaPageTemplateSolutionNavAvatarProps['iconType'];
+ /**
+ * Control the collapsed state
+ */
+ isOpenOnDesktop?: boolean;
+ onCollapse?: () => void;
+};
+
+const SIZE = 248;
+
+const setTabIndex = (items: Array>, isHidden: boolean) => {
+ return items.map((item) => {
+ // @ts-ignore-next-line Can be removed on close of https://github.com/elastic/eui/issues/4925
+ item.tabIndex = isHidden ? -1 : undefined;
+ item.items = item.items && setTabIndex(item.items, isHidden);
+ return item;
+ });
+};
+
+/**
+ * A wrapper around EuiSideNav but also creates the appropriate title with optional solution logo
+ */
+export const KibanaPageTemplateSolutionNav = ({
+ name,
+ icon,
+ items,
+ isOpenOnDesktop = true,
+ onCollapse,
+ ...rest
+}: KibanaPageTemplateSolutionNavProps) => {
+ const isSmallerBreakpoint = useIsWithinBreakpoints(['xs', 's']);
+ const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
+ const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+
+ // This is used for both the EuiSideNav and EuiFlyout toggling
+ const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
+ const toggleOpenOnMobile = () => {
+ setIsSideNavOpenOnMobile(!isSideNavOpenOnMobile);
+ };
+
+ const isHidden = isLargerBreakpoint && !isOpenOnDesktop;
+
+ /**
+ * Create the avatar
+ */
+ const solutionAvatar = icon ? (
+
+ ) : null;
+
+ /**
+ * Create the titles
+ */
+ const titleText = (
+ <>
+ {solutionAvatar}
+ {name}
+ >
+ );
+ const mobileTitleText = (
+
+ );
+
+ /**
+ * Create the side nav component
+ */
+
+ const sideNav = () => {
+ const sideNavClasses = classNames('kbnPageTemplateSolutionNav', {
+ 'kbnPageTemplateSolutionNav--hidden': isHidden,
+ });
+ if (!items) {
+ return null;
+ }
+ return (
+
+ {solutionAvatar}
+ {mobileTitleText}
+ >
+ }
+ toggleOpenOnMobile={toggleOpenOnMobile}
+ isOpenOnMobile={isSideNavOpenOnMobile}
+ items={setTabIndex(items, isHidden)}
+ {...rest}
+ />
+ );
+ };
+
+ return (
+ <>
+ {isSmallerBreakpoint && sideNav()}
+ {isMediumBreakpoint && (
+ <>
+ {isSideNavOpenOnMobile && (
+ setIsSideNavOpenOnMobile(false)}
+ side="left"
+ size={SIZE}
+ closeButtonPosition="outside"
+ className="kbnPageTemplateSolutionNav__flyout"
+ >
+ {sideNav()}
+
+ )}
+
+ >
+ )}
+ {isLargerBreakpoint && (
+ <>
+ {sideNav()}
+
+ >
+ )}
+ >
+ );
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss
new file mode 100644
index 00000000000000..03ca7dddb90637
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss
@@ -0,0 +1,14 @@
+.kbnPageTemplateSolutionNavAvatar {
+ @include euiBottomShadowSmall;
+
+ &--xxl {
+ @include euiBottomShadowMedium;
+ @include size(100px);
+ line-height: 100px;
+ border-radius: 100px;
+ display: inline-block;
+ background: $euiColorEmptyShade url('./assets/texture.svg') no-repeat;
+ background-size: cover, 125%;
+ text-align: center;
+ }
+}
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx
new file mode 100644
index 00000000000000..c4a5cc13314655
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 {
+ KibanaPageTemplateSolutionNavAvatar,
+ KibanaPageTemplateSolutionNavAvatarProps,
+} from './solution_nav_avatar';
+
+export default {
+ title: 'Solution Nav Avatar',
+ description: 'A wrapper around EuiAvatar, with some extra styling',
+};
+
+type Params = Pick;
+
+export const PureComponent = (params: Params) => {
+ return ;
+};
+
+PureComponent.argTypes = {
+ name: {
+ control: 'text',
+ defaultValue: 'Solution Name',
+ },
+ size: {
+ control: 'radio',
+ options: ['s', 'm', 'l', 'xl', 'xxl'],
+ },
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx
new file mode 100644
index 00000000000000..497b14bc702360
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx
@@ -0,0 +1,20 @@
+/*
+ * 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 } from 'enzyme';
+import { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
+
+describe('KibanaPageTemplateSolutionNavAvatar', () => {
+ test('renders', () => {
+ const component = shallow(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx
new file mode 100644
index 00000000000000..9cef8b1f7c2b25
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 './solution_nav_avatar.scss';
+
+import React from 'react';
+
+import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
+import classNames from 'classnames';
+
+export type KibanaPageTemplateSolutionNavAvatarProps = DistributiveOmit & {
+ /**
+ * Any EuiAvatar size available, or `xxl` for custom large, brand-focused version
+ */
+ size?: EuiAvatarProps['size'] | 'xxl';
+};
+
+/**
+ * Applies extra styling to a typical EuiAvatar
+ */
+export const KibanaPageTemplateSolutionNavAvatar = ({
+ className,
+ size,
+ ...rest
+}: KibanaPageTemplateSolutionNavAvatarProps) => {
+ return (
+ // @ts-ignore
+
+ );
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.scss b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.scss
new file mode 100644
index 00000000000000..61cea7962d956a
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -0,0 +1,47 @@
+.kbnPageTemplateSolutionNavCollapseButton {
+ position: absolute;
+ opacity: 0;
+ left: 248px - $euiSize;
+ top: $euiSizeL;
+ z-index: 2;
+
+ @include euiCanAnimate {
+ transition: opacity $euiAnimSpeedFast, left $euiAnimSpeedFast, background $euiAnimSpeedFast;
+ }
+
+ &:hover,
+ &:focus {
+ transition-delay: 0s !important;
+ }
+
+ .kbnPageTemplate__pageSideBar:hover &,
+ &:hover,
+ &:focus {
+ opacity: 1;
+ left: 248px - $euiSizeL;
+ }
+
+ .kbnPageTemplate__pageSideBar:hover & {
+ transition-delay: $euiAnimSpeedSlow * 2;
+ }
+
+ &:not(&-isCollapsed) {
+ background-color: $euiColorEmptyShade !important; // Override all states
+ }
+}
+
+// Make the button take up the entire area of the collapsed navigation
+.kbnPageTemplateSolutionNavCollapseButton-isCollapsed {
+ opacity: 1 !important;
+ transition-delay: 0s !important;
+ left: 0 !important;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ height: 100%;
+ width: 100%;
+ border-radius: 0;
+ // Keep the icon at the top instead of it getting shifted to the center of the page
+ padding-top: $euiSizeL + $euiSizeS;
+ align-items: flex-start;
+}
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
new file mode 100644
index 00000000000000..f2603c2e286ee4
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 { action } from '@storybook/addon-actions';
+import {
+ KibanaPageTemplateSolutionNavCollapseButton,
+ KibanaPageTemplateSolutionNavCollapseButtonProps,
+} from './solution_nav_collapse_button';
+
+export default {
+ title: 'Solution Nav Collapse Button',
+ description: 'A wrapper around EuiButtonIcon, styled to look like a show/hide button',
+};
+
+type Params = Pick;
+
+export const PureComponent = (params: Params) => {
+ return ;
+};
+
+PureComponent.argTypes = {
+ collapsed: {
+ control: 'boolean',
+ defaultValue: false,
+ },
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx
new file mode 100644
index 00000000000000..c8a0fcbd5ae5cb
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
+
+describe('KibanaPageTemplateSolutionNavCollapseButton', () => {
+ test('renders', () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ expect(component.find('.kbnPageTemplateSolutionNavCollapseButton').prop('title')).toBe(
+ 'Collapse side navigation'
+ );
+ });
+
+ test('collapsed', () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ expect(component.find('.kbnPageTemplateSolutionNavCollapseButton').prop('title')).toBe(
+ 'Open side navigation'
+ );
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
new file mode 100644
index 00000000000000..8e8a48b0f857cb
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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 './solution_nav_collapse_button.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { EuiButtonIcon, EuiButtonIconPropsForButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export type KibanaPageTemplateSolutionNavCollapseButtonProps =
+ Partial & {
+ /**
+ * Boolean state of current collapsed status
+ */
+ collapsed: boolean;
+ };
+
+/**
+ * Creates the styled icon button for showing/hiding solution nav
+ */
+export const KibanaPageTemplateSolutionNavCollapseButton = ({
+ className,
+ collapsed,
+ ...rest
+}: KibanaPageTemplateSolutionNavCollapseButtonProps) => {
+ const classes = classNames(
+ 'kbnPageTemplateSolutionNavCollapseButton',
+ {
+ 'kbnPageTemplateSolutionNavCollapseButton-isCollapsed': collapsed,
+ },
+ className
+ );
+
+ const collapseLabel = i18n.translate('kibana-react.solutionNav.collapsibleLabel', {
+ defaultMessage: 'Collapse side navigation',
+ });
+
+ const openLabel = i18n.translate('kibana-react.solutionNav.openLabel', {
+ defaultMessage: 'Open side navigation',
+ });
+
+ return (
+
+ );
+};
From 67560043200040954fb5503e2cfb019fec90c64f Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Tue, 22 Mar 2022 18:08:11 +0100
Subject: [PATCH 04/37] Updating snapshot
---
.../__snapshots__/solution_nav_avatar.test.tsx.snap | 2 --
1 file changed, 2 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
index aa9b86c8f2fbd7..6cb2aa4423359b 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
@@ -3,8 +3,6 @@
exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
From 95387f27e492ce69d6a966c5a2a2d8e397071c3b Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Tue, 22 Mar 2022 20:22:02 +0100
Subject: [PATCH 05/37] Fix i18n
---
.../src/page_template/solution_nav/solution_nav.tsx | 2 +-
.../solution_nav/solution_nav_collapse_button.tsx | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
index 842ef53d53ab73..24029472fb9e07 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
@@ -93,7 +93,7 @@ export const KibanaPageTemplateSolutionNav = ({
);
const mobileTitleText = (
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
index 8e8a48b0f857cb..dd9942fa62c227 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -37,11 +37,11 @@ export const KibanaPageTemplateSolutionNavCollapseButton = ({
className
);
- const collapseLabel = i18n.translate('kibana-react.solutionNav.collapsibleLabel', {
+ const collapseLabel = i18n.translate('sharedUXComponents.solutionNav.collapsibleLabel', {
defaultMessage: 'Collapse side navigation',
});
- const openLabel = i18n.translate('kibana-react.solutionNav.openLabel', {
+ const openLabel = i18n.translate('sharedUXComponents.solutionNav.openLabel', {
defaultMessage: 'Open side navigation',
});
From ab4e3b289df7c01c0fa274b14f8e319ee95c4955 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 07:06:07 +0100
Subject: [PATCH 06/37] Fix index.tsx
---
.../page_template/no_data_page/action_cards/index.tsx | 9 ---------
1 file changed, 9 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
index 0ba8ef86ba5cbd..e69de29bb2d1d6 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
@@ -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 { ActionCards } from './action_cards';
From b4a9f0fac8b95bfe712ef5b4d6dd0bd0616459da Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 07:23:18 +0100
Subject: [PATCH 07/37] Fix failing test
---
.../action_cards/action_cards.stories.tsx | 27 ---------------
.../action_cards/action_cards.styles.ts | 15 ---------
.../action_cards/action_cards.test.tsx | 31 -----------------
.../action_cards/action_cards.tsx | 33 -------------------
.../no_data_page/action_cards/index.tsx | 0
.../__snapshots__/solution_nav.test.tsx.snap | 6 ++--
.../solution_nav/solution_nav.stories.tsx | 2 +-
.../solution_nav_avatar.stories.tsx | 2 +-
.../solution_nav_collapse_button.stories.tsx | 4 +--
9 files changed, 7 insertions(+), 113 deletions(-)
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
deleted file mode 100644
index 2393f48c909423..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
+++ /dev/null
@@ -1,27 +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 { NoDataCard } from '../no_data_card';
-import { ActionCards } from './action_cards';
-
-export default {
- title: 'Elastic Action Cards',
- description: 'A group of ElasticAgentCards or NoDataCards, to be used on NoData page',
-};
-
-export const PureComponent = () => {
- const action = {
- recommended: false,
- button: 'Button',
- onClick: () => {},
- };
- const card1 = ;
- const card2 = ;
- return ;
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
deleted file mode 100644
index ec5e2d9c84f6a3..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
+++ /dev/null
@@ -1,15 +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 const ActionCardsStyles = (euiSize: number, isWithinBreakpoints: boolean) => {
- return {
- '&:only-child': {
- minWidth: isWithinBreakpoints ? 'auto' : `${euiSize * 22.5} px`,
- },
- };
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
deleted file mode 100644
index 6223613815f58c..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
+++ /dev/null
@@ -1,31 +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 { shallowWithIntl } from '@kbn/test-jest-helpers';
-import { NoDataCard } from '../no_data_card';
-import { ActionCards } from './action_cards';
-
-describe('ActionCards', () => {
- const onClick = jest.fn();
- const action = {
- recommended: false,
- button: 'Button text',
- onClick,
- };
- const card = ;
- const actionCard1 =
{card}
;
- const actionCard2 =
{card}
;
-
- test('renders correctly', () => {
- const component = shallowWithIntl();
- const actionCards = component.find('div');
- expect(actionCards.length).toBe(2);
- expect(actionCards.at(0).key()).toBe('first');
- expect(actionCards.at(1).key()).toBe('second');
- });
-});
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
deleted file mode 100644
index 5db261499a4aec..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
+++ /dev/null
@@ -1,33 +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 { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
-import React, { ReactElement } from 'react';
-import { useIsWithinBreakpoints } from '@elastic/eui';
-import { ElasticAgentCard, NoDataCard } from '../no_data_card';
-import { ActionCardsStyles } from './action_cards.styles';
-
-interface ActionCardsProps {
- actionCards: Array | ReactElement>;
-}
-export const ActionCards = ({ actionCards }: ActionCardsProps) => {
- const isWithinBreakpoints = useIsWithinBreakpoints(['xs', 's']);
- const euiSize = 16;
- const actionCardsStyle = ActionCardsStyles(euiSize, isWithinBreakpoints);
-
- const cards = actionCards.map((card) => (
-
- {card}
-
- ));
- return (
-
- {cards}
-
- );
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
deleted file mode 100644
index e69de29bb2d1d6..00000000000000
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
index 787868f8f86937..2061c5e39cc1a2 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
{
PureComponent.argTypes = {
collapsed: {
control: 'boolean',
- defaultValue: false,
+ defaultValue: true,
},
};
From 9b8877b4e0a440d55fa1bb463c0f384ba336febe Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 07:25:36 +0100
Subject: [PATCH 08/37] Remove unnecessary export
---
.../src/page_template/no_data_page/no_data_card/index.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
index 9298a1b3c80e17..328580f6692874 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
@@ -7,4 +7,3 @@
*/
export { NoDataCard } from './no_data_card';
export { ElasticAgentCard } from './elastic_agent_card';
-export type { NoDataCardProps } from './types';
From 347e4010de6409c5a417d86627c4dbb2938374d2 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 16:34:39 +0100
Subject: [PATCH 09/37] Change folder structure of solution_nav_avatar
---
.../kbn-shared-ux-components/src/index.ts | 17 +++++++
.../solution_nav_avatar.test.tsx.snap | 9 ----
.../src/page_template/solution_nav/index.ts | 2 -
.../solution_nav/solution_nav.tsx | 2 +-
.../solution_nav/solution_nav_avatar.scss | 14 ------
.../solution_nav_avatar.stories.tsx | 35 ---------------
.../solution_nav/solution_nav_avatar.test.tsx | 20 ---------
.../solution_nav/solution_nav_avatar.tsx | 45 -------------------
.../solution_nav_avatar/index.tsx | 1 +
9 files changed, 19 insertions(+), 126 deletions(-)
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx
diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index 2bf228d2fee792..6c11e2936c200f 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -113,3 +113,20 @@ export const KibanaPageTemplateSolutionNavAvatarLazy = React.lazy(() =>
export const KibanaPageTemplateSolutionNavAvatar = withSuspense(
KibanaPageTemplateSolutionNavAvatarLazy
);
+
+/**
+ * The lazily loaded `KibanaPageTemplateSolutionNav` component that is wrapped by the `withSuspense` HOC. Consumers should use
+ * `React.Suspense` or `withSuspense` HOC to load this component.
+ */
+export const KibanaPageTemplateSolutionNavLazy = React.lazy(() =>
+ import('./page_template/solution_nav').then(({ KibanaPageTemplateSolutionNav }) => ({
+ default: KibanaPageTemplateSolutionNav,
+ }))
+);
+
+/**
+ * A `KibanaPageTemplateSolutionNav` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `KibanaPageTemplateSolutionNavLazy` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const KibanaPageTemplateSolutionNav = withSuspense(KibanaPageTemplateSolutionNavLazy);
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
deleted file mode 100644
index 6cb2aa4423359b..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
-
-`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts b/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts
index 81c2033a7ce7cf..59ef2924b048da 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts
@@ -8,7 +8,5 @@
export type { KibanaPageTemplateSolutionNavProps } from './solution_nav';
export { KibanaPageTemplateSolutionNav } from './solution_nav';
-export type { KibanaPageTemplateSolutionNavAvatarProps } from './solution_nav_avatar';
-export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
export type { KibanaPageTemplateSolutionNavCollapseButtonProps } from './solution_nav_collapse_button';
export { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
index 24029472fb9e07..4b8e1f454449e9 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
@@ -22,7 +22,7 @@ import classNames from 'classnames';
import {
KibanaPageTemplateSolutionNavAvatar,
KibanaPageTemplateSolutionNavAvatarProps,
-} from './solution_nav_avatar';
+} from '../solution_nav_avatar';
import { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
export type KibanaPageTemplateSolutionNavProps = EuiSideNavProps<{}> & {
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss
deleted file mode 100644
index 03ca7dddb90637..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.kbnPageTemplateSolutionNavAvatar {
- @include euiBottomShadowSmall;
-
- &--xxl {
- @include euiBottomShadowMedium;
- @include size(100px);
- line-height: 100px;
- border-radius: 100px;
- display: inline-block;
- background: $euiColorEmptyShade url('./assets/texture.svg') no-repeat;
- background-size: cover, 125%;
- text-align: center;
- }
-}
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx
deleted file mode 100644
index d8de8d77e2e037..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.stories.tsx
+++ /dev/null
@@ -1,35 +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 {
- KibanaPageTemplateSolutionNavAvatar,
- KibanaPageTemplateSolutionNavAvatarProps,
-} from './solution_nav_avatar';
-
-export default {
- title: 'Page Template/Solution Nav/Solution Nav Avatar',
- description: 'A wrapper around EuiAvatar, with some extra styling',
-};
-
-type Params = Pick;
-
-export const PureComponent = (params: Params) => {
- return ;
-};
-
-PureComponent.argTypes = {
- name: {
- control: 'text',
- defaultValue: 'Solution Name',
- },
- size: {
- control: 'radio',
- options: ['s', 'm', 'l', 'xl', 'xxl'],
- },
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx
deleted file mode 100644
index 497b14bc702360..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.test.tsx
+++ /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 React from 'react';
-import { shallow } from 'enzyme';
-import { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
-
-describe('KibanaPageTemplateSolutionNavAvatar', () => {
- test('renders', () => {
- const component = shallow(
-
- );
- expect(component).toMatchSnapshot();
- });
-});
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx
deleted file mode 100644
index 9cef8b1f7c2b25..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_avatar.tsx
+++ /dev/null
@@ -1,45 +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 './solution_nav_avatar.scss';
-
-import React from 'react';
-
-import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
-import classNames from 'classnames';
-
-export type KibanaPageTemplateSolutionNavAvatarProps = DistributiveOmit & {
- /**
- * Any EuiAvatar size available, or `xxl` for custom large, brand-focused version
- */
- size?: EuiAvatarProps['size'] | 'xxl';
-};
-
-/**
- * Applies extra styling to a typical EuiAvatar
- */
-export const KibanaPageTemplateSolutionNavAvatar = ({
- className,
- size,
- ...rest
-}: KibanaPageTemplateSolutionNavAvatarProps) => {
- return (
- // @ts-ignore
-
- );
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
index 5f3417eb76cb90..40af2487c38afc 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
@@ -7,3 +7,4 @@
*/
export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
+export type { KibanaPageTemplateSolutionNavAvatarProps } from './solution_nav_avatar';
From f6d818c3723938f16f869f5baddfbd4ef5ac5d57 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Fri, 18 Mar 2022 11:00:29 +0100
Subject: [PATCH 10/37] [SharedUX] Migrate PageTemplate > NoDataPage >
ActionCards
---
.../action_cards/action_cards.stories.tsx | 27 +++++++++++++++
.../action_cards/action_cards.styles.ts | 15 +++++++++
.../action_cards/action_cards.test.tsx | 31 +++++++++++++++++
.../action_cards/action_cards.tsx | 33 +++++++++++++++++++
.../no_data_page/action_cards/index.tsx | 9 +++++
5 files changed, 115 insertions(+)
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
new file mode 100644
index 00000000000000..2393f48c909423
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { NoDataCard } from '../no_data_card';
+import { ActionCards } from './action_cards';
+
+export default {
+ title: 'Elastic Action Cards',
+ description: 'A group of ElasticAgentCards or NoDataCards, to be used on NoData page',
+};
+
+export const PureComponent = () => {
+ const action = {
+ recommended: false,
+ button: 'Button',
+ onClick: () => {},
+ };
+ const card1 = ;
+ const card2 = ;
+ return ;
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
new file mode 100644
index 00000000000000..ec5e2d9c84f6a3
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 const ActionCardsStyles = (euiSize: number, isWithinBreakpoints: boolean) => {
+ return {
+ '&:only-child': {
+ minWidth: isWithinBreakpoints ? 'auto' : `${euiSize * 22.5} px`,
+ },
+ };
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
new file mode 100644
index 00000000000000..6223613815f58c
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { shallowWithIntl } from '@kbn/test-jest-helpers';
+import { NoDataCard } from '../no_data_card';
+import { ActionCards } from './action_cards';
+
+describe('ActionCards', () => {
+ const onClick = jest.fn();
+ const action = {
+ recommended: false,
+ button: 'Button text',
+ onClick,
+ };
+ const card = ;
+ const actionCard1 =
{card}
;
+ const actionCard2 =
{card}
;
+
+ test('renders correctly', () => {
+ const component = shallowWithIntl();
+ const actionCards = component.find('div');
+ expect(actionCards.length).toBe(2);
+ expect(actionCards.at(0).key()).toBe('first');
+ expect(actionCards.at(1).key()).toBe('second');
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
new file mode 100644
index 00000000000000..5db261499a4aec
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
+import React, { ReactElement } from 'react';
+import { useIsWithinBreakpoints } from '@elastic/eui';
+import { ElasticAgentCard, NoDataCard } from '../no_data_card';
+import { ActionCardsStyles } from './action_cards.styles';
+
+interface ActionCardsProps {
+ actionCards: Array | ReactElement>;
+}
+export const ActionCards = ({ actionCards }: ActionCardsProps) => {
+ const isWithinBreakpoints = useIsWithinBreakpoints(['xs', 's']);
+ const euiSize = 16;
+ const actionCardsStyle = ActionCardsStyles(euiSize, isWithinBreakpoints);
+
+ const cards = actionCards.map((card) => (
+
+ {card}
+
+ ));
+ return (
+
+ {cards}
+
+ );
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
new file mode 100644
index 00000000000000..0ba8ef86ba5cbd
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
@@ -0,0 +1,9 @@
+/*
+ * 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 { ActionCards } from './action_cards';
From 30534eab075ea470a2026773efa648a014f804f7 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Tue, 22 Mar 2022 16:14:02 +0100
Subject: [PATCH 11/37] [SharedUX] Migrate PageTemplate > NoDataPage >
SolutionNav
---
.../page_template/no_data_page/no_data_card/index.ts | 1 +
.../__snapshots__/solution_nav.test.tsx.snap | 12 ++++++++++++
.../__snapshots__/solution_nav_avatar.test.tsx.snap | 11 +++++++++++
.../solution_nav_collapse_button.stories.tsx | 2 +-
4 files changed, 25 insertions(+), 1 deletion(-)
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
index 328580f6692874..9298a1b3c80e17 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
@@ -7,3 +7,4 @@
*/
export { NoDataCard } from './no_data_card';
export { ElasticAgentCard } from './elastic_agent_card';
+export type { NoDataCardProps } from './types';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
index 2061c5e39cc1a2..b94c08eef32469 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -72,7 +72,11 @@ exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
>>>>>> e5c0b4c43c1 ([SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav)
values={
Object {
"solutionName": "Solution",
@@ -157,7 +161,11 @@ exports[`KibanaPageTemplateSolutionNav renders 1`] = `
>>>>>> e5c0b4c43c1 ([SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav)
values={
Object {
"solutionName": "Solution",
@@ -250,7 +258,11 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
/>
>>>>>> e5c0b4c43c1 ([SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav)
values={
Object {
"solutionName": "Solution",
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
new file mode 100644
index 00000000000000..aa9b86c8f2fbd7
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
index 3f8aadf6454601..010a8082ca6f81 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
@@ -27,6 +27,6 @@ export const PureComponent = (params: Params) => {
PureComponent.argTypes = {
collapsed: {
control: 'boolean',
- defaultValue: true,
+ defaultValue: false,
},
};
From ec2aa1967621a783fc8f220b486e92ca67f81029 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Tue, 22 Mar 2022 18:08:11 +0100
Subject: [PATCH 12/37] Updating snapshot
---
.../__snapshots__/solution_nav_avatar.test.tsx.snap | 2 --
1 file changed, 2 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
index aa9b86c8f2fbd7..6cb2aa4423359b 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
@@ -3,8 +3,6 @@
exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
From c476398a9719985128a340e31d94528a809e1f1a Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 07:06:07 +0100
Subject: [PATCH 13/37] Fix index.tsx
---
.../page_template/no_data_page/action_cards/index.tsx | 9 ---------
1 file changed, 9 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
index 0ba8ef86ba5cbd..e69de29bb2d1d6 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
@@ -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 { ActionCards } from './action_cards';
From db9f0c76608abe7d886ddcf370c2ca9bfb98cf5c Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 07:23:18 +0100
Subject: [PATCH 14/37] Fix failing test
---
.../action_cards/action_cards.stories.tsx | 27 ---------------
.../action_cards/action_cards.styles.ts | 15 ---------
.../action_cards/action_cards.test.tsx | 31 -----------------
.../action_cards/action_cards.tsx | 33 -------------------
.../no_data_page/action_cards/index.tsx | 0
.../__snapshots__/solution_nav.test.tsx.snap | 12 -------
.../solution_nav_avatar.test.tsx.snap | 9 -----
.../solution_nav_collapse_button.stories.tsx | 2 +-
8 files changed, 1 insertion(+), 128 deletions(-)
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
deleted file mode 100644
index 2393f48c909423..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.stories.tsx
+++ /dev/null
@@ -1,27 +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 { NoDataCard } from '../no_data_card';
-import { ActionCards } from './action_cards';
-
-export default {
- title: 'Elastic Action Cards',
- description: 'A group of ElasticAgentCards or NoDataCards, to be used on NoData page',
-};
-
-export const PureComponent = () => {
- const action = {
- recommended: false,
- button: 'Button',
- onClick: () => {},
- };
- const card1 = ;
- const card2 = ;
- return ;
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
deleted file mode 100644
index ec5e2d9c84f6a3..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.styles.ts
+++ /dev/null
@@ -1,15 +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 const ActionCardsStyles = (euiSize: number, isWithinBreakpoints: boolean) => {
- return {
- '&:only-child': {
- minWidth: isWithinBreakpoints ? 'auto' : `${euiSize * 22.5} px`,
- },
- };
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
deleted file mode 100644
index 6223613815f58c..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.test.tsx
+++ /dev/null
@@ -1,31 +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 { shallowWithIntl } from '@kbn/test-jest-helpers';
-import { NoDataCard } from '../no_data_card';
-import { ActionCards } from './action_cards';
-
-describe('ActionCards', () => {
- const onClick = jest.fn();
- const action = {
- recommended: false,
- button: 'Button text',
- onClick,
- };
- const card = ;
- const actionCard1 =
{card}
;
- const actionCard2 =
{card}
;
-
- test('renders correctly', () => {
- const component = shallowWithIntl();
- const actionCards = component.find('div');
- expect(actionCards.length).toBe(2);
- expect(actionCards.at(0).key()).toBe('first');
- expect(actionCards.at(1).key()).toBe('second');
- });
-});
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
deleted file mode 100644
index 5db261499a4aec..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/action_cards.tsx
+++ /dev/null
@@ -1,33 +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 { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
-import React, { ReactElement } from 'react';
-import { useIsWithinBreakpoints } from '@elastic/eui';
-import { ElasticAgentCard, NoDataCard } from '../no_data_card';
-import { ActionCardsStyles } from './action_cards.styles';
-
-interface ActionCardsProps {
- actionCards: Array | ReactElement>;
-}
-export const ActionCards = ({ actionCards }: ActionCardsProps) => {
- const isWithinBreakpoints = useIsWithinBreakpoints(['xs', 's']);
- const euiSize = 16;
- const actionCardsStyle = ActionCardsStyles(euiSize, isWithinBreakpoints);
-
- const cards = actionCards.map((card) => (
-
- {card}
-
- ));
- return (
-
- {cards}
-
- );
-};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx
deleted file mode 100644
index e69de29bb2d1d6..00000000000000
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
index b94c08eef32469..2061c5e39cc1a2 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -72,11 +72,7 @@ exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
>>>>>> e5c0b4c43c1 ([SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav)
values={
Object {
"solutionName": "Solution",
@@ -161,11 +157,7 @@ exports[`KibanaPageTemplateSolutionNav renders 1`] = `
>>>>>> e5c0b4c43c1 ([SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav)
values={
Object {
"solutionName": "Solution",
@@ -258,11 +250,7 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
/>
>>>>>> e5c0b4c43c1 ([SharedUX] Migrate PageTemplate > NoDataPage > SolutionNav)
values={
Object {
"solutionName": "Solution",
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
deleted file mode 100644
index 6cb2aa4423359b..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
-
-`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
index 010a8082ca6f81..3f8aadf6454601 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
@@ -27,6 +27,6 @@ export const PureComponent = (params: Params) => {
PureComponent.argTypes = {
collapsed: {
control: 'boolean',
- defaultValue: false,
+ defaultValue: true,
},
};
From 8df73d77dd18ef363a272971ec1e948c67d26929 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 07:25:36 +0100
Subject: [PATCH 15/37] Remove unnecessary export
---
.../src/page_template/no_data_page/no_data_card/index.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
index 9298a1b3c80e17..328580f6692874 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/index.ts
@@ -7,4 +7,3 @@
*/
export { NoDataCard } from './no_data_card';
export { ElasticAgentCard } from './elastic_agent_card';
-export type { NoDataCardProps } from './types';
From 372840f143ffcb69364ca0fcdd1f6d74ebeaaad4 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 16:46:32 +0100
Subject: [PATCH 16/37] Fix comment
---
packages/kbn-shared-ux-components/src/index.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index 2bf228d2fee792..e097c09543fd19 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -106,8 +106,8 @@ export const KibanaPageTemplateSolutionNavAvatarLazy = React.lazy(() =>
);
/**
- * A `KibanaPageTemplateSolutionNavAvata` component that is wrapped by the `withSuspense` HOC. This component can
- * be used directly by consumers and will load the `LazyNoDataViews` component lazily with
+ * A `KibanaPageTemplateSolutionNavAvatar` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `KibanaPageTemplateSolutionNavAvatarLazy` component lazily with
* a predefined fallback and error boundary.
*/
export const KibanaPageTemplateSolutionNavAvatar = withSuspense(
From 88fba5ac8781590dc7ada9128de404f22bfc8032 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 17:00:54 +0100
Subject: [PATCH 17/37] Renaming component
---
packages/kbn-shared-ux-components/src/index.ts | 14 ++++++--------
.../src/page_template/index.tsx | 2 +-
.../__snapshots__/solution_avatar.test.tsx.snap | 9 +++++++++
.../solution_avatar/assets/texture.svg | 1 +
.../index.tsx | 2 +-
.../solution_avatar.scss} | 2 +-
.../solution_avatar.stories.tsx} | 0
.../solution_avatar.test.tsx} | 8 +++-----
.../solution_avatar.tsx} | 14 +++++---------
.../solution_nav_avatar.test.tsx.snap | 9 ---------
10 files changed, 27 insertions(+), 34 deletions(-)
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
create mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_avatar/assets/texture.svg
rename packages/kbn-shared-ux-components/src/page_template/{solution_nav_avatar => solution_avatar}/index.tsx (82%)
rename packages/kbn-shared-ux-components/src/page_template/{solution_nav_avatar/solution_nav_avatar.scss => solution_avatar/solution_avatar.scss} (89%)
rename packages/kbn-shared-ux-components/src/page_template/{solution_nav_avatar/solution_nav_avatar.stories.tsx => solution_avatar/solution_avatar.stories.tsx} (100%)
rename packages/kbn-shared-ux-components/src/page_template/{solution_nav_avatar/solution_nav_avatar.test.tsx => solution_avatar/solution_avatar.test.tsx} (65%)
rename packages/kbn-shared-ux-components/src/page_template/{solution_nav_avatar/solution_nav_avatar.tsx => solution_avatar/solution_avatar.tsx} (70%)
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/__snapshots__/solution_nav_avatar.test.tsx.snap
diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index e097c09543fd19..d10baea8f7258c 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -96,20 +96,18 @@ export const LazyIconButtonGroup = React.lazy(() =>
export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
/**
- * The Lazily-loaded `KibanaPageTemplateSolutionNavAvatar` component. Consumers should use `React.Suspennse` or the
+ * The Lazily-loaded `KibanaSolutionAvatar` component. Consumers should use `React.Suspense` or the
* `withSuspense` HOC to load this component.
*/
-export const KibanaPageTemplateSolutionNavAvatarLazy = React.lazy(() =>
- import('./page_template/solution_nav_avatar').then(({ KibanaPageTemplateSolutionNavAvatar }) => ({
- default: KibanaPageTemplateSolutionNavAvatar,
+export const KibanaSolutionAvatarLazy = React.lazy(() =>
+ import('./page_template/solution_avatar').then(({ KibanaSolutionAvatar }) => ({
+ default: KibanaSolutionAvatar,
}))
);
/**
- * A `KibanaPageTemplateSolutionNavAvatar` component that is wrapped by the `withSuspense` HOC. This component can
+ * A `KibanaSolutionAvatar` component that is wrapped by the `withSuspense` HOC. This component can
* be used directly by consumers and will load the `KibanaPageTemplateSolutionNavAvatarLazy` component lazily with
* a predefined fallback and error boundary.
*/
-export const KibanaPageTemplateSolutionNavAvatar = withSuspense(
- KibanaPageTemplateSolutionNavAvatarLazy
-);
+export const KibanaSolutionAvatar = withSuspense(KibanaSolutionAvatarLazy);
diff --git a/packages/kbn-shared-ux-components/src/page_template/index.tsx b/packages/kbn-shared-ux-components/src/page_template/index.tsx
index 217bccb1197d1d..3e261ebbdf86be 100644
--- a/packages/kbn-shared-ux-components/src/page_template/index.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/index.tsx
@@ -7,4 +7,4 @@
*/
export { NoDataCard, ElasticAgentCard } from './no_data_page';
-export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
+export { KibanaSolutionAvatar } from './solution_avatar';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
new file mode 100644
index 00000000000000..4e751fe0ff5188
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KibanaSolutionAvatar renders 1`] = `
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/assets/texture.svg b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/assets/texture.svg
new file mode 100644
index 00000000000000..fea0d6954343da
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/assets/texture.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/index.tsx
similarity index 82%
rename from packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
rename to packages/kbn-shared-ux-components/src/page_template/solution_avatar/index.tsx
index 5f3417eb76cb90..db31c0fd5a3d4d 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/index.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/index.tsx
@@ -6,4 +6,4 @@
* Side Public License, v 1.
*/
-export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
+export { KibanaSolutionAvatar } from './solution_avatar';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.scss b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.scss
similarity index 89%
rename from packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.scss
rename to packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.scss
index 03ca7dddb90637..68bbaf6fe72497 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.scss
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.scss
@@ -1,4 +1,4 @@
-.kbnPageTemplateSolutionNavAvatar {
+.kbnSolutionAvatar {
@include euiBottomShadowSmall;
&--xxl {
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.stories.tsx
similarity index 100%
rename from packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.stories.tsx
rename to packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.stories.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.test.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.test.tsx
similarity index 65%
rename from packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.test.tsx
rename to packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.test.tsx
index 497b14bc702360..7a8b20c3f8d648 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.test.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.test.tsx
@@ -8,13 +8,11 @@
import React from 'react';
import { shallow } from 'enzyme';
-import { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar';
+import { KibanaSolutionAvatar } from './solution_avatar';
-describe('KibanaPageTemplateSolutionNavAvatar', () => {
+describe('KibanaSolutionAvatar', () => {
test('renders', () => {
- const component = shallow(
-
- );
+ const component = shallow();
expect(component).toMatchSnapshot();
});
});
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.tsx
similarity index 70%
rename from packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.tsx
rename to packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.tsx
index 9cef8b1f7c2b25..5a1f088478e181 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav_avatar/solution_nav_avatar.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.tsx
@@ -5,14 +5,14 @@
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
-import './solution_nav_avatar.scss';
+import './solution_avatar.scss';
import React from 'react';
import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
import classNames from 'classnames';
-export type KibanaPageTemplateSolutionNavAvatarProps = DistributiveOmit & {
+export type KibanaSolutionAvatarProps = DistributiveOmit & {
/**
* Any EuiAvatar size available, or `xxl` for custom large, brand-focused version
*/
@@ -22,18 +22,14 @@ export type KibanaPageTemplateSolutionNavAvatarProps = DistributiveOmit {
+export const KibanaSolutionAvatar = ({ className, size, ...rest }: KibanaSolutionAvatarProps) => {
return (
// @ts-ignore
-`;
From 6b476996406b2dd9fbec6497c98bbe38fdeee186 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 17:04:48 +0100
Subject: [PATCH 18/37] Fix folder structure
---
packages/kbn-shared-ux-components/src/index.ts | 2 +-
.../kbn-shared-ux-components/src/page_template/index.tsx | 1 -
.../__snapshots__/solution_avatar.test.tsx.snap | 0
.../solution_avatar/assets/texture.svg | 0
.../src/{page_template => }/solution_avatar/index.tsx | 0
.../solution_avatar/solution_avatar.scss | 2 +-
.../solution_avatar/solution_avatar.stories.tsx | 9 +++------
.../solution_avatar/solution_avatar.test.tsx | 0
.../solution_avatar/solution_avatar.tsx | 0
9 files changed, 5 insertions(+), 9 deletions(-)
rename packages/kbn-shared-ux-components/src/{page_template => }/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap (100%)
rename packages/kbn-shared-ux-components/src/{page_template => }/solution_avatar/assets/texture.svg (100%)
rename packages/kbn-shared-ux-components/src/{page_template => }/solution_avatar/index.tsx (100%)
rename packages/kbn-shared-ux-components/src/{page_template => }/solution_avatar/solution_avatar.scss (78%)
rename packages/kbn-shared-ux-components/src/{page_template => }/solution_avatar/solution_avatar.stories.tsx (74%)
rename packages/kbn-shared-ux-components/src/{page_template => }/solution_avatar/solution_avatar.test.tsx (100%)
rename packages/kbn-shared-ux-components/src/{page_template => }/solution_avatar/solution_avatar.tsx (100%)
diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index d10baea8f7258c..1f6de24cdfa78e 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -100,7 +100,7 @@ export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
* `withSuspense` HOC to load this component.
*/
export const KibanaSolutionAvatarLazy = React.lazy(() =>
- import('./page_template/solution_avatar').then(({ KibanaSolutionAvatar }) => ({
+ import('./solution_avatar').then(({ KibanaSolutionAvatar }) => ({
default: KibanaSolutionAvatar,
}))
);
diff --git a/packages/kbn-shared-ux-components/src/page_template/index.tsx b/packages/kbn-shared-ux-components/src/page_template/index.tsx
index 3e261ebbdf86be..adbfdce45be767 100644
--- a/packages/kbn-shared-ux-components/src/page_template/index.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/index.tsx
@@ -7,4 +7,3 @@
*/
export { NoDataCard, ElasticAgentCard } from './no_data_page';
-export { KibanaSolutionAvatar } from './solution_avatar';
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
similarity index 100%
rename from packages/kbn-shared-ux-components/src/page_template/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
rename to packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/assets/texture.svg b/packages/kbn-shared-ux-components/src/solution_avatar/assets/texture.svg
similarity index 100%
rename from packages/kbn-shared-ux-components/src/page_template/solution_avatar/assets/texture.svg
rename to packages/kbn-shared-ux-components/src/solution_avatar/assets/texture.svg
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/index.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx
similarity index 100%
rename from packages/kbn-shared-ux-components/src/page_template/solution_avatar/index.tsx
rename to packages/kbn-shared-ux-components/src/solution_avatar/index.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.scss b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.scss
similarity index 78%
rename from packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.scss
rename to packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.scss
index 68bbaf6fe72497..1402f272a15cfc 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.scss
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.scss
@@ -7,7 +7,7 @@
line-height: 100px;
border-radius: 100px;
display: inline-block;
- background: $euiColorEmptyShade url('./assets/texture.svg') no-repeat;
+ background: $euiColorEmptyShade url('assets/texture.svg') no-repeat;
background-size: cover, 125%;
text-align: center;
}
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.stories.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
similarity index 74%
rename from packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.stories.tsx
rename to packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
index eff0fa22427ebf..95e1e5a01499d0 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
@@ -7,20 +7,17 @@
*/
import React from 'react';
-import {
- KibanaPageTemplateSolutionNavAvatar,
- KibanaPageTemplateSolutionNavAvatarProps,
-} from './solution_nav_avatar';
+import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from './solution_avatar';
export default {
title: 'Page Template/Solution Nav Avatar',
description: 'A wrapper around EuiAvatar, with some extra styling',
};
-type Params = Pick;
+type Params = Pick;
export const PureComponent = (params: Params) => {
- return ;
+ return ;
};
PureComponent.argTypes = {
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.test.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.test.tsx
similarity index 100%
rename from packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.test.tsx
rename to packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.test.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.tsx
similarity index 100%
rename from packages/kbn-shared-ux-components/src/page_template/solution_avatar/solution_avatar.tsx
rename to packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.tsx
From 44c503902fbb5e15a1b3d7521440da6981cf970d Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 17:05:36 +0100
Subject: [PATCH 19/37] Fix storybook
---
.../src/solution_avatar/solution_avatar.stories.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
index 95e1e5a01499d0..17f906e224c491 100644
--- a/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx
@@ -10,7 +10,7 @@ import React from 'react';
import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from './solution_avatar';
export default {
- title: 'Page Template/Solution Nav Avatar',
+ title: 'Solution Avatar',
description: 'A wrapper around EuiAvatar, with some extra styling',
};
From b65b050580256d0444f6b391ca3497214fcbf39c Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 23 Mar 2022 17:07:27 +0100
Subject: [PATCH 20/37] Style fix
---
packages/kbn-shared-ux-components/src/index.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index 1f6de24cdfa78e..9216f5b21d7f58 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -96,8 +96,8 @@ export const LazyIconButtonGroup = React.lazy(() =>
export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
/**
- * The Lazily-loaded `KibanaSolutionAvatar` component. Consumers should use `React.Suspense` or the
- * `withSuspense` HOC to load this component.
+ * The Lazily-loaded `KibanaSolutionAvatar` component. Consumers should use `React.Suspense` or
+ * the withSuspense` HOC to load this component.
*/
export const KibanaSolutionAvatarLazy = React.lazy(() =>
import('./solution_avatar').then(({ KibanaSolutionAvatar }) => ({
From 96859b28ad6842a4218a498b4d6021d792d9904e Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Thu, 24 Mar 2022 07:08:49 +0100
Subject: [PATCH 21/37] Fix SolutionAvatar reference
---
.../src/page_template/solution_nav/solution_nav.tsx | 13 ++++---------
.../src/solution_avatar/index.tsx | 1 +
2 files changed, 5 insertions(+), 9 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
index 4b8e1f454449e9..0607dd0eecde75 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
@@ -19,21 +19,18 @@ import {
} from '@elastic/eui';
import classNames from 'classnames';
-import {
- KibanaPageTemplateSolutionNavAvatar,
- KibanaPageTemplateSolutionNavAvatarProps,
-} from '../solution_nav_avatar';
+import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from '../../solution_avatar';
import { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
export type KibanaPageTemplateSolutionNavProps = EuiSideNavProps<{}> & {
/**
* Name of the solution, i.e. "Observability"
*/
- name: KibanaPageTemplateSolutionNavAvatarProps['name'];
+ name: KibanaSolutionAvatarProps['name'];
/**
* Solution logo, i.e. "logoObservability"
*/
- icon?: KibanaPageTemplateSolutionNavAvatarProps['iconType'];
+ icon?: KibanaSolutionAvatarProps['iconType'];
/**
* Control the collapsed state
*/
@@ -78,9 +75,7 @@ export const KibanaPageTemplateSolutionNav = ({
/**
* Create the avatar
*/
- const solutionAvatar = icon ? (
-
- ) : null;
+ const solutionAvatar = icon ? : null;
/**
* Create the titles
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx b/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx
index fcb2410a26b7b8..efc597cbdcb13e 100644
--- a/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/index.tsx
@@ -6,3 +6,4 @@
* Side Public License, v 1.
*/
export { KibanaSolutionAvatar } from './solution_avatar';
+export type { KibanaSolutionAvatarProps } from './solution_avatar';
From f713bae6086310e64300957de1ab6435ebee2cb0 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Fri, 25 Mar 2022 10:32:00 +0100
Subject: [PATCH 22/37] Fix failing test
---
.../solution_nav/__snapshots__/solution_nav.test.tsx.snap | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
index 2061c5e39cc1a2..f12f674ae6cca4 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -178,7 +178,7 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
className="kbnPageTemplateSolutionNav"
heading={
-
@@ -244,7 +244,7 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
}
mobileTitle={
-
From 3e772af3d2c9ddc5451a0f057c7c16ede4974ff0 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Fri, 25 Mar 2022 11:27:33 +0100
Subject: [PATCH 23/37] Fix failing snapshot
---
.../__snapshots__/solution_avatar.test.tsx.snap | 3 ---
1 file changed, 3 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap b/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
index ca0ae2cfe572cb..9817d7cdd8d45a 100644
--- a/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/solution_avatar/__snapshots__/solution_avatar.test.tsx.snap
@@ -3,10 +3,7 @@
exports[`KibanaSolutionAvatar renders 1`] = `
>>>>>> main
iconType="logoElastic"
name="Solution"
/>
From 329bc92445b78c0a34a35ea46b3144adff0594c6 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Thu, 31 Mar 2022 11:09:12 +0200
Subject: [PATCH 24/37] Applying PR comments
---
.../solution_nav/assets/texture.svg | 1 -
.../solution_nav/solution_nav.stories.tsx | 18 ++++++++---
.../solution_nav/solution_nav.tsx | 25 +++++++++------
.../solution_nav_collapse_button.stories.tsx | 32 -------------------
4 files changed, 29 insertions(+), 47 deletions(-)
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg
delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg b/packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg
deleted file mode 100644
index fea0d6954343da..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/assets/texture.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx
index 963a0da56d02b6..fa06c208d77400 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx
@@ -10,11 +10,11 @@ import React from 'react';
import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav';
export default {
- title: 'Page Template/Solution Nav/Solution NavBar',
- description: 'Solution-specific sidebar',
+ title: 'Page Template/Solution Nav/Solution Nav',
+ description: 'Solution-specific navigation for the sidebar',
};
-type Params = Pick;
+type Params = Pick;
const items: KibanaPageTemplateSolutionNavProps['items'] = [
{
@@ -56,12 +56,20 @@ const items: KibanaPageTemplateSolutionNavProps['items'] = [
];
export const PureComponent = (params: Params) => {
- return ;
+ return ;
};
PureComponent.argTypes = {
name: {
control: 'text',
- defaultValue: 'Solution Name',
+ defaultValue: 'Kibana',
+ },
+ icon: {
+ control: { type: 'radio' },
+ options: ['logoObservability', 'logoSecurity'],
+ },
+ isOpenOnDesktop: {
+ control: 'boolean',
+ defaultValue: true,
},
};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
index 0607dd0eecde75..b2adfdd06e66d6 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
@@ -11,6 +11,7 @@ import React, { useState } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
+ EuiAvatarProps,
EuiFlyout,
EuiSideNav,
EuiSideNavItemType,
@@ -19,18 +20,18 @@ import {
} from '@elastic/eui';
import classNames from 'classnames';
-import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from '../../solution_avatar';
+import { KibanaSolutionAvatar } from '../../solution_avatar';
import { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button';
export type KibanaPageTemplateSolutionNavProps = EuiSideNavProps<{}> & {
/**
* Name of the solution, i.e. "Observability"
*/
- name: KibanaSolutionAvatarProps['name'];
+ name: EuiAvatarProps['name'];
/**
* Solution logo, i.e. "logoObservability"
*/
- icon?: KibanaSolutionAvatarProps['iconType'];
+ icon?: EuiAvatarProps['iconType'];
/**
* Control the collapsed state
*/
@@ -38,7 +39,7 @@ export type KibanaPageTemplateSolutionNavProps = EuiSideNavProps<{}> & {
onCollapse?: () => void;
};
-const SIZE = 248;
+const FLYOUT_SIZE = 248;
const setTabIndex = (items: Array>, isHidden: boolean) => {
return items.map((item) => {
@@ -75,7 +76,13 @@ export const KibanaPageTemplateSolutionNav = ({
/**
* Create the avatar
*/
- const solutionAvatar = icon ? : null;
+ const solutionAvatar = icon ? (
+
+ ) : null;
/**
* Create the titles
@@ -99,12 +106,12 @@ export const KibanaPageTemplateSolutionNav = ({
*/
const sideNav = () => {
- const sideNavClasses = classNames('kbnPageTemplateSolutionNav', {
- 'kbnPageTemplateSolutionNav--hidden': isHidden,
- });
if (!items) {
return null;
}
+ const sideNavClasses = classNames('kbnPageTemplateSolutionNav', {
+ 'kbnPageTemplateSolutionNav--hidden': isHidden,
+ });
return (
setIsSideNavOpenOnMobile(false)}
side="left"
- size={SIZE}
+ size={FLYOUT_SIZE}
closeButtonPosition="outside"
className="kbnPageTemplateSolutionNav__flyout"
>
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
deleted file mode 100644
index 3f8aadf6454601..00000000000000
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx
+++ /dev/null
@@ -1,32 +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 { action } from '@storybook/addon-actions';
-import {
- KibanaPageTemplateSolutionNavCollapseButton,
- KibanaPageTemplateSolutionNavCollapseButtonProps,
-} from './solution_nav_collapse_button';
-
-export default {
- title: 'Page Template/Solution Nav/Solution Nav Collapse Button',
- description: 'A wrapper around EuiButtonIcon, styled to look like a show/hide button',
-};
-
-type Params = Pick;
-
-export const PureComponent = (params: Params) => {
- return ;
-};
-
-PureComponent.argTypes = {
- collapsed: {
- control: 'boolean',
- defaultValue: true,
- },
-};
From 5e679401ee49cba1246256ae5e846dedee19d1d5 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Thu, 31 Mar 2022 11:11:08 +0200
Subject: [PATCH 25/37] Updating failing snapshot
---
.../solution_nav/__snapshots__/solution_nav.test.tsx.snap | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
index f12f674ae6cca4..fce0e996d99cd8 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -179,6 +179,7 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
heading={
@@ -245,6 +246,7 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
mobileTitle={
From 3c1179cfc05da2552046b2feceabb2af0af59cf8 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Thu, 31 Mar 2022 11:12:02 +0200
Subject: [PATCH 26/37] Extract i18n
---
.../solution_nav_collapse_button.tsx | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
index dd9942fa62c227..1282a0a2aeb9d4 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -21,6 +21,14 @@ export type KibanaPageTemplateSolutionNavCollapseButtonProps =
collapsed: boolean;
};
+const collapseLabel = i18n.translate('sharedUXComponents.solutionNav.collapsibleLabel', {
+ defaultMessage: 'Collapse side navigation',
+});
+
+const openLabel = i18n.translate('sharedUXComponents.solutionNav.openLabel', {
+ defaultMessage: 'Open side navigation',
+});
+
/**
* Creates the styled icon button for showing/hiding solution nav
*/
@@ -37,14 +45,6 @@ export const KibanaPageTemplateSolutionNavCollapseButton = ({
className
);
- const collapseLabel = i18n.translate('sharedUXComponents.solutionNav.collapsibleLabel', {
- defaultMessage: 'Collapse side navigation',
- });
-
- const openLabel = i18n.translate('sharedUXComponents.solutionNav.openLabel', {
- defaultMessage: 'Open side navigation',
- });
-
return (
Date: Thu, 31 Mar 2022 17:44:00 +0200
Subject: [PATCH 27/37] collapsed > isCollapsed
---
.../solution_nav_collapse_button.test.tsx.snap | 11 +++++++++++
.../src/page_template/solution_nav/solution_nav.tsx | 4 ++--
.../solution_nav_collapse_button.test.tsx | 6 +++---
.../solution_nav/solution_nav_collapse_button.tsx | 12 ++++++------
4 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
index 93c3471c169213..281172676d3573 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
@@ -11,6 +11,17 @@ exports[`KibanaPageTemplateSolutionNavCollapseButton collapsed 1`] = `
/>
`;
+exports[`KibanaPageTemplateSolutionNavCollapseButton isCollapsed 1`] = `
+
+`;
+
exports[`KibanaPageTemplateSolutionNavCollapseButton renders 1`] = `
)}
>
@@ -159,7 +159,7 @@ export const KibanaPageTemplateSolutionNav = ({
<>
{sideNav()}
>
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx
index c8a0fcbd5ae5cb..e7df2ddd545829 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx
@@ -12,15 +12,15 @@ import { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_coll
describe('KibanaPageTemplateSolutionNavCollapseButton', () => {
test('renders', () => {
- const component = shallow();
+ const component = shallow();
expect(component).toMatchSnapshot();
expect(component.find('.kbnPageTemplateSolutionNavCollapseButton').prop('title')).toBe(
'Collapse side navigation'
);
});
- test('collapsed', () => {
- const component = shallow();
+ test('isCollapsed', () => {
+ const component = shallow();
expect(component).toMatchSnapshot();
expect(component.find('.kbnPageTemplateSolutionNavCollapseButton').prop('title')).toBe(
'Open side navigation'
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
index 1282a0a2aeb9d4..35890b935ad3eb 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -18,7 +18,7 @@ export type KibanaPageTemplateSolutionNavCollapseButtonProps =
/**
* Boolean state of current collapsed status
*/
- collapsed: boolean;
+ isCollapsed: boolean;
};
const collapseLabel = i18n.translate('sharedUXComponents.solutionNav.collapsibleLabel', {
@@ -34,13 +34,13 @@ const openLabel = i18n.translate('sharedUXComponents.solutionNav.openLabel', {
*/
export const KibanaPageTemplateSolutionNavCollapseButton = ({
className,
- collapsed,
+ isCollapsed,
...rest
}: KibanaPageTemplateSolutionNavCollapseButtonProps) => {
const classes = classNames(
'kbnPageTemplateSolutionNavCollapseButton',
{
- 'kbnPageTemplateSolutionNavCollapseButton-isCollapsed': collapsed,
+ 'kbnPageTemplateSolutionNavCollapseButton-isCollapsed': isCollapsed,
},
className
);
@@ -50,9 +50,9 @@ export const KibanaPageTemplateSolutionNavCollapseButton = ({
className={classes}
size="s"
color="text"
- iconType={collapsed ? 'menuRight' : 'menuLeft'}
- aria-label={collapsed ? openLabel : collapseLabel}
- title={collapsed ? openLabel : collapseLabel}
+ iconType={isCollapsed ? 'menuRight' : 'menuLeft'}
+ aria-label={isCollapsed ? openLabel : collapseLabel}
+ title={isCollapsed ? openLabel : collapseLabel}
{...rest}
/>
);
From 973d86a07f17eea88875fed6c69c410a30126b0d Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Fri, 1 Apr 2022 10:48:05 +0200
Subject: [PATCH 28/37] Applying PR comments
---
.../solution_nav_collapse_button.test.tsx.snap | 11 -----------
.../solution_nav/solution_nav.stories.tsx | 11 ++++-------
.../src/page_template/solution_nav/solution_nav.tsx | 13 ++++---------
3 files changed, 8 insertions(+), 27 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
index 281172676d3573..d2548b3e8df43a 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap
@@ -1,16 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`KibanaPageTemplateSolutionNavCollapseButton collapsed 1`] = `
-
-`;
-
exports[`KibanaPageTemplateSolutionNavCollapseButton isCollapsed 1`] = `
;
+type Params = Pick;
const items: KibanaPageTemplateSolutionNavProps['items'] = [
{
@@ -56,7 +56,7 @@ const items: KibanaPageTemplateSolutionNavProps['items'] = [
];
export const PureComponent = (params: Params) => {
- return ;
+ return ;
};
PureComponent.argTypes = {
@@ -66,10 +66,7 @@ PureComponent.argTypes = {
},
icon: {
control: { type: 'radio' },
- options: ['logoObservability', 'logoSecurity'],
- },
- isOpenOnDesktop: {
- control: 'boolean',
- defaultValue: true,
+ options: ['logoKibana', 'logoObservability', 'logoSecurity'],
+ defaultValue: 'logoKibana',
},
};
diff --git a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
index 0941a23554dd3c..8bc91789c70541 100644
--- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx
@@ -7,7 +7,7 @@
*/
import './solution_nav.scss';
-import React, { useState } from 'react';
+import React, { FunctionComponent, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import {
@@ -53,14 +53,9 @@ const setTabIndex = (items: Array>, isHidden: boolean) =>
/**
* A wrapper around EuiSideNav but also creates the appropriate title with optional solution logo
*/
-export const KibanaPageTemplateSolutionNav = ({
- name,
- icon,
- items,
- isOpenOnDesktop = true,
- onCollapse,
- ...rest
-}: KibanaPageTemplateSolutionNavProps) => {
+export const KibanaPageTemplateSolutionNav: FunctionComponent<
+ KibanaPageTemplateSolutionNavProps
+> = ({ name, icon, items, isOpenOnDesktop = false, onCollapse, ...rest }) => {
const isSmallerBreakpoint = useIsWithinBreakpoints(['xs', 's']);
const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
From 6b7a42a96b7dd47138c09e41970e8e30d9f28ac7 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Fri, 1 Apr 2022 16:04:59 +0200
Subject: [PATCH 29/37] NoDataConfigPage
---
.../with_solution_nav.test.tsx.snap | 125 ++++++++++++++++++
.../no_data_config_page.test.tsx.snap | 30 +++++
.../no_data_config_page/index.tsx | 9 ++
.../no_data_config_page.test.tsx | 30 +++++
.../no_data_config_page.tsx | 38 ++++++
.../src/page_template/types.ts | 30 +++++
.../src/page_template/util/constants.ts | 20 +++
.../src/page_template/util/index.ts | 10 ++
.../src/page_template/util/presentation.ts | 13 ++
.../page_template/with_solution_nav.test.tsx | 80 +++++++++++
.../src/page_template/with_solution_nav.tsx | 77 +++++++++++
11 files changed, 462 insertions(+)
create mode 100644 packages/kbn-shared-ux-components/src/page_template/__snapshots__/with_solution_nav.test.tsx.snap
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/__snapshots__/no_data_config_page.test.tsx.snap
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/index.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/types.ts
create mode 100644 packages/kbn-shared-ux-components/src/page_template/util/constants.ts
create mode 100644 packages/kbn-shared-ux-components/src/page_template/util/index.ts
create mode 100644 packages/kbn-shared-ux-components/src/page_template/util/presentation.ts
create mode 100644 packages/kbn-shared-ux-components/src/page_template/with_solution_nav.test.tsx
create mode 100644 packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx
diff --git a/packages/kbn-shared-ux-components/src/page_template/__snapshots__/with_solution_nav.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/__snapshots__/with_solution_nav.test.tsx.snap
new file mode 100644
index 00000000000000..0064b0a638cd28
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/__snapshots__/with_solution_nav.test.tsx.snap
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WithSolutionNav renders wrapped component 1`] = `
+
+ }
+ pageSideBarProps={
+ Object {
+ "className": "kbnPageTemplate__pageSideBar",
+ "paddingSize": "none",
+ }
+ }
+/>
+`;
+
+exports[`WithSolutionNav with children 1`] = `
+
+ }
+ pageSideBarProps={
+ Object {
+ "className": "kbnPageTemplate__pageSideBar",
+ "paddingSize": "none",
+ }
+ }
+>
+
+ Child component
+
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/__snapshots__/no_data_config_page.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/__snapshots__/no_data_config_page.test.tsx.snap
new file mode 100644
index 00000000000000..4022ec8fafb2d3
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/__snapshots__/no_data_config_page.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoDataConfigPage renders 1`] = `
+
+
+
+`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/index.tsx
new file mode 100644
index 00000000000000..0bdde400213984
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/index.tsx
@@ -0,0 +1,9 @@
+/*
+ * 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/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.test.tsx
new file mode 100644
index 00000000000000..dc618a068e1203
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.test.tsx
@@ -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 { shallow } from 'enzyme';
+import React from 'react';
+import { NoDataConfigPage } from './no_data_config_page';
+
+describe('NoDataConfigPage', () => {
+ const noDataConfig = {
+ solution: 'Kibana',
+ logo: 'logoKibana',
+ docsLink: 'test-link',
+ action: {
+ kibana: {
+ button: 'Click me',
+ onClick: jest.fn(),
+ description: 'Page with no data',
+ },
+ },
+ };
+ test('renders', () => {
+ const component = shallow();
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx
new file mode 100644
index 00000000000000..77c2d659b56ef7
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_config_page/no_data_config_page.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 } from '@elastic/eui';
+import React from 'react';
+import { NoDataPage } from '../no_data_page';
+import { withSolutionNav } from '../../with_solution_nav';
+import { KibanaPageTemplateProps } from '../../types';
+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/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 00000000000000..cd4764a976db82
--- /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 00000000000000..e94f0a8adc04e4
--- /dev/null
+++ b/packages/kbn-shared-ux-components/src/page_template/util/constants.ts
@@ -0,0 +1,20 @@
+/*
+ * 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',
+ },
+};
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 00000000000000..adfefdf8345664
--- /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 00000000000000..ab7144ee37b579
--- /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 00000000000000..0d0ac4cf71bfc3
--- /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
+ }
/>
`;
diff --git a/packages/kbn-shared-ux-components/src/page_template/assets/kibana_template_no_data_config.png b/packages/kbn-shared-ux-components/src/page_template/assets/kibana_template_no_data_config.png
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template.mdx b/packages/kbn-shared-ux-components/src/page_template/page_template.mdx
index 1207f08ce8f3e0..941c54f71d48d3 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template.mdx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template.mdx
@@ -1,4 +1,4 @@
---
+---
id: sharedUX/Components/PageTemplate
slug: /shared-ux-components/page_template/page_template
title: Page Template
@@ -6,4 +6,150 @@ summary: A Kibana-specific wrapper around `EuiTemplate`
tags: ['shared-ux', 'component']
date: 2022-04-04
---
-This component is a thin wrapper around `EuiTemplate`, providing Kibana-specific additions. It can be configured to display solution navigation bar, empty page and no data config page.
\ No newline at end of file
+
+`KibanaPageTemplate` is a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns.
+
+Refer to EUI's documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/layout/page) for constructing page layouts.
+
+## `isEmptyState`
+
+Use the `isEmptyState` prop for when there is no page content to show. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met.
+
+The default empty state uses any `pageHeader` info provided to populate an [**EuiEmptyPrompt**](https://elastic.github.io/eui/#/display/empty-prompt) and uses the `centeredBody` template type.
+
+```tsx
+
+ Create new dashboard
+ ,
+ ],
+ }}
+/>
+```
+
+ Because all properties of the page header are optional, the empty state has the potential to
+ render blank. Make sure your empty state doesn't leave the user confused.
+
+
+
+### Custom empty state
+
+You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageTemplate.
+
+```tsx
+
+ No data}
+ body="You have no data. Would you like some of ours?"
+ actions={[
+
+ Get sample data
+ ,
+ ]}
+ />
+
+```
+
+### Empty states with a page header
+
+When passing both a `pageHeader` configuration and `isEmptyState`, the component will render the proper template (`centeredContent`). Be sure to reduce the heading level within your child empty prompt to `
`.
+
+```tsx
+
+ No data
}
+ body="You have no data. Would you like some of ours?"
+ actions={[
+
+ Get sample data
+ ,
+ ]}
+ />
+
+```
+
+## `solutionNav`
+
+To add left side navigation for your solution, we recommend passing [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav) props to the `solutionNav` prop. The template component will then handle the mobile views and add the solution nav embellishments. On top of the EUI props, you'll need to pass your solution `name` and an optional `icon`.
+
+If you need to custom side bar content, you will need to pass you own navigation component to `pageSideBar`. We still recommend using [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav).
+
+When using `EuiSideNav`, root level items should not be linked but provide section labelling only.
+
+```tsx
+
+ {...}
+
+```
+
+## `noDataConfig`
+
+Increases the consistency in messaging across all the solutions during the getting started process when no data exists. Each solution/template instance decides when is the most appropriate time to show this configuration, but is messaged specifically towards having no indices or index patterns at all or that match the particular solution.
+
+This is a built-in configuration that displays a very specific UI and requires very specific keys. It will also ignore all other configurations of the template including `pageHeader` and `children`, with the exception of continuing to show `solutionNav`.
+
+The `noDataConfig` is of type [`NoDataPagProps`](https://github.com/elastic/kibana/blob/main/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.tsx):
+
+1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, and description *(required)*
+2. `docsLink: string`: Required to set the docs link for the whole solution *(required)*
+3. `logo?: string`: Optionally replace the auto-generated logo
+4. `pageTitle?: string`: Optionally replace the auto-generated page title (h1)
+5. `action: NoDataPageActionsProps`: An object of `NoDataPageActions` configurations with a unique primary key *(required)*
+
+### `NoDataPageActions`
+
+There is a main action for adding data that we promote throughout Kibana - Elastic Agent. It is added to the card by using the key `elasticAgent`. For consistent messaging, this card is pre-configured but requires specific `href`s and/or `onClick` handlers for directing the user to the right location for that solution.
+
+Optionally you can also replace the `button` label by passing a string, or the whole component by passing a `ReactNode`.
+
+
+```tsx
+// Perform your own check
+const hasData = checkForData();
+
+// No data configuration
+const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
+ solution: 'Analytics',
+ logo: 'logoKibana',
+ docsLink: '#',
+ action: {
+ elasticAgent: {
+ href: '#',
+ },
+ },
+};
+
+// Conditionally apply the configuration if there is no data
+
+ {/* Children will be ignored */}
+
+```
\ No newline at end of file
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx
index 6497738ffd4b1c..4b11579b1861a8 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx
@@ -7,7 +7,7 @@
*/
import React from 'react';
-import { EuiText } from '@elastic/eui';
+import { EuiButton, EuiText } from '@elastic/eui';
import { KibanaPageTemplate } from './page_template';
import mdx from './page_template.mdx';
import { KibanaPageTemplateSolutionNavProps } from './solution_nav';
@@ -24,7 +24,7 @@ export default {
},
};
-type Params = Pick;
+type Params = Pick;
const noDataConfig = {
solution: 'Kibana',
@@ -88,6 +88,13 @@ const content = (
);
+const header = {
+ iconType: 'logoKibana',
+ pageTitle: 'Kibana',
+ description: 'Welcome to Kibana!',
+ rightSideItems: [Add something, Do something],
+};
+
export const WithNoDataConfig = () => {
return ;
};
@@ -101,7 +108,11 @@ export const WithSolutionNav = () => {
};
export const PureComponent = (params: Params) => {
- return {content};
+ return (
+
+ {content}
+
+ );
};
PureComponent.argTypes = {
@@ -109,6 +120,10 @@ PureComponent.argTypes = {
control: 'boolean',
defaultValue: false,
},
+ pageHeader: {
+ control: 'boolean',
+ defaultValue: true,
+ },
};
PureComponent.parameters = {
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx
index 14892ef8c62738..b6adf128f0e017 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx
@@ -14,7 +14,7 @@ import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
describe('KibanaPageTemplateInner', () => {
const pageHeader = {
iconType: 'test',
- title: 'test',
+ pageTitle: 'test',
description: 'test',
rightSideItems: ['test'],
};
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx
index 101e7cf26082b8..91adbb840decac 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx
@@ -53,7 +53,6 @@ export const KibanaPageTemplateInner: FunctionComponent = ({
}
const classes = getClasses(template, className);
-
return (
{children}
diff --git a/packages/kbn-shared-ux-storybook/BUILD.bazel b/packages/kbn-shared-ux-storybook/BUILD.bazel
index 3624a708b6cefb..fc46fc1980f86d 100644
--- a/packages/kbn-shared-ux-storybook/BUILD.bazel
+++ b/packages/kbn-shared-ux-storybook/BUILD.bazel
@@ -9,6 +9,7 @@ SOURCE_FILES = glob(
[
"src/**/*.ts",
"src/**/*.tsx",
+ "assets/**/*.png",
],
exclude = [
"**/*.test.*",
diff --git a/packages/kbn-shared-ux-storybook/tsconfig.json b/packages/kbn-shared-ux-storybook/tsconfig.json
index a8cfc2cceb08b8..4e61928b4b7865 100644
--- a/packages/kbn-shared-ux-storybook/tsconfig.json
+++ b/packages/kbn-shared-ux-storybook/tsconfig.json
@@ -12,6 +12,7 @@
]
},
"include": [
- "src/**/*"
+ "src/**/*",
+ "assets/**/*"
]
}
From b86f74226d708a229d2c33a6f35ba6b85dd0a20a Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 6 Apr 2022 15:24:27 +0200
Subject: [PATCH 34/37] Remove build additions
---
packages/kbn-shared-ux-storybook/BUILD.bazel | 1 -
packages/kbn-shared-ux-storybook/tsconfig.json | 3 +--
2 files changed, 1 insertion(+), 3 deletions(-)
diff --git a/packages/kbn-shared-ux-storybook/BUILD.bazel b/packages/kbn-shared-ux-storybook/BUILD.bazel
index fc46fc1980f86d..3624a708b6cefb 100644
--- a/packages/kbn-shared-ux-storybook/BUILD.bazel
+++ b/packages/kbn-shared-ux-storybook/BUILD.bazel
@@ -9,7 +9,6 @@ SOURCE_FILES = glob(
[
"src/**/*.ts",
"src/**/*.tsx",
- "assets/**/*.png",
],
exclude = [
"**/*.test.*",
diff --git a/packages/kbn-shared-ux-storybook/tsconfig.json b/packages/kbn-shared-ux-storybook/tsconfig.json
index 4e61928b4b7865..a8cfc2cceb08b8 100644
--- a/packages/kbn-shared-ux-storybook/tsconfig.json
+++ b/packages/kbn-shared-ux-storybook/tsconfig.json
@@ -12,7 +12,6 @@
]
},
"include": [
- "src/**/*",
- "assets/**/*"
+ "src/**/*"
]
}
From 3e1e444df90434e35e516eee715def57e05b03c3 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Wed, 6 Apr 2022 15:45:11 +0200
Subject: [PATCH 35/37] Update .mdx file
---
.../src/page_template/page_template.mdx | 19 ++++++++++++++++---
1 file changed, 16 insertions(+), 3 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template.mdx b/packages/kbn-shared-ux-components/src/page_template/page_template.mdx
index 941c54f71d48d3..59acf8910cf298 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template.mdx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template.mdx
@@ -32,6 +32,9 @@ The default empty state uses any `pageHeader` info provided to populate an [**Eu
}}
/>
```
+
+![Screenshot of demo empty state code. Shows the Kibana navigation bars and a centered empty state with the dashboard app icon, a level 1 heading "Dashboards", body text "You don't have any dashboards yet.", and a button that says "Create new dashboard".](https://raw.githubusercontent.com/elastic/kibana/main/dev_docs/assets/kibana_default_empty_state.png)
+
Because all properties of the page header are optional, the empty state has the potential to
render blank. Make sure your empty state doesn't leave the user confused.
@@ -56,6 +59,8 @@ You can also provide a custom empty prompt to replace the pre-built one. You'll
```
+![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](https://raw.githubusercontent.com/elastic/kibana/main/dev_docs/assets/kibana_custom_empty_state.png)
+
### Empty states with a page header
When passing both a `pageHeader` configuration and `isEmptyState`, the component will render the proper template (`centeredContent`). Be sure to reduce the heading level within your child empty prompt to `
`.
@@ -79,6 +84,8 @@ When passing both a `pageHeader` configuration and `isEmptyState`, the component
```
+![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](https://raw.githubusercontent.com/elastic/kibana/main/dev_docs/assets/kibana_header_and_empty_state.png)
+
## `solutionNav`
To add left side navigation for your solution, we recommend passing [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav) props to the `solutionNav` prop. The template component will then handle the mobile views and add the solution nav embellishments. On top of the EUI props, you'll need to pass your solution `name` and an optional `icon`.
@@ -107,19 +114,23 @@ When using `EuiSideNav`, root level items should not be linked but provide secti
```
+![Screenshot of Stack Management empty state with a provided solution navigation shown on the left, outlined in pink.](https://raw.githubusercontent.com/elastic/kibana/main/dev_docs/assets/kibana_template_solution_nav.png)
+
+![Screenshots of Stack Management page in mobile view. Menu closed on the left, menu open on the right.](https://raw.githubusercontent.com/elastic/kibana/main/dev_docs/assets/kibana_template_solution_nav_mobile.png)
+
## `noDataConfig`
Increases the consistency in messaging across all the solutions during the getting started process when no data exists. Each solution/template instance decides when is the most appropriate time to show this configuration, but is messaged specifically towards having no indices or index patterns at all or that match the particular solution.
This is a built-in configuration that displays a very specific UI and requires very specific keys. It will also ignore all other configurations of the template including `pageHeader` and `children`, with the exception of continuing to show `solutionNav`.
-The `noDataConfig` is of type [`NoDataPagProps`](https://github.com/elastic/kibana/blob/main/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.tsx):
+The `noDataConfig` is of type [`NoDataPageProps`](https://github.com/elastic/kibana/blob/main/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts#L14):
1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, and description *(required)*
2. `docsLink: string`: Required to set the docs link for the whole solution *(required)*
3. `logo?: string`: Optionally replace the auto-generated logo
4. `pageTitle?: string`: Optionally replace the auto-generated page title (h1)
-5. `action: NoDataPageActionsProps`: An object of `NoDataPageActions` configurations with a unique primary key *(required)*
+5. `action: Record`: An object of `NoDataPageActions` configurations with a unique primary key *(required)*
### `NoDataPageActions`
@@ -152,4 +163,6 @@ const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
>
{/* Children will be ignored */}
-```
\ No newline at end of file
+```
+
+![Screenshot of and example in Observability using the no data configuration and using the corresponding list numbers to point out the UI elements that they adjust.](https://raw.githubusercontent.com/elastic/kibana/main/dev_docs/assets/kibana_template_no_data_config.png)
\ No newline at end of file
From 79c1f300df3790a326e90bd96453de66ef448b59 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Thu, 7 Apr 2022 08:16:44 +0200
Subject: [PATCH 36/37] Merge two stories
---
.../page_template/page_template.stories.tsx | 24 +++++++++----------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx
index 4b11579b1861a8..d840e459389b25 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template.stories.tsx
@@ -24,7 +24,7 @@ export default {
},
};
-type Params = Pick;
+type Params = Pick;
const noDataConfig = {
solution: 'Kibana',
@@ -73,7 +73,7 @@ const items: KibanaPageTemplateSolutionNavProps['items'] = [
},
];
-const solutionNav = {
+const solutionNavBar = {
items,
logo: 'logoKibana',
name: 'Kibana',
@@ -100,16 +100,16 @@ export const WithNoDataConfig = () => {
};
export const WithNoDataConfigAndSolutionNav = () => {
- return ;
-};
-
-export const WithSolutionNav = () => {
- return {content};
+ return ;
};
export const PureComponent = (params: Params) => {
return (
-
+
{content}
);
@@ -124,6 +124,10 @@ PureComponent.argTypes = {
control: 'boolean',
defaultValue: true,
},
+ solutionNav: {
+ control: 'boolean',
+ defaultValue: true,
+ },
};
PureComponent.parameters = {
@@ -137,7 +141,3 @@ WithNoDataConfig.parameters = {
WithNoDataConfigAndSolutionNav.parameters = {
layout: 'fullscreen',
};
-
-WithSolutionNav.parameters = {
- layout: 'fullscreen',
-};
From 800117cffae89e279eee93a4bee284c864438f17 Mon Sep 17 00:00:00 2001
From: Maja Grubic
Date: Thu, 7 Apr 2022 17:44:09 +0200
Subject: [PATCH 37/37] Applying Clint's comments
---
.../src/page_template/page_template_inner.test.tsx | 9 +++++++--
.../src/page_template/page_template_inner.tsx | 10 +++++++---
.../src/page_template/with_solution_nav.tsx | 7 +++----
3 files changed, 17 insertions(+), 9 deletions(-)
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx
index b6adf128f0e017..c17b83c4f4eed2 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.test.tsx
@@ -6,11 +6,16 @@
* Side Public License, v 1.
*/
-import { shallow } from 'enzyme';
-import { KibanaPageTemplateInner } from './page_template_inner';
+// imports from npm packages
import React from 'react';
+import { shallow } from 'enzyme';
+
+// imports from elastic packages
import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
+// imports from immediate files
+import { KibanaPageTemplateInner } from './page_template_inner';
+
describe('KibanaPageTemplateInner', () => {
const pageHeader = {
iconType: 'test',
diff --git a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx
index 91adbb840decac..cef22f2713efc2 100644
--- a/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/page_template_inner.tsx
@@ -9,6 +9,7 @@
import React, { FunctionComponent } from 'react';
import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
+
import { withSolutionNav } from './with_solution_nav';
import { KibanaPageTemplateProps } from './types';
import { getClasses } from './util';
@@ -31,17 +32,20 @@ export const KibanaPageTemplateInner: FunctionComponent = ({
*/
const emptyStateDefaultTemplate = 'centeredBody';
let header = pageHeader;
+
if (isEmptyState) {
if (pageHeader && !children) {
template = template ?? emptyStateDefaultTemplate;
const { iconType, pageTitle, description, rightSideItems } = pageHeader;
+ const title = pageTitle ?