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>

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -3,7 +3,6 @@ import type { FormEvent } from "react";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
-import OrganizationMemberAvatar from "@calcom/features/ee/organizations/components/OrganizationMemberAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
@@ -11,6 +10,7 @@ import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
 import type { Ensure } from "@calcom/types/utils";
 import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
+import { UserAvatar } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
 
 type FormData = {
@@ -108,9 +108,7 @@ const UserProfile = () => {
   return (
     <form onSubmit={onSubmit}>
       <div className="flex flex-row items-center justify-start rtl:justify-end">
-        {user && (
-          <OrganizationMemberAvatar size="lg" user={user} previewSrc={imageSrc} organization={organization} />
-        )}
+        {user && <UserAvatar size="lg" user={user} previewSrc={imageSrc} organization={organization} />}
         <input
           ref={avatarRef}
           type="hidden"

apps/web/components/team/screens/Team.tsx

@@ -5,8 +5,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
-
-import { UserAvatar } from "@components/ui/avatar/UserAvatar";
+import { UserAvatar } from "@calcom/ui";
 
 type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];

apps/web/components/ui/avatar/UserAvatar.tsx

@@ -1,19 +0,0 @@
-import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
-import type { User } from "@calcom/prisma/client";
-import { Avatar } from "@calcom/ui";
-
-type UserAvatarProps = Omit<React.ComponentProps<typeof Avatar>, "alt" | "imageSrc"> & {
-  user: Pick<User, "organizationId" | "name" | "username">;
-  /**
-   * Useful when allowing the user to upload their own avatar and showing the avatar before it's uploaded
-   */
-  previewSrc?: string | null;
-};
-
-/**
- * It is aware of the user's organization to correctly show the avatar from the correct URL
- */
-export function UserAvatar(props: UserAvatarProps) {
-  const { user, previewSrc = getUserAvatarUrl(user), ...rest } = props;
-  return <Avatar {...rest} alt={user.name || "Nameless User"} imageSrc={previewSrc} />;
-}

apps/web/pages/[user].tsx

@@ -11,7 +11,6 @@ import {
   useEmbedStyles,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import OrganizationMemberAvatar from "@calcom/features/ee/organizations/components/OrganizationMemberAvatar";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
@@ -28,6 +27,7 @@ import { RedirectType, type EventType, type User } from "@calcom/prisma/client";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema, teamMetadataSchema } from "@calcom/prisma/zod-utils";
 import { HeadSeo, UnpublishedEntity } from "@calcom/ui";
+import { UserAvatar } from "@calcom/ui";
 import { Verified, ArrowRight } from "@calcom/ui/components/icon";
 
 import type { EmbedProps } from "@lib/withEmbedSsr";
@@ -101,7 +101,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
             "max-w-3xl px-4 py-24"
           )}>
           <div className="mb-8 text-center">
-            <OrganizationMemberAvatar
+            <UserAvatar
               size="xl"
               user={{
                 organizationId: profile.organization?.id,

apps/web/pages/settings/my-account/profile.tsx

@@ -6,7 +6,6 @@ import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
-import OrganizationMemberAvatar from "@calcom/features/ee/organizations/components/OrganizationMemberAvatar";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { APP_NAME, FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
@@ -41,6 +40,7 @@ import {
   SkeletonText,
   TextField,
 } from "@calcom/ui";
+import { UserAvatar } from "@calcom/ui";
 import { AlertTriangle, Trash2 } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
@@ -448,7 +448,8 @@ const ProfileForm = ({
                   : null;
               return (
                 <>
-                  <OrganizationMemberAvatar
+                  <UserAvatar
+                    data-testid="profile-upload-avatar"
                     previewSrc={value}
                     size="lg"
                     user={user}

apps/web/playwright/settings/upload-avatar.e2e.ts

@@ -43,8 +43,11 @@ test.describe("UploadAvatar", async () => {
       // todo: remove this; ideally the organization-avatar is updated the moment
       //       'Settings updated succesfully' is saved.
       await page.waitForLoadState("networkidle");
+      const avatar = page.getByTestId("profile-upload-avatar").locator("img");
 
-      await expect(await page.getByTestId("organization-avatar").innerHTML()).toContain(response.objectKey);
+      const src = await avatar.getAttribute("src");
+
+      await expect(src).toContain(response.objectKey);
 
       const urlResponse = await page.request.get(`/api/avatar/${response.objectKey}.png`, {
         maxRedirects: 0,