From 084afdf4bba277e5483ae18034493b75aefedf1b Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 18 Mar 2022 11:00:29 +0100 Subject: [PATCH 01/21] [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 0000000000000..2393f48c90942 --- /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 0000000000000..ec5e2d9c84f6a --- /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 0000000000000..6223613815f58 --- /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 0000000000000..5db261499a4ae --- /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 0000000000000..0ba8ef86ba5cb --- /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 e5c0b4c43c13b9f4abb0c20806c3b962cfcaea5f Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 22 Mar 2022 16:14:02 +0100 Subject: [PATCH 02/21] [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 328580f669287..9298a1b3c80e1 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 0000000000000..787868f8f8693 --- /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 0000000000000..aa9b86c8f2fbd --- /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 0000000000000..93c3471c16921 --- /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 0000000000000..fea0d6954343d --- /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 0000000000000..81c2033a7ce7c --- /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 0000000000000..d0070cef729b7 --- /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 0000000000000..5d8313a493d8c --- /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 0000000000000..ed90894289169 --- /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 0000000000000..842ef53d53ab7 --- /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 0000000000000..03ca7dddb9063 --- /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 0000000000000..c4a5cc1331465 --- /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 0000000000000..497b14bc70236 --- /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 0000000000000..9cef8b1f7c2b2 --- /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 0000000000000..61cea7962d956 --- /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 0000000000000..f2603c2e286ee --- /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 0000000000000..c8a0fcbd5ae5c --- /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 0000000000000..8e8a48b0f857c --- /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 5852696058c523067942793ed292dc21b5a8a832 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 22 Mar 2022 18:08:11 +0100 Subject: [PATCH 03/21] 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 aa9b86c8f2fbd..6cb2aa4423359 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 7e6ee569233e32326a56516a436de690bcdd69ec Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 23 Mar 2022 09:05:16 +0100 Subject: [PATCH 04/21] [SharedUX] Migrate PageTemplate > NoDataPage --- .../__snapshots__/no_data_page.test.tsx.snap | 149 ++++++++++++++++++ .../src/page_template/no_data_page/index.ts | 1 + .../no_data_card/no_data_card.stories.tsx | 2 +- .../no_data_page/no_data_page.stories.tsx | 44 ++++++ .../no_data_page/no_data_page.test.tsx | 28 ++++ .../no_data_page/no_data_page.tsx | 102 ++++++++++++ .../no_data_page_body.test.tsx.snap | 59 +++++++ .../no_data_page/no_data_page_body/index.tsx | 9 ++ .../no_data_page_body.stories.tsx | 50 ++++++ .../no_data_page_body.test.tsx | 34 ++++ .../no_data_page_body/no_data_page_body.tsx | 58 +++++++ .../src/page_template/no_data_page/types.ts | 56 +++++++ .../src/page_template/types.ts | 30 ++++ .../src/page_template/with_solution_nav.tsx | 72 +++++++++ 14 files changed, 693 insertions(+), 1 deletion(-) create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/index.tsx create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.stories.tsx create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx create mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts create mode 100644 packages/kbn-shared-ux-components/src/page_template/types.ts 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/no_data_page/__snapshots__/no_data_page.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap new file mode 100644 index 0000000000000..2dc4585fa345c --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap @@ -0,0 +1,149 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NoDataPage render 1`] = ` +
+ , + , + , + ] + } + docsLink="test" + pageTitle="Welcome to Elastic Elastic!" + solution="Elastic" + /> + + +

+ + + , + } + } + /> +

