[DT-934] Create a banner similar to the Terra Banner on DUOS to inform users that chrome is our preferred browser

Dockerfile

@@ -11,6 +11,7 @@ ENV PATH /usr/src/app/node_modules/.bin:$PATH
 
 # install and cache app dependencies
 COPY src /usr/src/app/src
+COPY types /usr/src/app/types
 COPY public /usr/src/app/public
 COPY package.json /usr/src/app/package.json
 COPY package-lock.json /usr/src/app/package-lock.json

package.json

@@ -14,6 +14,7 @@
     "ajv": "8.17.1",
     "ajv-formats": "3.0.1",
     "axios": "1.7.7",
+    "browser-version-detection": "^2.1.8",
     "dompurify": "3.1.7",
     "js-file-download": "0.4.12",
     "lodash": "4.17.21",

src/components/ActionableAlert.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import './Alert.css';
+import CloseIcon from '@mui/icons-material/Close';
+import { Button } from '@mui/material';
+
+export interface ActionableAlertProps {
+    id: string;
+    type: string;
+    title: string;
+    description: string;
+    onClose?: () => void;
+    actionText: string;
+    onClick?: () => void;
+}
+
+export const ActionableAlert = (props: ActionableAlertProps) => {
+  const {id, type, title, description, onClose, actionText, onClick} = 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>}
+      {actionText && <Button
+        variant='outlined'
+        color='error'
+        onClick={onClick}
+        sx={{fontSize: 10, marginTop: 2}}
+      >
+        {actionText}
+      </Button>}
+    </div>
+  );
+};

src/components/SignInButton.tsx

@@ -15,6 +15,8 @@ import {History} from 'history';
 import {OidcUser} from '../libs/auth/oidcBroker';
 import {DuosUser} from '../types/model';
 import {DuosUserResponse} from '../types/responseTypes';
+import {ActionableAlert} from '../components/ActionableAlert';
+import {detectBrowser} from 'browser-version-detection/src/browser-detection';
 
 interface SignInButtonProps {
   history: History;
@@ -39,6 +41,13 @@ export const SignInButton = (props: SignInButtonProps) => {
   const {history} = props;
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const browser = detectBrowser(window.navigator);
+  const browserName = browser.name;
+  const checkBrowser = () => {
+    return (!isEmpty(browserName) && browserName !== 'Chrome' && browserName !== 'Firefox');
+  };
+  const [showUnsupported, setShowUnsupported] = useState<boolean>(checkBrowser());
+
   // Utility function called in the normal success case and in the undocumented 409 case
   // Check for ToS Acceptance - redirect user if not set.
   const checkToSAndRedirect = async (redirectPath: string | null) => {
@@ -205,19 +214,27 @@ export const SignInButton = (props: SignInButtonProps) => {
 
   return (
     <div>
-      {isEmpty(errorDisplay)
-        ? <div>
+      {showUnsupported ?
+        <ActionableAlert
+          id="dialog"
+          type="danger"
+          title={'DUOS may not function correctly in this browser.'}
+          description={'If you are experiencing issues, please try using Google Chrome.'}
+          onClose={() => setShowUnsupported(false)}
+          actionText={'Download Chrome now'}
+          onClick={() => window.open('https://www.google.com/chrome/')}/> :
+        isEmpty(errorDisplay) ? <div>
           {signInElement()}
         </div>
-        : <div className="dialog-alert">
-          <Alert
-            id="dialog"
-            type="danger"
-            title={(errorDisplay as ErrorInfo).title || 'Error'}
-            description={(errorDisplay as ErrorInfo).description || ''}
-            onClose={() => setErrorDisplay({})}
-          />
-        </div>
+          : <div className="dialog-alert">
+            <Alert
+              id="dialog"
+              type="danger"
+              title={(errorDisplay as ErrorInfo).title || 'Error'}
+              description={(errorDisplay as ErrorInfo).description || ''}
+              onClose={() => setErrorDisplay({})}
+            />
+          </div>
       }
     </div>
   );

tsconfig.json

@@ -20,7 +20,8 @@
     }
   },
   "include": [
-    "src"
+    "src",
+    "types/index.d.ts"
   ],
   "plugins": ["@typescript-eslint", "import"]
 }

types/index.d.ts

@@ -0,0 +1,3 @@
+declare module "browser-version-detection/src/browser-detection" {
+    export function detectBrowser(nav: { userAgent: string }): any
+}