From 7bd18a41bc3698f7831743174979ab9efc6c167f Mon Sep 17 00:00:00 2001
From: Meng Zhang <meng@tabbyml.com>
Date: Sun, 10 Dec 2023 16:07:10 +0800
Subject: [PATCH] feat(ui): adjust team page layout (#1007)

* feat(ui): display green check button after copy success

* feat(ui): set max width for getting started page

* feat(ui): adjust team management layout

* adjust team table layout
---
 .../components/create-invitation-form.tsx     |  2 +-
 .../team/components/invitation-table.tsx      | 22 +++++++++----------
 .../app/(dashboard)/team/components/team.tsx  |  7 +++---
 .../team/components/user-table.tsx            | 17 +++++++++-----
 ee/tabby-ui/components/copy-button.tsx        |  2 +-
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/ee/tabby-ui/app/(dashboard)/team/components/create-invitation-form.tsx b/ee/tabby-ui/app/(dashboard)/team/components/create-invitation-form.tsx
index d91607b..00f27c9 100644
--- a/ee/tabby-ui/app/(dashboard)/team/components/create-invitation-form.tsx
+++ b/ee/tabby-ui/app/(dashboard)/team/components/create-invitation-form.tsx
@@ -47,7 +47,7 @@ export default function CreateInvitationForm({
 
   return (
     <Form {...form}>
-      <div className="flex flex-col items-end gap-2">
+      <div className="flex flex-col items-start gap-2">
         <form
           className="flex w-full items-center gap-2"
           onSubmit={form.handleSubmit(onSubmit)}
diff --git a/ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx b/ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx
index 037a60d..994ee0d 100644
--- a/ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx
+++ b/ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx
@@ -54,23 +54,23 @@ export default function InvitationTable() {
   return (
     invitations && (
       <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Invitee</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead></TableHead>
-          </TableRow>
-        </TableHeader>
+        {invitations.length > 0 && (
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[25%]">Invitee</TableHead>
+              <TableHead className="w-[45%]">Created</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+        )}
         <TableBody>
           {invitations.map((x, i) => {
             const link = `${origin}/auth/signup?invitationCode=${x.code}`
             return (
               <TableRow key={i}>
-                <TableCell className="w-[300px] font-medium">
-                  {x.email}
-                </TableCell>
+                <TableCell>{x.email}</TableCell>
                 <TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell>
-                <TableCell className="flex items-center">
+                <TableCell>
                   <CopyButton value={link} />
                   <Button
                     size="icon"
diff --git a/ee/tabby-ui/app/(dashboard)/team/components/team.tsx b/ee/tabby-ui/app/(dashboard)/team/components/team.tsx
index b4546ac..6c6cfcc 100644
--- a/ee/tabby-ui/app/(dashboard)/team/components/team.tsx
+++ b/ee/tabby-ui/app/(dashboard)/team/components/team.tsx
@@ -7,18 +7,19 @@ import UsersTable from './user-table'
 
 export default function Team() {
   return (
-    <div className="xl:max-w-[750px]">
+    <div>
       <div>
         <CardHeader>
-          <CardTitle>Invites</CardTitle>
+          <CardTitle>Pending Invites</CardTitle>
         </CardHeader>
         <CardContent className="p-4">
           <InvitationTable />
         </CardContent>
       </div>
+      <div className="h-16" />
       <div>
         <CardHeader>
-          <CardTitle>Users</CardTitle>
+          <CardTitle>Members</CardTitle>
         </CardHeader>
         <CardContent className="p-4">
           <UsersTable />
diff --git a/ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx b/ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx
index d663183..c4fb986 100644
--- a/ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx
+++ b/ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx
@@ -5,6 +5,7 @@ import moment from 'moment'
 
 import { graphql } from '@/lib/gql/generates'
 import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
+import { Badge } from '@/components/ui/badge'
 import {
   Table,
   TableBody,
@@ -25,7 +26,7 @@ const listUsers = graphql(/* GraphQL */ `
 `)
 
 export default function UsersTable() {
-  const { data, mutate } = useAuthenticatedGraphQLQuery(listUsers)
+  const { data } = useAuthenticatedGraphQLQuery(listUsers)
   const users = data?.users
 
   return (
@@ -33,17 +34,23 @@ export default function UsersTable() {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Email</TableHead>
-            <TableHead>Joined</TableHead>
+            <TableHead className="w-[25%]">Email</TableHead>
+            <TableHead className="w-[45%]">Joined</TableHead>
             <TableHead>Role</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {users.map((x, i) => (
             <TableRow key={i}>
-              <TableCell className="w-[300px] font-medium">{x.email}</TableCell>
+              <TableCell>{x.email}</TableCell>
               <TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell>
-              <TableCell>{x.isAdmin ? 'Admin' : 'Member'}</TableCell>
+              <TableCell>
+                {x.isAdmin ? (
+                  <Badge>OWNER</Badge>
+                ) : (
+                  <Badge variant="secondary">MEMBER</Badge>
+                )}
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
diff --git a/ee/tabby-ui/components/copy-button.tsx b/ee/tabby-ui/components/copy-button.tsx
index a242bdb..11ce4ab 100644
--- a/ee/tabby-ui/components/copy-button.tsx
+++ b/ee/tabby-ui/components/copy-button.tsx
@@ -29,7 +29,7 @@ export function CopyButton({ className, value, ...props }: CopyButtonProps) {
       onClick={onCopy}
       {...props}
     >
-      {isCopied ? <IconCheck /> : <IconCopy />}
+      {isCopied ? <IconCheck className="text-green-600" /> : <IconCopy />}
       <span className="sr-only">Copy</span>
     </Button>
   )