Merge branch 'master' into ingest/config-to-policy-action

src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx

@@ -17,43 +17,36 @@
  * under the License.
  */
 import React from 'react';
+import { wait } from '@testing-library/dom';
+import { cleanup, render } from '@testing-library/react/pure';
 import { ErrorEmbeddable } from './error_embeddable';
 import { EmbeddableRoot } from './embeddable_root';
-import { mount } from 'enzyme';
+
+afterEach(cleanup);
 
 test('ErrorEmbeddable renders an embeddable', async () => {
  const embeddable = new ErrorEmbeddable('some error occurred', { id: '123', title: 'Error' });
- const component = mount(<EmbeddableRoot embeddable={embeddable} />);
- expect(
- component.getDOMNode().querySelectorAll('[data-test-subj="embeddableStackError"]').length
- ).toBe(1);
- expect(
- component.getDOMNode().querySelectorAll('[data-test-subj="errorMessageMarkdown"]').length
- ).toBe(1);
- expect(
- component
- .getDOMNode()
- .querySelectorAll('[data-test-subj="errorMessageMarkdown"]')[0]
- .innerHTML.includes('some error occurred')
- ).toBe(true);
+ const { getByTestId, getByText } = render(<EmbeddableRoot embeddable={embeddable} />);
+
+ expect(getByTestId('embeddableStackError')).toBeVisible();
+ await wait(() => getByTestId('errorMessageMarkdown')); // wait for lazy markdown component
+ expect(getByText(/some error occurred/i)).toBeVisible();
 });
 
 test('ErrorEmbeddable renders an embeddable with markdown message', async () => {
  const error = '[some link](http://localhost:5601/takeMeThere)';
  const embeddable = new ErrorEmbeddable(error, { id: '123', title: 'Error' });
- const component = mount(<EmbeddableRoot embeddable={embeddable} />);
- expect(
- component.getDOMNode().querySelectorAll('[data-test-subj="embeddableStackError"]').length
- ).toBe(1);
- expect(
- component.getDOMNode().querySelectorAll('[data-test-subj="errorMessageMarkdown"]').length
- ).toBe(1);
- expect(
- component
- .getDOMNode()
- .querySelectorAll('[data-test-subj="errorMessageMarkdown"]')[0]
- .innerHTML.includes(
- '<a href="http://localhost:5601/takeMeThere" target="_blank" rel="noopener noreferrer">some link</a>'
- )
- ).toBe(true);
+ const { getByTestId, getByText } = render(<EmbeddableRoot embeddable={embeddable} />);
+
+ expect(getByTestId('embeddableStackError')).toBeVisible();
+ await wait(() => getByTestId('errorMessageMarkdown')); // wait for lazy markdown component
+ expect(getByText(/some link/i)).toMatchInlineSnapshot(`
+ <a
+ href="http://localhost:5601/takeMeThere"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ some link
+ </a>
+ `);
 });

src/plugins/kibana_react/public/code_editor/code_editor.tsx

@@ -186,3 +186,7 @@ export class CodeEditor extends React.Component<Props, {}> {
  }
  };
 }
+
+// React.lazy requires default export
+// eslint-disable-next-line import/no-default-export
+export default CodeEditor;

src/plugins/kibana_react/public/code_editor/index.tsx

@@ -17,11 +17,23 @@
  * under the License.
  */
 import React from 'react';
+import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
 import { useUiSetting } from '../ui_settings';
-import { CodeEditor as BaseEditor, Props } from './code_editor';
+import type { Props } from './code_editor';
+
+const LazyBaseEditor = React.lazy(() => import('./code_editor'));
+
+const Fallback = () => (
+ <EuiDelayRender>
+ <EuiLoadingContent lines={3} />
+ </EuiDelayRender>
+);
 
 export const CodeEditor: React.FunctionComponent<Props> = (props) => {
  const darkMode = useUiSetting<boolean>('theme:darkMode');
-
- return <BaseEditor {...props} useDarkTheme={darkMode} />;
+ return (
+ <React.Suspense fallback={<Fallback />}>
+ <LazyBaseEditor {...props} useDarkTheme={darkMode} />
+ </React.Suspense>
+ );
 };

src/plugins/kibana_react/public/markdown/index.tsx

@@ -17,5 +17,27 @@
  * under the License.
  */
 
