Merge pull request #2099 from Infisical/identity-improvements

Identity Workflow Improvements (Table Menu Opts, Error Handling)
2026-09-22 13:39:35 +00:00 · 2024-07-11 10:45:20 +07:00
parent 82ee77bc05 4574519a76
commit 8b202c2a79
4 changed files with 122 additions and 41 deletions
--- a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityAddToProjectModal.tsx
+++ b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityAddToProjectModal.tsx
@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Modal, ModalContent,Select, SelectItem } from "@app/components/v2";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import {
  useAddIdentityToWorkspace,
@@ -54,7 +54,7 @@ export const IdentityAddToProjectModal = ({ identityId, popUp, handlePopUpToggle
  const filteredWorkspaces = useMemo(() => {
    const wsWorkspaceIds = new Map();

-    projectMemberships?.forEach((projectMembership: any) => {
+    projectMemberships?.forEach((projectMembership) => {
      wsWorkspaceIds.set(projectMembership.project.id, true);
    });

--- a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
+++ b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
@@ -1,9 +1,12 @@
+import { useMemo } from "react";
 import { useRouter } from "next/router";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";

+import { createNotification } from "@app/components/notifications";
 import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
 import { IdentityMembership } from "@app/hooks/api/identities/types";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -21,7 +24,7 @@ const formatRoleName = (role: string, customRoleName?: string) => {
  if (role === ProjectMembershipRole.Admin) return "Admin";
  if (role === ProjectMembershipRole.Member) return "Developer";
  if (role === ProjectMembershipRole.Viewer) return "Viewer";
-  if (role === ProjectMembershipRole.NoAccess) return "No access";
+  if (role === ProjectMembershipRole.NoAccess) return "No Access";
  return role;
 };

@@ -29,12 +32,34 @@ export const IdentityProjectRow = ({
  membership: { id, createdAt, identity, project, roles },
  handlePopUpOpen
 }: Props) => {
+  const { workspaces } = useWorkspace();
  const router = useRouter();
+
+  const isAccessible = useMemo(() => {
+    const workspaceIds = new Map();
+
+    workspaces?.forEach((workspace) => {
+      workspaceIds.set(workspace.id, true);
+    });
+
+    return workspaceIds.has(project.id);
+  }, [workspaces, project]);
+
  return (
    <Tr
      className="group h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
      key={`identity-project-membership-${id}`}
-      onClick={() => router.push(`/project/${project.id}/members`)}
+      onClick={() => {
+        if (isAccessible) {
+          router.push(`/project/${project.id}/members`);
+          return;
+        }
+
+        createNotification({
+          text: "Unable to access project",
+          type: "error"
+        });
+      }}
    >
      <Td>{project.name}</Td>
      <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
@@ -42,26 +67,28 @@ export const IdentityProjectRow = ({
      }`}</Td>
      <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
      <Td>
-        <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-          <Tooltip content="Remove">
-            <IconButton
-              ariaLabel="copy icon"
-              variant="plain"
-              className="group relative"
-              onClick={(e) => {
-                e.stopPropagation();
-                handlePopUpOpen("removeIdentityFromProject", {
-                  identityId: identity.id,
-                  identityName: identity.name,
-                  projectId: project.id,
-                  projectName: project.name
-                });
-              }}
-            >
-              <FontAwesomeIcon icon={faTrash} />
-            </IconButton>
-          </Tooltip>
-        </div>
+        {isAccessible && (
+          <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <Tooltip content="Remove">
+              <IconButton
+                ariaLabel="copy icon"
+                variant="plain"
+                className="group relative"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlePopUpOpen("removeIdentityFromProject", {
+                    identityId: identity.id,
+                    identityName: identity.name,
+                    projectId: project.id,
+                    projectName: project.name
+                  });
+                }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </IconButton>
+            </Tooltip>
+          </div>
+        )}
      </Td>
    </Tr>
  );
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
@@ -108,7 +108,7 @@ export const IdentitySection = withPermission(
            )}
          </OrgPermissionCan>
        </div>
-        <IdentityTable />
+        <IdentityTable handlePopUpOpen={handlePopUpOpen} />
        <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
        {/* <IdentityAuthMethodModal
          popUp={popUp}
--- 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,13 +1,16 @@
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { faEllipsis, faServer } 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,
  SelectItem,
  Table,
@@ -21,8 +24,19 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";

-export const IdentityTable = () => {
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteIdentity"]>,
+    data?: {
+      identityId: string;
+      name: string;
+    }
+  ) => void;
+};
+
+export const IdentityTable = ({ handlePopUpOpen }: Props) => {
  const router = useRouter();
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";
@@ -76,9 +90,7 @@ export const IdentityTable = () => {
                  key={`identity-${id}`}
                  onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
                >
-                  <Td>
-                    <Link href={`/org/${orgId}/identities/${id}`}>{name}</Link>
-                  </Td>
+                  <Td>{name}</Td>
                  <Td>
                    <OrgPermissionCan
                      I={OrgPermissionActions.Edit}
@@ -109,16 +121,58 @@ export const IdentityTable = () => {
                    </OrgPermissionCan>
                  </Td>
                  <Td>
-                    <div className="flex items-center justify-end space-x-4">
-                      <IconButton
-                        ariaLabel="copy icon"
-                        variant="plain"
-                        className="group relative"
-                        onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
-                      >
-                        <FontAwesomeIcon icon={faEllipsis} />
-                      </IconButton>
-                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Edit}
+                          a={OrgPermissionSubjects.Identity}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                router.push(`/org/${orgId}/identities/${id}`);
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              Edit 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={(e) => {
+                                e.stopPropagation();
+                                handlePopUpOpen("deleteIdentity", {
+                                  identityId: id,
+                                  name
+                                });
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              Delete Identity
+                            </DropdownMenuItem>
+                          )}
+                        </OrgPermissionCan>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                  </Td>
                </Tr>
              );