From 5b4e79fd381e270c614a2b4d8a6f4246ba8f403c Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint.hall@elastic.co>
Date: Fri, 31 Jul 2020 15:43:33 -0400
Subject: [PATCH] [Canvas][tech-debt] Update Redux components to reflect new
 structure (#73844) (#73967)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../embeddable_flyout/flyout.component.tsx    |  78 ++++++
 .../components/embeddable_flyout/flyout.tsx   | 160 +++++++-----
 .../components/embeddable_flyout/index.ts     |  11 +
 .../components/embeddable_flyout/index.tsx    | 113 --------
 .../public/components/page_manager/index.ts   |  27 +-
 ...manager.tsx => page_manager.component.tsx} |   0
 .../components/page_manager/page_manager.ts   |  31 +++
 .../public/components/page_preview/index.ts   |  20 +-
 ...preview.tsx => page_preview.component.tsx} |   0
 .../components/page_preview/page_preview.ts   |  24 ++
 .../saved_elements_modal.stories.tsx          |   2 +-
 .../components/saved_elements_modal/index.ts  | 132 +---------
 ...tsx => saved_elements_modal.component.tsx} |   0
 .../saved_elements_modal.ts                   | 136 ++++++++++
 .../element_settings.component.tsx            |  55 ++++
 .../element_settings/element_settings.tsx     |  63 ++---
 .../sidebar/element_settings/index.ts         |   8 +
 .../sidebar/element_settings/index.tsx        |  34 ---
 .../components/workpad_color_picker/index.ts  |  19 +-
 ...tsx => workpad_color_picker.component.tsx} |   0
 .../workpad_color_picker.ts                   |  23 ++
 .../public/components/workpad_config/index.ts |  39 +--
 ...onfig.tsx => workpad_config.component.tsx} |   0
 .../workpad_config/workpad_config.ts          |  43 ++++
 .../__examples__/edit_menu.stories.tsx        |   2 +-
 ...{edit_menu.tsx => edit_menu.component.tsx} |   0
 .../workpad_header/edit_menu/edit_menu.ts     | 133 ++++++++++
 .../workpad_header/edit_menu/index.ts         | 129 +---------
 .../__examples__/element_menu.stories.tsx     |   2 +-
 .../element_menu/element_menu.component.tsx   | 214 ++++++++++++++++
 .../element_menu/element_menu.tsx             | 241 +++---------------
 .../workpad_header/element_menu/index.ts      |   8 +
 .../workpad_header/element_menu/index.tsx     |  47 ----
 .../public/components/workpad_header/index.ts |   8 +
 .../components/workpad_header/index.tsx       |  46 ----
 .../workpad_header/refresh_control/index.ts   |  18 +-
 ...trol.tsx => refresh_control.component.tsx} |   0
 .../refresh_control/refresh_control.ts        |  22 ++
 .../__examples__/share_menu.stories.tsx       |   2 +-
 ..._flyout.stories.tsx => flyout.stories.tsx} |   2 +-
 ...ebsite_flyout.tsx => flyout.component.tsx} |   2 +-
 .../share_menu/flyout/flyout.ts               | 101 ++++++++
 .../workpad_header/share_menu/flyout/index.ts |  94 +------
 .../share_menu/flyout/runtime_step.tsx        |   2 +-
 .../share_menu/flyout/snippets_step.tsx       |   2 +-
 .../share_menu/flyout/workpad_step.tsx        |   2 +-
 .../workpad_header/share_menu/index.ts        |  94 +------
 ...hare_menu.tsx => share_menu.component.tsx} |   0
 .../workpad_header/share_menu/share_menu.ts   |  98 +++++++
 .../__examples__/view_menu.stories.tsx        |   2 +-
 .../workpad_header/view_menu/index.ts         |  96 +------
 ...{view_menu.tsx => view_menu.component.tsx} |   0
 .../workpad_header/view_menu/view_menu.ts     | 100 ++++++++
 .../workpad_header.component.tsx              | 150 +++++++++++
 .../workpad_header/workpad_header.tsx         | 174 +++----------
 .../canvas/storybook/storyshots.test.js       |   2 +-
 56 files changed, 1466 insertions(+), 1345 deletions(-)
 create mode 100644 x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx
 create mode 100644 x-pack/plugins/canvas/public/components/embeddable_flyout/index.ts
 delete mode 100644 x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx
 rename x-pack/plugins/canvas/public/components/page_manager/{page_manager.tsx => page_manager.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/page_manager/page_manager.ts
 rename x-pack/plugins/canvas/public/components/page_preview/{page_preview.tsx => page_preview.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/page_preview/page_preview.ts
 rename x-pack/plugins/canvas/public/components/saved_elements_modal/{saved_elements_modal.tsx => saved_elements_modal.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
 create mode 100644 x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx
 create mode 100644 x-pack/plugins/canvas/public/components/sidebar/element_settings/index.ts
 delete mode 100644 x-pack/plugins/canvas/public/components/sidebar/element_settings/index.tsx
 rename x-pack/plugins/canvas/public/components/workpad_color_picker/{workpad_color_picker.tsx => workpad_color_picker.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.ts
 rename x-pack/plugins/canvas/public/components/workpad_config/{workpad_config.tsx => workpad_config.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_config/workpad_config.ts
 rename x-pack/plugins/canvas/public/components/workpad_header/edit_menu/{edit_menu.tsx => edit_menu.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.ts
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.ts
 delete mode 100644 x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.tsx
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/index.ts
 delete mode 100644 x-pack/plugins/canvas/public/components/workpad_header/index.tsx
 rename x-pack/plugins/canvas/public/components/workpad_header/refresh_control/{refresh_control.tsx => refresh_control.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.ts
 rename x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__examples__/{share_website_flyout.stories.tsx => flyout.stories.tsx} (94%)
 rename x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/{share_website_flyout.tsx => flyout.component.tsx} (98%)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
 rename x-pack/plugins/canvas/public/components/workpad_header/share_menu/{share_menu.tsx => share_menu.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts
 rename x-pack/plugins/canvas/public/components/workpad_header/view_menu/{view_menu.tsx => view_menu.component.tsx} (100%)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx

diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx
new file mode 100644
index 00000000000000..0b5bd8adf8cb97
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
+import {
+  SavedObjectFinderUi,
+  SavedObjectMetaData,
+} from '../../../../../../src/plugins/saved_objects/public/';
+import { ComponentStrings } from '../../../i18n';
+import { useServices } from '../../services';
+
+const { AddEmbeddableFlyout: strings } = ComponentStrings;
+
+export interface Props {
+  onClose: () => void;
+  onSelect: (id: string, embeddableType: string) => void;
+  availableEmbeddables: string[];
+}
+
+export const AddEmbeddableFlyout: FC<Props> = ({ onSelect, availableEmbeddables, onClose }) => {
+  const services = useServices();
+  const { embeddables, platform } = services;
+  const { getEmbeddableFactories } = embeddables;
+  const { getSavedObjects, getUISettings } = platform;
+
+  const onAddPanel = (id: string, savedObjectType: string, name: string) => {
+    const embeddableFactories = getEmbeddableFactories();
+
+    // Find the embeddable type from the saved object type
+    const found = Array.from(embeddableFactories).find((embeddableFactory) => {
+      return Boolean(
+        embeddableFactory.savedObjectMetaData &&
+          embeddableFactory.savedObjectMetaData.type === savedObjectType
+      );
+    });
+
+    const foundEmbeddableType = found ? found.type : 'unknown';
+
+    onSelect(id, foundEmbeddableType);
+  };
+
+  const embeddableFactories = getEmbeddableFactories();
+
+  const availableSavedObjects = Array.from(embeddableFactories)
+    .filter((factory) => {
+      return availableEmbeddables.includes(factory.type);
+    })
+    .map((factory) => factory.savedObjectMetaData)
+    .filter<SavedObjectMetaData<{}>>(function (
+      maybeSavedObjectMetaData
+    ): maybeSavedObjectMetaData is SavedObjectMetaData<{}> {
+      return maybeSavedObjectMetaData !== undefined;
+    });
+
+  return (
+    <EuiFlyout ownFocus onClose={onClose} data-test-subj="dashboardAddPanel">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>{strings.getTitleText()}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <SavedObjectFinderUi
+          onChoose={onAddPanel}
+          savedObjectMetaData={availableSavedObjects}
+          showFilter={true}
+          noItemsMessage={strings.getNoItemsText()}
+          savedObjects={getSavedObjects()}
+          uiSettings={getUISettings()}
+        />
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};
diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx
index 0b5bd8adf8cb97..8c84e3d7a85d88 100644
--- a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx
+++ b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx
@@ -4,75 +4,107 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
-import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
-import {
-  SavedObjectFinderUi,
-  SavedObjectMetaData,
-} from '../../../../../../src/plugins/saved_objects/public/';
-import { ComponentStrings } from '../../../i18n';
-import { useServices } from '../../services';
-
-const { AddEmbeddableFlyout: strings } = ComponentStrings;
-
-export interface Props {
-  onClose: () => void;
-  onSelect: (id: string, embeddableType: string) => void;
-  availableEmbeddables: string[];
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { compose } from 'recompose';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { AddEmbeddableFlyout as Component, Props as ComponentProps } from './flyout.component';
+// @ts-expect-error untyped local
+import { addElement } from '../../state/actions/elements';
+import { getSelectedPage } from '../../state/selectors/workpad';
+import { EmbeddableTypes } from '../../../canvas_plugin_src/expression_types/embeddable';
+
+const allowedEmbeddables = {
+  [EmbeddableTypes.map]: (id: string) => {
+    return `savedMap id="${id}" | render`;
+  },
+  [EmbeddableTypes.lens]: (id: string) => {
+    return `savedLens id="${id}" | render`;
+  },
+  [EmbeddableTypes.visualization]: (id: string) => {
+    return `savedVisualization id="${id}" | render`;
+  },
+  /*
+  [EmbeddableTypes.search]: (id: string) => {
+    return `filters | savedSearch id="${id}" | render`;
+  },*/
+};
+
+interface StateProps {
+  pageId: string;
+}
+
+interface DispatchProps {
+  addEmbeddable: (pageId: string, partialElement: { expression: string }) => void;
 }
 
-export const AddEmbeddableFlyout: FC<Props> = ({ onSelect, availableEmbeddables, onClose }) => {
-  const services = useServices();
-  const { embeddables, platform } = services;
-  const { getEmbeddableFactories } = embeddables;
-  const { getSavedObjects, getUISettings } = platform;
+// FIX: Missing state type
+const mapStateToProps = (state: any) => ({ pageId: getSelectedPage(state) });
 
-  const onAddPanel = (id: string, savedObjectType: string, name: string) => {
-    const embeddableFactories = getEmbeddableFactories();
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+  addEmbeddable: (pageId, partialElement): DispatchProps['addEmbeddable'] =>
+    dispatch(addElement(pageId, partialElement)),
+});
 
-    // Find the embeddable type from the saved object type
-    const found = Array.from(embeddableFactories).find((embeddableFactory) => {
-      return Boolean(
-        embeddableFactory.savedObjectMetaData &&
-          embeddableFactory.savedObjectMetaData.type === savedObjectType
-      );
-    });
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: ComponentProps
+): ComponentProps => {
+  const { pageId, ...remainingStateProps } = stateProps;
+  const { addEmbeddable } = dispatchProps;
 
-    const foundEmbeddableType = found ? found.type : 'unknown';
+  return {
+    ...remainingStateProps,
+    ...ownProps,
+    onSelect: (id: string, type: string): void => {
+      const partialElement = {
+        expression: `markdown "Could not find embeddable for type ${type}" | render`,
+      };
+      if (allowedEmbeddables[type]) {
+        partialElement.expression = allowedEmbeddables[type](id);
+      }
 
-    onSelect(id, foundEmbeddableType);
+      addEmbeddable(pageId, partialElement);
+      ownProps.onClose();
+    },
   };
-
-  const embeddableFactories = getEmbeddableFactories();
-
-  const availableSavedObjects = Array.from(embeddableFactories)
-    .filter((factory) => {
-      return availableEmbeddables.includes(factory.type);
-    })
-    .map((factory) => factory.savedObjectMetaData)
-    .filter<SavedObjectMetaData<{}>>(function (
-      maybeSavedObjectMetaData
-    ): maybeSavedObjectMetaData is SavedObjectMetaData<{}> {
-      return maybeSavedObjectMetaData !== undefined;
-    });
-
-  return (
-    <EuiFlyout ownFocus onClose={onClose} data-test-subj="dashboardAddPanel">
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>{strings.getTitleText()}</h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <SavedObjectFinderUi
-          onChoose={onAddPanel}
-          savedObjectMetaData={availableSavedObjects}
-          showFilter={true}
-          noItemsMessage={strings.getNoItemsText()}
-          savedObjects={getSavedObjects()}
-          uiSettings={getUISettings()}
-        />
-      </EuiFlyoutBody>
-    </EuiFlyout>
-  );
 };
+
+export class EmbeddableFlyoutPortal extends React.Component<ComponentProps> {
+  el?: HTMLElement;
+
+  constructor(props: ComponentProps) {
+    super(props);
+
+    this.el = document.createElement('div');
+  }
+  componentDidMount() {
+    const body = document.querySelector('body');
+    if (body && this.el) {
+      body.appendChild(this.el);
+    }
+  }
+
+  componentWillUnmount() {
+    const body = document.querySelector('body');
+
+    if (body && this.el) {
+      body.removeChild(this.el);
+    }
+  }
+
+  render() {
+    if (this.el) {
+      return ReactDOM.createPortal(
+        <Component {...this.props} availableEmbeddables={Object.keys(allowedEmbeddables)} />,
+        this.el
+      );
+    }
+  }
+}
+
+export const AddEmbeddablePanel = compose<ComponentProps, { onClose: () => void }>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(EmbeddableFlyoutPortal);
diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/index.ts b/x-pack/plugins/canvas/public/components/embeddable_flyout/index.ts
new file mode 100644
index 00000000000000..a7fac10b0c02dd
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/embeddable_flyout/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { EmbeddableFlyoutPortal, AddEmbeddablePanel } from './flyout';
+export {
+  AddEmbeddableFlyout as AddEmbeddableFlyoutComponent,
+  Props as AddEmbeddableFlyoutComponentProps,
+} from './flyout.component';
diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx b/x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx
deleted file mode 100644
index 62a073daf4c59d..00000000000000
--- a/x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx
+++ /dev/null
@@ -1,113 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { compose } from 'recompose';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { AddEmbeddableFlyout, Props } from './flyout';
-// @ts-expect-error untyped local
-import { addElement } from '../../state/actions/elements';
-import { getSelectedPage } from '../../state/selectors/workpad';
-import { EmbeddableTypes } from '../../../canvas_plugin_src/expression_types/embeddable';
-
-const allowedEmbeddables = {
-  [EmbeddableTypes.map]: (id: string) => {
-    return `savedMap id="${id}" | render`;
-  },
-  [EmbeddableTypes.lens]: (id: string) => {
-    return `savedLens id="${id}" | render`;
-  },
-  [EmbeddableTypes.visualization]: (id: string) => {
-    return `savedVisualization id="${id}" | render`;
-  },
-  /*
-  [EmbeddableTypes.search]: (id: string) => {
-    return `filters | savedSearch id="${id}" | render`;
-  },*/
-};
-
-interface StateProps {
-  pageId: string;
-}
-
-interface DispatchProps {
-  addEmbeddable: (pageId: string, partialElement: { expression: string }) => void;
-}
-
-// FIX: Missing state type
-const mapStateToProps = (state: any) => ({ pageId: getSelectedPage(state) });
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-  addEmbeddable: (pageId, partialElement): DispatchProps['addEmbeddable'] =>
-    dispatch(addElement(pageId, partialElement)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: Props
-): Props => {
-  const { pageId, ...remainingStateProps } = stateProps;
-  const { addEmbeddable } = dispatchProps;
-
-  return {
-    ...remainingStateProps,
-    ...ownProps,
-    onSelect: (id: string, type: string): void => {
-      const partialElement = {
-        expression: `markdown "Could not find embeddable for type ${type}" | render`,
-      };
-      if (allowedEmbeddables[type]) {
-        partialElement.expression = allowedEmbeddables[type](id);
-      }
-
-      addEmbeddable(pageId, partialElement);
-      ownProps.onClose();
-    },
-  };
-};
-
-export class EmbeddableFlyoutPortal extends React.Component<Props> {
-  el?: HTMLElement;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.el = document.createElement('div');
-  }
-  componentDidMount() {
-    const body = document.querySelector('body');
-    if (body && this.el) {
-      body.appendChild(this.el);
-    }
-  }
-
-  componentWillUnmount() {
-    const body = document.querySelector('body');
-
-    if (body && this.el) {
-      body.removeChild(this.el);
-    }
-  }
-
-  render() {
-    if (this.el) {
-      return ReactDOM.createPortal(
-        <AddEmbeddableFlyout
-          {...this.props}
-          availableEmbeddables={Object.keys(allowedEmbeddables)}
-        />,
-        this.el
-      );
-    }
-  }
-}
-
-export const AddEmbeddablePanel = compose<Props, { onClose: () => void }>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)
-)(EmbeddableFlyoutPortal);
diff --git a/x-pack/plugins/canvas/public/components/page_manager/index.ts b/x-pack/plugins/canvas/public/components/page_manager/index.ts
index d19540cd6a6877..abe7a4a3a5bb15 100644
--- a/x-pack/plugins/canvas/public/components/page_manager/index.ts
+++ b/x-pack/plugins/canvas/public/components/page_manager/index.ts
@@ -4,28 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Dispatch } from 'redux';
-import { connect } from 'react-redux';
-// @ts-expect-error untyped local
-import * as pageActions from '../../state/actions/pages';
-import { canUserWrite } from '../../state/selectors/app';
-import { getSelectedPage, getWorkpad, getPages, isWriteable } from '../../state/selectors/workpad';
-import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
-import { PageManager as Component } from './page_manager';
-import { State } from '../../../types';
-
-const mapStateToProps = (state: State) => ({
-  isWriteable: isWriteable(state) && canUserWrite(state),
-  pages: getPages(state),
-  selectedPage: getSelectedPage(state),
-  workpadId: getWorkpad(state).id,
-  workpadCSS: getWorkpad(state).css || DEFAULT_WORKPAD_CSS,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onAddPage: () => dispatch(pageActions.addPage()),
-  onMovePage: (id: string, position: number) => dispatch(pageActions.movePage(id, position)),
-  onRemovePage: (id: string) => dispatch(pageActions.removePage(id)),
-});
-
-export const PageManager = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { PageManager } from './page_manager';
+export { PageManager as PageManagerComponent } from './page_manager.component';
diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx
rename to x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.ts b/x-pack/plugins/canvas/public/components/page_manager/page_manager.ts
new file mode 100644
index 00000000000000..a92f7c6b4c3528
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/page_manager/page_manager.ts
@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+// @ts-expect-error untyped local
+import * as pageActions from '../../state/actions/pages';
+import { canUserWrite } from '../../state/selectors/app';
+import { getSelectedPage, getWorkpad, getPages, isWriteable } from '../../state/selectors/workpad';
+import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
+import { PageManager as Component } from './page_manager.component';
+import { State } from '../../../types';
+
+const mapStateToProps = (state: State) => ({
+  isWriteable: isWriteable(state) && canUserWrite(state),
+  pages: getPages(state),
+  selectedPage: getSelectedPage(state),
+  workpadId: getWorkpad(state).id,
+  workpadCSS: getWorkpad(state).css || DEFAULT_WORKPAD_CSS,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onAddPage: () => dispatch(pageActions.addPage()),
+  onMovePage: (id: string, position: number) => dispatch(pageActions.movePage(id, position)),
+  onRemovePage: (id: string) => dispatch(pageActions.removePage(id)),
+});
+
+export const PageManager = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/page_preview/index.ts b/x-pack/plugins/canvas/public/components/page_preview/index.ts
index 25d3254595d2ec..22e3861eb9652f 100644
--- a/x-pack/plugins/canvas/public/components/page_preview/index.ts
+++ b/x-pack/plugins/canvas/public/components/page_preview/index.ts
@@ -4,21 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Dispatch } from 'redux';
-import { connect } from 'react-redux';
-// @ts-expect-error untyped local
-import * as pageActions from '../../state/actions/pages';
-import { canUserWrite } from '../../state/selectors/app';
-import { isWriteable } from '../../state/selectors/workpad';
-import { PagePreview as Component } from './page_preview';
-import { State } from '../../../types';
-
-const mapStateToProps = (state: State) => ({
-  isWriteable: isWriteable(state) && canUserWrite(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onDuplicate: (id: string) => dispatch(pageActions.duplicatePage(id)),
-});
-
-export const PagePreview = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { PagePreview } from './page_preview';
+export { PagePreview as PagePreviewComponent } from './page_preview.component';
diff --git a/x-pack/plugins/canvas/public/components/page_preview/page_preview.tsx b/x-pack/plugins/canvas/public/components/page_preview/page_preview.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/page_preview/page_preview.tsx
rename to x-pack/plugins/canvas/public/components/page_preview/page_preview.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/page_preview/page_preview.ts b/x-pack/plugins/canvas/public/components/page_preview/page_preview.ts
new file mode 100644
index 00000000000000..8768a2fc169ef4
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/page_preview/page_preview.ts
@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+// @ts-expect-error untyped local
+import * as pageActions from '../../state/actions/pages';
+import { canUserWrite } from '../../state/selectors/app';
+import { isWriteable } from '../../state/selectors/workpad';
+import { PagePreview as Component } from './page_preview.component';
+import { State } from '../../../types';
+
+const mapStateToProps = (state: State) => ({
+  isWriteable: isWriteable(state) && canUserWrite(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onDuplicate: (id: string) => dispatch(pageActions.duplicatePage(id)),
+});
+
+export const PagePreview = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/saved_elements_modal.stories.tsx b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/saved_elements_modal.stories.tsx
index 4941d8cb2efa78..a811a296f2e7b9 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/saved_elements_modal.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/saved_elements_modal.stories.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { SavedElementsModal } from '../saved_elements_modal';
+import { SavedElementsModal } from '../saved_elements_modal.component';
 import { testCustomElements } from './fixtures/test_elements';
 import { CustomElement } from '../../../../types';
 
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts b/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts
index da2955c1461939..46faf8d14f9b5b 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts
@@ -4,130 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { compose, withState } from 'recompose';
-import { camelCase } from 'lodash';
-import { cloneSubgraphs } from '../../lib/clone_subgraphs';
-import * as customElementService from '../../lib/custom_element_service';
-import { withServices, WithServicesProps } from '../../services';
-// @ts-expect-error untyped local
-import { selectToplevelNodes } from '../../state/actions/transient';
-// @ts-expect-error untyped local
-import { insertNodes } from '../../state/actions/elements';
-import { getSelectedPage } from '../../state/selectors/workpad';
-import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric';
-import { SavedElementsModal as Component, Props as ComponentProps } from './saved_elements_modal';
-import { State, PositionedElement, CustomElement } from '../../../types';
-
-const customElementAdded = 'elements-custom-added';
-
-interface OwnProps {
-  onClose: () => void;
-}
-
-interface OwnPropsWithState extends OwnProps {
-  customElements: CustomElement[];
-  setCustomElements: (customElements: CustomElement[]) => void;
-  search: string;
-  setSearch: (search: string) => void;
-}
-
-interface DispatchProps {
-  selectToplevelNodes: (nodes: PositionedElement[]) => void;
-  insertNodes: (selectedNodes: PositionedElement[], pageId: string) => void;
-}
-
-interface StateProps {
-  pageId: string;
-}
-
-const mapStateToProps = (state: State): StateProps => ({
-  pageId: getSelectedPage(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-  selectToplevelNodes: (nodes: PositionedElement[]) =>
-    dispatch(
-      selectToplevelNodes(
-        nodes
-          .filter((e: PositionedElement): boolean => !e.position.parent)
-          .map((e: PositionedElement): string => e.id)
-      )
-    ),
-  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
-    dispatch(insertNodes(selectedNodes, pageId)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: OwnPropsWithState & WithServicesProps
-): ComponentProps => {
-  const { pageId } = stateProps;
-  const { onClose, search, setCustomElements } = ownProps;
-
-  const findCustomElements = async () => {
-    const { customElements } = await customElementService.find(search);
-    setCustomElements(customElements);
-  };
-
-  return {
-    ...ownProps,
-    // add custom element to the page
-    addCustomElement: (customElement: CustomElement) => {
-      const { selectedNodes = [] } = JSON.parse(customElement.content) || {};
-      const clonedNodes = selectedNodes && cloneSubgraphs(selectedNodes);
-      if (clonedNodes) {
-        dispatchProps.insertNodes(clonedNodes, pageId); // first clone and persist the new node(s)
-        dispatchProps.selectToplevelNodes(clonedNodes); // then select the cloned node(s)
-      }
-      onClose();
-      trackCanvasUiMetric(METRIC_TYPE.LOADED, customElementAdded);
-    },
-    // custom element search
-    findCustomElements: async (text?: string) => {
-      try {
-        await findCustomElements();
-      } catch (err) {
-        ownProps.services.notify.error(err, {
-          title: `Couldn't find custom elements`,
-        });
-      }
-    },
-    // remove custom element
-    removeCustomElement: async (id: string) => {
-      try {
-        await customElementService.remove(id);
-        await findCustomElements();
-      } catch (err) {
-        ownProps.services.notify.error(err, {
-          title: `Couldn't delete custom elements`,
-        });
-      }
-    },
-    // update custom element
-    updateCustomElement: async (id: string, name: string, description: string, image: string) => {
-      try {
-        await customElementService.update(id, {
-          name: camelCase(name),
-          displayName: name,
-          image,
-          help: description,
-        });
-        await findCustomElements();
-      } catch (err) {
-        ownProps.services.notify.error(err, {
-          title: `Couldn't update custom elements`,
-        });
-      }
-    },
-  };
-};
-
-export const SavedElementsModal = compose<ComponentProps, OwnProps>(
-  withServices,
-  withState('search', 'setSearch', ''),
-  withState('customElements', 'setCustomElements', []),
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)
-)(Component);
+export { SavedElementsModal } from './saved_elements_modal';
+export {
+  SavedElementsModal as SavedElementsModalComponent,
+  Props as SavedElementsModalComponentProps,
+} from './saved_elements_modal.component';
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx
rename to x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
new file mode 100644
index 00000000000000..a5c5a2e0adce98
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
@@ -0,0 +1,136 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { compose, withState } from 'recompose';
+import { camelCase } from 'lodash';
+import { cloneSubgraphs } from '../../lib/clone_subgraphs';
+import * as customElementService from '../../lib/custom_element_service';
+import { withServices, WithServicesProps } from '../../services';
+// @ts-expect-error untyped local
+import { selectToplevelNodes } from '../../state/actions/transient';
+// @ts-expect-error untyped local
+import { insertNodes } from '../../state/actions/elements';
+import { getSelectedPage } from '../../state/selectors/workpad';
+import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric';
+import {
+  SavedElementsModal as Component,
+  Props as ComponentProps,
+} from './saved_elements_modal.component';
+import { State, PositionedElement, CustomElement } from '../../../types';
+
+const customElementAdded = 'elements-custom-added';
+
+interface OwnProps {
+  onClose: () => void;
+}
+
+interface OwnPropsWithState extends OwnProps {
+  customElements: CustomElement[];
+  setCustomElements: (customElements: CustomElement[]) => void;
+  search: string;
+  setSearch: (search: string) => void;
+}
+
+interface DispatchProps {
+  selectToplevelNodes: (nodes: PositionedElement[]) => void;
+  insertNodes: (selectedNodes: PositionedElement[], pageId: string) => void;
+}
+
+interface StateProps {
+  pageId: string;
+}
+
+const mapStateToProps = (state: State): StateProps => ({
+  pageId: getSelectedPage(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+  selectToplevelNodes: (nodes: PositionedElement[]) =>
+    dispatch(
+      selectToplevelNodes(
+        nodes
+          .filter((e: PositionedElement): boolean => !e.position.parent)
+          .map((e: PositionedElement): string => e.id)
+      )
+    ),
+  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
+    dispatch(insertNodes(selectedNodes, pageId)),
+});
+
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: OwnPropsWithState & WithServicesProps
+): ComponentProps => {
+  const { pageId } = stateProps;
+  const { onClose, search, setCustomElements } = ownProps;
+
+  const findCustomElements = async () => {
+    const { customElements } = await customElementService.find(search);
+    setCustomElements(customElements);
+  };
+
+  return {
+    ...ownProps,
+    // add custom element to the page
+    addCustomElement: (customElement: CustomElement) => {
+      const { selectedNodes = [] } = JSON.parse(customElement.content) || {};
+      const clonedNodes = selectedNodes && cloneSubgraphs(selectedNodes);
+      if (clonedNodes) {
+        dispatchProps.insertNodes(clonedNodes, pageId); // first clone and persist the new node(s)
+        dispatchProps.selectToplevelNodes(clonedNodes); // then select the cloned node(s)
+      }
+      onClose();
+      trackCanvasUiMetric(METRIC_TYPE.LOADED, customElementAdded);
+    },
+    // custom element search
+    findCustomElements: async (text?: string) => {
+      try {
+        await findCustomElements();
+      } catch (err) {
+        ownProps.services.notify.error(err, {
+          title: `Couldn't find custom elements`,
+        });
+      }
+    },
+    // remove custom element
+    removeCustomElement: async (id: string) => {
+      try {
+        await customElementService.remove(id);
+        await findCustomElements();
+      } catch (err) {
+        ownProps.services.notify.error(err, {
+          title: `Couldn't delete custom elements`,
+        });
+      }
+    },
+    // update custom element
+    updateCustomElement: async (id: string, name: string, description: string, image: string) => {
+      try {
+        await customElementService.update(id, {
+          name: camelCase(name),
+          displayName: name,
+          image,
+          help: description,
+        });
+        await findCustomElements();
+      } catch (err) {
+        ownProps.services.notify.error(err, {
+          title: `Couldn't update custom elements`,
+        });
+      }
+    },
+  };
+};
+
+export const SavedElementsModal = compose<ComponentProps, OwnProps>(
+  withServices,
+  withState('search', 'setSearch', ''),
+  withState('customElements', 'setCustomElements', []),
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx
new file mode 100644
index 00000000000000..e3f4e00f4de019
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import { EuiTabbedContent } from '@elastic/eui';
+// @ts-expect-error unconverted component
+import { Datasource } from '../../datasource';
+// @ts-expect-error unconverted component
+import { FunctionFormList } from '../../function_form_list';
+import { PositionedElement } from '../../../../types';
+import { ComponentStrings } from '../../../../i18n';
+
+interface Props {
+  /**
+   * a Canvas element used to populate config forms
+   */
+  element: PositionedElement;
+}
+
+const { ElementSettings: strings } = ComponentStrings;
+
+export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
+  const tabs = [
+    {
+      id: 'edit',
+      name: strings.getDisplayTabLabel(),
+      content: (
+        <div className="canvasSidebar__pop">
+          <div className="canvasSidebar--args">
+            <FunctionFormList element={element} />
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'data',
+      name: strings.getDataTabLabel(),
+      content: (
+        <div className="canvasSidebar__pop">
+          <Datasource />
+        </div>
+      ),
+    },
+  ];
+
+  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} size="s" />;
+};
+
+ElementSettings.propTypes = {
+  element: PropTypes.object,
+};
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
index e3f4e00f4de019..ba7e31a25dabac 100644
--- a/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
+++ b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
@@ -3,53 +3,32 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
-import { EuiTabbedContent } from '@elastic/eui';
-// @ts-expect-error unconverted component
-import { Datasource } from '../../datasource';
-// @ts-expect-error unconverted component
-import { FunctionFormList } from '../../function_form_list';
-import { PositionedElement } from '../../../../types';
-import { ComponentStrings } from '../../../../i18n';
+import React from 'react';
+import { connect } from 'react-redux';
+import { getElementById, getSelectedPage } from '../../../state/selectors/workpad';
+import { ElementSettings as Component } from './element_settings.component';
+import { State, PositionedElement } from '../../../../types';
 
 interface Props {
-  /**
-   * a Canvas element used to populate config forms
-   */
-  element: PositionedElement;
+  selectedElementId: string;
 }
 
-const { ElementSettings: strings } = ComponentStrings;
+const mapStateToProps = (state: State, { selectedElementId }: Props): StateProps => ({
+  element: getElementById(state, selectedElementId, getSelectedPage(state)),
+});
+
+interface StateProps {
+  element: PositionedElement | undefined;
+}
 
-export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
-  const tabs = [
-    {
-      id: 'edit',
-      name: strings.getDisplayTabLabel(),
-      content: (
-        <div className="canvasSidebar__pop">
-          <div className="canvasSidebar--args">
-            <FunctionFormList element={element} />
-          </div>
-        </div>
-      ),
-    },
-    {
-      id: 'data',
-      name: strings.getDataTabLabel(),
-      content: (
-        <div className="canvasSidebar__pop">
-          <Datasource />
-        </div>
-      ),
-    },
-  ];
+const renderIfElement: React.FunctionComponent<StateProps> = (props) => {
+  if (props.element) {
+    return <Component element={props.element} />;
+  }
 
-  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} size="s" />;
+  return null;
 };
 
-ElementSettings.propTypes = {
-  element: PropTypes.object,
-};
+export const ElementSettings = connect<StateProps, {}, Props, State>(mapStateToProps)(
+  renderIfElement
+);
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.ts b/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.ts
new file mode 100644
index 00000000000000..68b90f232fb8b3
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ElementSettings } from './element_settings';
+export { ElementSettings as ElementSettingsComponent } from './element_settings.component';
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.tsx b/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.tsx
deleted file mode 100644
index b8d5882234899b..00000000000000
--- a/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.tsx
+++ /dev/null
@@ -1,34 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-import React from 'react';
-import { connect } from 'react-redux';
-import { getElementById, getSelectedPage } from '../../../state/selectors/workpad';
-import { ElementSettings as Component } from './element_settings';
-import { State, PositionedElement } from '../../../../types';
-
-interface Props {
-  selectedElementId: string;
-}
-
-const mapStateToProps = (state: State, { selectedElementId }: Props): StateProps => ({
-  element: getElementById(state, selectedElementId, getSelectedPage(state)),
-});
-
-interface StateProps {
-  element: PositionedElement | undefined;
-}
-
-const renderIfElement: React.FunctionComponent<StateProps> = (props) => {
-  if (props.element) {
-    return <Component element={props.element} />;
-  }
-
-  return null;
-};
-
-export const ElementSettings = connect<StateProps, {}, Props, State>(mapStateToProps)(
-  renderIfElement
-);
diff --git a/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts b/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts
index abd40731078ec0..34e3d3ff4b0578 100644
--- a/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts
@@ -4,20 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { addColor, removeColor } from '../../state/actions/workpad';
-import { getWorkpadColors } from '../../state/selectors/workpad';
-
-import { WorkpadColorPicker as Component } from '../workpad_color_picker/workpad_color_picker';
-import { State } from '../../../types';
-
-const mapStateToProps = (state: State) => ({
-  colors: getWorkpadColors(state),
-});
-
-const mapDispatchToProps = {
-  onAddColor: addColor,
-  onRemoveColor: removeColor,
-};
-
-export const WorkpadColorPicker = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { WorkpadColorPicker } from './workpad_color_picker';
+export { WorkpadColorPicker as WorkpadColorPickerComponent } from './workpad_color_picker.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx b/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx
rename to x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.ts b/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.ts
new file mode 100644
index 00000000000000..2f4b0fe7b4ec13
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { addColor, removeColor } from '../../state/actions/workpad';
+import { getWorkpadColors } from '../../state/selectors/workpad';
+
+import { WorkpadColorPicker as Component } from '../workpad_color_picker/workpad_color_picker.component';
+import { State } from '../../../types';
+
+const mapStateToProps = (state: State) => ({
+  colors: getWorkpadColors(state),
+});
+
+const mapDispatchToProps = {
+  onAddColor: addColor,
+  onRemoveColor: removeColor,
+};
+
+export const WorkpadColorPicker = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_config/index.ts b/x-pack/plugins/canvas/public/components/workpad_config/index.ts
index bba08d7647e9ec..63db96ca5aef9d 100644
--- a/x-pack/plugins/canvas/public/components/workpad_config/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_config/index.ts
@@ -4,40 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-
-import { get } from 'lodash';
-import {
-  sizeWorkpad as setSize,
-  setName,
-  setWorkpadCSS,
-  updateWorkpadVariables,
-} from '../../state/actions/workpad';
-
-import { getWorkpad } from '../../state/selectors/workpad';
-import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
-import { WorkpadConfig as Component } from './workpad_config';
-import { State, CanvasVariable } from '../../../types';
-
-const mapStateToProps = (state: State) => {
-  const workpad = getWorkpad(state);
-
-  return {
-    name: get(workpad, 'name'),
-    size: {
-      width: get(workpad, 'width'),
-      height: get(workpad, 'height'),
-    },
-    css: get(workpad, 'css', DEFAULT_WORKPAD_CSS),
-    variables: get(workpad, 'variables', []),
-  };
-};
-
-const mapDispatchToProps = {
-  setSize,
-  setName,
-  setWorkpadCSS,
-  setWorkpadVariables: (vars: CanvasVariable[]) => updateWorkpadVariables(vars),
-};
-
-export const WorkpadConfig = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { WorkpadConfig } from './workpad_config';
+export { WorkpadConfig as WorkpadConfigComponent } from './workpad_config.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.tsx b/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_config/workpad_config.tsx
rename to x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.ts b/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.ts
new file mode 100644
index 00000000000000..e4ddf311419725
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+
+import { get } from 'lodash';
+import {
+  sizeWorkpad as setSize,
+  setName,
+  setWorkpadCSS,
+  updateWorkpadVariables,
+} from '../../state/actions/workpad';
+
+import { getWorkpad } from '../../state/selectors/workpad';
+import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
+import { WorkpadConfig as Component } from './workpad_config.component';
+import { State, CanvasVariable } from '../../../types';
+
+const mapStateToProps = (state: State) => {
+  const workpad = getWorkpad(state);
+
+  return {
+    name: get(workpad, 'name'),
+    size: {
+      width: get(workpad, 'width'),
+      height: get(workpad, 'height'),
+    },
+    css: get(workpad, 'css', DEFAULT_WORKPAD_CSS),
+    variables: get(workpad, 'variables', []),
+  };
+};
+
+const mapDispatchToProps = {
+  setSize,
+  setName,
+  setWorkpadCSS,
+  setWorkpadVariables: (vars: CanvasVariable[]) => updateWorkpadVariables(vars),
+};
+
+export const WorkpadConfig = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.stories.tsx
index 8bbc3e09af4bf8..be6247b0bbcab3 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { EditMenu } from '../edit_menu';
+import { EditMenu } from '../edit_menu.component';
 import { PositionedElement } from '../../../../../types';
 
 const handlers = {
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.ts b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.ts
new file mode 100644
index 00000000000000..3a2264c05eb4ba
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { compose, withHandlers, withProps } from 'recompose';
+import { Dispatch } from 'redux';
+import { State, PositionedElement } from '../../../../types';
+import { getClipboardData } from '../../../lib/clipboard';
+// @ts-expect-error untyped local
+import { flatten } from '../../../lib/aeroelastic/functional';
+// @ts-expect-error untyped local
+import { globalStateUpdater } from '../../workpad_page/integration_utils';
+// @ts-expect-error untyped local
+import { crawlTree } from '../../workpad_page/integration_utils';
+// @ts-expect-error untyped local
+import { insertNodes, elementLayer, removeElements } from '../../../state/actions/elements';
+// @ts-expect-error untyped local
+import { undoHistory, redoHistory } from '../../../state/actions/history';
+// @ts-expect-error untyped local
+import { selectToplevelNodes } from '../../../state/actions/transient';
+import {
+  getSelectedPage,
+  getNodes,
+  getSelectedToplevelNodes,
+} from '../../../state/selectors/workpad';
+import {
+  layerHandlerCreators,
+  clipboardHandlerCreators,
+  basicHandlerCreators,
+  groupHandlerCreators,
+  alignmentDistributionHandlerCreators,
+} from '../../../lib/element_handler_creators';
+import { EditMenu as Component, Props as ComponentProps } from './edit_menu.component';
+
+type LayoutState = any;
+
+type CommitFn = (type: string, payload: any) => LayoutState;
+
+interface OwnProps {
+  commit: CommitFn;
+}
+
+const withGlobalState = (
+  commit: CommitFn,
+  updateGlobalState: (layoutState: LayoutState) => void
+) => (type: string, payload: any) => {
+  const newLayoutState = commit(type, payload);
+  if (newLayoutState.currentScene.gestureEnd) {
+    updateGlobalState(newLayoutState);
+  }
+};
+
+/*
+ * TODO: this is all copied from interactive_workpad_page and workpad_shortcuts
+ */
+const mapStateToProps = (state: State) => {
+  const pageId = getSelectedPage(state);
+  const nodes = getNodes(state, pageId) as PositionedElement[];
+  const selectedToplevelNodes = getSelectedToplevelNodes(state);
+
+  const selectedPrimaryShapeObjects = selectedToplevelNodes
+    .map((id: string) => nodes.find((s: PositionedElement) => s.id === id))
+    .filter((shape?: PositionedElement) => shape) as PositionedElement[];
+
+  const selectedPersistentPrimaryNodes = flatten(
+    selectedPrimaryShapeObjects.map((shape: PositionedElement) =>
+      nodes.find((n: PositionedElement) => n.id === shape.id) // is it a leaf or a persisted group?
+        ? [shape.id]
+        : nodes.filter((s: PositionedElement) => s.position.parent === shape.id).map((s) => s.id)
+    )
+  );
+
+  const selectedNodeIds: string[] = flatten(selectedPersistentPrimaryNodes.map(crawlTree(nodes)));
+  const selectedNodes = selectedNodeIds
+    .map((id: string) => nodes.find((s) => s.id === id))
+    .filter((node: PositionedElement | undefined): node is PositionedElement => {
+      return !!node;
+    });
+
+  return {
+    pageId,
+    selectedToplevelNodes,
+    selectedNodes,
+    state,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
+    dispatch(insertNodes(selectedNodes, pageId)),
+  removeNodes: (nodeIds: string[], pageId: string) => dispatch(removeElements(nodeIds, pageId)),
+  selectToplevelNodes: (nodes: PositionedElement[]) =>
+    dispatch(
+      selectToplevelNodes(
+        nodes.filter((e: PositionedElement) => !e.position.parent).map((e) => e.id)
+      )
+    ),
+  elementLayer: (pageId: string, elementId: string, movement: number) => {
+    dispatch(elementLayer({ pageId, elementId, movement }));
+  },
+  undoHistory: () => dispatch(undoHistory()),
+  redoHistory: () => dispatch(redoHistory()),
+  dispatch,
+});
+
+const mergeProps = (
+  { state, selectedToplevelNodes, ...restStateProps }: ReturnType<typeof mapStateToProps>,
+  { dispatch, ...restDispatchProps }: ReturnType<typeof mapDispatchToProps>,
+  { commit }: OwnProps
+) => {
+  const updateGlobalState = globalStateUpdater(dispatch, state);
+
+  return {
+    ...restDispatchProps,
+    ...restStateProps,
+    commit: withGlobalState(commit, updateGlobalState),
+    groupIsSelected:
+      selectedToplevelNodes.length === 1 && selectedToplevelNodes[0].includes('group'),
+  };
+};
+
+export const EditMenu = compose<ComponentProps, OwnProps>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  withProps(() => ({ hasPasteData: Boolean(getClipboardData()) })),
+  withHandlers(basicHandlerCreators),
+  withHandlers(clipboardHandlerCreators),
+  withHandlers(layerHandlerCreators),
+  withHandlers(groupHandlerCreators),
+  withHandlers(alignmentDistributionHandlerCreators)
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts
index 8f013f70aefcd8..0db425f01cccd3 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts
@@ -4,130 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withHandlers, withProps } from 'recompose';
-import { Dispatch } from 'redux';
-import { State, PositionedElement } from '../../../../types';
-import { getClipboardData } from '../../../lib/clipboard';
-// @ts-expect-error untyped local
-import { flatten } from '../../../lib/aeroelastic/functional';
-// @ts-expect-error untyped local
-import { globalStateUpdater } from '../../workpad_page/integration_utils';
-// @ts-expect-error untyped local
-import { crawlTree } from '../../workpad_page/integration_utils';
-// @ts-expect-error untyped local
-import { insertNodes, elementLayer, removeElements } from '../../../state/actions/elements';
-// @ts-expect-error untyped local
-import { undoHistory, redoHistory } from '../../../state/actions/history';
-// @ts-expect-error untyped local
-import { selectToplevelNodes } from '../../../state/actions/transient';
-import {
-  getSelectedPage,
-  getNodes,
-  getSelectedToplevelNodes,
-} from '../../../state/selectors/workpad';
-import {
-  layerHandlerCreators,
-  clipboardHandlerCreators,
-  basicHandlerCreators,
-  groupHandlerCreators,
-  alignmentDistributionHandlerCreators,
-} from '../../../lib/element_handler_creators';
-import { EditMenu as Component, Props as ComponentProps } from './edit_menu';
-
-type LayoutState = any;
-
-type CommitFn = (type: string, payload: any) => LayoutState;
-
-interface OwnProps {
-  commit: CommitFn;
-}
-
-const withGlobalState = (
-  commit: CommitFn,
-  updateGlobalState: (layoutState: LayoutState) => void
-) => (type: string, payload: any) => {
-  const newLayoutState = commit(type, payload);
-  if (newLayoutState.currentScene.gestureEnd) {
-    updateGlobalState(newLayoutState);
-  }
-};
-
-/*
- * TODO: this is all copied from interactive_workpad_page and workpad_shortcuts
- */
-const mapStateToProps = (state: State) => {
-  const pageId = getSelectedPage(state);
-  const nodes = getNodes(state, pageId) as PositionedElement[];
-  const selectedToplevelNodes = getSelectedToplevelNodes(state);
-
-  const selectedPrimaryShapeObjects = selectedToplevelNodes
-    .map((id: string) => nodes.find((s: PositionedElement) => s.id === id))
-    .filter((shape?: PositionedElement) => shape) as PositionedElement[];
-
-  const selectedPersistentPrimaryNodes = flatten(
-    selectedPrimaryShapeObjects.map((shape: PositionedElement) =>
-      nodes.find((n: PositionedElement) => n.id === shape.id) // is it a leaf or a persisted group?
-        ? [shape.id]
-        : nodes.filter((s: PositionedElement) => s.position.parent === shape.id).map((s) => s.id)
-    )
-  );
-
-  const selectedNodeIds: string[] = flatten(selectedPersistentPrimaryNodes.map(crawlTree(nodes)));
-  const selectedNodes = selectedNodeIds
-    .map((id: string) => nodes.find((s) => s.id === id))
-    .filter((node: PositionedElement | undefined): node is PositionedElement => {
-      return !!node;
-    });
-
-  return {
-    pageId,
-    selectedToplevelNodes,
-    selectedNodes,
-    state,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
-    dispatch(insertNodes(selectedNodes, pageId)),
-  removeNodes: (nodeIds: string[], pageId: string) => dispatch(removeElements(nodeIds, pageId)),
-  selectToplevelNodes: (nodes: PositionedElement[]) =>
-    dispatch(
-      selectToplevelNodes(
-        nodes.filter((e: PositionedElement) => !e.position.parent).map((e) => e.id)
-      )
-    ),
-  elementLayer: (pageId: string, elementId: string, movement: number) => {
-    dispatch(elementLayer({ pageId, elementId, movement }));
-  },
-  undoHistory: () => dispatch(undoHistory()),
-  redoHistory: () => dispatch(redoHistory()),
-  dispatch,
-});
-
-const mergeProps = (
-  { state, selectedToplevelNodes, ...restStateProps }: ReturnType<typeof mapStateToProps>,
-  { dispatch, ...restDispatchProps }: ReturnType<typeof mapDispatchToProps>,
-  { commit }: OwnProps
-) => {
-  const updateGlobalState = globalStateUpdater(dispatch, state);
-
-  return {
-    ...restDispatchProps,
-    ...restStateProps,
-    commit: withGlobalState(commit, updateGlobalState),
-    groupIsSelected:
-      selectedToplevelNodes.length === 1 && selectedToplevelNodes[0].includes('group'),
-  };
-};
-
-export const EditMenu = compose<ComponentProps, OwnProps>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withProps(() => ({ hasPasteData: Boolean(getClipboardData()) })),
-  withHandlers(basicHandlerCreators),
-  withHandlers(clipboardHandlerCreators),
-  withHandlers(layerHandlerCreators),
-  withHandlers(groupHandlerCreators),
-  withHandlers(alignmentDistributionHandlerCreators)
-)(Component);
+export { EditMenu } from './edit_menu';
+export { EditMenu as EditMenuComponent } from './edit_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.stories.tsx
index 9aca5ce33ba021..cf9b334ffe8eac 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/element_menu.stories.tsx
@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ElementSpec } from '../../../../../types';
-import { ElementMenu } from '../element_menu';
+import { ElementMenu } from '../element_menu.component';
 
 const testElements: { [key: string]: ElementSpec } = {
   areaChart: {
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx
new file mode 100644
index 00000000000000..6d9233aaba22b5
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx
@@ -0,0 +1,214 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { sortBy } from 'lodash';
+import React, { Fragment, FunctionComponent, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  EuiButton,
+  EuiContextMenu,
+  EuiIcon,
+  EuiContextMenuPanelItemDescriptor,
+} from '@elastic/eui';
+import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib';
+import { ComponentStrings } from '../../../../i18n/components';
+import { ElementSpec } from '../../../../types';
+import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
+import { getId } from '../../../lib/get_id';
+import { Popover, ClosePopoverFn } from '../../popover';
+import { AssetManager } from '../../asset_manager';
+import { SavedElementsModal } from '../../saved_elements_modal';
+
+interface CategorizedElementLists {
+  [key: string]: ElementSpec[];
+}
+
+interface ElementTypeMeta {
+  [key: string]: { name: string; icon: string };
+}
+
+export const { WorkpadHeaderElementMenu: strings } = ComponentStrings;
+
+// label and icon for the context menu item for each element type
+const elementTypeMeta: ElementTypeMeta = {
+  chart: { name: strings.getChartMenuItemLabel(), icon: 'visArea' },
+  filter: { name: strings.getFilterMenuItemLabel(), icon: 'filter' },
+  image: { name: strings.getImageMenuItemLabel(), icon: 'image' },
+  other: { name: strings.getOtherMenuItemLabel(), icon: 'empty' },
+  progress: { name: strings.getProgressMenuItemLabel(), icon: 'visGoal' },
+  shape: { name: strings.getShapeMenuItemLabel(), icon: 'node' },
+  text: { name: strings.getTextMenuItemLabel(), icon: 'visText' },
+};
+
+const getElementType = (element: ElementSpec): string =>
+  element && element.type && Object.keys(elementTypeMeta).includes(element.type)
+    ? element.type
+    : 'other';
+
+const categorizeElementsByType = (elements: ElementSpec[]): { [key: string]: ElementSpec[] } => {
+  elements = sortBy(elements, 'displayName');
+
+  const categories: CategorizedElementLists = { other: [] };
+
+  elements.forEach((element: ElementSpec) => {
+    const type = getElementType(element);
+
+    if (categories[type]) {
+      categories[type].push(element);
+    } else {
+      categories[type] = [element];
+    }
+  });
+
+  return categories;
+};
+
+export interface Props {
+  /**
+   * Dictionary of elements from elements registry
+   */
+  elements: { [key: string]: ElementSpec };
+  /**
+   * Handler for adding a selected element to the workpad
+   */
+  addElement: (element: ElementSpec) => void;
+  /**
+   * Renders embeddable flyout
+   */
+  renderEmbedPanel: (onClose: () => void) => JSX.Element;
+}
+
+export const ElementMenu: FunctionComponent<Props> = ({
+  elements,
+  addElement,
+  renderEmbedPanel,
+}) => {
+  const [isAssetModalVisible, setAssetModalVisible] = useState(false);
+  const [isEmbedPanelVisible, setEmbedPanelVisible] = useState(false);
+  const [isSavedElementsModalVisible, setSavedElementsModalVisible] = useState(false);
+
+  const hideAssetModal = () => setAssetModalVisible(false);
+  const showAssetModal = () => setAssetModalVisible(true);
+  const hideEmbedPanel = () => setEmbedPanelVisible(false);
+  const showEmbedPanel = () => setEmbedPanelVisible(true);
+  const hideSavedElementsModal = () => setSavedElementsModalVisible(false);
+  const showSavedElementsModal = () => setSavedElementsModalVisible(true);
+
+  const {
+    chart: chartElements,
+    filter: filterElements,
+    image: imageElements,
+    other: otherElements,
+    progress: progressElements,
+    shape: shapeElements,
+    text: textElements,
+  } = categorizeElementsByType(Object.values(elements));
+
+  const getPanelTree = (closePopover: ClosePopoverFn) => {
+    const elementToMenuItem = (element: ElementSpec): EuiContextMenuPanelItemDescriptor => ({
+      name: element.displayName || element.name,
+      icon: element.icon,
+      onClick: () => {
+        addElement(element);
+        closePopover();
+      },
+    });
+
+    const elementListToMenuItems = (elementList: ElementSpec[]) => {
+      const type = getElementType(elementList[0]);
+      const { name, icon } = elementTypeMeta[type] || elementTypeMeta.other;
+
+      if (elementList.length > 1) {
+        return {
+          name,
+          icon: <EuiIcon type={icon} size="m" />,
+          panel: {
+            id: getId('element-type'),
+            title: name,
+            items: elementList.map(elementToMenuItem),
+          },
+        };
+      }
+
+      return elementToMenuItem(elementList[0]);
+    };
+
+    return {
+      id: 0,
+      items: [
+        elementListToMenuItems(textElements),
+        elementListToMenuItems(shapeElements),
+        elementListToMenuItems(chartElements),
+        elementListToMenuItems(imageElements),
+        elementListToMenuItems(filterElements),
+        elementListToMenuItems(progressElements),
+        elementListToMenuItems(otherElements),
+        {
+          name: strings.getMyElementsMenuItemLabel(),
+          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
+          'data-test-subj': 'saved-elements-menu-option',
+          icon: <EuiIcon type="empty" size="m" />,
+          onClick: () => {
+            showSavedElementsModal();
+            closePopover();
+          },
+        },
+        {
+          name: strings.getAssetsMenuItemLabel(),
+          icon: <EuiIcon type="empty" size="m" />,
+          onClick: () => {
+            showAssetModal();
+            closePopover();
+          },
+        },
+        {
+          name: strings.getEmbedObjectMenuItemLabel(),
+          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
+          icon: <EuiIcon type="logoKibana" size="m" />,
+          onClick: () => {
+            showEmbedPanel();
+            closePopover();
+          },
+        },
+      ],
+    };
+  };
+
+  const exportControl = (togglePopover: React.MouseEventHandler<any>) => (
+    <EuiButton
+      fill
+      iconType="plusInCircle"
+      size="s"
+      aria-label={strings.getElementMenuLabel()}
+      onClick={togglePopover}
+      className="canvasElementMenu__popoverButton"
+      data-test-subj="add-element-button"
+    >
+      {strings.getElementMenuButtonLabel()}
+    </EuiButton>
+  );
+
+  return (
+    <Fragment>
+      <Popover button={exportControl} panelPaddingSize="none" anchorPosition="downLeft">
+        {({ closePopover }: { closePopover: ClosePopoverFn }) => (
+          <EuiContextMenu
+            initialPanelId={0}
+            panels={flattenPanelTree(getPanelTree(closePopover))}
+          />
+        )}
+      </Popover>
+      {isAssetModalVisible ? <AssetManager onClose={hideAssetModal} /> : null}
+      {isEmbedPanelVisible ? renderEmbedPanel(hideEmbedPanel) : null}
+      {isSavedElementsModalVisible ? <SavedElementsModal onClose={hideSavedElementsModal} /> : null}
+    </Fragment>
+  );
+};
+
+ElementMenu.propTypes = {
+  elements: PropTypes.object,
+  addElement: PropTypes.func.isRequired,
+};
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx
index 6d9233aaba22b5..2cbe4ae5a6575f 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx
@@ -4,211 +4,44 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { sortBy } from 'lodash';
-import React, { Fragment, FunctionComponent, useState } from 'react';
-import PropTypes from 'prop-types';
-import {
-  EuiButton,
-  EuiContextMenu,
-  EuiIcon,
-  EuiContextMenuPanelItemDescriptor,
-} from '@elastic/eui';
-import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib';
-import { ComponentStrings } from '../../../../i18n/components';
-import { ElementSpec } from '../../../../types';
-import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
-import { getId } from '../../../lib/get_id';
-import { Popover, ClosePopoverFn } from '../../popover';
-import { AssetManager } from '../../asset_manager';
-import { SavedElementsModal } from '../../saved_elements_modal';
-
-interface CategorizedElementLists {
-  [key: string]: ElementSpec[];
-}
-
-interface ElementTypeMeta {
-  [key: string]: { name: string; icon: string };
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose, withProps } from 'recompose';
+import { Dispatch } from 'redux';
+import { State, ElementSpec } from '../../../../types';
+// @ts-expect-error untyped local
+import { elementsRegistry } from '../../../lib/elements_registry';
+import { ElementMenu as Component, Props as ComponentProps } from './element_menu.component';
+// @ts-expect-error untyped local
+import { addElement } from '../../../state/actions/elements';
+import { getSelectedPage } from '../../../state/selectors/workpad';
+import { AddEmbeddablePanel } from '../../embeddable_flyout';
+
+interface StateProps {
+  pageId: string;
 }
 
-export const { WorkpadHeaderElementMenu: strings } = ComponentStrings;
-
-// label and icon for the context menu item for each element type
-const elementTypeMeta: ElementTypeMeta = {
-  chart: { name: strings.getChartMenuItemLabel(), icon: 'visArea' },
-  filter: { name: strings.getFilterMenuItemLabel(), icon: 'filter' },
-  image: { name: strings.getImageMenuItemLabel(), icon: 'image' },
-  other: { name: strings.getOtherMenuItemLabel(), icon: 'empty' },
-  progress: { name: strings.getProgressMenuItemLabel(), icon: 'visGoal' },
-  shape: { name: strings.getShapeMenuItemLabel(), icon: 'node' },
-  text: { name: strings.getTextMenuItemLabel(), icon: 'visText' },
-};
-
-const getElementType = (element: ElementSpec): string =>
-  element && element.type && Object.keys(elementTypeMeta).includes(element.type)
-    ? element.type
-    : 'other';
-
-const categorizeElementsByType = (elements: ElementSpec[]): { [key: string]: ElementSpec[] } => {
-  elements = sortBy(elements, 'displayName');
-
-  const categories: CategorizedElementLists = { other: [] };
-
-  elements.forEach((element: ElementSpec) => {
-    const type = getElementType(element);
-
-    if (categories[type]) {
-      categories[type].push(element);
-    } else {
-      categories[type] = [element];
-    }
-  });
-
-  return categories;
-};
-
-export interface Props {
-  /**
-   * Dictionary of elements from elements registry
-   */
-  elements: { [key: string]: ElementSpec };
-  /**
-   * Handler for adding a selected element to the workpad
-   */
-  addElement: (element: ElementSpec) => void;
-  /**
-   * Renders embeddable flyout
-   */
-  renderEmbedPanel: (onClose: () => void) => JSX.Element;
+interface DispatchProps {
+  addElement: (pageId: string) => (partialElement: ElementSpec) => void;
 }
 
-export const ElementMenu: FunctionComponent<Props> = ({
-  elements,
-  addElement,
-  renderEmbedPanel,
-}) => {
-  const [isAssetModalVisible, setAssetModalVisible] = useState(false);
-  const [isEmbedPanelVisible, setEmbedPanelVisible] = useState(false);
-  const [isSavedElementsModalVisible, setSavedElementsModalVisible] = useState(false);
-
-  const hideAssetModal = () => setAssetModalVisible(false);
-  const showAssetModal = () => setAssetModalVisible(true);
-  const hideEmbedPanel = () => setEmbedPanelVisible(false);
-  const showEmbedPanel = () => setEmbedPanelVisible(true);
-  const hideSavedElementsModal = () => setSavedElementsModalVisible(false);
-  const showSavedElementsModal = () => setSavedElementsModalVisible(true);
-
-  const {
-    chart: chartElements,
-    filter: filterElements,
-    image: imageElements,
-    other: otherElements,
-    progress: progressElements,
-    shape: shapeElements,
-    text: textElements,
-  } = categorizeElementsByType(Object.values(elements));
-
-  const getPanelTree = (closePopover: ClosePopoverFn) => {
-    const elementToMenuItem = (element: ElementSpec): EuiContextMenuPanelItemDescriptor => ({
-      name: element.displayName || element.name,
-      icon: element.icon,
-      onClick: () => {
-        addElement(element);
-        closePopover();
-      },
-    });
-
-    const elementListToMenuItems = (elementList: ElementSpec[]) => {
-      const type = getElementType(elementList[0]);
-      const { name, icon } = elementTypeMeta[type] || elementTypeMeta.other;
-
-      if (elementList.length > 1) {
-        return {
-          name,
-          icon: <EuiIcon type={icon} size="m" />,
-          panel: {
-            id: getId('element-type'),
-            title: name,
-            items: elementList.map(elementToMenuItem),
-          },
-        };
-      }
-
-      return elementToMenuItem(elementList[0]);
-    };
-
-    return {
-      id: 0,
-      items: [
-        elementListToMenuItems(textElements),
-        elementListToMenuItems(shapeElements),
-        elementListToMenuItems(chartElements),
-        elementListToMenuItems(imageElements),
-        elementListToMenuItems(filterElements),
-        elementListToMenuItems(progressElements),
-        elementListToMenuItems(otherElements),
-        {
-          name: strings.getMyElementsMenuItemLabel(),
-          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
-          'data-test-subj': 'saved-elements-menu-option',
-          icon: <EuiIcon type="empty" size="m" />,
-          onClick: () => {
-            showSavedElementsModal();
-            closePopover();
-          },
-        },
-        {
-          name: strings.getAssetsMenuItemLabel(),
-          icon: <EuiIcon type="empty" size="m" />,
-          onClick: () => {
-            showAssetModal();
-            closePopover();
-          },
-        },
-        {
-          name: strings.getEmbedObjectMenuItemLabel(),
-          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
-          icon: <EuiIcon type="logoKibana" size="m" />,
-          onClick: () => {
-            showEmbedPanel();
-            closePopover();
-          },
-        },
-      ],
-    };
-  };
-
-  const exportControl = (togglePopover: React.MouseEventHandler<any>) => (
-    <EuiButton
-      fill
-      iconType="plusInCircle"
-      size="s"
-      aria-label={strings.getElementMenuLabel()}
-      onClick={togglePopover}
-      className="canvasElementMenu__popoverButton"
-      data-test-subj="add-element-button"
-    >
-      {strings.getElementMenuButtonLabel()}
-    </EuiButton>
-  );
-
-  return (
-    <Fragment>
-      <Popover button={exportControl} panelPaddingSize="none" anchorPosition="downLeft">
-        {({ closePopover }: { closePopover: ClosePopoverFn }) => (
-          <EuiContextMenu
-            initialPanelId={0}
-            panels={flattenPanelTree(getPanelTree(closePopover))}
-          />
-        )}
-      </Popover>
-      {isAssetModalVisible ? <AssetManager onClose={hideAssetModal} /> : null}
-      {isEmbedPanelVisible ? renderEmbedPanel(hideEmbedPanel) : null}
-      {isSavedElementsModalVisible ? <SavedElementsModal onClose={hideSavedElementsModal} /> : null}
-    </Fragment>
-  );
-};
-
-ElementMenu.propTypes = {
-  elements: PropTypes.object,
-  addElement: PropTypes.func.isRequired,
-};
+const mapStateToProps = (state: State) => ({
+  pageId: getSelectedPage(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  addElement: (pageId: string) => (element: ElementSpec) => dispatch(addElement(pageId, element)),
+});
+
+const mergeProps = (stateProps: StateProps, dispatchProps: DispatchProps) => ({
+  ...stateProps,
+  ...dispatchProps,
+  addElement: dispatchProps.addElement(stateProps.pageId),
+  // Moved this section out of the main component to enable stories
+  renderEmbedPanel: (onClose: () => void) => <AddEmbeddablePanel onClose={onClose} />,
+});
+
+export const ElementMenu = compose<ComponentProps, {}>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  withProps(() => ({ elements: elementsRegistry.toJS() }))
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.ts
new file mode 100644
index 00000000000000..26f81e125f6e21
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ElementMenu } from './element_menu';
+export { ElementMenu as ElementMenuComponent } from './element_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.tsx
deleted file mode 100644
index 264873fc994ddc..00000000000000
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.tsx
+++ /dev/null
@@ -1,47 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose, withProps } from 'recompose';
-import { Dispatch } from 'redux';
-import { State, ElementSpec } from '../../../../types';
-// @ts-expect-error untyped local
-import { elementsRegistry } from '../../../lib/elements_registry';
-import { ElementMenu as Component, Props as ComponentProps } from './element_menu';
-// @ts-expect-error untyped local
-import { addElement } from '../../../state/actions/elements';
-import { getSelectedPage } from '../../../state/selectors/workpad';
-import { AddEmbeddablePanel } from '../../embeddable_flyout';
-
-interface StateProps {
-  pageId: string;
-}
-
-interface DispatchProps {
-  addElement: (pageId: string) => (partialElement: ElementSpec) => void;
-}
-
-const mapStateToProps = (state: State) => ({
-  pageId: getSelectedPage(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  addElement: (pageId: string) => (element: ElementSpec) => dispatch(addElement(pageId, element)),
-});
-
-const mergeProps = (stateProps: StateProps, dispatchProps: DispatchProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  addElement: dispatchProps.addElement(stateProps.pageId),
-  // Moved this section out of the main component to enable stories
-  renderEmbedPanel: (onClose: () => void) => <AddEmbeddablePanel onClose={onClose} />,
-});
-
-export const ElementMenu = compose<ComponentProps, {}>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withProps(() => ({ elements: elementsRegistry.toJS() }))
-)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/index.ts
new file mode 100644
index 00000000000000..0b6f8cc06d1981
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { WorkpadHeader } from './workpad_header';
+export { WorkpadHeader as WorkpadHeaderComponent } from './workpad_header.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/index.tsx b/x-pack/plugins/canvas/public/components/workpad_header/index.tsx
deleted file mode 100644
index 407b4ff9328116..00000000000000
--- a/x-pack/plugins/canvas/public/components/workpad_header/index.tsx
+++ /dev/null
@@ -1,46 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { canUserWrite } from '../../state/selectors/app';
-import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
-import { setWriteable } from '../../state/actions/workpad';
-import { State } from '../../../types';
-import { WorkpadHeader as Component, Props as ComponentProps } from './workpad_header';
-
-interface StateProps {
-  isWriteable: boolean;
-  canUserWrite: boolean;
-  selectedPage: string;
-}
-
-interface DispatchProps {
-  setWriteable: (isWorkpadWriteable: boolean) => void;
-}
-
-const mapStateToProps = (state: State): StateProps => ({
-  isWriteable: isWriteable(state) && canUserWrite(state),
-  canUserWrite: canUserWrite(state),
-  selectedPage: getSelectedPage(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: ComponentProps
-): ComponentProps => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
-});
-
-export const WorkpadHeader = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts
index 87b926d93ccb91..8db62f5ac2d876 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts
@@ -4,19 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-// @ts-expect-error untyped local
-import { fetchAllRenderables } from '../../../state/actions/elements';
-import { getInFlight } from '../../../state/selectors/resolved_args';
-import { State } from '../../../../types';
-import { RefreshControl as Component } from './refresh_control';
-
-const mapStateToProps = (state: State) => ({
-  inFlight: getInFlight(state),
-});
-
-const mapDispatchToProps = {
-  doRefresh: fetchAllRenderables,
-};
-
-export const RefreshControl = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { RefreshControl } from './refresh_control';
+export { RefreshControl as RefreshControlComponent } from './refresh_control.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.ts b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.ts
new file mode 100644
index 00000000000000..a7f01e46927ce6
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+// @ts-expect-error untyped local
+import { fetchAllRenderables } from '../../../state/actions/elements';
+import { getInFlight } from '../../../state/selectors/resolved_args';
+import { State } from '../../../../types';
+import { RefreshControl as Component } from './refresh_control.component';
+
+const mapStateToProps = (state: State) => ({
+  inFlight: getInFlight(state),
+});
+
+const mapDispatchToProps = {
+  doRefresh: fetchAllRenderables,
+};
+
+export const RefreshControl = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.stories.tsx
index ab9137b1676c91..e0a1f0e381fd3e 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/share_menu.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { ShareMenu } from '../share_menu';
+import { ShareMenu } from '../share_menu.component';
 
 storiesOf('components/WorkpadHeader/ShareMenu', module).add('default', () => (
   <ShareMenu
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__examples__/share_website_flyout.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__examples__/flyout.stories.tsx
similarity index 94%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__examples__/share_website_flyout.stories.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__examples__/flyout.stories.tsx
index 886ddcfd763e1e..54c88c548ade57 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__examples__/share_website_flyout.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__examples__/flyout.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { ShareWebsiteFlyout } from '../share_website_flyout';
+import { ShareWebsiteFlyout } from '../flyout.component';
 
 storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module)
   .addParameters({
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/share_website_flyout.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx
similarity index 98%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/share_website_flyout.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx
index 5fd381baa73f5b..a538848e6b47e7 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/share_website_flyout.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx
@@ -24,7 +24,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ComponentStrings } from '../../../../../i18n/components';
 import { ZIP, CANVAS, HTML } from '../../../../../i18n/constants';
-import { OnCloseFn } from '../share_menu';
+import { OnCloseFn } from '../share_menu.component';
 import { WorkpadStep } from './workpad_step';
 import { RuntimeStep } from './runtime_step';
 import { SnippetsStep } from './snippets_step';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
new file mode 100644
index 00000000000000..e8d7a3e2cef532
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
@@ -0,0 +1,101 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { compose, withProps } from 'recompose';
+import {
+  getWorkpad,
+  getRenderedWorkpad,
+  getRenderedWorkpadExpressions,
+} from '../../../../state/selectors/workpad';
+import {
+  downloadRenderedWorkpad,
+  downloadRuntime,
+  downloadZippedRuntime,
+} from '../../../../lib/download_workpad';
+import { ShareWebsiteFlyout as Component, Props as ComponentProps } from './flyout.component';
+import { State, CanvasWorkpad } from '../../../../../types';
+import { CanvasRenderedWorkpad } from '../../../../../shareable_runtime/types';
+import { arrayBufferFetch } from '../../../../../common/lib/fetch';
+import { API_ROUTE_SHAREABLE_ZIP } from '../../../../../common/lib/constants';
+import { renderFunctionNames } from '../../../../../shareable_runtime/supported_renderers';
+
+import { ComponentStrings } from '../../../../../i18n/components';
+import { withKibana } from '../../../../../../../../src/plugins/kibana_react/public/';
+import { OnCloseFn } from '../share_menu.component';
+import { WithKibanaProps } from '../../../../index';
+
+export { OnDownloadFn, OnCopyFn } from './flyout.component';
+
+const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
+
+const getUnsupportedRenderers = (state: State) => {
+  const renderers: string[] = [];
+  const expressions = getRenderedWorkpadExpressions(state);
+  expressions.forEach((expression) => {
+    if (!renderFunctionNames.includes(expression)) {
+      renderers.push(expression);
+    }
+  });
+
+  return renderers;
+};
+
+const mapStateToProps = (state: State) => ({
+  renderedWorkpad: getRenderedWorkpad(state),
+  unsupportedRenderers: getUnsupportedRenderers(state),
+  workpad: getWorkpad(state),
+});
+
+interface Props {
+  onClose: OnCloseFn;
+  renderedWorkpad: CanvasRenderedWorkpad;
+  unsupportedRenderers: string[];
+  workpad: CanvasWorkpad;
+}
+
+export const ShareWebsiteFlyout = compose<ComponentProps, Pick<Props, 'onClose'>>(
+  connect(mapStateToProps),
+  withKibana,
+  withProps(
+    ({
+      unsupportedRenderers,
+      renderedWorkpad,
+      onClose,
+      workpad,
+      kibana,
+    }: Props & WithKibanaProps): ComponentProps => ({
+      unsupportedRenderers,
+      onClose,
+      onCopy: () => {
+        kibana.services.canvas.notify.info(strings.getCopyShareConfigMessage());
+      },
+      onDownload: (type) => {
+        switch (type) {
+          case 'share':
+            downloadRenderedWorkpad(renderedWorkpad);
+            return;
+          case 'shareRuntime':
+            downloadRuntime(kibana.services.http.basePath.get());
+            return;
+          case 'shareZip':
+            const basePath = kibana.services.http.basePath.get();
+            arrayBufferFetch
+              .post(`${basePath}${API_ROUTE_SHAREABLE_ZIP}`, JSON.stringify(renderedWorkpad))
+              .then((blob) => downloadZippedRuntime(blob.data))
+              .catch((err: Error) => {
+                kibana.services.canvas.notify.error(err, {
+                  title: strings.getShareableZipErrorTitle(workpad.name),
+                });
+              });
+            return;
+          default:
+            throw new Error(strings.getUnknownExportErrorMessage(type));
+        }
+      },
+    })
+  )
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts
index 1e1eac2a1dcf3a..335c5dff6ed74f 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts
@@ -4,95 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withProps } from 'recompose';
-import {
-  getWorkpad,
-  getRenderedWorkpad,
-  getRenderedWorkpadExpressions,
-} from '../../../../state/selectors/workpad';
-import {
-  downloadRenderedWorkpad,
-  downloadRuntime,
-  downloadZippedRuntime,
-} from '../../../../lib/download_workpad';
-import { ShareWebsiteFlyout as Component, Props as ComponentProps } from './share_website_flyout';
-import { State, CanvasWorkpad } from '../../../../../types';
-import { CanvasRenderedWorkpad } from '../../../../../shareable_runtime/types';
-import { arrayBufferFetch } from '../../../../../common/lib/fetch';
-import { API_ROUTE_SHAREABLE_ZIP } from '../../../../../common/lib/constants';
-import { renderFunctionNames } from '../../../../../shareable_runtime/supported_renderers';
-
-import { ComponentStrings } from '../../../../../i18n/components';
-import { withKibana } from '../../../../../../../../src/plugins/kibana_react/public/';
-import { OnCloseFn } from '../share_menu';
-import { WithKibanaProps } from '../../../../index';
-const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
-
-const getUnsupportedRenderers = (state: State) => {
-  const renderers: string[] = [];
-  const expressions = getRenderedWorkpadExpressions(state);
-  expressions.forEach((expression) => {
-    if (!renderFunctionNames.includes(expression)) {
-      renderers.push(expression);
-    }
-  });
-
-  return renderers;
-};
-
-const mapStateToProps = (state: State) => ({
-  renderedWorkpad: getRenderedWorkpad(state),
-  unsupportedRenderers: getUnsupportedRenderers(state),
-  workpad: getWorkpad(state),
-});
-
-interface Props {
-  onClose: OnCloseFn;
-  renderedWorkpad: CanvasRenderedWorkpad;
-  unsupportedRenderers: string[];
-  workpad: CanvasWorkpad;
-}
-
-export const ShareWebsiteFlyout = compose<ComponentProps, Pick<Props, 'onClose'>>(
-  connect(mapStateToProps),
-  withKibana,
-  withProps(
-    ({
-      unsupportedRenderers,
-      renderedWorkpad,
-      onClose,
-      workpad,
-      kibana,
-    }: Props & WithKibanaProps): ComponentProps => ({
-      unsupportedRenderers,
-      onClose,
-      onCopy: () => {
-        kibana.services.canvas.notify.info(strings.getCopyShareConfigMessage());
-      },
-      onDownload: (type) => {
-        switch (type) {
-          case 'share':
-            downloadRenderedWorkpad(renderedWorkpad);
-            return;
-          case 'shareRuntime':
-            downloadRuntime(kibana.services.http.basePath.get());
-            return;
-          case 'shareZip':
-            const basePath = kibana.services.http.basePath.get();
-            arrayBufferFetch
-              .post(`${basePath}${API_ROUTE_SHAREABLE_ZIP}`, JSON.stringify(renderedWorkpad))
-              .then((blob) => downloadZippedRuntime(blob.data))
-              .catch((err: Error) => {
-                kibana.services.canvas.notify.error(err, {
-                  title: strings.getShareableZipErrorTitle(workpad.name),
-                });
-              });
-            return;
-          default:
-            throw new Error(strings.getUnknownExportErrorMessage(type));
-        }
-      },
-    })
-  )
-)(Component);
+export { ShareWebsiteFlyout } from './flyout';
+export { ShareWebsiteFlyout as ShareWebsiteFlyoutComponent } from './flyout.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx
index ea8aba688b2a6d..b38226bb12a23e 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx
@@ -9,7 +9,7 @@ import { EuiText, EuiSpacer, EuiButton } from '@elastic/eui';
 
 import { ComponentStrings } from '../../../../../i18n/components';
 
-import { OnDownloadFn } from './share_website_flyout';
+import { OnDownloadFn } from './flyout';
 
 const { ShareWebsiteRuntimeStep: strings } = ComponentStrings;
 
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx
index 81f559651eb251..42497fcd316feb 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx
@@ -19,7 +19,7 @@ import {
 import { ComponentStrings } from '../../../../../i18n/components';
 
 import { Clipboard } from '../../../clipboard';
-import { OnCopyFn } from './share_website_flyout';
+import { OnCopyFn } from './flyout';
 
 const { ShareWebsiteSnippetsStep: strings } = ComponentStrings;
 
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx
index 1a5884d89d0662..ac4dfe6872d3c1 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx
@@ -9,7 +9,7 @@ import { EuiText, EuiSpacer, EuiButton } from '@elastic/eui';
 
 import { ComponentStrings } from '../../../../../i18n/components';
 
-import { OnDownloadFn } from './share_website_flyout';
+import { OnDownloadFn } from './flyout';
 
 const { ShareWebsiteWorkpadStep: strings } = ComponentStrings;
 
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts
index 01bcfebc0dba90..19dc9b668e61a9 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts
@@ -4,95 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withProps } from 'recompose';
-import { jobCompletionNotifications } from '../../../../../../plugins/reporting/public';
-import { getWorkpad, getPages } from '../../../state/selectors/workpad';
-import { getWindow } from '../../../lib/get_window';
-import { downloadWorkpad } from '../../../lib/download_workpad';
-import { ShareMenu as Component, Props as ComponentProps } from './share_menu';
-import { getPdfUrl, createPdf } from './utils';
-import { State, CanvasWorkpad } from '../../../../types';
-import { withServices, WithServicesProps } from '../../../services';
-
-import { ComponentStrings } from '../../../../i18n';
-
-const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
-
-const mapStateToProps = (state: State) => ({
-  workpad: getWorkpad(state),
-  pageCount: getPages(state).length,
-});
-
-const getAbsoluteUrl = (path: string) => {
-  const { location } = getWindow();
-
-  if (!location) {
-    return path;
-  } // fallback for mocked window object
-
-  const { protocol, hostname, port } = location;
-  return `${protocol}//${hostname}:${port}${path}`;
-};
-
-interface Props {
-  workpad: CanvasWorkpad;
-  pageCount: number;
-}
-
-export const ShareMenu = compose<ComponentProps, {}>(
-  connect(mapStateToProps),
-  withServices,
-  withProps(
-    ({ workpad, pageCount, services }: Props & WithServicesProps): ComponentProps => ({
-      getExportUrl: (type) => {
-        if (type === 'pdf') {
-          const pdfUrl = getPdfUrl(
-            workpad,
-            { pageCount },
-            services.platform.getBasePathInterface()
-          );
-          return getAbsoluteUrl(pdfUrl);
-        }
-
-        throw new Error(strings.getUnknownExportErrorMessage(type));
-      },
-      onCopy: (type) => {
-        switch (type) {
-          case 'pdf':
-            services.notify.info(strings.getCopyPDFMessage());
-            break;
-          case 'reportingConfig':
-            services.notify.info(strings.getCopyReportingConfigMessage());
-            break;
-          default:
-            throw new Error(strings.getUnknownExportErrorMessage(type));
-        }
-      },
-      onExport: (type) => {
-        switch (type) {
-          case 'pdf':
-            return createPdf(workpad, { pageCount }, services.platform.getBasePathInterface())
-              .then(({ data }: { data: { job: { id: string } } }) => {
-                services.notify.info(strings.getExportPDFMessage(), {
-                  title: strings.getExportPDFTitle(workpad.name),
-                });
-
-                // register the job so a completion notification shows up when it's ready
-                jobCompletionNotifications.add(data.job.id);
-              })
-              .catch((err: Error) => {
-                services.notify.error(err, {
-                  title: strings.getExportPDFErrorTitle(workpad.name),
-                });
-              });
-          case 'json':
-            downloadWorkpad(workpad.id);
-            return;
-          default:
-            throw new Error(strings.getUnknownExportErrorMessage(type));
-        }
-      },
-    })
-  )
-)(Component);
+export { ShareMenu } from './share_menu';
+export { ShareMenu as ShareMenuComponent } from './share_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts
new file mode 100644
index 00000000000000..85c4b14a28c136
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { compose, withProps } from 'recompose';
+import { jobCompletionNotifications } from '../../../../../../plugins/reporting/public';
+import { getWorkpad, getPages } from '../../../state/selectors/workpad';
+import { getWindow } from '../../../lib/get_window';
+import { downloadWorkpad } from '../../../lib/download_workpad';
+import { ShareMenu as Component, Props as ComponentProps } from './share_menu.component';
+import { getPdfUrl, createPdf } from './utils';
+import { State, CanvasWorkpad } from '../../../../types';
+import { withServices, WithServicesProps } from '../../../services';
+
+import { ComponentStrings } from '../../../../i18n';
+
+const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
+
+const mapStateToProps = (state: State) => ({
+  workpad: getWorkpad(state),
+  pageCount: getPages(state).length,
+});
+
+const getAbsoluteUrl = (path: string) => {
+  const { location } = getWindow();
+
+  if (!location) {
+    return path;
+  } // fallback for mocked window object
+
+  const { protocol, hostname, port } = location;
+  return `${protocol}//${hostname}:${port}${path}`;
+};
+
+interface Props {
+  workpad: CanvasWorkpad;
+  pageCount: number;
+}
+
+export const ShareMenu = compose<ComponentProps, {}>(
+  connect(mapStateToProps),
+  withServices,
+  withProps(
+    ({ workpad, pageCount, services }: Props & WithServicesProps): ComponentProps => ({
+      getExportUrl: (type) => {
+        if (type === 'pdf') {
+          const pdfUrl = getPdfUrl(
+            workpad,
+            { pageCount },
+            services.platform.getBasePathInterface()
+          );
+          return getAbsoluteUrl(pdfUrl);
+        }
+
+        throw new Error(strings.getUnknownExportErrorMessage(type));
+      },
+      onCopy: (type) => {
+        switch (type) {
+          case 'pdf':
+            services.notify.info(strings.getCopyPDFMessage());
+            break;
+          case 'reportingConfig':
+            services.notify.info(strings.getCopyReportingConfigMessage());
+            break;
+          default:
+            throw new Error(strings.getUnknownExportErrorMessage(type));
+        }
+      },
+      onExport: (type) => {
+        switch (type) {
+          case 'pdf':
+            return createPdf(workpad, { pageCount }, services.platform.getBasePathInterface())
+              .then(({ data }: { data: { job: { id: string } } }) => {
+                services.notify.info(strings.getExportPDFMessage(), {
+                  title: strings.getExportPDFTitle(workpad.name),
+                });
+
+                // register the job so a completion notification shows up when it's ready
+                jobCompletionNotifications.add(data.job.id);
+              })
+              .catch((err: Error) => {
+                services.notify.error(err, {
+                  title: strings.getExportPDFErrorTitle(workpad.name),
+                });
+              });
+          case 'json':
+            downloadWorkpad(workpad.id);
+            return;
+          default:
+            throw new Error(strings.getUnknownExportErrorMessage(type));
+        }
+      },
+    })
+  )
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx
index 5b4de05da3a3df..6b033feb26021d 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { ViewMenu } from '../view_menu';
+import { ViewMenu } from '../view_menu.component';
 
 const handlers = {
   setZoomScale: action('setZoomScale'),
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts
index e2a05d13b017eb..167b3822fd13d2 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts
@@ -4,97 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withHandlers } from 'recompose';
-import { Dispatch } from 'redux';
-import { zoomHandlerCreators } from '../../../lib/app_handler_creators';
-import { State, CanvasWorkpadBoundingBox } from '../../../../types';
-// @ts-expect-error untyped local
-import { fetchAllRenderables } from '../../../state/actions/elements';
-// @ts-expect-error untyped local
-import { setZoomScale, setFullscreen, selectToplevelNodes } from '../../../state/actions/transient';
-import {
-  setWriteable,
-  setRefreshInterval,
-  enableAutoplay,
-  setAutoplayInterval,
-} from '../../../state/actions/workpad';
-import { getZoomScale, canUserWrite } from '../../../state/selectors/app';
-import {
-  getWorkpadBoundingBox,
-  getWorkpadWidth,
-  getWorkpadHeight,
-  isWriteable,
-  getRefreshInterval,
-  getAutoplay,
-} from '../../../state/selectors/workpad';
-import { ViewMenu as Component, Props as ComponentProps } from './view_menu';
-import { getFitZoomScale } from './lib/get_fit_zoom_scale';
-
-interface StateProps {
-  zoomScale: number;
-  boundingBox: CanvasWorkpadBoundingBox;
-  workpadWidth: number;
-  workpadHeight: number;
-  isWriteable: boolean;
-}
-
-interface DispatchProps {
-  setWriteable: (isWorkpadWriteable: boolean) => void;
-  setZoomScale: (scale: number) => void;
-  setFullscreen: (showFullscreen: boolean) => void;
-}
-
-const mapStateToProps = (state: State) => {
-  const { enabled, interval } = getAutoplay(state);
-
-  return {
-    zoomScale: getZoomScale(state),
-    boundingBox: getWorkpadBoundingBox(state),
-    workpadWidth: getWorkpadWidth(state),
-    workpadHeight: getWorkpadHeight(state),
-    isWriteable: isWriteable(state) && canUserWrite(state),
-    refreshInterval: getRefreshInterval(state),
-    autoplayEnabled: enabled,
-    autoplayInterval: interval,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),
-  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
-  setFullscreen: (value: boolean) => {
-    dispatch(setFullscreen(value));
-
-    if (value) {
-      dispatch(selectToplevelNodes([]));
-    }
-  },
-  doRefresh: () => dispatch(fetchAllRenderables()),
-  setRefreshInterval: (interval: number) => dispatch(setRefreshInterval(interval)),
-  enableAutoplay: (autoplay: number) => dispatch(enableAutoplay(!!autoplay)),
-  setAutoplayInterval: (interval: number) => dispatch(setAutoplayInterval(interval)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: ComponentProps
-): ComponentProps => {
-  const { boundingBox, workpadWidth, workpadHeight, ...remainingStateProps } = stateProps;
-
-  return {
-    ...remainingStateProps,
-    ...dispatchProps,
-    ...ownProps,
-    toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
-    enterFullscreen: () => dispatchProps.setFullscreen(true),
-    fitToWindow: () =>
-      dispatchProps.setZoomScale(getFitZoomScale(boundingBox, workpadWidth, workpadHeight)),
-  };
-};
-
-export const ViewMenu = compose<ComponentProps, {}>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withHandlers(zoomHandlerCreators)
-)(Component);
+export { ViewMenu } from './view_menu';
+export { ViewMenu as ViewMenuComponent } from './view_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts
new file mode 100644
index 00000000000000..c9650a35ea2a61
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts
@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { compose, withHandlers } from 'recompose';
+import { Dispatch } from 'redux';
+import { zoomHandlerCreators } from '../../../lib/app_handler_creators';
+import { State, CanvasWorkpadBoundingBox } from '../../../../types';
+// @ts-expect-error untyped local
+import { fetchAllRenderables } from '../../../state/actions/elements';
+// @ts-expect-error untyped local
+import { setZoomScale, setFullscreen, selectToplevelNodes } from '../../../state/actions/transient';
+import {
+  setWriteable,
+  setRefreshInterval,
+  enableAutoplay,
+  setAutoplayInterval,
+} from '../../../state/actions/workpad';
+import { getZoomScale, canUserWrite } from '../../../state/selectors/app';
+import {
+  getWorkpadBoundingBox,
+  getWorkpadWidth,
+  getWorkpadHeight,
+  isWriteable,
+  getRefreshInterval,
+  getAutoplay,
+} from '../../../state/selectors/workpad';
+import { ViewMenu as Component, Props as ComponentProps } from './view_menu.component';
+import { getFitZoomScale } from './lib/get_fit_zoom_scale';
+
+interface StateProps {
+  zoomScale: number;
+  boundingBox: CanvasWorkpadBoundingBox;
+  workpadWidth: number;
+  workpadHeight: number;
+  isWriteable: boolean;
+}
+
+interface DispatchProps {
+  setWriteable: (isWorkpadWriteable: boolean) => void;
+  setZoomScale: (scale: number) => void;
+  setFullscreen: (showFullscreen: boolean) => void;
+}
+
+const mapStateToProps = (state: State) => {
+  const { enabled, interval } = getAutoplay(state);
+
+  return {
+    zoomScale: getZoomScale(state),
+    boundingBox: getWorkpadBoundingBox(state),
+    workpadWidth: getWorkpadWidth(state),
+    workpadHeight: getWorkpadHeight(state),
+    isWriteable: isWriteable(state) && canUserWrite(state),
+    refreshInterval: getRefreshInterval(state),
+    autoplayEnabled: enabled,
+    autoplayInterval: interval,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),
+  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
+  setFullscreen: (value: boolean) => {
+    dispatch(setFullscreen(value));
+
+    if (value) {
+      dispatch(selectToplevelNodes([]));
+    }
+  },
+  doRefresh: () => dispatch(fetchAllRenderables()),
+  setRefreshInterval: (interval: number) => dispatch(setRefreshInterval(interval)),
+  enableAutoplay: (autoplay: number) => dispatch(enableAutoplay(!!autoplay)),
+  setAutoplayInterval: (interval: number) => dispatch(setAutoplayInterval(interval)),
+});
+
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: ComponentProps
+): ComponentProps => {
+  const { boundingBox, workpadWidth, workpadHeight, ...remainingStateProps } = stateProps;
+
+  return {
+    ...remainingStateProps,
+    ...dispatchProps,
+    ...ownProps,
+    toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
+    enterFullscreen: () => dispatchProps.setFullscreen(true),
+    fitToWindow: () =>
+      dispatchProps.setZoomScale(getFitZoomScale(boundingBox, workpadWidth, workpadHeight)),
+  };
+};
+
+export const ViewMenu = compose<ComponentProps, {}>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  withHandlers(zoomHandlerCreators)
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx
new file mode 100644
index 00000000000000..eb4b451896b46b
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx
@@ -0,0 +1,150 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+// @ts-expect-error no @types definition
+import { Shortcuts } from 'react-shortcuts';
+import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { ComponentStrings } from '../../../i18n';
+import { ToolTipShortcut } from '../tool_tip_shortcut/';
+import { RefreshControl } from './refresh_control';
+// @ts-expect-error untyped local
+import { FullscreenControl } from './fullscreen_control';
+import { EditMenu } from './edit_menu';
+import { ElementMenu } from './element_menu';
+import { ShareMenu } from './share_menu';
+import { ViewMenu } from './view_menu';
+
+const { WorkpadHeader: strings } = ComponentStrings;
+
+export interface Props {
+  isWriteable: boolean;
+  toggleWriteable: () => void;
+  canUserWrite: boolean;
+  commit: (type: string, payload: any) => any;
+}
+
+export const WorkpadHeader: FunctionComponent<Props> = ({
+  isWriteable,
+  canUserWrite,
+  toggleWriteable,
+  commit,
+}) => {
+  const keyHandler = (action: string) => {
+    if (action === 'EDITING') {
+      toggleWriteable();
+    }
+  };
+
+  const fullscreenButton = ({ toggleFullscreen }: { toggleFullscreen: () => void }) => (
+    <EuiToolTip
+      position="bottom"
+      content={
+        <span>
+          {strings.getFullScreenTooltip()}{' '}
+          <ToolTipShortcut namespace="PRESENTATION" action="FULLSCREEN" />
+        </span>
+      }
+    >
+      <EuiButtonIcon
+        iconType="fullScreen"
+        aria-label={strings.getFullScreenButtonAriaLabel()}
+        onClick={toggleFullscreen}
+      />
+    </EuiToolTip>
+  );
+
+  const getEditToggleToolTipText = () => {
+    if (!canUserWrite) {
+      return strings.getNoWritePermissionTooltipText();
+    }
+
+    const content = isWriteable
+      ? strings.getHideEditControlTooltip()
+      : strings.getShowEditControlTooltip();
+
+    return content;
+  };
+
+  const getEditToggleToolTip = ({ textOnly } = { textOnly: false }) => {
+    const content = getEditToggleToolTipText();
+
+    if (textOnly) {
+      return content;
+    }
+
+    return (
+      <span>
+        {content} <ToolTipShortcut namespace="EDITOR" action="EDITING" />
+      </span>
+    );
+  };
+
+  return (
+    <EuiFlexGroup
+      gutterSize="none"
+      alignItems="center"
+      justifyContent="spaceBetween"
+      className="canvasLayout__stageHeaderInner"
+    >
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center" gutterSize="none">
+          {isWriteable && (
+            <EuiFlexItem grow={false}>
+              <ElementMenu />
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem grow={false}>
+            <ViewMenu />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EditMenu commit={commit} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ShareMenu />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            {canUserWrite && (
+              <Shortcuts
+                name="EDITOR"
+                handler={keyHandler}
+                targetNodeSelector="body"
+                global
+                isolate
+              />
+            )}
+            <EuiToolTip position="bottom" content={getEditToggleToolTip()}>
+              <EuiButtonIcon
+                iconType={isWriteable ? 'eyeClosed' : 'eye'}
+                onClick={toggleWriteable}
+                size="s"
+                aria-label={getEditToggleToolTipText()}
+                isDisabled={!canUserWrite}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <RefreshControl />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <FullscreenControl>{fullscreenButton}</FullscreenControl>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+WorkpadHeader.propTypes = {
+  isWriteable: PropTypes.bool,
+  toggleWriteable: PropTypes.func,
+  canUserWrite: PropTypes.bool,
+};
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx
index eb4b451896b46b..1f630040b0c36c 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx
@@ -4,147 +4,43 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
-// @ts-expect-error no @types definition
-import { Shortcuts } from 'react-shortcuts';
-import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { ComponentStrings } from '../../../i18n';
-import { ToolTipShortcut } from '../tool_tip_shortcut/';
-import { RefreshControl } from './refresh_control';
-// @ts-expect-error untyped local
-import { FullscreenControl } from './fullscreen_control';
-import { EditMenu } from './edit_menu';
-import { ElementMenu } from './element_menu';
-import { ShareMenu } from './share_menu';
-import { ViewMenu } from './view_menu';
-
-const { WorkpadHeader: strings } = ComponentStrings;
-
-export interface Props {
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { canUserWrite } from '../../state/selectors/app';
+import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
+import { setWriteable } from '../../state/actions/workpad';
+import { State } from '../../../types';
+import { WorkpadHeader as Component, Props as ComponentProps } from './workpad_header.component';
+
+interface StateProps {
   isWriteable: boolean;
-  toggleWriteable: () => void;
   canUserWrite: boolean;
-  commit: (type: string, payload: any) => any;
+  selectedPage: string;
 }
 
-export const WorkpadHeader: FunctionComponent<Props> = ({
-  isWriteable,
-  canUserWrite,
-  toggleWriteable,
-  commit,
-}) => {
-  const keyHandler = (action: string) => {
-    if (action === 'EDITING') {
-      toggleWriteable();
-    }
-  };
-
-  const fullscreenButton = ({ toggleFullscreen }: { toggleFullscreen: () => void }) => (
-    <EuiToolTip
-      position="bottom"
-      content={
-        <span>
-          {strings.getFullScreenTooltip()}{' '}
-          <ToolTipShortcut namespace="PRESENTATION" action="FULLSCREEN" />
-        </span>
-      }
-    >
-      <EuiButtonIcon
-        iconType="fullScreen"
-        aria-label={strings.getFullScreenButtonAriaLabel()}
-        onClick={toggleFullscreen}
-      />
-    </EuiToolTip>
-  );
-
-  const getEditToggleToolTipText = () => {
-    if (!canUserWrite) {
-      return strings.getNoWritePermissionTooltipText();
-    }
-
-    const content = isWriteable
-      ? strings.getHideEditControlTooltip()
-      : strings.getShowEditControlTooltip();
-
-    return content;
-  };
-
-  const getEditToggleToolTip = ({ textOnly } = { textOnly: false }) => {
-    const content = getEditToggleToolTipText();
-
-    if (textOnly) {
-      return content;
-    }
-
-    return (
-      <span>
-        {content} <ToolTipShortcut namespace="EDITOR" action="EDITING" />
-      </span>
-    );
-  };
-
-  return (
-    <EuiFlexGroup
-      gutterSize="none"
-      alignItems="center"
-      justifyContent="spaceBetween"
-      className="canvasLayout__stageHeaderInner"
-    >
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup alignItems="center" gutterSize="none">
-          {isWriteable && (
-            <EuiFlexItem grow={false}>
-              <ElementMenu />
-            </EuiFlexItem>
-          )}
-          <EuiFlexItem grow={false}>
-            <ViewMenu />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EditMenu commit={commit} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ShareMenu />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup alignItems="center" gutterSize="s">
-          <EuiFlexItem grow={false}>
-            {canUserWrite && (
-              <Shortcuts
-                name="EDITOR"
-                handler={keyHandler}
-                targetNodeSelector="body"
-                global
-                isolate
-              />
-            )}
-            <EuiToolTip position="bottom" content={getEditToggleToolTip()}>
-              <EuiButtonIcon
-                iconType={isWriteable ? 'eyeClosed' : 'eye'}
-                onClick={toggleWriteable}
-                size="s"
-                aria-label={getEditToggleToolTipText()}
-                isDisabled={!canUserWrite}
-              />
-            </EuiToolTip>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <RefreshControl />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <FullscreenControl>{fullscreenButton}</FullscreenControl>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
+interface DispatchProps {
+  setWriteable: (isWorkpadWriteable: boolean) => void;
+}
 
-WorkpadHeader.propTypes = {
-  isWriteable: PropTypes.bool,
-  toggleWriteable: PropTypes.func,
-  canUserWrite: PropTypes.bool,
-};
+const mapStateToProps = (state: State): StateProps => ({
+  isWriteable: isWriteable(state) && canUserWrite(state),
+  canUserWrite: canUserWrite(state),
+  selectedPage: getSelectedPage(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
+});
+
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: ComponentProps
+): ComponentProps => ({
+  ...stateProps,
+  ...dispatchProps,
+  ...ownProps,
+  toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
+});
+
+export const WorkpadHeader = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component);
diff --git a/x-pack/plugins/canvas/storybook/storyshots.test.js b/x-pack/plugins/canvas/storybook/storyshots.test.js
index e3a9654bb49fa4..dbcbbff6398b53 100644
--- a/x-pack/plugins/canvas/storybook/storyshots.test.js
+++ b/x-pack/plugins/canvas/storybook/storyshots.test.js
@@ -73,7 +73,7 @@ jest.mock('@elastic/eui/lib/components/overlay_mask/overlay_mask', () => {
 
 // Disabling this test due to https://github.com/elastic/eui/issues/2242
 jest.mock(
-  '../public/components/workpad_header/share_menu/flyout/__examples__/share_website_flyout.stories',
+  '../public/components/workpad_header/share_menu/flyout/__examples__/flyout.stories',
   () => {
     return 'Disabled Panel';
   }