Update dependencies and clean up babel config (#499)

- major version bump for rxjs (v6 -> v7)
- removed some of explicit babel transforms (some aren't necessary for our target browsers,
   whereas others are already included in @babel/preset-env)
- replaced the deprecated `node-sass` library with the `sass` library

src/ensembl/babel.config.js

@@ -11,13 +11,6 @@ module.exports = {
       }
     ]
   ],
-  plugins: [
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-proposal-nullish-coalescing-operator'
-  ],
   env: {
     test: {
       presets: [

src/ensembl/package.json

@@ -33,15 +33,15 @@
     "coverage": "jest --coverage"
   },
   "dependencies": {
-    "@apollo/client": "3.3.15",
+    "@apollo/client": "3.3.19",
     "@reduxjs/toolkit": "1.5.1",
-    "@sentry/browser": "6.3.0",
+    "@sentry/browser": "6.4.1",
     "classnames": "2.3.1",
-    "comlink": "4.3.0",
+    "comlink": "4.3.1",
     "connected-react-router": "6.9.1",
-    "core-js": "3.11.0",
+    "core-js": "3.12.1",
     "d3": "6.7.0",
-    "dotenv": "8.2.0",
+    "dotenv": "10.0.0",
     "ensembl-genome-browser": "https://raw.githubusercontent.com/Ensembl/ensembl-genome-browser-assets/master/assets-80f51620ed443c640cdfd6b5aebd505b.tar.gz",
     "graphql": "15.5.0",
     "lodash": "4.17.21",
@@ -50,70 +50,65 @@
     "react-cookie": "4.0.3",
     "react-dom": "17.0.2",
     "react-ga": "3.3.0",
-    "react-redux": "7.2.3",
+    "react-redux": "7.2.4",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-spring": "9.1.2",
-    "redux": "4.0.5",
-    "redux-observable": "1.2.0",
-    "rxjs": "6.6.7",
+    "redux": "4.1.0",
+    "redux-observable": "2.0.0-rc.1",
+    "rxjs": "7.1.0",
     "typesafe-actions": "5.1.0",
     "what-input": "5.2.10"
   },
   "devDependencies": {
-    "@babel/core": "7.13.16",
-    "@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.12",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.13.8",
-    "@babel/preset-env": "7.13.15",
+    "@babel/core": "7.14.3",
+    "@babel/plugin-transform-modules-commonjs": "7.14.0",
+    "@babel/preset-env": "7.14.2",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
-    "@storybook/addon-essentials": "6.2.8",
-    "@storybook/addons": "6.2.8",
-    "@storybook/builder-webpack5": "6.2.8",
-    "@storybook/react": "6.2.8",
-    "@storybook/theming": "6.2.8",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addons": "6.2.9",
+    "@storybook/builder-webpack5": "6.2.9",
+    "@storybook/react": "6.2.9",
+    "@storybook/theming": "6.2.9",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "5.12.0",
-    "@testing-library/react": "11.2.6",
-    "@testing-library/user-event": "13.1.5",
+    "@testing-library/react": "11.2.7",
+    "@testing-library/user-event": "13.1.9",
     "@types/classnames": "2.3.1",
-    "@types/d3": "6.3.0",
-    "@types/faker": "5.5.3",
-    "@types/jest": "26.0.22",
-    "@types/lodash": "4.14.168",
-    "@types/node": "14.14.41",
+    "@types/d3": "6.6.0",
+    "@types/faker": "5.5.5",
+    "@types/jest": "26.0.23",
+    "@types/lodash": "4.14.170",
+    "@types/node": "15.6.0",
     "@types/prettier": "2.2.3",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.3",
+    "@types/react": "17.0.6",
+    "@types/react-dom": "17.0.5",
     "@types/react-redux": "7.1.16",
     "@types/react-router-dom": "5.1.7",
-    "@types/react-router-hash-link": "1.2.1",
+    "@types/react-router-hash-link": "2.4.0",
     "@types/redux-mock-store": "1.0.2",
     "@types/webpack-env": "1.16.0",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "4.24.0",
+    "@typescript-eslint/parser": "4.24.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",
+    "compression-webpack-plugin": "8.0.0",
     "connect-history-api-fallback": "1.6.0",
-    "copy-webpack-plugin": "8.1.1",
-    "css-loader": "5.2.4",
-    "css-minimizer-webpack-plugin": "2.0.0",
+    "copy-webpack-plugin": "9.0.0",
+    "css-loader": "5.2.5",
+    "css-minimizer-webpack-plugin": "3.0.0",
     "dotenv-webpack": "7.0.2",
-    "eslint": "7.24.0",
-    "eslint-config-prettier": "8.2.0",
+    "eslint": "7.27.0",
+    "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
     "faker": "5.5.3",
     "file-loader": "6.2.0",
-    "fork-ts-checker-webpack-plugin": "6.2.4",
+    "fork-ts-checker-webpack-plugin": "6.2.10",
     "gh-pages": "3.1.0",
     "html-webpack-plugin": "5.3.1",
     "husky": "6.0.0",
@@ -127,27 +122,27 @@
     "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.5.4",
-    "mini-css-extract-plugin": "1.5.0",
-    "node-sass": "5.0.0",
-    "postcss": "8.2.12",
-    "postcss-loader": "5.2.0",
+    "lint-staged": "11.0.0",
+    "mini-css-extract-plugin": "1.6.0",
+    "postcss": "8.3.0",
+    "postcss-loader": "5.3.0",
     "postcss-preset-env": "6.7.0",
-    "prettier": "2.2.1",
+    "prettier": "2.3.0",
     "redux-mock-store": "1.5.4",
     "rimraf": "3.0.2",
-    "sass-loader": "11.0.1",
-    "source-map-loader": "2.0.1",
+    "sass": "1.34.0",
+    "sass-loader": "11.1.1",
+    "source-map-loader": "3.0.0",
     "style-loader": "2.0.0",
-    "stylelint": "13.12.0",
+    "stylelint": "13.13.1",
     "stylelint-config-recommended-scss": "4.2.0",
     "stylelint-scss": "3.19.0",
     "stylelint-webpack-plugin": "2.1.1",
     "ts-multipick": "1.0.0",
     "typescript": "4.2.4",
-    "webpack": "5.35.0",
-    "webpack-bundle-analyzer": "4.4.1",
-    "webpack-cli": "4.6.0",
+    "webpack": "5.37.1",
+    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-cli": "4.7.0",
     "webpack-dev-server": "4.0.0-beta.2",
     "webpack-merge": "5.7.3",
     "workbox-webpack-plugin": "6.1.5",

src/ensembl/src/content/app/species-selector/state/speciesSelectorActions.ts

@@ -15,7 +15,7 @@
  */
 
 import { createAsyncAction, createAction } from 'typesafe-actions';
-import { ActionCreator, Action } from 'redux';
+import { Action } from 'redux';
 import { ThunkAction } from 'redux-thunk';
 import find from 'lodash/find';
 import pickBy from 'lodash/pickBy';
@@ -37,7 +37,6 @@ import { getSpeciesAnalyticsName } from 'src/content/app/species-selector/specie
 import {
   SearchMatch,
   SearchMatches,
-  // Strain,
   PopularSpecies,
   CommittedItem
 } from 'src/content/app/species-selector/types/species-search';
@@ -65,35 +64,32 @@ import { MINIMUM_SEARCH_LENGTH } from 'src/content/app/species-selector/constant
 
 import { RootState } from 'src/store';
 
-export const setSearchText = createAction('species_selector/set_search_text')<
-  string
->();
-
-export const updateSearch: ActionCreator<ThunkAction<
-  void,
-  any,
-  null,
-  Action<string>
->> = (text: string) => (dispatch, getState: () => RootState) => {
-  const state = getState();
-  const selectedItem = getSelectedItem(state);
-  const previousText = getSearchText(state);
-  if (selectedItem) {
-    dispatch(clearSelectedSearchResult());
-  }
+export const setSearchText = createAction(
+  'species_selector/set_search_text'
+)<string>();
+
+export const updateSearch =
+  (text: string): ThunkAction<void, any, null, Action<string>> =>
+  (dispatch, getState: () => RootState) => {
+    const state = getState();
+    const selectedItem = getSelectedItem(state);
+    const previousText = getSearchText(state);
+    if (selectedItem) {
+      dispatch(clearSelectedSearchResult());
+    }
 
-  const trimmedText = text.trim();
-  if (text.length < previousText.length) {
-    // user is deleting their input; clear search results
-    dispatch(clearSearchResults());
-  }
+    const trimmedText = text.trim();
+    if (text.length < previousText.length) {
+      // user is deleting their input; clear search results
+      dispatch(clearSearchResults());
+    }
 
-  if (trimmedText.length >= MINIMUM_SEARCH_LENGTH) {
-    dispatch(fetchSpeciesSearchResults.request(trimmedText));
-  }
+    if (trimmedText.length >= MINIMUM_SEARCH_LENGTH) {
+      dispatch(fetchSpeciesSearchResults.request(trimmedText));
+    }
 
-  dispatch(setSearchText(text));
-};
+    dispatch(setSearchText(text));
+  };
 
 export const fetchSpeciesSearchResults = createAsyncAction(
   'species_selector/species_search_request',
@@ -144,178 +140,163 @@ export const clearSelectedSearchResult = createAction(
 //   }
 // };
 
-export const ensureSpeciesIsCommitted: ActionCreator<ThunkAction<
-  void,
-  any,
-  null,
-  Action<string>
->> = (genomeId: string) => async (dispatch, getState: () => RootState) => {
-  const state = getState();
-  const committedSpecies = getCommittedSpecies(state);
-  const genomeInfo = getGenomeInfoById(state, genomeId);
-  if (getCommittedSpeciesById(state, genomeId) || !genomeInfo) {
-    return;
-  }
-
-  const newCommittedSpecies = [
-    ...committedSpecies,
-    {
-      ...pickBy(genomeInfo, (value, key) => {
-        return key !== 'example_objects';
-      }),
-      isEnabled: true
+export const ensureSpeciesIsCommitted =
+  (genomeId: string): ThunkAction<void, any, null, Action<string>> =>
+  async (dispatch, getState: () => RootState) => {
+    const state = getState();
+    const committedSpecies = getCommittedSpecies(state);
+    const genomeInfo = getGenomeInfoById(state, genomeId);
+    if (getCommittedSpeciesById(state, genomeId) || !genomeInfo) {
+      return;
     }
-  ] as CommittedItem[];
-
-  dispatch(updateCommittedSpecies(newCommittedSpecies));
-  speciesSelectorStorageService.saveSelectedSpecies(newCommittedSpecies);
-};
-
-export const ensureSpeciesIsEnabled: ActionCreator<ThunkAction<
-  void,
-  any,
-  null,
-  Action<string>
->> = (genomeId: string) => (dispatch, getState: () => RootState) => {
-  const state = getState();
-
-  const currentSpecies = getCommittedSpeciesById(state, genomeId);
-  if (!currentSpecies || currentSpecies.isEnabled) {
-    return;
-  }
-
-  dispatch(toggleSpeciesUseAndSave(genomeId));
-};
-
-export const fetchPopularSpecies: ActionCreator<ThunkAction<
-  void,
-  any,
-  null,
-  Action<string>
->> = () => async (dispatch) => {
-  try {
-    dispatch(fetchPopularSpeciesAsyncActions.request());
-
-    const url = '/api/genomesearch/popular_genomes';
-    const response = await apiService.fetch(url);
-
-    dispatch(
-      fetchPopularSpeciesAsyncActions.success({
-        popularSpecies: response.popular_species
-      })
-    );
-  } catch (error) {
-    dispatch(fetchPopularSpeciesAsyncActions.failure(error));
-  }
-};
-
-export const handleSelectedSpecies: ActionCreator<ThunkAction<
-  void,
-  any,
-  null,
-  Action<string>
->> = (item: SearchMatch | PopularSpecies) => (dispatch) => {
-  dispatch(setSelectedSpecies(item));
-
-  // TODO: fetch strains when they are ready
-  // dispatch(fetchStrains(genome_id));
-};
+
+    const newCommittedSpecies = [
+      ...committedSpecies,
+      {
+        ...pickBy(genomeInfo, (value, key) => {
+          return key !== 'example_objects';
+        }),
+        isEnabled: true
+      }
+    ] as CommittedItem[];
+
+    dispatch(updateCommittedSpecies(newCommittedSpecies));
+    speciesSelectorStorageService.saveSelectedSpecies(newCommittedSpecies);
+  };
+
+export const ensureSpeciesIsEnabled =
+  (genomeId: string): ThunkAction<void, any, null, Action<string>> =>
+  (dispatch, getState: () => RootState) => {
+    const state = getState();
+
+    const currentSpecies = getCommittedSpeciesById(state, genomeId);
+    if (!currentSpecies || currentSpecies.isEnabled) {
+      return;
+    }
+
+    dispatch(toggleSpeciesUseAndSave(genomeId));
+  };
+
+export const fetchPopularSpecies =
+  (): ThunkAction<void, any, null, Action<string>> => async (dispatch) => {
+    try {
+      dispatch(fetchPopularSpeciesAsyncActions.request());
+
+      const url = '/api/genomesearch/popular_genomes';
+      const response = await apiService.fetch(url);
+
+      dispatch(
+        fetchPopularSpeciesAsyncActions.success({
+          popularSpecies: response.popular_species
+        })
+      );
+    } catch (error) {
+      dispatch(fetchPopularSpeciesAsyncActions.failure(error));
+    }
+  };
+
+export const handleSelectedSpecies =
+  (
+    item: SearchMatch | PopularSpecies
+  ): ThunkAction<void, any, null, Action<string>> =>
+  (dispatch) => {
+    dispatch(setSelectedSpecies(item));
+
+    // TODO: fetch strains when they are ready
+    // dispatch(fetchStrains(genome_id));
+  };
 
 export const updateCommittedSpecies = createAction(
   'species_selector/update_committed_species'
 )<CommittedItem[]>();
 
-export const commitSelectedSpeciesAndSave: ActionCreator<ThunkAction<
-  void,
-  any,
-  null,
-  Action<string>
->> = () => (dispatch, getState) => {
-  const committedSpecies = getCommittedSpecies(getState());
-  const selectedItem = getSelectedItem(getState());
-
-  if (!selectedItem) {
-    return;
-  }
-
-  const newCommittedSpecies = [
-    ...committedSpecies,
-    buildCommittedItem(selectedItem)
-  ];
-
-  const speciesName = getSpeciesAnalyticsName(selectedItem);
-
-  analyticsTracking.setSpeciesDimension(selectedItem.genome_id);
-
-  analyticsTracking.trackEvent({
-    category: categories.ADD_SPECIES,
-    label: speciesName,
-    action: 'select'
-  });
-
-  dispatch(updateCommittedSpecies(newCommittedSpecies));
-  dispatch(clearSelectedSearchResult());
-
-  speciesSelectorStorageService.saveSelectedSpecies(newCommittedSpecies);
-};
-
-export const toggleSpeciesUseAndSave = (
-  genomeId: string
-): ThunkAction<void, any, null, Action<string>> => (dispatch, getState) => {
-  const state = getState();
-  const committedSpecies = getCommittedSpecies(state);
-  const currentSpecies = getCommittedSpeciesById(state, genomeId);
-  if (!currentSpecies) {
-    return; // should never happen
-  }
-  const speciesNameForAnalytics = getSpeciesAnalyticsName(currentSpecies);
-  const updatedStatus = currentSpecies.isEnabled ? 'do_not_use' : 'use';
-
-  const updatedCommittedSpecies = committedSpecies.map((item) => {
-    return item.genome_id === genomeId
-      ? {
-          ...item,
-          isEnabled: !item.isEnabled
-        }
-      : item;
-  });
-
-  analyticsTracking.trackEvent({
-    category: categories.SELECTED_SPECIES,
-    label: speciesNameForAnalytics,
-    action: updatedStatus
-  });
-
-  dispatch(updateCommittedSpecies(updatedCommittedSpecies));
-  speciesSelectorStorageService.saveSelectedSpecies(updatedCommittedSpecies);
-};
-
-export const deleteSpeciesAndSave = (
-  genomeId: string
-): ThunkAction<void, any, null, Action<string>> => (dispatch, getState) => {
-  const committedSpecies = getCommittedSpecies(getState());
-  const deletedSpecies = find(
-    committedSpecies,
-    ({ genome_id }) => genome_id === genomeId
-  );
-
-  if (deletedSpecies) {
-    const deletedSpeciesName = getSpeciesAnalyticsName(deletedSpecies);
-
-    analyticsTracking.setSpeciesDimension(deletedSpecies.genome_id);
+export const commitSelectedSpeciesAndSave =
+  (): ThunkAction<void, any, null, Action<string>> => (dispatch, getState) => {
+    const committedSpecies = getCommittedSpecies(getState());
+    const selectedItem = getSelectedItem(getState());
+
+    if (!selectedItem) {
+      return;
+    }
+
+    const newCommittedSpecies = [
+      ...committedSpecies,
+      buildCommittedItem(selectedItem)
+    ];
+
+    const speciesName = getSpeciesAnalyticsName(selectedItem);
+
+    analyticsTracking.setSpeciesDimension(selectedItem.genome_id);
+
+    analyticsTracking.trackEvent({
+      category: categories.ADD_SPECIES,
+      label: speciesName,
+      action: 'select'
+    });
+
+    dispatch(updateCommittedSpecies(newCommittedSpecies));
+    dispatch(clearSelectedSearchResult());
+
+    speciesSelectorStorageService.saveSelectedSpecies(newCommittedSpecies);
+  };
+
+export const toggleSpeciesUseAndSave =
+  (genomeId: string): ThunkAction<void, any, null, Action<string>> =>
+  (dispatch, getState) => {
+    const state = getState();
+    const committedSpecies = getCommittedSpecies(state);
+    const currentSpecies = getCommittedSpeciesById(state, genomeId);
+    if (!currentSpecies) {
+      return; // should never happen
+    }
+    const speciesNameForAnalytics = getSpeciesAnalyticsName(currentSpecies);
+    const updatedStatus = currentSpecies.isEnabled ? 'do_not_use' : 'use';
+
+    const updatedCommittedSpecies = committedSpecies.map((item) => {
+      return item.genome_id === genomeId
+        ? {
+            ...item,
+            isEnabled: !item.isEnabled
+          }
+        : item;
+    });
 
     analyticsTracking.trackEvent({
       category: categories.SELECTED_SPECIES,
-      label: deletedSpeciesName,
-      action: 'unselect'
+      label: speciesNameForAnalytics,
+      action: updatedStatus
     });
-  }
-  const updatedCommittedSpecies = committedSpecies.filter(
-    ({ genome_id }) => genome_id !== genomeId
-  );
-
-  dispatch(updateCommittedSpecies(updatedCommittedSpecies));
-  dispatch(deleteSpeciesInGenomeBrowser(genomeId));
-  dispatch(deleteSpeciesInEntityViewer(genomeId));
-  speciesSelectorStorageService.saveSelectedSpecies(updatedCommittedSpecies);
-};
+
+    dispatch(updateCommittedSpecies(updatedCommittedSpecies));
+    speciesSelectorStorageService.saveSelectedSpecies(updatedCommittedSpecies);
+  };
+
+export const deleteSpeciesAndSave =
+  (genomeId: string): ThunkAction<void, any, null, Action<string>> =>
+  (dispatch, getState) => {
+    const committedSpecies = getCommittedSpecies(getState());
+    const deletedSpecies = find(
+      committedSpecies,
+      ({ genome_id }) => genome_id === genomeId
+    );
+
+    if (deletedSpecies) {
+      const deletedSpeciesName = getSpeciesAnalyticsName(deletedSpecies);
+
+      analyticsTracking.setSpeciesDimension(deletedSpecies.genome_id);
+
+      analyticsTracking.trackEvent({
+        category: categories.SELECTED_SPECIES,
+        label: deletedSpeciesName,
+        action: 'unselect'
+      });
+    }
+    const updatedCommittedSpecies = committedSpecies.filter(
+      ({ genome_id }) => genome_id !== genomeId
+    );