Update dependencies

- Fix breaking changes for husky and eslint-config-prettier - Remove the .ts extension from several imports (typescript doesn't like it) - Update react-spring - Update calls to faker.random - Add dotenv-webpack as our own dev dependency to win over the outdated one used in storybook, which does not support webpack 5. (see storybookjs/storybook#14403)
Ensembl · Apr 12, 2021 · 08314c5 · 08314c5
1 parent 4df5f68
commit 08314c5
Show file tree

Hide file tree

Showing 38 changed files with 4,617 additions and 6,344 deletions.
diff --git a/src/ensembl/.eslintrc.js b/src/ensembl/.eslintrc.js
@@ -3,7 +3,6 @@ module.exports = {
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
-    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable rules that conflict with prettier
     'plugin:prettier/recommended' // Displays prettier errors as ESLint errors. This has to be the last in this array (not yet sure why).
   ],
   plugins: ['react-hooks'],

diff --git a/src/ensembl/.husky/.gitignore b/src/ensembl/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/src/ensembl/.husky/pre-commit b/src/ensembl/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd src/ensembl
+npx --no-install lint-staged --config .lintstagedrc.json
diff --git a/src/ensembl/.lintstagedrc.json b/src/ensembl/.lintstagedrc.json
@@ -0,0 +1,11 @@
+{
+  "*.{ts,tsx}": [
+    "eslint --max-warnings=0",
+    "manage-licence-header add",
+    "prettier --write"
+  ],
+  "*.{scss}": [
+    "stylelint",
+    "prettier --write"
+  ]
+}
diff --git a/src/ensembl/package-lock.json b/src/ensembl/package-lock.json
diff --git a/src/ensembl/package.json b/src/ensembl/package.json
@@ -13,6 +13,7 @@
   "author": "EMBL-EBI",
   "license": "MIT",
   "scripts": {
+    "prepare": "cd ../.. && husky install src/ensembl/.husky",
     "copy-dotenv": "test ! -f .env && (cp .env.example .env; echo '.env file created') || true",
     "start": "npm install --no-save && npm run serve:dev",
     "serve:dev": "npm run copy-dotenv && webpack serve --config ./webpack/webpack.config.js --env dev",
@@ -31,137 +32,122 @@
     "test:watch": "jest --watch",
     "coverage": "jest --coverage"
   },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "eslint --max-warnings=0",
-      "manage-licence-header add",
-      "prettier --write"
-    ],
-    "*.{scss}": [
-      "stylelint",
-      "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "dependencies": {
-    "@apollo/client": "3.2.3",
-    "@reduxjs/toolkit": "1.4.0",
-    "@sentry/browser": "5.25.0",
-    "classnames": "2.2.6",
+    "@apollo/client": "3.3.13",
+    "@reduxjs/toolkit": "1.5.1",
+    "@sentry/browser": "6.2.5",
+    "classnames": "2.3.1",
     "comlink": "4.3.0",
-    "connected-react-router": "6.8.0",
-    "core-js": "3.6.5",
-    "d3": "6.2.0",
+    "connected-react-router": "6.9.1",
+    "core-js": "3.10.0",
+    "d3": "6.6.2",
     "dotenv": "8.2.0",
     "ensembl-genome-browser": "https://raw.githubusercontent.com/Ensembl/ensembl-genome-browser-assets/master/assets-80f51620ed443c640cdfd6b5aebd505b.tar.gz",
-    "graphql": "15.3.0",
-    "lodash": "4.17.20",
-    "query-string": "6.13.5",
-    "react": "16.14.0",
+    "graphql": "15.5.0",
+    "lodash": "4.17.21",
+    "query-string": "7.0.0",
+    "react": "17.0.2",
     "react-cookie": "4.0.3",
-    "react-dom": "16.13.1",
-    "react-ga": "3.1.2",
-    "react-redux": "7.2.1",
+    "react-dom": "17.0.2",
+    "react-ga": "3.3.0",
+    "react-redux": "7.2.3",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-spring": "8.0.27",
+    "react-spring": "9.0.0",
     "redux": "4.0.5",
     "redux-observable": "1.2.0",
-    "rxjs": "6.6.3",
+    "rxjs": "6.6.7",
     "typesafe-actions": "5.1.0",
     "what-input": "5.2.10"
   },
   "devDependencies": {
-    "@babel/core": "7.13.8",
+    "@babel/core": "7.13.14",
     "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.13.8",
     "@babel/plugin-proposal-object-rest-spread": "7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "7.13.12",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.13.8",
-    "@babel/preset-env": "7.13.9",
-    "@babel/preset-react": "7.12.13",
+    "@babel/preset-env": "7.13.12",
+    "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
-    "@storybook/addon-essentials": "6.2.0-rc.8",
-    "@storybook/addons": "6.2.0-rc.8",
-    "@storybook/builder-webpack5": "6.2.0-rc.8",
-    "@storybook/react": "6.2.0-rc.8",
-    "@storybook/theming": "6.2.0-rc.8",
+    "@storybook/addon-essentials": "6.2.2",
+    "@storybook/addons": "6.2.2",
+    "@storybook/builder-webpack5": "6.2.2",
+    "@storybook/react": "6.2.2",
+    "@storybook/theming": "6.2.2",
     "@svgr/webpack": "5.5.0",
-    "@testing-library/jest-dom": "5.11.6",
-    "@testing-library/react": "11.2.2",
-    "@testing-library/user-event": "12.2.2",
-    "@types/classnames": "2.2.10",
-    "@types/d3": "5.16.3",
-    "@types/faker": "5.1.2",
-    "@types/jest": "26.0.14",
-    "@types/lodash": "4.14.162",
-    "@types/node": "14.11.8",
-    "@types/prettier": "2.1.2",
-    "@types/react": "16.9.52",
-    "@types/react-dom": "16.9.8",
-    "@types/react-redux": "7.1.9",
-    "@types/react-router-dom": "5.1.6",
+    "@testing-library/jest-dom": "5.11.10",
+    "@testing-library/react": "11.2.6",
+    "@testing-library/user-event": "13.1.1",
+    "@types/classnames": "2.2.11",
+    "@types/d3": "6.3.0",
+    "@types/faker": "5.5.0",
+    "@types/jest": "26.0.22",
+    "@types/lodash": "4.14.168",
+    "@types/node": "14.14.37",
+    "@types/prettier": "2.2.3",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.3",
+    "@types/react-redux": "7.1.16",
+    "@types/react-router-dom": "5.1.7",
     "@types/react-router-hash-link": "1.2.1",
     "@types/redux-mock-store": "1.0.2",
     "@types/webpack-env": "1.16.0",
-    "@typescript-eslint/eslint-plugin": "4.16.1",
-    "@typescript-eslint/parser": "4.16.1",
+    "@typescript-eslint/eslint-plugin": "4.20.0",
+    "@typescript-eslint/parser": "4.20.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
     "babel-plugin-react-remove-properties": "0.3.0",
     "compression-webpack-plugin": "7.1.2",
     "connect-history-api-fallback": "1.6.0",
     "copy-webpack-plugin": "8.1.0",
-    "css-loader": "5.1.4",
+    "css-loader": "5.2.0",
     "css-minimizer-webpack-plugin": "1.3.0",
-    "eslint": "7.11.0",
-    "eslint-config-prettier": "6.12.0",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.21.4",
-    "eslint-plugin-react-hooks": "4.1.2",
-    "faker": "5.4.0",
+    "dotenv-webpack": "6.0.4",
+    "eslint": "7.23.0",
+    "eslint-config-prettier": "8.1.0",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "faker": "5.5.2",
     "file-loader": "6.2.0",
     "fork-ts-checker-webpack-plugin": "6.2.0",
     "gh-pages": "3.1.0",
     "html-webpack-plugin": "5.3.1",
-    "husky": "4.3.0",
+    "husky": "6.0.0",
     "identity-obj-proxy": "3.0.0",
     "image-webpack-loader": "7.0.1",
-    "jest": "26.5.3",
+    "jest": "26.6.3",
     "jest-fetch-mock": "3.0.3",
     "jest-transform-stub": "2.0.0",
-    "koa": "2.13.0",
+    "koa": "2.13.1",
     "koa-connect": "2.1.0",
     "koa-proxy": "1.0.0-alpha.3",
     "koa-static": "5.0.0",
     "licence-manager": "git+https://github.com/Ensembl/ensembl-licence-manager.git#36b534d28ff26d345b4ba4da0cbc18e1e0f7a6b7",
-    "lint-staged": "10.4.0",
-    "mini-css-extract-plugin": "1.3.9",
+    "lint-staged": "10.5.4",
+    "mini-css-extract-plugin": "1.4.0",
     "node-sass": "5.0.0",
-    "postcss": "8.2.8",
+    "postcss": "8.2.9",
     "postcss-loader": "5.2.0",
     "postcss-preset-env": "6.7.0",
-    "prettier": "2.1.2",
+    "prettier": "2.2.1",
     "redux-mock-store": "1.5.4",
     "rimraf": "3.0.2",
     "sass-loader": "11.0.1",
     "source-map-loader": "2.0.1",
     "style-loader": "2.0.0",
-    "stylelint": "13.7.2",
+    "stylelint": "13.12.0",
     "stylelint-config-recommended-scss": "4.2.0",
-    "stylelint-scss": "3.18.0",
+    "stylelint-scss": "3.19.0",
     "stylelint-webpack-plugin": "2.1.1",
     "ts-multipick": "1.0.0",
-    "typescript": "4.0.3",
-    "webpack": "5.28.0",
+    "typescript": "4.2.3",
+    "webpack": "5.30.0",
     "webpack-bundle-analyzer": "4.4.0",
-    "webpack-cli": "4.5.0",
+    "webpack-cli": "4.6.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",
     "workbox-webpack-plugin": "6.1.2",

diff --git a/src/ensembl/src/content/app/browser/browser-cog/BrowserCog.tsx b/src/ensembl/src/content/app/browser/browser-cog/BrowserCog.tsx
@@ -73,7 +73,7 @@ const BrowserCog = (props: BrowserCogProps) => {
     setTrackConfigAnimation(false);
   }, [cogActivated]);
 
