fix: profile loading fix in org (#11618)

Co-authored-by: Leo Giovanetti <hello@leog.me>

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

@@ -86,13 +86,20 @@ const ProfileView = () => {
   const utils = trpc.useContext();
   const { update } = useSession();
 
-  const [fetchedImgSrc, setFetchedImgSrc] = useState<string | undefined>();
+  const [fetchedImgSrc, setFetchedImgSrc] = useState<string | undefined>(undefined);
 
   const { data: user, isLoading } = trpc.viewer.me.useQuery(undefined, {
-    onSuccess: (userData) => {
-      fetch(userData.avatar).then((res) => {
-        if (res.url) setFetchedImgSrc(res.url);
-      });
+    onSuccess: async (userData) => {
+      try {
+        if (!userData.organization) {
+          const res = await fetch(userData.avatar);
+          if (res.url) setFetchedImgSrc(res.url);
+        } else {
+          setFetchedImgSrc("");
+        }
+      } catch (err) {
+        setFetchedImgSrc("");
+      }
     },
   });
   const updateProfileMutation = trpc.viewer.updateProfile.useMutation({
@@ -218,7 +225,7 @@ const ProfileView = () => {
     [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"),
   };
 
-  if (isLoading || !user || !fetchedImgSrc)
+  if (isLoading || !user || fetchedImgSrc === undefined)
     return (
       <SkeletonLoader title={t("profile")} description={t("profile_description", { appName: APP_NAME })} />
     );

apps/web/playwright/profile.e2e.ts

@@ -0,0 +1,24 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Teams", () => {
+  test("Profile page is loaded for users in Organization", async ({ page, users }) => {
+    const teamMatesObj = [{ name: "teammate-1" }, { name: "teammate-2" }];
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isOrg: true,
+      hasSubteam: true,
+      teammates: teamMatesObj,
+    });
+    await owner.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    // check if user avatar is loaded
+    await expect(page.locator('[data-testid="organization-avatar"]')).toBeVisible();
+  });
+});

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

@@ -9,6 +9,7 @@ type OrganizationAvatarProps = AvatarProps & {
 const OrganizationAvatar = ({ size, imageSrc, alt, organizationSlug, ...rest }: OrganizationAvatarProps) => {
   return (
     <Avatar
+      data-testid="organization-avatar"
       size={size}
       imageSrc={imageSrc}
       alt={alt}

packages/ui/components/avatar/Avatar.tsx

@@ -20,6 +20,7 @@ export type AvatarProps = {
   accepted?: boolean;
   asChild?: boolean; // Added to ignore the outer span on the fallback component - messes up styling
   indicator?: React.ReactNode;
+  "data-testid"?: string;
 };
 
 const sizesPropsBySize = {
@@ -38,6 +39,7 @@ export function Avatar(props: AvatarProps) {
   const rootClass = classNames("aspect-square rounded-full", sizesPropsBySize[size]);
   let avatar = (
     <AvatarPrimitive.Root
+      data-testid={props?.["data-testid"]}
       className={classNames(
         "bg-emphasis item-center relative inline-flex aspect-square justify-center rounded-full",
         indicator ? "overflow-visible" : "overflow-hidden",