feature: project group details page

2026-10-20 10:23:57 +00:00 · 2025-06-05 19:17:46 -07:00
parent ce170a6a47
commit 4c22024d13
27 changed files with 1176 additions and 45 deletions
@@ -3,6 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { faCheck, faClock, faEdit, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { PopperContentProps } from "@radix-ui/react-popper";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";

@@ -196,12 +197,20 @@ type TForm = z.infer<typeof formSchema>;
 export type TMemberRolesProp = {
  disableEdit?: boolean;
  groupId: string;
+  className?: string;
  roles: TGroupMembership["roles"];
+  popperContentProps?: PopperContentProps;
 };

 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;

-export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMemberRolesProp) => {
+export const GroupRoles = ({
+  roles = [],
+  disableEdit = false,
+  groupId,
+  className,
+  popperContentProps
+}: TMemberRolesProp) => {
  const { currentWorkspace } = useWorkspace();
  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
  const [searchRoles, setSearchRoles] = useState("");
@@ -209,7 +218,6 @@ export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMember
  const {
    handleSubmit,
    control,
-    reset,
    setValue,
    formState: { isSubmitting, isDirty }
  } = useForm<TForm>({
@@ -261,7 +269,7 @@ export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMember
  };

  return (
-    <div className="flex items-center space-x-2">
+    <div className={twMerge("flex items-center space-x-1", className)}>
      {roles
        .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
        .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
@@ -325,17 +333,21 @@ export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMember
          open={popUp.editRole.isOpen}
          onOpenChange={(isOpen) => {
            handlePopUpToggle("editRole", isOpen);
-            reset();
          }}
        >
          {!disableEdit && (
-            <PopoverTrigger>
+            <PopoverTrigger onClick={(e) => e.stopPropagation()}>
              <IconButton size="sm" variant="plain" ariaLabel="update">
                <FontAwesomeIcon icon={faEdit} />
              </IconButton>
            </PopoverTrigger>
          )}
-          <PopoverContent hideCloseBtn className="pt-4">
+          <PopoverContent
+            {...popperContentProps}
+            onClick={(e) => e.stopPropagation()}
+            hideCloseBtn
+            className="pt-4"
+          >
            {isRolesLoading ? (
              <div className="flex h-8 w-full items-center justify-center">
                <Spinner />
@@ -8,6 +8,7 @@ import {
  faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";

 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -55,6 +56,7 @@ enum GroupsOrderBy {

 export const GroupTable = ({ handlePopUpOpen }: Props) => {
  const { currentWorkspace } = useWorkspace();
+  const navigate = useNavigate();

  const {
    search,
@@ -143,7 +145,32 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                .slice(offset, perPage * page)
                .map(({ group: { id, name }, roles, createdAt }) => {
                  return (
-                    <Tr className="group h-10" key={`st-v3-${id}`}>
+                    <Tr
+                      className="group h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      key={`st-v3-${id}`}
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(evt) => {
+                        if (evt.key === "Enter") {
+                          navigate({
+                            to: `/${currentWorkspace.type}/$projectId/groups/$groupId` as const,
+                            params: {
+                              projectId: currentWorkspace.id,
+                              groupId: id
+                            }
+                          });
+                        }
+                      }}
+                      onClick={() =>
+                        navigate({
+                          to: `/${currentWorkspace.type}/$projectId/groups/$groupId` as const,
+                          params: {
+                            projectId: currentWorkspace.id,
+                            groupId: id
+                          }
+                        })
+                      }
+                    >
                      <Td>{name}</Td>
                      <Td>
                        <ProjectPermissionCan
@@ -165,7 +192,8 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                              <Tooltip content="Remove">
                                <IconButton
-                                  onClick={() => {
+                                  onClick={(e) => {
+                                    e.stopPropagation();
                                    handlePopUpOpen("deleteGroup", {
                                      id,
                                      name