-
- Edit Workpad
-
+ Edit Workpad
{Style.it(
workpad.css,
diff --git a/x-pack/plugins/canvas/public/apps/export/export/export_app.scss b/x-pack/plugins/canvas/public/components/export_app/export_app.scss
similarity index 100%
rename from x-pack/plugins/canvas/public/apps/export/export/export_app.scss
rename to x-pack/plugins/canvas/public/components/export_app/export_app.scss
diff --git a/x-pack/plugins/canvas/public/apps/export/export/export_app.test.tsx b/x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx
similarity index 85%
rename from x-pack/plugins/canvas/public/apps/export/export/export_app.test.tsx
rename to x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx
index 9f019ad70aed35..7bd85616294990 100644
--- a/x-pack/plugins/canvas/public/apps/export/export/export_app.test.tsx
+++ b/x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx
@@ -8,18 +8,18 @@
import React from 'react';
import { mount } from 'enzyme';
import { ExportApp } from './export_app.component';
-import { CanvasWorkpad } from '../../../../types';
+import { CanvasWorkpad } from '../../../types';
jest.mock('style-it', () => ({
it: (css: string, Component: any) => Component,
}));
-jest.mock('../../../components/workpad_page', () => ({
+jest.mock('../workpad_page', () => ({
WorkpadPage: (props: any) =>
Page
,
}));
-jest.mock('../../../components/link', () => ({
- Link: (props: any) =>
Link
,
+jest.mock('../routing', () => ({
+ RoutingLink: (props: any) =>
Link
,
}));
describe('
', () => {
diff --git a/x-pack/plugins/canvas/public/apps/export/export/export_app.ts b/x-pack/plugins/canvas/public/components/export_app/export_app.ts
similarity index 75%
rename from x-pack/plugins/canvas/public/apps/export/export/export_app.ts
rename to x-pack/plugins/canvas/public/components/export_app/export_app.ts
index ba3fa3dd445e8b..1b9c603657b106 100644
--- a/x-pack/plugins/canvas/public/apps/export/export/export_app.ts
+++ b/x-pack/plugins/canvas/public/components/export_app/export_app.ts
@@ -6,10 +6,10 @@
*/
import { connect } from 'react-redux';
-import { initializeWorkpad } from '../../../state/actions/workpad';
-import { getWorkpad, getSelectedPageIndex } from '../../../state/selectors/workpad';
+import { initializeWorkpad } from '../../state/actions/workpad';
+import { getWorkpad, getSelectedPageIndex } from '../../state/selectors/workpad';
import { ExportApp as Component } from './export_app.component';
-import { State } from '../../../../types';
+import { State } from '../../../types';
export const ExportApp = connect(
(state: State) => ({
diff --git a/x-pack/plugins/canvas/public/apps/export/export/index.ts b/x-pack/plugins/canvas/public/components/export_app/index.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/apps/export/export/index.ts
rename to x-pack/plugins/canvas/public/components/export_app/index.ts
diff --git a/x-pack/plugins/canvas/public/components/fullscreen/index.js b/x-pack/plugins/canvas/public/components/fullscreen/index.js
deleted file mode 100644
index 9a59e142a1a34d..00000000000000
--- a/x-pack/plugins/canvas/public/components/fullscreen/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { connect } from 'react-redux';
-import { getFullscreen } from '../../state/selectors/app';
-import { Fullscreen as Component } from './fullscreen';
-
-const mapStateToProps = (state) => ({
- isFullscreen: getFullscreen(state),
-});
-
-export const Fullscreen = connect(mapStateToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/fullscreen/index.tsx b/x-pack/plugins/canvas/public/components/fullscreen/index.tsx
new file mode 100644
index 00000000000000..dbf5c378ffa1c3
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/fullscreen/index.tsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useContext } from 'react';
+// @ts-expect-error
+import { Fullscreen as Component } from './fullscreen';
+
+import { WorkpadRoutingContext } from '../../routes/workpad';
+
+export const Fullscreen: FC = ({ children }) => {
+ const { isFullscreen } = useContext(WorkpadRoutingContext);
+
+ return
;
+};
diff --git a/x-pack/plugins/canvas/public/apps/home/home_app/home_app.component.tsx b/x-pack/plugins/canvas/public/components/home_app/home_app.component.tsx
similarity index 88%
rename from x-pack/plugins/canvas/public/apps/home/home_app/home_app.component.tsx
rename to x-pack/plugins/canvas/public/components/home_app/home_app.component.tsx
index 30e9fbc1537504..712b06cb39299d 100644
--- a/x-pack/plugins/canvas/public/apps/home/home_app/home_app.component.tsx
+++ b/x-pack/plugins/canvas/public/components/home_app/home_app.component.tsx
@@ -8,9 +8,9 @@
import React, { FC } from 'react';
import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
// @ts-expect-error untyped local
-import { WorkpadManager } from '../../../components/workpad_manager';
+import { WorkpadManager } from '../workpad_manager';
// @ts-expect-error untyped local
-import { setDocTitle } from '../../../lib/doc_title';
+import { setDocTitle } from '../../lib/doc_title';
export interface Props {
onLoad: () => void;
diff --git a/x-pack/plugins/canvas/public/apps/home/home_app/home_app.scss b/x-pack/plugins/canvas/public/components/home_app/home_app.scss
similarity index 100%
rename from x-pack/plugins/canvas/public/apps/home/home_app/home_app.scss
rename to x-pack/plugins/canvas/public/components/home_app/home_app.scss
diff --git a/x-pack/plugins/canvas/public/components/home_app/home_app.tsx b/x-pack/plugins/canvas/public/components/home_app/home_app.tsx
new file mode 100644
index 00000000000000..b288612450bf75
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/home_app/home_app.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { getBaseBreadcrumb } from '../../lib/breadcrumbs';
+import { resetWorkpad } from '../../state/actions/workpad';
+import { HomeApp as Component } from './home_app.component';
+import { usePlatformService } from '../../services';
+
+export const HomeApp = () => {
+ const { setBreadcrumbs } = usePlatformService();
+ const dispatch = useDispatch();
+ const onLoad = () => dispatch(resetWorkpad());
+
+ useEffect(() => {
+ setBreadcrumbs([getBaseBreadcrumb()]);
+ }, [setBreadcrumbs]);
+
+ return
;
+};
diff --git a/x-pack/plugins/canvas/public/apps/home/home_app/index.ts b/x-pack/plugins/canvas/public/components/home_app/index.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/apps/home/home_app/index.ts
rename to x-pack/plugins/canvas/public/components/home_app/index.ts
diff --git a/x-pack/plugins/canvas/public/components/link/link.tsx b/x-pack/plugins/canvas/public/components/link/link.tsx
deleted file mode 100644
index ef78b11654b23c..00000000000000
--- a/x-pack/plugins/canvas/public/components/link/link.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { FC, MouseEvent, useContext } from 'react';
-import PropTypes from 'prop-types';
-import { EuiLink, EuiLinkProps } from '@elastic/eui';
-import { RouterContext } from '../router';
-
-import { ComponentStrings } from '../../../i18n';
-
-const { Link: strings } = ComponentStrings;
-
-const isModifiedEvent = (ev: MouseEvent) =>
- !!(ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey);
-
-interface Props {
- name: string;
- params: Record
;
-}
-
-export const Link: FC = ({
- onClick,
- target,
- name,
- params,
- children,
- ...linkArgs
-}) => {
- const router = useContext(RouterContext);
-
- if (router) {
- const navigateTo = (ev: MouseEvent) => {
- if (onClick) {
- onClick(ev);
- }
-
- if (
- !ev.defaultPrevented && // onClick prevented default
- ev.button === 0 && // ignore everything but left clicks
- !target && // let browser handle "target=_blank" etc.
- !isModifiedEvent(ev) // ignore clicks with modifier keys
- ) {
- ev.preventDefault();
- router.navigateTo(name, params);
- }
- };
-
- try {
- return (
-
- {children}
-
- );
- } catch (e) {
- return {strings.getErrorMessage(e.message)}
;
- }
- }
-
- return {strings.getErrorMessage('Router Undefined')}
;
-};
-
-Link.contextTypes = {
- router: PropTypes.object,
-};
-
-Link.propTypes = {
- name: PropTypes.string.isRequired,
- params: PropTypes.object,
-};
diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
index ab455bcdaadf62..06968d2e4be0a3 100644
--- a/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
+++ b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
@@ -11,9 +11,9 @@ import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elasti
import { DragDropContext, Droppable, Draggable, DragDropContextProps } from 'react-beautiful-dnd';
// @ts-expect-error untyped dependency
import Style from 'style-it';
-
import { ConfirmModal } from '../confirm_modal';
-import { Link } from '../link';
+import { RoutingLink } from '../routing';
+import { WorkpadRoutingContext } from '../../routes/workpad';
import { PagePreview } from '../page_preview';
import { ComponentStrings } from '../../../i18n';
@@ -131,14 +131,10 @@ export class PageManager extends Component {
resetRemove = () => this._isMounted && this.setState({ removeId: null });
doRemove = () => {
- const { onPreviousPage, onRemovePage, selectedPage } = this.props;
+ const { onRemovePage } = this.props;
const { removeId } = this.state;
this.resetRemove();
- if (removeId === selectedPage) {
- onPreviousPage();
- }
-
if (removeId !== null) {
onRemovePage(removeId);
}
@@ -156,7 +152,7 @@ export class PageManager extends Component {
};
renderPage = (page: CanvasPage, i: number) => {
- const { isWriteable, selectedPage, workpadId, workpadCSS } = this.props;
+ const { isWriteable, selectedPage, workpadCSS } = this.props;
const pageNumber = i + 1;
return (
@@ -183,18 +179,18 @@ export class PageManager extends Component {
-
- {Style.it(
- workpadCSS,
-
+
+ {({ getUrl }) => (
+
+ {Style.it(
+ workpadCSS,
+
+ )}
+
)}
-
+
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
deleted file mode 100644
index 64b97fed7e930f..00000000000000
--- a/x-pack/plugins/canvas/public/components/page_manager/page_manager.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-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_manager/page_manager.tsx b/x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx
new file mode 100644
index 00000000000000..5452fe8eae2957
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/page_manager/page_manager.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useCallback, useContext } from 'react';
+import { useSelector, useDispatch } 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';
+import { WorkpadRoutingContext } from '../../routes/workpad';
+
+export const PageManager: FC<{ onPreviousPage: () => void }> = ({ onPreviousPage }) => {
+ const dispatch = useDispatch();
+ const propsFromState = useSelector((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 { gotoPage } = useContext(WorkpadRoutingContext);
+
+ const onAddPage = useCallback(() => dispatch(pageActions.addPage({ gotoPage })), [
+ dispatch,
+ gotoPage,
+ ]);
+
+ const onMovePage = useCallback(
+ (id: string, position: number) => dispatch(pageActions.movePage(id, position, gotoPage)),
+ [dispatch, gotoPage]
+ );
+
+ const onRemovePage = useCallback(
+ (id: string) => dispatch(pageActions.removePage({ id, gotoPage })),
+ [dispatch, gotoPage]
+ );
+
+ return (
+
+ );
+};
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
deleted file mode 100644
index c9a866f5182a94..00000000000000
--- a/x-pack/plugins/canvas/public/components/page_preview/page_preview.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-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/page_preview/page_preview.tsx b/x-pack/plugins/canvas/public/components/page_preview/page_preview.tsx
new file mode 100644
index 00000000000000..0dde8ffdae54b4
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/page_preview/page_preview.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useContext, useCallback } from 'react';
+
+import { useDispatch, useSelector } 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, Props } from './page_preview.component';
+import { State } from '../../../types';
+import { WorkpadRoutingContext } from '../../routes/workpad';
+
+export const PagePreview: FC
> = (props) => {
+ const dispatch = useDispatch();
+ const stateFromProps = useSelector((state: State) => ({
+ isWriteable: isWriteable(state) && canUserWrite(state),
+ }));
+ const { gotoPage } = useContext(WorkpadRoutingContext);
+
+ const onDuplicate = useCallback(
+ (id: string) => {
+ dispatch(pageActions.duplicatePage({ id, gotoPage }));
+ },
+ [dispatch, gotoPage]
+ );
+
+ return (
+
+ );
+};
diff --git a/x-pack/plugins/canvas/public/components/router/context.ts b/x-pack/plugins/canvas/public/components/router/context.ts
deleted file mode 100644
index 273503d610d187..00000000000000
--- a/x-pack/plugins/canvas/public/components/router/context.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-
-// TODO: We should fully build out this interface for our router
-// or switch to a different router that is already typed
-interface Router {
- navigateTo: (
- name: string,
- params: Record,
- state?: Record
- ) => void;
-}
-
-export const RouterContext = React.createContext(undefined);
diff --git a/x-pack/plugins/canvas/public/components/router/index.ts b/x-pack/plugins/canvas/public/components/router/index.ts
deleted file mode 100644
index 7942fed6ae5873..00000000000000
--- a/x-pack/plugins/canvas/public/components/router/index.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { connect } from 'react-redux';
-// @ts-expect-error untyped local
-import { setFullscreen } from '../../state/actions/transient';
-import {
- enableAutoplay,
- setRefreshInterval,
- setAutoplayInterval,
-} from '../../state/actions/workpad';
-// @ts-expect-error untyped local
-import { Router as Component } from './router';
-import { State } from '../../../types';
-export * from './context';
-
-const mapDispatchToProps = {
- enableAutoplay,
- setAutoplayInterval,
- setFullscreen,
- setRefreshInterval,
-};
-
-const mapStateToProps = (state: State) => ({
- refreshInterval: state.transient.refresh.interval,
- autoplayInterval: state.transient.autoplay.interval,
- autoplay: state.transient.autoplay.enabled,
- fullscreen: state.transient.fullScreen,
-});
-
-export const Router = connect(
- mapStateToProps,
- mapDispatchToProps,
- (stateProps, dispatchProps, ownProps) => {
- return {
- ...ownProps,
- ...dispatchProps,
- setRefreshInterval: (interval: number) => {
- if (interval !== stateProps.refreshInterval) {
- dispatchProps.setRefreshInterval(interval);
- }
- },
- setAutoplayInterval: (interval: number) => {
- if (interval !== stateProps.autoplayInterval) {
- dispatchProps.setRefreshInterval(interval);
- }
- },
- enableAutoplay: (autoplay: boolean) => {
- if (autoplay !== stateProps.autoplay) {
- dispatchProps.enableAutoplay(autoplay);
- }
- },
- setFullscreen: (fullscreen: boolean) => {
- if (fullscreen !== stateProps.fullscreen) {
- dispatchProps.setFullscreen(fullscreen);
- }
- },
- };
- }
-)(Component);
diff --git a/x-pack/plugins/canvas/public/components/router/router.js b/x-pack/plugins/canvas/public/components/router/router.js
deleted file mode 100644
index c68fbe9bdd98e8..00000000000000
--- a/x-pack/plugins/canvas/public/components/router/router.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { routerProvider } from '../../lib/router_provider';
-import { getAppState } from '../../lib/app_state';
-import { getTimeInterval } from '../../lib/time_interval';
-import { CanvasLoading } from './canvas_loading';
-import { RouterContext } from './';
-
-export class Router extends React.PureComponent {
- static propTypes = {
- showLoading: PropTypes.bool.isRequired,
- onLoad: PropTypes.func.isRequired,
- onError: PropTypes.func.isRequired,
- routes: PropTypes.array.isRequired,
- loadingMessage: PropTypes.string,
- onRouteChange: PropTypes.func,
- setFullscreen: PropTypes.func.isRequired,
- };
-
- static childContextTypes = {
- router: PropTypes.object.isRequired,
- };
-
- state = {
- router: {},
- activeComponent: CanvasLoading,
- };
-
- getChildContext() {
- const { router } = this.state;
- return { router };
- }
-
- UNSAFE_componentWillMount() {
- // routerProvider is a singleton, and will only ever return one instance
- const { routes, onRouteChange, onLoad, onError } = this.props;
- const router = routerProvider(routes);
- let firstLoad = true;
-
- // when the component in the route changes, render it
- router.onPathChange((route) => {
- const { pathname } = route.location;
- const { component } = route.meta;
-
- if (!component) {
- // TODO: render some kind of 404 page, maybe from a prop?
- if (process.env.NODE_ENV !== 'production') {
- console.warn(`No component defined on route: ${route.name}`);
- }
-
- return;
- }
-
- // if this is the first load, execute the route
- if (firstLoad) {
- firstLoad = false;
-
- // execute the route
- router
- .execute()
- .then(() => onLoad())
- .catch((err) => onError(err));
- }
-
- const appState = getAppState();
-
- if (appState.__fullscreen) {
- this.props.setFullscreen(appState.__fullscreen);
- }
-
- if (appState.__refreshInterval) {
- this.props.setRefreshInterval(getTimeInterval(appState.__refreshInterval));
- }
-
- if (!!appState.__autoplayInterval) {
- this.props.enableAutoplay(true);
- this.props.setAutoplayInterval(getTimeInterval(appState.__autoplayInterval));
- }
-
- // notify upstream handler of route change
- onRouteChange && onRouteChange(pathname);
-
- this.setState({ activeComponent: component });
- });
-
- this.setState({ router });
- }
-
- render() {
- // show loading
- if (this.props.showLoading) {
- return React.createElement(CanvasLoading, { msg: this.props.loadingMessage });
- }
-
- return (
-
-
-
- );
- }
-}
diff --git a/x-pack/plugins/canvas/public/apps/home/index.ts b/x-pack/plugins/canvas/public/components/routing/index.ts
similarity index 77%
rename from x-pack/plugins/canvas/public/apps/home/index.ts
rename to x-pack/plugins/canvas/public/components/routing/index.ts
index bfa5245af9e9a9..a87401f9521039 100644
--- a/x-pack/plugins/canvas/public/apps/home/index.ts
+++ b/x-pack/plugins/canvas/public/components/routing/index.ts
@@ -5,5 +5,4 @@
* 2.0.
*/
-export { routes } from './routes';
-export { HomeApp } from './home_app';
+export * from './routing_link';
diff --git a/x-pack/plugins/canvas/public/components/routing/routing_link.tsx b/x-pack/plugins/canvas/public/components/routing/routing_link.tsx
new file mode 100644
index 00000000000000..bb3123de3fec8e
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/routing/routing_link.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC } from 'react';
+import { EuiLink, EuiLinkProps, EuiButtonIcon, EuiButtonIconProps } from '@elastic/eui';
+import { useHistory } from 'react-router-dom';
+
+interface RoutingProps {
+ to: string;
+}
+
+type RoutingLinkProps = Omit & RoutingProps;
+
+export const RoutingLink: FC = ({ to, ...rest }) => {
+ const history = useHistory();
+
+ // Generate the correct link href (with basename accounted for)
+ const href = history.createHref({ pathname: to });
+
+ const props = { ...rest, href } as EuiLinkProps;
+
+ return ;
+};
+
+type RoutingButtonIconProps = Omit & RoutingProps;
+
+export const RoutingButtonIcon: FC = ({ to, ...rest }) => {
+ const history = useHistory();
+
+ // Generate the correct link href (with basename accounted for)
+ const href = history.createHref({ pathname: to });
+
+ const props = { ...rest, href } as EuiButtonIconProps;
+
+ return ;
+};
diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx b/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
index 6e5c936a113bf8..baafbdafcc549c 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
+++ b/x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
@@ -9,7 +9,6 @@ import React, { FC, useState, useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import {
EuiButtonEmpty,
- EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiModal,
@@ -19,13 +18,15 @@ import {
// @ts-expect-error untyped local
import { WorkpadManager } from '../workpad_manager';
-import { RouterContext } from '../router';
import { PageManager } from '../page_manager';
import { Expression } from '../expression';
import { Tray } from './tray';
import { CanvasElement } from '../../../types';
import { ComponentStrings } from '../../../i18n';
+import { RoutingButtonIcon } from '../routing';
+
+import { WorkpadRoutingContext } from '../../routes/workpad';
const { Toolbar: strings } = ComponentStrings;
@@ -50,7 +51,7 @@ export const Toolbar: FC = ({
}) => {
const [activeTray, setActiveTray] = useState(null);
const [showWorkpadManager, setShowWorkpadManager] = useState(false);
- const router = useContext(RouterContext);
+ const { getUrl, previousPage } = useContext(WorkpadRoutingContext);
// While the tray doesn't get activated if the workpad isn't writeable,
// this effect will ensure that if the tray is open and the workpad
@@ -61,20 +62,6 @@ export const Toolbar: FC = ({
}
}, [isWriteable, activeTray]);
- if (!router) {
- return {strings.getErrorMessage('Router Undefined')}
;
- }
-
- const nextPage = () => {
- const page = Math.min(selectedPageNumber + 1, totalPages);
- router.navigateTo('loadWorkpad', { id: workpadId, page });
- };
-
- const previousPage = () => {
- const page = Math.max(1, selectedPageNumber - 1);
- router.navigateTo('loadWorkpad', { id: workpadId, page });
- };
-
const elementIsSelected = Boolean(selectedElement);
const toggleTray = (tray: TrayType) => {
@@ -119,11 +106,11 @@ export const Toolbar: FC = ({
-
@@ -133,11 +120,11 @@ export const Toolbar: FC = ({
- = totalPages}
+ isDisabled={selectedPageNumber >= totalPages}
aria-label={strings.getNextPageAriaLabel()}
/>
diff --git a/x-pack/plugins/canvas/public/components/workpad/index.js b/x-pack/plugins/canvas/public/components/workpad/index.js
index c24be53418754c..2ebefa5e0e3228 100644
--- a/x-pack/plugins/canvas/public/components/workpad/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad/index.js
@@ -4,14 +4,13 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-
+import React, { useContext, useCallback } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { pure, compose, withState, withProps, getContext, withHandlers } from 'recompose';
import { transitionsRegistry } from '../../lib/transitions_registry';
-import { undoHistory, redoHistory } from '../../state/actions/history';
import { fetchAllRenderables } from '../../state/actions/elements';
-import { setZoomScale, setFullscreen } from '../../state/actions/transient';
+import { setZoomScale } from '../../state/actions/transient';
import { getFullscreen, getZoomScale } from '../../state/selectors/app';
import {
getSelectedPageIndex,
@@ -22,7 +21,8 @@ import {
import { zoomHandlerCreators } from '../../lib/app_handler_creators';
import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric';
import { LAUNCHED_FULLSCREEN, LAUNCHED_FULLSCREEN_AUTOPLAY } from '../../../common/lib/constants';
-import { Workpad as Component } from './workpad';
+import { WorkpadRoutingContext } from '../../routes/workpad';
+import { Workpad as WorkpadComponent } from './workpad';
const mapStateToProps = (state) => {
const { width, height, id: workpadId, css: workpadCss } = getWorkpad(state);
@@ -40,11 +40,8 @@ const mapStateToProps = (state) => {
};
const mapDispatchToProps = {
- undoHistory,
- redoHistory,
fetchAllRenderables,
setZoomScale,
- setFullscreen,
};
const mergeProps = (stateProps, dispatchProps, ownProps) => {
@@ -52,19 +49,38 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
...ownProps,
...stateProps,
...dispatchProps,
- setFullscreen: (value) => {
- dispatchProps.setFullscreen(value);
+ };
+};
- if (value === true) {
+const AddContexts = (props) => {
+ const { isFullscreen, setFullscreen, undo, redo, autoplayInterval } = useContext(
+ WorkpadRoutingContext
+ );
+
+ const setFullscreenWithEffect = useCallback(
+ (fullscreen) => {
+ setFullscreen(fullscreen);
+ if (fullscreen === true) {
trackCanvasUiMetric(
METRIC_TYPE.COUNT,
- stateProps.autoplayEnabled
+ autoplayInterval > 0
? [LAUNCHED_FULLSCREEN, LAUNCHED_FULLSCREEN_AUTOPLAY]
: LAUNCHED_FULLSCREEN
);
}
},
- };
+ [setFullscreen, autoplayInterval]
+ );
+
+ return (
+
+ );
};
export const Workpad = compose(
@@ -119,4 +135,4 @@ export const Workpad = compose(
},
}),
withHandlers(zoomHandlerCreators)
-)(Component);
+)(AddContexts);
diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js
index 8c5b095c7b1052..1e46558c7a377b 100644
--- a/x-pack/plugins/canvas/public/components/workpad/workpad.js
+++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js
@@ -123,14 +123,6 @@ export class Workpad extends React.PureComponent {
style={fsStyle}
data-shared-items-count={totalElementCount}
>
- {isFullscreen && (
-
- )}
{pages.map((page, i) => (
, trackMetric);
diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_telemetry.tsx b/x-pack/plugins/canvas/public/components/workpad_app/workpad_telemetry.tsx
similarity index 94%
rename from x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_telemetry.tsx
rename to x-pack/plugins/canvas/public/components/workpad_app/workpad_telemetry.tsx
index fa28b65e318b41..0915c757ff8936 100644
--- a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_telemetry.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_app/workpad_telemetry.tsx
@@ -7,9 +7,9 @@
import React, { useState, useEffect } from 'react';
import { connect, ConnectedProps } from 'react-redux';
-import { trackCanvasUiMetric, METRIC_TYPE } from '../../../lib/ui_metric';
-import { getElementCounts } from '../../../state/selectors/workpad';
-import { getArgs } from '../../../state/selectors/resolved_args';
+import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric';
+import { getElementCounts } from '../../state/selectors/workpad';
+import { getArgs } from '../../state/selectors/resolved_args';
const WorkpadLoadedMetric = 'workpad-loaded';
const WorkpadLoadedWithErrorsMetric = 'workpad-loaded-with-errors';
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.tsx
similarity index 93%
rename from x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.ts
rename to x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.tsx
index a272c4d1aa6969..00f4810be36084 100644
--- 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.tsx
@@ -5,6 +5,7 @@
* 2.0.
*/
+import React, { FC, useContext } from 'react';
import { connect } from 'react-redux';
import { compose, withHandlers, withProps } from 'recompose';
import { Dispatch } from 'redux';
@@ -35,6 +36,7 @@ import {
alignmentDistributionHandlerCreators,
} from '../../../lib/element_handler_creators';
import { EditMenu as Component, Props as ComponentProps } from './edit_menu.component';
+import { WorkpadRoutingContext } from '../../../routes/workpad';
type LayoutState = any;
@@ -102,8 +104,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
elementLayer: (pageId: string, elementId: string, movement: number) => {
dispatch(elementLayer({ pageId, elementId, movement }));
},
- undoHistory: () => dispatch(undoHistory()),
- redoHistory: () => dispatch(redoHistory()),
dispatch,
});
@@ -123,6 +123,12 @@ const mergeProps = (
};
};
+export const EditMenuWithContext: FC = (props) => {
+ const { undo, redo } = useContext(WorkpadRoutingContext);
+
+ return ;
+};
+
export const EditMenu = compose(
connect(mapStateToProps, mapDispatchToProps, mergeProps),
withProps(() => ({ hasPasteData: Boolean(getClipboardData()) })),
@@ -131,4 +137,4 @@ export const EditMenu = compose(
withHandlers(layerHandlerCreators),
withHandlers(groupHandlerCreators),
withHandlers(alignmentDistributionHandlerCreators)
-)(Component);
+)(EditMenuWithContext);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx b/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx
index 83058209f72554..5c35fa75989cf5 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx
@@ -21,7 +21,7 @@ interface Props {
setFullscreen: (fullscreen: boolean) => void;
autoplayEnabled: boolean;
- enableAutoplay: (autoplay: boolean) => void;
+ toggleAutoplay: () => void;
onPageChange: (pageNumber: number) => void;
previousPage: () => void;
@@ -39,19 +39,37 @@ export class FullscreenControl extends React.PureComponent {
children: PropTypes.func.isRequired,
};
+ /*
+ We need these instance functions because ReactShortcuts bind the handlers on it's mount,
+ but then does no rebinding if it's props change. Using these instance functions will
+ properly handle changes to incoming props since the instance functions are bound to the components
+ "this" context
+ */
_toggleFullscreen = () => {
const { setFullscreen, isFullscreen } = this.props;
setFullscreen(!isFullscreen);
};
+ toggleAutoplay = () => {
+ this.props.toggleAutoplay();
+ };
+
+ nextPage = () => {
+ this.props.nextPage();
+ };
+
+ previousPage = () => {
+ this.props.previousPage();
+ };
+
// handle keypress events for presentation events
_keyMap: { [key: string]: (...args: any[]) => void } = {
REFRESH: this.props.fetchAllRenderables,
- PREV: this.props.previousPage,
- NEXT: this.props.nextPage,
+ PREV: this.previousPage,
+ NEXT: this.nextPage,
FULLSCREEN: this._toggleFullscreen,
FULLSCREEN_EXIT: this._toggleFullscreen,
- PAGE_CYCLE_TOGGLE: () => this.props.enableAutoplay(!this.props.autoplayEnabled),
+ PAGE_CYCLE_TOGGLE: this.toggleAutoplay,
};
_keyHandler = (action: string, event: KeyboardEvent) => {
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/index.js b/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/index.js
index 630f7407f8a8d3..e428dbba57b9b4 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/fullscreen_control/index.js
@@ -5,18 +5,12 @@
* 2.0.
*/
-import { connect } from 'react-redux';
+import React, { useContext, useCallback } from 'react';
+import { connect, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import { withState, withProps, withHandlers, compose, getContext } from 'recompose';
-import { setFullscreen, selectToplevelNodes } from '../../../state/actions/transient';
-import { enableAutoplay } from '../../../state/actions/workpad';
-import { getFullscreen } from '../../../state/selectors/app';
-import {
- getAutoplay,
- getSelectedPageIndex,
- getPages,
- getWorkpad,
-} from '../../../state/selectors/workpad';
+import { selectToplevelNodes } from '../../../state/actions/transient';
+import { getSelectedPageIndex, getPages, getWorkpad } from '../../../state/selectors/workpad';
import { trackCanvasUiMetric, METRIC_TYPE } from '../../../lib/ui_metric';
import {
LAUNCHED_FULLSCREEN,
@@ -24,6 +18,7 @@ import {
} from '../../../../common/lib/constants';
import { transitionsRegistry } from '../../../lib/transitions_registry';
import { fetchAllRenderables } from '../../../state/actions/elements';
+import { WorkpadRoutingContext } from '../../../routes/workpad/workpad_routing_context';
import { FullscreenControl as Component } from './fullscreen_control';
// TODO: a lot of this is borrowed code from `/components/workpad/index.js`.
@@ -32,44 +27,65 @@ const mapStateToProps = (state) => ({
workpadId: getWorkpad(state).id,
pages: getPages(state),
selectedPageNumber: getSelectedPageIndex(state) + 1,
- isFullscreen: getFullscreen(state),
- autoplayEnabled: getAutoplay(state).enabled,
});
const mapDispatchToProps = (dispatch) => ({
- setFullscreen: (value) => {
- dispatch(setFullscreen(value));
- value && dispatch(selectToplevelNodes([]));
- },
- enableAutoplay: (enabled) => dispatch(enableAutoplay(enabled)),
fetchAllRenderables: () => dispatch(fetchAllRenderables()),
});
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
- return {
- ...ownProps,
- ...stateProps,
- ...dispatchProps,
- setFullscreen: (value) => {
- dispatchProps.setFullscreen(value);
+export const FullscreenControlWithContext = (props) => {
+ const {
+ isFullscreen,
+ autoplayInterval,
+ nextPage,
+ previousPage,
+ setFullscreen,
+ setIsAutoplayPaused,
+ isAutoplayPaused,
+ } = useContext(WorkpadRoutingContext);
+
+ const autoplayEnabled = autoplayInterval > 0 ? true : false;
+ const dispatch = useDispatch();
+
+ const setFullscreenWithEffects = useCallback(
+ (value) => {
+ value && dispatch(selectToplevelNodes([]));
+ setFullscreen(value);
if (value === true) {
trackCanvasUiMetric(
METRIC_TYPE.COUNT,
- stateProps.autoplayEnabled
+ autoplayEnabled
? [LAUNCHED_FULLSCREEN, LAUNCHED_FULLSCREEN_AUTOPLAY]
: LAUNCHED_FULLSCREEN
);
}
},
- };
+ [dispatch, setFullscreen, autoplayEnabled]
+ );
+
+ const toggleAutoplay = useCallback(() => {
+ setIsAutoplayPaused(!isAutoplayPaused);
+ }, [setIsAutoplayPaused, isAutoplayPaused]);
+
+ return (
+
+ );
};
export const FullscreenControl = compose(
getContext({
router: PropTypes.object,
}),
- connect(mapStateToProps, mapDispatchToProps, mergeProps),
+ connect(mapStateToProps, mapDispatchToProps),
withState('transition', 'setTransition', null),
withState('prevSelectedPageNumber', 'setPrevSelectedPageNumber', 0),
withProps(({ selectedPageNumber, prevSelectedPageNumber, transition }) => {
@@ -89,29 +105,7 @@ export const FullscreenControl = compose(
return { getAnimation };
}),
- withHandlers({
- onPageChange: (props) => (pageNumber) => {
- if (pageNumber === props.selectedPageNumber) {
- return;
- }
- props.setPrevSelectedPageNumber(props.selectedPageNumber);
- const transitionPage = Math.max(props.selectedPageNumber, pageNumber) - 1;
- const { transition } = props.pages[transitionPage];
- if (transition) {
- props.setTransition(transition);
- }
- props.router.navigateTo('loadWorkpad', { id: props.workpadId, page: pageNumber });
- },
- }),
withHandlers({
onTransitionEnd: ({ setTransition }) => () => setTransition(null),
- nextPage: (props) => () => {
- const pageNumber = Math.min(props.selectedPageNumber + 1, props.pages.length);
- props.onPageChange(pageNumber);
- },
- previousPage: (props) => () => {
- const pageNumber = Math.max(1, props.selectedPageNumber - 1);
- props.onPageChange(pageNumber);
- },
})
-)(Component);
+)(FullscreenControlWithContext);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx
index 88f383bf29c6bf..1508f8683b8c1e 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx
@@ -32,7 +32,7 @@ const { getSecondsText, getMinutesText, getHoursText } = timeStrings;
interface Props {
refreshInterval: number;
- setRefresh: (interval: number | undefined) => void;
+ setRefresh: (interval: number) => void;
disableInterval: () => void;
}
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx
index d054475d811c25..55373d7a3515c3 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx
@@ -5,13 +5,15 @@
* 2.0.
*/
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback } from 'react';
import PropTypes from 'prop-types';
import {
+ EuiButtonIcon,
EuiDescriptionList,
EuiDescriptionListDescription,
EuiDescriptionListTitle,
EuiTitle,
+ EuiToolTip,
EuiHorizontalRule,
EuiLink,
EuiSpacer,
@@ -30,7 +32,7 @@ const { getSecondsText, getMinutesText } = timeStrings;
interface Props {
autoplayInterval: number;
- onSetInterval: (interval: number | undefined) => void;
+ onSetInterval: (interval: number) => void;
}
interface ListGroupProps {
@@ -53,6 +55,10 @@ const ListGroup = ({ children, ...rest }: ListGroupProps) => (
const generateId = htmlIdGenerator();
export const KioskControls = ({ autoplayInterval, onSetInterval }: Props) => {
+ const disableAutoplay = useCallback(() => {
+ onSetInterval(0);
+ }, [onSetInterval]);
+
const RefreshItem = ({ duration, label, descriptionId }: RefreshItemProps) => (
onSetInterval(duration)} aria-describedby={descriptionId}>
@@ -71,12 +77,37 @@ export const KioskControls = ({ autoplayInterval, onSetInterval }: Props) => {
className="canvasViewMenu__kioskSettings"
>
-
- {strings.getTitle()}
-
- {timeStrings.getCycleTimeText(interval.length, interval.format)}
-
-
+
+
+
+ {strings.getTitle()}
+
+ {autoplayInterval > 0 ? (
+ <>{timeStrings.getCycleTimeText(interval.length, interval.format)}
+ ) : (
+ <>{strings.getAutoplayListDurationManualText()}
+ )}
+
+
+
+
+
+
+ {autoplayInterval > 0 ? (
+
+
+
+
+
+ ) : null}
+
+
+
+
{strings.getCycleFormLabel()}
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
index ddac362e9fe500..8f92db4e7f3f46 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
@@ -76,7 +76,7 @@ export interface Props {
/**
* Sets auto refresh interval
*/
- setRefreshInterval: (interval?: number) => void;
+ setRefreshInterval: (interval: number) => void;
/**
* Is autoplay enabled?
*/
@@ -92,7 +92,7 @@ export interface Props {
/**
* Sets autoplay interval
*/
- setAutoplayInterval: (interval?: number) => void;
+ setAutoplayInterval: (interval: number) => void;
}
export const ViewMenu: FunctionComponent = ({
@@ -113,7 +113,7 @@ export const ViewMenu: FunctionComponent = ({
enableAutoplay,
setAutoplayInterval,
}) => {
- const setRefresh = (val: number | undefined) => setRefreshInterval(val);
+ const setRefresh = (val: number) => setRefreshInterval(val);
const disableInterval = () => {
setRefresh(0);
@@ -196,16 +196,6 @@ export const ViewMenu: FunctionComponent = ({
closePopover();
},
},
- {
- name: autoplayEnabled
- ? strings.getAutoplayOffMenuItemLabel()
- : strings.getAutoplayOnMenuItemLabel(),
- icon: autoplayEnabled ? 'stop' : 'play',
- onClick: () => {
- enableAutoplay(!autoplayEnabled);
- closePopover();
- },
- },
{
name: strings.getAutoplaySettingsMenuItemLabel(),
icon: 'empty',
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.tsx
similarity index 64%
rename from x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts
rename to x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx
index cd143ff240463b..7b9c5b767aba0f 100644
--- 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.tsx
@@ -4,8 +4,8 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-
-import { connect } from 'react-redux';
+import React, { FC, useCallback, useContext } from 'react';
+import { connect, useDispatch } from 'react-redux';
import { compose, withHandlers } from 'recompose';
import { Dispatch } from 'redux';
import { zoomHandlerCreators } from '../../../lib/app_handler_creators';
@@ -13,22 +13,16 @@ 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 { setZoomScale, selectToplevelNodes } from '../../../state/actions/transient';
+import { setWriteable } from '../../../state/actions/workpad';
import { getZoomScale, canUserWrite } from '../../../state/selectors/app';
import {
getWorkpadBoundingBox,
getWorkpadWidth,
getWorkpadHeight,
isWriteable,
- getRefreshInterval,
- getAutoplay,
} from '../../../state/selectors/workpad';
+import { WorkpadRoutingContext } from '../../../routes/workpad';
import { ViewMenu as Component, Props as ComponentProps } from './view_menu.component';
import { getFitZoomScale } from './lib/get_fit_zoom_scale';
@@ -43,38 +37,31 @@ interface StateProps {
interface DispatchProps {
setWriteable: (isWorkpadWriteable: boolean) => void;
setZoomScale: (scale: number) => void;
- setFullscreen: (showFullscreen: boolean) => void;
+ doRefresh: () => void;
}
-const mapStateToProps = (state: State) => {
- const { enabled, interval } = getAutoplay(state);
+type PropsFromContext =
+ | 'enterFullscreen'
+ | 'setAutoplayInterval'
+ | 'autoplayEnabled'
+ | 'autoplayInterval'
+ | 'setRefreshInterval'
+ | 'refreshInterval';
+const mapStateToProps = (state: 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 = (
@@ -89,13 +76,40 @@ const mergeProps = (
...dispatchProps,
...ownProps,
toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
- enterFullscreen: () => dispatchProps.setFullscreen(true),
fitToWindow: () =>
dispatchProps.setZoomScale(getFitZoomScale(boundingBox, workpadWidth, workpadHeight)),
};
};
-export const ViewMenu = compose(
+const ViewMenuWithContext: FC> = (props) => {
+ const dispatch = useDispatch();
+ const {
+ autoplayInterval,
+ setAutoplayInterval,
+ setFullscreen,
+ setRefreshInterval,
+ refreshInterval,
+ } = useContext(WorkpadRoutingContext);
+
+ const enterFullscreen = useCallback(() => {
+ dispatch(selectToplevelNodes([]));
+ setFullscreen(true);
+ }, [dispatch, setFullscreen]);
+
+ return (
+
+ );
+};
+
+export const ViewMenu = compose, {}>(
connect(mapStateToProps, mapDispatchToProps, mergeProps),
withHandlers(zoomHandlerCreators)
-)(Component);
+)(ViewMenuWithContext);
diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/index.js b/x-pack/plugins/canvas/public/components/workpad_loader/index.js
deleted file mode 100644
index b279000837dd50..00000000000000
--- a/x-pack/plugins/canvas/public/components/workpad_loader/index.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose, withState, getContext, withHandlers, withProps } from 'recompose';
-import moment from 'moment';
-import * as workpadService from '../../lib/workpad_service';
-import { canUserWrite } from '../../state/selectors/app';
-import { getWorkpad } from '../../state/selectors/workpad';
-import { getId } from '../../lib/get_id';
-import { downloadWorkpad } from '../../lib/download_workpad';
-import { ComponentStrings, ErrorStrings } from '../../../i18n';
-import { withServices } from '../../services';
-import { WorkpadLoader as Component } from './workpad_loader';
-
-const { WorkpadLoader: strings } = ComponentStrings;
-const { WorkpadLoader: errors } = ErrorStrings;
-
-const mapStateToProps = (state) => ({
- workpadId: getWorkpad(state).id,
- canUserWrite: canUserWrite(state),
-});
-
-export const WorkpadLoader = compose(
- getContext({
- router: PropTypes.object,
- }),
- connect(mapStateToProps),
- withState('workpads', 'setWorkpads', null),
- withServices,
- withProps(({ services }) => ({
- notify: services.notify,
- })),
- withHandlers(({ services }) => ({
- // Workpad creation via navigation
- createWorkpad: (props) => async (workpad) => {
- // workpad data uploaded, create and load it
- if (workpad != null) {
- try {
- await workpadService.create(workpad);
- props.router.navigateTo('loadWorkpad', { id: workpad.id, page: 1 });
- } catch (err) {
- services.notify.error(err, {
- title: errors.getUploadFailureErrorMessage(),
- });
- }
- return;
- }
-
- props.router.navigateTo('createWorkpad');
- },
-
- // Workpad search
- findWorkpads: ({ setWorkpads }) => async (text) => {
- try {
- const workpads = await workpadService.find(text);
- setWorkpads(workpads);
- } catch (err) {
- services.notify.error(err, { title: errors.getFindFailureErrorMessage() });
- }
- },
-
- // Workpad import/export methods
- downloadWorkpad: () => (workpadId) => downloadWorkpad(workpadId),
-
- // Clone workpad given an id
- cloneWorkpad: (props) => async (workpadId) => {
- try {
- const workpad = await workpadService.get(workpadId);
- workpad.name = strings.getClonedWorkpadName(workpad.name);
- workpad.id = getId('workpad');
- await workpadService.create(workpad);
- props.router.navigateTo('loadWorkpad', { id: workpad.id, page: 1 });
- } catch (err) {
- services.notify.error(err, { title: errors.getCloneFailureErrorMessage() });
- }
- },
-
- // Remove workpad given an array of id
- removeWorkpads: (props) => async (workpadIds) => {
- const { setWorkpads, workpads, workpadId: loadedWorkpad } = props;
-
- const removeWorkpads = workpadIds.map((id) =>
- workpadService
- .remove(id)
- .then(() => ({ id, err: null }))
- .catch((err) => ({
- id,
- err,
- }))
- );
-
- return Promise.all(removeWorkpads).then((results) => {
- let redirectHome = false;
-
- const [passes, errored] = results.reduce(
- ([passes, errors], result) => {
- if (result.id === loadedWorkpad && !result.err) {
- redirectHome = true;
- }
-
- if (result.err) {
- errors.push(result.id);
- } else {
- passes.push(result.id);
- }
-
- return [passes, errors];
- },
- [[], []]
- );
-
- const remainingWorkpads = workpads.workpads.filter(({ id }) => !passes.includes(id));
-
- const workpadState = {
- total: remainingWorkpads.length,
- workpads: remainingWorkpads,
- };
-
- if (errored.length > 0) {
- services.notify.error(errors.getDeleteFailureErrorMessage());
- }
-
- setWorkpads(workpadState);
-
- if (redirectHome) {
- props.router.navigateTo('home');
- }
-
- return errored.map(({ id }) => id);
- });
- },
- })),
- withProps((props) => ({
- formatDate: (date) => {
- const dateFormat = props.services.platform.getUISetting('dateFormat');
- return date && moment(date).format(dateFormat);
- },
- }))
-)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/index.tsx b/x-pack/plugins/canvas/public/components/workpad_loader/index.tsx
new file mode 100644
index 00000000000000..2afd5fe70abe12
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_loader/index.tsx
@@ -0,0 +1,173 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useState, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import moment from 'moment';
+// @ts-expect-error
+import { getDefaultWorkpad } from '../../state/defaults';
+import { canUserWrite as canUserWriteSelector } from '../../state/selectors/app';
+import { getWorkpad } from '../../state/selectors/workpad';
+import { getId } from '../../lib/get_id';
+import { downloadWorkpad } from '../../lib/download_workpad';
+import { ComponentStrings, ErrorStrings } from '../../../i18n';
+import { State, CanvasWorkpad } from '../../../types';
+import { useNotifyService, useWorkpadService, usePlatformService } from '../../services';
+// @ts-expect-error
+import { WorkpadLoader as Component } from './workpad_loader';
+
+const { WorkpadLoader: strings } = ComponentStrings;
+const { WorkpadLoader: errors } = ErrorStrings;
+
+type WorkpadStatePromise = ReturnType['find']>;
+type WorkpadState = WorkpadStatePromise extends PromiseLike ? U : never;
+
+export const WorkpadLoader: FC<{ onClose: () => void }> = ({ onClose }) => {
+ const fromState = useSelector((state: State) => ({
+ workpadId: getWorkpad(state).id,
+ canUserWrite: canUserWriteSelector(state),
+ }));
+
+ const [workpadsState, setWorkpadsState] = useState(null);
+ const workpadService = useWorkpadService();
+ const notifyService = useNotifyService();
+ const platformService = usePlatformService();
+ const history = useHistory();
+
+ const createWorkpad = useCallback(
+ async (_workpad: CanvasWorkpad | null | undefined) => {
+ const workpad = _workpad || getDefaultWorkpad();
+ if (workpad != null) {
+ try {
+ await workpadService.create(workpad);
+ history.push(`/workpad/${workpad.id}/page/1`);
+ } catch (err) {
+ notifyService.error(err, {
+ title: errors.getUploadFailureErrorMessage(),
+ });
+ }
+ return;
+ }
+ },
+ [workpadService, notifyService, history]
+ );
+
+ const findWorkpads = useCallback(
+ async (text) => {
+ try {
+ const fetchedWorkpads = await workpadService.find(text);
+ setWorkpadsState(fetchedWorkpads);
+ } catch (err) {
+ notifyService.error(err, { title: errors.getFindFailureErrorMessage() });
+ }
+ },
+ [notifyService, workpadService]
+ );
+
+ const onDownloadWorkpad = useCallback((workpadId: string) => downloadWorkpad(workpadId), []);
+
+ const cloneWorkpad = useCallback(
+ async (workpadId: string) => {
+ try {
+ const workpad = await workpadService.get(workpadId);
+ workpad.name = strings.getClonedWorkpadName(workpad.name);
+ workpad.id = getId('workpad');
+ await workpadService.create(workpad);
+ history.push(`/workpad/${workpad.id}/page/1`);
+ } catch (err) {
+ notifyService.error(err, { title: errors.getCloneFailureErrorMessage() });
+ }
+ },
+ [notifyService, workpadService, history]
+ );
+
+ const removeWorkpads = useCallback(
+ (workpadIds: string[]) => {
+ if (workpadsState === null) {
+ return;
+ }
+
+ const removedWorkpads = workpadIds.map(async (id) => {
+ try {
+ await workpadService.remove(id);
+ return { id, err: null };
+ } catch (err) {
+ return { id, err };
+ }
+ });
+
+ return Promise.all(removedWorkpads).then((results) => {
+ let redirectHome = false;
+
+ const [passes, errored] = results.reduce<[string[], string[]]>(
+ ([passesArr, errorsArr], result) => {
+ if (result.id === fromState.workpadId && !result.err) {
+ redirectHome = true;
+ }
+
+ if (result.err) {
+ errorsArr.push(result.id);
+ } else {
+ passesArr.push(result.id);
+ }
+
+ return [passesArr, errorsArr];
+ },
+ [[], []]
+ );
+
+ const remainingWorkpads = workpadsState.workpads.filter(({ id }) => !passes.includes(id));
+
+ const workpadState = {
+ total: remainingWorkpads.length,
+ workpads: remainingWorkpads,
+ };
+
+ if (errored.length > 0) {
+ notifyService.error(errors.getDeleteFailureErrorMessage());
+ }
+
+ setWorkpadsState(workpadState);
+
+ if (redirectHome) {
+ history.push('/');
+ }
+
+ return errored;
+ });
+ },
+ [history, workpadService, fromState.workpadId, workpadsState, notifyService]
+ );
+
+ const formatDate = useCallback(
+ (date: any) => {
+ const dateFormat = platformService.getUISetting('dateFormat');
+ return date && moment(date).format(dateFormat);
+ },
+ [platformService]
+ );
+
+ const { workpadId, canUserWrite } = fromState;
+
+ return (
+
+ );
+};
diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js b/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js
index 25c17fabe9fad8..9c232ab43ec8d0 100644
--- a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js
+++ b/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js
@@ -22,7 +22,7 @@ import {
} from '@elastic/eui';
import { orderBy } from 'lodash';
import { ConfirmModal } from '../confirm_modal';
-import { Link } from '../link';
+import { RoutingLink } from '../routing';
import { Paginate } from '../paginate';
import { ComponentStrings } from '../../../i18n';
import { WorkpadDropzone } from './workpad_dropzone';
@@ -186,14 +186,13 @@ export class WorkpadLoader extends React.PureComponent {
const workpadName = getDisplayName(name, workpad, loadedWorkpad);
return (
-
{workpadName}
-
+
);
},
},
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/index.js b/x-pack/plugins/canvas/public/components/workpad_page/index.js
index 04ceb1266f7c96..6839dc0a128ed7 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/index.js
@@ -5,13 +5,15 @@
* 2.0.
*/
+import React, { useContext } from 'react';
import isEqual from 'react-fast-compare';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { branch, compose, shouldUpdate, withProps } from 'recompose';
-import { canUserWrite, getFullscreen } from '../../state/selectors/app';
+import { canUserWrite } from '../../state/selectors/app';
import { getNodes, getPageById, isWriteable } from '../../state/selectors/workpad';
import { not } from '../../lib/aeroelastic/functional';
+import { WorkpadRoutingContext } from '../../routes/workpad';
import { StaticPage } from './workpad_static_page';
import { InteractivePage } from './workpad_interactive_page';
@@ -26,19 +28,25 @@ const animationProps = ({ animation, isSelected }) =>
}
: { className: isSelected ? 'isActive' : 'isInactive', animationStyle: {} };
-const mapStateToProps = (state, { isSelected, pageId }) => ({
- isInteractive: isSelected && !getFullscreen(state) && isWriteable(state) && canUserWrite(state),
+const mapStateToProps = (state, { isSelected, pageId, isFullscreen }) => ({
+ isInteractive: isSelected && !isFullscreen && isWriteable(state) && canUserWrite(state),
elements: getNodes(state, pageId),
pageStyle: getPageById(state, pageId).style,
});
-export const WorkpadPage = compose(
+export const ComposedWorkpadPage = compose(
shouldUpdate(not(isEqual)), // this is critical, else random unrelated rerenders in the parent cause glitches here
withProps(animationProps),
connect(mapStateToProps),
branch(({ isInteractive }) => isInteractive, InteractivePage, StaticPage)
)();
+export const WorkpadPage = (props) => {
+ const { isFullscreen } = useContext(WorkpadRoutingContext);
+
+ return ;
+};
+
WorkpadPage.propTypes = {
pageId: PropTypes.string.isRequired,
};
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interaction_boundary.tsx b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interaction_boundary.tsx
index a3ef8b03bdf1dd..a15458f4c7276a 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interaction_boundary.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interaction_boundary.tsx
@@ -7,7 +7,7 @@
import React, { CSSProperties, PureComponent } from 'react';
// @ts-expect-error untyped local
-import { WORKPAD_CONTAINER_ID } from '../../../apps/workpad/workpad_app';
+import { WORKPAD_CONTAINER_ID } from '../../workpad_app';
interface State {
height: string;
diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx b/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx
index 91520c8c479cd8..7e007b1253464e 100644
--- a/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx
@@ -5,9 +5,10 @@
* 2.0.
*/
-import React, { useContext, useState, useEffect, FunctionComponent } from 'react';
+import React, { useCallback, useState, useEffect, FunctionComponent } from 'react';
import { EuiLoadingSpinner } from '@elastic/eui';
-import { RouterContext } from '../router';
+import { useHistory } from 'react-router-dom';
+
import { ComponentStrings } from '../../../i18n/components';
// @ts-expect-error
import * as workpadService from '../../lib/workpad_service';
@@ -15,7 +16,7 @@ import { WorkpadTemplates as Component } from './workpad_templates';
import { CanvasTemplate } from '../../../types';
import { list } from '../../lib/template_service';
import { applyTemplateStrings } from '../../../i18n/templates/apply_strings';
-import { useNotifyService } from '../../services';
+import { useNotifyService, useServices } from '../../services';
interface WorkpadTemplatesProps {
onClose: () => void;
@@ -28,7 +29,9 @@ const Creating: FunctionComponent<{ name: string }> = ({ name }) => (