Merge pull request #1029 from Klantinteractie-Servicesysteem/patch-vu…

…lnerabilities-from-0.5.x

PC-765 update vulnerable/obsolete dependencies from 0.5.x

.github/workflows/docker-image.yaml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - main
+      - '*.*.*'
 
   push:
     branches:

.github/workflows/linter.yml

@@ -11,7 +11,7 @@ name: Code quality checks
 #############################
 on:
   pull_request:
-    branches: [main]
+    branches: [main, '*.*.*']
 
 ###############
 # Set the Job #

Kiss.Bff.EndToEndTest/Kiss.Bff.EndToEndTest.csproj

@@ -12,7 +12,7 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="8.0.0" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="8.0.1" />
     <PackageReference Include="Microsoft.Extensions.Configuration.UserSecrets" Version="8.0.0" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.10.0" />
     <PackageReference Include="MSTest.TestAdapter" Version="3.5.0" />

package.json

@@ -1,6 +1,7 @@
 {
   "name": "kiss-frontend",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "npm run typecheck && vite build",
@@ -15,27 +16,27 @@
     "lint:style": "stylelint \"**/*.{css,scss,vue}\" --ignore-path .gitignore"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-vue": "^6.0.0",
+    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@vueuse/core": "^8.9.4",
-    "ckeditor5": "^42.0.0",
-    "dompurify": "^2.5.2",
-    "nanoid": "^4.0.2",
-    "pinia": "^2.1.4",
+    "ckeditor5": "^44.1.0",
+    "dompurify": "^3.2.3",
+    "nanoid": "^5.0.9",
+    "pinia": "^2.3.1",
     "swrv": "^1.0.3",
-    "vue": "^3.4.27",
-    "vue-router": "^4.4.0"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^18.2.0",
-    "@types/dompurify": "^2.3.3",
+    "@types/dompurify": "^3.0.5",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.17.0",
     "@utrecht/component-library-css": "1.0.0-alpha.361",
     "@utrecht/component-library-vue": "1.0.0-alpha.138",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-v8": "^2.0.0",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^3.0.3",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.4.0",
@@ -44,18 +45,15 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.16.1",
     "jsdom": "^22.1.0",
-    "msw": "^1.2.2",
+    "msw": "^2.7.0",
     "prettier": "^3.0.0",
     "sass": "^1.51.0",
     "stylelint": "^15.10.1",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-config-standard-vue": "^1.0.0",
-    "typescript": "~5.1.6",
-    "vite": "^4.5.5",
-    "vitest": "^2.0.0",
-    "vue-tsc": "^1.8.6"
-  },
-  "overrides": {
-    "semver": "^7.5.4"
+    "typescript": "~5.6.3",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.3",
+    "vue-tsc": "^2.1.10"
   }
 }

src/App.vue

@@ -39,9 +39,9 @@ const route = useRoute();
 
 <style lang="scss">
 /* Design Tokens */
-@import "@utrecht/component-library-css";
-@import "@/assets/design-tokens";
-@import "@/assets/fonts/fonts.css";
-@import "@/assets/reset.css";
-@import "@/assets/main";
+@use "@utrecht/component-library-css";
+@use "@/assets/design-tokens";
+@use "@/assets/fonts/fonts.css";
+@use "@/assets/reset.css";
+@use "@/assets/main";
 </style>

src/assets/main.scss

@@ -1,4 +1,4 @@
-@import "./icons/icons";
+@use "./icons/icons";
 
 * {
   outline-offset: -2px;

src/components/ckeditor/CkEditorAsync.vue

@@ -38,6 +38,7 @@ const config: EditorConfig = {
     "undo",
     "redo",
   ],
+  licenseKey: "GPL",
 };
 </script>
 

src/components/ckeditor/ckeditor-exports.ts

@@ -6,7 +6,7 @@
 // but tree shaking, to keep it small, is not supported with an async import
 // therefore we first import the bits we need in here and do an async import of this file wherever we need the editor
 // this vite improvement might make this workaround obsolete: https://github.com/vitejs/vite/pull/14221
