diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties index a25a2fad5..38dc4e7d9 100644 --- a/src/i18n/en-US.properties +++ b/src/i18n/en-US.properties @@ -88,6 +88,8 @@ error_bad_file=We’re sorry the preview didn’t load. This file could not be c error_not_downloadable=Oops! It looks like something is wrong with this file. We apologize for the inconvenience and recommend that you upload a new version of this file or roll back to a previous version. Please contact us for more details. # Preview error message shown when flash is not enabled on their browser error_flash_not_enabled=We’re sorry, the preview didn’t load because Flash is not enabled on your browser. If possible, please enable Flash and refresh the page. +# Preview error message shown when loading what would be an Office Excel Online file extension in Internet Explorer +error_internet_explorer_office_online=Microsoft 365 apps and services no longer support Internet Explorer 11, therefore, Box users may have a degraded experience. # Archive Preview # Label for filename column name diff --git a/src/lib/Browser.js b/src/lib/Browser.js index 10d834313..ed5f2b61e 100644 --- a/src/lib/Browser.js +++ b/src/lib/Browser.js @@ -352,6 +352,14 @@ class Browser { }, }; } + + /** + * Returns whether the browser is Internet Explorer + * @returns {boolean} - Whether the browser is Internet Explorer + */ + static isIE() { + return Browser.getName() === BROWSERS.INTERNET_EXPLORER; + } } export default Browser; diff --git a/src/lib/viewers/doc/DocumentViewer.js b/src/lib/viewers/doc/DocumentViewer.js index 33b90c2da..503fa9181 100644 --- a/src/lib/viewers/doc/DocumentViewer.js +++ b/src/lib/viewers/doc/DocumentViewer.js @@ -1,6 +1,8 @@ +import Browser from '../../Browser'; import DocBaseViewer from './DocBaseViewer'; import DocPreloader from './DocPreloader'; import fullscreen from '../../Fullscreen'; +import { EXCEL_EXTENSIONS } from '../../extensions'; import './Document.scss'; class DocumentViewer extends DocBaseViewer { @@ -33,6 +35,20 @@ class DocumentViewer extends DocBaseViewer { this.preloader.removeAllListeners('preload'); } + /** + * @inheritdoc + */ + load() { + super.load(); + + const { extension } = this.options.file; + const isExcelExtension = EXCEL_EXTENSIONS.includes(extension); + + if (isExcelExtension && Browser.isIE()) { + this.options.ui.showNotification(__('error_internet_explorer_office_online'), null, true); + } + } + /** * Handles keyboard events for document viewer. * diff --git a/src/lib/viewers/doc/__tests__/DocumentViewer-test.js b/src/lib/viewers/doc/__tests__/DocumentViewer-test.js index 238dd72c6..b82a31c0e 100644 --- a/src/lib/viewers/doc/__tests__/DocumentViewer-test.js +++ b/src/lib/viewers/doc/__tests__/DocumentViewer-test.js @@ -1,4 +1,6 @@ /* eslint-disable no-unused-expressions */ +import Api from '../../../api'; +import Browser from '../../../Browser'; import DocumentViewer from '../DocumentViewer'; import DocBaseViewer from '../DocBaseViewer'; import BaseViewer from '../../BaseViewer'; @@ -15,6 +17,8 @@ describe('lib/viewers/doc/DocumentViewer', () => { beforeEach(() => { fixture.load('viewers/doc/__tests__/DocumentViewer-test.html'); + stubs.api = new Api(); + containerEl = document.querySelector('.container'); doc = new DocumentViewer({ container: containerEl, @@ -83,6 +87,76 @@ describe('lib/viewers/doc/DocumentViewer', () => { }); }); + describe('load()', () => { + const docBaseLoadFunc = DocBaseViewer.prototype.load; + + beforeEach(() => { + jest.spyOn(stubs.api, 'get').mockImplementation(); + jest.spyOn(doc, 'setup').mockImplementation(); + Object.defineProperty(DocBaseViewer.prototype, 'load', { + value: jest.fn().mockImplementation(() => Promise.resolve()), + }); + jest.spyOn(doc, 'createContentUrlWithAuthParams').mockImplementation(); + jest.spyOn(doc, 'handleAssetAndRepLoad').mockImplementation(); + jest.spyOn(doc, 'getRepStatus').mockReturnValue({ getPromise: () => Promise.resolve() }); + jest.spyOn(doc, 'loadAssets').mockImplementation(); + jest.spyOn(doc, 'loadBoxAnnotations').mockImplementation(); + }); + + afterEach(() => { + Object.defineProperty(DocBaseViewer.prototype, 'load', { value: docBaseLoadFunc }); + }); + + test.each(['xls', 'xlsm', 'xlsx'])( + 'should show notification if file has excel extension %s and is internet explorer', + extension => { + const showNotification = jest.fn(); + doc.options.ui = { showNotification }; + doc.options.file.extension = extension; + jest.spyOn(Browser, 'isIE').mockImplementation(() => true); + + doc.load(); + + expect(showNotification).toBeCalledWith(__('error_internet_explorer_office_online'), null, true); + }, + ); + + test.each(['xls', 'xlsm', 'xlsx'])( + 'should not show notification if file has excel extension %s but is not internet explorer', + extension => { + const showNotification = jest.fn(); + doc.options.ui = { showNotification }; + doc.options.file.extension = extension; + jest.spyOn(Browser, 'isIE').mockImplementation(() => false); + + doc.load(); + + expect(showNotification).not.toBeCalledWith(__('error_internet_explorer_office_online'), null, true); + }, + ); + + test('should not show notification if file is not excel extension', () => { + const showNotification = jest.fn(); + doc.options.ui = { showNotification }; + doc.options.file.extension = 'pdf'; + + doc.load(); + + expect(showNotification).not.toBeCalledWith(__('error_internet_explorer_office_online'), null, true); + }); + + test('should not show notification if file is not excel extension and is internet explorer', () => { + const showNotification = jest.fn(); + doc.options.ui = { showNotification }; + doc.options.file.extension = 'pdf'; + jest.spyOn(Browser, 'isIE').mockImplementation(() => true); + + doc.load(); + + expect(showNotification).not.toBeCalledWith(__('error_internet_explorer_office_online'), null, true); + }); + }); + describe('onKeydown()', () => { beforeEach(() => { stubs.zoomIn = jest.spyOn(doc, 'zoomIn').mockImplementation(); diff --git a/src/lib/viewers/office/OfficeLoader.js b/src/lib/viewers/office/OfficeLoader.js index 983c6e9dd..93dd3dc83 100644 --- a/src/lib/viewers/office/OfficeLoader.js +++ b/src/lib/viewers/office/OfficeLoader.js @@ -1,5 +1,6 @@ import getProp from 'lodash/get'; import AssetLoader from '../AssetLoader'; +import Browser from '../../Browser'; import OfficeViewer from './OfficeViewer'; import { checkPermission } from '../../file'; import { ORIGINAL_REP_NAME, PERMISSION_DOWNLOAD } from '../../constants'; @@ -39,7 +40,8 @@ class OfficeLoader extends AssetLoader { if ( !checkPermission(file, PERMISSION_DOWNLOAD) || file.size > maxFileSize || - isDisabledDueToPasswordProtectedSharedLink + isDisabledDueToPasswordProtectedSharedLink || + Browser.isIE() // Disable Office viewer if browser is Internet Explorer due to EOL ) { disabledViewers.push(OFFICE_VIEWER_NAME); } diff --git a/src/lib/viewers/office/__tests__/OfficeLoader-test.js b/src/lib/viewers/office/__tests__/OfficeLoader-test.js index a81aa41df..5a38c1841 100644 --- a/src/lib/viewers/office/__tests__/OfficeLoader-test.js +++ b/src/lib/viewers/office/__tests__/OfficeLoader-test.js @@ -1,6 +1,7 @@ +import * as file from '../../../file'; +import Browser from '../../../Browser'; import OfficeLoader from '../OfficeLoader'; import OfficeViewer from '../OfficeViewer'; -import * as file from '../../../file'; const FIVE_MB = 5242880; @@ -86,6 +87,12 @@ describe('lib/viewers/office/OfficeLoader', () => { const viewer = OfficeLoader.determineViewer(editedFakeFile, [], viewerOptions); expect(viewer).toBeDefined(); }); + + test('should not return a viewer if the browser is internet explorer', () => { + jest.spyOn(Browser, 'isIE').mockImplementation(() => true); + const viewer = OfficeLoader.determineViewer(fakeFile, []); + expect(viewer).toBeUndefined(); + }); }); }); });