From dad8b9cedcac91036ba294143931faa85f94495f Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 16 Dec 2024 13:24:47 +0000 Subject: [PATCH 1/5] Deprecate current Avatar component --- site/src/components/AvatarCard/AvatarCard.tsx | 2 +- site/src/components/AvatarData/AvatarData.tsx | 2 +- site/src/components/BuildAvatar/BuildAvatar.tsx | 2 +- site/src/components/FullPageLayout/Topbar.tsx | 5 ++++- site/src/components/GroupAvatar/GroupAvatar.tsx | 2 +- .../OrganizationAutocomplete/OrganizationAutocomplete.tsx | 2 +- site/src/components/TemplateAvatar/TemplateAvatar.tsx | 2 +- site/src/components/UserAutocomplete/UserAutocomplete.tsx | 2 +- site/src/components/UserAvatar/UserAvatar.tsx | 2 +- .../components/{ => deprecated}/Avatar/Avatar.stories.tsx | 0 site/src/components/{ => deprecated}/Avatar/Avatar.tsx | 3 +++ site/src/modules/resources/ResourceAvatar.tsx | 2 +- .../pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +- site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx | 2 +- .../OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx | 2 +- site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx | 2 +- site/src/pages/TemplatePage/TemplatePageHeader.tsx | 2 +- site/src/pages/TemplateSettingsPage/Sidebar.tsx | 2 +- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- .../ExternalAuthPage/ExternalAuthPageView.tsx | 2 +- .../OAuth2ProviderPage/OAuth2ProviderPageView.tsx | 2 +- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 2 +- site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx | 2 +- site/src/pages/WorkspacePage/ChangeVersionDialog.tsx | 2 +- site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 2 +- site/src/pages/WorkspaceSettingsPage/Sidebar.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesButton.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesTable.tsx | 2 +- 29 files changed, 33 insertions(+), 27 deletions(-) rename site/src/components/{ => deprecated}/Avatar/Avatar.stories.tsx (100%) rename site/src/components/{ => deprecated}/Avatar/Avatar.tsx (97%) diff --git a/site/src/components/AvatarCard/AvatarCard.tsx b/site/src/components/AvatarCard/AvatarCard.tsx index 5605b4c239732..a98dfc54b519d 100644 --- a/site/src/components/AvatarCard/AvatarCard.tsx +++ b/site/src/components/AvatarCard/AvatarCard.tsx @@ -1,5 +1,5 @@ import { type CSSObject, useTheme } from "@emotion/react"; -import { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC, ReactNode } from "react"; type AvatarCardProps = { diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index eb9fa81d4981d..14d222d97ad53 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -1,5 +1,5 @@ import { useTheme } from "@emotion/react"; -import { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; import type { FC, ReactNode } from "react"; diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx index e9870b4e746be..4eff27e853c98 100644 --- a/site/src/components/BuildAvatar/BuildAvatar.tsx +++ b/site/src/components/BuildAvatar/BuildAvatar.tsx @@ -2,7 +2,7 @@ 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 { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; import { BuildIcon } from "components/BuildIcon/BuildIcon"; import { useClassName } from "hooks/useClassName"; import type { FC } from "react"; diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx index 7787b0fe50295..ab51e93b395df 100644 --- a/site/src/components/FullPageLayout/Topbar.tsx +++ b/site/src/components/FullPageLayout/Topbar.tsx @@ -2,7 +2,10 @@ 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/Avatar/Avatar"; +import { + type AvatarProps, + ExternalAvatar, +} from "components/deprecated/Avatar/Avatar"; import { type FC, type ForwardedRef, diff --git a/site/src/components/GroupAvatar/GroupAvatar.tsx b/site/src/components/GroupAvatar/GroupAvatar.tsx index c65e68f4f0dc7..fb65c448aef9e 100644 --- a/site/src/components/GroupAvatar/GroupAvatar.tsx +++ b/site/src/components/GroupAvatar/GroupAvatar.tsx @@ -1,6 +1,6 @@ import Group from "@mui/icons-material/Group"; import Badge from "@mui/material/Badge"; -import { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { type ClassName, useClassName } from "hooks/useClassName"; import type { FC } from "react"; diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index 2c4fc89f6ea21..8dae083d16bc7 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 { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { useDebouncedFunction } from "hooks/debounce"; import { diff --git a/site/src/components/TemplateAvatar/TemplateAvatar.tsx b/site/src/components/TemplateAvatar/TemplateAvatar.tsx index 1882ae5cbd758..dc0017f459b19 100644 --- a/site/src/components/TemplateAvatar/TemplateAvatar.tsx +++ b/site/src/components/TemplateAvatar/TemplateAvatar.tsx @@ -1,5 +1,5 @@ import type { Template } from "api/typesGenerated"; -import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; +import { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; interface TemplateAvatarProps extends AvatarProps { diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index d80773cb4de16..d2a114b92cf51 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 { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { useDebouncedFunction } from "hooks/debounce"; import { diff --git a/site/src/components/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx index c0815651ea348..5244dc6de20e0 100644 --- a/site/src/components/UserAvatar/UserAvatar.tsx +++ b/site/src/components/UserAvatar/UserAvatar.tsx @@ -1,4 +1,4 @@ -import { Avatar, type AvatarProps } from "components/Avatar/Avatar"; +import { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; export type UserAvatarProps = { diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/deprecated/Avatar/Avatar.stories.tsx similarity index 100% rename from site/src/components/Avatar/Avatar.stories.tsx rename to site/src/components/deprecated/Avatar/Avatar.stories.tsx diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/deprecated/Avatar/Avatar.tsx similarity index 97% rename from site/src/components/Avatar/Avatar.tsx rename to site/src/components/deprecated/Avatar/Avatar.tsx index 6e0e4c650573d..b0e70a278c7af 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/deprecated/Avatar/Avatar.tsx @@ -40,6 +40,9 @@ const fitImageStyles = css` } `; +/** + * @deprecated Use `Avatar` from `@components/Avatar` instead. + */ export const Avatar: FC = ({ size = "md", fitImage, diff --git a/site/src/modules/resources/ResourceAvatar.tsx b/site/src/modules/resources/ResourceAvatar.tsx index d910bbe0c6678..488f3ac55f2f6 100644 --- a/site/src/modules/resources/ResourceAvatar.tsx +++ b/site/src/modules/resources/ResourceAvatar.tsx @@ -1,6 +1,6 @@ import { visuallyHidden } from "@mui/utils"; import type { WorkspaceResource } from "api/typesGenerated"; -import { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { type FC, useId } from "react"; import { getResourceIconPath } from "utils/workspace"; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 1c158b8225e2f..82b3210cee045 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -5,7 +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 } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { FormFields, FormFooter, diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 7d949c3a3ed40..e3ee30d771c46 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,6 +1,6 @@ import type { Interpolation, Theme } from "@emotion/react"; import type { Template, TemplateExample } from "api/typesGenerated"; -import { ExternalAvatar } from "components/Avatar/Avatar"; +import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; import type { FC } from "react"; diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 7481d8d5c1684..d7bfce87fe3df 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 { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index 73248c66fd21d..a75fe98dd9493 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -8,7 +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 } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { CopyButton } from "components/CopyButton/CopyButton"; import { SignInLayout } from "components/SignInLayout/SignInLayout"; import { Welcome } from "components/Welcome/Welcome"; diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx index 4ed1103194225..55879803512ba 100644 --- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx +++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx @@ -11,7 +11,7 @@ import type { Template, TemplateVersion, } from "api/typesGenerated"; -import { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { Margins } from "components/Margins/Margins"; diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index 67294d248e373..a1948d25fff87 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -3,7 +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 { ExternalAvatar } from "components/Avatar/Avatar"; +import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index da6d4e113229b..a8db7fadcfe13 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 { ExternalAvatar } from "components/Avatar/Avatar"; +import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; import { DeprecatedBadge } from "components/Badges/Badges"; diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index cb3334a9a8bf0..d5809df06e719 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 { Avatar, ExternalAvatar } from "components/Avatar/Avatar"; +import { Avatar, ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { Loader } from "components/Loader/Loader"; import { diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx index 446f62ee5e922..d7d410fdad9e3 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 { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { TableLoader } from "components/TableLoader/TableLoader"; import type { FC } from "react"; diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 39f3d4e8ae60a..f16b68630d6bc 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 { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { HealthyBadge, diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index 0400c5ac05bab..f86e4d4e6c3ca 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -4,7 +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 } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { OverflowY } from "components/OverflowY/OverflowY"; import { Popover, diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index 206f7b743f28f..480d3d3a4fdac 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 { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import type { DialogProps } from "components/Dialogs/Dialog"; diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 7ca112befb4e5..32668ecf863a1 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 { ExternalAvatar } from "components/Avatar/Avatar"; +import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { Topbar, diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index f10729d2c5c35..2253c4d963be1 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -2,7 +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 } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Sidebar as BaseSidebar, SidebarHeader, diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx index 8723469ad4a7b..8b2c9f5f36c43 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx @@ -3,7 +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 } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Loader } from "components/Loader/Loader"; import { MenuSearch } from "components/Menu/MenuSearch"; import { OverflowY } from "components/OverflowY/OverflowY"; diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx index c2a1ced06800d..6e0228cec6f2d 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx @@ -1,7 +1,7 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"; import Button from "@mui/material/Button"; import type { Template } from "api/typesGenerated"; -import { Avatar } from "components/Avatar/Avatar"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index cff9873274a55..9db012c11f56f 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -11,7 +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 { ExternalAvatar } from "components/Avatar/Avatar"; +import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; From ad7e11ab7e7a5d66027304554193023493349bb3 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 16 Dec 2024 14:06:17 +0000 Subject: [PATCH 2/5] Rename deprecated avatar story --- site/src/components/deprecated/Avatar/Avatar.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/deprecated/Avatar/Avatar.stories.tsx b/site/src/components/deprecated/Avatar/Avatar.stories.tsx index 944185b8e2350..c06390c450d89 100644 --- a/site/src/components/deprecated/Avatar/Avatar.stories.tsx +++ b/site/src/components/deprecated/Avatar/Avatar.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Avatar, AvatarIcon } from "./Avatar"; const meta: Meta = { - title: "components/Avatar", + title: "components/DeprecatedAvatar", component: Avatar, }; From 8f48a832528464b38dac6cbfd21960a6ca157dc0 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 16 Dec 2024 15:58:12 +0000 Subject: [PATCH 3/5] Add new Avatar component --- site/package.json | 1 + site/pnpm-lock.yaml | 82 +++++++++++++++- site/src/components/Avatar/Avatar.stories.tsx | 73 ++++++++++++++ site/src/components/Avatar/Avatar.tsx | 94 +++++++++++++++++++ 4 files changed, 249 insertions(+), 1 deletion(-) create mode 100644 site/src/components/Avatar/Avatar.stories.tsx create mode 100644 site/src/components/Avatar/Avatar.tsx diff --git a/site/package.json b/site/package.json index 1951d32ad82c2..e4d65d55f7c5f 100644 --- a/site/package.json +++ b/site/package.json @@ -50,6 +50,7 @@ "@mui/system": "5.16.7", "@mui/utils": "5.16.6", "@mui/x-tree-view": "7.18.0", + "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-dialog": "1.1.2", "@radix-ui/react-label": "2.1.0", "@radix-ui/react-slider": "1.2.1", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index a9218c49473e1..e0d1cfab8b2f3 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -63,6 +63,9 @@ importers: '@mui/x-tree-view': specifier: 7.18.0 version: 7.18.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-avatar': + specifier: 1.1.2 + version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-dialog': specifier: 1.1.2 version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1550,6 +1553,19 @@ packages: '@radix-ui/primitive@1.1.0': resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==} + '@radix-ui/react-avatar@1.1.2': + resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-collection@1.1.0': resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==} peerDependencies: @@ -1581,6 +1597,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-compose-refs@1.1.1': + resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-context@1.0.1': resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} peerDependencies: @@ -1822,6 +1847,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-primitive@2.0.1': + resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slider@1.2.1': resolution: {integrity: sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==} peerDependencies: @@ -1853,6 +1891,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-slot@1.1.1': + resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-switch@1.1.1': resolution: {integrity: sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==} peerDependencies: @@ -3513,7 +3560,6 @@ packages: eslint@8.52.0: resolution: {integrity: sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true espree@9.6.1: @@ -7213,6 +7259,18 @@ snapshots: '@radix-ui/primitive@1.1.0': {} + '@radix-ui/react-avatar@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1) @@ -7238,6 +7296,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.12)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + '@radix-ui/react-context@1.0.1(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -7455,6 +7519,15 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-primitive@2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-slot': 1.1.1(@types/react@18.3.12)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-slider@1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/number': 1.1.0 @@ -7489,6 +7562,13 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@radix-ui/react-slot@1.1.1(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + '@radix-ui/react-switch@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/primitive': 1.1.0 diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx new file mode 100644 index 0000000000000..c1e2f590a91d3 --- /dev/null +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -0,0 +1,73 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Avatar, AvatarFallback, AvatarImage } from "./Avatar"; + +const meta: Meta = { + title: "components/Avatar", + component: Avatar, + args: { + children: , + }, +}; + +export default meta; +type Story = StoryObj; + +export const ImageLgSize: Story = { + args: { size: "lg" }, +}; + +export const ImageDefaultSize: Story = {}; + +export const ImageSmSize: Story = { + args: { size: "sm" }, +}; + +export const IconLgSize: Story = { + args: { + size: "lg", + variant: "icon", + children: ( + + ), + }, +}; + +export const IconDefaultSize: Story = { + args: { + variant: "icon", + children: ( + + ), + }, +}; + +export const IconSmSize: Story = { + args: { + variant: "icon", + size: "sm", + children: ( + + ), + }, +}; + +export const FallbackLgSize: Story = { + args: { + size: "lg", + + children: AR, + }, +}; + +export const FallbackDefaultSize: Story = { + args: { + children: AR, + }, +}; + +export const FallbackSmSize: Story = { + args: { + size: "sm", + children: AR, + }, +}; diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx new file mode 100644 index 0000000000000..933f3683d451f --- /dev/null +++ b/site/src/components/Avatar/Avatar.tsx @@ -0,0 +1,94 @@ +/** + * Copied from shadc/ui on 12/16/2024 + * @see {@link https://ui.shadcn.com/docs/components/avatar} + * + * 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} + */ +import * as React from "react"; +import * as AvatarPrimitive from "@radix-ui/react-avatar"; +import { cn } from "utils/cn"; +import { cva, type VariantProps } from "class-variance-authority"; + +const avatarVariants = cva( + "relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary", + { + 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]", + }, + variant: { + default: "", + icon: "", + }, + }, + defaultVariants: { + size: "default", + }, + compoundVariants: [ + { + size: "lg", + variant: "icon", + className: "p-[9px]", + }, + { + size: "default", + variant: "icon", + className: "p-[3px]", + }, + { + size: "sm", + variant: "icon", + className: "p-[2px]", + }, + ], + }, +); + +export interface AvatarProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +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) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarImage, AvatarFallback }; From 40615ed2715aabc3e02f431374d2703c280779a3 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 08:41:10 +0000 Subject: [PATCH 4/5] Mark other Avatar components as deprecated --- site/src/components/deprecated/Avatar/Avatar.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/src/components/deprecated/Avatar/Avatar.tsx b/site/src/components/deprecated/Avatar/Avatar.tsx index b0e70a278c7af..1fcd6208655d2 100644 --- a/site/src/components/deprecated/Avatar/Avatar.tsx +++ b/site/src/components/deprecated/Avatar/Avatar.tsx @@ -70,6 +70,9 @@ export const Avatar: FC = ({ ); }; +/** + * @deprecated Use `Avatar` from `@components/Avatar` instead. + */ export const ExternalAvatar: FC = (props) => { const theme = useTheme(); @@ -88,6 +91,8 @@ type AvatarIconProps = { /** * 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(); From 260171a3096c138a26bd194ea44f1ec310024810 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 17 Dec 2024 08:45:20 +0000 Subject: [PATCH 5/5] Fix fmt --- site/src/components/Avatar/Avatar.tsx | 4 ++-- site/src/components/AvatarData/AvatarData.tsx | 2 +- site/src/components/BuildAvatar/BuildAvatar.tsx | 2 +- .../OrganizationAutocomplete/OrganizationAutocomplete.tsx | 2 +- site/src/components/UserAutocomplete/UserAutocomplete.tsx | 2 +- site/src/modules/resources/ResourceAvatar.tsx | 2 +- .../src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +- site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx | 2 +- .../OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx | 2 +- site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx | 2 +- site/src/pages/TemplatePage/TemplatePageHeader.tsx | 2 +- site/src/pages/TemplateSettingsPage/Sidebar.tsx | 2 +- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- .../ExternalAuthPage/ExternalAuthPageView.tsx | 2 +- .../OAuth2ProviderPage/OAuth2ProviderPageView.tsx | 2 +- .../UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx | 2 +- site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx | 2 +- site/src/pages/WorkspacePage/ChangeVersionDialog.tsx | 2 +- site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 2 +- site/src/pages/WorkspaceSettingsPage/Sidebar.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesButton.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesTable.tsx | 2 +- 23 files changed, 24 insertions(+), 24 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 933f3683d451f..54807455dd030 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -1,3 +1,5 @@ +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} @@ -7,9 +9,7 @@ * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0} */ import * as React from "react"; -import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { cn } from "utils/cn"; -import { cva, type VariantProps } from "class-variance-authority"; const avatarVariants = cva( "relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary", diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index 14d222d97ad53..93952bb84d2fc 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -1,6 +1,6 @@ import { useTheme } from "@emotion/react"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC, ReactNode } from "react"; export interface AvatarDataProps { diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx index 4eff27e853c98..ae9e9e9af4904 100644 --- a/site/src/components/BuildAvatar/BuildAvatar.tsx +++ b/site/src/components/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 { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; import { BuildIcon } from "components/BuildIcon/BuildIcon"; +import { Avatar, type AvatarProps } from "components/deprecated/Avatar/Avatar"; import { useClassName } from "hooks/useClassName"; import type { FC } from "react"; import { getDisplayWorkspaceBuildStatus } from "utils/workspace"; diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index 8dae083d16bc7..6adf28f852f04 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -5,8 +5,8 @@ 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 } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useDebouncedFunction } from "hooks/debounce"; import { type ChangeEvent, diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index d2a114b92cf51..cf9c9ea6ecc0b 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -6,8 +6,8 @@ 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 } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { useDebouncedFunction } from "hooks/debounce"; import { type ChangeEvent, diff --git a/site/src/modules/resources/ResourceAvatar.tsx b/site/src/modules/resources/ResourceAvatar.tsx index 488f3ac55f2f6..14d3b3248a882 100644 --- a/site/src/modules/resources/ResourceAvatar.tsx +++ b/site/src/modules/resources/ResourceAvatar.tsx @@ -1,7 +1,7 @@ import { visuallyHidden } from "@mui/utils"; import type { WorkspaceResource } from "api/typesGenerated"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { type FC, useId } from "react"; import { getResourceIconPath } from "utils/workspace"; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 82b3210cee045..5cda28cb495b5 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -5,7 +5,6 @@ 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 } from "components/deprecated/Avatar/Avatar"; import { FormFields, FormFooter, @@ -22,6 +21,7 @@ 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"; diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index e3ee30d771c46..921dd9d173557 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,7 +1,7 @@ import type { Interpolation, Theme } from "@emotion/react"; import type { Template, TemplateExample } from "api/typesGenerated"; -import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { Stack } from "components/Stack/Stack"; +import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; export interface SelectedTemplateProps { diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index d7bfce87fe3df..47d19f48d68eb 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 } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/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"; diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index a75fe98dd9493..d6e19665cdf92 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -8,10 +8,10 @@ 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 } from "components/deprecated/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 { diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx index 55879803512ba..4f6d345b0c4fb 100644 --- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx +++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx @@ -11,7 +11,6 @@ import type { Template, TemplateVersion, } from "api/typesGenerated"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"; import { Margins } from "components/Margins/Margins"; @@ -30,6 +29,7 @@ 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"; diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index a1948d25fff87..b28c27cda005c 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -3,12 +3,12 @@ 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 { ExternalAvatar } from "components/deprecated/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"; diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index a8db7fadcfe13..34667c437ceee 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -12,7 +12,6 @@ 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 { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; import { DeprecatedBadge } from "components/Badges/Badges"; @@ -37,6 +36,7 @@ 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"; diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index d5809df06e719..09ec684bf56c6 100644 --- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx @@ -20,7 +20,6 @@ import type { ListUserExternalAuthResponse, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { Avatar, ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { Loader } from "components/Loader/Loader"; import { @@ -31,6 +30,7 @@ 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"; diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx index d7d410fdad9e3..17e953222c07e 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 } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { TableLoader } from "components/TableLoader/TableLoader"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import type { FC } from "react"; export type OAuth2ProviderPageViewProps = { diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index f16b68630d6bc..0005e1fe28a68 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -2,7 +2,6 @@ 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 } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { HealthyBadge, @@ -10,6 +9,7 @@ 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"; diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index f86e4d4e6c3ca..f26bcb36c8b13 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -4,7 +4,6 @@ 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 } from "components/deprecated/Avatar/Avatar"; import { OverflowY } from "components/OverflowY/OverflowY"; import { Popover, @@ -12,6 +11,7 @@ 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 = { diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index 480d3d3a4fdac..cd12862097f45 100644 --- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx +++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx @@ -6,7 +6,6 @@ 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 { Avatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import type { DialogProps } from "components/Dialogs/Dialog"; @@ -14,6 +13,7 @@ import { FormFields } from "components/Form/Form"; import { Loader } from "components/Loader/Loader"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage"; import { type FC, useRef, useState } from "react"; import { createDayString } from "utils/createDayString"; diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 32668ecf863a1..25d1b0e7a9fab 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -6,7 +6,6 @@ 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 { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { Topbar, @@ -19,6 +18,7 @@ import { 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 { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge"; diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index 2253c4d963be1..b89e6f5b7d887 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 } from "components/deprecated/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 { diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx index 8b2c9f5f36c43..2cbca11fcef60 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx @@ -3,7 +3,6 @@ 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 } from "components/deprecated/Avatar/Avatar"; import { Loader } from "components/Loader/Loader"; import { MenuSearch } from "components/Menu/MenuSearch"; import { OverflowY } from "components/OverflowY/OverflowY"; @@ -13,6 +12,7 @@ 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"; diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx index 6e0228cec6f2d..dcf96ec5c0d8b 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx @@ -1,8 +1,8 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"; import Button from "@mui/material/Button"; import type { Template } from "api/typesGenerated"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; import { Link } from "react-router-dom"; diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 9db012c11f56f..2ca1b28ca1632 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -11,7 +11,6 @@ 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 { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; @@ -20,6 +19,7 @@ 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"; pFad - Phonifier reborn

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

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


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy