Merge branch 'main' into bug/feedback-step

# Conflicts:
#	src/features/datamodel/DataModelsProvider.tsx

Author: Ole Martin Handeland

.yarn/releases/yarn-4.9.2.cjs renamed to .yarn/releases/yarn-4.9.3.cjs

@@ -4,4 +4,4 @@ enableTelemetry: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.3.cjs

.yarnrc.yml

@@ -11,6 +11,7 @@ const CYPRESS_WINDOW_HEIGHT = env.parsed?.CYPRESS_WINDOW_HEIGHT || 1080;
 module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
+      require('cypress-terminal-report/src/installLogsPrinter')(on, { printLogsToConsole: 'always' });
       on('before:browser:launch', (browser, launchOptions) => {
         if (browser.name === 'electron') {
           launchOptions.preferences.width = CYPRESS_WINDOW_WIDTH;

cypress.config.js

@@ -39,14 +39,14 @@
     "@babel/runtime": "7.28.3",
     "@babel/runtime-corejs3": "7.28.3",
     "@eslint/compat": "1.3.2",
-    "@faker-js/faker": "9.9.0",
+    "@faker-js/faker": "10.0.0",
     "@percy/cli": "1.31.1",
     "@percy/cypress": "3.1.6",
     "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "@tanstack/react-query-devtools": "5.85.5",
     "@testing-library/cypress": "10.0.3",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.7.0",
+    "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/dot-object": "2.1.6",
@@ -57,7 +57,7 @@
     "@types/marked": "6.0.0",
     "@types/mime": "4.0.0",
     "@types/node": "22.17.2",
-    "@types/react": "19.1.10",
+    "@types/react": "19.1.11",
     "@types/react-dom": "19.1.7",
     "@types/react-router-dom": "5.3.3",
     "@types/uuid": "10.0.0",
@@ -66,8 +66,8 @@
     "axe-core": "4.10.3",
     "babel-jest": "30.0.5",
     "babel-loader": "10.0.0",
-    "caniuse-lite": "1.0.30001735",
-    "core-js": "3.45.0",
+    "caniuse-lite": "1.0.30001737",
+    "core-js": "3.45.1",
     "cross-env": "10.0.0",
     "css-loader": "7.1.2",
     "cypress": "14.5.4",
@@ -77,10 +77,11 @@
     "cypress-multi-reporters": "2.0.5",
     "cypress-network-idle": "1.15.0",
     "cypress-plugin-tab": "1.0.5",
+    "cypress-terminal-report": "^7.2.1",
     "cypress-wait-until": "3.0.2",
     "dotenv": "17.2.1",
     "esbuild-loader": "4.3.0",
-    "eslint": "9.33.0",
+    "eslint": "9.34.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-cypress": "5.1.1",
     "eslint-plugin-import": "2.32.0",
@@ -119,10 +120,10 @@
     "terser-webpack-plugin": "5.3.14",
     "tinybench": "4.1.0",
     "ts-jest": "29.4.1",
-    "ts-loader": "9.5.2",
+    "ts-loader": "9.5.4",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
-    "tsx": "4.20.4",
+    "tsx": "4.20.5",
     "typescript-plugin-css-modules": "5.2.0",
     "use-immer": "0.11.0",
     "utility-types": "3.11.0",
@@ -176,10 +177,10 @@
     "typescript": "5.9.2",
     "typescript-eslint": "8.40.0",
     "uuid": "11.1.0",
-    "zod": "4.0.17",
-    "zustand": "5.0.7"
+    "zod": "4.1.1",
+    "zustand": "5.0.8"
   },
-  "packageManager": "[email protected].2",
+  "packageManager": "[email protected].3",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       ".husky/pre-commit-check-for-skipped-tests",

package.json

@@ -0,0 +1,74 @@
+#!/bin/bash
+
+# Script to run specified Cypress test a certain number of times (defaults to 50) or until failure.
+# Writes logs to the $logs_folder
+
+spec_arg=${1:-""}  # Optional spec argument- defaults to running all tests if not specified
+max_runs=${2:-50}  # Default to 50 if no argument provided
+counter=1
+logs_folder=scripts/debug-flaky-cypress-logs
+
+# Handle Ctrl+C gracefully
+cleanup() {
+    echo ""
+    echo "Interrupted by user after $((counter-1)) runs"
+    # Kill any running cypress processes
+    pkill -f "cypress"
+    exit 0
+}
+
+trap cleanup INT TERM
+
+if [ -n "$spec_arg" ]; then
+  echo "Running test up to $max_runs times with spec: $spec_arg"
+else
+  echo "Running test up to $max_runs times..."
+fi
+
+# If logs_folder doesn't exist, create it
+mkdir -p $logs_folder;
+
+while [ $counter -le $max_runs ]; do
+  echo "=== Run #$counter/$max_runs ==="
+
+  # Run the command and capture output
+  if [ -n "$spec_arg" ]; then
+    yarn cy:run --spec "$spec_arg" 2>&1 | tee "$logs_folder/run-$counter.log"
+  else
+    yarn cy:run 2>&1 | tee "$logs_folder/run-$counter.log"
+  fi
+  exit_code=$?
+  echo "Exit code for run #$counter: $exit_code"
+
+  # Check for test failures in the output
+  if grep -q "Failing:.*[1-9]" "$logs_folder/run-$counter.log" || \
+     grep -q "✖.*failed" "$logs_folder/run-$counter.log" || \
+     grep -q "failed (100%)" "$logs_folder/run-$counter.log"; then
+    echo ""
+    echo "==================================="
+    echo "FAILURE DETECTED ON RUN #$counter"
+    echo "==================================="
+    echo "Test failed after $counter attempts"
+    echo "Check $logs_folder/run-$counter.log for details"
+    echo ""
+    exit 0
+  fi
+
+  # Also check exit code as backup
+  if [ $exit_code -ne 0 ]; then
+    echo ""
+    echo "==================================="
+    echo "FAILURE DETECTED ON RUN #$counter"
+    echo "==================================="
+    echo "Test failed with exit code $exit_code on the $counter attempt"
+    echo "Check $logs_folder/run-$counter.log for details"
+    echo ""
+    exit 0  # Exit the function, not the script
+  fi
+
+  echo "Run #$counter passed"
+  counter=$((counter + 1))
+done
+
+echo "All $max_runs runs passed!"
+return 0

scripts/debug-flaky-cypress.sh

@@ -5,8 +5,8 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import type { AxiosError } from 'axios';
 
 import { createContext } from 'src/core/contexts/context';
-import { DisplayError as DefaultDisplayError } from 'src/core/errorHandling/DisplayError';
-import { Loader as DefaultLoader } from 'src/core/loading/Loader';
+import { DisplayError } from 'src/core/errorHandling/DisplayError';
+import { Loader } from 'src/core/loading/Loader';
 import type { LaxContextProps, StrictContextProps } from 'src/core/contexts/context';
 
 type Err = Error | AxiosError;
@@ -18,17 +18,9 @@ type Query<Req extends boolean, QueryData> = () => Req extends true
 
 type ContextProps<Ctx, Req extends boolean> = Req extends true ? StrictContextProps : LaxContextProps<Ctx>;
 
-export type QueryContextProps<QueryData, Req extends boolean, ContextData = QueryData> = ContextProps<
-  ContextData,
-  Req
-> & {
+export type QueryContextProps<QueryData, Req extends boolean> = ContextProps<QueryData, Req> & {
   query: Query<Req, QueryData>;
-
-  process?: (data: QueryData) => ContextData;
   shouldDisplayError?: (error: Err) => boolean;
-
-  DisplayError?: React.ComponentType<{ error: Err }>;
-  Loader?: React.ComponentType<{ reason: string }>;
 };
 
 /**
@@ -38,26 +30,16 @@ export type QueryContextProps<QueryData, Req extends boolean, ContextData = Quer
  * Remember to call this through a delayedContext() call to prevent problems with cyclic imports.
  * @see delayedContext
  */
-export function createQueryContext<QD, Req extends boolean, CD = QD>(props: QueryContextProps<QD, Req, CD>) {
-  const {
-    name,
-    required,
-    query,
-    process = (i: QD) => i as unknown as CD,
-    shouldDisplayError = () => true,
-    DisplayError = DefaultDisplayError,
-    Loader = DefaultLoader,
-    ...rest
-  } = props;
+export function createQueryContext<QD, Req extends boolean>(props: QueryContextProps<QD, Req>) {
+  const { name, required, query: useQuery, shouldDisplayError = () => true, ...rest } = props;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { Provider, useCtx, useLaxCtx, useHasProvider } = createContext<CD>({ name, required, ...(rest as any) });
-  const defaultValue = ('default' in rest ? rest.default : undefined) as CD;
+  const { Provider, useCtx, useLaxCtx, useHasProvider } = createContext<QD>({ name, required, ...(rest as any) });
+  const defaultValue = ('default' in rest ? rest.default : undefined) as QD;
 
-  const WrappingProvider = ({ children }: PropsWithChildren) => {
-    const { data, isPending, error, ...rest } = query();
+  function WrappingProvider({ children }: PropsWithChildren) {
+    const { data, isPending, error, ...rest } = useQuery();
     const enabled = 'enabled' in rest && !required ? rest.enabled : true;
-
-    const value = useMemo(() => (typeof data !== 'undefined' ? process(data) : undefined), [data]);
+    const value = useMemo(() => data, [data]);
 
     if (enabled && isPending) {
       return <Loader reason={`query-${name}`} />;
@@ -68,7 +50,7 @@ export function createQueryContext<QD, Req extends boolean, CD = QD>(props: Quer
     }
 
     return <Provider value={enabled ? (value ?? defaultValue) : defaultValue}>{children}</Provider>;
-  };
+  }
 
   return {
     Provider: WrappingProvider,

src/core/contexts/queryContext.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { PropsWithChildren } from 'react';
 
+import { useMutationState } from '@tanstack/react-query';
 import deepEqual from 'fast-deep-equal';
 import { createStore } from 'zustand';
 import type { JSONSchema7 } from 'json-schema';
@@ -241,6 +242,18 @@ function BlockUntilLoaded({ children }: PropsWithChildren) {
   const actualCurrentTask = useCurrentLayoutSetId();
   const isPDF = useIsPdf();
 
+  const currentMutations = useMutationState({ filters: { status: 'pending', mutationKey: ['saveFormData'] } });
+  const hasPassedMutationCheck = useRef(false);
+  if (currentMutations.length > 0 && !hasPassedMutationCheck.current) {
+    // FormDataWrite automatically saves unsaved changes on unmount. If something happens above us in the render tree
+    // that causes FormDataWrite to be unmounted (forcing it to save) and re-mounts everything (including us), we
+    // should wait for that previously started save to complete. Otherwise, we'd end up saving outdated initial data
+    // and cause a 409 when patching later.
+    return <Loader reason='save-form-data' />;
+  }
+
+  hasPassedMutationCheck.current = true;
+
   if (error) {
     // Error trying to fetch data, if missing rights we display relevant page
     if (isAxiosError(error) && error.response?.status === HttpStatusCodes.Forbidden) {

src/features/datamodel/DataModelsProvider.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { skipToken, useQuery } from '@tanstack/react-query';
 
@@ -57,15 +57,18 @@ function useLayoutQuery() {
     utils.error && window.logError('Fetching form layout failed:\n', utils.error);
   }, [utils.error]);
 
-  return utils.data
-    ? {
-        ...utils,
-        data: {
-          ...utils.data,
-          lookups: makeLayoutLookups(utils.data.layouts),
-        },
-      }
-    : utils;
+  const data = useMemo(() => {
+    if (utils.data) {
+      return {
+        ...utils.data,
+        lookups: makeLayoutLookups(utils.data.layouts),
+      };
+    }
+
+    return utils.data;
+  }, [utils.data]);
+
+  return { ...utils, data };
 }
 const { Provider, useCtx, useLaxCtx } = delayedContext(() =>
   createQueryContext({

src/features/form/layout/LayoutsContext.tsx

@@ -14,7 +14,19 @@ export function useLayoutSetsQueryDef() {
   const { fetchLayoutSets } = useAppQueries();
   return {
     queryKey: ['fetchLayoutSets'],
-    queryFn: fetchLayoutSets,
+    queryFn: async () => {
+      const layoutSets = await fetchLayoutSets();
+      if (layoutSets?.uiSettings?.taskNavigation) {
+        return {
+          ...layoutSets,
+          uiSettings: {
+            ...layoutSets.uiSettings,
+            taskNavigation: layoutSets.uiSettings.taskNavigation.map((g) => ({ ...g, id: uuidv4() })),
+          },
+        };
+      }
+      return layoutSets;
+    },
   };
 }
 
@@ -33,18 +45,6 @@ const { Provider, useCtx, useLaxCtx } = delayedContext(() =>
     name: 'LayoutSets',
     required: true,
     query: useLayoutSetsQuery,
-    process: (layoutSets) => {
-      if (layoutSets?.uiSettings?.taskNavigation) {
-        return {
-          ...layoutSets,
-          uiSettings: {
-            ...layoutSets.uiSettings,
-            taskNavigation: layoutSets.uiSettings.taskNavigation.map((g) => ({ ...g, id: uuidv4() })),
-          },
-        };
-      }
-      return layoutSets;
-    },
   }),
 );