Feedback for PR #125403

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 = () => {
     </svg>
   );
 };
-
-/* eslint-disable import/no-default-export */
-export default DataViewIllustration;

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,
+  <EuiLoadingSpinner size="xl" />
+);

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';

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('<DocumentationLink />', () => {
   test('is rendered correctly', () => {
-    const component = mountWithIntl(<DocumentationLink documentationUrl={'dummy'} />);
+    const component = shallowWithIntl(<DocumentationLink href={'dummy'} />);
     expect(component).toMatchSnapshot();
 
     expect(component.find('dl').length).toBe(1);

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 (
     <dl>
       <EuiTitle size="xxs">
@@ -28,7 +27,7 @@ export function DocumentationLink({ documentationUrl }: Props) {
       </EuiTitle>
       &emsp;
       <dd className="eui-displayInline">
-        <EuiLink href={documentationUrl} target="_blank" external>
+        <EuiLink href={href} target="_blank" external>
           <FormattedMessage
             id="sharedUX.noDataViews.readDocumentation"
             defaultMessage="Read documentation"

src/plugins/shared_ux/public/components/empty_state/no_data_views/index.tsx

@@ -6,8 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { NoDataViewsPage } from './no_data_views_page';
-export { NoDataViewsPage } from './no_data_views_page';
-
-// eslint-disable-next-line import/no-default-export
-export default NoDataViewsPage;
+export { NoDataViews } from './no_data_views';

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views_component.test.tsx → src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.component.test.tsx

@@ -9,13 +9,13 @@
 import React from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { EuiButton, EuiPanel } from '@elastic/eui';
-import { NoDataViewsComponent } from './no_data_views_component';
+import { NoDataViews } from './no_data_views.component';
 import { DocumentationLink } from './documentation_link';
 
 describe('<NoDataViewsComponent />', () => {
   test('is rendered correctly', () => {
     const component = mountWithIntl(
-      <NoDataViewsComponent
+      <NoDataViews
         onClickCreate={jest.fn()}
         canCreateNewDataView={true}
         dataViewsDocLink={'dummy'}
@@ -27,14 +27,14 @@ describe('<NoDataViewsComponent />', () => {
   });
 
   test('does not render button if canCreateNewDataViews is false', () => {
-    const component = mountWithIntl(<NoDataViewsComponent canCreateNewDataView={false} />);
+    const component = mountWithIntl(<NoDataViews canCreateNewDataView={false} />);
 
     expect(component.find(EuiButton).length).toBe(0);
   });
 
   test('does not documentation link if linkToDocumentation is not provided', () => {
     const component = mountWithIntl(
-      <NoDataViewsComponent onClickCreate={jest.fn()} canCreateNewDataView={true} />
+      <NoDataViews onClickCreate={jest.fn()} canCreateNewDataView={true} />
     );
 
     expect(component.find(DocumentationLink).length).toBe(0);
@@ -43,7 +43,7 @@ describe('<NoDataViewsComponent />', () => {
   test('onClickCreate', () => {
     const onClickCreate = jest.fn();
     const component = mountWithIntl(
-      <NoDataViewsComponent canCreateNewDataView={true} onClickCreate={onClickCreate} />
+      <NoDataViews canCreateNewDataView={true} onClickCreate={onClickCreate} />
     );
 
     component.find('button').simulate('click');