From 0a1aba290e8f4775c173724f34d72c991f633a2a Mon Sep 17 00:00:00 2001
From: Rachel Johanek <55256690+rjohanek@users.noreply.github.com>
Date: Thu, 31 Oct 2024 14:42:25 -0400
Subject: [PATCH] [DT-841]Display error from Consent on Sign In (#2701)

Co-authored-by: rjohanek <rjohanek@broadinstitute.org>
---
 DEVNOTES.md                     |  3 ++-
 src/components/Alert.jsx        | 11 -----------
 src/components/Alert.tsx        | 24 ++++++++++++++++++++++++
 src/components/SignInButton.tsx | 29 +++++++++++++++++++----------
 4 files changed, 45 insertions(+), 22 deletions(-)
 delete mode 100644 src/components/Alert.jsx
 create mode 100644 src/components/Alert.tsx

diff --git a/DEVNOTES.md b/DEVNOTES.md
index 9012a4772..4173d00bb 100644
--- a/DEVNOTES.md
+++ b/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:
 
diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx
deleted file mode 100644
index ec7a219fb..000000000
--- a/src/components/Alert.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import './Alert.css';
-
-export const Alert = ({ id, type, title, description }) => {
-  return (
-    <div id={`${id}_alert`} className={`alert-wrapper ${type}`}>
-      {title && <h4 id={`${id}_title`} className="alert-title">{title}</h4>}
-      {description && <span id={`${id}_description`} className="alert-description">{description}</span>}
-    </div>
-  );
-};
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
new file mode 100644
index 000000000..b03a3d111
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 56c0e7430..8e762a8a8 100644
--- a/src/components/SignInButton.tsx
+++ b/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>
       }