- {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< pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: