Fix broken lockfile and upgrade JS tooling (#41698)

Signed-off-by: Jon Koops <jonkoops@gmail.com>

js/apps/account-ui/package.json

@@ -36,21 +36,21 @@
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.60.0",
+    "react-hook-form": "^7.62.0",
     "react-i18next": "^15.6.1",
     "react-router-dom": "^6.30.1"
   },
   "devDependencies": {
     "@keycloak/keycloak-admin-client": "workspace:*",
-    "@playwright/test": "^1.54.1",
+    "@playwright/test": "^1.54.2",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.11.0",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "lightningcss": "^1.30.1",
     "vite": "^7.0.6",
-    "vite-plugin-checker": "^0.10.0",
+    "vite-plugin-checker": "^0.10.2",
     "vite-plugin-dts": "^4.5.4"
   },
   "wireit": {

js/apps/admin-ui/package.json

@@ -105,7 +105,7 @@
     "p-debounce": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.60.0",
+    "react-hook-form": "^7.62.0",
     "react-i18next": "^15.6.1",
     "react-router-dom": "^6.30.1",
     "reactflow": "^11.11.4",
@@ -113,7 +113,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@playwright/test": "^1.54.1",
+    "@playwright/test": "^1.54.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
@@ -123,14 +123,14 @@
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.11.0",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "jsdom": "^26.1.0",
     "lightningcss": "^1.30.1",
     "properties-file": "^3.5.13",
     "ts-node": "^10.9.2",
     "uuid": "^11.1.0",
     "vite": "^7.0.6",
-    "vite-plugin-checker": "^0.10.0",
+    "vite-plugin-checker": "^0.10.2",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   }

js/apps/admin-ui/src/clients/add/LogoutPanel.tsx

@@ -78,8 +78,7 @@ export const LogoutPanel = ({
           label={t("frontchannelLogoutUrl")}
           labelIcon={t("frontchannelLogoutUrlHelp")}
           rules={{
-            validate: (uri) =>
+            validate: (uri) => validateUrl(uri, t("frontchannelUrlInvalid")),
-              validateUrl(uri, t("frontchannelUrlInvalid").toString()),
           }}
         />
       )}
