From ef066d2078f61e2e8c0056fda148840de8271632 Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Wed, 23 Feb 2022 13:19:44 -0600 Subject: [PATCH] Feedback for PR #125403 --- .../assets/data_view_illustration.tsx | 4 +- .../components/empty_state/assets/index.tsx | 24 +++ .../public/components/empty_state/index.tsx | 3 +- .../documentation_link.test.tsx.snap | 200 +++--------------- .../no_data_views/documentation_link.test.tsx | 8 +- .../no_data_views/documentation_link.tsx | 7 +- .../empty_state/no_data_views/index.tsx | 6 +- ...t.tsx => no_data_views.component.test.tsx} | 10 +- ...ponent.tsx => no_data_views.component.tsx} | 38 ++-- ..._data_views_page.mdx => no_data_views.mdx} | 4 +- ....stories.tsx => no_data_views.stories.tsx} | 37 ++-- ...s_page.test.tsx => no_data_views.test.tsx} | 9 +- ..._data_views_page.tsx => no_data_views.tsx} | 32 +-- 13 files changed, 125 insertions(+), 257 deletions(-) create mode 100644 src/plugins/shared_ux/public/components/empty_state/assets/index.tsx rename src/plugins/shared_ux/public/components/empty_state/no_data_views/{no_data_views_component.test.tsx => no_data_views.component.test.tsx} (80%) rename src/plugins/shared_ux/public/components/empty_state/no_data_views/{no_data_views_component.tsx => no_data_views.component.tsx} (69%) rename src/plugins/shared_ux/public/components/empty_state/no_data_views/{no_data_views_page.mdx => no_data_views.mdx} (63%) rename src/plugins/shared_ux/public/components/empty_state/no_data_views/{no_data_views_page.stories.tsx => no_data_views.stories.tsx} (57%) rename src/plugins/shared_ux/public/components/empty_state/no_data_views/{no_data_views_page.test.tsx => no_data_views.test.tsx} (94%) rename src/plugins/shared_ux/public/components/empty_state/no_data_views/{no_data_views_page.tsx => no_data_views.tsx} (69%) diff --git a/src/plugins/shared_ux/public/components/empty_state/assets/data_view_illustration.tsx b/src/plugins/shared_ux/public/components/empty_state/assets/data_view_illustration.tsx index 8e7c3b80aa26c..8a889a9267dee 100644 --- a/src/plugins/shared_ux/public/components/empty_state/assets/data_view_illustration.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/assets/data_view_illustration.tsx @@ -17,6 +17,7 @@ export const DataViewIllustration = () => { const dataViewIllustrationVerticalStripes = css` fill: ${colors.fullShade}; `; + const dataViewIllustrationDots = css` fill: ${colors.lightShade}; `; @@ -549,6 +550,3 @@ export const DataViewIllustration = () => { ); }; - -/* eslint-disable import/no-default-export */ -export default DataViewIllustration; diff --git a/src/plugins/shared_ux/public/components/empty_state/assets/index.tsx b/src/plugins/shared_ux/public/components/empty_state/assets/index.tsx new file mode 100644 index 0000000000000..c234cdf40055b --- /dev/null +++ b/src/plugins/shared_ux/public/components/empty_state/assets/index.tsx @@ -0,0 +1,24 @@ +/* + * 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 { EuiLoadingSpinner } from '@elastic/eui'; + +import { withSuspense } from '../../utility'; + +export const LazyDataViewIllustration = React.lazy(() => + import('../assets/data_view_illustration').then(({ DataViewIllustration }) => ({ + default: DataViewIllustration, + })) +); + +export const DataViewIllustration = withSuspense( + LazyDataViewIllustration, + +); diff --git a/src/plugins/shared_ux/public/components/empty_state/index.tsx b/src/plugins/shared_ux/public/components/empty_state/index.tsx index b54af1c92f964..fc05199aae207 100644 --- a/src/plugins/shared_ux/public/components/empty_state/index.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/index.tsx @@ -5,4 +5,5 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -export * from './no_data_views'; + +export { NoDataViews } from './no_data_views'; diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/__snapshots__/documentation_link.test.tsx.snap b/src/plugins/shared_ux/public/components/empty_state/no_data_views/__snapshots__/documentation_link.test.tsx.snap index f730c9c10958e..7672c041aad67 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/__snapshots__/documentation_link.test.tsx.snap +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/__snapshots__/documentation_link.test.tsx.snap @@ -1,177 +1,35 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` is rendered correctly 1`] = ` - -
- -
- - Want to learn more? - -
- -   -
+ +
- - - - Read documentation - - - - - - - - (opens in a new tab or window) - - - - - - -
- + + + +   +
+ + + +
+ `; diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.test.tsx b/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.test.tsx index 6c5398effc936..fd963dfaa8e1c 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.test.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.test.tsx @@ -6,14 +6,16 @@ * Side Public License, v 1. */ +import React from 'react'; + import { EuiLink, EuiTitle } from '@elastic/eui'; +import { shallowWithIntl } from '@kbn/test-jest-helpers'; + import { DocumentationLink } from './documentation_link'; -import React from 'react'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; describe('', () => { test('is rendered correctly', () => { - const component = mountWithIntl(); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); expect(component.find('dl').length).toBe(1); diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx b/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx index 5a43f03b432c2..7d83ef9390f34 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx @@ -8,14 +8,13 @@ import React from 'react'; import { EuiLink, EuiTitle } from '@elastic/eui'; - import { FormattedMessage } from '@kbn/i18n-react'; interface Props { - documentationUrl: string; + href: string; } -export function DocumentationLink({ documentationUrl }: Props) { +export function DocumentationLink({ href }: Props) { return (
@@ -28,7 +27,7 @@ export function DocumentationLink({ documentationUrl }: Props) {  
- + ', () => { test('is rendered correctly', () => { const component = mountWithIntl( - ', () => { }); test('does not render button if canCreateNewDataViews is false', () => { - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component.find(EuiButton).length).toBe(0); }); test('does not documentation link if linkToDocumentation is not provided', () => { const component = mountWithIntl( - + ); expect(component.find(DocumentationLink).length).toBe(0); @@ -43,7 +43,7 @@ describe('', () => { test('onClickCreate', () => { const onClickCreate = jest.fn(); const component = mountWithIntl( - + ); component.find('button').simulate('click'); diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.component.tsx similarity index 69% rename from src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx rename to src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.component.tsx index 09f9e371dd148..69f33cbd0a4b7 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.component.tsx @@ -6,16 +6,17 @@ * Side Public License, v 1. */ -import React, { lazy, Suspense } from 'react'; +import React from 'react'; +import { css } from '@emotion/react'; + import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner, EuiEmptyPromptProps } from '@elastic/eui'; -import { css } from '@emotion/react'; -import { DocumentationLink } from './documentation_link'; +import { EuiButton, EuiEmptyPrompt, EuiEmptyPromptProps } from '@elastic/eui'; -const Illustration = lazy(() => import('../assets/data_view_illustration')); +import { DataViewIllustration } from '../assets'; +import { DocumentationLink } from './documentation_link'; -interface Props { +export interface Props { canCreateNewDataView: boolean; onClickCreate?: () => void; dataViewsDocLink?: string; @@ -26,15 +27,15 @@ const createDataViewText = i18n.translate('sharedUX.noDataViewsPage.addDataViewT defaultMessage: 'Create Data View', }); -export const NoDataViewsComponent = ({ +// Using raw value because it is content dependent +const MAX_WIDTH = 830; + +export const NoDataViews = ({ onClickCreate, canCreateNewDataView, dataViewsDocLink, emptyPromptColor = 'plain', }: Props) => { - // Using raw value because it is content dependent - const maxWidth = '830px'; - const createNewButton = canCreateNewDataView && ( }> - - - } + icon={} title={

} actions={createNewButton} - footer={dataViewsDocLink && } + footer={dataViewsDocLink && } /> ); }; diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.mdx b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.mdx similarity index 63% rename from src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.mdx rename to src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.mdx index a2c3b60a43e07..ef8812c565a9f 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.mdx +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.mdx @@ -9,6 +9,6 @@ When there is data in Elasticsearch, but there haven't been any data views created yet, we want to display an appropriate message to the user and facilitate creation of data views (if appropriate permissions are in place). -The pure component, `no_data_views_component.tsx`, is a pre-configured **EuiEmptyPrompt**. +The pure component, `no_data_views.component.tsx`, is a pre-configured **EuiEmptyPrompt**. -The connected component, `no_data_views_page.tsx`, uses services from the `shared_ux` plugin to open Data View Editor. You must wrap your plugin app in the `ServicesContext` provided by the start contract of the `shared_ux` plugin to use it. +The connected component, `no_data_views.tsx`, uses services from the `shared_ux` plugin to open Data View Editor. You must wrap your plugin app in the `ServicesContext` provided by the start contract of the `shared_ux` plugin to use it. diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.stories.tsx b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.stories.tsx similarity index 57% rename from src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.stories.tsx rename to src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.stories.tsx index e563f679f0cea..3f9ae1958cad7 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.stories.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.stories.tsx @@ -7,14 +7,17 @@ */ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { NoDataViewsPage } from './no_data_views_page'; -import { NoDataViewsComponent } from './no_data_views_component'; -import mdx from './no_data_views_page.mdx'; + import { docLinksServiceFactory } from '../../../services/storybook/doc_links'; +import { NoDataViews as NoDataViewsComponent, Props } from './no_data_views.component'; +import { NoDataViews } from './no_data_views'; + +import mdx from './no_data_views.mdx'; + export default { - title: 'No Data Views Page', - description: 'A page that displays when there are no user-created data views', + title: 'No Data Views', + description: 'A component to display when there are no user-created data views available.', parameters: { docs: { page: mdx, @@ -24,31 +27,17 @@ export default { export const ConnectedComponent = () => { return ( - ); }; -ConnectedComponent.argTypes = { - openEditor: action('openEditor'), -}; +type Params = Pick; -export const PureComponent = ({ - canCreateNewDataView = true, - dataViewDocLinks, -}: { - canCreateNewDataView: boolean; - dataViewDocLinks: string | undefined; -}) => { - return ( - - ); +export const PureComponent = (params: Params) => { + return ; }; PureComponent.argTypes = { @@ -56,7 +45,7 @@ PureComponent.argTypes = { control: 'boolean', defaultValue: true, }, - dataViewDocLinks: { + dataViewsDocLink: { options: [docLinksServiceFactory().dataViewsDocsLink, undefined], control: { type: 'radio' }, }, diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.test.tsx b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.test.tsx similarity index 94% rename from src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.test.tsx rename to src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.test.tsx index 2c657f7bf8f81..650d78fa64a03 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.test.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.test.tsx @@ -7,13 +7,14 @@ */ import React from 'react'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; import { ReactWrapper } from 'enzyme'; +import { mountWithIntl } from '@kbn/test-jest-helpers'; +import { EuiButton } from '@elastic/eui'; + import { ServicesProvider, SharedUXServices } from '../../../services'; import { servicesFactory } from '../../../services/mocks'; -import { NoDataViewsPage } from './no_data_views_page'; -import { EuiButton } from '@elastic/eui'; +import { NoDataViews } from './no_data_views'; describe('', () => { let services: SharedUXServices; @@ -31,7 +32,7 @@ describe('', () => { test('on dataView created', () => { const component = mount( - diff --git a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.tsx b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.tsx similarity index 69% rename from src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.tsx rename to src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.tsx index e366222cf4a3d..79b8cc4e4dfd4 100644 --- a/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_page.tsx +++ b/src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.tsx @@ -7,17 +7,24 @@ */ import React, { useCallback, useEffect, useRef } from 'react'; -import { NoDataViewsComponent } from './no_data_views_component'; -import { useEditors, usePermissions } from '../../../services'; + import { DataView } from '../../../../../data_views/public'; +import { useEditors, usePermissions } from '../../../services'; +import type { SharedUXEditorsService } from '../../../services/editors'; + +import { NoDataViews as NoDataViewsComponent } from './no_data_views.component'; export interface Props { onDataViewCreated: (dataView: DataView) => void; dataViewsDocLink: string; } -export const NoDataViewsPage = ({ onDataViewCreated, dataViewsDocLink }: Props) => { - const closeDataViewEditor = useRef<() => void | undefined>(); +type CloseDataViewEditorFn = ReturnType; + +export const NoDataViews = ({ onDataViewCreated, dataViewsDocLink }: Props) => { + const { canCreateNewDataView } = usePermissions(); + const { openDataViewEditor } = useEditors(); + const closeDataViewEditor = useRef(); useEffect(() => { const cleanup = () => { @@ -25,37 +32,32 @@ export const NoDataViewsPage = ({ onDataViewCreated, dataViewsDocLink }: Props) closeDataViewEditor?.current(); } }; + return () => { // Make sure to close the editor when unmounting cleanup(); }; }, []); - const setDataViewEditorRef = useCallback((ref: () => void | undefined) => { + const setDataViewEditorRef = useCallback((ref: CloseDataViewEditorFn) => { closeDataViewEditor.current = ref; }, []); - const { canCreateNewDataView } = usePermissions(); - const { openDataViewEditor } = useEditors(); - const createNewDataView = useCallback(() => { + const onClickCreate = useCallback(() => { if (!canCreateNewDataView) { return; } + const ref = openDataViewEditor({ onSave: (dataView) => { onDataViewCreated(dataView); }, }); + if (setDataViewEditorRef) { setDataViewEditorRef(ref); } }, [canCreateNewDataView, openDataViewEditor, setDataViewEditorRef, onDataViewCreated]); - return ( - - ); + return ; };