From 2a374057f59bc94240d9a2ddc3434478e2f3dfac Mon Sep 17 00:00:00 2001 From: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com> Date: Thu, 16 Dec 2021 16:49:59 +0100 Subject: [PATCH 1/3] fix(user-settings): use non-deprecated IdentityApi methods This fixes the undefined identity error that is being thrown on the user-settings page. Signed-off-by: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com> --- .changeset/cuddly-suns-sit.md | 5 +++ .../src/components/useUserProfileInfo.ts | 31 ++++++++++++++++--- 2 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 .changeset/cuddly-suns-sit.md diff --git a/.changeset/cuddly-suns-sit.md b/.changeset/cuddly-suns-sit.md new file mode 100644 index 0000000000..f1fe16add6 --- /dev/null +++ b/.changeset/cuddly-suns-sit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-user-settings': patch +--- + +Fix undefined identity bug in UserSettingsProfileCard caused by using deprecated methods of the IdentityApi diff --git a/plugins/user-settings/src/components/useUserProfileInfo.ts b/plugins/user-settings/src/components/useUserProfileInfo.ts index 336ea34ee4..075dead332 100644 --- a/plugins/user-settings/src/components/useUserProfileInfo.ts +++ b/plugins/user-settings/src/components/useUserProfileInfo.ts @@ -14,13 +14,36 @@ * limitations under the License. */ -import { useApi, identityApiRef } from '@backstage/core-plugin-api'; +import { + useApi, + identityApiRef, + BackstageUserIdentity, + ProfileInfo, +} from '@backstage/core-plugin-api'; +import { useEffect, useState } from 'react'; export const useUserProfile = () => { const identityApi = useApi(identityApiRef); - const userId = identityApi.getUserId(); - const profile = identityApi.getProfile(); - const displayName = profile.displayName ?? userId; + + 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); + }; + + useEffect(() => { + if (!displayName) { + getUserProfile(); + } + }); return { profile, displayName }; }; From 375ed38b167156c529fe5e8db441ec3a62b79ef7 Mon Sep 17 00:00:00 2001 From: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com> Date: Fri, 17 Dec 2021 11:31:51 +0100 Subject: [PATCH 2/3] feat(user-settings): use useAsync and return loading status Signed-off-by: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com> --- plugins/user-settings/api-report.md | 1 + .../src/components/useUserProfileInfo.ts | 45 ++++++++++--------- 2 files changed, 25 insertions(+), 21 deletions(-) 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, + }; }; From 7e889bfb30c100a592623cea69d2f5a6869cd3d4 Mon Sep 17 00:00:00 2001 From: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com> Date: Fri, 17 Dec 2021 15:12:30 +0100 Subject: [PATCH 3/3] fix(user-settings): prevent using undefined value Signed-off-by: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com> --- .../src/components/useUserProfileInfo.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/plugins/user-settings/src/components/useUserProfileInfo.ts b/plugins/user-settings/src/components/useUserProfileInfo.ts index fbc7b92dcb..6f9b5c154e 100644 --- a/plugins/user-settings/src/components/useUserProfileInfo.ts +++ b/plugins/user-settings/src/components/useUserProfileInfo.ts @@ -17,6 +17,7 @@ import { alertApiRef, identityApiRef, + ProfileInfo, useApi, } from '@backstage/core-plugin-api'; import { useEffect } from 'react'; @@ -37,16 +38,22 @@ export const useUserProfile = () => { if (error) { alertApi.post({ message: `Failed to load user identity: ${error}`, - severity: "error", + severity: 'error', }); } }, [error, alertApi]); + if (loading || error) { + return { + profile: {} as ProfileInfo, + displayName: '', + loading, + }; + } + return { - profile: loading ? {} : value!.profile, - displayName: loading - ? '' - : value!.profile.displayName ?? value!.identity.userEntityRef, + profile: value!.profile, + displayName: value!.profile.displayName ?? value!.identity.userEntityRef, loading, }; };