chore: front-end-avatars (#12716)

* Update UserAvatar and remove org avatar

* Update Imports

* Fix imports to use calcom/ui

* type: fix imports

* fix: use testId on profile

* test: use image src instead of innerHTML

* fix: Allow alt on useravatar

* test: add testId to org profile

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

packages/features/ee/organizations/components/OrganizationMemberAvatar.tsx

@@ -1,47 +0,0 @@
-import classNames from "@calcom/lib/classNames";
-import { getOrgAvatarUrl } from "@calcom/lib/getAvatarUrl";
-// import { Avatar } from "@calcom/ui";
-import { UserAvatar } from "@calcom/web/components/ui/avatar/UserAvatar";
-
-type OrganizationMemberAvatarProps = React.ComponentProps<typeof UserAvatar> & {
-  organization: {
-    id: number;
-    slug: string | null;
-    requestedSlug: string | null;
-  } | null;
-};
-
-/**
- * Shows the user's avatar along with a small organization's avatar
- */
-const OrganizationMemberAvatar = ({
-  size,
-  user,
-  organization,
-  previewSrc,
-  ...rest
-}: OrganizationMemberAvatarProps) => {
-  return (
-    <UserAvatar
-      data-testid="organization-avatar"
-      size={size}
-      user={user}
-      previewSrc={previewSrc}
-      indicator={
-        organization ? (
-          <div
-            className={classNames("absolute bottom-0 right-0 z-10", size === "lg" ? "h-6 w-6" : "h-10 w-10")}>
-            <img
-              src={getOrgAvatarUrl(organization)}
-              alt={user.username || ""}
-              className="flex h-full items-center justify-center rounded-full"
-            />
-          </div>
-        ) : null
-      }
-      {...rest}
-    />
-  );
-};
-
-export default OrganizationMemberAvatar;

packages/features/ee/organizations/pages/components/MemberListItem.tsx

@@ -12,11 +12,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   Tooltip,
+  UserAvatar,
 } from "@calcom/ui";
 import { ExternalLink, MoreHorizontal } from "@calcom/ui/components/icon";
 
-import { UserAvatar } from "@components/ui/avatar/UserAvatar";
-
 interface Props {
   member: RouterOutputs["viewer"]["organizations"]["listOtherTeamMembers"]["rows"][number];
 }

packages/features/ee/organizations/pages/settings/profile.tsx

@@ -205,6 +205,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
               return (
                 <>
                   <Avatar
+                    data-testid="profile-upload-avatar"
                     alt={defaultValues.name || ""}
                     imageSrc={getPlaceholderAvatar(value, defaultValues.name as string)}
                     size="lg"

packages/features/ee/teams/components/AddNewTeamMembers.tsx

@@ -13,9 +13,16 @@ import { useTelemetry, telemetryEventTypes } from "@calcom/lib/telemetry";
 import { MembershipRole } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, Button, showToast, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import {
+  Badge,
+  Button,
+  showToast,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+  UserAvatar,
+} from "@calcom/ui";
 import { ArrowRight, Plus, Trash2 } from "@calcom/ui/components/icon";
-import { UserAvatar } from "@calcom/web/components/ui/avatar/UserAvatar";
 
 type TeamMember = RouterOutputs["viewer"]["teams"]["get"]["members"][number];
 

packages/features/ee/teams/components/MemberListItem.tsx

@@ -26,8 +26,8 @@ import {
   showToast,
   Tooltip,
 } from "@calcom/ui";
+import { UserAvatar } from "@calcom/ui";
 import { ExternalLink, MoreHorizontal, Edit2, Lock, UserX } from "@calcom/ui/components/icon";
-import { UserAvatar } from "@calcom/web/components/ui/avatar/UserAvatar";
 
 import MemberChangeRoleModal from "./MemberChangeRoleModal";
 import TeamAvailabilityModal from "./TeamAvailabilityModal";

packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx

@@ -9,7 +9,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc";
 import { Button, ButtonGroup, DataTable } from "@calcom/ui";
-import { UserAvatar } from "@calcom/web/components/ui/avatar/UserAvatar";
+import { UserAvatar } from "@calcom/ui";
 
 import { UpgradeTip } from "../../tips/UpgradeTip";
 import { TBContext, createTimezoneBuddyStore } from "../store";