resolve merge conflict

frontend/src/views/Org/UserPage/UserPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useRouter } from "next/router";
-import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft, faEllipsis, faFolder, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -31,6 +31,8 @@ import {
 import { usePopUp } from "@app/hooks/usePopUp";
 import { TabSections } from "@app/views/Org/Types";
 
+import { UserAuditLogsSection } from "./components/UserProjectsSection/UserAuditLogsSection";
+import { UserGroupsSection } from "./components/UserProjectsSection/UserGroupsSection";
 import { UserDetailsSection, UserOrgMembershipModal, UserProjectsSection } from "./components";
 
 export const UserPage = withPermission(
@@ -241,7 +243,13 @@ export const UserPage = withPermission(
               <div className="mr-4 w-96">
                 <UserDetailsSection membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
               </div>
-              <UserProjectsSection membershipId={membershipId} />
+              <div className="w-full space-y-2">
+                <div className="w-full space-y-4">
+                  <UserProjectsSection membershipId={membershipId} />
+                  <UserGroupsSection orgMembership={membership} />
+                  <UserAuditLogsSection orgMembership={membership} />
+                </div>
+              </div>
             </div>
           </div>
         )}
@@ -272,6 +280,7 @@ export const UserPage = withPermission(
           }
           buttonText="Deactivate"
         />
+
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserAuditLogsSection.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import Link from "next/link";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { EmptyState, IconButton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { withPermission } from "@app/hoc";
+import { OrgUser } from "@app/hooks/api/types";
+import { LogsSection } from "@app/views/Project/AuditLogsPage/components";
+
+type Props = {
+  orgMembership: OrgUser;
+};
+
+export const UserAuditLogsSection = withPermission(
+  ({ orgMembership }: Props) => {
+    const [showFilter, setShowFilter] = useState(false);
+    const { subscription, isLoading } = useSubscription();
+
+    // eslint-disable-next-line no-nested-ternary
+    return subscription?.auditLogs ? (
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <p className="text-lg font-semibold text-gray-200">Audit Logs</p>
+
+          <Tooltip content="Show audit log filters">
+            <IconButton
+              colorSchema="primary"
+              ariaLabel="copy icon"
+              variant="plain"
+              className="group relative"
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <div className="flex items-center space-x-2">
+                <p>Filter</p>
+                <FontAwesomeIcon icon={faFilter} />
+              </div>
+            </IconButton>
+          </Tooltip>
+        </div>
+        <LogsSection
+          showFilters={showFilter}
+          filterClassName="bg-mineshaft-900 static"
+          presetActor={orgMembership.user.id}
+          isOrgAuditLogs
+        />
+      </div>
+    ) : !isLoading ? (
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <p className="text-lg font-semibold text-gray-200">Audit Logs</p>
+        </div>
+        <EmptyState
+          className="rounded-lg"
+          title={
+            <div>
+              <p>
+                Please{" "}
+                <Link
+                  href={
+                    subscription && subscription.slug !== null
+                      ? `/org/${orgMembership.organization}/billing`
+                      : "https://infisical.com/scheduledemo"
+                  }
+                  passHref
+                >
+                  <a
+                    className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
+                    target="_blank"
+                  >
+                    upgrade your subscription
+                  </a>
+                </Link>{" "}
+                to view audit logs for this user
+              </p>
+            </div>
+          }
+        />
+      </div>
+    ) : null;
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Member }
+);

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsRow.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { TGroupWithProjectMemberships } from "@app/hooks/api/groups/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  group: TGroupWithProjectMemberships;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void;
+};
+
+export const UserGroupsRow = ({ group, handlePopUpOpen }: Props) => {
+  return (
+    <>
+      <Tr
+        className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        key={`user-project-membership-${group.id}`}
+      >
+        <Td>{group.name}</Td>
+        <Td>
+          <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <Tooltip content="Unassign user from group">
+              <IconButton
+                colorSchema="danger"
+                ariaLabel="copy icon"
+                variant="plain"
+                className="group relative"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlePopUpOpen("removeUserFromGroup", {
+                    groupSlug: group.slug
+                  });
+                }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </IconButton>
+            </Tooltip>
+          </div>
+        </Td>
+      </Tr>
+    </>
+  );
+};

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsSection.tsx

@@ -0,0 +1,68 @@
+import { useCallback } from "react";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal } from "@app/components/v2";
+import { useRemoveUserFromGroup } from "@app/hooks/api";
+import { OrgUser } from "@app/hooks/api/users/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { UserGroupsTable } from "./UserGroupsTable";
+
+type Props = {
+  orgMembership: OrgUser;
+};
+
+export const UserGroupsSection = ({ orgMembership }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "removeUserFromGroup"
+  ] as const);
+
+  const { mutateAsync: removeUserFromGroup } = useRemoveUserFromGroup();
+
+  const handleRemoveUserFromGroup = useCallback(async (groupSlug: string) => {
+    try {
+      await removeUserFromGroup({
+        slug: groupSlug,
+        username: orgMembership.user.username
+      });
+
+      createNotification({
+        type: "success",
+        text: "User removed from group successfully"
+      });
+
+      handlePopUpClose("removeUserFromGroup");
+    } catch (error) {
+      createNotification({
+        type: "error",
+        text: "Failed to remove user from group"
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <h3 className="text-lg font-semibold text-mineshaft-100">Groups</h3>
+        </div>
+
+        <UserGroupsTable orgMembership={orgMembership} handlePopUpOpen={handlePopUpOpen} />
+      </div>
+
+      <DeleteActionModal
+        isOpen={popUp.removeUserFromGroup.isOpen}
+        title="Are you sure want to unassign user from group?"
+        onChange={(isOpen) => handlePopUpToggle("removeUserFromGroup", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const popupData = popUp?.removeUserFromGroup?.data as {
+            groupSlug: string;
+          };
+
+          return handleRemoveUserFromGroup(popupData.groupSlug);
+        }}
+      />
+    </>
+  );
+};

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx

@@ -0,0 +1,42 @@
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+
+import { EmptyState, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
+import { OrgUser } from "@app/hooks/api/types";
+import { useListUserGroupMemberships } from "@app/hooks/api/users/queries";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { UserGroupsRow } from "./UserGroupsRow";
+
+type Props = {
+  orgMembership: OrgUser;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void;
+};
+
+export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
+  const { data: groups, isLoading } = useListUserGroupMemberships(orgMembership.user.username);
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {groups?.map((group) => (
+            <UserGroupsRow
+              key={`user-group-${group.id}`}
+              group={group}
+              handlePopUpOpen={handlePopUpOpen}
+            />
+          ))}
+        </TBody>
+      </Table>
+      {!isLoading && !groups?.length && (
+        <EmptyState title="This user has not been assigned to any groups" icon={faFolder} />
+      )}
+    </TableContainer>
+  );
+};