Improve groups table

BrunoQuaresma · BrunoQuaresma · commit 9c9e9c0065b2 · 2022-09-27T19:51:23.000Z
diff --git a/site/src/components/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx
@@ -10,7 +10,7 @@ export interface UserAvatarProps {
 
 export const UserAvatar: FC<UserAvatarProps> = ({ username, className, avatarURL }) => {
   return (
-    <Avatar className={className}>
+    <Avatar className={className} title={username}>
       {avatarURL ? (
         <img alt={`${username}'s Avatar`} src={avatarURL} width="100%" />
       ) : (
diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx
@@ -11,9 +11,9 @@ import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
 import AvatarGroup from "@material-ui/lab/AvatarGroup"
 import { useMachine } from "@xstate/react"
+import { AvatarData } from "components/AvatarData/AvatarData"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { EmptyState } from "components/EmptyState/EmptyState"
-import { TableCellLink } from "components/TableCellLink/TableCellLink"
 import { TableLoader } from "components/TableLoader/TableLoader"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { useOrganizationId } from "hooks/useOrganizationId"
@@ -78,21 +78,30 @@ export const GroupsPage: React.FC = () => {
 
                   return (
                     <TableRow
-                      key={group.id}
                       hover
+                      key={group.id}
                       data-testid={`group-${group.id}`}
                       tabIndex={0}
+                      onClick={() => {
+                        navigate(groupPageLink)
+                      }}
                       onKeyDown={(event) => {
                         if (event.key === "Enter") {
                           navigate(groupPageLink)
                         }
                       }}
                       className={styles.clickableTableRow}
                     >
-                      <TableCellLink to={groupPageLink}>{group.name}</TableCellLink>
+                      <TableCell>
+                        <AvatarData
+                          title={group.name}
+                          subtitle={`${group.members.length} members`}
+                          highlightTitle
+                        />
+                      </TableCell>
 
                       <TableCell>
-                        {group.members.length === 0 && "No members"}
+                        {group.members.length === 0 && "-"}
                         <AvatarGroup>
                           {group.members.map((member) => (
                             <UserAvatar
@@ -104,11 +113,11 @@ export const GroupsPage: React.FC = () => {
                         </AvatarGroup>
                       </TableCell>
 
-                      <TableCellLink to={groupPageLink}>
+                      <TableCell>
                         <div className={styles.arrowCell}>
                           <KeyboardArrowRight className={styles.arrowRight} />
                         </div>
-                      </TableCellLink>
+                      </TableCell>
                     </TableRow>
                   )
                 })}
@@ -123,6 +132,8 @@ export const GroupsPage: React.FC = () => {
 
 const useStyles = makeStyles((theme) => ({
   clickableTableRow: {
+    cursor: "pointer",
+
     "&:hover td": {
       backgroundColor: theme.palette.action.hover,
     },
