From 4f6adb50d106c32bce7e639cf21667cdcf2ae501 Mon Sep 17 00:00:00 2001
From: Tuan Dang <dangtony98@gmail.com>
Date: Sun, 10 Dec 2023 22:35:12 +0700
Subject: [PATCH] Minor UX update to identities

---
 frontend/src/hooks/api/identities/queries.tsx |  2 +-
 .../IdentitySection/IdentitySection.tsx       |  6 ++-
 ...IdentityUniversalAuthClientSecretModal.tsx | 37 ++++++++++++-------
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/frontend/src/hooks/api/identities/queries.tsx b/frontend/src/hooks/api/identities/queries.tsx
index aa14c1e60..e43073f40 100644
--- a/frontend/src/hooks/api/identities/queries.tsx
+++ b/frontend/src/hooks/api/identities/queries.tsx
@@ -13,7 +13,7 @@ export const useGetIdentityUniversalAuth = (identityId: string) => {
     return useQuery({
         queryKey: identitiesKeys.getIdentityUniversalAuth(identityId),
         queryFn: async () => {
-            if (identityId === "") return undefined;
+            if (identityId === "") throw new Error("Identity ID is required");
 
             const { data: { identityUniversalAuth } } = await apiRequest.get<{ identityUniversalAuth: IdentityUniversalAuth }>(
                 `/api/v1/auth/universal-auth/identities/${identityId}`
diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
index 0359a3911..c9809500c 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
@@ -52,8 +52,12 @@ export const IdentitySection = withPermission(
                 handlePopUpClose("deleteIdentity");
             } catch (err) {
                 console.error(err);
+                const error = err as any;
+                const text = error?.response?.data?.message
+                    ?? "Failed to delete identity"
+
                 createNotification({
-                    text: "Failed to delete identity",
+                    text,
                     type: "error"
                 });
             }
diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx
index 75f806698..45a921a9f 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx
@@ -61,7 +61,8 @@ export const IdentityUniversalAuthClientSecretModal = ({
     const { t } = useTranslation();
     const { createNotification } = useNotificationContext();
     const [token, setToken] = useState("");
-    const [isTokenCopied, setIsTokenCopied] = useToggle(false);
+    const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
+    const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
 
     const popUpData = (popUp?.universalAuthClientSecret?.data as {
         identityId?: string;
@@ -90,17 +91,21 @@ export const IdentityUniversalAuthClientSecretModal = ({
     
     useEffect(() => {
         let timer: NodeJS.Timeout;
-        if (isTokenCopied) {
-            timer = setTimeout(() => setIsTokenCopied.off(), 2000);
+        if (isClientSecretCopied) {
+            timer = setTimeout(() => setIsClientSecretCopied.off(), 2000);
         }
     
         return () => clearTimeout(timer);
-    }, [isTokenCopied]);
-
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(token);
-        setIsTokenCopied.on();
-    };
+    }, [isClientSecretCopied]);
+    
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+        if (isClientIdCopied) {
+            timer = setTimeout(() => setIsClientIdCopied.off(), 2000);
+        }
+    
+        return () => clearTimeout(timer);
+    }, [isClientIdCopied]);
     
     const onFormSubmit = async ({
         description,
@@ -189,9 +194,12 @@ export const IdentityUniversalAuthClientSecretModal = ({
                         ariaLabel="copy icon"
                         colorSchema="secondary"
                         className="group relative"
-                        onClick={() => navigator.clipboard.writeText(identityUniversalAuth?.clientId ?? "")}
+                        onClick={() => {
+                            navigator.clipboard.writeText(identityUniversalAuth?.clientId ?? "")
+                            setIsClientIdCopied.on();
+                        }}
                     >
-                        <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
+                        <FontAwesomeIcon icon={isClientIdCopied ? faCheck : faCopy} />
                         <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
                             {t("common.click-to-copy")}
                         </span>
@@ -219,9 +227,12 @@ export const IdentityUniversalAuthClientSecretModal = ({
                                 ariaLabel="copy icon"
                                 colorSchema="secondary"
                                 className="group relative"
-                                onClick={copyTokenToClipboard}
+                                onClick={() => {
+                                    navigator.clipboard.writeText(token);
+                                    setIsClientSecretCopied.on();
+                                }}
                             >
-                                <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
+                                <FontAwesomeIcon icon={isClientSecretCopied ? faCheck : faCopy} />
                                 <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
                                     {t("common.click-to-copy")}
                                 </span>