feat(annotations): Send react-intl strings to annotations (#1174)

* feat(annotations): Send react-intl strings to annotations
* Requires version upgrade of box-annotations
* Add shim for Intl and Karma
* Add resolver for lang files for annotations
* Remove redundant tags from index.html in test directory

build/karma.conf.js

@@ -87,7 +87,7 @@ module.exports = config =>
             outputFile: 'junit.xml',
         },
 
-        frameworks: ['mocha', 'chai-dom', 'chai', 'sinon', 'sinon-chai', 'fixture'],
+        frameworks: ['mocha', 'chai-dom', 'chai', 'sinon', 'sinon-chai', 'fixture', 'intl-shim'],
 
         files: [
             'https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js',

build/webpack.common.config.js

@@ -63,6 +63,7 @@ module.exports = language => {
         ],
         resolve: {
             alias: {
+                'box-annotations-messages': path.resolve(`node_modules/box-annotations/i18n/${language}`),
                 'box-elements-messages': path.resolve(`node_modules/box-ui-elements/i18n/${language}`),
                 'react-intl-locale-data': path.resolve(`node_modules/react-intl/locale-data/${locale}`),
             },

package.json

@@ -70,6 +70,7 @@
         "karma-coverage": "^1.1.2",
         "karma-fixture": "^0.2.6",
         "karma-html2js-preprocessor": "^1.1.0",
+        "karma-intl-shim": "^1.0.3",
         "karma-junit-reporter": "^1.2.0",
         "karma-mocha": "^1.3.0",
         "karma-mocha-reporter": "^2.2.5",

src/index.html

@@ -3,10 +3,8 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
         <link rel="stylesheet" href="./preview.css" />
-        <link rel="stylesheet" href="./annotations.css" />
         <script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script>
         <script src="./preview.js"></script>
-        <script src="./annotations.js"></script>
 
         <style>
             * {

src/lib/__tests__/i18n-test.js

@@ -0,0 +1,9 @@
+import i18n from '../i18n';
+
+describe('i18n', () => {
+    it('should return an intl provider object', () => {
+        const intl = i18n.createAnnotatorIntl();
+        expect(intl.messages).to.be.an('object');
+        expect(intl.language).to.equal('en-US');
+    });
+});

src/lib/i18n.js

@@ -0,0 +1,23 @@
+// TODO @mickryan remove after we upgrade the annotations version
+let annotationMessages = {};
+
+try {
+    annotationMessages = require('box-annotations-messages').default; // eslint-disable-line
+} catch (e) {} // eslint-disable-line
+
+const language = __LANGUAGE__ || 'en-US'; // eslint-disable-line
+
+/**
+ * Creates Intl object used by annotations
+ *
+ * @private
+ * @return {Object}
+ */
+const createAnnotatorIntl = () => {
+    return {
+        messages: annotationMessages,
+        language,
+    };
+};
+
+export default { createAnnotatorIntl };

src/lib/viewers/BaseViewer.js

@@ -2,6 +2,7 @@ import EventEmitter from 'events';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
 import fullscreen from '../Fullscreen';
+import intl from '../i18n';
 import RepStatus from '../RepStatus';
 import Browser from '../Browser';
 import {
@@ -50,12 +51,12 @@ const LOAD_TIMEOUT_MS = 180000; // 3m
 const RESIZE_WAIT_TIME_IN_MILLIS = 300;
 const ANNOTATION_BUTTONS = {
     point: {
-        title: __('annotation_point_toggle'),
         selector: SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT,
+        title: __('annotation_point_toggle'),
     },
     draw: {
-        title: __('annotation_draw_toggle'),
         selector: SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_DRAW,
+        title: __('annotation_draw_toggle'),
     },
 };
 
@@ -1092,40 +1093,38 @@ class BaseViewer extends EventEmitter {
      * @return {Object} combined options
      */
     createAnnotatorOptions(moreOptions) {
-        // Temporary solution for localizing strings in the BoxAnnotations npm package
-        // TODO(@spramod): Remove once BoxAnnotations has it's own localization strategy
         const localizedStrings = {
-            loadError: __('annotations_load_error'),
-            createError: __('annotations_create_error'),
-            deleteError: __('annotations_delete_error'),
+            addCommentPlaceholder: __('annotation_add_comment_placeholder'),
+            anonymousUserName: __('annotation_anonymous_user_name'),
             authError: __('annotations_authorization_error'),
-            doneButton: __('annotation_done'),
-            closeButton: __('annotation_close'),
             cancelButton: __('annotation_cancel'),
-            saveButton: __('annotation_save'),
-            postButton: __('annotation_post'),
+            closeButton: __('annotation_close'),
+            createError: __('annotations_create_error'),
             deleteButton: __('annotation_delete'),
-            addCommentPlaceholder: __('annotation_add_comment_placeholder'),
-            replyPlaceholder: __('annotation_reply_placeholder'),
             deleteConfirmation: __('annotation_delete_confirmation_message'),
+            deleteError: __('annotations_delete_error'),
+            doneButton: __('annotation_done'),
+            drawDelete: __('annotation_draw_delete'),
+            drawSave: __('annotation_draw_save'),
+            drawToggle: __('annotation_draw_toggle'),
+            highlightComment: __('annotation_highlight_comment'),
+            highlightToggle: __('annotation_highlight_toggle'),
+            loadError: __('annotations_load_error'),
+            pointToggle: __('annotation_point_toggle'),
+            postButton: __('annotation_post'),
             posting: __('annotation_posting_message'),
             profileAlt: __('annotation_profile_alt'),
-            anonymousUserName: __('annotation_anonymous_user_name'),
-            pointToggle: __('annotation_point_toggle'),
-            highlightToggle: __('annotation_highlight_toggle'),
-            highlightComment: __('annotation_highlight_comment'),
-            whoHighlighted: __('annotation_who_highlighted'),
-            drawToggle: __('annotation_draw_toggle'),
-            drawSave: __('annotation_draw_save'),
-            drawDelete: __('annotation_draw_delete'),
+            replyPlaceholder: __('annotation_reply_placeholder'),
+            saveButton: __('annotation_save'),
             whoDrew: __('annotation_who_drew'),
+            whoHighlighted: __('annotation_who_highlighted'),
         };
-
         return cloneDeep({
             ...this.options,
             ...moreOptions,
-            isMobile: this.isMobile,
             hasTouch: this.hasTouch,
+            intl: intl.createAnnotatorIntl(),
+            isMobile: this.isMobile,
             locale: this.options.location.locale,
             localizedStrings,
         });

src/lib/viewers/__tests__/BaseViewer-test.js

@@ -1385,6 +1385,8 @@ describe('lib/viewers/BaseViewer', () => {
             expect(combinedOptions.location).to.deep.equal({ locale: 'en-US' });
             expect(combinedOptions.randomOption).to.equal('derp');
             expect(combinedOptions.localizedStrings).to.not.be.undefined;
+            expect(combinedOptions.intl.language).to.equal('en-US');
+            expect(combinedOptions.intl.messages).to.be.an('object');
         });
     });
 

yarn.lock

@@ -6963,6 +6963,11 @@ intl-relativeformat@^2.1.0:
   dependencies:
     intl-messageformat "^2.0.0"
 
+intl@^1.0.1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
+  integrity sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=
+
 into-stream@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
@@ -7796,6 +7801,13 @@ karma-html2js-preprocessor@^1.1.0:
   resolved "https://registry.yarnpkg.com/karma-html2js-preprocessor/-/karma-html2js-preprocessor-1.1.0.tgz#fc09edf04bbe2bb6eee9ba1968f826b7388020bd"
   integrity sha1-/Ant8Eu+K7bu6boZaPgmtziAIL0=
 
+karma-intl-shim@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/karma-intl-shim/-/karma-intl-shim-1.0.3.tgz#f07ab86b644a7c2c2a3299f38d40ed49af7ec0f0"
+  integrity sha1-8Hq4a2RKfCwqMpnzjUDtSa9+wPA=
+  dependencies:
+    intl "^1.0.1"
+
 karma-junit-reporter@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/karma-junit-reporter/-/karma-junit-reporter-1.2.0.tgz#4f9c40cedfb1a395f8aef876abf96189917c6396"