From cf5183a3eef9bbaef92baa1b946c3fde60dde578 Mon Sep 17 00:00:00 2001 From: chrisgarrity Date: Wed, 9 Jan 2019 12:24:01 -0500 Subject: [PATCH] Revise how unsupported browsers are handled MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Browsers other than IE will be allowed to load the GUI. However, if there is an error, the error boundary will display an unsupported browser message recommending they update to the latest version of a supported browser. For the purposes of this PR, ‘supported’ means you can load the gui (anything other than IE), and recommended is just the browsers that meet our minimum requirements for Chrome, Firefox, Edge and Safari. --- .../browser-modal/browser-modal.css | 14 +- .../browser-modal/browser-modal.jsx | 146 ++++++++++-------- .../browser-modal/unsupported-browser.svg | 54 +++++++ .../unsupported.png | Bin src/components/webgl-modal/webgl-modal.css | 2 +- src/containers/error-boundary.jsx | 9 +- src/lib/supported-browser.js | 33 +++- 7 files changed, 180 insertions(+), 78 deletions(-) create mode 100644 src/components/browser-modal/unsupported-browser.svg rename src/components/{browser-modal => webgl-modal}/unsupported.png (100%) diff --git a/src/components/browser-modal/browser-modal.css b/src/components/browser-modal/browser-modal.css index a7f86ac4e..2f4145bf6 100644 --- a/src/components/browser-modal/browser-modal.css +++ b/src/components/browser-modal/browser-modal.css @@ -27,17 +27,23 @@ } .illustration { + display: flex; + align-items: center; + justify-content: center; width: 100%; - height: 208px; - background-color: $motion-primary; - background-image: url('./unsupported.png'); - background-size: cover; + height: 100px; + background-color: $control-primary; } [dir="rtl"] .illustration { transform: scaleX(-1); } +.illustration img { + height: 80%; + width: auto; +} + .body { background: $ui-white; padding: 1.5rem 2.25rem; diff --git a/src/components/browser-modal/browser-modal.jsx b/src/components/browser-modal/browser-modal.jsx index ec4f28bbb..0419e9122 100644 --- a/src/components/browser-modal/browser-modal.jsx +++ b/src/components/browser-modal/browser-modal.jsx @@ -5,85 +5,107 @@ import Box from '../box/box.jsx'; import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl'; import styles from './browser-modal.css'; +import unhappyBrowser from './unsupported-browser.svg'; const messages = defineMessages({ label: { id: 'gui.unsupportedBrowser.label', defaultMessage: 'Browser is not supported', description: '' + }, + error: { + id: 'gui.unsupportedBrowser.errorLabel', + defaultMessage: 'An Error Occurred', + description: 'Heading shown when there is an unhandled exception in an unsupported browser' } }); -const BrowserModal = ({intl, ...props}) => ( - -
- - - -

- -

-

- { /* eslint-disable max-len */ } - - { /* eslint-enable max-len */ } -

- - - - +const BrowserModal = ({intl, ...props}) => { + const label = props.error ? messages.error : messages.label; + return ( + +
+ + -
- - - - ) - }} - /> -
- -
- -); + + +

+ +

+

+ { /* eslint-disable max-len */ } + { + props.error ? : + } + { /* eslint-enable max-len */ } +

+ + + + + +
+ + + + ) + }} + /> +
+ +
+ + ); +}; BrowserModal.propTypes = { + error: PropTypes.bool, intl: intlShape.isRequired, isRtl: PropTypes.bool, onBack: PropTypes.func.isRequired }; +BrowserModal.defaultProps = { + error: false +}; + const WrappedBrowserModal = injectIntl(BrowserModal); WrappedBrowserModal.setAppElement = ReactModal.setAppElement; diff --git a/src/components/browser-modal/unsupported-browser.svg b/src/components/browser-modal/unsupported-browser.svg new file mode 100644 index 000000000..7749f7539 --- /dev/null +++ b/src/components/browser-modal/unsupported-browser.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/browser-modal/unsupported.png b/src/components/webgl-modal/unsupported.png similarity index 100% rename from src/components/browser-modal/unsupported.png rename to src/components/webgl-modal/unsupported.png diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css index 10eed71f1..85fcc0d01 100644 --- a/src/components/webgl-modal/webgl-modal.css +++ b/src/components/webgl-modal/webgl-modal.css @@ -30,7 +30,7 @@ width: 100%; height: 208px; background-color: $motion-primary; - background-image: url('../browser-modal/unsupported.png'); + background-image: url('./unsupported.png'); background-size: cover; } diff --git a/src/containers/error-boundary.jsx b/src/containers/error-boundary.jsx index 3c8b26fee..0b7704ba2 100644 --- a/src/containers/error-boundary.jsx +++ b/src/containers/error-boundary.jsx @@ -4,7 +4,7 @@ import {connect} from 'react-redux'; import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx'; import CrashMessageComponent from '../components/crash-message/crash-message.jsx'; import log from '../lib/log.js'; -import supportedBrowser from '../lib/supported-browser'; +import {recommendedBrowser} from '../lib/supported-browser'; class ErrorBoundary extends React.Component { constructor (props) { @@ -22,8 +22,8 @@ class ErrorBoundary extends React.Component { message: 'Unknown error' }; - // Log errors to analytics, leaving out supported browsers from unsupported. - if (supportedBrowser() && window.Sentry) { + // Log errors to analytics, leaving out browsers that are not in our recommended set + if (recommendedBrowser() && window.Sentry) { window.Sentry.withScope(scope => { Object.keys(info).forEach(key => { scope.setExtra(key, info[key]); @@ -53,7 +53,7 @@ class ErrorBoundary extends React.Component { render () { if (this.state.hasError) { - if (supportedBrowser()) { + if (recommendedBrowser()) { return ( ); diff --git a/src/lib/supported-browser.js b/src/lib/supported-browser.js index 181fb1cb6..6f5ac8bac 100644 --- a/src/lib/supported-browser.js +++ b/src/lib/supported-browser.js @@ -1,15 +1,34 @@ import bowser from 'bowser'; +const minVersions = { + chrome: '63', + msedge: '15', + firefox: '57', + safari: '11' +}; + /** - * Helper function to determine if the browser is supported. + * Helper function to determine if the browser is supported at all. * @returns {boolean} False if the platform is definitely not supported. */ -export default function () { - if (bowser.msie || - bowser.opera || - bowser.silk) { +const supportedBrowser = () => { + if (bowser.msie) { return false; } - // @todo Should also test for versions of supported browsers return true; -} +}; + +/** + * Helper function to determine if the browser meets the minimum recommended version + * @returns {boolean} False if the browser isn't a recommended browser, or doesn't + * meet the minimum version for recommended browsers. + * NOTE: uses strict_mode==true so that any browser not listed in the minVersions + * always returns false + */ + +const recommendedBrowser = () => !bowser.isUnsupportedBrowser(minVersions, true); + +export { + supportedBrowser as default, + recommendedBrowser +};