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

[cinyecai]

Addresses

https://broadworkbench.atlassian.net/browse/DT-934

Summary

Displays a warning alert for users opening DUOS on a browser that's not Chrome or Firefox, user cannot click the Sign In button until Alert is closed

Screen.Recording.2024-11-05.at.9.49.38.AM.mov

Note: Updated the appearance of the alert to be less extreme - see comment below

---

Have you read Terra's Contributing Guide lately? If not, do that first.

• Label PR with a Jira ticket number and include a link to the ticket
• Label PR with a security risk modifier [no, low, medium, high]
• PR describes scope of changes
• Get a minimum of one thumbs worth of review, preferably two if enough team members are available
• Get PO sign-off for all non-trivial UI or workflow changes
• Verify all tests go green
• Test this change deployed correctly and works on dev environment after deployment

[pshapiro4broad]

Looks good

[fboulnois]

See below:

[cinyecai]

Updated visual:

11-13-2024.mov

[fboulnois]

See below:

[fboulnois]

Suggested change

	"browser-version-detection": "^2.1.8",
	"browser-version-detection": "2.1.8",

We should lock this version down so it doesn't automatically change.

This version hasn't seen any updates for 7 years, and the implementation is straightforward, so I would continue to advocate not depending on a package to do this and instead using a simple regex for browser detection (which is ultimately what this library and the previous one do).

In general, browser detection is not recommended, although I know we also do this on Terra UI. It might be better to identify the specific features that Safari doesn't support, and long term work to either stop depending on these features or use polyfills for those features that we really need. This is a separate issue from showing the alert, so in the meantime we might still want to show the alert regardless of whether we are doing browser or feature detection.

[rushtong]

I'm a little confused here ... the latest release version I see is 3.1.0 that is from last year. Is there a reason we're looking at 2.1.8 (which I don't even see in the list of releases)? I do see that NPM sees 2.1.8, which is extra confusing.

[rushtong]

Aside from the library version question, I do agree in theory with Florian's feedback. To date, the only issue we've seen with Safari is variations in CSS rendering. I don't think we're using any browser-specific features, so to really tackle that question, we'd need a different kind of investigation effort.

Unblocking the PR