From d65853762b7a2de5d4390a9e5995d95cac0bdbff Mon Sep 17 00:00:00 2001
From: "kasia.oczkowska" <katarzyna.oczkowska@theworkingroup.net>
Date: Fri, 10 Jan 2025 10:12:37 +0000
Subject: [PATCH] feat: add error snackbar on failed app authentication

---
 .../web/src/components/AddAppConnection/index.jsx    | 12 ++++++++++--
 .../src/components/ChooseConnectionSubstep/index.jsx |  8 ++++++--
 packages/web/src/locales/en.json                     |  1 +
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/AddAppConnection/index.jsx b/packages/web/src/components/AddAppConnection/index.jsx
index 9fef4c77..0744dd8a 100644
--- a/packages/web/src/components/AddAppConnection/index.jsx
+++ b/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();
diff --git a/packages/web/src/components/ChooseConnectionSubstep/index.jsx b/packages/web/src/components/ChooseConnectionSubstep/index.jsx
index 2f5df9ee..3c8a2bd6 100644
--- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx
+++ b/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);
     }
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index a4c0dd2b..781761e7 100644
--- a/packages/web/src/locales/en.json
+++ b/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",