8000 refactor: replace and remove deprecated Avatar component by BrunoQuaresma · Pull Request #15930 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

refactor: replace and remove deprecated Avatar component #15930

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 32 commits into from
Dec 20, 2024
Merged

refactor: replace and remove deprecated Avatar component #15930

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
dbf1eb9
Add avatarLetters utility
BrunoQuaresma Dec 17, 2024
8f24c9e
Fix avatar for non squared icon
BrunoQuaresma Dec 17, 2024
e689d42
Replace avatar o template menu
BrunoQuaresma Dec 17, 2024
6f8c280
Move UserAvatar to modules/users
BrunoQuaresma Dec 17, 2024
e72cecb
Only use one letter on fallback to simplify changes
BrunoQuaresma Dec 17, 2024
758f240
Refactor UserAvatar to user the new Avatar component
BrunoQuaresma Dec 17, 2024
22c241c
Move GroupAvatar to modules/groups
BrunoQuaresma Dec 17, 2024
8ecbfc5
Update GroupAvatar to use latest Avatar component
BrunoQuaresma Dec 17, 2024
081bb47
Move BuildAvatar to modules/builds
BrunoQuaresma Dec 17, 2024
83ca623
Update BuildAvatar to use latest Avatar component
BrunoQuaresma Dec 17, 2024
dff92f7
Move AvatarCard to components/Avatar
BrunoQuaresma Dec 17, 2024
52ea623
Update AccountUserGroups to use the new Avatar component
BrunoQuaresma Dec 17, 2024
16c194d
Move AvatarData to components/Avatar
BrunoQuaresma Dec 17, 2024
1caeffd
Update AvatarData to 8000 use new Avatar component
BrunoQuaresma Dec 17, 2024
4f12e95
Update remaining components
BrunoQuaresma Dec 17, 2024
76c211d
Fix lint issues
BrunoQuaresma Dec 17, 2024
08fee38
Remove deprecated Avatar
BrunoQuaresma Dec 17, 2024
bfd9244
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresma Dec 18, 2024
d6fc56b
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresma Dec 18, 2024
f47ed9d
Align avatar with the timeline vertical line
BrunoQuaresma Dec 18, 2024
7304999
Fix selected template avatar
BrunoQuaresma Dec 18, 2024
9fdb4fd
Adjust components for the new Avatar
BrunoQuaresma Dec 18, 2024
0a0b1cf
Fix a few style inconsistencies
BrunoQuaresma Dec 18, 2024
f079dcd
Merge branch 'main' of https://github.com/coder/coder into bq/use-new…
BrunoQuaresma Dec 19, 2024
dc410a7
Simplify Avatar usage
BrunoQuaresma Dec 19, 2024
37a678d
Fix missed src
BrunoQuaresma Dec 19, 2024
9e03115
Fix remaining issues
BrunoQuaresma Dec 19, 2024
6453ce3
E2E fix + review requests
BrunoQuaresma Dec 19, 2024
bb8e9af
Fix fmt
BrunoQuaresma Dec 19, 2024
417cab7
Fix assertions
BrunoQuaresma Dec 20, 2024
ad61871
Fix locators
BrunoQuaresma Dec 20, 2024
d57833b
Change locator to use .summary
BrunoQuaresma Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix fmt
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Dec 19, 2024
commit bb8e9afc2eb587f087dd08514bc9ee7e4da9b16e
2 changes: 1 addition & 1 deletion site/src/components/Filter/SelectFilter.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/react";
import { expect, userEvent, within } from "@storybook/test";
import { Avatar } from "components/Avatar/Avatar";
import { useState } from "react";
import { withDesktopViewport } from "testHelpers/storybook";
import {
SelectFilter,
type SelectFilterOption,
SelectFilterSearch,
} from "./SelectFilter";
import { Avatar } from "components/Avatar/Avatar";

