fix(ui): set max height for user group card (#3177)

* fix(ui): set max height for user group card * [autofix.ci] apply automated fixes * update --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TabbyML · Sep 20, 2024 · 43c54a2 · 43c54a2
1 parent c03ee4e
commit 43c54a2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 40 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/settings/team/groups/components/membership-view.tsx b/ee/tabby-ui/app/(dashboard)/settings/team/groups/components/membership-view.tsx
@@ -68,19 +68,11 @@ interface MembershipViewProps extends HTMLAttributes<HTMLDivElement> {
   members: MemberShips
 }
 
-export function MembershipView({
-  className,
-  members: propsMembers
-}: MembershipViewProps) {
+export function MembershipView({ className, members }: MembershipViewProps) {
   const { isServerAdmin, isGroupAdmin } = useContext(UserGroupItemContext)
-  const [members, setMembers] = useState(propsMembers)
   const [emptyItemVisible, setEmptyItemVisible] = useState(false)
   const editable = isServerAdmin || isGroupAdmin
 
-  useEffect(() => {
-    setMembers(propsMembers)
-  }, [propsMembers])
-
   const handleAddMember = () => {
     if (!emptyItemVisible) {
       setEmptyItemVisible(true)
@@ -89,28 +81,30 @@ export function MembershipView({
 
   return (
     <div className={cn('flex flex-col gap-2 border-b px-1 py-2', className)}>
-      {members.length || emptyItemVisible ? (
-        <Table className="table-fixed">
-          <TableBody>
-            {members.map(member => {
-              return (
+      <div className="max-h-[286px] flex-1 overflow-auto">
+        {members.length || emptyItemVisible ? (
+          <Table className="table-fixed">
+            <TableBody>
+              {members.map(member => {
+                return (
+                  <MembershipItem
+                    key={member.user.id}
+                    member={member}
+                    onRemoveEmptyItem={() => setEmptyItemVisible(false)}
+                  />
+                )
+              })}
+              {emptyItemVisible && (
                 <MembershipItem
-                  key={member.user.id}
-                  member={member}
                   onRemoveEmptyItem={() => setEmptyItemVisible(false)}
                 />
-              )
-            })}
-            {emptyItemVisible && (
-              <MembershipItem
-                onRemoveEmptyItem={() => setEmptyItemVisible(false)}
-              />
-            )}
-          </TableBody>
-        </Table>
-      ) : (
-        <div className="p-3 pl-4 text-muted-foreground">No members</div>
-      )}
+              )}
+            </TableBody>
+          </Table>
+        ) : (
+          <div className="p-3 pl-4 text-muted-foreground">No members</div>
+        )}
+      </div>
       {editable && (
         <div className="mb-2 ml-2 flex justify-start">
           <Button
@@ -140,6 +134,7 @@ function MembershipItem({ member, onRemoveEmptyItem }: MembershipItemProps) {
   const { isServerAdmin, isGroupAdmin, memberIds, userGroupId } =
     useContext(UserGroupItemContext)
 
+  const trRef = useRef<HTMLTableRowElement>(null)
   const [role, setRole] = useState(
     !isServerAdmin ? '0' : memberIds.length ? '0' : '1'
   )
@@ -151,6 +146,14 @@ function MembershipItem({ member, onRemoveEmptyItem }: MembershipItemProps) {
     }
   }, [member])
 
+  useEffect(() => {
+    if (!member) {
+      trRef.current?.scrollIntoView({
+        behavior: 'smooth'
+      })
+    }
+  }, [])
+
   const deleteUserGroupMembership = useMutation(
     deleteUserGroupMembershipMutation
   )
@@ -242,7 +245,7 @@ function MembershipItem({ member, onRemoveEmptyItem }: MembershipItemProps) {
     isServerAdmin || (isGroupAdmin && (!member || !member.isGroupAdmin))
 
   return (
-    <TableRow className="border-0 !bg-background pl-1">
+    <TableRow className="border-0 !bg-background pl-1" ref={trRef}>
       <TableCell>
         <MemberSelect membership={member} onChange={onSelectMember} />
       </TableCell>

diff --git a/ee/tabby-ui/app/(dashboard)/settings/team/groups/components/user-group-page.tsx b/ee/tabby-ui/app/(dashboard)/settings/team/groups/components/user-group-page.tsx
@@ -46,7 +46,6 @@ export default function UserGroups() {
     reexcute()
   }
   const userGroups = data?.userGroups
-
   return (
     <UserGroupContext.Provider
       value={{
@@ -72,16 +71,6 @@ export default function UserGroups() {
       <LoadingWrapper loading={fetching} fallback={<ListSkeleton />}>
         {userGroups?.length ? (
           <div className="overflow-hidden rounded-lg border">
-            {/* <div className="flex items-center justify-between border-b bg-muted py-3 pl-4 pr-3 font-semibold">
-              Groups
-              {isAdmin && (
-                <CreateUserGroupDialog onSubmit={onCreateUserGroup}>
-                  <Button type="button" size="icon" variant="ghost">
-                    <IconPlus />
-                  </Button>
-                </CreateUserGroupDialog>
-              )}
-            </div> */}
             {userGroups.map((group, idx) => {
               return (
                 <UserGroupItem