From ff44d8dd98446f40bea8fb260d9c94041339f156 Mon Sep 17 00:00:00 2001
From: Tim <36607506+TimKochDev@users.noreply.github.com>
Date: Wed, 9 Oct 2024 18:23:59 +0200
Subject: [PATCH] Add 'copy to clipboard' button for user id (#33491)

Closes #33496

Signed-off-by: Tim Koch <me@timkoch.dev>
---
 .../src/clients/credentials/ClientSecret.tsx  |  2 +-
 .../src/clients/scopes/GeneratedCodeTab.tsx   |  2 +-
 .../CopyToClipboardButton.tsx                 |  0
 js/apps/admin-ui/src/index.ts                 |  2 +-
 js/apps/admin-ui/src/user/UserForm.tsx        | 25 ++++++++++++++-----
 5 files changed, 22 insertions(+), 9 deletions(-)
 rename js/apps/admin-ui/src/{clients/scopes => components/copy-to-clipboard-button}/CopyToClipboardButton.tsx (100%)

diff --git a/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx b/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx
index ca71399f85..aed9b1f68b 100644
--- a/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx
+++ b/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx
@@ -17,7 +17,7 @@ import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { useAccess } from "../../context/access/Access";
 import useFormatDate from "../../utils/useFormatDate";
-import { CopyToClipboardButton } from "../scopes/CopyToClipboardButton";
+import { CopyToClipboardButton } from "../../components/copy-to-clipboard-button/CopyToClipboardButton";
 
 export type ClientSecretProps = {
   client: ClientRepresentation;
diff --git a/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx b/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx
index 08b9948cb2..eb6675227f 100644
--- a/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx
+++ b/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx
@@ -8,7 +8,7 @@ import {
   TextArea,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { CopyToClipboardButton } from "./CopyToClipboardButton";
+import { CopyToClipboardButton } from "../../components/copy-to-clipboard-button/CopyToClipboardButton";
 
 type GeneratedCodeTabProps = {
   user?: UserRepresentation;
diff --git a/js/apps/admin-ui/src/clients/scopes/CopyToClipboardButton.tsx b/js/apps/admin-ui/src/components/copy-to-clipboard-button/CopyToClipboardButton.tsx
similarity index 100%
rename from js/apps/admin-ui/src/clients/scopes/CopyToClipboardButton.tsx
rename to js/apps/admin-ui/src/components/copy-to-clipboard-button/CopyToClipboardButton.tsx
diff --git a/js/apps/admin-ui/src/index.ts b/js/apps/admin-ui/src/index.ts
index d78ecc8ffa..2178200e18 100644
--- a/js/apps/admin-ui/src/index.ts
+++ b/js/apps/admin-ui/src/index.ts
@@ -56,7 +56,7 @@ export * as DetailProvider from "./clients/registration/DetailProvider";
 export * as CreateClientRole from "./clients/roles/CreateClientRole";
 export { AddScopeDialog } from "./clients/scopes/AddScopeDialog";
 export { ClientScopes } from "./clients/scopes/ClientScopes";
-export { CopyToClipboardButton } from "./clients/scopes/CopyToClipboardButton";
+export { CopyToClipboardButton } from "./components/copy-to-clipboard-button/CopyToClipboardButton";
 export { DedicatedScope } from "./clients/scopes/DedicatedScope";
 export * as DedicatedScopes from "./clients/scopes/DedicatedScopes";
 export { EvaluateScopes } from "./clients/scopes/EvaluateScopes";
diff --git a/js/apps/admin-ui/src/user/UserForm.tsx b/js/apps/admin-ui/src/user/UserForm.tsx
index 94733c09e3..231d150120 100644
--- a/js/apps/admin-ui/src/user/UserForm.tsx
+++ b/js/apps/admin-ui/src/user/UserForm.tsx
@@ -39,6 +39,7 @@ import { toUsers } from "./routes/Users";
 import { FixedButtonsGroup } from "../components/form/FixedButtonGroup";
 import { RequiredActionMultiSelect } from "./user-credentials/RequiredActionMultiSelect";
 import { useNavigate } from "react-router-dom";
+import { CopyToClipboardButton } from "../components/copy-to-clipboard-button/CopyToClipboardButton";
 
 export type BruteForced = {
   isBruteForceProtected?: boolean;
@@ -183,12 +184,24 @@ export const UserForm = ({
         {user?.id && (
           <>
             <FormGroup label={t("id")} fieldId="kc-id" isRequired>
-              <TextInput
-                id={user.id}
-                aria-label={t("userID")}
-                value={user.id}
-                readOnly
-              />
+              <InputGroup>
+                <InputGroupItem isFill>
+                  <TextInput
+                    id={user.id}
+                    aria-label={t("userID")}
+                    value={user.id}
+                    readOnly
+                  />
+                </InputGroupItem>
+                <InputGroupItem>
+                  <CopyToClipboardButton
+                    id={`user-${user.id}`}
+                    text={user.id}
+                    label={t("userID")}
+                    variant="control"
+                  />
+                </InputGroupItem>
+              </InputGroup>
             </FormGroup>
             <FormGroup
               label={t("createdAt")}