const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
startIcon: <Avatar fallback={`username ${i + 1}`} size="sm" />,
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Filter/UserFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { API } from "api/api";
import { Avatar } from "components/Avatar/Avatar";
import {
SelectFilter,
type SelectFilterOption,
Expand All @@ -7,7 +8,6 @@ import {
import { useAuthenticated } from "contexts/auth/RequireAuth";
import type { FC } from "react";
import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
import { Avatar } from "components/Avatar/Avatar";

export const useUserFilterMenu = ({
value,
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/SelectMenu/SelectMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/react";
import { userEvent, within } from "@storybook/test";
import { Avatar } from "components/Avatar/Avatar";
import { withDesktopViewport } from "testHelpers/storybook";
import {
SelectMenu,
Expand All @@ -12,7 +13,6 @@ import {
SelectMenuSearch,
SelectMenuTrigger,
} from "./SelectMenu";
import { Avatar } from "components/Avatar/Avatar";

const meta: Meta<typeof SelectMenu> = {
title: "components/SelectMenu",
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Sidebar/Sidebar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";
import { Avatar } from "components/Avatar/Avatar";
import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";

const meta: Meta<typeof Sidebar> = {
title: "components/Sidebar",
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
import Badge from "@mui/material/Badge";
import type * as TypesGen from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import {
Popover,
Expand All @@ -10,7 +11,6 @@ import {
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;
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/management/OrganizationSettingsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { AuthorizationResponse, Organization } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import {
Breadcrumb,
BreadcrumbItem,
Expand All @@ -14,7 +15,6 @@ 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 { Avatar } from "components/Avatar/Avatar";

export const OrganizationSettingsContext = createContext<
OrganizationSettingsValue | undefined
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/tableFiltering/options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* the workspaces and audits page that have a risk of getting out of sync.
*/
import { API } from "api/api";
import { Avatar } from "components/Avatar/Avatar";
import {
SelectFilter,
type SelectFilterOption,
Expand All @@ -17,7 +18,6 @@ import {
type UseFilterMenuOptions,
useFilterMenu,
} from "components/Filter/menu";
import { Avatar } from "components/Avatar/Avatar";
import type { FC } from "react";

// Organization helpers ////////////////////////////////////////////////////////
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import Link from "@mui/material/Link";
import TableCell from "@mui/material/TableCell";
import Tooltip from "@mui/material/Tooltip";
import type { AuditLog } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
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 { Avatar } from "components/Avatar/Avatar";
import { type FC, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import type { ThemeRole } from "theme/roles";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/GroupsPage/GroupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
} from "api/queries/groups";
import type { Group, ReducedUser, User } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
import { EmptyState } from "components/EmptyState/EmptyState";
Expand All @@ -45,7 +46,6 @@ import {
TableToolbar,
} from "components/TableToolbar/TableToolbar";
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { Avatar } from "components/Avatar/Avatar";
import { type FC, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/GroupsPage/GroupsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ 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 { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
Expand All @@ -20,7 +21,6 @@ import {
TableLoaderSkeleton,
TableRowSkeleton,
} from "components/TableLoader/TableLoader";
import { Avatar } from "components/Avatar/Avatar";
import type { FC } from "react";
import { Link as RouterLink, useNavigate } from "react-router-dom";
import { docs } from "utils/docs";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
View file
Open in desktop
F438
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import type {
ReducedUser,
} from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
import { EmptyState } from "components/EmptyState/EmptyState";
Expand All @@ -44,7 +45,6 @@ import {
TableToolbar,
} from "components/TableToolbar/TableToolbar";
import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { Avatar } from "components/Avatar/Avatar";
import { type FC, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ 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 { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
Expand All @@ -21,7 +22,6 @@ import {
TableRowSkeleton,
} from "components/TableLoader/TableLoader";
import { useClickableTableRow } from "hooks";
import { Avatar } from "components/Avatar/Avatar";
import type { FC } from "react";
import { Link as RouterLink, useNavigate } from "react-router-dom";
import { docs } from "utils/docs";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
View file
Open in desktop
10000
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import type {
User,
} from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
import {
Expand All @@ -28,7 +29,6 @@ import {
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
import { Stack } from "components/Stack/Stack";
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { Avatar } from "components/Avatar/Avatar";
import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
import { type FC, useState } from "react";
import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
ActiveUserChart,
ActiveUsersTitle,
} from "components/ActiveUserChart/ActiveUserChart";
import { Avatar } from "components/Avatar/Avatar";
import {
HelpTooltip,
HelpTooltipContent,
Expand All @@ -44,7 +45,6 @@ import {
subDays,
} from "date-fns";
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
import { Avatar } from "components/Avatar/Avatar";
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
import {
type FC,
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import Button from "@mui/material/Button";
import TableCell from "@mui/material/TableCell";
import type { TemplateVersion } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
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 { useClickableTableRow } from "hooks/useClickableTableRow";
import { Avatar } from "components/Avatar/Avatar";
import type { FC } from "react";
import { useNavigate } from "react-router-dom";

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import type {
TemplateRole,
TemplateUser,
} from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { EmptyState } from "components/EmptyState/EmptyState";
Expand All @@ -36,7 +37,6 @@ import {
UserOrGroupAutocomplete,
type UserOrGroupAutocompleteValue,
} from "./UserOrGroupAutocomplete";
import { Avatar } from "components/Avatar/Avatar";

type AddTemplateUserOrGroupProps = {
templateID: string;
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/TemplatesPage/TemplatesFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { API } from "api/api";
import type { Organization } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { Filter, MenuSkeleton, type useFilter } from "components/Filter/Filter";
import {
SelectFilter,
type SelectFilterOption,
} from "components/Filter/SelectFilter";
import { useFilterMenu } from "components/Filter/menu";
import { Avatar } from "components/Avatar/Avatar";
import type { FC } from "react";

interface TemplatesFilterProps {
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/UserSettingsPage/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined";
import AccountIcon from "@mui/icons-material/Person";
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
import type { User } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
import { GitIcon } from "components/Icons/GitIcon";
import {
Expand All @@ -14,7 +15,6 @@ import {
SidebarNavItem,
} from "components/Sidebar/Sidebar";
import { useDashboard } from "modules/dashboard/useDashboard";
import { Avatar } from "components/Avatar/Avatar";
import type { FC } from "react";

interface SidebarProps {
Expand Down
Loading
0