AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 version bumps

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

frontend/package.json

@@ -3,7 +3,7 @@
   "engines": {
     "node": "16.16.0"
   },
-  "packageManager": "yarn@3.2.2",
+  "packageManager": "yarn@4.0.1",
   "private": true,
   "repository": "https://github.com/Opetushallitus/kieli-ja-kaantajatutkinnot",
   "resolutions": {
@@ -27,15 +27,15 @@
   "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",
-    "@mui/x-date-pickers": "^5.0.20",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@types/js-cookie": "^3.0.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": "^6.18.0",
+    "@reduxjs/toolkit": "^1.9.7",
+    "@types/js-cookie": "^3.0.5",
     "axios": "^1.6.0",
-    "dayjs": "^1.11.9",
+    "dayjs": "^1.11.10",
     "finnish-personal-identity-code-validator": "kimmotaskinen/finnish-personal-identity-code-validator#support-new-delimiters",
     "history": "^5.3.0",
     "i18next": "^23.6.0",
@@ -44,68 +44,68 @@
     "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.18.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",
+    "@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.1",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@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": "^13.4.0",
-    "eslint": "^8.46.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": "^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.3",
+    "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",
+    "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.88.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },

frontend/packages/shared/src/components/CustomDatePicker/CustomDatePicker.tsx

@@ -7,12 +7,10 @@ import { CustomTextField, CustomTextFieldProps } from '../../components';
 interface DatePickerProps {
   value: Dayjs | null;
   setValue: (value: Dayjs | null) => void;
-  placeholder?: string;
   label?: string;
   disabled?: boolean;
   minDate?: Dayjs;
   maxDate?: Dayjs;
-  showToolbar?: boolean;
 }
 
 type CustomDatePickerProps = DatePickerProps & CustomTextFieldProps;
@@ -24,11 +22,9 @@ export const CustomDatePicker = ({
   disabled = false,
   minDate,
   maxDate,
-  showToolbar = true,
   error,
   helperText,
   showHelperText,
-  placeholder,
 }: CustomDatePickerProps): JSX.Element => {
   const MIN_DATE = '1980-01-01';
   const MAX_DATE = '2050-01-01';
@@ -44,23 +40,23 @@ export const CustomDatePicker = ({
     >
       <DesktopDatePicker
         className="custom-date-picker"
-        showToolbar={showToolbar}
         label={label}
         value={value}
         onChange={handleChange}
         disabled={disabled}
         minDate={minDate ?? dayjs(MIN_DATE)}
         maxDate={maxDate ?? dayjs(MAX_DATE)}
-        toolbarPlaceholder={placeholder}
-        renderInput={(params) => {
-          const textFieldParams = {
-            ...params,
-            error,
-            helperText,
-            showHelperText,
-          };
+        slots={{
+          textField: (params) => {
+            const textFieldParams = {
+              ...params,
+              error,
+              helperText,
+              showHelperText,
+            };
 
-          return <CustomTextField {...textFieldParams} />;
+            return <CustomTextField {...textFieldParams} />;
+          }
         }}
       />
     </LocalizationProvider>

frontend/packages/shared/src/components/ScrollToTop/ScrollToTop.tsx

@@ -3,6 +3,7 @@ import { useContext, useLayoutEffect } from 'react';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
 
 export const ScrollToTop = () => {
+  /*
   const navigator = useContext(UNSAFE_NavigationContext).navigator as History;
   useLayoutEffect(() => {
     const unlisten = navigator.listen(({ action }) => {
@@ -13,6 +14,6 @@ export const ScrollToTop = () => {
 
     return unlisten;
   }, [navigator]);
-
+  */
   return null;
 };

frontend/packages/shared/src/configs/materialUI.ts

@@ -82,7 +82,7 @@ export const theme = createTheme({
         },
       },
     },
-    MuiCalendarPicker: {
+    MuiDateCalendar: {
       styleOverrides: {
         root: {
           '& .MuiTypography-caption': {

frontend/packages/vkt/src/components/clerkEnrollment/listing/ChangeEnrollmentStatusButton.tsx

@@ -19,7 +19,7 @@ export const ChangeEnrollmentStatusButton = ({
       'vkt.component.clerkEnrollmentListing.row.changeEnrollmentStatus',
   });
   const { clerkEnrollmentChangeStatus, examEvent } = useAppSelector(
-    clerkExamEventOverviewSelector
+    clerkExamEventOverviewSelector,
   );
   const dispatch = useAppDispatch();
 
@@ -37,7 +37,7 @@ export const ChangeEnrollmentStatusButton = ({
 
   const changeStatus = (
     e: React.MouseEvent<HTMLButtonElement>,
-    newStatus: EnrollmentStatus
+    newStatus: EnrollmentStatus,
   ) => {
     e.stopPropagation();
 

frontend/packages/vkt/src/components/clerkEnrollment/listing/ClerkEnrollmentListingRow.tsx

@@ -64,8 +64,8 @@ export const ClerkEnrollmentListingRow = ({
     navigate(
       AppRoutes.ClerkEnrollmentOverviewPage.replace(
         /:examEventId/,
-        `${examEventId}`
-      )
+        `${examEventId}`,
+      ),
     );
   };
 

frontend/packages/vkt/src/components/clerkEnrollment/overview/ClerkEnrollmentDetails.tsx

@@ -30,10 +30,10 @@ export const ClerkEnrollmentDetails = () => {
   // Redux
   const dispatch = useAppDispatch();
   const { status, enrollment, paymentRefundStatus } = useAppSelector(
-    clerkEnrollmentDetailsSelector
+    clerkEnrollmentDetailsSelector,
   );
   const { examEvent, clerkEnrollmentChangeStatus } = useAppSelector(
-    clerkExamEventOverviewSelector
+    clerkExamEventOverviewSelector,
   );
 
   const { showToast } = useToast();
@@ -118,7 +118,7 @@ export const ClerkEnrollmentDetails = () => {
     field:
       | keyof PartialExamsAndSkills
       | keyof Pick<ClerkEnrollment, 'digitalCertificateConsent'>,
-    fieldValue: boolean
+    fieldValue: boolean,
   ) => {
     handleFieldChange(field, fieldValue);
   };
@@ -128,7 +128,7 @@ export const ClerkEnrollmentDetails = () => {
       | ClerkEnrollmentTextFieldEnum
       | keyof PartialExamsAndSkills
       | keyof Pick<ClerkEnrollment, 'digitalCertificateConsent'>,
-    fieldValue: string | boolean
+    fieldValue: string | boolean,
   ) => {
     setHasLocalChanges(true);
     setEnrollmentDetails((prevState) => {
@@ -164,7 +164,7 @@ export const ClerkEnrollmentDetails = () => {
       updateClerkEnrollmentDetails({
         enrollment: enrollmentDetails,
         examEvent,
-      })
+      }),
     );
   };