From c3d2362bf24a18fc9265db9b5b8dab49c0376415 Mon Sep 17 00:00:00 2001
From: Sergey Petushkov <petushkov.sergey@gmail.com>
Date: Thu, 22 Sep 2022 10:29:39 +0200
Subject: [PATCH] chore(import-export): fix number formatting for import label

---
 .../components/import-modal/import-modal.jsx   | 18 ++++++++++--------
 .../components/progress-bar/progress-bar.jsx   |  8 ++++----
 .../src/utils/format-number.js                 |  2 +-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/compass-import-export/src/components/import-modal/import-modal.jsx b/packages/compass-import-export/src/components/import-modal/import-modal.jsx
index 4b8b1cea538..a78b8b78544 100644
--- a/packages/compass-import-export/src/components/import-modal/import-modal.jsx
+++ b/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} />
diff --git a/packages/compass-import-export/src/components/progress-bar/progress-bar.jsx b/packages/compass-import-export/src/components/progress-bar/progress-bar.jsx
index e590688c20c..ca616b9b254 100644
--- a/packages/compass-import-export/src/components/progress-bar/progress-bar.jsx
+++ b/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) }}
diff --git a/packages/compass-import-export/src/utils/format-number.js b/packages/compass-import-export/src/utils/format-number.js
index 47367b6280e..ecc6d813ba3 100644
--- a/packages/compass-import-export/src/utils/format-number.js
+++ b/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)));
 }