Merge remote-tracking branch 'origin' into role-concept

2026-10-16 19:28:35 +00:00 · 2024-07-19 15:27:25 +07:00
parent 22878a035b 27e14bcafe
commit dc055c11ab
74 changed files with 2857 additions and 1348 deletions
@@ -16,7 +16,7 @@ import {
  useOrganization,
  useSubscription
 } from "@app/context";
-import { useDeleteOrgMembership } from "@app/hooks/api";
+import { useDeleteOrgMembership, useUpdateOrgMembership } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";

 import { AddOrgMemberModal } from "./AddOrgMemberModal";
@@ -32,11 +32,13 @@ export const OrgMembersSection = () => {
  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
    "addMember",
    "removeMember",
+    "deactivateMember",
    "upgradePlan",
    "setUpEmail"
  ] as const);

  const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
+  const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();

  const isMoreUsersAllowed = subscription?.memberLimit
    ? subscription.membersUsed < subscription.memberLimit
@@ -65,6 +67,29 @@ export const OrgMembersSection = () => {
    handlePopUpOpen("addMember");
  };

+  const onDeactivateMemberSubmit = async (orgMembershipId: string) => {
+    try {
+      await updateOrgMembership({
+        organizationId: orgId,
+        membershipId: orgMembershipId,
+        isActive: false
+      });
+
+      createNotification({
+        text: "Successfully deactivated user in organization",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to deactivate user in organization",
+        type: "error"
+      });
+    }
+
+    handlePopUpClose("deactivateMember");
+  };
+
  const onRemoveMemberSubmit = async (orgMembershipId: string) => {
    try {
      await deleteMutateAsync({
@@ -128,6 +153,20 @@ export const OrgMembersSection = () => {
          )
        }
      />
+      <DeleteActionModal
+        isOpen={popUp.deactivateMember.isOpen}
+        title={`Are you sure want to deactivate member with username ${
+          (popUp?.deactivateMember?.data as { username: string })?.username || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deactivateMember", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onDeactivateMemberSubmit(
+            (popUp?.deactivateMember?.data as { orgMembershipId: string })?.orgMembershipId
+          )
+        }
+        buttonText="Deactivate"
+      />
      <UpgradePlanModal
        isOpen={popUp.upgradePlan.isOpen}
        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
@@ -1,13 +1,18 @@
 import { useCallback, useMemo, useState } from "react";
-import { faMagnifyingGlass, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+import { faEllipsis, faMagnifyingGlass, faUsers } 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 {
  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
  EmptyState,
-  IconButton,
  Input,
  Select,
  SelectItem,
@@ -32,13 +37,13 @@ import {
  useFetchServerStatus,
  useGetOrgRoles,
  useGetOrgUsers,
-  useUpdateOrgUserRole
+  useUpdateOrgMembership
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 type Props = {
  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
+    popUpName: keyof UsePopUpState<["removeMember", "deactivateMember", "upgradePlan"]>,
    data?: {
      orgMembershipId?: string;
      username?: string;
@@ -49,6 +54,7 @@ type Props = {
 };

 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Props) => {
+  const router = useRouter();
  const { subscription } = useSubscription();
  const { currentOrg } = useOrganization();
  const { user } = useUser();
@@ -63,14 +69,14 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
  const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);

  const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
-  const { mutateAsync: updateUserOrgRole } = useUpdateOrgUserRole();
+  const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();

  const onRoleChange = async (membershipId: string, role: string) => {
    if (!currentOrg?.id) return;

    try {
      // TODO: replace hardcoding default role
-      const isCustomRole = !["admin", "member"].includes(role);
+      const isCustomRole = !["admin", "member", "no-access"].includes(role);

      if (isCustomRole && subscription && !subscription?.rbac) {
        handlePopUpOpen("upgradePlan", {
@@ -79,7 +85,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
        return;
      }

-      await updateUserOrgRole({
+      await updateOrgMembership({
        organizationId: currentOrg?.id,
        membershipId,
        role
@@ -176,7 +182,11 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                  const email = u?.email || inviteEmail;
                  const username = u?.username ?? inviteEmail ?? "-";
                  return (
-                    <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
+                    <Tr
+                      key={`org-membership-${orgMembershipId}`}
+                      className="h-10 w-full cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+                      onClick={() => router.push(`/org/${orgId}/memberships/${orgMembershipId}`)}
+                    >
                      <Td className={isActive ? "" : "text-mineshaft-400"}>{name}</Td>
                      <Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
                      <Td>
@@ -238,34 +248,117 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                      </Td>
                      <Td>
                        {userId !== u?.id && (
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            a={OrgPermissionSubjects.Member}
-                          >
-                            {(isAllowed) => (
-                              <IconButton
-                                onClick={() => {
-                                  if (currentOrg?.authEnforced) {
-                                    createNotification({
-                                      text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
-                                      type: "error"
-                                    });
-                                    return;
-                                  }
-
-                                  handlePopUpOpen("removeMember", { orgMembershipId, username });
-                                }}
-                                size="lg"
-                                colorSchema="danger"
-                                variant="plain"
-                                ariaLabel="update"
-                                className="ml-4"
-                                isDisabled={!isAllowed}
+                          <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.Member}
                              >
-                                <FontAwesomeIcon icon={faXmark} />
-                              </IconButton>
-                            )}
-                          </OrgPermissionCan>
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={twMerge(
+                                      !isAllowed &&
+                                        "pointer-events-none cursor-not-allowed opacity-50"
+                                    )}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      router.push(`/org/${orgId}/memberships/${orgMembershipId}`);
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    Edit User
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Delete}
+                                a={OrgPermissionSubjects.Member}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={
+                                      isActive
+                                        ? twMerge(
+                                            isAllowed
+                                              ? "hover:!bg-red-500 hover:!text-white"
+                                              : "pointer-events-none cursor-not-allowed opacity-50"
+                                          )
+                                        : ""
+                                    }
+                                    onClick={async (e) => {
+                                      e.stopPropagation();
+
+                                      if (currentOrg?.scimEnabled) {
+                                        createNotification({
+                                          text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
+                                          type: "error"
+                                        });
+                                        return;
+                                      }
+
+                                      if (!isActive) {
+                                        // activate user
+                                        await updateOrgMembership({
+                                          organizationId: orgId,
+                                          membershipId: orgMembershipId,
+                                          isActive: true
+                                        });
+
+                                        return;
+                                      }
+
+                                      // deactivate user
+                                      handlePopUpOpen("deactivateMember", {
+                                        orgMembershipId,
+                                        username
+                                      });
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    {`${isActive ? "Deactivate" : "Activate"} User`}
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                              <OrgPermissionCan
+                                I={OrgPermissionActions.Delete}
+                                a={OrgPermissionSubjects.Member}
+                              >
+                                {(isAllowed) => (
+                                  <DropdownMenuItem
+                                    className={twMerge(
+                                      isAllowed
+                                        ? "hover:!bg-red-500 hover:!text-white"
+                                        : "pointer-events-none cursor-not-allowed opacity-50"
+                                    )}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+
+                                      if (currentOrg?.scimEnabled) {
+                                        createNotification({
+                                          text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
+                                          type: "error"
+                                        });
+                                        return;
+                                      }
+
+                                      handlePopUpOpen("removeMember", {
+                                        orgMembershipId,
+                                        username
+                                      });
+                                    }}
+                                    disabled={!isAllowed}
+                                  >
+                                    Remove User
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
                        )}
                      </Td>
                    </Tr>