diff --git a/plugins/user-settings/api-report.md b/plugins/user-settings/api-report.md index a801f2e807..0d8f132f37 100644 --- a/plugins/user-settings/api-report.md +++ b/plugins/user-settings/api-report.md @@ -119,5 +119,6 @@ export const UserSettingsThemeToggle: () => JSX.Element; export const useUserProfile: () => { profile: ProfileInfo; displayName: string; + loading: boolean; }; ``` diff --git a/plugins/user-settings/src/components/useUserProfileInfo.ts b/plugins/user-settings/src/components/useUserProfileInfo.ts index 075dead332..fbc7b92dcb 100644 --- a/plugins/user-settings/src/components/useUserProfileInfo.ts +++ b/plugins/user-settings/src/components/useUserProfileInfo.ts @@ -15,35 +15,38 @@ */ import { - useApi, + alertApiRef, identityApiRef, - BackstageUserIdentity, - ProfileInfo, + useApi, } from '@backstage/core-plugin-api'; -import { useEffect, useState } from 'react'; +import { useEffect } from 'react'; +import { useAsync } from 'react-use'; export const useUserProfile = () => { const identityApi = useApi(identityApiRef); + const alertApi = useApi(alertApiRef); - const [displayName, setDisplayName] = useState< - string | BackstageUserIdentity - >(''); - const [profile, setProfile] = useState({}); - - const getUserProfile = async () => { - const backstageIdentity = await identityApi.getBackstageIdentity(); - const profileInfo = await identityApi.getProfileInfo(); - const name = profileInfo.displayName ?? backstageIdentity; - - setDisplayName(name); - setProfile(profileInfo); - }; + const { value, loading, error } = useAsync(async () => { + return { + profile: await identityApi.getProfileInfo(), + identity: await identityApi.getBackstageIdentity(), + }; + }, []); useEffect(() => { - if (!displayName) { - getUserProfile(); + if (error) { + alertApi.post({ + message: `Failed to load user identity: ${error}`, + severity: "error", + }); } - }); + }, [error, alertApi]); - return { profile, displayName }; + return { + profile: loading ? {} : value!.profile, + displayName: loading + ? '' + : value!.profile.displayName ?? value!.identity.userEntityRef, + loading, + }; };