[Canvas][tech-debt] Add Typescript to apps directory (#73766)

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

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('<ExportApp />', () => {
   test('renders as expected', () => {
-    const sampleWorkpad = {
+    const sampleWorkpad = ({
       id: 'my-workpad-abcd',
       css: '',
       pages: [
@@ -34,7 +34,7 @@ describe('<ExportApp />', () => {
           elements: [3, 4, 5, 6],
         },
       ],
-    };
+    } as any) as CanvasWorkpad;
 
     const page1 = mount(
       <ExportApp workpad={sampleWorkpad} selectedPageIndex={0} initializeWorkpad={() => {}} />

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<Props> = ({ workpad, selectedPageIndex, initializeWorkpad }) => {
+  const { id, pages, height, width } = workpad;
+  const activePage = pages[selectedPageIndex];
+  const pageElementCount = activePage.elements.length;
+
+  useEffect(() => initializeWorkpad());
+
+  return (
+    <div className="canvasExport" data-shared-page={selectedPageIndex + 1}>
+      <div className="canvasExport__stage">
+        <div className="canvasLayout__stageHeader">
+          <Link name="loadWorkpad" params={{ id }}>
+            Edit Workpad
+          </Link>
+        </div>
+        {Style.it(
+          workpad.css,
+          <div className="canvasExport__stageContent" data-shared-items-count={pageElementCount}>
+            <WorkpadPage
+              isSelected
+              key={activePage.id}
+              pageId={activePage.id}
+              height={height}
+              width={width}
+              registerLayout={() => {}}
+              unregisterLayout={() => {}}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+ExportApp.propTypes = {
+  workpad: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    pages: PropTypes.array.isRequired,
+  }).isRequired,
+  selectedPageIndex: PropTypes.number.isRequired,
+  initializeWorkpad: PropTypes.func.isRequired,
+};

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

x-pack/plugins/canvas/public/apps/workpad/workpad_app/load_workpad.js → 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 = () => <div>Load a workpad...</div>;
+export { ExportApp } from './export_app';
+export { ExportApp as ExportAppComponent } from './export_app.component';

x-pack/plugins/canvas/public/apps/export/routes.js → 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);

x-pack/plugins/canvas/public/apps/home/home_app/home_app.js → 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<Props> = ({ onLoad = () => {} }) => {
   onLoad();
   setDocTitle('Canvas');
   return (

x-pack/plugins/canvas/public/apps/home/home_app/index.js → 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);

x-pack/plugins/canvas/public/apps/export/export/load_workpad.js → 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 = () => <div>Load a workpad...</div>;
+export { HomeApp } from './home_app';
+export { HomeApp as HomeAppComponent } from './home_app.component';

x-pack/plugins/canvas/public/apps/index.js → 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];

x-pack/plugins/canvas/public/apps/workpad/routes.js → 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 });
           }