[Canvas] Cleanup types in lib (#94517)

* fix get_legend_config error in canvas/lib/index

* convert resolve_dataurl to ts to fix canvas/lib/index failure

* convert expression_form_handler to ts to fix canvas/lib/index failure

* convert canvas lib/error into ts

* canvas: do not compile json file due to effect on performance

* remove type. it is not exported and inferred as any implicitly

* fix datatable error in lib/index.d.ts file

* fix url resolver

* case manually to avoid incompatibility error

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

@@ -8,7 +8,6 @@
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
 
-// @ts-expect-error untyped local
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
 import { elasticLogo } from '../../lib/elastic_logo';
 
@@ -64,7 +63,7 @@ export function image(): ExpressionFunctionDefinition<'image', null, Arguments,
       return {
         type: 'image',
         mode: modeStyle,
-        dataurl: resolveWithMissingImage(dataurl, elasticLogo),
+        dataurl: resolveWithMissingImage(dataurl, elasticLogo) as string,
       };
     },
   };

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

@@ -6,7 +6,6 @@
  */
 
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
-// @ts-expect-error untyped local
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
 import { elasticOutline } from '../../lib/elastic_outline';
 import { Render } from '../../../types';

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

@@ -6,7 +6,6 @@
  */
 
 import { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions';
-// @ts-expect-error untyped local
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
 import { elasticOutline } from '../../lib/elastic_outline';
 import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
@@ -75,8 +74,8 @@ export function revealImage(): ExpressionFunctionDefinition<
         value: {
           percent,
           ...args,
-          image: resolveWithMissingImage(args.image, elasticOutline),
-          emptyImage: resolveWithMissingImage(args.emptyImage),
+          image: resolveWithMissingImage(args.image, elasticOutline) as string,
+          emptyImage: resolveWithMissingImage(args.emptyImage) as string,
         },
       };
     },

x-pack/plugins/canvas/canvas_plugin_src/functions/server/demodata/index.ts

@@ -7,7 +7,6 @@
 
 import { sortBy } from 'lodash';
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions';
-// @ts-expect-error unconverted lib file
 import { queryDatatable } from '../../../../common/lib/datatable/query';
 import { DemoRows } from './demo_rows_types';
 import { getDemoRows } from './get_demo_rows';
@@ -62,7 +61,6 @@ export function demodata(): ExpressionFunctionDefinition<
             { id: 'project', name: 'project', meta: { type: 'string' } },
             { id: 'percent_uptime', name: 'percent_uptime', meta: { type: 'number' } },
           ],
