chore(import-export): fix number formatting for import label (#3509)

Author: gribnoysup

packages/compass-import-export/src/components/import-modal/import-modal.jsx

@@ -33,7 +33,7 @@ import {
   setFieldType,
 } from '../../modules/import';
 import styles from './import-modal.module.less';
-import createStyler from '../../utils/styler.js';
+import createStyler from '../../utils/styler';
 import classnames from 'classnames';
 
 const style = createStyler(styles, 'import-modal');
@@ -331,14 +331,16 @@ class ImportModal extends PureComponent {
                 ? Math.max(docsProcessed, guesstimatedDocsTotal)
                 : docsTotal
             }
-            progressLabel={(written, total) =>
-              `${written}\u00a0/\u00a0${isGuesstimated ? '~' : ''}${total}`
-            }
-            progressTitle={(written, total) =>
-              `Imported ${written} out of ${
+            progressLabel={(written, total) => {
+              return `${formatNumber(written)}\u00a0/\u00a0${
+                isGuesstimated ? '~' : ''
+              }${formatNumber(total)}`;
+            }}
+            progressTitle={(written, total) => {
+              return `Imported ${formatNumber(written)} out of ${
                 isGuesstimated ? 'approximately ' : ''
-              }${total} documents`
-            }
+              }${formatNumber(total)} documents`;
+            }}
             message={MESSAGES[status]}
           />
           <ErrorsList errors={errors} />

packages/compass-import-export/src/components/progress-bar/progress-bar.jsx

@@ -12,8 +12,8 @@ import {
 } from '../../constants/process-status';
 
 import styles from './progress-bar.module.less';
-import createStyler from '../../utils/styler.js';
-import formatNumber from '../../utils/format-number.js';
+import createStyler from '../../utils/styler';
+import formatNumber from '../../utils/format-number';
 
 const style = createStyler(styles, 'progress-bar');
 
@@ -133,13 +133,13 @@ class ProgressBar extends PureComponent {
 
     return (
       <div className={style('chart-wrapper')}>
-        {docsTotal && (
+        {!isNaN(docsTotal) && (
           <div className={style()}>
             <div
               className={this.getBarClassName()}
               style={{ width: toPercentage(docsWritten, docsTotal) }}
             />
-            {Boolean(docsProcessed) && (
+            {!isNaN(docsProcessed) && (
               <div
                 className={this.getBarClassName(true)}
                 style={{ width: toPercentage(docsProcessed, docsTotal) }}

packages/compass-import-export/src/utils/format-number.js

@@ -1,4 +1,4 @@
 const formatter = new Intl.NumberFormat();
-export default function (num) {
+export default function formatNumber(num) {
   return formatter.format(Math.ceil(Number(num)));
 }