Merge pull request #866 from nextstrain/feat/web-unsipported-browser-…

…warning

packages_rs/nextclade-web/package.json

@@ -87,6 +87,7 @@
     "awesomplete": "1.1.5",
     "axios": "0.27.1",
     "bootstrap": "4.6.1",
+    "bowser": "2.11.0",
     "classnames": "2.3.1",
     "compare-versions": "4.1.3",
     "core-js": "3.22.2",

packages_rs/nextclade-web/src/components/Common/BrowserWarning.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { UncontrolledAlert } from 'reactstrap'
+import Bowser from 'bowser'
+
+import { notUndefinedOrNull } from 'src/helpers/notUndefined'
+
+export function BrowserWarning() {
+  const { t } = useTranslation()
+
+  const warningText = useMemo(() => {
+    const browser = Bowser.getParser(window?.navigator?.userAgent)
+    const isSupportedBrowser = browser.satisfies({
+      chrome: '>60',
+      edge: '>79',
+      firefox: '>52',
+    })
+
+    if (isSupportedBrowser) {
+      return null
+    }
+
+    const { name, version } = browser.getBrowser()
+    const nameAndVersion = [name, version].filter(notUndefinedOrNull).join(' ')
+
+    return t(
+      `This browser version (${nameAndVersion}) is not supported. Nextclade works best in the latest version of Chrome or Firefox.`,
+    )
+  }, [t])
+
+  if (!warningText) {
+    return null
+  }
+
+  return (
+    <UncontrolledAlert color="warning" className="text-center m-0">
+      {warningText}
+    </UncontrolledAlert>
+  )
+}

packages_rs/nextclade-web/src/components/Common/PreviewWarning.tsx

@@ -19,7 +19,7 @@ export function PreviewWarning() {
   }
 
   return (
-    <UncontrolledAlert color="warning" className="text-center">
+    <UncontrolledAlert color="warning" className="text-center m-0">
       <span>{warningText}</span>
       <span>
         <LinkExternal href={RELEASE_URL}>{RELEASE_URL}</LinkExternal>

packages_rs/nextclade-web/src/pages/_app.tsx

@@ -8,6 +8,7 @@ import { RecoilRoot, useRecoilCallback, useRecoilState, useRecoilValue } from 'r
 import { AppProps } from 'next/app'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
+import { BrowserWarning } from 'src/components/Common/BrowserWarning'
 import { sanitizeError } from 'src/helpers/sanitizeError'
 import { useRunAnalysis } from 'src/hooks/useRunAnalysis'
 import { createInputFromUrlParamMaybe } from 'src/io/createInputFromUrlParamMaybe'
@@ -191,6 +192,7 @@ export function MyApp({ Component, pageProps, router }: AppProps) {
                     <Suspense fallback={fallback}>
                       <SEO />
                       <PreviewWarning />
+                      <BrowserWarning />
                       <Component {...pageProps} />
                       <ErrorPopup />
                       <ReactQueryDevtools initialIsOpen={false} />

packages_rs/nextclade-web/yarn.lock

@@ -4006,6 +4006,11 @@ bootstrap@4.6.1:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.1.tgz#bc25380c2c14192374e8dec07cf01b2742d222a2"
   integrity sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==
 
+bowser@2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
+
 boxen@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"