-export { MarkdownSimple } from './markdown_simple';
-export { Markdown } from './markdown';
+import React from 'react';
+import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
+import type { MarkdownSimpleProps } from './markdown_simple';
+import type { MarkdownProps } from './markdown';
+
+const Fallback = () => (
+ <EuiDelayRender>
+ <EuiLoadingContent lines={3} />
+ </EuiDelayRender>
+);
+
+const LazyMarkdownSimple = React.lazy(() => import('./markdown_simple'));
+export const MarkdownSimple = (props: MarkdownSimpleProps) => (
+ <React.Suspense fallback={<Fallback />}>
+ <LazyMarkdownSimple {...props} />
+ </React.Suspense>
+);
+
+const LazyMarkdown = React.lazy(() => import('./markdown'));
+export const Markdown = (props: MarkdownProps) => (
+ <React.Suspense fallback={<Fallback />}>
+ <LazyMarkdown {...props} />
+ </React.Suspense>
+);

src/plugins/kibana_react/public/markdown/markdown.tsx

@@ -84,7 +84,7 @@ export const markdownFactory = memoize(
  }
 );
 
-interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  markdown?: string;
  openLinksInNewTab?: boolean;
@@ -112,3 +112,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
  );
  }
 }
+
+// Needed for React.lazy
+// eslint-disable-next-line import/no-default-export
+export default Markdown;

src/plugins/kibana_react/public/markdown/markdown_simple.tsx

@@ -24,11 +24,15 @@ const markdownRenderers = {
  root: Fragment,
 };
 
-interface MarkdownSimpleProps {
+export interface MarkdownSimpleProps {
  children: string;
 }
 
 // Render markdown string into JSX inside of a Fragment.
 export const MarkdownSimple = ({ children }: MarkdownSimpleProps) => (
  <ReactMarkdown renderers={markdownRenderers}>{children}</ReactMarkdown>
 );
+
+// Needed for React.lazy
+// eslint-disable-next-line import/no-default-export
+export default MarkdownSimple;

src/plugins/kibana_react/public/table_list_view/table_list_view.tsx

@@ -556,3 +556,6 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
 }
 
 export { TableListView };
+
+// eslint-disable-next-line import/no-default-export
+export default TableListView;

src/plugins/kibana_utils/public/history/redirect_when_missing.tsx

@@ -20,12 +20,19 @@
 import React, { Fragment } from 'react';
 import { History } from 'history';
 import { i18n } from '@kbn/i18n';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import ReactDOM from 'react-dom';
-import ReactMarkdown from 'react-markdown';
 
 import { ApplicationStart, HttpStart, ToastsSetup } from 'kibana/public';
 import { SavedObjectNotFound } from '..';
 
+const ReactMarkdown = React.lazy(() => import('react-markdown'));
+const ErrorRenderer = (props: { children: string }) => (
+ <React.Suspense fallback={<EuiLoadingSpinner />}>
+ <ReactMarkdown renderers={{ root: Fragment }} {...props} />
+ </React.Suspense>
+);
+
 interface Mapping {
  [key: string]: string | { app: string; path: string };
 }
@@ -96,16 +103,7 @@ export function redirectWhenMissing({
  defaultMessage: 'Saved object is missing',
  }),
  text: (element: HTMLElement) => {
- ReactDOM.render(
- <ReactMarkdown
- renderers={{
- root: Fragment,
- }}
- >
- {error.message}
- </ReactMarkdown>,
- element
- );
+ ReactDOM.render(<ErrorRenderer>{error.message}</ErrorRenderer>, element);
  return () => ReactDOM.unmountComponentAtNode(element);
  },
  });

src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx

@@ -18,11 +18,14 @@
  */
 
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { wait } from '@testing-library/dom';
+import { render, cleanup } from '@testing-library/react/pure';
 import { MarkdownVisWrapper } from './markdown_vis_controller';
 
