AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 frontin versiopäivityk…

…siä (#600) * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 version bumps * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 fix external repo protocol * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 version bumps * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 version bump fixes * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 bump node version * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 version bump fixes * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 jest migration test fixes * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 jest migration test fixes * AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 jest migration test fixes * AKR:OTR:VKT:YKI:SHARED(Frontend) bump node versions * AKR:OTR:VKT:YKI:SHARED(Frontend) router fixes * AKR:OTR:VKT:YKI:SHARED(Frontend) skip some cypress tests for now * AKR:OTR:VKT:YKI:SHARED(Frontend) linter fixes * AKR:OTR:VKT:YKI:SHARED(Frontend) jest snapshot updates and skip one test for now * AKR:OTR:VKT:YKI:SHARED(Frontend) for some reason local jest test renders invalid dates * AKR:OTR:VKT:YKI:SHARED(Frontend) fix error toast. Also revert date picker back to 5.x * SHARED(Frontend) update shared jest snapshot * VKT:YKI(Frontend) Review fixes * VKT(Frontend) Review fixes * SHARED(Frontend) Review fixes, attempt to fix ScrollToTop * YKI(Frontend): Fix test setup: need to use createBrowserRouter(..) with DefaultProviders * OTR(Frontend): Fix and enable failing test. The old selector didn't for some reason want to find the correct element to type into. We "fix" this by instead using a role query, which is more in line with the testing library matching philosophy. * AKR:OTR:VKT:YKI:SHARED(Frontend) useBlocker fixes * SHARED(Frontend) removed unused import --------- Co-authored-by: Pyry Koivisto <[email protected]>
Opetushallitus · Jan 19, 2024 · 5fe6942 · 5fe6942
1 parent 30a12e0
commit 5fe6942
Show file tree

Hide file tree

Showing 365 changed files with 7,901 additions and 8,278 deletions.
diff --git a/.github/workflows/common-frontend.yml b/.github/workflows/common-frontend.yml
@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.16.0]
+        node-version: [20.9.0]
     steps:
       - uses: actions/checkout@v3
       - uses: szenius/[email protected]

diff --git a/.github/workflows/shared_frontend.yml b/.github/workflows/shared_frontend.yml
@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.16.0]
+        node-version: [20.9.0]
     steps:
       - uses: actions/checkout@v3
       - uses: szenius/[email protected]

diff --git a/frontend/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs b/frontend/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
diff --git a/frontend/.yarn/releases/yarn-3.2.2.cjs b/frontend/.yarn/releases/yarn-3.2.2.cjs
diff --git a/frontend/.yarn/releases/yarn-4.0.1.cjs b/frontend/.yarn/releases/yarn-4.0.1.cjs
diff --git a/frontend/.yarnrc.yml b/frontend/.yarnrc.yml
@@ -1,3 +1,5 @@
+compressionLevel: mixed
+
 enableGlobalCache: true
 
 enableTelemetry: false
@@ -12,8 +14,4 @@ npmScopes:
     npmAuthToken: "${GITHUB_REGISTRY_TOKEN}"
     npmRegistryServer: "https://npm.pkg.github.com"
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.2.2.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.root",
   "engines": {
-    "node": "16.16.0"
+    "node": "v20.9.0"
   },
