COMPASS-3949: buttons based on current import state

src/components/import-modal/import-modal.jsx

@@ -119,6 +119,45 @@ class ImportModal extends PureComponent {
     }
   };
 
+  renderDoneButton() {
+    if (this.props.status === COMPLETED) {
+      return (
+        <TextButton
+          className="btn btn-primary btn-sm"
+          text="DONE"
+          clickHandler={this.handleClose}
+        />
+      );
+    }
+  }
+
+  renderCancelButton() {
+    if (this.props.status !== COMPLETED) {
+      return (
+        <TextButton
+          className="btn btn-default btn-sm"
+          text={
+            FINISHED_STATUSES.includes(this.props.status) ? 'Close' : 'Cancel'
+          }
+          clickHandler={this.handleClose}
+        />
+      );
+    }
+  }
+
+  renderImportButton() {
+    if (this.props.status !== COMPLETED) {
+      return (
+        <TextButton
+          className="btn btn-primary btn-sm"
+          text={this.props.status === STARTED ? 'Importing...' : 'Import'}
+          disabled={!this.props.fileName || this.props.status === STARTED}
+          clickHandler={this.handleImportBtnClicked}
+        />
+      );
+    }
+  }
+
   renderOptions() {
     const isCSV = this.props.fileType === FILE_TYPES.CSV;
     return (
@@ -216,19 +255,9 @@ class ImportModal extends PureComponent {
           <ErrorBox error={this.props.error} />
         </Modal.Body>
         <Modal.Footer>
-          <TextButton
-            className="btn btn-default btn-sm"
-            text={
-              FINISHED_STATUSES.includes(this.props.status) ? 'Close' : 'Cancel'
-            }
-            clickHandler={this.handleClose}
-          />
-          <TextButton
-            className="btn btn-primary btn-sm"
-            text={this.props.status === STARTED ? 'Importing...' : 'Import'}
-            disabled={!this.props.fileName || this.props.status === STARTED}
-            clickHandler={this.handleImportBtnClicked}
-          />
+          {this.renderCancelButton()}
+          {this.renderImportButton()}
+          {this.renderDoneButton()}
         </Modal.Footer>
       </Modal>
     );

src/components/progress-bar/progress-bar.jsx

@@ -52,26 +52,25 @@ class ProgressBar extends PureComponent {
     });
   }
 
-  maybeCancelButton() {
+  getCancelButton() {
     if (this.props.status !== STARTED) {
       return null;
     }
 
     return (
       // eslint-disable-next-line no-script-url
-      <a
-        className={style('status-message-cancel')}
-        onClick={evt => {
-          evt.stopPropagation();
-          evt.preventDefault();
-          this.props.cancel();
-        }}
-      >
-        Cancel
+      <a className={style('status-message-cancel')} onClick={this.handleCancel}>
+        Stop 
       </a>
     );
   }
 
+  handleCancel = (evt) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+    this.props.cancel();
+  };
+
   renderStats() {
     const { docsTotal, docsWritten, progress } = this.props;
     // TODO: lucas: This is explicitly handling import case where
@@ -82,7 +81,7 @@ class ProgressBar extends PureComponent {
         <p
           className={style('status-stats')}
           title={
-            'Guesstimated total: ' +
+            'Estimated total: ' +
             formatNumber(this.props.guesstimatedDocsTotal)
           }
         >
@@ -111,7 +110,7 @@ class ProgressBar extends PureComponent {
     }
 
     return (
-      <div className="well" style={{ padding: '20px', marginBottom: '0px' }}>
+      <div className={style('chart-wrapper')}>
         <div className={style()}>
           <div
             className={this.getBarClassName()}
@@ -121,7 +120,7 @@ class ProgressBar extends PureComponent {
         <div className={styles['progress-bar-status']}>
           <p className={this.getMessageClassName()}>
             {message}
-            {this.maybeCancelButton()}
+            {this.getCancelButton()}
           </p>
           {this.renderStats()}
         </div>

src/components/progress-bar/progress-bar.less

@@ -6,6 +6,11 @@
   height: 10px;
   background-color: #e7eeec;
 
+  &-chart-wrapper {
+    padding-top: 20px;
+    margin-bottom: 0px;
+  }
+
   &-bar {
     height: 10px;
     transition: width 0.2s ease;
@@ -33,9 +38,12 @@
 
     &-message {
       flex-grow: 1;
+      margin-bottom: 0;
+
       &-is-failed {
         color: #d65d33;
       }
+
       &-cancel {
         margin-left: 10px;
         color: #0d47a1;
@@ -44,6 +52,7 @@
     }
     &-stats {
       flex-grow: 0;
+      margin-bottom: 0;
     }
   }
 }