+afterEach(cleanup);
+
 describe('markdown vis controller', () => {
- it('should set html from markdown params', () => {
+ it('should set html from markdown params', async () => {
  const vis = {
  params: {
  openLinksInNewTab: false,
@@ -32,13 +35,22 @@ describe('markdown vis controller', () => {
  },
  };
 
- const wrapper = render(
+ const { getByTestId, getByText } = render(
  <MarkdownVisWrapper visParams={vis.params} renderComplete={jest.fn()} fireEvent={jest.fn()} />
  );
- expect(wrapper.find('a').text()).toBe('markdown');
+
+ await wait(() => getByTestId('markdownBody'));
+
+ expect(getByText('markdown')).toMatchInlineSnapshot(`
+ <a
+ href="http://daringfireball.net/projects/markdown"
+ >
+ markdown
+ </a>
+ `);
  });
 
- it('should not render the html', () => {
+ it('should not render the html', async () => {
  const vis = {
  params: {
  openLinksInNewTab: false,
@@ -47,13 +59,20 @@ describe('markdown vis controller', () => {
  },
  };
 
- const wrapper = render(
+ const { getByTestId, getByText } = render(
  <MarkdownVisWrapper visParams={vis.params} renderComplete={jest.fn()} fireEvent={jest.fn()} />
  );
- expect(wrapper.text()).toBe('Testing <a>html</a>\n');
+
+ await wait(() => getByTestId('markdownBody'));
+
+ expect(getByText(/testing/i)).toMatchInlineSnapshot(`
+ <p>
+ Testing &lt;a&gt;html&lt;/a&gt;
+ </p>
+ `);
  });
 
- it('should update the HTML when render again with changed params', () => {
+ it('should update the HTML when render again with changed params', async () => {
  const vis = {
  params: {
  openLinksInNewTab: false,
@@ -62,13 +81,20 @@ describe('markdown vis controller', () => {
  },
  };
 
- const wrapper = mount(
+ const { getByTestId, getByText, rerender } = render(
  <MarkdownVisWrapper visParams={vis.params} renderComplete={jest.fn()} fireEvent={jest.fn()} />
  );
- expect(wrapper.text().trim()).toBe('Initial');
+
+ await wait(() => getByTestId('markdownBody'));
+
+ expect(getByText(/initial/i)).toBeInTheDocument();
+
  vis.params.markdown = 'Updated';
- wrapper.setProps({ vis });
- expect(wrapper.text().trim()).toBe('Updated');
+ rerender(
+ <MarkdownVisWrapper visParams={vis.params} renderComplete={jest.fn()} fireEvent={jest.fn()} />
+ );
+
+ expect(getByText(/Updated/i)).toBeInTheDocument();
  });
 
  describe('renderComplete', () => {
@@ -86,56 +112,71 @@ describe('markdown vis controller', () => {
  renderComplete.mockClear();
  });
 
- it('should be called on initial rendering', () => {
- mount(
+ it('should be called on initial rendering', async () => {
+ const { getByTestId } = render(
  <MarkdownVisWrapper
  visParams={vis.params}
  renderComplete={renderComplete}
  fireEvent={jest.fn()}
  />
  );
- expect(renderComplete.mock.calls.length).toBe(1);
+
+ await wait(() => getByTestId('markdownBody'));
+
+ expect(renderComplete).toHaveBeenCalledTimes(1);
  });
 
- it('should be called on successive render when params change', () => {
- mount(
+ it('should be called on successive render when params change', async () => {
+ const { getByTestId, rerender } = render(
  <MarkdownVisWrapper
  visParams={vis.params}
  renderComplete={renderComplete}
  fireEvent={jest.fn()}
  />
  );
- expect(renderComplete.mock.calls.length).toBe(1);
+
+ await wait(() => getByTestId('markdownBody'));
+
+ expect(renderComplete).toHaveBeenCalledTimes(1);
+
  renderComplete.mockClear();
  vis.params.markdown = 'changed';
- mount(
+
+ rerender(
  <MarkdownVisWrapper
  visParams={vis.params}
  renderComplete={renderComplete}
  fireEvent={jest.fn()}
  />
  );
- expect(renderComplete.mock.calls.length).toBe(1);
+
+ expect(renderComplete).toHaveBeenCalledTimes(1);
  });
 
- it('should be called on successive render even without data change', () => {
- mount(
+ it('should be called on successive render even without data change', async () => {
+ const { getByTestId, rerender } = render(
  <MarkdownVisWrapper
  visParams={vis.params}
  renderComplete={renderComplete}
  fireEvent={jest.fn()}
  />
  );
- expect(renderComplete.mock.calls.length).toBe(1);
+
+ await wait(() => getByTestId('markdownBody'));
+
+ expect(renderComplete).toHaveBeenCalledTimes(1);
+
  renderComplete.mockClear();
- mount(
+
+ rerender(
  <MarkdownVisWrapper
  visParams={vis.params}
  renderComplete={renderComplete}
  fireEvent={jest.fn()}
  />
  );
- expect(renderComplete.mock.calls.length).toBe(1);
+
+ expect(renderComplete).toHaveBeenCalledTimes(1);
  });
  });
 });