From a85c59e3e2ac8d13b66573b68fd19b0e407a4644 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Mon, 22 Apr 2024 22:00:37 +0200
Subject: [PATCH 1/3] Fix: Improve user experience for machine identities

---
 .../IdentitySection/IdentityTable.tsx         | 132 +++++++++++-------
 1 file changed, 82 insertions(+), 50 deletions(-)

diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
index 804c2d054..ac1cf31c3 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
@@ -1,9 +1,22 @@
-import { faKey, faLock, faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCopy,
+  faEllipsis,
+  faKey,
+  faLock,
+  faPencil,
+  faServer,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   EmptyState,
   IconButton,
   Select,
@@ -44,7 +57,6 @@ type Props = {
 };
 
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
-  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 
@@ -83,7 +95,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
         <THead>
           <Tr>
             <Th>Name</Th>
-            <Th>ID</Th>
             <Th>Role</Th>
             <Th>Auth Method</Th>
             <Th className="w-5" />
@@ -98,7 +109,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
               return (
                 <Tr className="h-10" key={`identity-${id}`}>
                   <Td>{name}</Td>
-                  <Td>{id}</Td>
                   <Td>
                     <OrgPermissionCan
                       I={OrgPermissionActions.Edit}
@@ -130,7 +140,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                   </Td>
                   <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
                   <Td>
-                    <div className="flex items-center justify-end">
+                    <div className="flex items-center justify-end space-x-4">
                       {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
                         <Tooltip content="Manage client ID/secrets">
                           <IconButton
@@ -144,7 +154,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             colorSchema="primary"
                             variant="plain"
                             ariaLabel="update"
-                            // isDisabled={!isAllowed}
                           >
                             <FontAwesomeIcon icon={faKey} />
                           </IconButton>
@@ -168,7 +177,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                               colorSchema="primary"
                               variant="plain"
                               ariaLabel="update"
-                              className="ml-4"
                               isDisabled={!isAllowed}
                             >
                               <FontAwesomeIcon icon={faLock} />
@@ -176,54 +184,78 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                           </Tooltip>
                         )}
                       </OrgPermissionCan>
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Edit}
-                        a={OrgPermissionSubjects.Identity}
-                      >
-                        {(isAllowed) => (
-                          <IconButton
-                            onClick={async () => {
-                              handlePopUpOpen("identity", {
-                                identityId: id,
-                                name,
-                                role,
-                                customRole
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                            className="ml-4"
-                            isDisabled={!isAllowed}
+                      <DropdownMenu>
+                        <Tooltip asChild content="More options">
+                          <DropdownMenuTrigger asChild className="rounded-lg">
+                            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                            </div>
+                          </DropdownMenuTrigger>
+                        </Tooltip>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Identity}
                           >
-                            <FontAwesomeIcon icon={faPencil} />
-                          </IconButton>
-                        )}
-                      </OrgPermissionCan>
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Delete}
-                        a={OrgPermissionSubjects.Identity}
-                      >
-                        {(isAllowed) => (
-                          <IconButton
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={async () => {
+                                  if (!isAllowed) return;
+                                  handlePopUpOpen("identity", {
+                                    identityId: id,
+                                    name,
+                                    role,
+                                    customRole
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faPencil} />}
+                              >
+                                Update identity
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={() => {
+                                  if (!isAllowed) return;
+                                  handlePopUpOpen("deleteIdentity", {
+                                    identityId: id,
+                                    name
+                                  });
+                                }}
+                                icon={<FontAwesomeIcon icon={faXmark} />}
+                              >
+                                Delete identity
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <DropdownMenuItem
                             onClick={() => {
-                              handlePopUpOpen("deleteIdentity", {
-                                identityId: id,
-                                name
+                              navigator.clipboard.writeText(id);
+                              createNotification({
+                                text: "Copied identity internal ID to clipboard",
+                                type: "success"
                               });
                             }}
-                            size="lg"
-                            colorSchema="danger"
-                            variant="plain"
-                            ariaLabel="update"
-                            className="ml-4"
-                            isDisabled={!isAllowed}
+                            icon={<FontAwesomeIcon icon={faCopy} />}
                           >
-                            <FontAwesomeIcon icon={faXmark} />
-                          </IconButton>
-                        )}
-                      </OrgPermissionCan>
+                            Copy internal ID
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </div>
                   </Td>
                 </Tr>

From fdf5fcad0a26eb51ca6221044b12baf951b0be84 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Mon, 22 Apr 2024 23:09:46 +0200
Subject: [PATCH 2/3] Update IdentityTable.tsx

---
 .../components/IdentitySection/IdentityTable.tsx     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
index ac1cf31c3..f621e3e18 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
@@ -185,13 +185,13 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                         )}
                       </OrgPermissionCan>
                       <DropdownMenu>
-                        <Tooltip asChild content="More options">
-                          <DropdownMenuTrigger asChild className="rounded-lg">
-                            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
                               <FontAwesomeIcon size="lg" icon={faEllipsis} />
-                            </div>
-                          </DropdownMenuTrigger>
-                        </Tooltip>
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
                         <DropdownMenuContent align="start" className="p-1">
                           <OrgPermissionCan
                             I={OrgPermissionActions.Edit}

From f23056bcbc2a93373bbf3350af2f42ccc7364f67 Mon Sep 17 00:00:00 2001
From: vmatsiiako <78047717+vmatsiiako@users.noreply.github.com>
Date: Wed, 8 May 2024 09:20:30 -0700
Subject: [PATCH 3/3] Update IdentityTable.tsx

---
 .../OrgIdentityTab/components/IdentitySection/IdentityTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
index f621e3e18..fa8529371 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
@@ -252,7 +252,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             }}
                             icon={<FontAwesomeIcon icon={faCopy} />}
                           >
-                            Copy internal ID
+                            Copy Identity ID
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>