feat: make errors inline in add app connection

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Alert from '@mui/material/Alert';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -27,7 +28,10 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
   const { application, connectionId, onClose } = props;
   const { key, fields, authenticationSteps, reconnectionSteps } = application;
   const formatMessage = useFormatMessage();
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
   const [inProgress, setInProgress] = React.useState(false);
+  const hasConnection = Boolean(connectionId);
+  const steps = hasConnection ? reconnectionSteps : authenticationSteps;
 
   React.useEffect(() => {
     if (window.opener) {
@@ -38,7 +42,7 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
 
   const submitHandler: SubmitHandler<FieldValues> = React.useCallback(async (data) => {
     setInProgress(true);
-    const hasConnection = Boolean(connectionId);
+    setErrorMessage(null);
 
     const response: Response = {
       key,
@@ -48,8 +52,6 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
       fields: data,
     };
 
-    const steps = hasConnection ? reconnectionSteps : authenticationSteps;
-
     let stepIndex = 0;
     while (stepIndex < steps.length) {
       const step = steps[stepIndex];
@@ -60,7 +62,9 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
 
         response[step.name] = stepResponse;
       } catch (err) {
-        console.log(err);
+        const error = err as Error;
+        console.log(error);
+        setErrorMessage(error.message);
         break;
       }
 
@@ -72,11 +76,17 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
     }
 
     setInProgress(false);
-  }, [connectionId, key, reconnectionSteps, authenticationSteps, onClose]);
+  }, [connectionId, key, steps, onClose]);
 
   return (
     <Dialog open={true} onClose={onClose}>
-      <DialogTitle>Add connection</DialogTitle>
+      <DialogTitle>{hasConnection ? formatMessage('app.reconnectConnection') : formatMessage('app.addConnection')}</DialogTitle>
+
+      {errorMessage && (
+        <Alert severity="error" sx={{ mb: 1, fontWeight: 500 }}>
+          {errorMessage}
+        </Alert>
+      )}
 
       <DialogContent>
         <DialogContentText tabIndex={-1} component="div">

packages/web/src/graphql/link.ts

@@ -20,10 +20,15 @@ const createHttpLink = (options: Pick<CreateLinkOptions, 'uri' | 'token'>): Apol
 }
 
 const NOT_AUTHORISED = 'Not Authorised!';
-const createErrorLink = (callback: CreateLinkOptions['onError']): ApolloLink => onError(({ graphQLErrors, networkError }) => {
+const createErrorLink = (callback: CreateLinkOptions['onError']): ApolloLink => onError(({ graphQLErrors, networkError, operation }) => {
+  const context = operation.getContext();
+  const autoSnackbar = context.autoSnackbar ?? true;
+
   if (graphQLErrors)
     graphQLErrors.forEach(({ message, locations, path }) => {
-      callback?.(message);
+      if (autoSnackbar) {
+        callback?.(message);
+      }
 
       console.log(
         `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
@@ -36,7 +41,9 @@ const createErrorLink = (callback: CreateLinkOptions['onError']): ApolloLink =>
     });
 
   if (networkError) {
-    callback?.(networkError.toString())
+    if (autoSnackbar) {
+      callback?.(networkError.toString())
+    }
     console.log(`[Network error]: ${networkError}`);
   }
 });

packages/web/src/helpers/authenticationSteps.ts

@@ -10,7 +10,13 @@ enum AuthenticationSteps {
 
 const processMutation = async (step: IAuthenticationStep, variables: IJSONObject) => {
   const mutation = MUTATIONS[step.name];
-  const mutationResponse = await apolloClient.mutate({ mutation, variables: { input: variables } });
+  const mutationResponse = await apolloClient.mutate({
+    mutation,
+    variables: { input: variables },
+    context: {
+      autoSnackbar: false,
+    },
+   });
   const responseData = mutationResponse.data[step.name];
 
   return responseData;

packages/web/src/locales/en.json

@@ -14,6 +14,7 @@
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
   "app.addConnection": "Add connection",
+  "app.reconnectConnection": "Reconnect connection",
   "app.createFlow": "Create flow",
   "app.settings": "Settings",
   "app.connections": "Connections",