Merge branch 'master' into mobile-sidebar

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

plugins/user-settings/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @backstage/plugin-user-settings
 
+## 0.3.14
+
+### Patch Changes
+
+- 2a374057f5: Fix undefined identity bug in UserSettingsProfileCard caused by using deprecated methods of the IdentityApi
+- Updated dependencies
+  - @backstage/core-plugin-api@0.4.0
+  - @backstage/core-components@0.8.2
+
 ## 0.3.13
 
 ### Patch Changes

plugins/user-settings/api-report.md

@@ -119,5 +119,6 @@ export const UserSettingsThemeToggle: () => JSX.Element;
 export const useUserProfile: () => {
   profile: ProfileInfo;
   displayName: string;
+  loading: boolean;
 };
 ```

plugins/user-settings/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-user-settings",
   "description": "A Backstage plugin that provides a settings page",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -31,8 +31,8 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.8.1",
-    "@backstage/core-plugin-api": "^0.3.1",
+    "@backstage/core-components": "^0.8.2",
+    "@backstage/core-plugin-api": "^0.4.0",
     "@backstage/theme": "^0.2.14",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
@@ -44,10 +44,10 @@
     "react": "^16.13.1 || ^17.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.10.2",
-    "@backstage/core-app-api": "^0.2.1",
-    "@backstage/dev-utils": "^0.2.14",
-    "@backstage/test-utils": "^0.1.24",
+    "@backstage/cli": "^0.10.3",
+    "@backstage/core-app-api": "^0.3.0",
+    "@backstage/dev-utils": "^0.2.15",
+    "@backstage/test-utils": "^0.2.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",

plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx

@@ -21,6 +21,8 @@ import {
   wrapInTestApp,
 } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
@@ -30,7 +32,11 @@ const mockTheme: AppTheme = {
   id: 'light-theme',
   title: 'Mock Theme',
   variant: 'light',
-  theme: lightTheme,
+  Provider: ({ children }) => (
+    <ThemeProvider theme={lightTheme}>
+      <CssBaseline>{children}</CssBaseline>
+    </ThemeProvider>
+  ),
 };
 
 const apiRegistry = TestApiRegistry.from([

plugins/user-settings/src/components/useUserProfileInfo.ts

@@ -14,13 +14,46 @@
  * limitations under the License.
  */
 
-import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+import {
+  alertApiRef,
+  identityApiRef,
+  ProfileInfo,
+  useApi,
+} from '@backstage/core-plugin-api';
+import { useEffect } from 'react';
+import { useAsync } from 'react-use';
 
 export const useUserProfile = () => {
   const identityApi = useApi(identityApiRef);
-  const userId = identityApi.getUserId();
-  const profile = identityApi.getProfile();
-  const displayName = profile.displayName ?? userId;
+  const alertApi = useApi(alertApiRef);
 
-  return { profile, displayName };
+  const { value, loading, error } = useAsync(async () => {
+    return {
+      profile: await identityApi.getProfileInfo(),
+      identity: await identityApi.getBackstageIdentity(),
+    };
+  }, []);
+
+  useEffect(() => {
+    if (error) {
+      alertApi.post({
+        message: `Failed to load user identity: ${error}`,
+        severity: 'error',
+      });
+    }
+  }, [error, alertApi]);
+
+  if (loading || error) {
+    return {
+      profile: {} as ProfileInfo,
+      displayName: '',
+      loading,
+    };
+  }
+
+  return {
+    profile: value!.profile,
+    displayName: value!.profile.displayName ?? value!.identity.userEntityRef,
+    loading,
+  };
 };