From 6adcec07f63eeaf4c55aa32919a49a9d39679325 Mon Sep 17 00:00:00 2001
From: Francesco Saltori <francescosaltori@gmail.com>
Date: Tue, 27 Sep 2022 14:45:05 +0200
Subject: [PATCH] Handle logout errors with errorApi

Signed-off-by: Francesco Saltori <francescosaltori@gmail.com>
---
 .../AuthProviders/ProviderSettingsItem.tsx         |  7 ++++++-
 .../UserSettingsAuthProviders.test.tsx             |  2 +-
 .../src/components/General/UserSettingsMenu.tsx    | 14 ++++++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx
index ab6ad8dff9..a5962d47ab 100644
--- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx
+++ b/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>
diff --git a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx b/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx
index 4e14dec2ef..fe5440d355 100644
--- a/plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.test.tsx
+++ b/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(),
diff --git a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx b/plugins/user-settings/src/components/General/UserSettingsMenu.tsx
index 2483f6cd36..c83bdd5b74 100644
--- a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx
+++ b/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>