+ +
+`; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts index 9b0ee88250422..7712b4289305a 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts @@ -7,3 +7,4 @@ */ export { NoDataCard, ElasticAgentCard } from './no_data_card'; +export type { NoDataPageProps } from './types'; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx index 087ff7a48e01f..fd9c18be8ca7d 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx @@ -11,7 +11,7 @@ import { NoDataCard } from './no_data_card'; import type { NoDataCardProps } from './types'; export default { - title: 'No Data Card', + title: 'Page Template/No Data Page/No Data Card', description: 'A wrapper around EuiCard, to be used on NoData page', }; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx new file mode 100644 index 0000000000000..a96e1bcf1dcec --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx @@ -0,0 +1,44 @@ +/* + * 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 { servicesFactory } from '@kbn/shared-ux-storybook'; +import { action } from '@storybook/addon-actions'; +import { NoDataPageActionsProps, NoDataPageProps } from './types'; +import { NoDataPage } from './no_data_page'; + +const services = servicesFactory({}); + +export default { + title: 'Page Template/No Data Page/No Data Page', + description: 'No Data Page of PageTemplate', +}; +const actions: NoDataPageActionsProps = { + elasticAgent: {}, + beats: {}, + custom: { + recommended: true, + title: 'Custom integration', + description: 'You have no data. Add some by clicking the link below', + button: 'Add custom integration', + onClick: action('clicked'), + category: 'Fleet', + }, +}; +type Params = Pick; + +export const PureComponent = (params: Params) => { + return ; +}; + +PureComponent.argTypes = { + solution: { + control: 'text', + defaultValue: 'Observability', + }, +}; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx new file mode 100644 index 0000000000000..2c9f91be339f6 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx @@ -0,0 +1,28 @@ +/* + * 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 { NoDataPage } from './no_data_page'; +import { shallowWithIntl } from '@kbn/test-jest-helpers'; + +describe('NoDataPage', () => { + test('render', () => { + const component = shallowWithIntl( + + ); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx new file mode 100644 index 0000000000000..f350ad8855243 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx @@ -0,0 +1,102 @@ +/* + * 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, { useMemo, FunctionComponent } from 'react'; +import { EuiSpacer, EuiText, EuiLink } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n-react'; +import classNames from 'classnames'; + +import { ElasticAgentCard, NoDataCard } from './no_data_card'; +import { NoDataPageBody } from './no_data_page_body'; +import { NoDataPageProps } from './types'; + +export const NO_DATA_RECOMMENDED = i18n.translate( + 'sharedUXComponents.noDataPage.noDataPage.recommended', + { + defaultMessage: 'Recommended', + } +); + +export const NoDataPage: FunctionComponent = ({ + solution, + logo, + actions, + docsLink, + pageTitle, + ...rest +}) => { + // Convert obj data into an iterable array + const entries = Object.entries(actions); + + // This sort fn may look nonsensical, but it's some Good Ol' Javascript (TM) + // Sort functions want either a 1, 0, or -1 returned to determine order, + // and it turns out in JS you CAN minus booleans from each other to get a 1, 0, or -1 - e.g., (true - false == 1) :whoa: + const sortedEntries = entries.sort(([, firstObj], [, secondObj]) => { + // The `??` fallbacks are because the recommended key can be missing or undefined + return Number(secondObj.recommended ?? false) - Number(firstObj.recommended ?? false); + }); + + // Convert the iterated [[key, value]] array format back into an object + const sortedData = Object.fromEntries(sortedEntries); + const actionsKeys = Object.keys(sortedData); + + const actionCards = useMemo(() => { + return Object.values(sortedData).map((action, i) => { + const isAgent = actionsKeys[i] === 'elasticAgent' || actionsKeys[i] === 'beats'; + const key = isAgent ? 'empty-page-agent-action' : `empty-page-${actionsKeys[i]}-action`; + return isAgent ? ( + + ) : ( + + ); + }); + }, [sortedData, actionsKeys]); + + const title = + pageTitle || + i18n.translate('sharedUXComponents.noDataPage.welcomeTitle', { + defaultMessage: 'Welcome to Elastic {solution}!', + values: { solution }, + }); + + return ( +
+ + {actionsKeys.length > 1 ? ( + <> + + +

+ + + + ), + }} + /> +

+ + + ) : undefined} +
+ ); +}; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap new file mode 100644 index 0000000000000..11cce27e1a785 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NoDataPageBody render 1`] = ` + + + + +

+ +

+ + + , + "solution": "Elastic", + } + } + /> +

+ + + + + + , + ] + } + /> + +`; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/index.tsx new file mode 100644 index 0000000000000..a5312d696139d --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/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 { NoDataPageBody } from './no_data_page_body'; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.stories.tsx new file mode 100644 index 0000000000000..4e56a0c0b21d0 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.stories.tsx @@ -0,0 +1,50 @@ +/* + * 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, { ReactElement } from 'react'; +import { action } from '@storybook/addon-actions'; +import { servicesFactory } from '@kbn/shared-ux-storybook'; +import { NoDataPageBody, NoDataPageBodyProps } from './no_data_page_body'; +import { NoDataCard } from '../no_data_card'; + +const services = servicesFactory({}); +const cardAction = { + recommended: false, + button: 'Button text', + onClick: action('Clicked'), +}; +const card1 = ; +const card2 = ; +const actionCards: ReactElement[] = [ +
{card1}
, +
{card2}
, +]; + +export default { + title: 'Page Template/No Data Page/No Data Page Body', + description: 'A body of NoDataPage', +}; + +type Params = Pick; + +export const PureComponent = (params: Params) => { + return ( + + ); +}; + +PureComponent.argTypes = { + solution: { + control: 'text', + defaultValue: 'Observability', + }, +}; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx new file mode 100644 index 0000000000000..f3419a47f63b8 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx @@ -0,0 +1,34 @@ +/* + * 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 { NoDataPageBody } from './no_data_page_body'; +import React, { ReactElement } from 'react'; +import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { NoDataCard } from '../no_data_card'; + +describe('NoDataPageBody', () => { + const action = { + recommended: false, + button: 'Button text', + onClick: jest.fn(), + }; + const el = ; + const actionCards: ReactElement[] = []; + actionCards.push(
{el}
); + test('render', () => { + const component = shallowWithIntl( + + ); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx new file mode 100644 index 0000000000000..580892f0e0de1 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx @@ -0,0 +1,58 @@ +/* + * 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 { EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui'; +import React, { ReactElement } from 'react'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { NoDataPageProps } from '../types'; +import { KibanaPageTemplateSolutionNavAvatar } from '../../solution_nav'; +import { ActionCards } from '../action_cards'; +import { ElasticAgentCard, NoDataCard } from '../no_data_card'; + +export type NoDataPageBodyProps = { + actionCards: Array | ReactElement>; +} & Omit; + +export const NoDataPageBody = (props: NoDataPageBodyProps) => { + const { pageTitle, docsLink, solution, actionCards, logo } = props; + + return ( + <> + + + +

{pageTitle}

+ +

+ + + + ), + }} + /> +

+ + + + + + ); +}; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts new file mode 100644 index 0000000000000..a2536e756c0c8 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts @@ -0,0 +1,56 @@ +/* + * 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 { CommonProps, EuiCardProps } from '@elastic/eui'; +import { MouseEventHandler, ReactNode } from 'react'; + +export type NoDataPageActions = Partial & { + /** + * Applies the `Recommended` beta badge and makes the button `fill` + */ + recommended?: boolean; + /** + * Provide just a string for the button's label, or a whole component + */ + button?: string | ReactNode; + /** + * Remapping `onClick` to any element + */ + onClick?: MouseEventHandler; + /** + * Category to auto-select within Fleet + */ + category?: string; +}; + +export type NoDataPageActionsProps = Record; + +export interface NoDataPageProps extends CommonProps { + /** + * Single name for the current solution, used to auto-generate the title, logo, description, and button label + */ + solution: string; + /** + * Optionally replace the auto-generated logo + */ + logo?: string; + /** + * Required to set the docs link for the whole solution + */ + docsLink: string; + /** + * Optionally replace the auto-generated page title (h1) + */ + pageTitle?: string; + /** + * An object of `NoDataPageActions` configurations with unique primary keys. + * Use `elasticAgent` or `beats` as the primary key for pre-configured cards of this type. + * Otherwise use a custom key that contains `EuiCard` props. + */ + actions: NoDataPageActionsProps; +} diff --git a/packages/kbn-shared-ux-components/src/page_template/types.ts b/packages/kbn-shared-ux-components/src/page_template/types.ts new file mode 100644 index 0000000000000..3b98322771919 --- /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 '../../../../src/plugins/kibana_react/public/page_template/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/with_solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx new file mode 100644 index 0000000000000..215404ca13bb0 --- /dev/null +++ b/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx @@ -0,0 +1,72 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { ComponentType, useState } from 'react'; +import classNames from 'classnames'; +import { useIsWithinBreakpoints } from '@elastic/eui'; +import { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar'; +import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav'; +import { KibanaPageTemplateProps } from './types'; + +type SolutionNavProps = KibanaPageTemplateProps & { + solutionNav: KibanaPageTemplateSolutionNavProps; +}; + +const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed'; + +export const withSolutionNav = (WrappedComponent: ComponentType) => { + const WithSolutionNav = (props: SolutionNavProps) => { + const isMediumBreakpoint = useIsWithinBreakpoints(['m']); + const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']); + const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState( + !JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY))) + ); + const { solutionNav, ...propagatedProps } = props; + const { children, isEmptyState, template } = propagatedProps; + const toggleOpenOnDesktop = () => { + setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop); + // Have to store it as the opposite of the default we want + localStorage.setItem(SOLUTION_NAV_COLLAPSED_KEY, JSON.stringify(isSideNavOpenOnDesktop)); + }; + const sideBarClasses = classNames( + 'kbnPageTemplate__pageSideBar', + { + 'kbnPageTemplate__pageSideBar--shrink': + isMediumBreakpoint || (isLargerBreakpoint && !isSideNavOpenOnDesktop), + }, + props.pageSideBarProps?.className + ); + + const templateToUse = isEmptyState && !template ? 'centeredContent' : template; + + const pageSideBar = ( + + ); + const pageSideBarProps = { + paddingSize: 'none', + ...props.pageSideBarProps, + className: sideBarClasses, + } as EuiPageSideBarProps; // needed because for some reason 'none' is not recognized as a valid value for paddingSize + return ( + + {children} + + ); + }; + WithSolutionNav.displayName = `WithSolutionNavBar${WrappedComponent}`; + return WithSolutionNav; +}; From 97e2799e1b4f63b2b39e7e33888769d7770e2c45 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 23 Mar 2022 16:00:10 +0100 Subject: [PATCH 05/21] Removing 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 --- .../elastic_agent_card.stories.tsx | 2 +- .../no_data_card/no_data_card.stories.tsx | 6 +- .../no_data_card/no_data_card.test.tsx | 7 --- .../no_data_card/no_data_card.tsx | 10 ---- .../no_data_page/no_data_card/types.ts | 4 -- .../no_data_page/no_data_page.stories.tsx | 16 +---- .../no_data_page/no_data_page.test.tsx | 4 +- .../no_data_page/no_data_page.tsx | 59 ++++--------------- .../no_data_page_body.test.tsx.snap | 22 +++---- .../no_data_page_body.stories.tsx | 50 ---------------- .../no_data_page_body.test.tsx | 17 ++---- .../no_data_page_body/no_data_page_body.tsx | 13 ++-- .../src/page_template/no_data_page/types.ts | 8 +-- .../src/page_template/types.ts | 2 +- 19 files changed, 40 insertions(+), 295 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/no_data_page/no_data_page_body/no_data_page_body.stories.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 2393f48c90942..0000000000000 --- 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 ec5e2d9c84f6a..0000000000000 --- 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 6223613815f58..0000000000000 --- 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 5db261499a4ae..0000000000000 --- 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 0ba8ef86ba5cb..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/action_cards/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export { ActionCards } from './action_cards'; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx index 3be77ad8d6dde..ea890c265b5cd 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx @@ -15,7 +15,7 @@ import { } from './elastic_agent_card.component'; export default { - title: 'Elastic Agent Data Card', + title: 'Page Template/No Data Page/Elastic Agent Data Card', description: 'A solution-specific wrapper around NoDataCard, to be used on NoData page', }; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx index fd9c18be8ca7d..4cea040af5f3c 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.stories.tsx @@ -15,17 +15,13 @@ export default { description: 'A wrapper around EuiCard, to be used on NoData page', }; -type Params = Pick; +type Params = Pick; export const PureComponent = (params: Params) => { return ; }; PureComponent.argTypes = { - recommended: { - control: 'boolean', - defaultValue: false, - }, button: { control: { type: 'text', diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.test.tsx index c53743e74b9fa..6bbed463f23ed 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.test.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.test.tsx @@ -17,13 +17,6 @@ describe('NoDataCard', () => { }); describe('props', () => { - test('recommended', () => { - const component = render( - - ); - expect(component).toMatchSnapshot(); - }); - test('button', () => { const component = render( diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.tsx index 4cba71bc09851..705eb0444bb8d 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.tsx @@ -13,13 +13,6 @@ import { EuiButton, EuiCard } from '@elastic/eui'; import type { NoDataCardProps } from './types'; import { NoDataCardStyles } from './no_data_card.styles'; -const recommendedLabel = i18n.translate( - 'sharedUXComponents.pageTemplate.noDataPage.recommendedLabel', - { - defaultMessage: 'Recommended', - } -); - const defaultDescription = i18n.translate( 'sharedUXComponents.pageTemplate.noDataCard.description', { @@ -28,7 +21,6 @@ const defaultDescription = i18n.translate( ); export const NoDataCard: FunctionComponent = ({ - recommended, title, button, description, @@ -49,7 +41,6 @@ export const NoDataCard: FunctionComponent = ({ // Default footer action is a button with the provided or default string return {button || title}; }; - const label = recommended ? recommendedLabel : undefined; const cardDescription = description || defaultDescription; return ( @@ -58,7 +49,6 @@ export const NoDataCard: FunctionComponent = ({ paddingSize="l" title={title!} description={cardDescription} - betaBadgeProps={{ label }} footer={footer()} isDisabled={isDisabled} {...cardRest} diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/types.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/types.ts index a2dcc1a629455..fef4f654ce970 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/types.ts +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/types.ts @@ -10,10 +10,6 @@ import { EuiCardProps } from '@elastic/eui'; import { MouseEventHandler, ReactNode } from 'react'; export type NoDataCardProps = Partial> & { - /** - * Applies the `Recommended` beta badge and makes the button `fill` - */ - recommended?: boolean; /** * Provide just a string for the button's label, or a whole component; * The button will be hidden completely if `isDisabled=true` diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx index a96e1bcf1dcec..bd63e3d09b23e 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx @@ -8,8 +8,7 @@ import React from 'react'; import { servicesFactory } from '@kbn/shared-ux-storybook'; -import { action } from '@storybook/addon-actions'; -import { NoDataPageActionsProps, NoDataPageProps } from './types'; +import { NoDataPageProps } from './types'; import { NoDataPage } from './no_data_page'; const services = servicesFactory({}); @@ -18,22 +17,13 @@ export default { title: 'Page Template/No Data Page/No Data Page', description: 'No Data Page of PageTemplate', }; -const actions: NoDataPageActionsProps = { +const action = { elasticAgent: {}, - beats: {}, - custom: { - recommended: true, - title: 'Custom integration', - description: 'You have no data. Add some by clicking the link below', - button: 'Add custom integration', - onClick: action('clicked'), - category: 'Fleet', - }, }; type Params = Pick; export const PureComponent = (params: Params) => { - return ; + return ; }; PureComponent.argTypes = { diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx index 2c9f91be339f6..e4d3348f59557 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx @@ -15,10 +15,8 @@ describe('NoDataPage', () => { const component = shallowWithIntl( diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx index f350ad8855243..db0b2baf672c7 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx @@ -7,10 +7,7 @@ */ import React, { useMemo, FunctionComponent } from 'react'; -import { EuiSpacer, EuiText, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n-react'; -import classNames from 'classnames'; import { ElasticAgentCard, NoDataCard } from './no_data_card'; import { NoDataPageBody } from './no_data_page_body'; @@ -26,37 +23,24 @@ export const NO_DATA_RECOMMENDED = i18n.translate( export const NoDataPage: FunctionComponent = ({ solution, logo, - actions, + action, docsLink, pageTitle, ...rest }) => { - // Convert obj data into an iterable array - const entries = Object.entries(actions); - - // This sort fn may look nonsensical, but it's some Good Ol' Javascript (TM) - // Sort functions want either a 1, 0, or -1 returned to determine order, - // and it turns out in JS you CAN minus booleans from each other to get a 1, 0, or -1 - e.g., (true - false == 1) :whoa: - const sortedEntries = entries.sort(([, firstObj], [, secondObj]) => { - // The `??` fallbacks are because the recommended key can be missing or undefined - return Number(secondObj.recommended ?? false) - Number(firstObj.recommended ?? false); - }); - - // Convert the iterated [[key, value]] array format back into an object - const sortedData = Object.fromEntries(sortedEntries); - const actionsKeys = Object.keys(sortedData); + const actionKeys = Object.keys(action); const actionCards = useMemo(() => { - return Object.values(sortedData).map((action, i) => { - const isAgent = actionsKeys[i] === 'elasticAgent' || actionsKeys[i] === 'beats'; - const key = isAgent ? 'empty-page-agent-action' : `empty-page-${actionsKeys[i]}-action`; + return actionKeys.map((actionKey) => { + const isAgent = actionKey === 'elasticAgent'; + const key = isAgent ? 'empty-page-agent-action' : `empty-page-${actionKey}-action`; return isAgent ? ( - + ) : ( - + ); }); - }, [sortedData, actionsKeys]); + }, [action, actionKeys]); const title = pageTitle || @@ -66,37 +50,14 @@ export const NoDataPage: FunctionComponent = ({ }); return ( -
+
0 ? actionCards[0] : null} logo={logo} solution={solution} docsLink={docsLink} /> - {actionsKeys.length > 1 ? ( - <> - - -

- - - - ), - }} - /> -

- - - ) : undefined}
); }; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap index 11cce27e1a785..4a83ff37e5a97 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap @@ -42,18 +42,14 @@ exports[`NoDataPageBody render 1`] = ` - - -
, - ] - } - /> +
+ +
`; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.stories.tsx deleted file mode 100644 index 4e56a0c0b21d0..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.stories.tsx +++ /dev/null @@ -1,50 +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, { ReactElement } from 'react'; -import { action } from '@storybook/addon-actions'; -import { servicesFactory } from '@kbn/shared-ux-storybook'; -import { NoDataPageBody, NoDataPageBodyProps } from './no_data_page_body'; -import { NoDataCard } from '../no_data_card'; - -const services = servicesFactory({}); -const cardAction = { - recommended: false, - button: 'Button text', - onClick: action('Clicked'), -}; -const card1 = ; -const card2 = ; -const actionCards: ReactElement[] = [ -
{card1}
, -
{card2}
, -]; - -export default { - title: 'Page Template/No Data Page/No Data Page Body', - description: 'A body of NoDataPage', -}; - -type Params = Pick; - -export const PureComponent = (params: Params) => { - return ( - - ); -}; - -PureComponent.argTypes = { - solution: { - control: 'text', - defaultValue: 'Observability', - }, -}; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx index f3419a47f63b8..f9ff47a162359 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx @@ -7,27 +7,20 @@ */ import { NoDataPageBody } from './no_data_page_body'; -import React, { ReactElement } from 'react'; +import React from 'react'; import { shallowWithIntl } from '@kbn/test-jest-helpers'; -import { NoDataCard } from '../no_data_card'; +import { ElasticAgentCard } from '../no_data_card'; describe('NoDataPageBody', () => { const action = { - recommended: false, button: 'Button text', onClick: jest.fn(), }; - const el = ; - const actionCards: ReactElement[] = []; - actionCards.push(
{el}
); + const el = ; + const actionCard =
{el}
; test('render', () => { const component = shallowWithIntl( - + ); expect(component).toMatchSnapshot(); }); diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx index 580892f0e0de1..fd20bf14011b4 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx @@ -11,15 +11,14 @@ import React, { ReactElement } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { NoDataPageProps } from '../types'; import { KibanaPageTemplateSolutionNavAvatar } from '../../solution_nav'; -import { ActionCards } from '../action_cards'; import { ElasticAgentCard, NoDataCard } from '../no_data_card'; export type NoDataPageBodyProps = { - actionCards: Array | ReactElement>; -} & Omit; + actionCard: ReactElement | ReactElement | null; +} & Omit; export const NoDataPageBody = (props: NoDataPageBodyProps) => { - const { pageTitle, docsLink, solution, actionCards, logo } = props; + const { pageTitle, docsLink, solution, actionCard, logo } = props; return ( <> @@ -34,14 +33,14 @@ export const NoDataPageBody = (props: NoDataPageBodyProps) => {

@@ -52,7 +51,7 @@ export const NoDataPageBody = (props: NoDataPageBodyProps) => { - + {actionCard} ); }; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts index a2536e756c0c8..5cbeecbeff764 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts @@ -28,8 +28,6 @@ export type NoDataPageActions = Partial & { category?: string; }; -export type NoDataPageActionsProps = Record; - export interface NoDataPageProps extends CommonProps { /** * Single name for the current solution, used to auto-generate the title, logo, description, and button label @@ -48,9 +46,9 @@ export interface NoDataPageProps extends CommonProps { */ pageTitle?: string; /** - * An object of `NoDataPageActions` configurations with unique primary keys. - * Use `elasticAgent` or `beats` as the primary key for pre-configured cards of this type. + * An object of `NoDataPageActions`. + * Use `elasticAgent` as the primary key for pre-configured cards of this type. * Otherwise use a custom key that contains `EuiCard` props. */ - actions: NoDataPageActionsProps; + action: Record; } diff --git a/packages/kbn-shared-ux-components/src/page_template/types.ts b/packages/kbn-shared-ux-components/src/page_template/types.ts index 3b98322771919..31152f52e11ad 100644 --- a/packages/kbn-shared-ux-components/src/page_template/types.ts +++ b/packages/kbn-shared-ux-components/src/page_template/types.ts @@ -7,8 +7,8 @@ */ import { EuiPageTemplateProps } from '@elastic/eui'; -import { KibanaPageTemplateSolutionNavProps } from '../../../../src/plugins/kibana_react/public/page_template/solution_nav'; import { NoDataPageProps } from './no_data_page'; +import { KibanaPageTemplateSolutionNavProps } from './solution_nav'; export type KibanaPageTemplateProps = EuiPageTemplateProps & { /** From 4c02548f0f32e21c6240b71f8d237227a508e325 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 23 Mar 2022 16:28:26 +0100 Subject: [PATCH 06/21] [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 c5e719a904ebd..2bf228d2fee79 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 adbfdce45be76..217bccb1197d1 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 0000000000000..6cb2aa4423359 --- /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 0000000000000..5f3417eb76cb9 --- /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 0000000000000..03ca7dddb9063 --- /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 0000000000000..eff0fa22427eb --- /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 0000000000000..497b14bc70236 --- /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 0000000000000..9cef8b1f7c2b2 --- /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 372840f143ffcb69364ca0fcdd1f6d74ebeaaad4 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 23 Mar 2022 16:46:32 +0100 Subject: [PATCH 07/21] 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 2bf228d2fee79..e097c09543fd1 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 08/21] 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 e097c09543fd1..d10baea8f7258 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 217bccb1197d1..3e261ebbdf86b 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 0000000000000..4e751fe0ff518 --- /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 0000000000000..fea0d6954343d --- /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 5f3417eb76cb9..db31c0fd5a3d4 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 03ca7dddb9063..68bbaf6fe7249 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 497b14bc70236..7a8b20c3f8d64 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 9cef8b1f7c2b2..5a1f088478e18 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 09/21] 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 d10baea8f7258..1f6de24cdfa78 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 3e261ebbdf86b..adbfdce45be76 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 68bbaf6fe7249..1402f272a15cf 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 eff0fa22427eb..95e1e5a01499d 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 10/21] 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 95e1e5a01499d..17f906e224c49 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 11/21] 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 1f6de24cdfa78..9216f5b21d7f5 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 5c4bfbf0b2dc5d620783b4da3a4f9bc2c470e8cc Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 23 Mar 2022 17:20:05 +0100 Subject: [PATCH 12/21] Update so the component now uses the SolutionAvatar --- .../no_data_page/no_data_page.tsx | 7 - .../no_data_page_body.test.tsx.snap | 6 +- .../no_data_page_body/no_data_page_body.tsx | 8 +- .../__snapshots__/solution_nav.test.tsx.snap | 265 ------------------ .../solution_nav_avatar.test.tsx.snap | 9 - ...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 ---- 20 files changed, 5 insertions(+), 950 deletions(-) delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap 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/__snapshots__/solution_nav_collapse_button.test.tsx.snap 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/index.ts delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.scss delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.test.tsx delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx 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 delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.scss delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.stories.tsx delete mode 100644 packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx delete 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_page.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx index db0b2baf672c7..57946837924f2 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx @@ -13,13 +13,6 @@ import { ElasticAgentCard, NoDataCard } from './no_data_card'; import { NoDataPageBody } from './no_data_page_body'; import { NoDataPageProps } from './types'; -export const NO_DATA_RECOMMENDED = i18n.translate( - 'sharedUXComponents.noDataPage.noDataPage.recommended', - { - defaultMessage: 'Recommended', - } -); - export const NoDataPage: FunctionComponent = ({ solution, logo, diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap index 4a83ff37e5a97..93ee11a09a8a4 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap @@ -5,7 +5,7 @@ exports[`NoDataPageBody render 1`] = ` - , diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx index fd20bf14011b4..927a808af8e43 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx @@ -10,8 +10,8 @@ import { EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui'; import React, { ReactElement } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { NoDataPageProps } from '../types'; -import { KibanaPageTemplateSolutionNavAvatar } from '../../solution_nav'; import { ElasticAgentCard, NoDataCard } from '../no_data_card'; +import { KibanaSolutionAvatar } from '../../../solution_avatar'; export type NoDataPageBodyProps = { actionCard: ReactElement | ReactElement | null; @@ -23,11 +23,7 @@ export const NoDataPageBody = (props: NoDataPageBodyProps) => { return ( <> - +

{pageTitle}

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 deleted file mode 100644 index 787868f8f8693..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap +++ /dev/null @@ -1,265 +0,0 @@ -// 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 deleted file mode 100644 index 6cb2aa4423359..0000000000000 --- 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/__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 deleted file mode 100644 index 93c3471c16921..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/__snapshots__/solution_nav_collapse_button.test.tsx.snap +++ /dev/null @@ -1,23 +0,0 @@ -// 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 deleted file mode 100644 index fea0d6954343d..0000000000000 --- 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/index.ts b/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts deleted file mode 100644 index 81c2033a7ce7c..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/index.ts +++ /dev/null @@ -1,14 +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 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 deleted file mode 100644 index d0070cef729b7..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.scss +++ /dev/null @@ -1,30 +0,0 @@ -$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 deleted file mode 100644 index 5d8313a493d8c..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.stories.tsx +++ /dev/null @@ -1,67 +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 { 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 deleted file mode 100644 index ed90894289169..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.test.tsx +++ /dev/null @@ -1,77 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React 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 deleted file mode 100644 index 842ef53d53ab7..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav.tsx +++ /dev/null @@ -1,167 +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.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 deleted file mode 100644 index 03ca7dddb9063..0000000000000 --- 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 c4a5cc1331465..0000000000000 --- 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: '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 497b14bc70236..0000000000000 --- 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 9cef8b1f7c2b2..0000000000000 --- 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/solution_nav_collapse_button.scss b/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.scss deleted file mode 100644 index 61cea7962d956..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.scss +++ /dev/null @@ -1,47 +0,0 @@ -.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 deleted file mode 100644 index f2603c2e286ee..0000000000000 --- 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: '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 deleted file mode 100644 index c8a0fcbd5ae5c..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.test.tsx +++ /dev/null @@ -1,29 +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 { 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 deleted file mode 100644 index 8e8a48b0f857c..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/solution_nav/solution_nav_collapse_button.tsx +++ /dev/null @@ -1,59 +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_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 696006c2312af7ba5e90f9a7eedc10303629e52c Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 25 Mar 2022 07:50:27 +0100 Subject: [PATCH 13/21] Fix props --- .../src/page_template/index.tsx | 1 + .../src/page_template/no_data_page/index.ts | 1 + .../no_data_page/no_data_page.tsx | 22 +++--- .../no_data_page_body/no_data_page_body.tsx | 4 +- .../src/page_template/no_data_page/types.ts | 4 -- .../src/page_template/with_solution_nav.tsx | 72 ------------------- 6 files changed, 14 insertions(+), 90 deletions(-) delete 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/index.tsx b/packages/kbn-shared-ux-components/src/page_template/index.tsx index adbfdce45be76..d469a2fb34c10 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 { NoDataPage } from './no_data_page'; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts index 7712b4289305a..c1b0ac2e13395 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/index.ts @@ -7,4 +7,5 @@ */ export { NoDataCard, ElasticAgentCard } from './no_data_card'; +export { NoDataPage } from './no_data_page'; export type { NoDataPageProps } from './types'; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx index 57946837924f2..d8868f7a50a68 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx @@ -9,7 +9,7 @@ import React, { useMemo, FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { ElasticAgentCard, NoDataCard } from './no_data_card'; +import { ElasticAgentCard } from './no_data_card'; import { NoDataPageBody } from './no_data_page_body'; import { NoDataPageProps } from './types'; @@ -23,16 +23,14 @@ export const NoDataPage: FunctionComponent = ({ }) => { const actionKeys = Object.keys(action); - const actionCards = useMemo(() => { - return actionKeys.map((actionKey) => { - const isAgent = actionKey === 'elasticAgent'; - const key = isAgent ? 'empty-page-agent-action' : `empty-page-${actionKey}-action`; - return isAgent ? ( - - ) : ( - - ); - }); + const actionCard = useMemo(() => { + if (actionKeys.length !== 1) { + return null; + } + const actionKey = actionKeys[0]; + const key = + actionKey === 'elasticAgent' ? 'empty-page-agent-action' : `empty-page-${actionKey}-action`; + return ; }, [action, actionKeys]); const title = @@ -46,7 +44,7 @@ export const NoDataPage: FunctionComponent = ({
0 ? actionCards[0] : null} + actionCard={actionCard} logo={logo} solution={solution} docsLink={docsLink} diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx index 927a808af8e43..99443d12035bc 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx @@ -10,11 +10,11 @@ import { EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui'; import React, { ReactElement } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { NoDataPageProps } from '../types'; -import { ElasticAgentCard, NoDataCard } from '../no_data_card'; +import { ElasticAgentCard } from '../no_data_card'; import { KibanaSolutionAvatar } from '../../../solution_avatar'; export type NoDataPageBodyProps = { - actionCard: ReactElement | ReactElement | null; + actionCard: ReactElement | null; } & Omit; export const NoDataPageBody = (props: NoDataPageBodyProps) => { diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts index 5cbeecbeff764..533bc82e3d99b 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts @@ -10,10 +10,6 @@ import { CommonProps, EuiCardProps } from '@elastic/eui'; import { MouseEventHandler, ReactNode } from 'react'; export type NoDataPageActions = Partial & { - /** - * Applies the `Recommended` beta badge and makes the button `fill` - */ - recommended?: boolean; /** * Provide just a string for the button's label, or a whole component */ diff --git a/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx b/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx deleted file mode 100644 index 215404ca13bb0..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/with_solution_nav.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { ComponentType, useState } from 'react'; -import classNames from 'classnames'; -import { useIsWithinBreakpoints } from '@elastic/eui'; -import { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar'; -import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav'; -import { KibanaPageTemplateProps } from './types'; - -type SolutionNavProps = KibanaPageTemplateProps & { - solutionNav: KibanaPageTemplateSolutionNavProps; -}; - -const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed'; - -export const withSolutionNav = (WrappedComponent: ComponentType) => { - const WithSolutionNav = (props: SolutionNavProps) => { - const isMediumBreakpoint = useIsWithinBreakpoints(['m']); - const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']); - const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState( - !JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY))) - ); - const { solutionNav, ...propagatedProps } = props; - const { children, isEmptyState, template } = propagatedProps; - const toggleOpenOnDesktop = () => { - setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop); - // Have to store it as the opposite of the default we want - localStorage.setItem(SOLUTION_NAV_COLLAPSED_KEY, JSON.stringify(isSideNavOpenOnDesktop)); - }; - const sideBarClasses = classNames( - 'kbnPageTemplate__pageSideBar', - { - 'kbnPageTemplate__pageSideBar--shrink': - isMediumBreakpoint || (isLargerBreakpoint && !isSideNavOpenOnDesktop), - }, - props.pageSideBarProps?.className - ); - - const templateToUse = isEmptyState && !template ? 'centeredContent' : template; - - const pageSideBar = ( - - ); - const pageSideBarProps = { - paddingSize: 'none', - ...props.pageSideBarProps, - className: sideBarClasses, - } as EuiPageSideBarProps; // needed because for some reason 'none' is not recognized as a valid value for paddingSize - return ( - - {children} - - ); - }; - WithSolutionNav.displayName = `WithSolutionNavBar${WrappedComponent}`; - return WithSolutionNav; -}; From fd72939a6a0822511cca9ec3cae6f2c6a1a7f3b1 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 25 Mar 2022 08:09:14 +0100 Subject: [PATCH 14/21] Remove unnecessary types files --- .../src/page_template/types.ts | 30 ------------------- 1 file changed, 30 deletions(-) delete mode 100644 packages/kbn-shared-ux-components/src/page_template/types.ts diff --git a/packages/kbn-shared-ux-components/src/page_template/types.ts b/packages/kbn-shared-ux-components/src/page_template/types.ts deleted file mode 100644 index 31152f52e11ad..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/types.ts +++ /dev/null @@ -1,30 +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 { EuiPageTemplateProps } from '@elastic/eui'; -import { NoDataPageProps } from './no_data_page'; -import { KibanaPageTemplateSolutionNavProps } from './solution_nav'; - -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; -}; From efd43837ed32c1dabf75c42149c20ff6c0e45be6 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 25 Mar 2022 10:49:33 +0100 Subject: [PATCH 15/21] Fix failing test --- .../__snapshots__/elastic_agent_card.test.tsx.snap | 5 ----- .../elastic_agent_card.component.test.tsx | 13 ------------- 2 files changed, 18 deletions(-) diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap index 76f1beb7ac481..138f6c402e2ad 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap @@ -170,11 +170,6 @@ exports[`ElasticAgentCard renders 1`] = ` title="Add Elastic Agent" > { }); describe('props', () => { - test('recommended', () => { - const component = shallow( - - ); - expect(component.find(NoDataCard).props().recommended).toBe(true); - expect(component).toMatchSnapshot(); - }); - test('button', () => { const component = shallow( Date: Mon, 28 Mar 2022 12:09:48 +0200 Subject: [PATCH 16/21] Updating failed test --- .../__snapshots__/no_data_page.test.tsx.snap | 36 +------------------ 1 file changed, 1 insertion(+), 35 deletions(-) diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap index 2dc4585fa345c..a7dc2727a4ce5 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap @@ -2,7 +2,6 @@ exports[`NoDataPage render 1`] = `
, - , - , - ] - } + actionCard={} docsLink="test" pageTitle="Welcome to Elastic Elastic!" solution="Elastic" /> - - -

- - - , - } - } - /> -

-
`; From 04bde2ab3d82960b1366952c3bdc602d82a224aa Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 29 Mar 2022 08:19:52 +0200 Subject: [PATCH 17/21] Fix obsolete snapshot --- ...elastic_agent_card.component.test.tsx.snap | 26 --------- .../__snapshots__/no_data_card.test.tsx.snap | 58 ------------------- 2 files changed, 84 deletions(-) diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap index 127b4f2d9f4b4..95cacc3a0db4a 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap @@ -52,32 +52,6 @@ exports[`ElasticAgentCardComponent props href 1`] = ` `; -exports[`ElasticAgentCardComponent props recommended 1`] = ` - - - -`; - exports[`ElasticAgentCardComponent renders 1`] = ` `; -exports[`NoDataCard props recommended 1`] = ` -.emotion-0 { - max-width: 400px; -} - -
-
- - Card title - -
-

- Description -

-
-
- - - Recommended - - -
- -
-
-`; - exports[`NoDataCard renders 1`] = ` .emotion-0 { max-width: 400px; From e278b05485a7246a09755da77732e83c4fc9691e Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Thu, 31 Mar 2022 10:41:32 +0200 Subject: [PATCH 18/21] Applying PR comments --- .../__snapshots__/no_data_page.test.tsx.snap | 152 ++++++------------ ...elastic_agent_card.component.test.tsx.snap | 4 + .../no_data_page/no_data_card/index.ts | 2 +- .../no_data_card/no_data_card.styles.ts | 1 + .../no_data_page/no_data_page.test.tsx | 6 +- .../no_data_page/no_data_page.tsx | 40 +++-- .../no_data_page_body.test.tsx.snap | 55 ------- .../no_data_page/no_data_page_body/index.tsx | 9 -- .../no_data_page_body.test.tsx | 27 ---- .../no_data_page_body/no_data_page_body.tsx | 53 ------ .../src/page_template/no_data_page/types.ts | 19 +-- 11 files changed, 90 insertions(+), 278 deletions(-) delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/index.tsx delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx delete mode 100644 packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap index a7dc2727a4ce5..66b085b284391 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/__snapshots__/no_data_page.test.tsx.snap @@ -2,114 +2,52 @@ exports[`NoDataPage render 1`] = `
- } - docsLink="test" - pageTitle="Welcome to Elastic Elastic!" - solution="Elastic" + + + +

+ Welcome to Elastic Analytics! +

+ +

+ + + , + "solution": "Analytics", + } + } + /> +

+ + + +
`; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap index 95cacc3a0db4a..1524935e26318 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap @@ -19,6 +19,7 @@ exports[`ElasticAgentCardComponent props button 1`] = ` > { return { maxWidth: NO_DATA_CARD_MAX_WIDTH, + marginInline: 'auto', }; }; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx index e4d3348f59557..c84dea27552aa 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.test.tsx @@ -9,18 +9,22 @@ import React from 'react'; import { NoDataPage } from './no_data_page'; import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { ElasticAgentCard } from './no_data_card'; describe('NoDataPage', () => { test('render', () => { const component = shallowWithIntl( ); expect(component).toMatchSnapshot(); + expect(component.find('h1').html()).toContain('Welcome to Elastic Analytics!'); + expect(component.find(ElasticAgentCard).length).toBe(1); }); }); diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx index d8868f7a50a68..f16f87039a626 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.tsx @@ -9,9 +9,12 @@ import React, { useMemo, FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; +import { EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import classNames from 'classnames'; import { ElasticAgentCard } from './no_data_card'; -import { NoDataPageBody } from './no_data_page_body'; import { NoDataPageProps } from './types'; +import { KibanaSolutionAvatar } from '../../solution_avatar'; export const NoDataPage: FunctionComponent = ({ solution, @@ -41,14 +44,33 @@ export const NoDataPage: FunctionComponent = ({ }); return ( -
- +
+ + + +

{title}

+ +

+ + + + ), + }} + /> +

+ + + + {actionCard}
); }; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap deleted file mode 100644 index 93ee11a09a8a4..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/__snapshots__/no_data_page_body.test.tsx.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NoDataPageBody render 1`] = ` - - - - -

- -

- - - , - "solution": "Elastic", - } - } - /> -

- - - -
- -
- -`; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/index.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/index.tsx deleted file mode 100644 index a5312d696139d..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export { NoDataPageBody } from './no_data_page_body'; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.tsx deleted file mode 100644 index f9ff47a162359..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.test.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 { NoDataPageBody } from './no_data_page_body'; -import React from 'react'; -import { shallowWithIntl } from '@kbn/test-jest-helpers'; -import { ElasticAgentCard } from '../no_data_card'; - -describe('NoDataPageBody', () => { - const action = { - button: 'Button text', - onClick: jest.fn(), - }; - const el = ; - const actionCard =
{el}
; - test('render', () => { - const component = shallowWithIntl( - - ); - expect(component).toMatchSnapshot(); - }); -}); diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx deleted file mode 100644 index 99443d12035bc..0000000000000 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx +++ /dev/null @@ -1,53 +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 { EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui'; -import React, { ReactElement } from 'react'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { NoDataPageProps } from '../types'; -import { ElasticAgentCard } from '../no_data_card'; -import { KibanaSolutionAvatar } from '../../../solution_avatar'; - -export type NoDataPageBodyProps = { - actionCard: ReactElement | null; -} & Omit; - -export const NoDataPageBody = (props: NoDataPageBodyProps) => { - const { pageTitle, docsLink, solution, actionCard, logo } = props; - - return ( - <> - - - -

{pageTitle}

- -

- - - - ), - }} - /> -

- - - - {actionCard} - - ); -}; diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts index 533bc82e3d99b..61053edf7644a 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts @@ -6,23 +6,10 @@ * Side Public License, v 1. */ -import { CommonProps, EuiCardProps } from '@elastic/eui'; -import { MouseEventHandler, ReactNode } from 'react'; +import { CommonProps } from '@elastic/eui'; +import { ElasticAgentCardProps } from './no_data_card'; -export type NoDataPageActions = Partial & { - /** - * Provide just a string for the button's label, or a whole component - */ - button?: string | ReactNode; - /** - * Remapping `onClick` to any element - */ - onClick?: MouseEventHandler; - /** - * Category to auto-select within Fleet - */ - category?: string; -}; +export type NoDataPageActions = Omit; export interface NoDataPageProps extends CommonProps { /** From adf83b121d32f5bf95623812790362d8b8572c53 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Thu, 31 Mar 2022 12:56:00 +0200 Subject: [PATCH 19/21] Update failing snapshot --- .../no_data_card/__snapshots__/no_data_card.test.tsx.snap | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap index ef57ed9fcb0bd..7b3a25ef737f8 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap @@ -3,6 +3,7 @@ exports[`NoDataCard props button 1`] = ` .emotion-0 { max-width: 400px; + margin-inline: auto; }
Date: Thu, 31 Mar 2022 15:13:08 +0200 Subject: [PATCH 20/21] Update failing snapshot --- .../__snapshots__/elastic_agent_card.component.test.tsx.snap | 4 ---- .../__snapshots__/elastic_agent_card.test.tsx.snap | 2 ++ 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap index 1524935e26318..95cacc3a0db4a 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap @@ -19,7 +19,6 @@ exports[`ElasticAgentCardComponent props button 1`] = ` > Date: Thu, 31 Mar 2022 17:39:59 +0200 Subject: [PATCH 21/21] Add logo as an argtype --- .../page_template/no_data_page/no_data_page.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx index bd63e3d09b23e..cbb8ef6b0446f 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_page.stories.tsx @@ -20,7 +20,7 @@ export default { const action = { elasticAgent: {}, }; -type Params = Pick; +type Params = Pick; export const PureComponent = (params: Params) => { return ; @@ -31,4 +31,9 @@ PureComponent.argTypes = { control: 'text', defaultValue: 'Observability', }, + logo: { + control: { type: 'radio' }, + options: ['logoElastic', 'logoKibana', 'logoCloud', undefined], + defaultValue: undefined, + }, };