fix: profile loading fix in org (#11618)

Co-authored-by: Leo Giovanetti <hello@leog.me>
pull/11625/head^2
Udit Takkar 2023-09-30 01:55:56 +05:30 committed by GitHub
parent e1f47ef40e
commit 4a81b59fc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 6 deletions

View File

@ -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 })} />
);

View File

@ -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();
});
});

View File

@ -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}

View File

@ -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",