Fix broken lockfile and upgrade JS tooling (#41698)

Signed-off-by: Jon Koops <jonkoops@gmail.com>
2025-12-21 06:20:05 -06:00 · 2025-08-06 19:30:08 +02:00
parent ac632d609e
commit a22fb31f6c
25 changed files with 979 additions and 1353 deletions
--- a/js/apps/account-ui/package.json
+++ b/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": {
--- a/js/apps/admin-ui/package.json
+++ b/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"
  }
--- a/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
+++ b/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) =>
-              validateUrl(uri, t("frontchannelUrlInvalid").toString()),
+            validate: (uri) => validateUrl(uri, t("frontchannelUrlInvalid")),
          }}
        />
      )}
@@ -105,8 +104,7 @@ export const LogoutPanel = ({
            label={t("backchannelLogoutUrl")}
            labelIcon={t("backchannelLogoutUrlHelp")}
            rules={{
-              validate: (uri) =>
-                validateUrl(uri, t("backchannelUrlInvalid").toString()),
+              validate: (uri) => validateUrl(uri, t("backchannelUrlInvalid")),
            }}
          />
          <FormGroup
--- a/js/apps/admin-ui/src/clients/authorization/EmptyPermissionsState.tsx
+++ b/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={() =>
--- a/js/apps/admin-ui/src/events/AdminEvents.tsx
+++ b/js/apps/admin-ui/src/events/AdminEvents.tsx
@@ -444,10 +444,7 @@ export const AdminEvents = ({ resourcePath }: AdminEventsProps) => {
                            }
                          >
                            {operationTypes?.map((option) => (
-                              <SelectOption
-                                key={option.toString()}
-                                value={option}
-                              >
+                              <SelectOption key={option} value={option}>
                                {option}
                              </SelectOption>
                            ))}
--- a/js/apps/admin-ui/src/realm-settings/NewClientPolicy.tsx
+++ b/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,
              }}
            />
--- a/js/apps/admin-ui/src/sessions/RevocationModal.tsx
+++ b/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,
--- a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx
+++ b/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}
--- a/js/apps/admin-ui/src/user/user-credentials/ResetPasswordDialog.tsx
+++ b/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 ||
-                  t("confirmPasswordDoesNotMatch").toString(),
+                  value === password || t("confirmPasswordDoesNotMatch"),
              })}
            />
            {errors.passwordConfirmation && (
--- a/js/apps/admin-ui/test/autentication/flow.ts
+++ b/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();
  }
 }

--- a/js/apps/admin-ui/test/autentication/flows.spec.ts
+++ b/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 }) => {
--- a/js/apps/admin-ui/test/client-scope/main.ts
+++ b/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();
  }
--- a/js/apps/admin-ui/test/clients/initial-access.ts
+++ b/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) {
--- a/js/apps/admin-ui/test/events/list.ts
+++ b/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();
  }
 }

--- a/js/apps/admin-ui/test/realm-settings/export.ts
+++ b/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();
  }
 }

--- a/js/apps/admin-ui/test/realm-settings/import.spec.ts
+++ b/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");

--- a/js/apps/admin-ui/test/realm-settings/import.ts
+++ b/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();
  }
 }

--- a/js/libs/ui-shared/package.json
+++ b/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"
--- a/js/libs/ui-shared/src/controls/table/KeycloakDataTable.tsx
+++ b/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>
--- a/js/libs/ui-shared/src/user-profile/utils.ts
+++ b/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(
--- a/js/package.json
+++ b/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-prettier": "^5.5.3",
+    "eslint-plugin-playwright": "^2.2.2",
+    "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-eslint": "^8.38.0",
+    "typescript": "^5.9.2",
+    "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"
  }
--- a/js/pnpm-lock.yaml
+++ b/js/pnpm-lock.yaml
--- a/js/pnpm-workspace.yaml
+++ b/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
--- a/js/pom.xml
+++ b/js/pom.xml
@@ -24,8 +24,8 @@
    </modules>

    <properties>
-        <node.version>v22.14.0</node.version>
-        <pnpm.version>10.4.1</pnpm.version>
+        <node.version>v22.18.0</node.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>
--- a/js/themes-vendor/package.json
+++ b/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"
  }
 }