[pre-req] Convert Page Manager, Page Preview, DOM Preview (#70370)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Corey Robertson <corey.robertson@elastic.co>

Author: 3 people

x-pack/plugins/canvas/i18n/components.ts

@@ -567,6 +567,22 @@ export const ComponentStrings = {
           pageNumber,
         },
       }),
+    getAddPageTooltip: () =>
+      i18n.translate('xpack.canvas.pageManager.addPageTooltip', {
+        defaultMessage: 'Add a new page to this workpad',
+      }),
+    getConfirmRemoveTitle: () =>
+      i18n.translate('xpack.canvas.pageManager.confirmRemoveTitle', {
+        defaultMessage: 'Remove Page',
+      }),
+    getConfirmRemoveDescription: () =>
+      i18n.translate('xpack.canvas.pageManager.confirmRemoveDescription', {
+        defaultMessage: 'Are you sure you want to remove this page?',
+      }),
+    getConfirmRemoveButtonLabel: () =>
+      i18n.translate('xpack.canvas.pageManager.removeButtonLabel', {
+        defaultMessage: 'Remove',
+      }),
   },
   PagePreviewPageControls: {
     getClonePageAriaLabel: () =>

x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js renamed to x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx

@@ -4,30 +4,38 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 
-export class DomPreview extends React.Component {
+interface Props {
+  elementId: string;
+  height: number;
+}
+
+export class DomPreview extends PureComponent<Props> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
     height: PropTypes.number.isRequired,
   };
 
+  _container: HTMLDivElement | null = null;
+  _content: HTMLDivElement | null = null;
+  _observer: MutationObserver | null = null;
+  _original: Element | null = null;
+  _updateTimeout: number = 0;
+
   componentDidMount() {
     this.update();
   }
 
   componentWillUnmount() {
     clearTimeout(this._updateTimeout);
-    this._observer && this._observer.disconnect(); // observer not guaranteed to exist
-  }
 
-  _container = null;
-  _content = null;
-  _observer = null;
-  _original = null;
-  _updateTimeout = null;
+    if (this._observer) {
+      this._observer.disconnect(); // observer not guaranteed to exist
+    }
+  }
 
   update = () => {
     if (!this._content || !this._container) {
@@ -38,7 +46,10 @@ export class DomPreview extends React.Component {
     const originalChanged = currentOriginal !== this._original;
 
     if (originalChanged) {
-      this._observer && this._observer.disconnect();
+      if (this._observer) {
+        this._observer.disconnect();
+      }
+
       this._original = currentOriginal;
 
       if (this._original) {
@@ -50,12 +61,16 @@ export class DomPreview extends React.Component {
         this._observer.observe(this._original, config);
       } else {
         clearTimeout(this._updateTimeout); // to avoid the assumption that we fully control when `update` is called
-        this._updateTimeout = setTimeout(this.update, 30);
+        this._updateTimeout = window.setTimeout(this.update, 30);
         return;
       }
     }
 
-    const thumb = this._original.cloneNode(true);
+    if (!this._original) {
+      return;
+    }
+
+    const thumb = this._original.cloneNode(true) as HTMLDivElement;
     thumb.id += '-thumb';
 
     const originalStyle = window.getComputedStyle(this._original, null);
@@ -66,23 +81,27 @@ export class DomPreview extends React.Component {
     const scale = thumbHeight / originalHeight;
     const thumbWidth = originalWidth * scale;
 
-    if (this._content.hasChildNodes()) {
+    if (this._content.firstChild) {
       this._content.removeChild(this._content.firstChild);
     }
+
     this._content.appendChild(thumb);
 
     this._content.style.cssText = `transform: scale(${scale}); transform-origin: top left;`;
     this._container.style.cssText = `width: ${thumbWidth}px; height: ${thumbHeight}px;`;
 
     // Copy canvas data
     const originalCanvas = this._original.querySelectorAll('canvas');
-    const thumbCanvas = thumb.querySelectorAll('canvas');
+    const thumbCanvas = (thumb as Element).querySelectorAll('canvas');
 
     // Cloned canvas elements are blank and need to be explicitly redrawn
     if (originalCanvas.length > 0) {
-      Array.from(originalCanvas).map((img, i) =>
-        thumbCanvas[i].getContext('2d').drawImage(img, 0, 0)
-      );
+      Array.from(originalCanvas).map((img, i) => {
+        const context = thumbCanvas[i].getContext('2d');
+        if (context) {
+          context.drawImage(img, 0, 0);
+        }
+      });
     }
   };
 

x-pack/plugins/canvas/public/components/dom_preview/index.js

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PagePreview } from './page_preview';
+export { DomPreview } from './dom_preview';

x-pack/plugins/canvas/public/components/page_preview/index.js renamed to x-pack/plugins/canvas/public/components/dom_preview/index.ts

@@ -0,0 +1,72 @@
+/*
+ * 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, 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<string, any>;
+}
+
+export const Link: FC<Props & EuiLinkProps> = ({
+  onClick,
+  target,
+  name,
+  params,
+  children,
+  ...linkArgs
+}) => {
+  const router = useContext(RouterContext);
+
+  if (router) {
+    const navigateTo = (ev: MouseEvent<HTMLButtonElement, globalThis.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 (
+        <EuiLink {...linkArgs} target={target} onClick={navigateTo}>
+          {children}
+        </EuiLink>
+      );
+    } catch (e) {
+      return <div>{strings.getErrorMessage(e.message)}</div>;
+    }
+  }
+
+  return <div>{strings.getErrorMessage('Router Undefined')}</div>;
+};
+
+Link.contextTypes = {
+  router: PropTypes.object,
+};
+
+Link.propTypes = {
+  name: PropTypes.string.isRequired,
+  params: PropTypes.object,
+};

x-pack/plugins/canvas/public/components/link/index.js renamed to x-pack/plugins/canvas/public/components/link/index.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+// @ts-expect-error untyped local
+import * as pageActions from '../../state/actions/pages';
+import { canUserWrite } from '../../state/selectors/app';
+import { getSelectedPage, getWorkpad, getPages, isWriteable } from '../../state/selectors/workpad';
+import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
+import { PageManager as Component } from './page_manager';
+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);