-  "packageManager": "yarn@3.2.2",
+  "packageManager": "yarn@4.0.1",
   "private": true,
   "repository": "https://github.com/Opetushallitus/kieli-ja-kaantajatutkinnot",
   "resolutions": {
@@ -27,99 +27,90 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.7",
-    "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.3",
-    "@mui/system": "^5.14.3",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@mui/system": "^5.14.17",
     "@mui/x-date-pickers": "^5.0.20",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@types/js-cookie": "^3.0.3",
-    "axios": "^0.27.2",
-    "dayjs": "^1.11.9",
+    "@reduxjs/toolkit": "^1.9.7",
+    "@types/js-cookie": "^3.0.5",
+    "axios": "^1.6.0",
+    "dayjs": "^1.11.10",
     "finnish-personal-identity-code-validator": "kimmotaskinen/finnish-personal-identity-code-validator#support-new-delimiters",
     "history": "^5.3.0",
-    "i18next": "^21.10.0",
-    "i18next-browser-languagedetector": "^6.1.8",
+    "i18next": "^23.6.0",
+    "i18next-browser-languagedetector": "^7.1.0",
     "js-cookie": "^3.0.5",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^11.18.6",
-    "react-redux": "^8.1.2",
-    "react-router-dom": "6.3.0",
+    "react-i18next": "^13.3.1",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "6.13.0",
     "redux-saga": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.22.6",
-    "@cypress/webpack-preprocessor": "^5.17.1",
-    "@testing-library/cypress": "^8.0.7",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@babel/runtime": "^7.23.2",
+    "@cypress/webpack-preprocessor": "^6.0.0",
+    "@testing-library/cypress": "^10.0.1",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-redux": "^7.1.25",
-    "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "babel-jest": "^29.6.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.7",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.36",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-redux": "^7.1.29",
+    "@types/react-test-renderer": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
-    "cypress": "^10.11.0",
-    "eslint": "^8.46.0",
+    "cypress": "^13.4.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-webpack": "^0.13.3",
+    "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
     "git-revision-webpack-plugin": "^5.0.0",
     "html-webpack-plugin": "^5.5.3",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "msw": "^1.2.3",
-    "postcss": "^8.4.27",
-    "prettier": "^2.8.8",
+    "msw": "^2.0.4",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
     "react-test-renderer": "^18.2.0",
-    "sass": "^1.64.2",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
-    "stylelint": "^14.16.1",
+    "stylelint": "^15.11.0",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-sass-guidelines": "^9.0.1",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-webpack-plugin": "^3.3.0",
-    "ts-unused-exports": "^9.0.5",
-    "typescript": "^4.9.5",
-    "webpack": "^5.88.2",
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-prettier": "^4.0.2",
+    "stylelint-webpack-plugin": "^4.1.1",
+    "ts-unused-exports": "^10.0.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
-  "@availableBiggerUpdates": [
-    "loader-utils",
-    "@mui/x-date-pickers",
-    "axios",
-    "i18next",
-    "i18next-browser-languagedetector",
-    "react-router-dom",
-    "cypress + @testing-library/cypress",
-    "jest",
-    "prettier + eslint-plugin-prettier",
-    "stylelint + configs",
-    "typescript"
-  ]
+  "@comments": {
+    "react-router-dom": "Do not update past 6.13.0 until useBlocker is fixed, see https://github.com/remix-run/react-router/issues/11155"
+  }
 }
diff --git a/frontend/packages/akr/jest-environment-patched-jsdom.js b/frontend/packages/akr/jest-environment-patched-jsdom.js
@@ -0,0 +1,13 @@
+// test.environment.js
+
+const JSDOMEnvironment = require("jest-environment-jsdom").default;
+
+module.exports = class CustomTestEnvironment extends JSDOMEnvironment {
+    async setup() {
+        await super.setup();
+        this.global.TextEncoder = TextEncoder;
+        this.global.TextDecoder = TextDecoder;
+        this.global.Response = Response;
+        this.global.Request = Request;
+    }
+};
diff --git a/frontend/packages/akr/jest.config.json b/frontend/packages/akr/jest.config.json
@@ -14,10 +14,13 @@
   "setupFilesAfterEnv": [
     "./jest-setup.ts"
   ],
-  "testEnvironment": "jsdom",
+  "testEnvironment": "./jest-environment-patched-jsdom.js",
   "testPathIgnorePatterns": [
     "./src/tests/cypress"
   ],
+  "testEnvironmentOptions": {
+    "customExportConditions": [""]
+  },
   "transform": {
     "^.+\\.(ts|tsx)$": "babel-jest"
   },

diff --git a/frontend/packages/akr/package.json b/frontend/packages/akr/package.json
@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].2"
+    "shared": "npm:@opetushallitus/[email protected].3"
   }
 }
diff --git a/frontend/packages/akr/src/App.tsx b/frontend/packages/akr/src/App.tsx
@@ -1,6 +1,6 @@
 import { ThemeProvider } from '@mui/material/styles';
 import { Provider } from 'react-redux';
-import { NotifierContextProvider, StyleCacheProvider } from 'shared/components';
+import { StyleCacheProvider } from 'shared/components';
 import { theme } from 'shared/configs';
 
 import { initI18n } from 'configs/i18n';
