[Canvas][tech-debt] Convert renderers

x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts

@@ -22,7 +22,7 @@ interface Arguments {
   openLinksInNewTab: boolean;
 }
 
-interface Return {
+export interface Return {
   content: string;
   font: Style;
   openLinksInNewTab: boolean;

x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts

@@ -6,7 +6,6 @@
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 import { ContainerStyle, Overflow, BackgroundRepeat, BackgroundSize } from '../../../types';
 import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
-// @ts-expect-error untyped local
 import { isValidUrl } from '../../../common/lib/url';
 
 interface Output extends ContainerStyle {

x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts

@@ -8,7 +8,6 @@ import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
 
 // @ts-expect-error untyped local
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
-// @ts-expect-error .png file
 import { elasticLogo } from '../../lib/elastic_logo';
 
 export enum ImageMode {
@@ -22,7 +21,7 @@ interface Arguments {
   mode: ImageMode | null;
 }
 
-interface Return {
+export interface Return {
   type: 'image';
   mode: string;
   dataurl: string;

x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts

@@ -46,7 +46,7 @@ import { render } from './render';
 import { replace } from './replace';
 import { rounddate } from './rounddate';
 import { rowCount } from './rowCount';
-import { repeatImage } from './repeatImage';
+import { repeatImage } from './repeat_image';
 import { revealImage } from './revealImage';
 import { seriesStyle } from './seriesStyle';
 import { shape } from './shape';

x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.ts

@@ -57,7 +57,7 @@ interface PieData {
   color?: string;
 }
 
-interface Pie {
+export interface Pie {
   font: Style;
   data: PieData[];
   options: PieOptions;

x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.ts

@@ -20,7 +20,7 @@ export enum Shape {
   WHEEL = 'wheel',
 }
 
-interface Arguments {
+export interface Arguments {
   barColor: string;
   barWeight: number;
   font: Style;
@@ -31,6 +31,10 @@ interface Arguments {
   valueWeight: number;
 }
 
+export type Output = Arguments & {
+  value: number;
+};
+
 export function progress(): ExpressionFunctionDefinition<
   'progress',
   number,

x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js

@@ -7,7 +7,7 @@
 import { functionWrapper } from '../../../__tests__/helpers/function_wrapper';
 import { elasticOutline } from '../../lib/elastic_outline';
 import { elasticLogo } from '../../lib/elastic_logo';
-import { repeatImage } from './repeatImage';
+import { repeatImage } from './repeat_image';
 
 describe('repeatImage', () => {
   const fn = functionWrapper(repeatImage);

x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeatImage.ts → x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts

@@ -7,7 +7,6 @@
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 // @ts-expect-error untyped local
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
-// @ts-expect-error .png file
 import { elasticOutline } from '../../lib/elastic_outline';
 import { Render } from '../../../types';
 import { getFunctionHelp } from '../../../i18n';
@@ -19,6 +18,14 @@ interface Arguments {
   emptyImage: string | null;
 }
 
+export interface Return {
+  count: number;
+  image: string;
+  size: number;
+  max: number;
+  emptyImage: string | null;
+}
+
 export function repeatImage(): ExpressionFunctionDefinition<
   'repeatImage',
   number,

x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts

@@ -7,7 +7,6 @@
 import { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions';
 // @ts-expect-error untyped local
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
-// @ts-expect-error .png file
 import { elasticOutline } from '../../lib/elastic_outline';
 import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
 
@@ -24,11 +23,18 @@ interface Arguments {
   origin: Origin;
 }
 
+export interface Output {
+  image: string;
+  emptyImage: string;
+  origin: Origin;
+  percent: number;
+}
+
 export function revealImage(): ExpressionFunctionDefinition<
   'revealImage',
   number,
   Arguments,
-  ExpressionValueRender<Arguments>
+  ExpressionValueRender<Output>
 > {
   const { help, args: argHelp } = getFunctionHelp().revealImage;
   const errors = getFunctionErrors().revealImage;

x-pack/plugins/canvas/canvas_plugin_src/functions/common/shape.ts

@@ -34,7 +34,7 @@ interface Arguments {
   maintainAspect: boolean;
 }
 
-interface Output extends Arguments {
+export interface Output extends Arguments {
   type: 'shape';
 }
 

x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.ts

@@ -15,11 +15,13 @@ interface Arguments {
   showHeader: boolean;
 }
 
+export type Return = { datatable: Datatable } & Arguments;
+
 export function table(): ExpressionFunctionDefinition<
   'table',
   Datatable,
   Arguments,
-  Render<Arguments>
+  Render<Return>
 > {
   const { help, args: argHelp } = getFunctionHelp().table;
 

x-pack/plugins/canvas/canvas_plugin_src/plugin.ts

@@ -12,7 +12,6 @@ import { Start as InspectorStart } from '../../../../src/plugins/inspector/publi
 
 import { functions } from './functions/browser';
 import { typeFunctions } from './expression_types';
-// @ts-expect-error: untyped local
 import { renderFunctions, renderFunctionFactories } from './renderers';
 import { initializeElements } from './elements';
 // @ts-expect-error untyped local

x-pack/plugins/canvas/canvas_plugin_src/renderers/debug.js → x-pack/plugins/canvas/canvas_plugin_src/renderers/debug.tsx

@@ -8,10 +8,11 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import { Debug } from '../../public/components/debug';
 import { RendererStrings } from '../../i18n';
+import { RendererFactory } from '../../types';
 
 const { debug: strings } = RendererStrings;
 
-export const debug = () => ({
+export const debug: RendererFactory<any> = () => ({
   name: 'debug',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),

x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx

@@ -17,7 +17,7 @@ import { EmbeddableExpression } from '../../expression_types/embeddable';
 import { RendererStrings } from '../../../i18n';
 import { embeddableInputToExpression } from './embeddable_input_to_expression';
 import { EmbeddableInput } from '../../expression_types';
-import { RendererHandlers } from '../../../types';
+import { RendererFactory } from '../../../types';
 import { CANVAS_EMBEDDABLE_CLASSNAME } from '../../../common/lib';
 
 const { embeddable: strings } = RendererStrings;
@@ -43,18 +43,17 @@ const renderEmbeddableFactory = (core: CoreStart, plugins: StartDeps) => {
   };
 };
 
-export const embeddableRendererFactory = (core: CoreStart, plugins: StartDeps) => {
+export const embeddableRendererFactory = (
+  core: CoreStart,
+  plugins: StartDeps
+): RendererFactory<EmbeddableExpression<EmbeddableInput>> => {
   const renderEmbeddable = renderEmbeddableFactory(core, plugins);
   return () => ({
     name: 'embeddable',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
     reuseDomNode: true,
-    render: async (
-      domNode: HTMLElement,
-      { input, embeddableType }: EmbeddableExpression<EmbeddableInput>,
-      handlers: RendererHandlers
-    ) => {
+    render: async (domNode, { input, embeddableType }, handlers) => {
       const uniqueId = handlers.getElementId();
 
       if (!embeddablesRegistry[uniqueId]) {

x-pack/plugins/canvas/canvas_plugin_src/renderers/error/index.js → x-pack/plugins/canvas/canvas_plugin_src/renderers/error/index.tsx

@@ -5,23 +5,28 @@
  */
 
 import ReactDOM from 'react-dom';
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { EuiIcon } from '@elastic/eui';
 import { Error } from '../../../public/components/error';
 import { Popover } from '../../../public/components/popover';
 import { RendererStrings } from '../../../i18n';
+import { RendererFactory } from '../../../types';
+
+interface Config {
+  error: Error;
+}
 
 const { error: strings } = RendererStrings;
 
-export const error = () => ({
+export const error: RendererFactory<Config> = () => ({
   name: 'error',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),
   reuseDomNode: true,
   render(domNode, config, handlers) {
     const draw = () => {
       const buttonSize = Math.min(domNode.clientHeight, domNode.clientWidth);
-      const button = (handleClick) => (
+      const button = (handleClick: MouseEventHandler<any>) => (
         <EuiIcon
           className="canvasRenderError__icon"
           onClick={handleClick}

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx

@@ -12,7 +12,7 @@ import { RendererStrings } from '../../../../i18n';
 
 const { advancedFilter: strings } = RendererStrings;
 
-export const advancedFilter: RendererFactory = () => ({
+export const advancedFilter: RendererFactory<{}> = () => ({
   name: 'advanced_filter',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),

x-pack/plugins/canvas/canvas_plugin_src/renderers/image.js → x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx

@@ -8,11 +8,13 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import { elasticLogo } from '../lib/elastic_logo';
 import { isValidUrl } from '../../common/lib/url';
+import { Return as Arguments } from '../functions/common/image';
 import { RendererStrings } from '../../i18n';
+import { RendererFactory } from '../../types';
 
 const { image: strings } = RendererStrings;
 
-export const image = () => ({
+export const image: RendererFactory<Arguments> = () => ({
   name: 'image',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),

x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.js → x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx

@@ -4,14 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
 import { RendererStrings } from '../../../i18n';
+import { Return as Config } from '../../functions/browser/markdown';
 import { Markdown } from '../../../../../../src/plugins/kibana_react/public';
+import { RendererFactory } from '../../../types';
 
 const { markdown: strings } = RendererStrings;
 
-export const markdown = () => ({
+export const markdown: RendererFactory<Config> = () => ({
   name: 'markdown',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),
@@ -22,7 +24,7 @@ export const markdown = () => ({
     ReactDOM.render(
       <Markdown
         className="canvasMarkdown"
-        style={fontStyle}
+        style={fontStyle as CSSProperties}
         markdown={config.content}
         openLinksInNewTab={config.openLinksInNewTab}
       />,

x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.js → x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx

@@ -10,11 +10,14 @@ import '../../lib/flot-charts';
 
 import { debounce, includes } from 'lodash';
 import { RendererStrings } from '../../../i18n';
+// @ts-expect-error Untyped local: Will not convert
 import { pie as piePlugin } from './plugins/pie';
+import { Pie } from '../../functions/common/pie';
+import { RendererFactory } from '../../../types';
 
 const { pie: strings } = RendererStrings;
 
-export const pie = () => ({
+export const pie: RendererFactory<Pie> = () => ({
   name: 'pie',
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),
@@ -27,7 +30,10 @@ export const pie = () => ({
     config.options.legend.labelBoxBorderColor = 'transparent';
 
     if (config.font) {
-      const labelFormatter = (label, slice) => {
+      const labelFormatter = (
+        label: string,
+        slice: jquery.flot.dataSeries & { percent: number }
+      ) => {
         // font color defaults to slice color if not specified
         const fontSpec = { ...config.font.spec, color: config.font.spec.color || slice.color };
         const labelDiv = document.createElement('div');
@@ -36,23 +42,28 @@ export const pie = () => ({
         const lineBreak = document.createElement('br');
         const percentText = document.createTextNode(`${Math.round(slice.percent)}%`);
 
-        labelDiv.appendChild(labelSpan);
+        if (labelSpan) {
+          labelDiv.appendChild(labelSpan);
+        }
         labelDiv.appendChild(lineBreak);
         labelDiv.appendChild(percentText);
         return labelDiv.outerHTML;
       };
+      // @ts-ignore ignoring missing propery
       config.options.series.pie.label.formatter = labelFormatter;
 
-      const legendFormatter = (label) => {
+      const legendFormatter = (label: string) => {
         const labelSpan = document.createElement('span');
         Object.assign(labelSpan.style, config.font.spec);
         labelSpan.textContent = label;
         return labelSpan.outerHTML;
       };
+      // @ts-ignore ignoring missing propery
       config.options.legend.labelFormatter = legendFormatter;
     }
 
-    let plot;
+    let plot: jquery.flot.plot;
+
     function draw() {
       if (domNode.clientHeight < 1 || domNode.clientWidth < 1) {
         return;
@@ -63,10 +74,11 @@ export const pie = () => ({
         if (!config.data || !config.data.length) {
           $(domNode).empty();
         } else {
-          plot = $.plot($(domNode), config.data, config.options);
+          // Casting config.options to any here as the flot typings do not appear to be accurate.
+          // For example, it does not have colors as a valid option.
+          plot = $.plot($(domNode), config.data, config.options as any);
         }
       } catch (e) {
-        console.log(e);
         // Nope
       }
     }