From 91ebf24595bbb618ffead0769ae269bebdd60bcc Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 2 Apr 2025 16:46:39 +0000 Subject: [PATCH 1/2] refactor: update avatar sizes in groups, users and members --- site/src/components/Avatar/Avatar.tsx | 6 +- site/src/components/Avatar/AvatarData.tsx | 8 +- .../components/Avatar/AvatarDataSkeleton.tsx | 2 +- site/src/components/LastSeen/LastSeen.tsx | 10 +- site/src/components/Table/Table.tsx | 4 +- site/src/pages/GroupsPage/GroupPage.tsx | 8 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 38 +++--- .../OrganizationMembersPageView.tsx | 109 ++++++++++-------- .../UsersPage/UsersTable/UsersTableBody.tsx | 4 +- 9 files changed, 109 insertions(+), 80 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 46316950c80b6..8661dceda0f6a 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -22,9 +22,9 @@ const avatarVariants = cva( { variants: { size: { - lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium", - md: "h-[--avatar-default] w-[--avatar-default] text-2xs", - sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]", + lg: "size-[--avatar-lg] rounded-[6px] text-sm font-medium", + md: "size-[--avatar-default] text-2xs", + sm: "size-[--avatar-sm] text-[8px]", }, variant: { default: null, diff --git a/site/src/components/Avatar/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx index 5eda0e326d24b..8f55e1e7ae39b 100644 --- a/site/src/components/Avatar/AvatarData.tsx +++ b/site/src/components/Avatar/AvatarData.tsx @@ -1,6 +1,4 @@ -import { useTheme } from "@emotion/react"; import { Avatar } from "components/Avatar/Avatar"; -import { Stack } from "components/Stack/Stack"; import type { FC, ReactNode } from "react"; export interface AvatarDataProps { @@ -26,10 +24,10 @@ export const AvatarData: FC = ({ imgFallbackText, avatar, }) => { - const theme = useTheme(); if (!avatar) { avatar = ( @@ -41,7 +39,9 @@ export const AvatarData: FC = ({ {avatar}
- {title} + + {title} + {subtitle && ( {subtitle} diff --git a/site/src/components/Avatar/AvatarDataSkeleton.tsx b/site/src/components/Avatar/AvatarDataSkeleton.tsx index 13083ce8b02e3..5aa18fdcbc2b0 100644 --- a/site/src/components/Avatar/AvatarDataSkeleton.tsx +++ b/site/src/components/Avatar/AvatarDataSkeleton.tsx @@ -5,7 +5,7 @@ import type { FC } from "react"; export const AvatarDataSkeleton: FC = () => { return (
- +
diff --git a/site/src/components/LastSeen/LastSeen.tsx b/site/src/components/LastSeen/LastSeen.tsx index 61510319a1208..081e3ae624fa4 100644 --- a/site/src/components/LastSeen/LastSeen.tsx +++ b/site/src/components/LastSeen/LastSeen.tsx @@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import type { FC, HTMLAttributes } from "react"; +import { cn } from "utils/cn"; dayjs.extend(relativeTime); @@ -11,7 +12,7 @@ interface LastSeenProps "data-chromatic"?: string; // prevents a type error in the stories } -export const LastSeen: FC = ({ at, ...attrs }) => { +export const LastSeen: FC = ({ at, className, ...attrs }) => { const theme = useTheme(); const t = dayjs(at); const now = dayjs(); @@ -35,7 +36,12 @@ export const LastSeen: FC = ({ at, ...attrs }) => { } return ( - + {message} ); diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx index 604fc3d4f4196..269248207c39b 100644 --- a/site/src/components/Table/Table.tsx +++ b/site/src/components/Table/Table.tsx @@ -82,7 +82,7 @@ export const TableHead = React.forwardRef< [role=checkbox]]:translate-y-[2px]", className, )} @@ -98,7 +98,7 @@ export const TableCell = React.forwardRef< ref={ref} className={cn( "border-0 border-t border-border border-solid", - "py-2 px-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", + "p-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className, )} {...props} diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index f723f48a4b211..8dbd5d3f8fb31 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -310,7 +310,13 @@ const GroupMemberRow: FC = ({ } + avatar={ + + } title={member.username} subtitle={member.email} /> diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 3ca28c31f59bf..4d5f70bfae6c7 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -1,12 +1,12 @@ import type { Interpolation, Theme } from "@emotion/react"; import AddOutlined from "@mui/icons-material/AddOutlined"; import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"; -import AvatarGroup from "@mui/material/AvatarGroup"; import Skeleton from "@mui/material/Skeleton"; import type { Group } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; +import { Badge } from "components/Badge/Badge"; import { Button } from "components/Button/Button"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; @@ -115,6 +115,8 @@ const GroupRow: FC = ({ group }) => { const rowProps = useClickableTableRow({ onClick: () => navigate(group.name), }); + const memberAvatars = group.members.slice(0, 5); + const remainingAvatars = group.members.length - memberAvatars.length; return ( @@ -122,6 +124,8 @@ const GroupRow: FC = ({ group }) => { @@ -132,20 +136,24 @@ const GroupRow: FC = ({ group }) => { - {group.members.length === 0 && "-"} - - {group.members.map((member) => ( - - ))} - + {group.members.length > 0 ? ( +
+ {memberAvatars.map((member) => ( + + ))} + {remainingAvatars > 0 && ( + + +{remainingAvatars} + + )} +
+ ) : ( + "-" + )} diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx index c21b6fbd4dca7..56812d9a98c6e 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx @@ -39,6 +39,8 @@ import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; import { type FC, useState } from "react"; import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip"; import { UserRoleCell } from "./UserTable/UserRoleCell"; +import { TableLoader } from "components/TableLoader/TableLoader"; +import { Loader } from "components/Loader/Loader"; interface OrganizationMembersPageViewProps { allAvailableRoles: readonly SlimRole[] | undefined; @@ -125,58 +127,67 @@ export const OrganizationMembersPageView: FC< - {members?.map((member) => ( - - - - } - title={member.name || member.username} - subtitle={member.email} + {members ? ( + members.map((member) => ( + + + + } + title={member.name || member.username} + subtitle={member.email} + /> + + { + try { + await updateMemberRoles(member, roles); + displaySuccess("Roles updated successfully."); + } catch (error) { + displayError( + getErrorMessage(error, "Failed to update roles."), + ); + } + }} /> - - { - try { - await updateMemberRoles(member, roles); - displaySuccess("Roles updated successfully."); - } catch (error) { - displayError( - getErrorMessage(error, "Failed to update roles."), - ); - } - }} - /> - - - {member.user_id !== me.id && canEditMembers && ( - - - - - - removeMember(member)} - > - Remove - - - - )} + + + {member.user_id !== me.id && canEditMembers && ( + + + + + + removeMember(member)} + > + Remove + + + + )} + + + )) + ) : ( + + + - ))} + )} diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index 8e447b8c05a4e..f746b35aba75f 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -87,9 +87,7 @@ export const UsersTableBody: FC = ({ -
- -
+ From 7451b41b34ae43f4c5cacad1420d7ca99bff1220 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 4 Apr 2025 13:02:14 +0000 Subject: [PATCH 2/2] Fix --- .../OrganizationSettingsPage/OrganizationMembersPageView.tsx | 4 ++-- .../TemplatePermissionsPage/TemplatePermissionsPageView.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx index 56812d9a98c6e..d0bb441a1ed25 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx @@ -11,6 +11,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; +import { Loader } from "components/Loader/Loader"; import { MoreMenu, MoreMenuContent, @@ -32,6 +33,7 @@ import { TableHeader, TableRow, } from "components/Table/Table"; +import { TableLoader } from "components/TableLoader/TableLoader"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; import type { PaginationResultInfo } from "hooks/usePaginatedQuery"; import { TriangleAlert } from "lucide-react"; @@ -39,8 +41,6 @@ import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; import { type FC, useState } from "react"; import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip"; import { UserRoleCell } from "./UserTable/UserRoleCell"; -import { TableLoader } from "components/TableLoader/TableLoader"; -import { Loader } from "components/Loader/Loader"; interface OrganizationMembersPageViewProps { allAvailableRoles: readonly SlimRole[] | undefined; diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index 33f1b227e0af2..46f62e10c1601 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -258,6 +258,7 @@ export const TemplatePermissionsPageView: FC<