From 4a81b59fc91a90e5c54187ee574cd3b01009af3f Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sat, 30 Sep 2023 01:55:56 +0530
Subject: [PATCH] fix: profile loading fix in org (#11618)

Co-authored-by: Leo Giovanetti <hello@leog.me>
---
 .../web/pages/settings/my-account/profile.tsx | 19 ++++++++++-----
 apps/web/playwright/profile.e2e.ts            | 24 +++++++++++++++++++
 .../components/OrganizationAvatar.tsx         |  1 +
 packages/ui/components/avatar/Avatar.tsx      |  2 ++
 4 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/playwright/profile.e2e.ts

diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index f2c86de11b7a03..33084f4369bee7 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/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 })} />
     );
diff --git a/apps/web/playwright/profile.e2e.ts b/apps/web/playwright/profile.e2e.ts
new file mode 100644
index 00000000000000..76692c9bd0f821
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/packages/features/ee/organizations/components/OrganizationAvatar.tsx b/packages/features/ee/organizations/components/OrganizationAvatar.tsx
index 8e753c6bf11858..85a361a2915ff4 100644
--- a/packages/features/ee/organizations/components/OrganizationAvatar.tsx
+++ b/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}
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
index cec1a9f26824e4..324032f9428396 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/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",