-          // @ts-expect-error invalid json mock
           rows: sortBy(demoRows, 'time'),
         };
       } else if (args.type === DemoRows.SHIRTS) {

x-pack/plugins/canvas/common/lib/datatable/index.js → x-pack/plugins/canvas/common/lib/datatable/index.ts

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export * from './query';
+export { queryDatatable } from './query';

x-pack/plugins/canvas/common/lib/datatable/query.js → x-pack/plugins/canvas/common/lib/datatable/query.ts

@@ -4,8 +4,8 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-export function queryDatatable(datatable, query) {
+import type { Datatable } from '../../../types';
+export function queryDatatable(datatable: Datatable, query: Record<string, any>) {
   if (query.size) {
     datatable = {
       ...datatable,
@@ -14,25 +14,25 @@ export function queryDatatable(datatable, query) {
   }
 
   if (query.and) {
-    query.and.forEach((filter) => {
+    query.and.forEach((filter: any) => {
       // handle exact matches
       if (filter.filterType === 'exactly') {
-        datatable.rows = datatable.rows.filter((row) => {
+        datatable.rows = datatable.rows.filter((row: any) => {
           return row[filter.column] === filter.value;
         });
       }
 
       // handle time filters
       if (filter.filterType === 'time') {
-        const columnNames = datatable.columns.map((col) => col.name);
+        const columnNames = datatable.columns.map((col: any) => col.name);
 
         // remove row if no column match
         if (!columnNames.includes(filter.column)) {
           datatable.rows = [];
           return;
         }
 
-        datatable.rows = datatable.rows.filter((row) => {
+        datatable.rows = datatable.rows.filter((row: any) => {
           const fromTime = new Date(filter.from).getTime();
           const toTime = new Date(filter.to).getTime();
           const rowTime = new Date(row[filter.column]).getTime();

x-pack/plugins/canvas/common/lib/errors.js → x-pack/plugins/canvas/common/lib/errors.ts

@@ -5,8 +5,10 @@
  * 2.0.
  */
 
+type NewableError = (...args: any[]) => Error;
+
 // helper to correctly set the prototype of custom error constructor
-function setErrorPrototype(CustomError) {
+function setErrorPrototype(CustomError: NewableError) {
   CustomError.prototype = Object.create(Error.prototype, {
     constructor: {
       value: Error,
@@ -20,15 +22,17 @@ function setErrorPrototype(CustomError) {
 }
 
 // helper to create a custom error by name
-function createError(name) {
-  function CustomError(...args) {
+function createError(name: string) {
+  function CustomError(...args: any[]) {
     const instance = new Error(...args);
-    instance.name = this.name = name;
+    // @ts-expect-error this has not type annotation
+    const self = this as any;
+    instance.name = self.name = name;
 
     if (Error.captureStackTrace) {
       Error.captureStackTrace(instance, CustomError);
     } else {
-      Object.defineProperty(this, 'stack', {
+      Object.defineProperty(self, 'stack', {
         get() {
           return instance.stack;
         },

x-pack/plugins/canvas/common/lib/expression_form_handlers.js → x-pack/plugins/canvas/common/lib/expression_form_handlers.ts

@@ -6,12 +6,14 @@
  */
 
 export class ExpressionFormHandlers {
+  public destroy: () => void;
+  public done: () => void;
   constructor() {
     this.destroy = () => {};
     this.done = () => {};
   }
 
-  onDestroy(fn) {
+  onDestroy(fn: () => void) {
     this.destroy = fn;
   }
 }

x-pack/plugins/canvas/common/lib/get_legend_config.js → x-pack/plugins/canvas/common/lib/get_legend_config.ts

@@ -5,7 +5,15 @@
  * 2.0.
  */
 
-export const getLegendConfig = (legend, size) => {
+import { Legend } from '../../types';
+const acceptedPositions: Legend[] = [
+  Legend.NORTH_WEST,
+  Legend.SOUTH_WEST,
+  Legend.NORTH_EAST,
+  Legend.SOUTH_EAST,
+];
+
+export const getLegendConfig = (legend: boolean | Legend, size: number) => {
   if (!legend || size < 2) {
     return { show: false };
   }
@@ -16,8 +24,7 @@ export const getLegendConfig = (legend, size) => {
     labelBoxBorderColor: 'transparent',
   };
 
-  const acceptedPositions = ['nw', 'ne', 'sw', 'se'];
-
+  // @ts-expect-error
   config.position = !legend || acceptedPositions.includes(legend) ? legend : 'ne';
 
   return config;

x-pack/plugins/canvas/common/lib/index.ts

@@ -5,26 +5,21 @@
  * 2.0.
  */
 
-// @ts-expect-error missing local definition
 export * from './datatable';
 export * from './autocomplete';
 export * from './constants';
 export * from './dataurl';
-// @ts-expect-error missing local definition
 export * from './errors';
-// @ts-expect-error missing local definition
 export * from './expression_form_handlers';
 export * from './fetch';
 export * from './fonts';
 export * from './get_field_type';
-// @ts-expect-error missing local definition
 export * from './get_legend_config';
 export * from './hex_to_rgb';
 export * from './httpurl';
 export * from './missing_asset';
 export * from './palettes';
 export * from './pivot_object_array';
-// @ts-expect-error missing local definition
 export * from './resolve_dataurl';
 export * from './unquote_string';
 export * from './url';

x-pack/plugins/canvas/common/lib/resolve_dataurl.js → x-pack/plugins/canvas/common/lib/resolve_dataurl.ts

@@ -14,13 +14,16 @@ import { missingImage } from '../../common/lib/missing_asset';
  * For example:
  *   [{"type":"expression","chain":[{"type":"function","function":"asset","arguments":{"_":["..."]}}]}]
  */
-export const resolveFromArgs = (args, defaultDataurl = null) => {
+export const resolveFromArgs = (args: any, defaultDataurl: string | null = null): string => {
   const dataurl = get(args, 'dataurl.0', null);
   return isValidUrl(dataurl) ? dataurl : defaultDataurl;
 };
 
-export const resolveWithMissingImage = (img, alt = null) => {
-  if (isValidUrl(img)) {
+export const resolveWithMissingImage = (
+  img: string | null,
+  alt: string | null = null
+): string | null => {
+  if (img !== null && isValidUrl(img)) {
     return img;
   }
   if (img === null) {

x-pack/plugins/canvas/public/functions/pie.ts

@@ -7,7 +7,6 @@
 
 import { get, keyBy, map, groupBy } from 'lodash';
 import { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public';
-// @ts-expect-error untyped local
 import { getLegendConfig } from '../../common/lib/get_legend_config';
 import { getFunctionHelp } from '../../i18n';
 import {

x-pack/plugins/canvas/public/functions/plot/index.ts

@@ -9,7 +9,6 @@ import { set } from '@elastic/safer-lodash-set';
 import { groupBy, get, keyBy, map, sortBy } from 'lodash';
 import { ExpressionFunctionDefinition, Style } from 'src/plugins/expressions';
 import { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public';
-// @ts-expect-error untyped local
 import { getLegendConfig } from '../../../common/lib/get_legend_config';
 import { getFlotAxisConfig } from './get_flot_axis_config';
 import { getFontSpec } from './get_font_spec';

x-pack/plugins/canvas/shareable_runtime/types.ts

@@ -6,8 +6,6 @@
  */
 
 import { RefObject } from 'react';
-// @ts-expect-error Unlinked Webpack Type
-import ContainerStyle from 'types/interpreter';
 import { SavedObject, SavedObjectAttributes } from 'src/core/public';
 
 import { ElementPosition, CanvasPage, CanvasWorkpad, RendererSpec } from '../types';
@@ -52,7 +50,7 @@ export interface CanvasRenderable {
   state: 'ready' | 'error';
   value: {
     as: string;
-    containerStyle: ContainerStyle;
+    containerStyle: any;
     css: string;
     type: 'render';
     value: any;

x-pack/plugins/canvas/tsconfig.json

@@ -5,7 +5,10 @@
     "outDir": "./target/types",
     "emitDeclarationOnly": true,
     "declaration": true,
-    "declarationMap": true
+    "declarationMap": true,
+
+    // the plugin contains some heavy json files
+    "resolveJsonModule": false,
   },
   "include": [
     "../../../typings/**/*",
@@ -19,13 +22,6 @@
     "storybook/**/*",
     "tasks/mocks/*",
     "types/**/*",
-    "**/*.json",
-  ],
-  "exclude": [
-      // these files are too large and upset tsc, so we exclude them
-     "server/sample_data/*.json",
-     "canvas_plugin_src/functions/server/demodata/*.json",
-     "shareable_runtime/test/workpads/*.json",
   ],
   "references": [
     { "path": "../../../src/core/tsconfig.json" },