@@ -105,8 +104,7 @@ export const LogoutPanel = ({
             label={t("backchannelLogoutUrl")}
             labelIcon={t("backchannelLogoutUrlHelp")}
             rules={{
-              validate: (uri) =>
+              validate: (uri) => validateUrl(uri, t("backchannelUrlInvalid")),
-                validateUrl(uri, t("backchannelUrlInvalid").toString()),
             }}
           />
           <FormGroup

js/apps/admin-ui/src/clients/authorization/EmptyPermissionsState.tsx

@@ -33,7 +33,7 @@ const EmptyButton = ({
     <Button
       data-testid={`create-${permissionType}`}
       className={
-        disabled ? "keycloak__permissions__empty_state " : "" + "pf-v5-u-m-sm"
+        disabled ? "keycloak__permissions__empty_state " : "pf-v5-u-m-sm"
       }
       variant="secondary"
       onClick={() =>

js/apps/admin-ui/src/events/AdminEvents.tsx

@@ -444,10 +444,7 @@ export const AdminEvents = ({ resourcePath }: AdminEventsProps) => {
                             }
                           >
                             {operationTypes?.map((option) => (
-                              <SelectOption
+                              <SelectOption key={option} value={option}>
-                                key={option.toString()}
-                                value={option}
-                              >
                                 {option}
                               </SelectOption>
                             ))}

js/apps/admin-ui/src/realm-settings/NewClientPolicy.tsx

@@ -479,7 +479,7 @@ export default function NewClientPolicy() {
                 required: t("required"),
                 validate: (value) =>
                   policies.some((policy) => policy.name === value)
-                    ? t("createClientProfileNameHelperText").toString()
+                    ? t("createClientProfileNameHelperText")
                     : true,
               }}
             />

js/apps/admin-ui/src/sessions/RevocationModal.tsx

@@ -41,20 +41,20 @@ export const RevocationModal = ({
       addAlert(t("noAdminUrlSet"), AlertVariant.warning);
     } else if (failedCount > 0) {
       addAlert(
-        t("" + prefixKey + "Success", {
+        t(prefixKey + "Success", {
           successNodes: result.successRequests,
         }),
         AlertVariant.success,
       );
       addAlert(
-        t("" + prefixKey + "Fail", {
+        t(prefixKey + "Fail", {
           failedNodes: result.failedRequests,
         }),
         AlertVariant.danger,
       );
     } else {
       addAlert(
-        t("" + prefixKey + "Success", {
+        t(prefixKey + "Success", {
           successNodes: result.successRequests,
         }),
         AlertVariant.success,

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx

@@ -138,7 +138,7 @@ export const LdapSettingsGeneral = ({
             control={form.control}
             render={({ field }) => (
               <KeycloakSelect
-                isDisabled={!!vendorEdit}
+                isDisabled={vendorEdit}
                 toggleId="kc-vendor"
                 onToggle={() => setIsVendorDropdownOpen(!isVendorDropdownOpen)}
                 isOpen={isVendorDropdownOpen}

js/apps/admin-ui/src/user/user-credentials/ResetPasswordDialog.tsx

@@ -161,7 +161,7 @@ export const ResetPasswordDialog = ({
                 await onChange(e);
                 if (passwordConfirmation !== e.currentTarget.value) {
                   setError("passwordConfirmation", {
-                    message: t("confirmPasswordDoesNotMatch").toString(),
+                    message: t("confirmPasswordDoesNotMatch"),
                   });
                 } else {
                   clearErrors("passwordConfirmation");
@@ -187,8 +187,7 @@ export const ResetPasswordDialog = ({
               {...register("passwordConfirmation", {
                 required: true,
                 validate: (value) =>
-                  value === password ||
+                  value === password || t("confirmPasswordDoesNotMatch"),
-                  t("confirmPasswordDoesNotMatch").toString(),
               })}
             />
             {errors.passwordConfirmation && (

js/apps/admin-ui/test/autentication/flow.ts

@@ -61,7 +61,7 @@ export async function assertRowExists(page: Page, name: string, exists = true) {
   if (exists) {
     await expect(locator).toBeVisible();
   } else {
-    await expect(locator).not.toBeVisible();
+    await expect(locator).toBeHidden();
   }
 }
 

js/apps/admin-ui/test/autentication/flows.spec.ts

@@ -56,7 +56,7 @@ test.describe("Authentication test", () => {
     const itemId = "browser";
     await searchItem(page, "Search for flow", itemId);
     await expect(getRowByCellText(page, itemId)).toBeVisible();
-    await expect(getRowByCellText(page, "clients")).not.toBeVisible();
+    await expect(getRowByCellText(page, "clients")).toBeHidden();
   });
 
   test("should create duplicate of existing flow", async ({ page }) => {

js/apps/admin-ui/test/client-scope/main.ts

@@ -79,7 +79,7 @@ export async function assertSwitchDisplayOnConsentScreenIsChecked(page: Page) {
 
 export async function assertConsentInputIsVisible(page: Page, not = false) {
   if (not) {
-    await expect(getConsentScreenTextInput(page)).not.toBeVisible();
+    await expect(getConsentScreenTextInput(page)).toBeHidden();
   } else {
     await expect(getConsentScreenTextInput(page)).toBeVisible();
   }

js/apps/admin-ui/test/clients/initial-access.ts

@@ -14,7 +14,7 @@ export async function assertInitialAccessTokensIsEmpty(page: Page) {
 export async function assertInitialAccessTokensIsNotEmpty(page: Page) {
   await expect(
     page.getByTestId("no-initial-access-tokens-empty-action"),
-  ).not.toBeVisible();
+  ).toBeHidden();
 }
 
 export async function goToCreateFromEmptyList(page: Page) {

js/apps/admin-ui/test/events/list.ts

@@ -51,7 +51,7 @@ export async function assertSearchButtonDisabled(page: Page, disabled = true) {
   if (disabled) {
     await expect(page.getByTestId("search-events-btn")).toBeDisabled();
   } else {
-    await expect(page.getByTestId("search-events-btn")).not.toBeDisabled();
+    await expect(page.getByTestId("search-events-btn")).toBeEnabled();
   }
 }
 
@@ -68,7 +68,7 @@ export async function assertSearchChipGroupItemExist(
   if (exist) {
     await expect(locator).toHaveText(`User ID${itemName}`);
   } else {
-    await expect(locator).not.toBeVisible();
+    await expect(locator).toBeHidden();
   }
 }
 

js/apps/admin-ui/test/realm-settings/export.ts

@@ -2,14 +2,14 @@ import { Page, expect } from "@playwright/test";
 import { switchOff, switchOn } from "../utils/form";
 
 export async function assertDialogClosed(page: Page) {
-  await expect(page.getByTestId("confirm")).not.toBeVisible();
+  await expect(page.getByTestId("confirm")).toBeHidden();
 }
 
 export async function assertWarningMessage(page: Page, toBeVisible = false) {
   if (toBeVisible) {
     await expect(page.getByTestId("warning-message")).toBeVisible();
   } else {
-    await expect(page.getByTestId("warning-message")).not.toBeVisible();
+    await expect(page.getByTestId("warning-message")).toBeHidden();
   }
 }
 

js/apps/admin-ui/test/realm-settings/import.spec.ts

@@ -49,7 +49,7 @@ test.describe("Partial import test", () => {
   test("Opens and closes partial import dialog", async ({ page }) => {
     await expect(page.getByTestId("confirm")).toBeDisabled();
     await cancelModal(page);
-    await expect(page.getByTestId("confirm")).not.toBeVisible();
+    await expect(page.getByTestId("confirm")).toBeHidden();
   });
 
   test("Import button only enabled if JSON has something to import", async ({
@@ -108,7 +108,7 @@ test.describe("Partial import test", () => {
 
     await chooseFile(page, "../utils/files/client-only.json");
 
-    await expect(page.locator("select")).not.toBeVisible();
+    await expect(page.locator("select")).toBeHidden();
 
     await assertTextContent(page, "1 Clients");
 

js/apps/admin-ui/test/realm-settings/import.ts

@@ -5,7 +5,7 @@ export async function assertImportButtonDisabled(page: Page, disabled = true) {
   if (disabled) {
     await expect(page.getByTestId("confirm")).toBeDisabled();
   } else {
-    await expect(page.getByTestId("confirm")).not.toBeDisabled();
+    await expect(page.getByTestId("confirm")).toBeEnabled();
   }
 }
 
@@ -91,7 +91,7 @@ export async function assertClearButtonDisabled(page: Page, disabled = true) {
   if (disabled) {
     await expect(getClearButton(page)).toBeDisabled();
   } else {
-    await expect(getClearButton(page)).not.toBeDisabled();
+    await expect(getClearButton(page)).toBeEnabled();
   }
 }
 

js/libs/ui-shared/package.json

@@ -53,7 +53,7 @@
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "7.60.0",
+    "react-hook-form": "7.62.0",
     "react-i18next": "^15.6.1"
   },
   "devDependencies": {
@@ -63,7 +63,7 @@
     "@vitejs/plugin-react-swc": "^3.11.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "vite": "^7.0.6",
-    "vite-plugin-checker": "^0.10.0",
+    "vite-plugin-checker": "^0.10.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "^3.2.4"

js/libs/ui-shared/src/controls/table/KeycloakDataTable.tsx

@@ -258,7 +258,7 @@ function DataTable<T>({
                     rows[index + 1].cells.length === 0
                       ? undefined
                       : {
-                          isExpanded: !!expandedRows[index],
+                          isExpanded: expandedRows[index] ?? false,
                           rowIndex: index,
                           expandId: "expandable-row-",
                           onToggle: (_, rowIndex, isOpen) => {
@@ -278,7 +278,7 @@ function DataTable<T>({
                 />
               </Tr>
             ) : (
-              <Tr isExpanded={!!expandedRows[index - 1]}>
+              <Tr isExpanded={expandedRows[index - 1] ?? false}>
                 <Td />
                 <Td colSpan={columns.length}>
                   <ExpandableRowContent>

js/libs/ui-shared/src/user-profile/utils.ts

@@ -73,7 +73,7 @@ export function setUserProfileServerError<T>(
   ).forEach((e) => {
     const params = Object.assign(
       {},
-      e.params?.map((p) => (isBundleKey(p?.toString()) ? t(unWrap(p)) : p)),
+      e.params?.map((p) => (isBundleKey(p) ? t(unWrap(p)) : p)),
     );
     setError(fieldName(e.field) as keyof T, {
       message: t(

js/package.json

@@ -2,7 +2,7 @@
   "name": "root",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
   "scripts": {
     "prepare": "cd .. && husky js/.husky",
     "build": "wireit"
@@ -26,49 +26,19 @@
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-lodash": "^8.0.0",
-    "eslint-plugin-playwright": "^2.2.0",
+    "eslint-plugin-playwright": "^2.2.2",
-    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "~5.2.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.4",
     "prettier": "^3.6.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.38.0",
+    "typescript-eslint": "^8.39.0",
     "wireit": "^0.14.12"
   },
-  "pnpm": {
-    "ignoredOptionalDependencies": [
-      "@types/c3",
-      "bootstrap-datepicker",
-      "bootstrap-sass",
-      "bootstrap-select",
-      "bootstrap-slider",
-      "bootstrap-switch",
-      "bootstrap-touchspin",
-      "c3",
-      "d3",
-      "datatables.net",
-      "datatables.net-colreorder",
-      "datatables.net-colreorder-bs",
-      "datatables.net-select",
-      "drmonty-datatables-colvis",
-      "eonasdan-bootstrap-datetimepicker",
-      "font-awesome-sass",
-      "google-code-prettify",
-      "jquery-match-height",
-      "moment",
-      "moment-timezone",
-      "patternfly-bootstrap-combobox",
-      "patternfly-bootstrap-treeview"
-    ],
-    "onlyBuiltDependencies": [
-      "@swc/core",
-      "esbuild"
-    ]
-  },
   "lint-staged": {
     "*.{js,jsx,mjs,ts,tsx}": "eslint --cache --fix"
   }

js/pnpm-workspace.yaml

@@ -2,3 +2,31 @@ packages:
   - apps/*
   - libs/*
   - themes-vendor
+
+onlyBuiltDependencies:
+  - '@swc/core'
+  - esbuild
+
+ignoredOptionalDependencies:
+  - '@types/c3'
+  - bootstrap-datepicker
+  - bootstrap-sass
+  - bootstrap-select
+  - bootstrap-slider
+  - bootstrap-switch
+  - bootstrap-touchspin
+  - 'c3'
+  - 'd3'
+  - datatables.net
+  - datatables.net-colreorder
+  - datatables.net-colreorder-bs
+  - datatables.net-select
+  - drmonty-datatables-colvis
+  - eonasdan-bootstrap-datetimepicker
+  - font-awesome-sass
+  - google-code-prettify
+  - jquery-match-height
+  - moment
+  - moment-timezone
+  - patternfly-bootstrap-combobox
+  - patternfly-bootstrap-treeview

js/pom.xml

@@ -24,8 +24,8 @@
     </modules>
 
     <properties>
-        <node.version>v22.14.0</node.version>
+        <node.version>v22.18.0</node.version>
-        <pnpm.version>10.4.1</pnpm.version>
+        <pnpm.version>10.14.0</pnpm.version>
         <!-- The JavaScript projects use non-standard folders for their sources, therefore, name it here explicitly -->
         <maven.build.cache.input.1>src</maven.build.cache.input.1>
         <maven.build.cache.input.2>public</maven.build.cache.input.2>

js/themes-vendor/package.json

@@ -34,6 +34,6 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^4.45.1"
+    "rollup": "^4.46.2"
   }
 }