@@ -16,9 +16,7 @@ export const App = () => (
   <Provider store={store}>
     <StyleCacheProvider appName="akr">
       <ThemeProvider theme={theme}>
-        <NotifierContextProvider>
-          <AppRouter />
-        </NotifierContextProvider>
+        <AppRouter />
       </ThemeProvider>
     </StyleCacheProvider>
   </Provider>

diff --git a/frontend/packages/akr/src/components/clerkTranslator/authorisation/AuthorisationFields.tsx b/frontend/packages/akr/src/components/clerkTranslator/authorisation/AuthorisationFields.tsx
@@ -30,7 +30,7 @@ import { AuthorisationUtils } from 'utils/authorisation';
 interface AuthorisationFieldsProps {
   authorisation: Authorisation;
   setAuthorisation: (
-    a: ((prevState: Authorisation) => Authorisation) | Authorisation
+    a: ((prevState: Authorisation) => Authorisation) | Authorisation,
   ) => void;
   meetingDates: Array<MeetingDate>;
   examinationDates: Array<ExaminationDate>;
@@ -121,7 +121,7 @@ export const AuthorisationFields = ({
 
   const getNewTermEndDate = (
     basis: AuthorisationBasis,
-    termBeginDate: Dayjs | undefined
+    termBeginDate: Dayjs | undefined,
   ) => {
     const PERIOD_OF_VALIDITY = 5;
 
@@ -147,7 +147,7 @@ export const AuthorisationFields = ({
   };
 
   const handleDiaryNumberChange = (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     setAuthorisation({
       ...authorisation,
@@ -172,7 +172,7 @@ export const AuthorisationFields = ({
       (!examinationDate || !dayjs(examinationDate).isValid());
 
     const isRequiredPropsEmpty = [fromLang, toLang, basis, termBeginDate].some(
-      (p) => !p
+      (p) => !p,
     );
 
     return (
@@ -208,7 +208,7 @@ export const AuthorisationFields = ({
               onLanguageChange={handleLanguageSelectChange('from')}
               languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
                 AuthorisationUtils.getKoodistoLangKeys(),
-                authorisation.languagePair.to
+                authorisation.languagePair.to,
               )}
               primaryLanguages={AuthorisationUtils.primaryLangs}
               excludedLanguage={authorisation.languagePair.to}
@@ -227,7 +227,7 @@ export const AuthorisationFields = ({
               onLanguageChange={handleLanguageSelectChange('to')}
               languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
                 AuthorisationUtils.getKoodistoLangKeys(),
-                authorisation.languagePair.from
+                authorisation.languagePair.from,
               )}
               primaryLanguages={AuthorisationUtils.primaryLangs}
               excludedLanguage={authorisation.languagePair.from}

diff --git a/frontend/packages/akr/src/components/clerkTranslator/examinationDates/AddExaminationDate.tsx b/frontend/packages/akr/src/components/clerkTranslator/examinationDates/AddExaminationDate.tsx
@@ -45,7 +45,7 @@ export const AddExaminationDate = () => {
       const date = dayjs(value);
 
       return dates.some((examinationDate) =>
-        DateUtils.isDatePartEqual(examinationDate.date, date)
+        DateUtils.isDatePartEqual(examinationDate.date, date),
       );
     }
 

diff --git a/...ges/akr/src/components/clerkTranslator/examinationDates/ExaminationDatesToggleFilters.tsx b/...ges/akr/src/components/clerkTranslator/examinationDates/ExaminationDatesToggleFilters.tsx
@@ -27,7 +27,7 @@ export const ExaminationDatesToggleFilters = () => {
     dispatch(
       setExaminationDateFilters({
         examinationDateStatus: status,
-      })
+      }),
     );
     dispatch(setPage(0));
   };

diff --git a/...ackages/akr/src/components/clerkTranslator/filters/ClerkTranslatorAutocompleteFilters.tsx b/...ackages/akr/src/components/clerkTranslator/filters/ClerkTranslatorAutocompleteFilters.tsx
@@ -47,14 +47,14 @@ export const ClerkTranslatorAutocompleteFilters = () => {
   }, [filters.name]);
 
   const handleNameChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
   ) => {
     setName(event.target.value);
     debounce(() => {
       dispatch(
         addClerkTranslatorFilter({
           name: event.target.value,
-        })
+        }),
       );
       dispatch(setPage(0));
     });
@@ -102,7 +102,7 @@ export const ClerkTranslatorAutocompleteFilters = () => {
             onLanguageChange={handleFromLanguageChange}
             languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
               langs.from,
-              filters.toLang
+              filters.toLang,
             )}
             primaryLanguages={AuthorisationUtils.primaryLangs}
             excludedLanguage={filters.toLang}
@@ -117,7 +117,7 @@ export const ClerkTranslatorAutocompleteFilters = () => {
             onLanguageChange={handleToLanguageChange}
             languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
               langs.to,
-              filters.fromLang
+              filters.fromLang,
             )}
             primaryLanguages={AuthorisationUtils.primaryLangs}
             excludedLanguage={filters.fromLang}

diff --git a/...tend/packages/akr/src/components/clerkTranslator/filters/ClerkTranslatorToggleFilters.tsx b/...tend/packages/akr/src/components/clerkTranslator/filters/ClerkTranslatorToggleFilters.tsx
@@ -27,16 +27,16 @@ export const ClerkTranslatorToggleFilters = () => {
   };
 
   const effectiveCount = translators.filter(
-    (t) => t.authorisations.effective.length > 0
+    (t) => t.authorisations.effective.length > 0,
   ).length;
   const expiringCount = translators.filter(
-    (t) => t.authorisations.expiring.length > 0
+    (t) => t.authorisations.expiring.length > 0,
   ).length;
   const expiredDeduplicatedCount = translators.filter(
-    (t) => t.authorisations.expiredDeduplicated.length > 0
+    (t) => t.authorisations.expiredDeduplicated.length > 0,
   ).length;
   const formerVirCount = translators.filter(
-    (t) => t.authorisations.formerVir.length > 0
+    (t) => t.authorisations.formerVir.length > 0,
   ).length;
 
   const filterData = [