From dbf1eb963e244a6d6d26cd364786b0f9b9ba07ee Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 09:23:20 +0000 Subject: [PATCH 01/29] Add avatarLetters utility --- site/src/components/Avatar/Avatar.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 54807455dd030..1ee9942386f85 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -91,4 +91,12 @@ const AvatarFallback = React.forwardRef< )); AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; -export { Avatar, AvatarImage, AvatarFallback }; +function avatarLetters(str: string): string { + const words = str.split(" "); + if (words.length === 1) { + return words[0].charAt(0).toUpperCase(); + } + return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase(); +} + +export { Avatar, AvatarImage, AvatarFallback, avatarLetters }; From 8f24c9e779d185fba9bfd425cae8373f28087e81 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 09:25:16 +0000 Subject: [PATCH 02/29] Fix avatar for non squared icon --- site/src/components/Avatar/Avatar.stories.tsx | 7 +++++++ site/src/components/Avatar/Avatar.tsx | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx index c1e2f590a91d3..2f140e0efd6af 100644 --- a/site/src/components/Avatar/Avatar.stories.tsx +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -51,6 +51,13 @@ export const IconSmSize: Story = { }, }; +export const NonSquaredIcon: Story = { + args: { + variant: "icon", + children: , + }, +}; + export const FallbackLgSize: Story = { args: { size: "lg", diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 1ee9942386f85..09f32429b2235 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -70,7 +70,7 @@ const AvatarImage = React.forwardRef< >(({ className, ...props }, ref) => ( )); From e689d42ad9b0d54a3de51b1ed2145f72579a33b7 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 09:25:28 +0000 Subject: [PATCH 03/29] Replace avatar o template menu --- .../TemplateAvatar/TemplateAvatar.tsx | 18 ------------- .../src/pages/WorkspacesPage/filter/menus.tsx | 25 ++++++++++++++++--- 2 files changed, 21 insertions(+), 22 deletions(-) delete mode 100644 site/src/components/TemplateAvatar/TemplateAvatar.tsx diff --git a/site/src/components/TemplateAvatar/TemplateAvatar.tsx b/site/src/components/TemplateAvatar/TemplateAvatar.tsx deleted file mode 100644 index dc0017f459b19..0000000000000 --- a/site/src/components/TemplateAvatar/TemplateAvatar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { Template } from "api/typesGenerated"; -import { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; -import type { FC } from "react"; - -interface TemplateAvatarProps extends AvatarProps { - template: Template; -} - -export const TemplateAvatar: FC = ({ - template, - ...avatarProps -}) => { - return template.icon ? ( - - ) : ( - {template.display_name || template.name} - ); -}; diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx index 7a2d79c606e1f..4c41b037989fa 100644 --- a/site/src/pages/WorkspacesPage/filter/menus.tsx +++ b/site/src/pages/WorkspacesPage/filter/menus.tsx @@ -1,5 +1,12 @@ import { API } from "api/api"; -import type { WorkspaceStatus } from "api/typesGenerated"; +import type { Template, WorkspaceStatus } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + AvatarProps, + avatarLetters, +} from "components/Avatar/Avatar"; import { SelectFilter, type SelectFilterOption, @@ -10,7 +17,6 @@ import { useFilterMenu, } from "components/Filter/menu"; import { StatusIndicator } from "components/StatusIndicator/StatusIndicator"; -import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar"; import type { FC } from "react"; import { getDisplayWorkspaceStatus } from "utils/workspace"; @@ -30,7 +36,7 @@ export const useTemplateFilterMenu = ({ return { label: template.display_name || template.name, value: template.name, - startIcon: , + startIcon: , } satisfies SelectFilterOption; } return null; @@ -46,12 +52,23 @@ export const useTemplateFilterMenu = ({ return filteredTemplates.map((template) => ({ label: template.display_name || template.name, value: template.name, - startIcon: , + startIcon: , })); }, }); }; +const TemplateAvatar: FC<{ template: Template }> = ({ template }) => { + return ( + + + + {avatarLetters(template.display_name || template.name)} + + + ); +}; + export type TemplateFilterMenu = ReturnType; type TemplateMenuProps = Readonly<{ From 6f8c280ee524e61293aafdc95fb60518ee738e51 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 09:26:58 +0000 Subject: [PATCH 04/29] Move UserAvatar to modules/users --- site/src/components/Filter/SelectFilter.stories.tsx | 2 +- site/src/components/Filter/UserFilter.tsx | 2 +- site/src/components/SelectMenu/SelectMenu.stories.tsx | 2 +- site/src/components/Sidebar/Sidebar.stories.tsx | 2 +- site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx | 2 +- site/src/modules/management/SidebarView.tsx | 2 +- site/src/modules/tableFiltering/options.tsx | 2 +- .../users}/UserAvatar/UserAvatar.stories.tsx | 0 .../src/{components => modules/users}/UserAvatar/UserAvatar.tsx | 0 site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx | 2 +- site/src/pages/GroupsPage/GroupPage.tsx | 2 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 2 +- site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx | 2 +- .../pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx | 2 +- .../ManagementSettingsPage/OrganizationMembersPageView.tsx | 2 +- .../ManagementSettingsPage/OrganizationSummaryPageView.tsx | 2 +- .../TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx | 2 +- site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx | 2 +- site/src/pages/TemplatesPage/TemplatesFilter.tsx | 2 +- site/src/pages/UserSettingsPage/Sidebar.tsx | 2 +- site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 2 +- 21 files changed, 19 insertions(+), 19 deletions(-) rename site/src/{components => modules/users}/UserAvatar/UserAvatar.stories.tsx (100%) rename site/src/{components => modules/users}/UserAvatar/UserAvatar.tsx (100%) diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx index ff90bdaa273b3..c5f2230169d7a 100644 --- a/site/src/components/Filter/SelectFilter.stories.tsx +++ b/site/src/components/Filter/SelectFilter.stories.tsx @@ -1,7 +1,7 @@ import { action } from "@storybook/addon-actions"; import type { Meta, StoryObj } from "@storybook/react"; import { expect, userEvent, within } from "@storybook/test"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { useState } from "react"; import { withDesktopViewport } from "testHelpers/storybook"; import { diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx index 015bc3d71d439..705f3ecc25fc8 100644 --- a/site/src/components/Filter/UserFilter.tsx +++ b/site/src/components/Filter/UserFilter.tsx @@ -4,8 +4,8 @@ import { type SelectFilterOption, SelectFilterSearch, } from "components/Filter/SelectFilter"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useAuthenticated } from "contexts/auth/RequireAuth"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; import { type UseFilterMenuOptions, useFilterMenu } from "./menu"; diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx index cae38693899d1..81b4d0f14b0b3 100644 --- a/site/src/components/SelectMenu/SelectMenu.stories.tsx +++ b/site/src/components/SelectMenu/SelectMenu.stories.tsx @@ -1,7 +1,7 @@ import { action } from "@storybook/addon-actions"; import type { Meta, StoryObj } from "@storybook/react"; import { userEvent, within } from "@storybook/test"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { withDesktopViewport } from "testHelpers/storybook"; import { SelectMenu, diff --git a/site/src/components/Sidebar/Sidebar.stories.tsx b/site/src/components/Sidebar/Sidebar.stories.tsx index 580d5d59b5be9..70884f6d91825 100644 --- a/site/src/components/Sidebar/Sidebar.stories.tsx +++ b/site/src/components/Sidebar/Sidebar.stories.tsx @@ -4,7 +4,7 @@ import SecurityIcon from "@mui/icons-material/LockOutlined"; import AccountIcon from "@mui/icons-material/Person"; import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined"; import type { Meta, StoryObj } from "@storybook/react"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar"; const meta: Meta = { diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx index ea44a4f3dfcb3..6fc0bd1772940 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -7,7 +7,7 @@ import { PopoverContent, PopoverTrigger, } from "components/Popover/Popover"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants"; import { UserDropdownContent } from "./UserDropdownContent"; diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx index d63dcca388b8e..2d743bc5773fc 100644 --- a/site/src/modules/management/SidebarView.tsx +++ b/site/src/modules/management/SidebarView.tsx @@ -7,11 +7,11 @@ import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadg import { Loader } from "components/Loader/Loader"; import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar"; import { Stack } from "components/Stack/Stack"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import type { Permissions } from "contexts/auth/permissions"; import { type ClassName, useClassName } from "hooks/useClassName"; import { useDashboard } from "modules/dashboard/useDashboard"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC, ReactNode } from "react"; import { Link, NavLink } from "react-router-dom"; diff --git a/site/src/modules/tableFiltering/options.tsx b/site/src/modules/tableFiltering/options.tsx index f6f98770f4a71..c067ccf251e6e 100644 --- a/site/src/modules/tableFiltering/options.tsx +++ b/site/src/modules/tableFiltering/options.tsx @@ -17,7 +17,7 @@ import { type UseFilterMenuOptions, useFilterMenu, } from "components/Filter/menu"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; // Organization helpers //////////////////////////////////////////////////////// diff --git a/site/src/components/UserAvatar/UserAvatar.stories.tsx b/site/src/modules/users/UserAvatar/UserAvatar.stories.tsx similarity index 100% rename from site/src/components/UserAvatar/UserAvatar.stories.tsx rename to site/src/modules/users/UserAvatar/UserAvatar.stories.tsx diff --git a/site/src/components/UserAvatar/UserAvatar.tsx b/site/src/modules/users/UserAvatar/UserAvatar.tsx similarity index 100% rename from site/src/components/UserAvatar/UserAvatar.tsx rename to site/src/modules/users/UserAvatar/UserAvatar.tsx diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx index b6dfbd4d334e2..b6575c9992a8c 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx @@ -9,7 +9,7 @@ import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { Link as RouterLink } from "react-router-dom"; import type { ThemeRole } from "theme/roles"; diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 1244118aa3840..9492c501e2186 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -45,7 +45,7 @@ import { TableToolbar, } from "components/TableToolbar/TableToolbar"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 8c9f1f8e46601..314c6a96782d4 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -21,7 +21,7 @@ import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router-dom"; import { docs } from "utils/docs"; diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx index 42251f5d5965f..b7d45b360e963 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx @@ -44,7 +44,7 @@ import { TableToolbar, } from "components/TableToolbar/TableToolbar"; import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx index 65e565d75133e..95df7e73cd9e9 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx @@ -21,8 +21,8 @@ import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useClickableTableRow } from "hooks"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router-dom"; import { docs } from "utils/docs"; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index 36002c605e04b..98be00cb858e9 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -28,7 +28,7 @@ import { import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; import { type FC, useState } from "react"; import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip"; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx index 3c37499f34375..8462ffcc704dc 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx @@ -5,7 +5,7 @@ import { PageHeaderTitle, } from "components/PageHeader/PageHeader"; import { Stack } from "components/Stack/Stack"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; interface OrganizationSummaryPageViewProps { diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx index f205194a1aded..f420d9568c598 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx @@ -35,7 +35,6 @@ import { } from "components/HelpTooltip/HelpTooltip"; import { Loader } from "components/Loader/Loader"; import { Stack } from "components/Stack/Stack"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { addHours, addWeeks, @@ -45,6 +44,7 @@ import { subDays, } from "date-fns"; import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout"; import { type FC, diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx index f2cf6bd695fe2..6aa26ad497c90 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx @@ -6,8 +6,8 @@ import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; import { useNavigate } from "react-router-dom"; diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx index 8edf3da5cccf7..998367aecc06f 100644 --- a/site/src/pages/TemplatesPage/TemplatesFilter.tsx +++ b/site/src/pages/TemplatesPage/TemplatesFilter.tsx @@ -6,7 +6,7 @@ import { type SelectFilterOption, } from "components/Filter/SelectFilter"; import { useFilterMenu } from "components/Filter/menu"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; interface TemplatesFilterProps { diff --git a/site/src/pages/UserSettingsPage/Sidebar.tsx b/site/src/pages/UserSettingsPage/Sidebar.tsx index 196f34d5ce0e1..b110857b029e2 100644 --- a/site/src/pages/UserSettingsPage/Sidebar.tsx +++ b/site/src/pages/UserSettingsPage/Sidebar.tsx @@ -13,8 +13,8 @@ import { SidebarHeader, SidebarNavItem, } from "components/Sidebar/Sidebar"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useDashboard } from "modules/dashboard/useDashboard"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; interface SidebarProps { diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 25d1b0e7a9fab..0a6bfbd28e328 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -17,10 +17,10 @@ import { } from "components/FullPageLayout/Topbar"; import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip"; import { Popover, PopoverTrigger } from "components/Popover/Popover"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { useDashboard } from "modules/dashboard/useDashboard"; import { linkToTemplate, useLinks } from "modules/navigation"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge"; import type { FC } from "react"; import { useQuery } from "react-query"; From e72cecb6daa37e7aa199194b537d5ede4d144059 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 10:45:47 +0000 Subject: [PATCH 05/29] Only use one letter on fallback to simplify changes --- site/src/components/Avatar/Avatar.tsx | 10 +++------- site/src/pages/WorkspacesPage/filter/menus.tsx | 5 ++--- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 09f32429b2235..6fafb47ee9611 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -91,12 +91,8 @@ const AvatarFallback = React.forwardRef< )); AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; -function avatarLetters(str: string): string { - const words = str.split(" "); - if (words.length === 1) { - return words[0].charAt(0).toUpperCase(); - } - return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase(); +function avatarLetter(str: string): string { + return str.charAt(0).toUpperCase(); } -export { Avatar, AvatarImage, AvatarFallback, avatarLetters }; +export { Avatar, AvatarImage, AvatarFallback, avatarLetter }; diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx index 4c41b037989fa..97916443252dc 100644 --- a/site/src/pages/WorkspacesPage/filter/menus.tsx +++ b/site/src/pages/WorkspacesPage/filter/menus.tsx @@ -4,8 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage, - AvatarProps, - avatarLetters, + avatarLetter, } from "components/Avatar/Avatar"; import { SelectFilter, @@ -63,7 +62,7 @@ const TemplateAvatar: FC<{ template: Template }> = ({ template }) => { - {avatarLetters(template.display_name || template.name)} + {avatarLetter(template.display_name || template.name)} ); From 758f240cccbbf018e7df0fded141176d77838679 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 10:48:21 +0000 Subject: [PATCH 06/29] Refactor UserAvatar to user the new Avatar component --- .../components/Filter/SelectFilter.stories.tsx | 2 +- site/src/components/Filter/UserFilter.tsx | 8 ++++---- .../SelectMenu/SelectMenu.stories.tsx | 10 +++++----- site/src/modules/tableFiltering/options.tsx | 4 ++-- .../modules/users/UserAvatar/UserAvatar.tsx | 18 +++++++++++++----- .../pages/TemplatesPage/TemplatesFilter.tsx | 2 +- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 8 ++++++-- 7 files changed, 32 insertions(+), 20 deletions(-) diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx index c5f2230169d7a..dc5e328563c89 100644 --- a/site/src/components/Filter/SelectFilter.stories.tsx +++ b/site/src/components/Filter/SelectFilter.stories.tsx @@ -11,7 +11,7 @@ import { } from "./SelectFilter"; const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({ - startIcon: , + startIcon: , label: `Option ${i + 1}`, value: `option-${i + 1}`, })); diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx index 705f3ecc25fc8..fe7bbfb9618bb 100644 --- a/site/src/components/Filter/UserFilter.tsx +++ b/site/src/components/Filter/UserFilter.tsx @@ -26,7 +26,7 @@ export const useUserFilterMenu = ({ ), }, @@ -48,7 +48,7 @@ export const useUserFilterMenu = ({ ), }; @@ -64,7 +64,7 @@ export const useUserFilterMenu = ({ ), }; @@ -80,7 +80,7 @@ export const useUserFilterMenu = ({ ), })); diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx index 81b4d0f14b0b3..3ff2d4b0cfde7 100644 --- a/site/src/components/SelectMenu/SelectMenu.stories.tsx +++ b/site/src/components/SelectMenu/SelectMenu.stories.tsx @@ -25,7 +25,7 @@ const meta: Meta = { } + startIcon={} > {selectedOpt} @@ -36,7 +36,7 @@ const meta: Meta = { {opts.map((o) => ( - + {o} @@ -77,7 +77,7 @@ export const LongButtonText: Story = { } + startIcon={} > {selectedOpt} @@ -88,7 +88,7 @@ export const LongButtonText: Story = { {opts.map((o) => ( - + {o} @@ -115,7 +115,7 @@ export const NoSelectedOption: Story = { {opts.map((o) => ( - + {o} diff --git a/site/src/modules/tableFiltering/options.tsx b/site/src/modules/tableFiltering/options.tsx index c067ccf251e6e..5071a472d0b01 100644 --- a/site/src/modules/tableFiltering/options.tsx +++ b/site/src/modules/tableFiltering/options.tsx @@ -41,7 +41,7 @@ export const useOrganizationsFilterMenu = ({ startIcon: ( @@ -76,7 +76,7 @@ export const useOrganizationsFilterMenu = ({ startIcon: ( diff --git a/site/src/modules/users/UserAvatar/UserAvatar.tsx b/site/src/modules/users/UserAvatar/UserAvatar.tsx index 5244dc6de20e0..07f175ee4c87f 100644 --- a/site/src/modules/users/UserAvatar/UserAvatar.tsx +++ b/site/src/modules/users/UserAvatar/UserAvatar.tsx @@ -1,19 +1,27 @@ -import { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; +import { + Avatar, + AvatarFallback, + AvatarImage, + type AvatarProps, + avatarLetter, +} from "components/Avatar/Avatar"; import type { FC } from "react"; export type UserAvatarProps = { username: string; avatarURL?: string; -} & AvatarProps; + size?: AvatarProps["size"]; +}; export const UserAvatar: FC = ({ username, avatarURL, - ...avatarProps + size, }) => { return ( - - {username} + + + {avatarLetter(username)} ); }; diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx index 998367aecc06f..92e42aa550809 100644 --- a/site/src/pages/TemplatesPage/TemplatesFilter.tsx +++ b/site/src/pages/TemplatesPage/TemplatesFilter.tsx @@ -68,7 +68,7 @@ const orgOption = (org: Organization): SelectFilterOption => ({ startIcon: ( diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 0a6bfbd28e328..99ec248eccad0 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -288,7 +288,7 @@ const OwnerBreadcrumb: FC = ({ @@ -321,7 +321,11 @@ const OrganizationBreadcrumb: FC = ({ - + {orgName} From 22c241c2b92b8b15f71b04ce3a32fbe8b7eea1e5 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 10:50:18 +0000 Subject: [PATCH 07/29] Move GroupAvatar to modules/groups --- .../groups}/GroupAvatar/GroupAvatar.stories.tsx | 0 .../{components => modules/groups}/GroupAvatar/GroupAvatar.tsx | 0 site/src/pages/GroupsPage/GroupsPageView.tsx | 2 +- .../pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx | 2 +- .../TemplatePermissionsPage/TemplatePermissionsPageView.tsx | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename site/src/{components => modules/groups}/GroupAvatar/GroupAvatar.stories.tsx (100%) rename site/src/{components => modules/groups}/GroupAvatar/GroupAvatar.tsx (100%) diff --git a/site/src/components/GroupAvatar/GroupAvatar.stories.tsx b/site/src/modules/groups/GroupAvatar/GroupAvatar.stories.tsx similarity index 100% rename from site/src/components/GroupAvatar/GroupAvatar.stories.tsx rename to site/src/modules/groups/GroupAvatar/GroupAvatar.stories.tsx diff --git a/site/src/components/GroupAvatar/GroupAvatar.tsx b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx similarity index 100% rename from site/src/components/GroupAvatar/GroupAvatar.tsx rename to site/src/modules/groups/GroupAvatar/GroupAvatar.tsx diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 314c6a96782d4..d14aa6671436e 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -15,12 +15,12 @@ import { AvatarData } from "components/AvatarData/AvatarData"; import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { Paywall } from "components/Paywall/Paywall"; import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; +import { GroupAvatar } from "modules/groups/GroupAvatar/GroupAvatar"; import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router-dom"; diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx index 95df7e73cd9e9..62ba3d4bc34af 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx @@ -15,13 +15,13 @@ import { AvatarData } from "components/AvatarData/AvatarData"; import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { Paywall } from "components/Paywall/Paywall"; import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; import { useClickableTableRow } from "hooks"; +import { GroupAvatar } from "modules/groups/GroupAvatar/GroupAvatar"; import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router-dom"; diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index a69f7657c8bbd..d0be5ec39c567 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -20,7 +20,6 @@ import type { import { AvatarData } from "components/AvatarData/AvatarData"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { MoreMenu, MoreMenuContent, @@ -31,6 +30,7 @@ import { import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; +import { GroupAvatar } from "modules/groups/GroupAvatar/GroupAvatar"; import { type FC, useState } from "react"; import { getGroupSubtitle } from "utils/groups"; import { From 8ecbfc594ad0510be556d48f40bdec244e8401e5 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 12:03:06 +0000 Subject: [PATCH 08/29] Update GroupAvatar to use latest Avatar component --- site/src/modules/groups/GroupAvatar/GroupAvatar.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx index fb65c448aef9e..1b78b4735f35e 100644 --- a/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx +++ b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx @@ -1,6 +1,11 @@ import Group from "@mui/icons-material/Group"; import Badge from "@mui/material/Badge"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { type ClassName, useClassName } from "hooks/useClassName"; import type { FC } from "react"; @@ -19,8 +24,9 @@ export const GroupAvatar: FC = ({ name, avatarURL }) => { badgeContent={} classes={{ badge }} > - - {name} + + + {avatarLetter(name)} ); From 081bb475f1f40a817e0acc47bc9e8d25b5ca1aec Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 12:07:23 +0000 Subject: [PATCH 09/29] Move BuildAvatar to modules/builds --- .../builds}/BuildAvatar/BuildAvatar.stories.tsx | 0 .../{components => modules/builds}/BuildAvatar/BuildAvatar.tsx | 0 site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx | 2 +- site/src/pages/WorkspacePage/BuildRow.tsx | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename site/src/{components => modules/builds}/BuildAvatar/BuildAvatar.stories.tsx (100%) rename site/src/{components => modules/builds}/BuildAvatar/BuildAvatar.tsx (100%) diff --git a/site/src/components/BuildAvatar/BuildAvatar.stories.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx similarity index 100% rename from site/src/components/BuildAvatar/BuildAvatar.stories.tsx rename to site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx similarity index 100% rename from site/src/components/BuildAvatar/BuildAvatar.tsx rename to site/src/modules/builds/BuildAvatar/BuildAvatar.tsx diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx index 0a51fa0e2b585..e8b26e4000010 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx @@ -5,7 +5,6 @@ import type { WorkspaceBuild, } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; -import { BuildAvatar } from "components/BuildAvatar/BuildAvatar"; import { Loader } from "components/Loader/Loader"; import { FullWidthPageHeader, @@ -16,6 +15,7 @@ import { Stack } from "components/Stack/Stack"; import { Stats, StatsItem } from "components/Stats/Stats"; import { TAB_PADDING_X, TabLink, Tabs, TabsList } from "components/Tabs/Tabs"; import { useSearchParamsKey } from "hooks/useSearchParamsKey"; +import { BuildAvatar } from "modules/builds/BuildAvatar/BuildAvatar"; import { DashboardFullPage } from "modules/dashboard/DashboardLayout"; import { AgentLogs } from "modules/resources/AgentLogs/AgentLogs"; import { useAgentLogs } from "modules/resources/AgentLogs/useAgentLogs"; diff --git a/site/src/pages/WorkspacePage/BuildRow.tsx b/site/src/pages/WorkspacePage/BuildRow.tsx index 8b4e9e5a564d1..366ff4b04d8f8 100644 --- a/site/src/pages/WorkspacePage/BuildRow.tsx +++ b/site/src/pages/WorkspacePage/BuildRow.tsx @@ -1,10 +1,10 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react"; import TableCell from "@mui/material/TableCell"; import type { WorkspaceBuild } from "api/typesGenerated"; -import { BuildAvatar } from "components/BuildAvatar/BuildAvatar"; import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; import { useClickable } from "hooks/useClickable"; +import { BuildAvatar } from "modules/builds/BuildAvatar/BuildAvatar"; import type { FC } from "react"; import { useNavigate } from "react-router-dom"; import { From 83ca623a1d96d4d25e52b6b58d1a139eba2820ee Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 12:15:09 +0000 Subject: [PATCH 10/29] Update BuildAvatar to use latest Avatar component --- .../builds/BuildAvatar/BuildAvatar.stories.tsx | 16 +++++----------- .../modules/builds/BuildAvatar/BuildAvatar.tsx | 8 +++++--- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx index 75cedf10ba5c5..107c3f795a885 100644 --- a/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx +++ b/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx @@ -13,27 +13,21 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const XSSize: Story = { - args: { - size: "xs", - }, -}; - -export const SMSize: Story = { +export const SmSize: Story = { args: { size: "sm", }, }; -export const MDSize: Story = { +export const DefaultSize: Story = { args: { - size: "md", + size: "default", }, }; -export const XLSize: Story = { +export const LgSize: Story = { args: { - size: "xl", + size: "lg", }, }; diff --git a/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx index ae9e9e9af4904..c27fd6ba1f2d0 100644 --- a/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx +++ b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx @@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react"; import Badge from "@mui/material/Badge"; import type { WorkspaceBuild } from "api/typesGenerated"; import { BuildIcon } from "components/BuildIcon/BuildIcon"; -import { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; +import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; import { useClassName } from "hooks/useClassName"; import type { FC } from "react"; import { getDisplayWorkspaceBuildStatus } from "utils/workspace"; @@ -31,8 +31,8 @@ export const BuildAvatar: FC = ({ build, size }) => { badgeContent={
} classes={{ badge: cx(classNames.badge, badgeType) }} > - - + + ); @@ -46,5 +46,7 @@ const classNames = { height: 8, display: "block", padding: 0, + right: 0, + bottom: 0, }), }; From dff92f7f1e35965e52d531ae4762f3a04340009c Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 12:18:37 +0000 Subject: [PATCH 11/29] Move AvatarCard to components/Avatar --- site/src/components/{AvatarCard => Avatar}/AvatarCard.stories.tsx | 0 site/src/components/{AvatarCard => Avatar}/AvatarCard.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename site/src/components/{AvatarCard => Avatar}/AvatarCard.stories.tsx (100%) rename site/src/components/{AvatarCard => Avatar}/AvatarCard.tsx (100%) diff --git a/site/src/components/AvatarCard/AvatarCard.stories.tsx b/site/src/components/Avatar/AvatarCard.stories.tsx similarity index 100% rename from site/src/components/AvatarCard/AvatarCard.stories.tsx rename to site/src/components/Avatar/AvatarCard.stories.tsx diff --git a/site/src/components/AvatarCard/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx similarity index 100% rename from site/src/components/AvatarCard/AvatarCard.tsx rename to site/src/components/Avatar/AvatarCard.tsx From 52ea62317530a006416dbaa17c1bf8c329ed5ed0 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 12:22:05 +0000 Subject: [PATCH 12/29] Update AccountUserGroups to use the new Avatar component --- site/src/components/Avatar/AvatarCard.tsx | 14 +++++++++----- .../AccountPage/AccountUserGroups.tsx | 3 +-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx index a98dfc54b519d..74082fed48b08 100644 --- a/site/src/components/Avatar/AvatarCard.tsx +++ b/site/src/components/Avatar/AvatarCard.tsx @@ -1,12 +1,16 @@ import { type CSSObject, useTheme } from "@emotion/react"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import type { FC, ReactNode } from "react"; type AvatarCardProps = { header: string; imgUrl: string; altText: string; - background?: boolean; subtitle?: ReactNode; maxWidth?: number | "none"; @@ -16,7 +20,6 @@ export const AvatarCard: FC = ({ header, imgUrl, altText, - background, subtitle, maxWidth = "none", }) => { @@ -72,8 +75,9 @@ export const AvatarCard: FC = ({ )} - - {header} + + + {avatarLetter(header)} ); diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx index 23df9fa7f3e36..eb6cb440ddb21 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx +++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx @@ -3,7 +3,7 @@ import Grid from "@mui/material/Grid"; import { isApiError } from "api/errors"; import type { Group } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarCard } from "components/AvatarCard/AvatarCard"; +import { AvatarCard } from "components/Avatar/AvatarCard"; import { Loader } from "components/Loader/Loader"; import { useDashboard } from "modules/dashboard/useDashboard"; import type { FC } from "react"; @@ -53,7 +53,6 @@ export const AccountUserGroups: FC = ({ {groups.map((group) => ( Date: Tue, 17 Dec 2024 12:23:31 +0000 Subject: [PATCH 13/29] Move AvatarData to components/Avatar --- .../components/{AvatarData => Avatar}/AvatarData.stories.tsx | 0 site/src/components/{AvatarData => Avatar}/AvatarData.tsx | 0 .../components/{AvatarData => Avatar}/AvatarDataSkeleton.tsx | 0 .../OrganizationAutocomplete/OrganizationAutocomplete.tsx | 2 +- site/src/components/UserAutocomplete/UserAutocomplete.tsx | 2 +- site/src/modules/builds/BuildAvatar/BuildAvatar.tsx | 2 +- .../OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx | 2 +- site/src/pages/GroupsPage/GroupPage.tsx | 2 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 4 ++-- .../src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx | 2 +- .../ManagementSettingsPage/GroupsPage/GroupsPageView.tsx | 4 ++-- .../ManagementSettingsPage/OrganizationMembersPageView.tsx | 2 +- .../TemplatePermissionsPage/TemplatePermissionsPageView.tsx | 2 +- .../TemplatePermissionsPage/UserOrGroupAutocomplete.tsx | 2 +- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 4 ++-- .../ExternalAuthPage/ExternalAuthPageView.tsx | 2 +- .../OAuth2ProviderPage/OAuth2ProviderPageView.tsx | 2 +- .../UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx | 2 +- site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx | 4 ++-- site/src/pages/WorkspacePage/ChangeVersionDialog.tsx | 2 +- site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesTable.tsx | 4 ++-- 22 files changed, 24 insertions(+), 24 deletions(-) rename site/src/components/{AvatarData => Avatar}/AvatarData.stories.tsx (100%) rename site/src/components/{AvatarData => Avatar}/AvatarData.tsx (100%) rename site/src/components/{AvatarData => Avatar}/AvatarDataSkeleton.tsx (100%) diff --git a/site/src/components/AvatarData/AvatarData.stories.tsx b/site/src/components/Avatar/AvatarData.stories.tsx similarity index 100% rename from site/src/components/AvatarData/AvatarData.stories.tsx rename to site/src/components/Avatar/AvatarData.stories.tsx diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx similarity index 100% rename from site/src/components/AvatarData/AvatarData.tsx rename to site/src/components/Avatar/AvatarData.tsx diff --git a/site/src/components/AvatarData/AvatarDataSkeleton.tsx b/site/src/components/Avatar/AvatarDataSkeleton.tsx similarity index 100% rename from site/src/components/AvatarData/AvatarDataSkeleton.tsx rename to site/src/components/Avatar/AvatarDataSkeleton.tsx diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index 6adf28f852f04..fd9da6cff5ee5 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -5,7 +5,7 @@ import TextField from "@mui/material/TextField"; import { checkAuthorization } from "api/queries/authCheck"; import { organizations } from "api/queries/organizations"; import type { AuthorizationCheck, Organization } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useDebouncedFunction } from "hooks/debounce"; import { diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index cf9c9ea6ecc0b..a489a0d530934 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -6,7 +6,7 @@ import { getErrorMessage } from "api/errors"; import { organizationMembers } from "api/queries/organizations"; import { users } from "api/queries/users"; import type { OrganizationMemberWithUserData, User } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useDebouncedFunction } from "hooks/debounce"; import { diff --git a/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx index c27fd6ba1f2d0..c082fec531205 100644 --- a/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx +++ b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx @@ -2,8 +2,8 @@ import { css, cx } from "@emotion/css"; import { useTheme } from "@emotion/react"; import Badge from "@mui/material/Badge"; import type { WorkspaceBuild } from "api/typesGenerated"; -import { BuildIcon } from "components/BuildIcon/BuildIcon"; import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; +import { BuildIcon } from "components/BuildIcon/BuildIcon"; import { useClassName } from "hooks/useClassName"; import type { FC } from "react"; import { getDisplayWorkspaceBuildStatus } from "utils/workspace"; diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 47d19f48d68eb..1df790e0f9b9b 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx @@ -10,7 +10,7 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 9492c501e2186..66f12c39573f1 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -20,7 +20,7 @@ import { } from "api/queries/groups"; import type { Group, ReducedUser, User } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { EmptyState } from "components/EmptyState/EmptyState"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index d14aa6671436e..ee48901b961be 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -11,8 +11,8 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type { Group } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Paywall } from "components/Paywall/Paywall"; diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx index b7d45b360e963..dfd19d420a307 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx @@ -24,7 +24,7 @@ import type { ReducedUser, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { EmptyState } from "components/EmptyState/EmptyState"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx index 62ba3d4bc34af..41ddc643c6056 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx @@ -11,8 +11,8 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type { Group } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Paywall } from "components/Paywall/Paywall"; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index 98be00cb858e9..1df58754f348c 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -16,7 +16,7 @@ import type { User, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; import { MoreMenu, diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index d0be5ec39c567..5b364b3de5f3a 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -17,7 +17,7 @@ import type { TemplateRole, TemplateUser, } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; import { diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx index 07c0c58969848..7b0f643eac39f 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx @@ -4,7 +4,7 @@ import CircularProgress from "@mui/material/CircularProgress"; import TextField from "@mui/material/TextField"; import { templaceACLAvailable } from "api/queries/templates"; import type { Group, ReducedUser } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { useDebouncedFunction } from "hooks/debounce"; import { type ChangeEvent, type FC, useState } from "react"; import { useQuery } from "react-query"; diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 34667c437ceee..1f863122f6861 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -12,8 +12,8 @@ import TableRow from "@mui/material/TableRow"; import { hasError, isApiValidationError } from "api/errors"; import type { Template, TemplateExample } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { DeprecatedBadge } from "components/Badges/Badges"; import type { useFilter } from "components/Filter/Filter"; import { diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index 09ec684bf56c6..8e1b8380b34a3 100644 --- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx @@ -20,7 +20,7 @@ import type { ListUserExternalAuthResponse, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { Loader } from "components/Loader/Loader"; import { MoreMenu, diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx index 17e953222c07e..302732ee230a7 100644 --- a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx +++ b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx @@ -7,7 +7,7 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { TableLoader } from "components/TableLoader/TableLoader"; import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 0005e1fe28a68..2f26f369b57fa 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -2,7 +2,7 @@ import { useTheme } from "@emotion/react"; import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import type { Region, WorkspaceProxy } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { HealthyBadge, NotHealthyBadge, diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index 81b98ffdc55fc..08a8aa99b182d 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -10,8 +10,8 @@ import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import type { GroupsByUserId } from "api/queries/groups"; import type * as TypesGen from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { PremiumBadge } from "components/Badges/Badges"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index cd12862097f45..d693eafc5f273 100644 --- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx +++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx @@ -6,7 +6,7 @@ import CircularProgress from "@mui/material/CircularProgress"; import TextField from "@mui/material/TextField"; import type { Template, TemplateVersion } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import type { DialogProps } from "components/Dialogs/Dialog"; import { FormFields } from "components/Form/Form"; diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 99ec248eccad0..332c985008299 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -6,7 +6,7 @@ import Link from "@mui/material/Link"; import Tooltip from "@mui/material/Tooltip"; import { workspaceQuota } from "api/queries/workspaceQuota"; import type * as TypesGen from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; +import { AvatarData } from "components/Avatar/AvatarData"; import { Topbar, TopbarAvatar, diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 2ca1b28ca1632..028fc7a04b05a 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -11,8 +11,8 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { visuallyHidden } from "@mui/utils"; import type { Template, Workspace } from "api/typesGenerated"; -import { AvatarData } from "components/AvatarData/AvatarData"; -import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; +import { AvatarData } from "components/Avatar/AvatarData"; +import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; import { Stack } from "components/Stack/Stack"; import { From 1caeffdd8c12ddfb2b161964430e25f2c820a588 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 12:28:50 +0000 Subject: [PATCH 14/29] Update AvatarData to use new Avatar component --- site/src/components/Avatar/AvatarData.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/site/src/components/Avatar/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx index 93952bb84d2fc..8455a5f297b6c 100644 --- a/site/src/components/Avatar/AvatarData.tsx +++ b/site/src/components/Avatar/AvatarData.tsx @@ -1,6 +1,11 @@ import { useTheme } from "@emotion/react"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC, ReactNode } from "react"; export interface AvatarDataProps { @@ -29,8 +34,13 @@ export const AvatarData: FC = ({ const theme = useTheme(); if (!avatar) { avatar = ( - - {(typeof title === "string" ? title : imgFallbackText) || "-"} + + + + {avatarLetter( + (typeof title === "string" ? title : imgFallbackText) || "-", + )} + ); } From 4f12e95409aa875a81d74a20b27e73df35f2586b Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 13:11:22 +0000 Subject: [PATCH 15/29] Update remaining components --- site/src/components/FullPageLayout/Topbar.tsx | 16 ++++------ .../OrganizationAutocomplete.tsx | 12 ++++++-- .../UserAutocomplete/UserAutocomplete.tsx | 12 ++++++-- site/src/modules/resources/ResourceAvatar.tsx | 24 +++++++-------- .../CreateWorkspacePageView.tsx | 16 ++++++---- .../CreateWorkspacePage/SelectedTemplate.tsx | 18 ++++++----- .../OAuth2AppsSettingsPageView.tsx | 6 ++-- .../ExternalAuthPage/ExternalAuthPageView.tsx | 14 +++++++-- .../pages/TemplatePage/TemplatePageHeader.tsx | 16 ++++++---- .../pages/TemplateSettingsPage/Sidebar.tsx | 12 ++++++-- .../pages/TemplatesPage/TemplatesPageView.tsx | 6 ++-- .../ExternalAuthPage/ExternalAuthPageView.tsx | 21 ++++++------- .../OAuth2ProviderPageView.tsx | 6 ++-- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 11 +++---- .../UsersPage/UsersTable/UserGroupsCell.tsx | 14 +++++++-- .../WorkspacePage/ChangeVersionDialog.tsx | 14 +++++++-- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 30 +++++++++++-------- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 7 +++-- .../pages/WorkspacesPage/WorkspacesButton.tsx | 24 +++++++-------- .../pages/WorkspacesPage/WorkspacesEmpty.tsx | 17 ++++++----- .../pages/WorkspacesPage/WorkspacesTable.tsx | 15 ++++------ 21 files changed, 180 insertions(+), 131 deletions(-) diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx index ab51e93b395df..d5f9e0ead1dd5 100644 --- a/site/src/components/FullPageLayout/Topbar.tsx +++ b/site/src/components/FullPageLayout/Topbar.tsx @@ -2,10 +2,7 @@ import { css } from "@emotion/css"; import { useTheme } from "@emotion/react"; import Button, { type ButtonProps } from "@mui/material/Button"; import IconButton, { type IconButtonProps } from "@mui/material/IconButton"; -import { - type AvatarProps, - ExternalAvatar, -} from "components/deprecated/Avatar/Avatar"; +import { Avatar, AvatarImage } from "components/Avatar/Avatar"; import { type FC, type ForwardedRef, @@ -96,14 +93,11 @@ export const TopbarDivider: FC> = (props) => { ); }; -export const TopbarAvatar: FC = (props) => { +export const TopbarAvatar: FC<{ src: string }> = ({ src }) => { return ( - + + + ); }; diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index fd9da6cff5ee5..ee5c7e6576967 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -5,8 +5,13 @@ import TextField from "@mui/material/TextField"; import { checkAuthorization } from "api/queries/authCheck"; import { organizations } from "api/queries/organizations"; import type { AuthorizationCheck, Organization } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useDebouncedFunction } from "hooks/debounce"; import { type ChangeEvent, @@ -132,8 +137,9 @@ export const OrganizationAutocomplete: FC = ({ ...params.InputProps, onChange: debouncedInputOnChange, startAdornment: value && ( - - {value.name} + + + {avatarLetter(value.name)} ), endAdornment: ( diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index a489a0d530934..3221de3c61048 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -6,8 +6,13 @@ import { getErrorMessage } from "api/errors"; import { organizationMembers } from "api/queries/organizations"; import { users } from "api/queries/users"; import type { OrganizationMemberWithUserData, User } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useDebouncedFunction } from "hooks/debounce"; import { type ChangeEvent, @@ -170,8 +175,9 @@ const InnerAutocomplete = ({ ...params.InputProps, onChange: debouncedInputOnChange, startAdornment: value && ( - - {value.username} + + + {avatarLetter(value.username)} ), endAdornment: ( diff --git a/site/src/modules/resources/ResourceAvatar.tsx b/site/src/modules/resources/ResourceAvatar.tsx index 14d3b3248a882..d1110f8debbb2 100644 --- a/site/src/modules/resources/ResourceAvatar.tsx +++ b/site/src/modules/resources/ResourceAvatar.tsx @@ -1,26 +1,22 @@ -import { visuallyHidden } from "@mui/utils"; import type { WorkspaceResource } from "api/typesGenerated"; -import { ExternalImage } from "components/ExternalImage/ExternalImage"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; -import { type FC, useId } from "react"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; +import type { FC } from "react"; import { getResourceIconPath } from "utils/workspace"; export type ResourceAvatarProps = { resource: WorkspaceResource }; export const ResourceAvatar: FC = ({ resource }) => { const avatarSrc = resource.icon || getResourceIconPath(resource.type); - const altId = useId(); return ( - - -
- {resource.name} -
+ + + {avatarLetter(resource.name)} ); }; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 5cda28cb495b5..e0a2c99446aa5 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -5,6 +5,12 @@ import TextField from "@mui/material/TextField"; import type * as TypesGen from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { FormFields, FormFooter, @@ -21,7 +27,6 @@ import { Pill } from "components/Pill/Pill"; import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"; import { Stack } from "components/Stack/Stack"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { type FormikContextType, useFormik } from "formik"; import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName"; import { type FC, useCallback, useEffect, useMemo, useState } from "react"; @@ -148,11 +153,10 @@ export const CreateWorkspacePageView: FC = ({ Cancel}> - {template.icon !== "" ? ( - - ) : ( - {template.name} - )} + + + {avatarLetter(template.name)} +
diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 921dd9d173557..89c66269259c2 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,7 +1,12 @@ import type { Interpolation, Theme } from "@emotion/react"; import type { Template, TemplateExample } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; export interface SelectedTemplateProps { @@ -16,13 +21,10 @@ export const SelectedTemplate: FC = ({ template }) => { css={styles.template} alignItems="center" > - - {template.name} - + + + {avatarLetter(template.name)} + diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 1df790e0f9b9b..6811ac9d7ad7b 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx @@ -10,11 +10,11 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Avatar, AvatarImage } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import type { FC } from "react"; import { Link, useNavigate } from "react-router-dom"; @@ -102,7 +102,9 @@ const OAuth2AppRow: FC = ({ app }) => { title={app.name} avatar={ Boolean(app.icon) && ( - + + + ) } /> diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index d6e19665cdf92..844800e61b215 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -8,10 +8,15 @@ import Tooltip from "@mui/material/Tooltip"; import type { ApiErrorResponse } from "api/errors"; import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated"; import { Alert, AlertDetail } from "components/Alert/Alert"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { CopyButton } from "components/CopyButton/CopyButton"; import { SignInLayout } from "components/SignInLayout/SignInLayout"; import { Welcome } from "components/Welcome/Welcome"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC, ReactNode } from "react"; export interface ExternalAuthPageViewProps { @@ -88,8 +93,11 @@ const ExternalAuthPageView: FC = ({ target="_blank" rel="noreferrer" > - - {install.account.login} + + + + {avatarLetter(install.account.login)} + diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx index 4f6d345b0c4fb..a4c491d766ae7 100644 --- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx +++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx @@ -11,6 +11,12 @@ import type { Template, TemplateVersion, } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { Margins } from "components/Margins/Margins"; @@ -29,7 +35,6 @@ import { } from "components/PageHeader/PageHeader"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; import { useQuery } from "react-query"; @@ -202,11 +207,10 @@ export const TemplatePageHeader: FC = ({ } > - {hasIcon ? ( - - ) : ( - {template.name} - )} + + + {avatarLetter(template.name)} +
diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index b28c27cda005c..8a7abdaf1c7cb 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -3,12 +3,17 @@ import SecurityIcon from "@mui/icons-material/LockOutlined"; import GeneralIcon from "@mui/icons-material/SettingsOutlined"; import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Template } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, SidebarNavItem, } from "components/Sidebar/Sidebar"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; @@ -23,7 +28,10 @@ export const Sidebar: FC = ({ template }) => { + + + {avatarLetter(template.name)} + } title={template.display_name || template.name} linkTo={getLink( diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 1f863122f6861..318c7d076a1cf 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -12,6 +12,7 @@ import TableRow from "@mui/material/TableRow"; import { hasError, isApiValidationError } from "api/errors"; import type { Template, TemplateExample } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Avatar, AvatarImage } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { DeprecatedBadge } from "components/Badges/Badges"; @@ -36,7 +37,6 @@ import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; @@ -118,7 +118,9 @@ const TemplateRow: FC = ({ showOrganizations, template }) => { subtitle={template.description} avatar={ hasIcon && ( - + + + ) } /> diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index 8e1b8380b34a3..367dc6ad80628 100644 --- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx @@ -20,6 +20,12 @@ import type { ListUserExternalAuthResponse, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { Loader } from "components/Loader/Loader"; import { @@ -30,7 +36,6 @@ import { ThreeDotsButton, } from "components/MoreMenu/MoreMenu"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; -import { Avatar, ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import type { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage"; import { type FC, useCallback, useEffect, useState } from "react"; import { useQuery } from "react-query"; @@ -151,15 +156,11 @@ const ExternalAuthRow: FC = ({ ? externalAuth.authenticated : (link?.authenticated ?? false); - let avatar = app.display_icon ? ( - - ) : ( - {name} + let avatar = ( + + + {avatarLetter(name)} + ); // If the link is authenticated and has a refresh token, show that it will automatically diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx index 302732ee230a7..56603fdce6221 100644 --- a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx +++ b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx @@ -7,9 +7,9 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Avatar, AvatarImage } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { TableLoader } from "components/TableLoader/TableLoader"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; export type OAuth2ProviderPageViewProps = { @@ -71,7 +71,9 @@ const OAuth2AppRow: FC = ({ app, revoke }) => { title={app.name} avatar={ Boolean(app.icon) && ( - + + + ) } /> diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 2f26f369b57fa..952b98b912204 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react"; import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import type { Region, WorkspaceProxy } from "api/typesGenerated"; +import { Avatar, AvatarImage } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { HealthyBadge, @@ -9,7 +10,6 @@ import { NotReachableBadge, NotRegisteredBadge, } from "components/Badges/Badges"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { ProxyLatencyReport } from "contexts/useProxyLatency"; import type { FC, ReactNode } from "react"; import { getLatencyColor } from "utils/latency"; @@ -49,12 +49,9 @@ export const ProxyRow: FC = ({ proxy, latency }) => { } avatar={ proxy.icon_url !== "" && ( - + + + ) } /> diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index f26bcb36c8b13..7bbe0af8d7a86 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -4,6 +4,12 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import TableCell from "@mui/material/TableCell"; import type { Group } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { OverflowY } from "components/OverflowY/OverflowY"; import { Popover, @@ -11,7 +17,6 @@ import { PopoverTrigger, } from "components/Popover/Popover"; import { Stack } from "components/Stack/Stack"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; type GroupsCellProps = { @@ -99,8 +104,11 @@ export const UserGroupsCell: FC = ({ userGroups }) => { alignItems: "center", }} > - - {groupName} + + + + {avatarLetter(groupName)} + = ({
  • - {option.name} + + + + {avatarLetter(option.name)} + } title={ diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 332c985008299..f8cc8c2bf9034 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -6,6 +6,12 @@ import Link from "@mui/material/Link"; import Tooltip from "@mui/material/Tooltip"; import { workspaceQuota } from "api/queries/workspaceQuota"; import type * as TypesGen from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { Topbar, @@ -17,7 +23,6 @@ import { } from "components/FullPageLayout/Topbar"; import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip"; import { Popover, PopoverTrigger } from "components/Popover/Popover"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { useDashboard } from "modules/dashboard/useDashboard"; import { linkToTemplate, useLinks } from "modules/navigation"; import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; @@ -351,12 +356,10 @@ const OrganizationBreadcrumb: FC = ({ subtitle="Organization" avatar={ orgIconUrl && ( - + + + {avatarLetter(orgName)} + ) } imgFallbackText={orgName} @@ -418,12 +421,12 @@ const WorkspaceBreadcrumb: FC = ({ } avatar={ - + + + + {avatarLetter(templateDisplayName)} + + } imgFallbackText={templateDisplayName} /> @@ -446,6 +449,7 @@ const styles = { breadcrumbSegment: { display: "flex", + alignItems: "center", flexFlow: "row nowrap", gap: "8px", maxWidth: "160px", diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index b89e6f5b7d887..a61945d96bed3 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -2,12 +2,12 @@ import ParameterIcon from "@mui/icons-material/CodeOutlined"; import GeneralIcon from "@mui/icons-material/SettingsOutlined"; import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Workspace } from "api/typesGenerated"; +import { Avatar, AvatarFallback, AvatarImage } from "components/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, SidebarNavItem, } from "components/Sidebar/Sidebar"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; interface SidebarProps { @@ -20,7 +20,10 @@ export const Sidebar: FC = ({ username, workspace }) => { + + {workspace.template_icon} + {workspace.name} + } title={workspace.name} linkTo={`/@${username}/${workspace.name}`} diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx index 2cbca11fcef60..eac86129ed659 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx @@ -3,6 +3,12 @@ import OpenIcon from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import type { Template } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { Loader } from "components/Loader/Loader"; import { MenuSearch } from "components/Menu/MenuSearch"; import { OverflowY } from "components/OverflowY/OverflowY"; @@ -12,7 +18,6 @@ import { PopoverTrigger, } from "components/Popover/Popover"; import { SearchEmpty, searchStyles } from "components/Search/Search"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { linkToTemplate, useLinks } from "modules/navigation"; import { type FC, type ReactNode, useState } from "react"; import type { UseQueryResult } from "react-query"; @@ -140,18 +145,11 @@ const WorkspaceResultsRow: FC = ({ template }) => { alignItems: "center", }} > - - {template.display_name || "-"} + + + + {avatarLetter(template.display_name || template.name)} +
    = ({ })} >
    - - {t.name} + + + {avatarLetter(t.name)}
    diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 028fc7a04b05a..4771cf9884b03 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -11,6 +11,7 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { visuallyHidden } from "@mui/utils"; import type { Template, Workspace } from "api/typesGenerated"; +import { Avatar, AvatarFallback, AvatarImage } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; @@ -19,7 +20,6 @@ import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import { useDashboard } from "modules/dashboard/useDashboard"; import { WorkspaceDormantBadge } from "modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge"; @@ -186,15 +186,10 @@ export const WorkspacesTable: FC = ({
    } avatar={ - - {workspace.name} - + + {workspace.template_icon} + {workspace.name} + } />
    • From 76c211d505ed9867bb258ba70389eb3188f1ccf1 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 13:14:13 +0000 Subject: [PATCH 16/29] Fix lint issues --- .../dashboard/Navbar/UserDropdown/UserDropdown.tsx | 8 +------- .../OrganizationSummaryPageView.tsx | 2 +- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx index 6fc0bd1772940..4bd453d045e7f 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -35,7 +35,7 @@ export const UserDropdown: FC = ({
    @@ -88,10 +88,4 @@ const styles = { minWidth: 0, maxWidth: 300, }, - - avatar: { - width: BUTTON_SM_HEIGHT, - height: BUTTON_SM_HEIGHT, - fontSize: 16, - }, } satisfies Record>; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx index 8462ffcc704dc..52db5b8dcbed4 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx @@ -26,7 +26,7 @@ export const OrganizationSummaryPageView: FC< From 08fee38235a77c7556e827b5f2e435fd360abace Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 13:16:42 +0000 Subject: [PATCH 17/29] Remove deprecated Avatar --- .../deprecated/Avatar/Avatar.stories.tsx | 59 --------- .../components/deprecated/Avatar/Avatar.tsx | 124 ------------------ 2 files changed, 183 deletions(-) delete mode 100644 site/src/components/deprecated/Avatar/Avatar.stories.tsx delete mode 100644 site/src/components/deprecated/Avatar/Avatar.tsx diff --git a/site/src/components/deprecated/Avatar/Avatar.stories.tsx b/site/src/components/deprecated/Avatar/Avatar.stories.tsx deleted file mode 100644 index c06390c450d89..0000000000000 --- a/site/src/components/deprecated/Avatar/Avatar.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import PauseIcon from "@mui/icons-material/PauseOutlined"; -import type { Meta, StoryObj } from "@storybook/react"; -import { Avatar, AvatarIcon } from "./Avatar"; - -const meta: Meta = { - title: "components/DeprecatedAvatar", - component: Avatar, -}; - -export default meta; -type Story = StoryObj; - -export const WithLetter: Story = { - args: { - children: "Coder", - }, -}; - -export const WithLetterXL = { - args: { - children: "Coder", - size: "xl", - }, -}; - -export const WithImage = { - args: { - src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4", - }, -}; - -export const WithImageXL = { - args: { - src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4", - size: "xl", - }, -}; - -export const WithMuiIcon = { - args: { - background: true, - children: , - }, -}; - -export const WithMuiIconXL = { - args: { - background: true, - children: , - size: "xl", - }, -}; - -export const WithAvatarIcon = { - args: { - background: true, - children: , - }, -}; diff --git a/site/src/components/deprecated/Avatar/Avatar.tsx b/site/src/components/deprecated/Avatar/Avatar.tsx deleted file mode 100644 index 1fcd6208655d2..0000000000000 --- a/site/src/components/deprecated/Avatar/Avatar.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { type Interpolation, type Theme, css, useTheme } from "@emotion/react"; -import MuiAvatar, { - type AvatarProps as MuiAvatarProps, - // biome-ignore lint/nursery/noRestrictedImports: Used as base component -} from "@mui/material/Avatar"; -import { visuallyHidden } from "@mui/utils"; -import { type FC, useId } from "react"; -import { getExternalImageStylesFromUrl } from "theme/externalImages"; - -export type AvatarProps = MuiAvatarProps & { - size?: "xs" | "sm" | "md" | "xl"; - background?: boolean; - fitImage?: boolean; -}; - -const sizeStyles = { - xs: { - width: 16, - height: 16, - fontSize: 8, - fontWeight: 700, - }, - sm: { - width: 24, - height: 24, - fontSize: 12, - fontWeight: 600, - }, - md: {}, - xl: { - width: 48, - height: 48, - fontSize: 24, - }, -} satisfies Record>; - -const fitImageStyles = css` - & .MuiAvatar-img { - object-fit: contain; - } -`; - -/** - * @deprecated Use `Avatar` from `@components/Avatar` instead. - */ -export const Avatar: FC = ({ - size = "md", - fitImage, - children, - background, - ...muiProps -}) => { - const fromName = !muiProps.src && typeof children === "string"; - - return ( - ({ - background: - background || fromName ? theme.palette.divider : undefined, - color: theme.palette.text.primary, - }), - ]} - > - {typeof children === "string" ? firstLetter(children) : children} - - ); -}; - -/** - * @deprecated Use `Avatar` from `@components/Avatar` instead. - */ -export const ExternalAvatar: FC = (props) => { - const theme = useTheme(); - - return ( - - ); -}; - -type AvatarIconProps = { - src: string; - alt: string; -}; - -/** - * Use it to make an img element behaves like a MaterialUI Icon component - * - * @deprecated Use `AvatarIcon` from `@components/Avatar` instead. - */ -export const AvatarIcon: FC = ({ src, alt }) => { - const hookId = useId(); - const avatarId = `${hookId}-avatar`; - - // We use a `visuallyHidden` element instead of setting `alt` to avoid - // splatting the text out on the screen if the image fails to load. - return ( - <> - -
    - {alt} -
    - - ); -}; - -const firstLetter = (str: string): string => { - if (str.length > 0) { - return str[0].toLocaleUpperCase(); - } - - return ""; -}; From f47ed9d9292c426e480c74fa7a49a02d23fa2ed5 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 18 Dec 2024 14:53:35 +0000 Subject: [PATCH 18/29] Align avatar with the timeline vertical line --- site/src/components/Avatar/Avatar.tsx | 6 +- .../src/components/Timeline/TimelineEntry.tsx | 67 ++++++++++--------- site/src/index.css | 4 ++ 3 files changed, 44 insertions(+), 33 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 6fafb47ee9611..0f979753371ca 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -16,9 +16,9 @@ const avatarVariants = cva( { variants: { size: { - lg: "h-10 w-10 rounded-[6px] text-sm font-medium", - default: "h-6 w-6 text-2xs", - sm: "h-[18px] w-[18px] text-[8px]", + lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium", + default: "h-[--avatar-default] w-[--avatar-default] text-2xs", + sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]", }, variant: { default: "", diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx index 5c9cedd4cea56..73cdc19295b97 100644 --- a/site/src/components/Timeline/TimelineEntry.tsx +++ b/site/src/components/Timeline/TimelineEntry.tsx @@ -1,5 +1,7 @@ +import type { Interpolation } from "@emotion/react"; import TableRow, { type TableRowProps } from "@mui/material/TableRow"; import { forwardRef } from "react"; +import type { Theme } from "theme"; interface TimelineEntryProps extends TableRowProps { clickable?: boolean; @@ -12,39 +14,44 @@ export const TimelineEntry = forwardRef< return ( [ - { - "&:focus": { - outlineStyle: "solid", - outlineOffset: -1, - outlineWidth: 2, - outlineColor: theme.palette.primary.main, - }, - "& td": { - position: "relative", - overflow: "hidden", - }, - "& td:before": { - position: "absolute", - left: 49, // 50px - (width / 2) - display: "block", - content: "''", - height: "100%", - width: 2, - background: theme.palette.divider, - }, - }, - clickable && { - cursor: "pointer", - - "&:hover": { - backgroundColor: theme.palette.action.hover, - }, - }, - ]} + css={[styles.row, clickable ? styles.clickable : null]} {...props} > {children} ); }); + +const styles = { + row: (theme) => ({ + "--side-padding": "32px", + "&:focus": { + outlineStyle: "solid", + outlineOffset: -1, + outlineWidth: 2, + outlineColor: theme.palette.primary.main, + }, + "& td": { + position: "relative", + overflow: "hidden", + }, + "& td:before": { + "--line-width": "2px", + position: "absolute", + left: "calc((var(--side-padding) + var(--avatar-default)/2) - var(--line-width) / 2)", + display: "block", + content: "''", + height: "100%", + width: "var(--line-width)", + background: theme.palette.divider, + }, + }), + + clickable: (theme) => ({ + cursor: "pointer", + + "&:hover": { + backgroundColor: theme.palette.action.hover, + }, + }), +} satisfies Record>; diff --git a/site/src/index.css b/site/src/index.css index 1353b200745c0..c97e827b98a0f 100644 --- a/site/src/index.css +++ b/site/src/index.css @@ -31,6 +31,10 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; + + --avatar-lg: 2.5rem; + --avatar-default: 1.5rem; + --avatar-sm: 1.125rem; } .dark { --content-primary: 0, 0%, 98%; From 730499962b3d9034e0f654b246b7bd446cb6488b Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 18 Dec 2024 16:57:34 +0000 Subject: [PATCH 19/29] Fix selected template avatar --- site/src/components/Avatar/Avatar.tsx | 21 ++++++++++++------- .../CreateWorkspacePage/SelectedTemplate.tsx | 9 ++------ 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 0f979753371ca..6f9471d89340a 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -1,3 +1,4 @@ +import { useTheme } from "@emotion/react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { type VariantProps, cva } from "class-variance-authority"; /** @@ -9,6 +10,7 @@ import { type VariantProps, cva } from "class-variance-authority"; * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0} */ import * as React from "react"; +import { getExternalImageStylesFromUrl } from "theme/externalImages"; import { cn } from "utils/cn"; const avatarVariants = cva( @@ -67,13 +69,18 @@ Avatar.displayName = AvatarPrimitive.Root.displayName; const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); +>(({ className, ...props }, ref) => { + const theme = useTheme(); + + return ( + + ); +}); AvatarImage.displayName = AvatarPrimitive.Image.displayName; const AvatarFallback = React.forwardRef< diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 89c66269259c2..b0c09351d6e78 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -15,13 +15,8 @@ export interface SelectedTemplateProps { export const SelectedTemplate: FC = ({ template }) => { return ( - - + + {avatarLetter(template.name)} From 9fdb4fd810b3d3861608fb62af0dc0559d140c70 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 18 Dec 2024 20:42:01 +0000 Subject: [PATCH 20/29] Adjust components for the new Avatar --- site/src/components/Avatar/Avatar.tsx | 6 +- site/src/components/Avatar/AvatarCard.tsx | 2 +- site/src/components/Avatar/AvatarData.tsx | 3 +- site/src/components/FullPageLayout/Topbar.tsx | 2 +- site/src/components/Sidebar/Sidebar.tsx | 2 +- .../builds/BuildAvatar/BuildAvatar.tsx | 38 +++------ .../Navbar/UserDropdown/UserDropdown.tsx | 1 - .../groups/GroupAvatar/GroupAvatar.tsx | 39 +--------- site/src/modules/management/SidebarView.tsx | 18 +++-- .../src/modules/resources/AgentRowPreview.tsx | 4 +- site/src/modules/resources/ResourceCard.tsx | 6 +- .../CreateWorkspacePageView.tsx | 2 +- .../CreateWorkspacePage/SelectedTemplate.tsx | 2 +- .../OAuth2AppsSettingsPageView.tsx | 2 +- .../ExternalAuthPage/ExternalAuthPageView.tsx | 7 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 2 +- .../GroupsPage/GroupsPageView.tsx | 2 +- .../OrganizationSummaryPageView.tsx | 16 ++-- .../pages/TemplatePage/TemplatePageHeader.tsx | 2 +- .../ExternalAuthPage/ExternalAuthPageView.tsx | 78 ++++++++----------- .../OAuth2ProviderPageView.tsx | 25 +++--- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 35 +++++---- .../WorkspaceProxyPage/WorkspaceProxyView.tsx | 7 +- .../WorkspaceBuildPageView.tsx | 4 +- .../pages/WorkspacesPage/WorkspacesTable.tsx | 2 +- 25 files changed, 127 insertions(+), 180 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 6f9471d89340a..e81f0af181fdb 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -34,17 +34,17 @@ const avatarVariants = cva( { size: "lg", variant: "icon", - className: "p-[9px]", + className: "p-2", }, { size: "default", variant: "icon", - className: "p-[3px]", + className: "p-1", }, { size: "sm", variant: "icon", - className: "p-[2px]", + className: "p-[3px]", }, ], }, diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx index 74082fed48b08..170f122d1384a 100644 --- a/site/src/components/Avatar/AvatarCard.tsx +++ b/site/src/components/Avatar/AvatarCard.tsx @@ -75,7 +75,7 @@ export const AvatarCard: FC = ({ )}
    - + {avatarLetter(header)} diff --git a/site/src/components/Avatar/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx index 8455a5f297b6c..a04da3148da8d 100644 --- a/site/src/components/Avatar/AvatarData.tsx +++ b/site/src/components/Avatar/AvatarData.tsx @@ -47,9 +47,8 @@ export const AvatarData: FC = ({ return ( > = (props) => { export const TopbarAvatar: FC<{ src: string }> = ({ src }) => { return ( - + ); diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx index 2ff051ee17080..7edec8410a043 100644 --- a/site/src/components/Sidebar/Sidebar.tsx +++ b/site/src/components/Sidebar/Sidebar.tsx @@ -27,7 +27,7 @@ export const SidebarHeader: FC = ({ linkTo, }) => { return ( - + {avatar}
    = ({ build, size }) => { const theme = useTheme(); - const { status, type } = getDisplayWorkspaceBuildStatus(theme, build); - const badgeType = useClassName( - (css, theme) => css({ backgroundColor: theme.roles[type].fill.solid }), + const { type } = getDisplayWorkspaceBuildStatus(theme, build); + const iconColor = useClassName( + (css, theme) => css({ color: theme.roles[type].fill.solid }), [type], ); return ( -
    } - classes={{ badge: cx(classNames.badge, badgeType) }} - > - - - - + + + ); }; - -const classNames = { - badge: css({ - borderRadius: "100%", - width: 8, - minWidth: 8, - height: 8, - display: "block", - padding: 0, - right: 0, - bottom: 0, - }), -}; diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx index 6d8c59971d696..325cc789f7eea 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -35,7 +35,6 @@ export const UserDropdown: FC = ({
    diff --git a/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx index 1b78b4735f35e..3411a590959ff 100644 --- a/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx +++ b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx @@ -1,12 +1,9 @@ -import Group from "@mui/icons-material/Group"; -import Badge from "@mui/material/Badge"; import { Avatar, AvatarFallback, AvatarImage, avatarLetter, } from "components/Avatar/Avatar"; -import { type ClassName, useClassName } from "hooks/useClassName"; import type { FC } from "react"; export interface GroupAvatarProps { @@ -15,38 +12,10 @@ export interface GroupAvatarProps { } export const GroupAvatar: FC = ({ name, avatarURL }) => { - const badge = useClassName(classNames.badge, []); - return ( - } - classes={{ badge }} - > - - - {avatarLetter(name)} - - + + + {avatarLetter(name)} + ); }; - -const classNames = { - badge: (css, theme) => - css({ - backgroundColor: theme.palette.background.paper, - border: `1px solid ${theme.palette.divider}`, - borderRadius: "100%", - width: 24, - height: 24, - display: "flex", - alignItems: "center", - justifyContent: "center", - - "& svg": { - width: 14, - height: 14, - }, - }), -} satisfies Record; diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx index 2d743bc5773fc..d11c5d1b7d75a 100644 --- a/site/src/modules/management/SidebarView.tsx +++ b/site/src/modules/management/SidebarView.tsx @@ -3,6 +3,12 @@ import type { Interpolation, Theme } from "@emotion/react"; import AddIcon from "@mui/icons-material/Add"; import SettingsIcon from "@mui/icons-material/Settings"; import type { AuthorizationResponse, Organization } from "api/typesGenerated"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge"; import { Loader } from "components/Loader/Loader"; import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar"; @@ -259,12 +265,12 @@ const OrganizationSettingsNavigation: FC< active={active} href={urlForSubpage(organization.name)} icon={ - + + + + {avatarLetter(organization.display_name)} + + } > {organization.display_name} diff --git a/site/src/modules/resources/AgentRowPreview.tsx b/site/src/modules/resources/AgentRowPreview.tsx index fc0fbe9666067..cace23e31b34c 100644 --- a/site/src/modules/resources/AgentRowPreview.tsx +++ b/site/src/modules/resources/AgentRowPreview.tsx @@ -158,12 +158,12 @@ const styles = { backgroundColor: theme.palette.divider, position: "absolute", top: 0, - left: 49, + left: 43, }, }), agentStatusWrapper: { - width: 36, + width: 24, display: "flex", justifyContent: "center", flexShrink: 0, diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx index ceeaccf3d207b..325a737e1adc1 100644 --- a/site/src/modules/resources/ResourceCard.tsx +++ b/site/src/modules/resources/ResourceCard.tsx @@ -99,11 +99,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { css={styles.resourceCardHeader} spacing={10} > - +
    diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index e0a2c99446aa5..c5fa7f0e63ad1 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -152,7 +152,7 @@ export const CreateWorkspacePageView: FC = ({ return ( Cancel}> - + {avatarLetter(template.name)} diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index b0c09351d6e78..659d4432593b9 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -15,7 +15,7 @@ export interface SelectedTemplateProps { export const SelectedTemplate: FC = ({ template }) => { return ( - + {avatarLetter(template.name)} diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 6811ac9d7ad7b..46c4378793410 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx @@ -102,7 +102,7 @@ const OAuth2AppRow: FC = ({ app }) => { title={app.name} avatar={ Boolean(app.icon) && ( - + ) diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index 844800e61b215..ae26285a364aa 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -81,7 +81,10 @@ const ExternalAuthPageView: FC = ({

    {externalAuth.installations.length > 0 && ( -
    +
    {externalAuth.installations.map((install) => { if (!install.account) { return; @@ -93,7 +96,7 @@ const ExternalAuthPageView: FC = ({ target="_blank" rel="noreferrer" > - + {avatarLetter(install.account.login)} diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index ee48901b961be..5f1c1a909ae7f 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -132,7 +132,7 @@ export const GroupsPageView: FC = ({ {group.members.map((member) => ( = ({ group }) => { {group.members.map((member) => ( - - + + + + + {organization.display_name || organization.name} + +
    {organization.display_name || organization.name} diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx index a4c491d766ae7..b69853e79c725 100644 --- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx +++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx @@ -206,7 +206,7 @@ export const TemplatePageHeader: FC = ({ } > - + {avatarLetter(template.name)} diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index 367dc6ad80628..78ee20edee1eb 100644 --- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx @@ -35,6 +35,7 @@ import { MoreMenuTrigger, ThreeDotsButton, } from "components/MoreMenu/MoreMenu"; +import { Stack } from "components/Stack/Stack"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; import type { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage"; import { type FC, useCallback, useEffect, useState } from "react"; @@ -156,56 +157,43 @@ const ExternalAuthRow: FC = ({ ? externalAuth.authenticated : (link?.authenticated ?? false); - let avatar = ( - - - {avatarLetter(name)} - - ); - - // If the link is authenticated and has a refresh token, show that it will automatically - // attempt to authenticate when the token expires. - if (link?.has_refresh_token && authenticated) { - avatar = ( - - - - } - > - {avatar} - - ); - } - return ( - - {link?.validate_error && ( - <> - + + + {avatarLetter(name)} + + {name} + {/* + * If the link is authenticated and has a refresh token, show that it will automatically + * attempt to authenticate when the token expires. + */} + {link?.has_refresh_token && authenticated && ( + - Error:{" "} + + + )} + + {link?.validate_error && ( + + + Error:{" "} + + {link?.validate_error} - {link?.validate_error} - - )} + )} + = ({ app, revoke }) => { return ( - - - - ) - } - /> + + + + {avatarLetter(app.name)} + + {app.name} + diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 952b98b912204..33e0990c8224c 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -2,7 +2,12 @@ import { useTheme } from "@emotion/react"; import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import type { Region, WorkspaceProxy } from "api/typesGenerated"; -import { Avatar, AvatarImage } from "components/Avatar/Avatar"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { HealthyBadge, @@ -42,26 +47,22 @@ export const ProxyRow: FC = ({ proxy, latency }) => { 0 - ? proxy.display_name - : proxy.name - } + src={proxy.icon_url} + title={proxy.display_name || proxy.name} + subtitle={proxy.path_app_url} avatar={ - proxy.icon_url !== "" && ( - - - - ) + + + + {avatarLetter(proxy.display_name || proxy.name)} + + } /> - - {proxy.path_app_url} - - - {statusBadge} + +
    {statusBadge}
     = ({ title, messages }) => { css={{ borderBottom: `1px solid ${theme.palette.divider}`, backgroundColor: theme.palette.background.default, - padding: "16px 24px", + padding: "16px 64px", }} >
    = ({ - Proxy - URL - Status + Proxy + + Status + Latency diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx index e8b26e4000010..fc3be6649b740 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx @@ -74,8 +74,8 @@ export const WorkspaceBuildPageView: FC = ({ return ( - - + +
    Build #{build.build_number} {build.initiator_name} diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 4771cf9884b03..8f51f8b91d2e1 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -187,7 +187,7 @@ export const WorkspacesTable: FC = ({ } avatar={ - {workspace.template_icon} + {workspace.name} } From 0a0b1cf639b3aa857f34cc530f3cff46b0026c48 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 18 Dec 2024 20:57:44 +0000 Subject: [PATCH 21/29] Fix a few style inconsistencies --- .../OAuth2AppsSettingsPageView.tsx | 24 ++++++++++--------- .../ExternalAuthPage/ExternalAuthPageView.tsx | 2 +- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 9 +++++-- .../pages/WorkspacesPage/WorkspacesTable.tsx | 11 +++++++-- 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 46c4378793410..776df30304451 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx @@ -10,7 +10,12 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { Avatar, AvatarImage } from "components/Avatar/Avatar"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; @@ -98,16 +103,13 @@ const OAuth2AppRow: FC = ({ app }) => { return ( - - - - ) - } - /> + + + + {avatarLetter(app.name)} + + {app.name} + diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index 78ee20edee1eb..f4881a7467075 100644 --- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx @@ -165,7 +165,7 @@ const ExternalAuthRow: FC = ({ {avatarLetter(name)} - {name} + {name} {/* * If the link is authenticated and has a refresh token, show that it will automatically * attempt to authenticate when the token expires. diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index a61945d96bed3..209afadf52e19 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -2,7 +2,12 @@ import ParameterIcon from "@mui/icons-material/CodeOutlined"; import GeneralIcon from "@mui/icons-material/SettingsOutlined"; import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Workspace } from "api/typesGenerated"; -import { Avatar, AvatarFallback, AvatarImage } from "components/Avatar/Avatar"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, @@ -22,7 +27,7 @@ export const Sidebar: FC = ({ username, workspace }) => { avatar={ {workspace.template_icon} - {workspace.name} + {avatarLetter(workspace.name)} } title={workspace.name} diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 8f51f8b91d2e1..0a3a0c1fd65a2 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -11,7 +11,12 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { visuallyHidden } from "@mui/utils"; import type { Template, Workspace } from "api/typesGenerated"; -import { Avatar, AvatarFallback, AvatarImage } from "components/Avatar/Avatar"; +import { + Avatar, + AvatarFallback, + AvatarImage, + avatarLetter, +} from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; @@ -188,7 +193,9 @@ export const WorkspacesTable: FC = ({ avatar={ - {workspace.name} + + {avatarLetter(workspace.name)} + } /> From dc410a701140c1fc895e9d6a2677243fc3aa0781 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 19 Dec 2024 14:55:41 +0000 Subject: [PATCH 22/29] Simplify Avatar usage --- site/src/components/Avatar/Avatar.stories.tsx | 25 +++---- site/src/components/Avatar/Avatar.tsx | 74 ++++++++----------- site/src/components/Avatar/AvatarCard.tsx | 13 +--- site/src/components/Avatar/AvatarData.tsx | 19 ++--- site/src/components/FullPageLayout/Topbar.tsx | 8 +- .../OrganizationAutocomplete.tsx | 12 +-- .../UserAutocomplete/UserAutocomplete.tsx | 16 ++-- .../groups/GroupAvatar/GroupAvatar.tsx | 14 +--- .../management/OrganizationSidebarView.tsx | 18 ++--- site/src/modules/resources/ResourceAvatar.tsx | 14 +--- .../modules/users/UserAvatar/UserAvatar.tsx | 15 +--- .../CreateWorkspacePageView.tsx | 17 ++--- .../CreateWorkspacePage/SelectedTemplate.tsx | 17 ++--- .../OAuth2AppsSettingsPageView.tsx | 13 +--- .../ExternalAuthPage/ExternalAuthPageView.tsx | 17 ++--- .../OrganizationSummaryPageView.tsx | 15 ++-- .../pages/TemplatePage/TemplatePageHeader.tsx | 17 ++--- .../pages/TemplateSettingsPage/Sidebar.tsx | 12 +-- .../pages/TemplatesPage/TemplatesPageView.tsx | 12 +-- .../ExternalAuthPage/ExternalAuthPageView.tsx | 12 +-- .../OAuth2ProviderPageView.tsx | 14 +--- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 18 ++--- .../UsersPage/UsersTable/UserGroupsCell.tsx | 19 ++--- .../WorkspacePage/ChangeVersionDialog.tsx | 17 ++--- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 23 ++---- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 16 ++-- .../pages/WorkspacesPage/WorkspacesButton.tsx | 18 ++--- .../pages/WorkspacesPage/WorkspacesEmpty.tsx | 12 +-- .../pages/WorkspacesPage/WorkspacesTable.tsx | 18 ++--- .../src/pages/WorkspacesPage/filter/menus.tsx | 19 ++--- 30 files changed, 168 insertions(+), 366 deletions(-) diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx index 2f140e0efd6af..822ba2a98ff41 100644 --- a/site/src/components/Avatar/Avatar.stories.tsx +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -1,11 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Avatar, AvatarFallback, AvatarImage } from "./Avatar"; +import { Avatar } from "./Avatar"; const meta: Meta = { title: "components/Avatar", component: Avatar, args: { - children: , + src: "https://github.com/kylecarbs.png", }, }; @@ -26,18 +26,14 @@ export const IconLgSize: Story = { args: { size: "lg", variant: "icon", - children: ( - - ), + src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png", }, }; export const IconDefaultSize: Story = { args: { variant: "icon", - children: ( - - ), + src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png", }, }; @@ -45,36 +41,33 @@ export const IconSmSize: Story = { args: { variant: "icon", size: "sm", - children: ( - - ), + src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png", }, }; export const NonSquaredIcon: Story = { args: { variant: "icon", - children: , + src: "/icon/docker.png", }, }; export const FallbackLgSize: Story = { args: { size: "lg", - - children: AR, + fallback: "Adriana Rodrigues", }, }; export const FallbackDefaultSize: Story = { args: { - children: AR, + fallback: "Adriana Rodrigues", }, }; export const FallbackSmSize: Story = { args: { size: "sm", - children: AR, + fallback: "Adriana Rodrigues", }, }; diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index e81f0af181fdb..5748df1bf975f 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -1,6 +1,3 @@ -import { useTheme } from "@emotion/react"; -import * as AvatarPrimitive from "@radix-ui/react-avatar"; -import { type VariantProps, cva } from "class-variance-authority"; /** * Copied from shadc/ui on 12/16/2024 * @see {@link https://ui.shadcn.com/docs/components/avatar} @@ -8,7 +5,14 @@ import { type VariantProps, cva } from "class-variance-authority"; * This component was updated to support the variants and match the styles from * the Figma design: * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0} + * + * It was also simplified to make usage easier and reduce boilerplate. + * @see {@link https://github.com/coder/coder/pull/15930#issuecomment-2552292440} */ + +import { useTheme } from "@emotion/react"; +import * as AvatarPrimitive from "@radix-ui/react-avatar"; +import { type VariantProps, cva } from "class-variance-authority"; import * as React from "react"; import { getExternalImageStylesFromUrl } from "theme/externalImages"; import { cn } from "utils/cn"; @@ -50,56 +54,38 @@ const avatarVariants = cva( }, ); -export interface AvatarProps - extends React.ComponentPropsWithoutRef, - VariantProps {} +export type AvatarProps = Omit & + VariantProps & { + src?: string; + alt?: string; + fallback?: string; + }; const Avatar = React.forwardRef< React.ElementRef, AvatarProps ->(({ className, size, variant, ...props }, ref) => ( - -)); -Avatar.displayName = AvatarPrimitive.Root.displayName; - -const AvatarImage = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { +>(({ className, size, variant, alt, fallback, ...props }, ref) => { const theme = useTheme(); return ( - + > + + {fallback && ( + + {fallback.charAt(0).toUpperCase()} + + )} + ); }); -AvatarImage.displayName = AvatarPrimitive.Image.displayName; - -const AvatarFallback = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; - -function avatarLetter(str: string): string { - return str.charAt(0).toUpperCase(); -} +Avatar.displayName = AvatarPrimitive.Root.displayName; -export { Avatar, AvatarImage, AvatarFallback, avatarLetter }; +export { Avatar }; diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx index 170f122d1384a..48de5acaef7d4 100644 --- a/site/src/components/Avatar/AvatarCard.tsx +++ b/site/src/components/Avatar/AvatarCard.tsx @@ -1,17 +1,11 @@ import { type CSSObject, useTheme } from "@emotion/react"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import type { FC, ReactNode } from "react"; type AvatarCardProps = { header: string; imgUrl: string; altText: string; - subtitle?: ReactNode; maxWidth?: number | "none"; }; @@ -75,10 +69,7 @@ export const AvatarCard: FC = ({ )}
    - - - {avatarLetter(header)} - + ); }; diff --git a/site/src/components/Avatar/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx index a04da3148da8d..fab188a234853 100644 --- a/site/src/components/Avatar/AvatarData.tsx +++ b/site/src/components/Avatar/AvatarData.tsx @@ -1,10 +1,5 @@ import { useTheme } from "@emotion/react"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; import type { FC, ReactNode } from "react"; @@ -34,14 +29,10 @@ export const AvatarData: FC = ({ const theme = useTheme(); if (!avatar) { avatar = ( - - - - {avatarLetter( - (typeof title === "string" ? title : imgFallbackText) || "-", - )} - - + ); } diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx index e78bf156b1829..31864ebe9ec70 100644 --- a/site/src/components/FullPageLayout/Topbar.tsx +++ b/site/src/components/FullPageLayout/Topbar.tsx @@ -2,7 +2,7 @@ import { css } from "@emotion/css"; import { useTheme } from "@emotion/react"; import Button, { type ButtonProps } from "@mui/material/Button"; import IconButton, { type IconButtonProps } from "@mui/material/IconButton"; -import { Avatar, AvatarImage } from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { type FC, type ForwardedRef, @@ -94,11 +94,7 @@ export const TopbarDivider: FC> = (props) => { }; export const TopbarAvatar: FC<{ src: string }> = ({ src }) => { - return ( - - - - ); + return ; }; type TopbarIconProps = HTMLAttributes; diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index ee5c7e6576967..348c312ec9fe7 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -5,12 +5,7 @@ import TextField from "@mui/material/TextField"; import { checkAuthorization } from "api/queries/authCheck"; import { organizations } from "api/queries/organizations"; import type { AuthorizationCheck, Organization } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { useDebouncedFunction } from "hooks/debounce"; import { @@ -137,10 +132,7 @@ export const OrganizationAutocomplete: FC = ({ ...params.InputProps, onChange: debouncedInputOnChange, startAdornment: value && ( - - - {avatarLetter(value.name)} - + ), endAdornment: ( <> diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index 3221de3c61048..f5bfd109c4a5c 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -6,12 +6,7 @@ import { getErrorMessage } from "api/errors"; import { organizationMembers } from "api/queries/organizations"; import { users } from "api/queries/users"; import type { OrganizationMemberWithUserData, User } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { useDebouncedFunction } from "hooks/debounce"; import { @@ -175,10 +170,11 @@ const InnerAutocomplete = ({ ...params.InputProps, onChange: debouncedInputOnChange, startAdornment: value && ( - - - {avatarLetter(value.username)} - + ), endAdornment: ( <> diff --git a/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx index 3411a590959ff..f20a95b29f2ad 100644 --- a/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx +++ b/site/src/modules/groups/GroupAvatar/GroupAvatar.tsx @@ -1,9 +1,4 @@ -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import type { FC } from "react"; export interface GroupAvatarProps { @@ -12,10 +7,5 @@ export interface GroupAvatarProps { } export const GroupAvatar: FC = ({ name, avatarURL }) => { - return ( - - - {avatarLetter(name)} - - ); + return ; }; diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index aed091fc24fae..104bf28c87b7c 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -1,12 +1,7 @@ import { cx } from "@emotion/css"; import AddIcon from "@mui/icons-material/Add"; import type { AuthorizationResponse, Organization } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { Loader } from "components/Loader/Loader"; import { Sidebar as BaseSidebar, @@ -133,12 +128,11 @@ const OrganizationSettingsNavigation: FC< active={active} href={urlForSubpage(organization.name)} icon={ - - - - {avatarLetter(organization.display_name)} - - + } > {organization.display_name} diff --git a/site/src/modules/resources/ResourceAvatar.tsx b/site/src/modules/resources/ResourceAvatar.tsx index d1110f8debbb2..0f930f4c0b2eb 100644 --- a/site/src/modules/resources/ResourceAvatar.tsx +++ b/site/src/modules/resources/ResourceAvatar.tsx @@ -1,10 +1,5 @@ import type { WorkspaceResource } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import type { FC } from "react"; import { getResourceIconPath } from "utils/workspace"; @@ -13,10 +8,5 @@ export type ResourceAvatarProps = { resource: WorkspaceResource }; export const ResourceAvatar: FC = ({ resource }) => { const avatarSrc = resource.icon || getResourceIconPath(resource.type); - return ( - - - {avatarLetter(resource.name)} - - ); + return ; }; diff --git a/site/src/modules/users/UserAvatar/UserAvatar.tsx b/site/src/modules/users/UserAvatar/UserAvatar.tsx index 07f175ee4c87f..26b0229f6dc25 100644 --- a/site/src/modules/users/UserAvatar/UserAvatar.tsx +++ b/site/src/modules/users/UserAvatar/UserAvatar.tsx @@ -1,10 +1,4 @@ -import { - Avatar, - AvatarFallback, - AvatarImage, - type AvatarProps, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; import type { FC } from "react"; export type UserAvatarProps = { @@ -18,10 +12,5 @@ export const UserAvatar: FC = ({ avatarURL, size, }) => { - return ( - - - {avatarLetter(username)} - - ); + return ; }; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index c5fa7f0e63ad1..c477ef5e64aca 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -5,12 +5,7 @@ import TextField from "@mui/material/TextField"; import type * as TypesGen from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { FormFields, FormFooter, @@ -153,10 +148,12 @@ export const CreateWorkspacePageView: FC = ({ Cancel}> - - - {avatarLetter(template.name)} - +
    diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 659d4432593b9..13687e4e45fcb 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,11 +1,6 @@ import type { Interpolation, Theme } from "@emotion/react"; import type { Template, TemplateExample } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; import type { FC } from "react"; @@ -16,10 +11,12 @@ export interface SelectedTemplateProps { export const SelectedTemplate: FC = ({ template }) => { return ( - - - {avatarLetter(template.name)} - + diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 776df30304451..8f47c288a840c 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx @@ -10,13 +10,7 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; -import { AvatarData } from "components/Avatar/AvatarData"; +import { Avatar } from "components/Avatar/Avatar"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; @@ -104,10 +98,7 @@ const OAuth2AppRow: FC = ({ app }) => { - - - {avatarLetter(app.name)} - + {app.name} diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index ae26285a364aa..5ff3b5a626b93 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -8,12 +8,7 @@ import Tooltip from "@mui/material/Tooltip"; import type { ApiErrorResponse } from "api/errors"; import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated"; import { Alert, AlertDetail } from "components/Alert/Alert"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { CopyButton } from "components/CopyButton/CopyButton"; import { SignInLayout } from "components/SignInLayout/SignInLayout"; import { Welcome } from "components/Welcome/Welcome"; @@ -96,12 +91,10 @@ const ExternalAuthPageView: FC = ({ target="_blank" rel="noreferrer" > - - - - {avatarLetter(install.account.login)} - - + ); diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx index 92aff85b2340a..c12b3c13a416c 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx @@ -1,4 +1,3 @@ -import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar"; import type { Organization } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { @@ -7,7 +6,6 @@ import { PageHeaderTitle, } from "components/PageHeader/PageHeader"; import { Stack } from "components/Stack/Stack"; -import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; interface OrganizationSummaryPageViewProps { @@ -26,12 +24,13 @@ export const OrganizationSummaryPageView: FC< }} > - - - - {organization.display_name || organization.name} - - + +
    {organization.display_name || organization.name} diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx index b69853e79c725..b04a2c6d103f5 100644 --- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx +++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx @@ -11,12 +11,7 @@ import type { Template, TemplateVersion, } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { Margins } from "components/Margins/Margins"; @@ -207,10 +202,12 @@ export const TemplatePageHeader: FC = ({ } > - - - {avatarLetter(template.name)} - +
    diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index 8a7abdaf1c7cb..d9ba11f642a52 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -3,12 +3,7 @@ import SecurityIcon from "@mui/icons-material/LockOutlined"; import GeneralIcon from "@mui/icons-material/SettingsOutlined"; import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Template } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, @@ -28,10 +23,7 @@ export const Sidebar: FC = ({ template }) => { - - {avatarLetter(template.name)} - + } title={template.display_name || template.name} linkTo={getLink( diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 318c7d076a1cf..f83940093310d 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -12,7 +12,7 @@ import TableRow from "@mui/material/TableRow"; import { hasError, isApiValidationError } from "api/errors"; import type { Template, TemplateExample } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { Avatar, AvatarImage } from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { DeprecatedBadge } from "components/Badges/Badges"; @@ -117,11 +117,11 @@ const TemplateRow: FC = ({ showOrganizations, template }) => { } subtitle={template.description} avatar={ - hasIcon && ( - - - - ) + } /> diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index f4881a7467075..59f89924864be 100644 --- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx @@ -20,12 +20,7 @@ import type { ListUserExternalAuthResponse, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { Loader } from "components/Loader/Loader"; import { @@ -161,10 +156,7 @@ const ExternalAuthRow: FC = ({ - - - {avatarLetter(name)} - + {name} {/* * If the link is authenticated and has a refresh token, show that it will automatically diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx index 8d9122b7d8719..93a6891cf5dd7 100644 --- a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx +++ b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx @@ -7,12 +7,7 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; @@ -74,11 +69,8 @@ const OAuth2AppRow: FC = ({ app, revoke }) => { - - - {avatarLetter(app.name)} - - {app.name} + + {app.name} diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 33e0990c8224c..387be0fa02fb5 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -2,12 +2,7 @@ import { useTheme } from "@emotion/react"; import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import type { Region, WorkspaceProxy } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { HealthyBadge, @@ -51,12 +46,11 @@ export const ProxyRow: FC = ({ proxy, latency }) => { title={proxy.display_name || proxy.name} subtitle={proxy.path_app_url} avatar={ - - - - {avatarLetter(proxy.display_name || proxy.name)} - - + } /> diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index 3bc72012e790e..00f135abb2bdc 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -4,12 +4,7 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import TableCell from "@mui/material/TableCell"; import type { Group } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { OverflowY } from "components/OverflowY/OverflowY"; import { Stack } from "components/Stack/Stack"; import { @@ -104,12 +99,12 @@ export const UserGroupsCell: FC = ({ userGroups }) => { alignItems: "center", }} > - - - - {avatarLetter(groupName)} - - + = ({
  • - - - {avatarLetter(option.name)} - - + } title={ = ({ subtitle="Organization" avatar={ orgIconUrl && ( - - - {avatarLetter(orgName)} - + ) } imgFallbackText={orgName} @@ -418,12 +410,11 @@ const WorkspaceBreadcrumb: FC = ({ } avatar={ - - - - {avatarLetter(templateDisplayName)} - - + } imgFallbackText={templateDisplayName} /> diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index 209afadf52e19..604fc2ed70d23 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -2,12 +2,7 @@ import ParameterIcon from "@mui/icons-material/CodeOutlined"; import GeneralIcon from "@mui/icons-material/SettingsOutlined"; import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Workspace } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, @@ -25,10 +20,11 @@ export const Sidebar: FC = ({ username, workspace }) => { - {workspace.template_icon} - {avatarLetter(workspace.name)} - + } title={workspace.name} linkTo={`/@${username}/${workspace.name}`} diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx index ae4ef9da3cb9b..504a8e156ce5f 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx @@ -3,12 +3,7 @@ import OpenIcon from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import type { Template } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { Loader } from "components/Loader/Loader"; import { MenuSearch } from "components/Menu/MenuSearch"; import { OverflowY } from "components/OverflowY/OverflowY"; @@ -143,12 +138,11 @@ const WorkspaceResultsRow: FC = ({ template }) => { alignItems: "center", }} > - - - - {avatarLetter(template.display_name || template.name)} - - +
    ({ diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx index 72350c6aec237..80b5602ba2c4c 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx @@ -1,12 +1,7 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"; import Button from "@mui/material/Button"; import type { Template } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; @@ -127,10 +122,7 @@ export const WorkspacesEmpty: FC = ({ })} >
    - - - {avatarLetter(t.name)} - +
    diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 0a3a0c1fd65a2..d3ed0d650e9a6 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -11,12 +11,7 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { visuallyHidden } from "@mui/utils"; import type { Template, Workspace } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; @@ -191,12 +186,11 @@ export const WorkspacesTable: FC = ({
    } avatar={ - - - - {avatarLetter(workspace.name)} - - + } />
    diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx index 97916443252dc..52e655914cec5 100644 --- a/site/src/pages/WorkspacesPage/filter/menus.tsx +++ b/site/src/pages/WorkspacesPage/filter/menus.tsx @@ -1,11 +1,6 @@ import { API } from "api/api"; import type { Template, WorkspaceStatus } from "api/typesGenerated"; -import { - Avatar, - AvatarFallback, - AvatarImage, - avatarLetter, -} from "components/Avatar/Avatar"; +import { Avatar } from "components/Avatar/Avatar"; import { SelectFilter, type SelectFilterOption, @@ -59,12 +54,12 @@ export const useTemplateFilterMenu = ({ const TemplateAvatar: FC<{ template: Template }> = ({ template }) => { return ( - - - - {avatarLetter(template.display_name || template.name)} - - + ); }; From 37a678ddb84c4384d0bcfd98c3822f95d48af5e8 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 19 Dec 2024 15:05:38 +0000 Subject: [PATCH 23/29] Fix missed src --- site/src/components/Avatar/Avatar.tsx | 51 +++++++++++-------- .../builds/BuildAvatar/BuildAvatar.tsx | 2 - .../management/OrganizationSettingsLayout.tsx | 4 +- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 5748df1bf975f..d1d2dac831411 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -54,7 +54,7 @@ const avatarVariants = cva( }, ); -export type AvatarProps = Omit & +export type AvatarProps = AvatarPrimitive.AvatarProps & VariantProps & { src?: string; alt?: string; @@ -64,28 +64,35 @@ export type AvatarProps = Omit & const Avatar = React.forwardRef< React.ElementRef, AvatarProps ->(({ className, size, variant, alt, fallback, ...props }, ref) => { - const theme = useTheme(); +>( + ( + { className, size, variant, src, alt, fallback, children, ...props }, + ref, + ) => { + const theme = useTheme(); - return ( - - - {fallback && ( - - {fallback.charAt(0).toUpperCase()} - - )} - - ); -}); + return ( + + + {fallback && ( + + {fallback.charAt(0).toUpperCase()} + + )} + {children} + + ); + }, +); Avatar.displayName = AvatarPrimitive.Root.displayName; export { Avatar }; diff --git a/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx index 5ca5888eb7759..e1be56e995b3f 100644 --- a/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx +++ b/site/src/modules/builds/BuildAvatar/BuildAvatar.tsx @@ -1,6 +1,4 @@ -import { css, cx } from "@emotion/css"; import { useTheme } from "@emotion/react"; -import Badge from "@mui/material/Badge"; import type { WorkspaceBuild } from "api/typesGenerated"; import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; import { BuildIcon } from "components/BuildIcon/BuildIcon"; diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx index 59332e6f07702..67f03fde46413 100644 --- a/site/src/modules/management/OrganizationSettingsLayout.tsx +++ b/site/src/modules/management/OrganizationSettingsLayout.tsx @@ -8,13 +8,13 @@ import { BreadcrumbSeparator, } from "components/Breadcrumb/Breadcrumb"; import { Loader } from "components/Loader/Loader"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { useAuthenticated } from "contexts/auth/RequireAuth"; import { RequirePermission } from "contexts/auth/RequirePermission"; import { useDashboard } from "modules/dashboard/useDashboard"; import { type FC, Suspense, createContext, useContext } from "react"; import { Outlet, useParams } from "react-router-dom"; import { OrganizationSidebar } from "./OrganizationSidebar"; +import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; export const OrganizationSettingsContext = createContext< OrganizationSettingsValue | undefined @@ -92,7 +92,7 @@ const OrganizationSettingsLayout: FC = () => { From 9e03115ed1314ece4ba4d296ddd428dacd09451e Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 19 Dec 2024 15:17:53 +0000 Subject: [PATCH 24/29] Fix remaining issues --- site/src/components/Avatar/Avatar.stories.tsx | 3 +++ site/src/pages/TemplatesPage/TemplatesPageView.tsx | 8 ++------ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx index 822ba2a98ff41..74ee1abeef46e 100644 --- a/site/src/components/Avatar/Avatar.stories.tsx +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -54,6 +54,7 @@ export const NonSquaredIcon: Story = { export const FallbackLgSize: Story = { args: { + src: "", size: "lg", fallback: "Adriana Rodrigues", }, @@ -61,12 +62,14 @@ export const FallbackLgSize: Story = { export const FallbackDefaultSize: Story = { args: { + src: "", fallback: "Adriana Rodrigues", }, }; export const FallbackSmSize: Story = { args: { + src: "", size: "sm", fallback: "Adriana Rodrigues", }, diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index f83940093310d..d936abb781b90 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -110,17 +110,13 @@ const TemplateRow: FC = ({ showOrganizations, template }) => { > 0 - ? template.display_name - : template.name - } + title={template.display_name || template.name} subtitle={template.description} avatar={ } /> From 6453ce3eba6434aaf55a40ca5dc01abf6621c979 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 19 Dec 2024 19:49:24 +0000 Subject: [PATCH 25/29] E2E fix + review requests --- .../tests/deployment/workspaceProxies.spec.ts | 21 +++---- site/src/components/Avatar/Avatar.stories.tsx | 6 +- site/src/components/Avatar/Avatar.tsx | 62 +++++++++---------- .../components/Avatar/AvatarCard.stories.tsx | 1 - site/src/components/Avatar/AvatarCard.tsx | 4 +- .../Filter/SelectFilter.stories.tsx | 4 +- site/src/components/Filter/UserFilter.tsx | 26 +++----- site/src/components/FullPageLayout/Topbar.tsx | 6 +- .../SelectMenu/SelectMenu.stories.tsx | 12 ++-- .../components/Sidebar/Sidebar.stories.tsx | 4 +- .../BuildAvatar/BuildAvatar.stories.tsx | 4 +- .../Navbar/UserDropdown/UserDropdown.tsx | 9 +-- .../GroupAvatar/GroupAvatar.stories.tsx | 19 ------ .../groups/GroupAvatar/GroupAvatar.tsx | 11 ---- .../management/OrganizationSettingsLayout.tsx | 8 +-- site/src/modules/tableFiltering/options.tsx | 14 ++--- .../users/UserAvatar/UserAvatar.stories.tsx | 24 ------- .../modules/users/UserAvatar/UserAvatar.tsx | 16 ----- .../AuditPage/AuditLogRow/AuditLogRow.tsx | 8 +-- site/src/pages/GroupsPage/GroupPage.tsx | 9 +-- site/src/pages/GroupsPage/GroupsPageView.tsx | 15 +++-- .../GroupsPage/GroupPage.tsx | 9 +-- .../GroupsPage/GroupsPageView.tsx | 15 +++-- .../OrganizationMembersPageView.tsx | 8 +-- .../TemplateInsightsPage.tsx | 12 +--- .../TemplateVersionsPage/VersionRow.tsx | 8 +-- .../TemplatePermissionsPageView.tsx | 8 +-- .../TemplateVersionEditor.tsx | 5 +- .../pages/TemplatesPage/TemplatesFilter.tsx | 9 +-- .../AccountPage/AccountUserGroups.tsx | 1 - site/src/pages/UserSettingsPage/Sidebar.tsx | 6 +- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 2 +- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 15 +---- 33 files changed, 128 insertions(+), 253 deletions(-) delete mode 100644 site/src/modules/groups/GroupAvatar/GroupAvatar.stories.tsx delete mode 100644 site/src/modules/groups/GroupAvatar/GroupAvatar.tsx delete mode 100644 site/src/modules/users/UserAvatar/UserAvatar.stories.tsx delete mode 100644 site/src/modules/users/UserAvatar/UserAvatar.tsx diff --git a/site/e2e/tests/deployment/workspaceProxies.spec.ts b/site/e2e/tests/deployment/workspaceProxies.spec.ts index 0e6edd544cc60..7e1f9d5129506 100644 --- a/site/e2e/tests/deployment/workspaceProxies.spec.ts +++ b/site/e2e/tests/deployment/workspaceProxies.spec.ts @@ -50,19 +50,16 @@ test("custom proxy is online", async ({ page }) => { waitUntil: "domcontentloaded", }); - const workspaceProxy = page.locator("table.MuiTable-root tr", { + const proxyRow = page.locator("table.MuiTable-root tr", { hasText: proxyName, }); - const workspaceProxyName = workspaceProxy.locator("td.name span"); - const workspaceProxyURL = workspaceProxy.locator("td.url"); - const workspaceProxyStatus = workspaceProxy.locator("td.status span"); + const summary = proxyRow.locator(".summary"); + const status = proxyRow.locator(".status"); - await expect(workspaceProxyName).toHaveText(proxyName); - await expect(workspaceProxyURL).toHaveText( - `http://127.0.0.1:${workspaceProxyPort}`, - ); - await expect(workspaceProxyStatus).toHaveText("Healthy"); + await expect(summary).toHaveText(proxyName); + await expect(summary).toHaveText(`http://127.0.0.1:${workspaceProxyPort}`); + await expect(status).toHaveText("Healthy"); // Tear down the proxy await stopWorkspaceProxy(proxyServer); @@ -82,13 +79,13 @@ const waitUntilWorkspaceProxyIsHealthy = async ( while (retries < maxRetries) { await page.reload(); - const workspaceProxy = page.locator("table.MuiTable-root tr", { + const proxyRow = page.locator("table.MuiTable-root tr", { hasText: proxyName, }); - const workspaceProxyStatus = workspaceProxy.locator("td.status span"); + const status = proxyRow.locator(".status"); try { - await expect(workspaceProxyStatus).toHaveText("Healthy", { + await expect(status).toHaveText("Healthy", { timeout: 1_000, }); return; // healthy! diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx index 74ee1abeef46e..55deeb9073dbe 100644 --- a/site/src/components/Avatar/Avatar.stories.tsx +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -16,7 +16,7 @@ export const ImageLgSize: Story = { args: { size: "lg" }, }; -export const ImageDefaultSize: Story = {}; +export const ImageMdSize: Story = {}; export const ImageSmSize: Story = { args: { size: "sm" }, @@ -30,7 +30,7 @@ export const IconLgSize: Story = { }, }; -export const IconDefaultSize: Story = { +export const IconMdSize: Story = { args: { variant: "icon", src: "https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png", @@ -60,7 +60,7 @@ export const FallbackLgSize: Story = { }, }; -export const FallbackDefaultSize: Story = { +export const FallbackMdSize: Story = { args: { src: "", fallback: "Adriana Rodrigues", diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index d1d2dac831411..c09bfaddddf10 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -23,16 +23,16 @@ const avatarVariants = cva( variants: { size: { lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium", - default: "h-[--avatar-default] w-[--avatar-default] text-2xs", + md: "h-[--avatar-default] w-[--avatar-default] text-2xs", sm: "h-[--avatar-sm] w-[--avatar-sm] text-[8px]", }, variant: { - default: "", - icon: "", + default: null, + icon: null, }, }, defaultVariants: { - size: "default", + size: "md", }, compoundVariants: [ { @@ -41,7 +41,7 @@ const avatarVariants = cva( className: "p-2", }, { - size: "default", + size: "md", variant: "icon", className: "p-1", }, @@ -57,42 +57,36 @@ const avatarVariants = cva( export type AvatarProps = AvatarPrimitive.AvatarProps & VariantProps & { src?: string; - alt?: string; + fallback?: string; }; const Avatar = React.forwardRef< React.ElementRef, AvatarProps ->( - ( - { className, size, variant, src, alt, fallback, children, ...props }, - ref, - ) => { - const theme = useTheme(); +>(({ className, size, variant, src, fallback, children, ...props }, ref) => { + const theme = useTheme(); - return ( - - - {fallback && ( - - {fallback.charAt(0).toUpperCase()} - - )} - {children} - - ); - }, -); + return ( + + + {fallback && ( + + {fallback.charAt(0).toUpperCase()} + + )} + {children} + + ); +}); Avatar.displayName = AvatarPrimitive.Root.displayName; export { Avatar }; diff --git a/site/src/components/Avatar/AvatarCard.stories.tsx b/site/src/components/Avatar/AvatarCard.stories.tsx index b1202be9d6387..cc8fb56e16c05 100644 --- a/site/src/components/Avatar/AvatarCard.stories.tsx +++ b/site/src/components/Avatar/AvatarCard.stories.tsx @@ -13,7 +13,6 @@ export const WithImage: Story = { args: { header: "Coder", imgUrl: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4", - altText: "Coder", subtitle: "56 members", }, }; diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx index 48de5acaef7d4..97df5c6ee765c 100644 --- a/site/src/components/Avatar/AvatarCard.tsx +++ b/site/src/components/Avatar/AvatarCard.tsx @@ -5,7 +5,6 @@ import type { FC, ReactNode } from "react"; type AvatarCardProps = { header: string; imgUrl: string; - altText: string; subtitle?: ReactNode; maxWidth?: number | "none"; }; @@ -13,7 +12,6 @@ type AvatarCardProps = { export const AvatarCard: FC = ({ header, imgUrl, - altText, subtitle, maxWidth = "none", }) => { @@ -69,7 +67,7 @@ export const AvatarCard: FC = ({ )}
    • - +
    ); }; diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx index dc5e328563c89..b8d7cc5d2bd7a 100644 --- a/site/src/components/Filter/SelectFilter.stories.tsx +++ b/site/src/components/Filter/SelectFilter.stories.tsx @@ -1,7 +1,6 @@ import { action } from "@storybook/addon-actions"; import type { Meta, StoryObj } from "@storybook/react"; import { expect, userEvent, within } from "@storybook/test"; -import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { useState } from "react"; import { withDesktopViewport } from "testHelpers/storybook"; import { @@ -9,9 +8,10 @@ import { type SelectFilterOption, SelectFilterSearch, } from "./SelectFilter"; +import { Avatar } from "components/Avatar/Avatar"; const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({ - startIcon: , + startIcon: , label: `Option ${i + 1}`, value: `option-${i + 1}`, })); diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx index fe7bbfb9618bb..49da0c6be8c3c 100644 --- a/site/src/components/Filter/UserFilter.tsx +++ b/site/src/components/Filter/UserFilter.tsx @@ -5,9 +5,9 @@ import { SelectFilterSearch, } from "components/Filter/SelectFilter"; import { useAuthenticated } from "contexts/auth/RequireAuth"; -import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import type { FC } from "react"; import { type UseFilterMenuOptions, useFilterMenu } from "./menu"; +import { Avatar } from "components/Avatar/Avatar"; export const useUserFilterMenu = ({ value, @@ -23,11 +23,7 @@ export const useUserFilterMenu = ({ label: me.username, value: me.username, startIcon: ( - + ), }, ...filtered, @@ -45,11 +41,7 @@ export const useUserFilterMenu = ({ label: me.username, value: me.username, startIcon: ( - + ), }; } @@ -61,9 +53,9 @@ export const useUserFilterMenu = ({ label: firstUser.username, value: firstUser.username, startIcon: ( - ), @@ -77,11 +69,7 @@ export const useUserFilterMenu = ({ label: user.username, value: user.username, startIcon: ( - + ), })); options = addMeAsFirstOption(options); diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx index 31864ebe9ec70..8acff9bc6f4c5 100644 --- a/site/src/components/FullPageLayout/Topbar.tsx +++ b/site/src/components/FullPageLayout/Topbar.tsx @@ -2,7 +2,7 @@ import { css } from "@emotion/css"; import { useTheme } from "@emotion/react"; import Button, { type ButtonProps } from "@mui/material/Button"; import IconButton, { type IconButtonProps } from "@mui/material/IconButton"; -import { Avatar } from "components/Avatar/Avatar"; +import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; import { type FC, type ForwardedRef, @@ -93,8 +93,8 @@ export const TopbarDivider: FC> = (props) => { ); }; -export const TopbarAvatar: FC<{ src: string }> = ({ src }) => { - return ; +export const TopbarAvatar: FC = (props) => { + return ; }; type TopbarIconProps = HTMLAttributes; diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx index 3ff2d4b0cfde7..af253f8c39219 100644 --- a/site/src/components/SelectMenu/SelectMenu.stories.tsx +++ b/site/src/components/SelectMenu/SelectMenu.stories.tsx @@ -1,7 +1,6 @@ import { action } from "@storybook/addon-actions"; import type { Meta, StoryObj } from "@storybook/react"; import { userEvent, within } from "@storybook/test"; -import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { withDesktopViewport } from "testHelpers/storybook"; import { SelectMenu, @@ -13,6 +12,7 @@ import { SelectMenuSearch, SelectMenuTrigger, } from "./SelectMenu"; +import { Avatar } from "components/Avatar/Avatar"; const meta: Meta = { title: "components/SelectMenu", @@ -25,7 +25,7 @@ const meta: Meta = { } + startIcon={} > {selectedOpt} @@ -36,7 +36,7 @@ const meta: Meta = { {opts.map((o) => ( - + {o} @@ -77,7 +77,7 @@ export const LongButtonText: Story = { } + startIcon={} > {selectedOpt} @@ -88,7 +88,7 @@ export const LongButtonText: Story = { {opts.map((o) => ( - + {o} @@ -115,7 +115,7 @@ export const NoSelectedOption: Story = { {opts.map((o) => ( - + {o} diff --git a/site/src/components/Sidebar/Sidebar.stories.tsx b/site/src/components/Sidebar/Sidebar.stories.tsx index 70884f6d91825..b50cd8ba71250 100644 --- a/site/src/components/Sidebar/Sidebar.stories.tsx +++ b/site/src/components/Sidebar/Sidebar.stories.tsx @@ -4,8 +4,8 @@ import SecurityIcon from "@mui/icons-material/LockOutlined"; import AccountIcon from "@mui/icons-material/Person"; import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined"; import type { Meta, StoryObj } from "@storybook/react"; -import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar"; +import { Avatar } from "components/Avatar/Avatar"; const meta: Meta = { title: "components/Sidebar", @@ -20,7 +20,7 @@ export const Default: Story = { children: ( } + avatar={} title="Jon" subtitle="jon@coder.com" /> diff --git a/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx b/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx index 107c3f795a885..ef7f1c49cc7d4 100644 --- a/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx +++ b/site/src/modules/builds/BuildAvatar/BuildAvatar.stories.tsx @@ -19,9 +19,9 @@ export const SmSize: Story = { }, }; -export const DefaultSize: Story = { +export const MdSize: Story = { args: { - size: "default", + size: "md", }, }; diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx index 325cc789f7eea..aab1dbf8835cc 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -7,10 +7,10 @@ import { PopoverContent, PopoverTrigger, } from "components/deprecated/Popover/Popover"; -import { UserAvatar } from "modules/users/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { navHeight } from "theme/constants"; import { UserDropdownContent } from "./UserDropdownContent"; +import { Avatar } from "components/Avatar/Avatar"; export interface UserDropdownProps { user: TypesGen.User; @@ -34,9 +34,10 @@ export const UserDropdown: FC = ({