Merge pull request #2982 from ingef/upgrade-dependencies

Upgrade frontend dependencies
ingef · Mar 14, 2023 · 5873b7f · 5873b7f
2 parents 75da189 + f09d1ba
commit 5873b7f
Show file tree

Hide file tree

Showing 13 changed files with 637 additions and 827 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -38,44 +38,44 @@
     "@types/react-highlight-words": "^0.16.4",
     "@types/react-window": "^1.8.5",
     "@vitejs/plugin-react": "^3.1.0",
-    "axios": "^0.25.0",
-    "chance": "^1.1.8",
+    "axios": "^1.3.4",
+    "chance": "^1.1.11",
     "compression": "^1.7.4",
     "date-fns": "^2.28.0",
-    "downshift": "^6.1.7",
+    "downshift": "^7.4.1",
     "express-rate-limit": "^6.7.0",
     "file-saver": "^2.0.5",
-    "helmet": "^5.0.2",
-    "i18next": "^21.6.11",
-    "i18next-browser-languagedetector": "^6.1.3",
+    "helmet": "^6.0.1",
+    "i18next": "^22.4.11",
+    "i18next-browser-languagedetector": "^7.0.1",
     "keycloak-js": "^19.0.1",
     "lodash.difference": "^4.5.0",
     "mustache": "^4.2.0",
-    "nodemon": "^2.0.20",
+    "nodemon": "^2.0.21",
     "react": "^18.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dnd-multi-backend": "^7.0.0-alpha.4",
+    "react-dnd-multi-backend": "^8.0.0",
     "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^18.1.0",
     "react-error-boundary": "^3.1.4",
-    "react-highlight-words": "^0.17.0",
-    "react-hook-form": "^7.26.1",
-    "react-hotkeys-hook": "^3.4.6",
-    "react-i18next": "^11.16.1",
+    "react-highlight-words": "^0.20.0",
+    "react-hook-form": "^7.43.5",
+    "react-hotkeys-hook": "^4.3.8",
+    "react-i18next": "^12.2.0",
     "react-list": "^0.8.16",
     "react-markdown": "^8.0.0",
-    "react-number-format": "^4.9.1",
-    "react-redux": "^7.2.6",
-    "react-router-dom": "^6.2.1",
+    "react-number-format": "^5.1.4",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.9.0",
     "react-split-pane": "^0.1.92",
     "react-window": "^1.8.6",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "remark-gfm": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "typesafe-actions": "^5.1.0",
