From e2d6ef72ca4d9e4213d31c10e07d81bfb49f981d Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Fri, 3 Mar 2023 13:57:58 +0100
Subject: [PATCH] Replace `randomUUID()` in application code (#4457)

---
 apps/admin-ui/src/components/alert/AlertPanel.tsx     | 2 +-
 apps/admin-ui/src/components/alert/Alerts.tsx         | 7 ++++---
 apps/admin-ui/src/components/dynamic/MapComponent.tsx | 7 ++++---
 apps/admin-ui/src/util.ts                             | 2 ++
 libs/ui-shared/src/alerts/Alerts.tsx                  | 6 +++---
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/admin-ui/src/components/alert/AlertPanel.tsx b/apps/admin-ui/src/components/alert/AlertPanel.tsx
index 6f2a4b6b1a..5d61bf8e2e 100644
--- a/apps/admin-ui/src/components/alert/AlertPanel.tsx
+++ b/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) {
diff --git a/apps/admin-ui/src/components/alert/Alerts.tsx b/apps/admin-ui/src/components/alert/Alerts.tsx
index 96b0b5fcbc..b1a8fc9abf 100644
--- a/apps/admin-ui/src/components/alert/Alerts.tsx
+++ b/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,
diff --git a/apps/admin-ui/src/components/dynamic/MapComponent.tsx b/apps/admin-ui/src/components/dynamic/MapComponent.tsx
index d40831a6f5..0ae619123c 100644
--- a/apps/admin-ui/src/components/dynamic/MapComponent.tsx
+++ b/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")}
diff --git a/apps/admin-ui/src/util.ts b/apps/admin-ui/src/util.ts
index b1eab13d87..4c36d419d8 100644
--- a/apps/admin-ui/src/util.ts
+++ b/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);
diff --git a/libs/ui-shared/src/alerts/Alerts.tsx b/libs/ui-shared/src/alerts/Alerts.tsx
index 5f3aa65092..a895dd422b 100644
--- a/libs/ui-shared/src/alerts/Alerts.tsx
+++ b/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,