-  const transitions = useTransition(showTrackConfig, null, {
+  const transition = useTransition(showTrackConfig, {
     config: { duration: 100 },
     enter: { opacity: 1 },
     from: { opacity: 0 },
@@ -90,10 +90,10 @@ const BrowserCog = (props: BrowserCogProps) => {
           image={cogIconConfig.icon}
         />
       </div>
-      {transitions.map(({ item, key, props: style }) => {
+      {transition((style, item) => {
         return (
           item && (
-            <animated.div key={key} style={style}>
+            <animated.div key="browserTrackConfig" style={style}>
               <BrowserTrackConfig
                 onClose={() => props.updateSelectedCog(null)}
               />

diff --git a/src/ensembl/src/content/app/browser/browser-cog/BrowserCogList.test.tsx b/src/ensembl/src/content/app/browser/browser-cog/BrowserCogList.test.tsx
@@ -32,7 +32,7 @@ describe('<BrowserCogList />', () => {
   const defaultProps = {
     browserActivated: true,
     browserCogList: 0,
-    browserCogTrackList: { 'track:gc': faker.random.number() },
+    browserCogTrackList: { 'track:gc': faker.datatype.number() },
     trackConfigNames: {},
     trackConfigLabel: {},
     selectedCog: faker.lorem.words(),

diff --git a/...embl/src/content/app/browser/browser-location-indicator/BrowserLocationIndicator.test.tsx b/...embl/src/content/app/browser/browser-location-indicator/BrowserLocationIndicator.test.tsx
@@ -26,9 +26,9 @@ import { BrowserLocationIndicator } from './BrowserLocationIndicator';
 import { ChrLocation } from '../browserState';
 
 const chrName = faker.lorem.word();
-const startPosition = faker.random.number({ min: 1, max: 1000000 });
+const startPosition = faker.datatype.number({ min: 1, max: 1000000 });
 const endPosition =
-  startPosition + faker.random.number({ min: 1000, max: 1000000 });
+  startPosition + faker.datatype.number({ min: 1000, max: 1000000 });
 
 const props = {
   location: [chrName, startPosition, endPosition] as ChrLocation,

diff --git a/src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarControls.test.tsx b/src/ensembl/src/content/app/browser/browser-nav/BrowserNavBarControls.test.tsx
@@ -39,12 +39,12 @@ jest.mock('src/shared/components/overlay/Overlay', () => () => (
 ));
 
 const browserNavIconStates: BrowserNavIconStates = {
-  [BrowserNavAction.NAVIGATE_UP]: faker.random.boolean(),
-  [BrowserNavAction.NAVIGATE_RIGHT]: faker.random.boolean(),
-  [BrowserNavAction.NAVIGATE_DOWN]: faker.random.boolean(),
-  [BrowserNavAction.NAVIGATE_LEFT]: faker.random.boolean(),
-  [BrowserNavAction.ZOOM_OUT]: faker.random.boolean(),
-  [BrowserNavAction.ZOOM_IN]: faker.random.boolean()
+  [BrowserNavAction.NAVIGATE_UP]: faker.datatype.boolean(),
+  [BrowserNavAction.NAVIGATE_RIGHT]: faker.datatype.boolean(),
+  [BrowserNavAction.NAVIGATE_DOWN]: faker.datatype.boolean(),
+  [BrowserNavAction.NAVIGATE_LEFT]: faker.datatype.boolean(),
+  [BrowserNavAction.ZOOM_OUT]: faker.datatype.boolean(),
+  [BrowserNavAction.ZOOM_IN]: faker.datatype.boolean()
 };
 
 describe('BrowserNavBarControls', () => {

diff --git a/src/ensembl/src/content/app/browser/browser-region-editor/BrowserRegionEditor.test.tsx b/src/ensembl/src/content/app/browser/browser-region-editor/BrowserRegionEditor.test.tsx
@@ -97,8 +97,10 @@ describe('<BrowserRegionEditor />', () => {
 
     it('validates region input on submit', () => {
       const [stick] = initialChrLocation;
-      const locationStartInput = getCommaSeparatedNumber(faker.random.number());
-      const locationEndInput = getCommaSeparatedNumber(faker.random.number());
+      const locationStartInput = getCommaSeparatedNumber(
+        faker.datatype.number()
+      );
+      const locationEndInput = getCommaSeparatedNumber(faker.datatype.number());
 
       const { container } = render(<BrowserRegionEditor {...defaultProps} />);
       const [firstInput, secondInput] = container.querySelectorAll('input');
@@ -129,8 +131,10 @@ describe('<BrowserRegionEditor />', () => {
         jest.restoreAllMocks();
       });
 
-      const locationStartInput = getCommaSeparatedNumber(faker.random.number());
-      const locationEndInput = getCommaSeparatedNumber(faker.random.number());
+      const locationStartInput = getCommaSeparatedNumber(
+        faker.datatype.number()
+      );
+      const locationEndInput = getCommaSeparatedNumber(faker.datatype.number());
       const startError = 'start error message';
       const endError = 'end error message';
       const mockValidationMessages = createRegionValidationMessages();
@@ -208,8 +212,10 @@ describe('<BrowserRegionEditor />', () => {
     });
 
     describe('on validation success', () => {
-      const locationStartInput = getCommaSeparatedNumber(faker.random.number());
-      const locationEndInput = getCommaSeparatedNumber(faker.random.number());
+      const locationStartInput = getCommaSeparatedNumber(
+        faker.datatype.number()
+      );
+      const locationEndInput = getCommaSeparatedNumber(faker.datatype.number());
       const regionId = faker.lorem.words();
 
       beforeEach(() => {

diff --git a/src/ensembl/src/content/app/browser/browserHelper.test.ts b/src/ensembl/src/content/app/browser/browserHelper.test.ts
@@ -66,15 +66,15 @@ describe('browserHelper', () => {
         error_code: null,
         error_message: startError,
         is_valid: false,
-        value: faker.random.number()
+        value: faker.datatype.number()
       }
     };
     const invalidEndInfo: Partial<RegionValidationResponse> = {
       end: {
         error_code: null,
         error_message: endError,
         is_valid: false,
-        value: faker.random.number()
+        value: faker.datatype.number()
       }
     };
     const mockValidationMessages = createRegionValidationMessages(); // all error messages are null by default

diff --git a/...ontent/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelBookmarks.test.tsx b/...ontent/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelBookmarks.test.tsx
@@ -46,7 +46,7 @@ const regionObjectId = `${genomeId}:region:${region}`;
 
 const createRandomPreviouslyViewedObject = (): PreviouslyViewedObject => ({
   genome_id: faker.random.word(),
-  object_id: `${faker.random.word()}:gene:${faker.random.uuid()}`,
+  object_id: `${faker.random.word()}:gene:${faker.datatype.uuid()}`,
   object_type: 'gene',
   label: faker.random.word()
 });

diff --git a/src/ensembl/src/content/app/browser/track-panel/trackPanelActions.test.ts b/src/ensembl/src/content/app/browser/track-panel/trackPanelActions.test.ts
@@ -31,11 +31,11 @@ const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
 const trackPanelProperties: TrackPanelStateForGenome = {
-  isTrackPanelModalOpened: faker.random.boolean(),
+  isTrackPanelModalOpened: faker.datatype.boolean(),
   selectedTrackPanelTab: TrackSet.GENOMIC,
   trackPanelModalView: faker.lorem.word(),
   highlightedTrackId: faker.lorem.word(),
-  isTrackPanelOpened: faker.random.boolean(),
+  isTrackPanelOpened: faker.datatype.boolean(),
   collapsedTrackIds: [faker.lorem.word()],
   bookmarks: [],
   previouslyViewedObjects: []

diff --git a/src/ensembl/src/content/app/custom-download/components/checkbox-grid/CheckboxGrid.test.tsx b/src/ensembl/src/content/app/custom-download/components/checkbox-grid/CheckboxGrid.test.tsx
@@ -28,7 +28,7 @@ import CheckboxGrid, {
 const createCheckboxData = (options: CheckboxGridOption[]) => {
   const id = faker.lorem.word();
   const label = faker.lorem.word();
-  const isChecked = faker.random.boolean();
+  const isChecked = faker.datatype.boolean();
 
   options.push({
     id,

diff --git a/...c/content/app/custom-download/components/checkbox-with-radios/CheckboxWithRadios.test.tsx b/...c/content/app/custom-download/components/checkbox-with-radios/CheckboxWithRadios.test.tsx
@@ -27,7 +27,7 @@ import CheckboxWithRadios, {
 const onChange = jest.fn();
 
 const createOption = () => ({
-  value: faker.random.uuid(),
+  value: faker.datatype.uuid(),
   label: faker.random.words(5)
 });