-    "vite": "^4.1.3",
+    "vite": "^4.1.4",
     "vite-jest": "^0.1.4"
   },
   "devDependencies": {
@@ -87,36 +87,35 @@
     "@storybook/react": "7.0.0-rc.1",
     "@storybook/react-vite": "7.0.0-rc.1",
     "@storybook/testing-library": "^0.0.14-next.1",
-    "@swc/core": "^1.3.36",
+    "@swc/core": "^1.3.40",
     "@swc/jest": "^0.2.24",
-    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/axios": "^0.14.0",
     "@types/chance": "^1.1.3",
     "@types/compression": "^1.7.2",
     "@types/cors": "^2.8.13",
     "@types/express": "^4.17.17",
     "@types/i18next": "^13.0.0",
-    "@types/jest": "^27.4.0",
+    "@types/jest": "^29.4.1",
     "@types/mustache": "^4.1.2",
-    "@types/node": "^17.0.16",
+    "@types/node": "^18.15.3",
     "@types/papaparse": "^5.3.2",
     "@types/react-dom": "^18.0.3",
     "@types/react-list": "^0.8.7",
-    "@types/react-redux": "^7.1.22",
     "@types/react-router-dom": "^5.3.3",
     "@types/redux": "^3.6.0",
-    "body-parser": "^1.19.1",
+    "body-parser": "^1.20.2",
     "cors": "^2.8.5",
-    "eslint": "^8.34.0",
+    "eslint": "^8.36.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.12.1",
     "express": "^4.17.2",
-    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
-    "papaparse": "^5.3.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "papaparse": "^5.4.0",
     "prettier": "^2.8.4",
     "storybook": "7.0.0-rc.1",
-    "terser": "^5.16.4",
+    "terser": "^5.16.6",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.5.0",
     "typescript": "^4.5.5",

diff --git a/frontend/src/i18next.d.ts b/frontend/src/i18next.d.ts
@@ -0,0 +1,8 @@
+// i18next.d.ts
+import "i18next";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}
diff --git a/frontend/src/js/entity-history/History.tsx b/frontend/src/js/entity-history/History.tsx
@@ -117,7 +117,7 @@ export const History = () => {
 
   const [showAdvancedControls, setShowAdvancedControls] = useState(false);
 
-  useHotkeys("shift+option+h", () => {
+  useHotkeys("shift+alt+h", () => {
     setShowAdvancedControls((v) => !v);
   });
 

diff --git a/frontend/src/js/entity-history/timeline/EventCard.tsx b/frontend/src/js/entity-history/timeline/EventCard.tsx
@@ -5,7 +5,7 @@ import {
   faInfo,
 } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 
 import type {
   ColumnDescription,
@@ -154,7 +154,7 @@ const EventCard = ({
                 <div key={column.label}>
                   <TinyLabel>{column.defaultLabel}</TinyLabel>
                   <code>
-                    <NumberFormat
+                    <NumericFormat
                       thousandSeparator={currencyConfig.thousandSeparator}
                       decimalSeparator={currencyConfig.decimalSeparator}
                       decimalScale={currencyConfig.decimalScale}

diff --git a/frontend/src/js/entity-history/timeline/GroupedContent.tsx b/frontend/src/js/entity-history/timeline/GroupedContent.tsx
@@ -2,7 +2,7 @@ import { css, Theme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 
 import {
   ColumnDescription,
@@ -137,7 +137,7 @@ const CellWrap = styled("span")`
 const SxConceptName = styled(ConceptName)`
   ${({ theme }) => cellStyles(theme)};
 `;
-const SxNumberFormat = styled(NumberFormat)`
+const SxNumericFormat = styled(NumericFormat)`
   ${({ theme }) => cellStyles(theme)};
 `;
 const Cell = memo(
@@ -177,7 +177,7 @@ const Cell = memo(
 
     if (isMoneyColumn(columnDescription)) {
       return (
-        <SxNumberFormat
+        <SxNumericFormat
           {...currencyConfig}
           displayType="text"
           value={parseInt(cell) / 100}

diff --git a/frontend/src/js/environment/index.ts b/frontend/src/js/environment/index.ts
@@ -1,6 +1,6 @@
-import { TFunction } from "react-i18next";
-
 // See index.html for an inject marker, that we use to inject env vars
+import { TFunction } from "i18next";
+
 // at container runtime
 function runtimeVar(variable: string): string | null {
   return window.env && window.env[variable] !== "null"

diff --git a/frontend/src/js/external-forms/validators.ts b/frontend/src/js/external-forms/validators.ts
@@ -1,4 +1,4 @@
-import { TFunction } from "react-i18next";
+import { TFunction } from "i18next";
 
 import { isEmpty } from "../common/helpers/commonHelper";
 

diff --git a/frontend/src/js/localization/i18next.ts b/frontend/src/js/localization/i18next.ts
@@ -13,6 +13,7 @@ i18next
       de: { translation: {} },
       en: { translation: {} },
     },
+    returnNull: false,
   });
 
 export default i18next;
diff --git a/frontend/src/js/query-runner/actions.ts b/frontend/src/js/query-runner/actions.ts
@@ -1,4 +1,5 @@
-import { TFunction, useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { ActionType, createAction, createAsyncAction } from "typesafe-actions";
 

diff --git a/frontend/src/js/ui-components/CurrencyInput.tsx b/frontend/src/js/ui-components/CurrencyInput.tsx
@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
 import { FC, useState, useEffect } from "react";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 
 import type { CurrencyConfigT } from "../api/types";
 import { isEmpty } from "../common/helpers/commonHelper";
 import { exists } from "../common/helpers/exists";
 
-const SxNumberFormat = styled(NumberFormat)<{ large?: boolean }>`
+const SxNumberFormat = styled(NumericFormat)<{ large?: boolean }>`
   outline: 0;
   min-width: 170px;
 

diff --git a/frontend/src/js/ui-components/InputMultiSelect/InputMultiSelect.tsx b/frontend/src/js/ui-components/InputMultiSelect/InputMultiSelect.tsx
@@ -150,7 +150,6 @@ const InputMultiSelect = ({
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     getItemProps,
     highlightedIndex,
     setHighlightedIndex,
@@ -241,7 +240,6 @@ const InputMultiSelect = ({
   const { ref: inputPropsRef, ...inputProps } = getInputProps(
     getDropdownProps({ autoFocus }),
   );
-  const { ref: comboboxRef, ...comboboxProps } = getComboboxProps();
   const labelProps = getLabelProps({});
 
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -288,13 +286,7 @@ const InputMultiSelect = ({
         }
       }}
     >
-      <Control
-        {...comboboxProps}
-        disabled={disabled}
-        ref={(instance) => {
-          comboboxRef(instance);
-        }}
-      >
+      <Control disabled={disabled}>
         <ItemsInputContainer>
           {selectedItems.map((option, index) => {
             return (
@@ -312,11 +304,6 @@ const InputMultiSelect = ({
           <Input
             type="text"
             value={inputValue}
-            onFocus={() => {
-              if (inputRef.current) {
-                inputRef.current.select();
-              }
-            }}
             {...inputProps}
             ref={(instance) => {
               inputRef.current = instance;
@@ -334,15 +321,10 @@ const InputMultiSelect = ({
                 : t("inputSelect.placeholder")
             }
             onClick={(e) => {
-              if (inputProps.onClick) {
-                inputProps.onClick(e);
-              }
-              toggleMenu();
+              inputProps.onClick?.(e);
             }}
             onChange={(e) => {
-              if (inputProps.onChange) {
-                inputProps.onChange(e);
-              }
+              inputProps.onChange?.(e);
               setInputValue(e.target.value);
             }}
           />

diff --git a/frontend/src/js/ui-components/InputSelect/InputSelect.tsx b/frontend/src/js/ui-components/InputSelect/InputSelect.tsx
@@ -92,7 +92,6 @@ const InputSelect = ({
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     getItemProps,
     highlightedIndex,
     setHighlightedIndex,
@@ -164,7 +163,6 @@ const InputSelect = ({
 
   const { ref: menuPropsRef, ...menuProps } = getMenuProps();
   const { ref: inputPropsRef, ...inputProps } = getInputProps();
-  const { ref: comboboxRef, ...comboboxProps } = getComboboxProps();
   const labelProps = getLabelProps();
 
   const handleBlur = useCallback(() => {
@@ -244,13 +242,7 @@ const InputSelect = ({
       className={exists(label) ? undefined : className}
       data-test-id={dataTestId}
     >
-      <Control
-        {...comboboxProps}
-        disabled={disabled}
-        ref={(instance) => {
-          comboboxRef(instance);
-        }}
-      >
+      <Control disabled={disabled}>
         <ItemsInputContainer>
           <Input
             {...inputProps}
@@ -270,15 +262,11 @@ const InputSelect = ({
               e.target.select();
             }}
             onClick={(e) => {
-              if (inputProps.onClick) {
-                inputProps.onClick(e);
-              }
+              inputProps.onClick?.(e);
               toggleMenu();
             }}
             onChange={(e) => {
-              if (inputProps.onChange) {
-                inputProps.onChange(e);
-              }
+              inputProps.onChange?.(e);
               setInputValue(e.target.value);
             }}
           />