feat(archive): Add support for archive viewer internationalization (#…

…1120)
box · Dec 17, 2019 · b8c60e9 · b8c60e9
1 parent 43ae203
commit b8c60e9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/build/webpack.common.config.js b/build/webpack.common.config.js
@@ -9,6 +9,8 @@ const pkg = require('../package.json');
 /* eslint-disable import/no-dynamic-require */
 module.exports = language => {
     const langJson = require(`${path.resolve('src/i18n/json')}/${language}.json`);
+    const locale = language ? language.substr(0, language.indexOf('-')) : 'en';
+
     return {
         bail: true,
         module: {
@@ -45,6 +47,7 @@ module.exports = language => {
         plugins: [
             new BannerPlugin(license),
             new DefinePlugin({
+                __LANGUAGE__: JSON.stringify(language),
                 __NAME__: JSON.stringify(pkg.name),
                 __VERSION__: JSON.stringify(pkg.version),
                 'process.env': {
@@ -58,6 +61,12 @@ module.exports = language => {
             }),
             new NormalModuleReplacementPlugin(/\/iconv-loader$/),
         ],
+        resolve: {
+            alias: {
+                '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}`),
+            },
+        },
         stats: {
             assets: true,
             children: false,

diff --git a/build/webpack.karma.config.js b/build/webpack.karma.config.js
@@ -1,20 +1,20 @@
 require('babel-polyfill');
 
+const merge = require('lodash/merge');
 const { IgnorePlugin } = require('webpack');
 const commonConfig = require('./webpack.common.config');
 
 const baseConfig = commonConfig('en-US');
 
-const config = {
-    ...baseConfig,
+const config = merge(baseConfig, {
     devtool: 'inline-source-map',
     mode: 'development',
     resolve: {
         alias: {
             sinon: 'sinon/pkg/sinon',
         },
     },
-};
+});
 
 config.plugins.push(
     new IgnorePlugin(/react\/addons/),

diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js
@@ -1,16 +1,20 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
+import getProp from 'lodash/get';
+import elementsMessages from 'box-elements-messages'; // eslint-disable-line
+import intlLocaleData from 'react-intl-locale-data'; // eslint-disable-line
 import Internationalize from 'box-ui-elements/es/elements/common/Internationalize';
 import {
     readableTimeCellRenderer,
     sizeCellRenderer,
     itemNameCellRenderer,
 } from 'box-ui-elements/es/features/virtualized-table-renderers';
 import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table';
+import { addLocaleData } from 'react-intl';
 import { Column } from 'react-virtualized/dist/es/Table/index';
 import { TABLE_COLUMNS } from './constants';
 
+const language = __LANGUAGE__; // eslint-disable-line
 const { KEY_NAME, KEY_MODIFIED_AT, KEY_SIZE } = TABLE_COLUMNS;
 
 class ArchiveExplorer extends React.Component {
@@ -55,6 +59,8 @@ class ArchiveExplorer extends React.Component {
     constructor(props) {
         super(props);
 
+        addLocaleData(intlLocaleData);
+
         this.state = {
             fullPath: props.itemCollection.find(info => !info.parent).absolute_path,
         };
@@ -69,7 +75,7 @@ class ArchiveExplorer extends React.Component {
      */
     getItemList = (itemCollection, fullPath) => {
         const folderInfo = itemCollection.find(item => item.absolute_path === fullPath);
-        const subItems = get(folderInfo, 'item_collection.entries');
+        const subItems = getProp(folderInfo, 'item_collection.entries');
         if (!subItems) {
             return [];
         }
@@ -126,7 +132,7 @@ class ArchiveExplorer extends React.Component {
         const itemList = this.getItemList(itemCollection, fullPath);
 
         return (
-            <Internationalize language="en-us" messages={{}}>
+            <Internationalize language={language} messages={elementsMessages}>
                 <VirtualizedTable
                     className="ArchiveFilesTable"
                     rowData={itemList}