[DT-841]Display error from Consent on Sign In (#2701)

Co-authored-by: rjohanek <[email protected]>

DEVNOTES.md

@@ -27,7 +27,7 @@ Ensure that your `/etc/hosts` file has an entry for `local.dsde-dev.broadinstitu
 127.0.0.1	local.dsde-dev.broadinstitute.org
 ```
 
-Download cert files from dev project (requires access to correct project - see [DUOS team members](https://github.com/orgs/DataBiosphere/teams/duos) for more specifics). Cert files are regenerated on a 3-month rotation so these will need to be updated when they are expired:
+Download cert files from dev project (requires access to correct project - see [DUOS team members](https://github.com/orgs/DataBiosphere/teams/duos) for more specifics). Cert files are regenerated on a 3-month rotation so these will need to be updated when they are expired. The following commands need to be done on the Broad VPN.
 ```shell
 gcloud container clusters get-credentials --zone us-central1-a --project <project> terra-dev
 kubectl -n local-dev get secrets local-dev-cert -o 'go-template={{ index .data "tls.crt" | base64decode }}' > server.crt
@@ -44,6 +44,7 @@ HTTPS=true
 SSL_CRT_FILE=server.crt
 SSL_KEY_FILE=server.key
 ```
+Ensure that HOST is not set in your shell environment, as it will override the value in `.env.local`.
 
 4. Start development server:
 

src/components/Alert.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import './Alert.css';
+import CloseIcon from '@mui/icons-material/Close';
+
+export interface AlertProps {
+  id: string;
+  type: string;
+  title: string;
+  description: string;
+  onClose?: () => void;
+}
+
+export const Alert = (props: AlertProps) => {
+  const {id, type, title, description, onClose} = props;
+  return (
+    <div id={`${id}_alert`} className={`alert-wrapper ${type}`} style={{border: '1px solid red', borderRadius: '5px'}}>
+      {onClose && <span
+        style={{float: 'right', fontWeight: 'bolder', fontSize: 24, cursor: 'pointer'}}
+        onClick={onClose} ><CloseIcon/></span> }
+      {title && <h4 id={`${id}_title`} className="alert-title">{title}</h4>}
+      {description && <span id={`${id}_description`} className="alert-description">{description}</span>}
+    </div>
+  );
+};

src/components/SignInButton.tsx

@@ -31,6 +31,7 @@ type ErrorDisplay = ErrorInfo | React.JSX.Element;
 
 interface HttpError extends Error {
   status?: number;
+  body?: ReadableStream<Uint8Array>;
 }
 
 export const SignInButton = (props: SignInButtonProps) => {
@@ -113,18 +114,31 @@ export const SignInButton = (props: SignInButtonProps) => {
     await Metrics.captureEvent(event);
   };
 
+  const errorStreamToString = async (error: HttpError) => {
+    const body = await new Response(error.body).json();
+    return body.message || JSON.stringify(body);
+  };
+
+  const handleServerError = async (error: HttpError) => {
+    const errorMessage = await errorStreamToString(error);
+    setErrorDisplay({show: true, title: 'Error', description: errorMessage});
+  };
+
   const handleErrors = async (error: HttpError, redirectTo: string, shouldRedirect: boolean) => {
     const status = error.status;
 
     switch (status) {
       case 400:
-        setErrorDisplay({show: true, title: 'Error', msg: JSON.stringify(error)});
+        setErrorDisplay({show: true, title: 'Error', description: JSON.stringify(error)});
         break;
       case 409:
         await handleConflictError(redirectTo, shouldRedirect);
         break;
+      case 500:
+        await handleServerError(error);
+        break;
       default:
-        setErrorDisplay({show: true, title: 'Error', msg: 'Unexpected error, please try again'});
+        setErrorDisplay({show: true, title: 'Error', description: 'Unexpected error, please try again'});
         break;
     }
   };
@@ -143,14 +157,8 @@ export const SignInButton = (props: SignInButtonProps) => {
     if (response.toString().includes('Popup closed by user')) {
       setErrorDisplay(
         {title: 'Sign in cancelled', description: 'Sign in cancelled by closing the sign in window'});
-      setTimeout(() => {
-        setErrorDisplay({});
-      }, 2000);
     } else {
       setErrorDisplay({title: 'Error', description: response.toString()});
-      setTimeout(() => {
-        setErrorDisplay({});
-      }, 2000);
     }
   };
 
@@ -205,8 +213,9 @@ export const SignInButton = (props: SignInButtonProps) => {
           <Alert
             id="dialog"
             type="danger"
-            title={(errorDisplay as ErrorInfo).title}
-            description={(errorDisplay as ErrorInfo).description}
+            title={(errorDisplay as ErrorInfo).title || 'Error'}
+            description={(errorDisplay as ErrorInfo).description || ''}
+            onClose={() => setErrorDisplay({})}
           />
         </div>
       }