Replace randomUUID() in application code (#4457)

apps/admin-ui/src/components/alert/AlertPanel.tsx

@@ -8,7 +8,7 @@ import type { AlertEntry } from "./Alerts";
 
 type AlertPanelProps = {
   alerts: AlertEntry[];
-  onCloseAlert: (id: string) => void;
+  onCloseAlert: (id: number) => void;
 };
 
 export function AlertPanel({ alerts, onCloseAlert }: AlertPanelProps) {

apps/admin-ui/src/components/alert/Alerts.tsx

@@ -2,6 +2,7 @@ import { NetworkError } from "@keycloak/keycloak-admin-client";
 import { AlertVariant } from "@patternfly/react-core";
 import { PropsWithChildren, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { generateId } from "../../util";
 
 import { createNamedContext } from "../../utils/createNamedContext";
 import useRequiredContext from "../../utils/useRequiredContext";
@@ -31,7 +32,7 @@ export const AlertContext = createNamedContext<AlertProps | undefined>(
 export const useAlerts = () => useRequiredContext(AlertContext);
 
 export type AlertEntry = {
-  id: string;
+  id: number;
   message: string;
   variant: AlertVariant;
   description?: string;
@@ -42,13 +43,13 @@ export const AlertProvider = ({ children }: PropsWithChildren) => {
   const setTimeout = useSetTimeout();
   const [alerts, setAlerts] = useState<AlertEntry[]>([]);
 
-  const removeAlert = (id: string) =>
+  const removeAlert = (id: number) =>
     setAlerts((alerts) => alerts.filter((alert) => alert.id !== id));
 
   const addAlert = useCallback<AddAlertFunction>(
     (message, variant = AlertVariant.success, description) => {
       const alert: AlertEntry = {
-        id: crypto.randomUUID(),
+        id: generateId(),
         message,
         variant,
         description,

apps/admin-ui/src/components/dynamic/MapComponent.tsx

@@ -11,6 +11,7 @@ import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { generateId } from "../../util";
 
 import { HelpItem } from "../help-enabler/HelpItem";
 import { KeyValueType } from "../key-value-form/key-value-convert";
@@ -18,7 +19,7 @@ import type { ComponentProps } from "./components";
 import { convertToName } from "./DynamicComponents";
 
 type IdKeyValueType = KeyValueType & {
-  id: string;
+  id: number;
 };
 
 export const MapComponent = ({ name, label, helpText }: ComponentProps) => {
@@ -34,7 +35,7 @@ export const MapComponent = ({ name, label, helpText }: ComponentProps) => {
     if (!values.length) {
       values.push({ key: "", value: "" });
     }
-    setMap(values.map((value) => ({ ...value, id: crypto.randomUUID() })));
+    setMap(values.map((value) => ({ ...value, id: generateId() })));
   }, [register, getValues]);
 
   const update = (val = map) => {
@@ -128,7 +129,7 @@ export const MapComponent = ({ name, label, helpText }: ComponentProps) => {
             variant="link"
             icon={<PlusCircleIcon />}
             onClick={() =>
-              setMap([...map, { key: "", value: "", id: crypto.randomUUID() }])
+              setMap([...map, { key: "", value: "", id: generateId() }])
             }
           >
             {t("common:addAttribute")}

apps/admin-ui/src/util.ts

@@ -169,3 +169,5 @@ export const prettyPrintJSON = (value: any) => JSON.stringify(value, null, 2);
 
 export const addTrailingSlash = (url: string) =>
   url.endsWith("/") ? url : url + "/";
+
+export const generateId = () => Math.floor(Math.random() * 1000);

libs/ui-shared/src/alerts/Alerts.tsx

@@ -24,7 +24,7 @@ export const AlertContext = createContext<AlertProps | undefined>(undefined);
 export const useAlerts = () => useContext(AlertContext)!;
 
 export type AlertType = {
-  id: string;
+  id: number;
   message: string;
   variant: AlertVariant;
   description?: string;
@@ -33,7 +33,7 @@ export type AlertType = {
 export const AlertProvider = ({ children }: PropsWithChildren) => {
   const [alerts, setAlerts] = useState<AlertType[]>([]);
 
-  const hideAlert = (id: string) => {
+  const hideAlert = (id: number) => {
     setAlerts((alerts) => alerts.filter((alert) => alert.id !== id));
   };
 
@@ -44,7 +44,7 @@ export const AlertProvider = ({ children }: PropsWithChildren) => {
   ) => {
     setAlerts([
       {
-        id: crypto.randomUUID(),
+        id: Math.random() * 100,
         message,
         variant,
         description,