feat: renamed old frontend and fixed some minor bugs

2026-10-21 11:28:43 +00:00 · 2025-01-06 14:56:49 +05:30
parent 8c902d7699
commit 54377a44d3
2577 changed files with 35240 additions and 35116 deletions
@@ -0,0 +1,90 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { useRemoveUserFromGroup } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddGroupMembersModal } from "../AddGroupMemberModal";
+import { GroupMembersTable } from "./GroupMembersTable";
+
+type Props = {
+  groupId: string;
+  groupSlug: string;
+};
+
+export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "addGroupMembers",
+    "removeMemberFromGroup"
+  ] as const);
+
+  const { mutateAsync: removeUserFromGroupMutateAsync } = useRemoveUserFromGroup();
+  const handleRemoveUserFromGroup = async (username: string) => {
+    try {
+      await removeUserFromGroupMutateAsync({
+        groupId,
+        username,
+        slug: groupSlug
+      });
+
+      createNotification({
+        text: `Successfully removed user ${username} from the group`,
+        type: "success"
+      });
+
+      handlePopUpToggle("removeMemberFromGroup", false);
+    } catch {
+      createNotification({
+        text: `Failed to remove user ${username} from the group`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Group Members</h3>
+        <IconButton
+          ariaLabel="copy icon"
+          variant="plain"
+          className="group relative"
+          onClick={() => {
+            handlePopUpOpen("addGroupMembers", {
+              groupId,
+              slug: groupSlug
+            });
+          }}
+        >
+          <FontAwesomeIcon icon={faPlus} />
+        </IconButton>
+      </div>
+      <div className="py-4">
+        <GroupMembersTable
+          groupId={groupId}
+          groupSlug={groupSlug}
+          handlePopUpOpen={handlePopUpOpen}
+        />
+      </div>
+      <AddGroupMembersModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.removeMemberFromGroup.isOpen}
+        title={`Are you sure want to remove ${
+          (popUp?.removeMemberFromGroup?.data as { username: string })?.username || ""
+        } from the group?`}
+        onChange={(isOpen) => handlePopUpToggle("removeMemberFromGroup", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const userData = popUp?.removeMemberFromGroup?.data as {
+            username: string;
+            id: string;
+          };
+
+          return handleRemoveUserFromGroup(userData.username);
+        }}
+      />
+    </div>
+  );
+};
@@ -0,0 +1,195 @@
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faFolder,
+  faMagnifyingGlass,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useListGroupUsers } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { EFilterReturnedUsers } from "@app/hooks/api/groups/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { GroupMembershipRow } from "./GroupMembershipRow";
+
+type Props = {
+  groupId: string;
+  groupSlug: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeMemberFromGroup", "addGroupMembers"]>,
+    data?: object
+  ) => void;
+};
+
+enum GroupMembersOrderBy {
+  Name = "name"
+}
+
+export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props) => {
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    toggleOrderDirection
+  } = usePagination(GroupMembersOrderBy.Name, { initPerPage: 10 });
+
+  const { data: groupMemberships, isPending } = useListGroupUsers({
+    id: groupId,
+    groupSlug,
+    offset,
+    limit: perPage,
+    search,
+    filter: EFilterReturnedUsers.EXISTING_MEMBERS
+  });
+
+  const filteredGroupMemberships = useMemo(() => {
+    return groupMemberships && groupMemberships?.users
+      ? groupMemberships?.users
+          ?.filter((membership) => {
+            const userSearchString = `${membership.firstName && membership.firstName} ${
+              membership.lastName && membership.lastName
+            } ${membership.email && membership.email} ${
+              membership.username && membership.username
+            }`;
+            return userSearchString.toLowerCase().includes(search.trim().toLowerCase());
+          })
+          .sort((a, b) => {
+            const [membershipOne, membershipTwo] =
+              orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+            const membershipOneComparisonString = membershipOne.firstName
+              ? membershipOne.firstName
+              : membershipOne.email;
+
+            const membershipTwoComparisonString = membershipTwo.firstName
+              ? membershipTwo.firstName
+              : membershipTwo.email;
+
+            const comparison = membershipOneComparisonString
+              .toLowerCase()
+              .localeCompare(membershipTwoComparisonString.toLowerCase());
+
+            return comparison;
+          })
+      : [];
+  }, [groupMemberships, orderDirection, search]);
+
+  useResetPageHelper({
+    totalCount: filteredGroupMemberships?.length,
+    offset,
+    setPage
+  });
+
+  return (
+    <div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search users..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className="ml-2"
+                    ariaLabel="sort"
+                    onClick={toggleOrderDirection}
+                  >
+                    <FontAwesomeIcon
+                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>Email</Th>
+              <Th>Added On</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={4} innerKey="group-user-memberships" />}
+            {!isPending &&
+              filteredGroupMemberships.slice(offset, perPage * page).map((userGroupMembership) => {
+                return (
+                  <GroupMembershipRow
+                    key={`user-group-membership-${userGroupMembership.id}`}
+                    user={userGroupMembership}
+                    handlePopUpOpen={handlePopUpOpen}
+                  />
+                );
+              })}
+          </TBody>
+        </Table>
+        {Boolean(filteredGroupMemberships.length) && (
+          <Pagination
+            count={filteredGroupMemberships.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={setPerPage}
+          />
+        )}
+        {!isPending && !filteredGroupMemberships?.length && (
+          <EmptyState
+            title={
+              groupMemberships?.users.length
+                ? "No users match this search..."
+                : "This group does not have any members yet"
+            }
+            icon={groupMemberships?.users.length ? faSearch : faFolder}
+          />
+        )}
+        {!groupMemberships?.users.length && (
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+            {(isAllowed) => (
+              <div className="mb-4 flex items-center justify-center">
+                <Button
+                  isDisabled={!isAllowed}
+                  onClick={() => {
+                    handlePopUpOpen("addGroupMembers", {
+                      groupId,
+                      slug: groupSlug
+                    });
+                  }}
+                >
+                  Add members
+                </Button>
+              </div>
+            )}
+          </OrgPermissionCan>
+        )}
+      </TableContainer>
+    </div>
+  );
+};
@@ -0,0 +1,56 @@
+import { faUserMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { TGroupUser } from "@app/hooks/api/groups/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  user: TGroupUser;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeMemberFromGroup"]>,
+    data?: object
+  ) => void;
+};
+
+export const GroupMembershipRow = ({
+  user: { firstName, lastName, username, joinedGroupAt, email, id },
+  handlePopUpOpen
+}: Props) => {
+  return (
+    <Tr className="items-center" key={`group-user-${id}`}>
+      <Td>
+        <p>{`${firstName ?? "-"} ${lastName ?? ""}`}</p>
+      </Td>
+      <Td>
+        <p>{email}</p>
+      </Td>
+      <Td>
+        <Tooltip content={new Date(joinedGroupAt).toLocaleString()}>
+          <p>{new Date(joinedGroupAt).toLocaleDateString()}</p>
+        </Tooltip>
+      </Td>
+      <Td className="justify-end">
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Remove user from group">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="Remove user from group"
+                  onClick={() => handlePopUpOpen("removeMemberFromGroup", { username })}
+                  variant="plain"
+                  colorSchema="danger"
+                >
+                  <FontAwesomeIcon icon={faUserMinus} className="cursor-pointer" />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </Td>
+    </Tr>
+  );
+};
@@ -0,0 +1 @@
+export { GroupMembersSection } from "./GroupMembersSection";
				`@@ -0,0 +1 @@`
				`export { GroupMembersSection } from "./GroupMembersSection";`