From 22e15d0dd9ffcd1414b1f06311c18153a8c5fdba Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Fri, 3 Mar 2023 13:27:23 +0100
Subject: [PATCH] Replace `GenerateId` component with React's `useId()` hook
 (#4536)

---
 .../admin-ui/src/clients/keys/Certificate.tsx | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/apps/admin-ui/src/clients/keys/Certificate.tsx b/apps/admin-ui/src/clients/keys/Certificate.tsx
index 86ef34d6c9..e7dc7548af 100644
--- a/apps/admin-ui/src/clients/keys/Certificate.tsx
+++ b/apps/admin-ui/src/clients/keys/Certificate.tsx
@@ -1,7 +1,8 @@
-import { useTranslation } from "react-i18next";
-import { FormGroup, GenerateId } from "@patternfly/react-core";
-
 import type CertificateRepresentation from "@keycloak/keycloak-admin-client/lib/defs/certificateRepresentation";
+import { FormGroup } from "@patternfly/react-core";
+import { useId } from "react";
+import { useTranslation } from "react-i18next";
+
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
@@ -30,26 +31,22 @@ const CertificateDisplay = ({ id, keyInfo }: CertificateDisplayProps) => {
 
 export const Certificate = ({ keyInfo, plain = false }: CertificateProps) => {
   const { t } = useTranslation("clients");
-  return (
-    <GenerateId prefix="certificate">
-      {(id) =>
-        plain ? (
-          <CertificateDisplay id={id} keyInfo={keyInfo} />
-        ) : (
-          <FormGroup
-            label={t("certificate")}
-            fieldId={id}
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:certificate"
-                fieldLabelId={`clients:${id}`}
-              />
-            }
-          >
-            <CertificateDisplay id={id} keyInfo={keyInfo} />
-          </FormGroup>
-        )
+  const id = useId();
+
+  return plain ? (
+    <CertificateDisplay id={id} keyInfo={keyInfo} />
+  ) : (
+    <FormGroup
+      label={t("certificate")}
+      fieldId={id}
+      labelIcon={
+        <HelpItem
+          helpText="clients-help:certificate"
+          fieldLabelId={`clients:${id}`}
+        />
       }
-    </GenerateId>
+    >
+      <CertificateDisplay id={id} keyInfo={keyInfo} />
+    </FormGroup>
   );
 };