Handle logout errors with errorApi

Signed-off-by: Francesco Saltori <francescosaltori@gmail.com>

plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx

@@ -32,6 +32,7 @@ import {
   ProfileInfoApi,
   ProfileInfo,
   useApi,
+  errorApiRef,
   IconComponent,
 } from '@backstage/core-plugin-api';
 import { ProviderSettingsAvatar } from './ProviderSettingsAvatar';
@@ -46,6 +47,7 @@ export const ProviderSettingsItem = (props: {
   const { title, description, icon: Icon, apiRef } = props;
 
   const api = useApi(apiRef);
+  const errorApi = useApi(errorApiRef);
   const [signedIn, setSignedIn] = useState(false);
   const emptyProfile: ProfileInfo = {};
   const [profile, setProfile] = useState(emptyProfile);
@@ -126,7 +128,10 @@ export const ProviderSettingsItem = (props: {
           <Button
             variant="outlined"
             color="primary"
-            onClick={() => (signedIn ? api.signOut() : api.signIn())}
+            onClick={() => {
+              const action = signedIn ? api.signOut() : api.signIn();
+              action.catch(error => errorApi.post(error));
+            }}
           >
             {signedIn ? `Sign out` : `Sign in`}
           </Button>

plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx

@@ -26,7 +26,7 @@ import { UserSettingsAuthProviders } from './UserSettingsAuthProviders';
 import { ApiProvider, ConfigReader } from '@backstage/core-app-api';
 import { configApiRef, googleAuthApiRef } from '@backstage/core-plugin-api';
 
-const mockSignInHandler = jest.fn().mockReturnValue('');
+const mockSignInHandler = jest.fn().mockReturnValue(Promise.resolve());
 const mockGoogleAuth = {
   sessionState$: () => ({
     [Symbol.observable]: jest.fn(),

plugins/user-settings/src/components/General/UserSettingsMenu.tsx

@@ -18,10 +18,15 @@ import React from 'react';
 import { IconButton, ListItemIcon, Menu, MenuItem } from '@material-ui/core';
 import SignOutIcon from '@material-ui/icons/MeetingRoom';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { identityApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+  identityApiRef,
+  errorApiRef,
+  useApi,
+} from '@backstage/core-plugin-api';
 
 /** @public */
 export const UserSettingsMenu = () => {
+  const errorApi = useApi(errorApiRef);
   const identityApi = useApi(identityApiRef);
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<undefined | HTMLElement>(
@@ -48,7 +53,12 @@ export const UserSettingsMenu = () => {
         <MoreVertIcon />
       </IconButton>
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-        <MenuItem data-testid="sign-out" onClick={() => identityApi.signOut()}>
+        <MenuItem
+          data-testid="sign-out"
+          onClick={() =>
+            identityApi.signOut().catch(error => errorApi.post(error))
+          }
+        >
           <ListItemIcon>
             <SignOutIcon />
           </ListItemIcon>