-import _Ckeditor from "@ckeditor/ckeditor5-vue";
+export { Ckeditor } from "@ckeditor/ckeditor5-vue";
 
 export {
   ClassicEditor,
@@ -21,5 +21,3 @@ export {
   Paragraph,
   type EditorConfig,
 } from "ckeditor5";
-
-export const Ckeditor = _Ckeditor.component;

src/stores/create-store.ts

@@ -1,23 +1,24 @@
-import {
-  inject,
-  provide,
-  ref,
-  type InjectionKey,
-  type Ref,
-  type UnwrapRef,
-} from "vue";
+import { inject, provide, ref, type InjectionKey } from "vue";
+
+// het type dat de ref functie van vue retourneert is ingewikkeld en kan per versie verschillen
+// op deze manier kunnen we het type 'uitrekenen' en verandert het mee met versie updates van vue
+const refWithValueSpecified = <T>(v: T) => ref(v);
+type RefReturnType<T> = ReturnType<typeof refWithValueSpecified<T>>;
+type RefValue<T> = RefReturnType<T>["value"];
 
 const injectionKey = Symbol() as InjectionKey<StoreImplementation>;
 const storeMap = new Map<string, Store<unknown>>();
 
 export type CreateStoreParams<T> = {
   stateId: string;
   stateFactory: () => T;
-  onExistingState?: (state: UnwrapRef<T>) => void | Promise<void>;
-  onNewState?: (state: UnwrapRef<T>) => void | Promise<void>;
+  onExistingState?: (state: RefValue<T>) => void | Promise<void>;
+  onNewState?: (state: RefValue<T>) => void | Promise<void>;
 };
 
-export type Store<T> = Ref<UnwrapRef<T>> & { reset: () => void };
+export type Store<T> = RefReturnType<T> & {
+  reset: () => void;
+};
 
 export type StoreImplementation = <T>(params: CreateStoreParams<T>) => Store<T>;
 
@@ -33,10 +34,11 @@ export function defaultStoreImplementation<T>({
     store = Object.assign(ref(stateFactory()), {
       reset() {
         if (store) {
-          store.value = stateFactory() as UnwrapRef<T>;
+          store.value = stateFactory();
         }
       },
     });
+
     storeMap.set(stateId, store);
     onNewState?.(store.value);
   } else {
@@ -47,14 +49,14 @@ export function defaultStoreImplementation<T>({
 }
 
 export function provideStoreImplementation(
-  implementation: StoreImplementation
+  implementation: StoreImplementation,
 ) {
   provide(injectionKey, implementation);
 }
 
 export function ensureState<T>(params: CreateStoreParams<T>): Store<T> {
   const implementation = inject(injectionKey, defaultStoreImplementation);
-  return implementation(params) as Store<T>;
+  return implementation(params);
 }
 
 export function resetState(stateId: string) {

src/test/services/fetch-logged-in.test.ts

@@ -12,7 +12,7 @@ import {
 } from "vitest";
 
 import { setupServer } from "msw/node";
-import { rest } from "msw";
+import { http } from "msw";
 
 const someUrl = "https://dummy.request.fgdsf";
 
@@ -27,9 +27,12 @@ describe("fetchLoggedIn", () => {
   let status = 401;
 
   const server = setupServer(
-    rest.get(someUrl, (req, res, ctx) => {
-      return res(ctx.status(status), ctx.json("test"));
-    })
+    http.get(someUrl, () => {
+      return new Response("test", {
+        headers: { "Content-Type": "application/json" },
+        status,
+      });
+    }),
   );
 
   // Start server before tests
@@ -57,7 +60,7 @@ describe("fetchLoggedIn", () => {
     await flushPromises();
 
     expect(consoleWarnMock).toHaveBeenLastCalledWith(
-      "session expired. waiting for user to log in..."
+      "session expired. waiting for user to log in...",
     );
 
     status = 200;
@@ -67,7 +70,7 @@ describe("fetchLoggedIn", () => {
     await promise;
 
     expect(consoleLogMock).toHaveBeenLastCalledWith(
-      "user is logged in again, resuming..."
+      "user is logged in again, resuming...",
     );
   });
 });

src/test/services/service-data/fromSubmitter.test.ts

@@ -9,7 +9,7 @@ describe("ServiceResult.fromSubmitter", () => {
     };
 
     const fromSubmitterResult = ServiceResult.fromSubmitter<TestType, TestType>(
-      () => Promise.resolve({ data: "out" } as TestType)
+      () => Promise.resolve({ data: "out" } as TestType),
     );
 
     fromSubmitterResult.submit({ data: "in" });
@@ -31,7 +31,7 @@ describe("ServiceResult.fromSubmitter", () => {
     };
 
     const fromPromiseResult = ServiceResult.fromSubmitter<TestType, TestType>(
-      () => Promise.resolve({ data: "value" } as TestType)
+      () => Promise.resolve({ data: "value" } as TestType),
     );
 
     fromPromiseResult.submit({ data: "in" });
@@ -58,14 +58,16 @@ describe("ServiceResult.fromSubmitter", () => {
             TestType
           >(() => Promise.reject<TestType>());
 
-          expect(fromPromiseResult.submit({ data: "in" })).rejects.toBeFalsy();
+          await expect(
+            fromPromiseResult.submit({ data: "in" }),
+          ).rejects.toBeFalsy();
 
           await flushPromises();
 
           expect(fromPromiseResult.state).toMatch("error");
           expect(fromPromiseResult.success).toBeFalsy();
         },
-      }
+      },
     );
   });
 });