diff --git a/x-pack/plugins/canvas/public/apps/export/export/__tests__/export_app.test.tsx b/x-pack/plugins/canvas/public/apps/export/export/__tests__/export_app.test.tsx index b0a8d1e990e75..1bb58919b7fa6 100644 --- a/x-pack/plugins/canvas/public/apps/export/export/__tests__/export_app.test.tsx +++ b/x-pack/plugins/canvas/public/apps/export/export/__tests__/export_app.test.tsx @@ -6,8 +6,8 @@ import React from 'react'; import { mount } from 'enzyme'; -// @ts-expect-error untyped local -import { ExportApp } from '../export_app'; +import { ExportApp } from '../export_app.component'; +import { CanvasWorkpad } from '../../../../../types'; jest.mock('style-it', () => ({ it: (css: string, Component: any) => Component, @@ -23,7 +23,7 @@ jest.mock('../../../../components/link', () => ({ describe('', () => { test('renders as expected', () => { - const sampleWorkpad = { + const sampleWorkpad = ({ id: 'my-workpad-abcd', css: '', pages: [ @@ -34,7 +34,7 @@ describe('', () => { elements: [3, 4, 5, 6], }, ], - }; + } as any) as CanvasWorkpad; const page1 = mount( {}} /> diff --git a/x-pack/plugins/canvas/public/apps/export/export/export_app.component.tsx b/x-pack/plugins/canvas/public/apps/export/export/export_app.component.tsx new file mode 100644 index 0000000000000..03121e749d0dc --- /dev/null +++ b/x-pack/plugins/canvas/public/apps/export/export/export_app.component.tsx @@ -0,0 +1,63 @@ +/* + * 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, useEffect } from 'react'; +import PropTypes from 'prop-types'; +// @ts-expect-error untyped library +import Style from 'style-it'; +// @ts-expect-error untyped local +import { WorkpadPage } from '../../../components/workpad_page'; +import { Link } from '../../../components/link'; +import { CanvasWorkpad } from '../../../../types'; + +interface Props { + workpad: CanvasWorkpad; + selectedPageIndex: number; + initializeWorkpad: () => void; +} + +export const ExportApp: FC = ({ workpad, selectedPageIndex, initializeWorkpad }) => { + const { id, pages, height, width } = workpad; + const activePage = pages[selectedPageIndex]; + const pageElementCount = activePage.elements.length; + + useEffect(() => initializeWorkpad()); + + return ( +
+
+
+ + Edit Workpad + +
+ {Style.it( + workpad.css, +
+ {}} + unregisterLayout={() => {}} + /> +
+ )} +
+
+ ); +}; + +ExportApp.propTypes = { + workpad: PropTypes.shape({ + id: PropTypes.string.isRequired, + pages: PropTypes.array.isRequired, + }).isRequired, + selectedPageIndex: PropTypes.number.isRequired, + initializeWorkpad: PropTypes.func.isRequired, +}; diff --git a/x-pack/plugins/canvas/public/apps/export/export/export_app.js b/x-pack/plugins/canvas/public/apps/export/export/export_app.js deleted file mode 100644 index 1d02d85cae0b3..0000000000000 --- a/x-pack/plugins/canvas/public/apps/export/export/export_app.js +++ /dev/null @@ -1,59 +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 PropTypes from 'prop-types'; -import Style from 'style-it'; -import { WorkpadPage } from '../../../components/workpad_page'; -import { Link } from '../../../components/link'; - -export class ExportApp extends React.PureComponent { - static propTypes = { - workpad: PropTypes.shape({ - id: PropTypes.string.isRequired, - pages: PropTypes.array.isRequired, - }).isRequired, - selectedPageIndex: PropTypes.number.isRequired, - initializeWorkpad: PropTypes.func.isRequired, - }; - - componentDidMount() { - this.props.initializeWorkpad(); - } - - render() { - const { workpad, selectedPageIndex } = this.props; - const { pages, height, width } = workpad; - const activePage = pages[selectedPageIndex]; - const pageElementCount = activePage.elements.length; - - return ( -
-
-
- - Edit Workpad - -
- {Style.it( - workpad.css, -
- {}} - unregisterLayout={() => {}} - /> -
- )} -
-
- ); - } -} diff --git a/x-pack/plugins/canvas/public/apps/export/export/export_app.ts b/x-pack/plugins/canvas/public/apps/export/export/export_app.ts new file mode 100644 index 0000000000000..b47d1950ec2b7 --- /dev/null +++ b/x-pack/plugins/canvas/public/apps/export/export/export_app.ts @@ -0,0 +1,21 @@ +/* + * 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 { initializeWorkpad } from '../../../state/actions/workpad'; +import { getWorkpad, getSelectedPageIndex } from '../../../state/selectors/workpad'; +import { ExportApp as Component } from './export_app.component'; +import { State } from '../../../../types'; + +export const ExportApp = connect( + (state: State) => ({ + workpad: getWorkpad(state), + selectedPageIndex: getSelectedPageIndex(state), + }), + (dispatch) => ({ + initializeWorkpad: () => dispatch(initializeWorkpad()), + }) +)(Component); diff --git a/x-pack/plugins/canvas/public/apps/export/export/index.js b/x-pack/plugins/canvas/public/apps/export/export/index.js deleted file mode 100644 index 95c46d9e1c8ae..0000000000000 --- a/x-pack/plugins/canvas/public/apps/export/export/index.js +++ /dev/null @@ -1,30 +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 { compose, branch, renderComponent } from 'recompose'; -import { initializeWorkpad } from '../../../state/actions/workpad'; -import { getWorkpad, getSelectedPageIndex } from '../../../state/selectors/workpad'; -import { LoadWorkpad } from './load_workpad'; -import { ExportApp as Component } from './export_app'; - -const mapStateToProps = (state) => ({ - workpad: getWorkpad(state), - selectedPageIndex: getSelectedPageIndex(state), -}); - -const mapDispatchToProps = (dispatch) => ({ - initializeWorkpad() { - dispatch(initializeWorkpad()); - }, -}); - -const branches = [branch(({ workpad }) => workpad == null, renderComponent(LoadWorkpad))]; - -export const ExportApp = compose( - connect(mapStateToProps, mapDispatchToProps), - ...branches -)(Component); diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/load_workpad.js b/x-pack/plugins/canvas/public/apps/export/export/index.ts similarity index 67% rename from x-pack/plugins/canvas/public/apps/workpad/workpad_app/load_workpad.js rename to x-pack/plugins/canvas/public/apps/export/export/index.ts index 388bf00723f82..81939d550a7ab 100644 --- a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/load_workpad.js +++ b/x-pack/plugins/canvas/public/apps/export/export/index.ts @@ -4,6 +4,5 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; - -export const LoadWorkpad = () =>
Load a workpad...
; +export { ExportApp } from './export_app'; +export { ExportApp as ExportAppComponent } from './export_app.component'; diff --git a/x-pack/plugins/canvas/public/apps/export/index.js b/x-pack/plugins/canvas/public/apps/export/index.ts similarity index 100% rename from x-pack/plugins/canvas/public/apps/export/index.js rename to x-pack/plugins/canvas/public/apps/export/index.ts diff --git a/x-pack/plugins/canvas/public/apps/export/routes.js b/x-pack/plugins/canvas/public/apps/export/routes.ts similarity index 79% rename from x-pack/plugins/canvas/public/apps/export/routes.js rename to x-pack/plugins/canvas/public/apps/export/routes.ts index 33e375115aa19..0b4f74149fb4f 100644 --- a/x-pack/plugins/canvas/public/apps/export/routes.js +++ b/x-pack/plugins/canvas/public/apps/export/routes.ts @@ -4,10 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Dispatch } from 'redux'; +// @ts-expect-error Untyped local import * as workpadService from '../../lib/workpad_service'; import { setWorkpad } from '../../state/actions/workpad'; +// @ts-expect-error Untyped local import { fetchAllRenderables } from '../../state/actions/elements'; +// @ts-expect-error Untyped local import { setPage } from '../../state/actions/pages'; +// @ts-expect-error Untyped local import { setAssets } from '../../state/actions/assets'; import { ExportApp } from './export'; @@ -18,7 +23,13 @@ export const routes = [ { name: 'exportWorkpad', path: '/pdf/:id/page/:page', - action: (dispatch) => async ({ params, router }) => { + action: (dispatch: Dispatch) => async ({ + params, + // @ts-expect-error Fix when Router is typed. + router, + }: { + params: { id: string; page: string }; + }) => { // load workpad if given a new id via url param const fetchedWorkpad = await workpadService.get(params.id); const pageNumber = parseInt(params.page, 10); diff --git a/x-pack/plugins/canvas/public/apps/home/home_app/home_app.js b/x-pack/plugins/canvas/public/apps/home/home_app/home_app.component.tsx similarity index 79% rename from x-pack/plugins/canvas/public/apps/home/home_app/home_app.js rename to x-pack/plugins/canvas/public/apps/home/home_app/home_app.component.tsx index bfa4abbf7c56d..3c2e989cc8e51 100644 --- a/x-pack/plugins/canvas/public/apps/home/home_app/home_app.js +++ b/x-pack/plugins/canvas/public/apps/home/home_app/home_app.component.tsx @@ -4,12 +4,18 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FC } from 'react'; import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui'; +// @ts-expect-error untyped local import { WorkpadManager } from '../../../components/workpad_manager'; +// @ts-expect-error untyped local import { setDocTitle } from '../../../lib/doc_title'; -export const HomeApp = ({ onLoad = () => {} }) => { +interface Props { + onLoad: () => void; +} + +export const HomeApp: FC = ({ onLoad = () => {} }) => { onLoad(); setDocTitle('Canvas'); return ( diff --git a/x-pack/plugins/canvas/public/apps/home/home_app/index.js b/x-pack/plugins/canvas/public/apps/home/home_app/home_app.ts similarity index 69% rename from x-pack/plugins/canvas/public/apps/home/home_app/index.js rename to x-pack/plugins/canvas/public/apps/home/home_app/home_app.ts index f78ee1f8a18af..ff9d1c1cc63ac 100644 --- a/x-pack/plugins/canvas/public/apps/home/home_app/index.js +++ b/x-pack/plugins/canvas/public/apps/home/home_app/home_app.ts @@ -6,12 +6,10 @@ import { connect } from 'react-redux'; import { resetWorkpad } from '../../../state/actions/workpad'; -import { HomeApp as Component } from './home_app'; +import { HomeApp as Component } from './home_app.component'; -const mapDispatchToProps = (dispatch) => ({ +export const HomeApp = connect(null, (dispatch) => ({ onLoad() { dispatch(resetWorkpad()); }, -}); - -export const HomeApp = connect(null, mapDispatchToProps)(Component); +}))(Component); diff --git a/x-pack/plugins/canvas/public/apps/export/export/load_workpad.js b/x-pack/plugins/canvas/public/apps/home/home_app/index.ts similarity index 69% rename from x-pack/plugins/canvas/public/apps/export/export/load_workpad.js rename to x-pack/plugins/canvas/public/apps/home/home_app/index.ts index 388bf00723f82..8ea92312e3e50 100644 --- a/x-pack/plugins/canvas/public/apps/export/export/load_workpad.js +++ b/x-pack/plugins/canvas/public/apps/home/home_app/index.ts @@ -4,6 +4,5 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; - -export const LoadWorkpad = () =>
Load a workpad...
; +export { HomeApp } from './home_app'; +export { HomeApp as HomeAppComponent } from './home_app.component'; diff --git a/x-pack/plugins/canvas/public/apps/home/index.js b/x-pack/plugins/canvas/public/apps/home/index.ts similarity index 100% rename from x-pack/plugins/canvas/public/apps/home/index.js rename to x-pack/plugins/canvas/public/apps/home/index.ts diff --git a/x-pack/plugins/canvas/public/apps/home/routes.js b/x-pack/plugins/canvas/public/apps/home/routes.ts similarity index 100% rename from x-pack/plugins/canvas/public/apps/home/routes.js rename to x-pack/plugins/canvas/public/apps/home/routes.ts diff --git a/x-pack/plugins/canvas/public/apps/index.js b/x-pack/plugins/canvas/public/apps/index.ts similarity index 88% rename from x-pack/plugins/canvas/public/apps/index.js rename to x-pack/plugins/canvas/public/apps/index.ts index c014349ca18da..8b3d378e23f80 100644 --- a/x-pack/plugins/canvas/public/apps/index.js +++ b/x-pack/plugins/canvas/public/apps/index.ts @@ -8,6 +8,7 @@ import * as home from './home'; import * as workpad from './workpad'; import * as exp from './export'; +// @ts-expect-error Router and routes are not yet strongly typed export const routes = [].concat(workpad.routes, home.routes, exp.routes); export const apps = [workpad.WorkpadApp, home.HomeApp, exp.ExportApp]; diff --git a/x-pack/plugins/canvas/public/apps/workpad/index.js b/x-pack/plugins/canvas/public/apps/workpad/index.ts similarity index 100% rename from x-pack/plugins/canvas/public/apps/workpad/index.js rename to x-pack/plugins/canvas/public/apps/workpad/index.ts diff --git a/x-pack/plugins/canvas/public/apps/workpad/routes.js b/x-pack/plugins/canvas/public/apps/workpad/routes.ts similarity index 82% rename from x-pack/plugins/canvas/public/apps/workpad/routes.js rename to x-pack/plugins/canvas/public/apps/workpad/routes.ts index a330020b741ac..d83f85f717305 100644 --- a/x-pack/plugins/canvas/public/apps/workpad/routes.js +++ b/x-pack/plugins/canvas/public/apps/workpad/routes.ts @@ -4,17 +4,24 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ErrorStrings } from '../../../i18n'; +import { Dispatch } from 'redux'; +// @ts-expect-error import * as workpadService from '../../lib/workpad_service'; import { notifyService } from '../../services'; import { getBaseBreadcrumb, getWorkpadBreadcrumb, setBreadcrumb } from '../../lib/breadcrumbs'; +// @ts-expect-error import { getDefaultWorkpad } from '../../state/defaults'; import { setWorkpad } from '../../state/actions/workpad'; +// @ts-expect-error import { setAssets, resetAssets } from '../../state/actions/assets'; +// @ts-expect-error import { setPage } from '../../state/actions/pages'; import { getWorkpad } from '../../state/selectors/workpad'; +// @ts-expect-error import { setZoomScale } from '../../state/actions/transient'; +import { ErrorStrings } from '../../../i18n'; import { WorkpadApp } from './workpad_app'; +import { State } from '../../../types'; const { workpadRoutes: strings } = ErrorStrings; @@ -25,7 +32,8 @@ export const routes = [ { name: 'createWorkpad', path: '/create', - action: (dispatch) => async ({ router }) => { + // @ts-expect-error Fix when Router is typed. + action: (dispatch: Dispatch) => async ({ router }) => { const newWorkpad = getDefaultWorkpad(); try { await workpadService.create(newWorkpad); @@ -46,7 +54,13 @@ export const routes = [ { name: 'loadWorkpad', path: '/:id(/page/:page)', - action: (dispatch, getState) => async ({ params, router }) => { + action: (dispatch: Dispatch, getState: () => State) => async ({ + params, + // @ts-expect-error Fix when Router is typed. + router, + }: { + params: { id: string; page?: string }; + }) => { // load workpad if given a new id via url param const state = getState(); const currentWorkpad = getWorkpad(state); @@ -70,10 +84,10 @@ export const routes = [ // fetch the workpad again, to get changes const workpad = getWorkpad(getState()); - const pageNumber = parseInt(params.page, 10); + const pageNumber = params.page ? parseInt(params.page, 10) : null; // no page provided, append current page to url - if (isNaN(pageNumber)) { + if (!pageNumber || isNaN(pageNumber)) { return router.redirectTo('loadWorkpad', { id: workpad.id, page: workpad.page + 1 }); } diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/index.js b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/index.js deleted file mode 100644 index ac50cd3fb99b6..0000000000000 --- a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/index.js +++ /dev/null @@ -1,41 +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 { compose, branch, renderComponent } from 'recompose'; -import { selectToplevelNodes } from '../../../state/actions/transient'; -import { canUserWrite, getAppReady } from '../../../state/selectors/app'; -import { getWorkpad, isWriteable } from '../../../state/selectors/workpad'; -import { LoadWorkpad } from './load_workpad'; -import { WorkpadApp as Component } from './workpad_app'; -import { withElementsLoadedTelemetry } from './workpad_telemetry'; - -export { WORKPAD_CONTAINER_ID } from './workpad_app'; - -const mapStateToProps = (state) => { - const appReady = getAppReady(state); - - return { - isWriteable: isWriteable(state) && canUserWrite(state), - appReady: typeof appReady === 'object' ? appReady : { ready: appReady }, - workpad: getWorkpad(state), - }; -}; - -const mapDispatchToProps = (dispatch) => ({ - deselectElement(ev) { - ev && ev.stopPropagation(); - dispatch(selectToplevelNodes([])); - }, -}); - -const branches = [branch(({ workpad }) => workpad == null, renderComponent(LoadWorkpad))]; - -export const WorkpadApp = compose( - connect(mapStateToProps, mapDispatchToProps), - ...branches, - withElementsLoadedTelemetry -)(Component); diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/index.ts b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/index.ts new file mode 100644 index 0000000000000..a00bf855ba376 --- /dev/null +++ b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/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 { WorkpadApp } from './workpad_app'; +export { WorkpadApp as WorkpadAppComponent } from './workpad_app.component'; diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.component.tsx b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.component.tsx new file mode 100644 index 0000000000000..791f40f0219cd --- /dev/null +++ b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.component.tsx @@ -0,0 +1,83 @@ +/* + * 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, MouseEventHandler, useRef } from 'react'; +import PropTypes from 'prop-types'; +import { Sidebar } from '../../../components/sidebar'; +import { Toolbar } from '../../../components/toolbar'; +// @ts-expect-error Untyped local +import { Workpad } from '../../../components/workpad'; +import { WorkpadHeader } from '../../../components/workpad_header'; +import { CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR } from '../../../../common/lib/constants'; +import { CommitFn } from '../../../../types'; + +export const WORKPAD_CONTAINER_ID = 'canvasWorkpadContainer'; + +interface Props { + deselectElement?: MouseEventHandler; + isWriteable: boolean; +} + +export const WorkpadApp: FC = ({ deselectElement, isWriteable }) => { + const interactivePageLayout = useRef(null); // future versions may enable editing on multiple pages => use array then + + const registerLayout = (newLayout: CommitFn) => { + if (interactivePageLayout.current !== newLayout) { + interactivePageLayout.current = newLayout; + } + }; + + const unregisterLayout = (oldLayout: CommitFn) => { + if (interactivePageLayout.current === oldLayout) { + interactivePageLayout.current = null; + } + }; + + const commit = interactivePageLayout.current || (() => {}); + + return ( +
+
+
+
+
+ +
+ +
+ {/* NOTE: canvasWorkpadContainer is used for exporting */} +
+ +
+
+
+ + {isWriteable && ( +
+ +
+ )} +
+ +
+ +
+
+
+ ); +}; + +WorkpadApp.propTypes = { + isWriteable: PropTypes.bool.isRequired, + deselectElement: PropTypes.func, +}; diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.js b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.js deleted file mode 100644 index fc3ac9922355a..0000000000000 --- a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.js +++ /dev/null @@ -1,81 +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 PropTypes from 'prop-types'; -import { Sidebar } from '../../../components/sidebar'; -import { Toolbar } from '../../../components/toolbar'; -import { Workpad } from '../../../components/workpad'; -import { WorkpadHeader } from '../../../components/workpad_header'; -import { CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR } from '../../../../common/lib/constants'; - -export const WORKPAD_CONTAINER_ID = 'canvasWorkpadContainer'; - -export class WorkpadApp extends React.PureComponent { - static propTypes = { - isWriteable: PropTypes.bool.isRequired, - deselectElement: PropTypes.func, - }; - - interactivePageLayout = null; // future versions may enable editing on multiple pages => use array then - - registerLayout(newLayout) { - if (this.interactivePageLayout !== newLayout) { - this.interactivePageLayout = newLayout; - } - } - - unregisterLayout(oldLayout) { - if (this.interactivePageLayout === oldLayout) { - this.interactivePageLayout = null; - } - } - - render() { - const { isWriteable, deselectElement } = this.props; - - return ( -
-
-
-
-
- {})} /> -
- -
- {/* NOTE: canvasWorkpadContainer is used for exporting */} -
- -
-
-
- - {isWriteable && ( -
- -
- )} -
- -
- -
-
-
- ); - } -} diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.ts b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.ts new file mode 100644 index 0000000000000..46f2efaf5e7d2 --- /dev/null +++ b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.ts @@ -0,0 +1,32 @@ +/* + * 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 { MouseEventHandler } from 'react'; +import { Dispatch } from 'redux'; +import { connect } from 'react-redux'; +// @ts-expect-error untyped local +import { selectToplevelNodes } from '../../../state/actions/transient'; +import { canUserWrite } from '../../../state/selectors/app'; +import { getWorkpad, isWriteable } from '../../../state/selectors/workpad'; +import { WorkpadApp as Component } from './workpad_app.component'; +import { withElementsLoadedTelemetry } from './workpad_telemetry'; +import { State } from '../../../../types'; + +export { WORKPAD_CONTAINER_ID } from './workpad_app.component'; + +const mapDispatchToProps = (dispatch: Dispatch): { deselectElement: MouseEventHandler } => ({ + deselectElement: (ev) => { + ev.stopPropagation(); + dispatch(selectToplevelNodes([])); + }, +}); + +export const WorkpadApp = connect( + (state: State) => ({ + isWriteable: isWriteable(state) && canUserWrite(state), + workpad: getWorkpad(state), + }), + mapDispatchToProps +)(withElementsLoadedTelemetry(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 index eb4b451896b46..b1e87ca67f5e5 100644 --- 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 @@ -18,22 +18,25 @@ import { EditMenu } from './edit_menu'; import { ElementMenu } from './element_menu'; import { ShareMenu } from './share_menu'; import { ViewMenu } from './view_menu'; +import { CommitFn } from '../../../types'; const { WorkpadHeader: strings } = ComponentStrings; export interface Props { isWriteable: boolean; - toggleWriteable: () => void; canUserWrite: boolean; - commit: (type: string, payload: any) => any; + commit: CommitFn; + onSetWriteable?: (writeable: boolean) => void; } export const WorkpadHeader: FunctionComponent = ({ isWriteable, canUserWrite, - toggleWriteable, commit, + onSetWriteable = () => {}, }) => { + const toggleWriteable = () => onSetWriteable(!isWriteable); + const keyHandler = (action: string) => { if (action === 'EDITING') { toggleWriteable(); @@ -145,6 +148,7 @@ export const WorkpadHeader: FunctionComponent = ({ WorkpadHeader.propTypes = { isWriteable: PropTypes.bool, - toggleWriteable: PropTypes.func, + commit: PropTypes.func.isRequired, + onSetWriteable: 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 1f630040b0c36..0661aa4be4313 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 @@ -10,37 +10,16 @@ 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'; +import { WorkpadHeader as Component } from './workpad_header.component'; -interface StateProps { - isWriteable: boolean; - canUserWrite: boolean; - selectedPage: string; -} - -interface DispatchProps { - setWriteable: (isWorkpadWriteable: boolean) => void; -} - -const mapStateToProps = (state: State): StateProps => ({ +const mapStateToProps = (state: State) => ({ 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), + onSetWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)), }); -export const WorkpadHeader = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component); +export const WorkpadHeader = connect(mapStateToProps, mapDispatchToProps)(Component); diff --git a/x-pack/plugins/canvas/types/canvas.ts b/x-pack/plugins/canvas/types/canvas.ts index cc07f498f1eec..6b3f9ad3e8043 100644 --- a/x-pack/plugins/canvas/types/canvas.ts +++ b/x-pack/plugins/canvas/types/canvas.ts @@ -76,3 +76,7 @@ export interface CanvasWorkpadBoundingBox { top: number; bottom: number; } + +export type LayoutState = any; + +export type CommitFn = (type: string, payload: any) => LayoutState;