Merge pull request #2271 from automatisch/AUT-1389

feat: add error snackbar on failed app authentication

packages/web/src/components/AddAppConnection/index.jsx

@@ -14,6 +14,7 @@ import InputCreator from 'components/InputCreator';
 import * as URLS from 'config/urls';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
 import useAppAuth from 'hooks/useAppAuth';
@@ -39,6 +40,7 @@ function AddAppConnection(props) {
     useShared: !!oauthClientId,
   });
   const queryClient = useQueryClient();
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   React.useEffect(function relayProviderData() {
     if (window.opener) {
@@ -58,8 +60,14 @@ function AddAppConnection(props) {
       if (!authenticate) return;
 
       const asyncAuthenticate = async () => {
-        await authenticate();
-        navigate(URLS.APP_CONNECTIONS(key));
+        try {
+          await authenticate();
+          navigate(URLS.APP_CONNECTIONS(key));
+        } catch (error) {
+          enqueueSnackbar(error?.message || formatMessage('genericError'), {
+            variant: 'error',
+          });
+        }
       };
 
       asyncAuthenticate();

packages/web/src/components/ChooseConnectionSubstep/index.jsx

@@ -23,6 +23,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import useAppConnections from 'hooks/useAppConnections';
 import useTestConnection from 'hooks/useTestConnection';
 import useOAuthClients from 'hooks/useOAuthClients';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -55,6 +56,7 @@ function ChooseConnectionSubstep(props) {
     React.useState(false);
   const queryClient = useQueryClient();
   const { data: appOAuthClients } = useOAuthClients(application.key);
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   const { authenticate } = useAuthenticateApp({
     appKey: application.key,
@@ -156,8 +158,10 @@ function ChooseConnectionSubstep(props) {
           },
         });
       }
-    } catch (err) {
-      // void
+    } catch (error) {
+      enqueueSnackbar(error?.message || formatMessage('genericError'), {
+        variant: 'error',
+      });
     } finally {
       setShowAddSharedConnectionDialog(false);
     }

packages/web/src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "brandText": "Automatisch",
   "searchPlaceholder": "Search",
+  "genericError": "Something went wrong. Please try again.",
   "accountDropdownMenu.settings": "Settings",
   "accountDropdownMenu.adminSettings": "Admin",
   "accountDropdownMenu.logout": "Logout",