build: update dependencies (opensearch-project#962)

Upgrading dependencies:
- Jest related: all jest related packages. This required an updated version of TS version, for that commit increased to 3.9 (fixing few ts errors introduced by that upgraded version). jest-puppeteer and puppeteer were not upgraded due to lack of maintenance of the jest-puppeteer package: this is anyway only used for debugging VRTs that are not actually used frequently.
- ESLint related packages: these also required a code cleanup in some parts
- CLI tools like semantic-release and commitlint
- Time-related libs like Luxon and moment
- Typescript to 4.1.3

packages/osd-charts/.eslintrc.js

@@ -69,6 +69,8 @@ module.exports = {
     '@typescript-eslint/restrict-plus-operands': 0, // rule is broken
     '@typescript-eslint/no-unsafe-call': 1,
     '@typescript-eslint/unbound-method': 1,
+    '@typescript-eslint/no-redeclare': 'off', // we use to declare enum type and object with the same name
+    '@typescript-eslint/no-shadow': 'off', // we use shadow mostly within the canvas renderer function when we need a new context
     'unicorn/consistent-function-scoping': 1,
     'unicorn/explicit-length-check': 1,
     'import/no-cycle': [0, { maxDepth: 3, ignoreExternal: true }], // TODO: should error when this is fixed https://github.com/benmosher/eslint-plugin-import/issues/1453
@@ -82,6 +84,8 @@ module.exports = {
     'no-param-reassign': 1,
     'react/no-array-index-key': 1,
     'react/prefer-stateless-function': 1,
+    'react/require-default-props': 'off',
+    'react/display-name': 'off',
     'jsx-a11y/no-static-element-interactions': 1,
     'jsx-a11y/mouse-events-have-key-events': 1,
     'jsx-a11y/click-events-have-key-events': 1,
@@ -264,6 +268,10 @@ module.exports = {
         case: 'snakeCase',
       },
     ],
+    'unicorn/no-array-callback-reference': 'off',
+    'unicorn/no-array-reduce': 'off',
+    'unicorn/prefer-dom-node-append': 'off',
+    'unicorn/prefer-dom-node-remove': 'off',
 
     /*
      * file-header plugin

packages/osd-charts/.nvmrc

@@ -1 +1 @@
-10.19.0
+10.23.1

packages/osd-charts/integration/helpers.ts

@@ -18,36 +18,37 @@
  */
 
 import { lstatSync, readdirSync } from 'fs';
-import { join, resolve } from 'path';
+import path from 'path';
 
 import { getStorybook, configure } from '@storybook/react';
 
 export type StoryInfo = [string, string, number];
 
 export type StoryGroupInfo = [string, string, StoryInfo[]];
 
+function enumerateFiles(basedir: string, dir: string) {
+  let result: string[] = [];
+  readdirSync(path.join(basedir, dir)).forEach((file) => {
+    const relativePath = path.join(dir, file);
+    const stats = lstatSync(path.join(basedir, relativePath));
+    if (stats.isDirectory()) {
+      result = result.concat(enumerateFiles(basedir, relativePath));
+    } else if (/\.stories\.tsx$/.test(relativePath)) {
+      result.push(relativePath);
+    }
+  });
+  return result;
+}
+
 function requireAllStories(basedir: string, directory: string) {
-  function enumerateFiles(basedir: string, dir: string) {
-    let result: string[] = [];
-    readdirSync(join(basedir, dir)).forEach((file) => {
-      const relativePath = join(dir, file);
-      const stats = lstatSync(join(basedir, relativePath));
-      if (stats.isDirectory()) {
-        result = result.concat(enumerateFiles(basedir, relativePath));
-      } else if (/\.stories\.tsx$/.test(relativePath)) {
-        result.push(relativePath);
-      }
-    });
-    return result;
-  }
-  const absoluteDirectory = resolve(basedir, directory);
+  const absoluteDirectory = path.resolve(basedir, directory);
 
   const keys = enumerateFiles(absoluteDirectory, '.');
   function requireContext(key: string) {
     if (!keys.includes(key)) {
       throw new Error(`Cannot find module '${key}'`);
     }
-    const fullKey = require('path').resolve(absoluteDirectory, key);
+    const fullKey = path.resolve(absoluteDirectory, key);
     return require(fullKey);
   }
 

packages/osd-charts/integration/jest.config.js

@@ -25,7 +25,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest_env_setup.ts'],
   globals: {
     'ts-jest': {
-      tsConfig: '<rootDir>/tsconfig.json',
+      tsconfig: '<rootDir>/tsconfig.json',
     },
     /*
      * The window and HTMLElement globals are required to use @elastic/eui with VRT

packages/osd-charts/integration/page_objects/common.ts

@@ -81,19 +81,11 @@ function getCursorPosition(
   let y = element.top;
 
   if (top !== undefined || bottom !== undefined) {
-    if (top !== undefined) {
-      y = element.top + top;
-    } else {
-      y = element.top + element.height - bottom!;
-    }
+    y = top !== undefined ? element.top + top : element.top + element.height - bottom!;
   }
 
   if (left !== undefined || right !== undefined) {
-    if (left !== undefined) {
-      x = element.left + left;
-    } else {
-      x = element.left + element.width - right!;
-    }
+    x = left !== undefined ? element.left + left : element.left + element.width - right!;
   }
 
   return { x, y };
@@ -145,6 +137,7 @@ type ScreenshotElementAtUrlOptions = ScreenshotDOMElementOptions & {
 
 class CommonPage {
   readonly chartWaitSelector = '.echChartStatus[data-ech-render-complete=true]';
+
   readonly chartSelector = '.echChart';
 
   /**

packages/osd-charts/jest.config.js

@@ -21,13 +21,12 @@ module.exports = {
   testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
   roots: ['<rootDir>/src'],
   preset: 'ts-jest',
-  testEnvironment: 'jest-environment-jsdom-fourteen',
   setupFilesAfterEnv: ['<rootDir>/scripts/setup_enzyme.ts', '<rootDir>/scripts/custom_matchers.ts'],
   coveragePathIgnorePatterns: ['<rootDir>/src/mocks/', '<rootDir>/node_modules/'],
   clearMocks: true,
   globals: {
     'ts-jest': {
-      tsConfig: 'tsconfig.jest.json',
+      tsconfig: 'tsconfig.jest.json',
     },
   },
 };

packages/osd-charts/package.json

@@ -82,8 +82,8 @@
     "@babel/polyfill": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
-    "@commitlint/cli": "^9.1.2",
-    "@commitlint/config-conventional": "^9.1.2",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
     "@elastic/datemath": "^5.0.2",
     "@elastic/eui": "^27.0.0",
     "@elastic/github-checks-reporter": "^0.0.20-b3",
@@ -118,71 +118,70 @@
     "@types/d3-shape": "^1.3.1",
     "@types/enzyme": "^3.9.0",
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/expect-puppeteer": "^3.3.1",
-    "@types/jest": "^25.2.1",
-    "@types/jest-environment-puppeteer": "^4.3.1",
-    "@types/jest-image-snapshot": "^2.12.0",
-    "@types/jsdom": "^16.2.3",
+    "@types/expect-puppeteer": "^4.4.5",
+    "@types/jest": "^26.0.19",
+    "@types/jest-environment-puppeteer": "^4.4.1",
+    "@types/jest-image-snapshot": "^4.1.3",
+    "@types/jsdom": "^16.2.5",
     "@types/lodash": "^4.14.121",
-    "@types/luxon": "^1.11.1",
-    "@types/moment-timezone": "^0.5.12",
-    "@types/puppeteer": "^1.19.1",
+    "@types/luxon": "^1.25.0",
+    "@types/moment-timezone": "^0.5.30",
+    "@types/puppeteer": "^5.4.2",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.1",
     "@types/seedrandom": "^2.4.28",
     "@types/selenium-webdriver": "^4.0.6",
     "@types/storybook__addon-info": "^5.2.1",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^3.4.4",
-    "@typescript-eslint/eslint-plugin": "^3.0.2",
-    "@typescript-eslint/parser": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@typescript-eslint/parser": "^4.12.0",
     "autoprefixer": "^9.8.4",
     "babel-loader": "^8.1.0",
-    "backport": "^4.8.0",
-    "canvas": "^2.4.1",
+    "backport": "^5.6.1",
+    "canvas": "^2.6.1",
     "chromedriver": "^80.0.0",
     "circular-dependency-plugin": "^5.2.0",
     "commitizen": "^4.0.3",
     "core-js": "^3.6.4",
     "cross-env": "^7.0.2",
     "css-loader": "^3.6.0",
     "cz-conventional-changelog": "^3.3.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.10.0",
-    "eslint": "^7.1.0",
-    "eslint-config-airbnb-typescript": "^7.2.1",
-    "eslint-config-prettier": "^6.9.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-file-header": "^0.0.1",
-    "eslint-plugin-header": "^3.0.0",
-    "eslint-plugin-import": "^2.21.1",
-    "eslint-plugin-jest": "^23.0.4",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-header": "^3.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.3",
-    "eslint-plugin-unicorn": "^20.1.0",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-unicorn": "^25.0.1",
     "geckodriver": "^1.19.1",
-    "husky": "^3.1.0",
-    "jest": "^25.4.0",
-    "jest-environment-jsdom-fourteen": "^1.0.1",
+    "husky": "^4.3.6",
+    "jest": "^26.6.3",
     "jest-extended": "^0.11.5",
-    "jest-image-snapshot": "^3.1.0",
-    "jest-matcher-utils": "^25.4.0",
+    "jest-image-snapshot": "^4.3.0",
+    "jest-matcher-utils": "^26.6.2",
     "jest-puppeteer": "^4.4.0",
-    "jest-puppeteer-docker": "^1.3.2",
-    "lint-staged": "^10.2.7",
+    "jest-puppeteer-docker": "^1.4.2",
+    "lint-staged": "^10.5.3",
     "lodash": "^4.17.15",
     "lorem-ipsum": "^2.0.3",
-    "luxon": "^1.11.3",
-    "moment": "^2.27.0",
-    "moment-timezone": "^0.5.27",
+    "luxon": "^1.25.0",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.32",
     "node-sass": "^4.14.1",
     "numeral": "^2.0.6",
     "postcss-cli": "^7.1.1",
-    "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.0",
+    "prettier": "^2.2.1",
+    "pretty-quick": "^3.1.0",
     "puppeteer": "^1.20.0",
     "react": "^16.13.0",
     "react-docgen-typescript-loader": "^3.7.2",
@@ -197,17 +196,17 @@
     "semantic-release": "^17.3.0",
     "semantic-release-slack-bot": "^1.6.2",
     "style-loader": "^1.2.1",
-    "ts-jest": "^25.4.0",
+    "ts-jest": "^26.4.4",
     "ts-loader": "^7.0.5",
-    "ts-prune": "^0.3.0",
-    "typescript": "^3.7.2",
+    "ts-prune": "^0.8.4",
+    "typescript": "^4.1.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },
   "peerDependencies": {
-    "moment": "^2.27.0",
-    "moment-timezone": "^0.5.27",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.32",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
@@ -221,7 +220,7 @@
     "refractor": "~3.1.0"
   },
   "engines": {
-    "node": ">=10.19",
+    "node": ">=10.23",
     "yarn": "^1.10.1"
   },
   "browserslist": [

packages/osd-charts/scripts/concat_sass.js

@@ -34,9 +34,8 @@ function recursiveReadSCSS(branchId, branch) {
   }
   const file = fs.readFileSync(branchId, 'utf8');
   const sassFileContent = [];
-  branch.imports.forEach((branchId) => {
-    const content = recursiveReadSCSS(branchId, graph.index[branchId]);
-    sassFileContent.push(content);
+  branch.imports.forEach((branchImport) => {
+    sassFileContent.push(recursiveReadSCSS(branchImport, graph.index[branchImport]));
   });
   // remove imports
   const contentWithoutImports = removeImportsFromFile(file);

packages/osd-charts/scripts/setup_enzyme.ts

@@ -36,6 +36,7 @@ window.requestAnimationFrame = (callback) => {
 type ResizeObserverMockCallback = (entries: Array<{ contentRect: { width: number; height: number } }>) => void;
 class ResizeObserverMock {
   callback: ResizeObserverMockCallback;
+
   constructor(callback: ResizeObserverMockCallback) {
     this.callback = callback;
   }

packages/osd-charts/src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts

@@ -226,10 +226,10 @@ export function renderCanvas2d(
 
     renderLayers(ctx, [
       // clear the canvas
-      (ctx: CanvasRenderingContext2D) => clearCanvas(ctx, 200000, 200000),
+      (context: CanvasRenderingContext2D) => clearCanvas(context, 200000, 200000),
 
-      (ctx: CanvasRenderingContext2D) =>
-        withContext(ctx, (ctx) => {
+      (context: CanvasRenderingContext2D) =>
+        withContext(context, (ctx) => {
           const fullSize = referenceSize;
           const labelSize = fullSize / 2;
           const pxRangeFrom = -fullSize / 2 + (circular || vertical ? 0 : labelSize);

packages/osd-charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx

@@ -25,7 +25,7 @@ import { onChartRendered } from '../../../../state/actions/chart';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { Dimensions } from '../../../../utils/dimensions';
-import { BulletViewModel, nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
+import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { geometries } from '../../state/selectors/geometries';
 import { renderCanvas2d } from './canvas_renderers';
 
@@ -46,8 +46,10 @@ interface ReactiveChartOwnProps {
 type Props = ReactiveChartStateProps & ReactiveChartDispatchProps & ReactiveChartOwnProps;
 class Component extends React.Component<Props> {
   static displayName = 'Goal';
+
   // firstRender = true; // this'll be useful for stable resizing of treemaps
   private ctx: CanvasRenderingContext2D | null;
+
   // see example https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Example
   private readonly devicePixelRatio: number; // fixme this be no constant: multi-monitor window drag may necessitate modifying the `<canvas>` dimensions
 
@@ -79,21 +81,6 @@ class Component extends React.Component<Props> {
     }
   }
 
-  private tryCanvasContext() {
-    const canvas = this.props.forwardStageRef.current;
-    this.ctx = canvas && canvas.getContext('2d');
-  }
-
-  private drawCanvas() {
-    if (this.ctx) {
-      const { width, height }: Dimensions = this.props.chartContainerDimensions;
-      renderCanvas2d(this.ctx, this.devicePixelRatio, {
-        ...this.props.geometries,
-        config: { ...this.props.geometries.config, width, height },
-      });
-    }
-  }
-
   handleMouseMove(e: MouseEvent<HTMLCanvasElement>) {
     const {
       initialized,
@@ -109,8 +96,7 @@ class Component extends React.Component<Props> {
     const { chartCenter } = geometries;
     const x = e.clientX - box.left - chartCenter.x;
     const y = e.clientY - box.top - chartCenter.y;
-    const pickedShapes: Array<BulletViewModel> = picker(x, y);
-    return pickedShapes;
+    return picker(x, y);
   }
 
   render() {
@@ -137,6 +123,21 @@ class Component extends React.Component<Props> {
       />
     );
   }
+
+  private tryCanvasContext() {
+    const canvas = this.props.forwardStageRef.current;
+    this.ctx = canvas && canvas.getContext('2d');
+  }
+
+  private drawCanvas() {
+    if (this.ctx) {
+      const { width, height }: Dimensions = this.props.chartContainerDimensions;
+      renderCanvas2d(this.ctx, this.devicePixelRatio, {
+        ...this.props.geometries,
+        config: { ...this.props.geometries.config, width, height },
+      });
+    }
+  }
 }
 
 const mapDispatchToProps = (dispatch: Dispatch): ReactiveChartDispatchProps =>