Added upload progress stage to members importer

no issue

- As the number of states for the component has become larger introduced a concept of "stages" on component level to easier track UI changes.

ghost/admin/app/components/modal-import-members.hbs

@@ -1,7 +1,11 @@
 <header class="modal-header" data-test-modal="import-members">
     <h1>
-        {{#if this.importResponse}}
+        {{#if this.summary}}
             Import complete{{unless this.importResponse.invalid.count "!"}}
+        {{/if}}
+
+        {{#if this.uploading}}
+            Importing members
         {{else}}
             Import members
         {{/if}}
@@ -9,45 +13,7 @@
 </header>
 <a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
 
-{{#if this.importResponse}}
-    {{!-- post upload step with import stats --}}
-
-    <div class="modal-body">
-        
-        {{!-- Summary --}}
-        <div class="ba b--whitegrey br3 middarkgrey bg-whitegrey-l2">
-            <div class="flex items-start">
-                <div class="w-50 gh-member-import-result-summary">
-                    <h2>{{format-number this.importResponse.imported.count}}</h2>
-                    <p>{{pluralize this.importResponse.imported.count "Member" without-count=true}} added</p>
-                </div>
-                <div class="bl b--whitegrey w-50 gh-member-import-result-summary">
-                    <h2>{{format-number this.importResponse.invalid.count}}</h2>
-                    <p>{{pluralize this.importResponse.invalid.count "Error" without-count=true}}</p>
-                </div>
-            </div>
-        </div>
-
-        {{#if this.importResponse.invalid.count}}
-            <div class="mt6 gh-members-upload-errorcontainer error">
-                <div class="flex items-start">
-                    {{svg-jar "warning" class="w5 h5 fill-red nudge-top--3 mr3"}}
-                    <div class="flex-grow w-100">
-                        <p class="ma0 pa0">{{format-number this.importResponse.invalid.count}} {{pluralize this.importResponse.invalid.count "member" without-count=true}} were skipped due to the following errors:</p>
-                        {{#if this.config.enableDeveloperExperiments}}
-                            <ul class="ma0 pa0 mt4 list bt b--whitegrey">
-                            {{#each this.importResponse.invalid.errors as |error|}}
-                                <li class="gh-members-import-errormessage">{{error.message}} <span class="fw6">({{format-number error.count}})</span></li>
-                            {{/each}}
-                            </ul>
-                        {{/if}}
-                    </div>
-                </div>
-            </div>
-        {{/if}}
-    </div>
-{{else}}
-    <div class="modal-body">
+<div class="modal-body">
     {{#if (and this.filePresent (not this.failureMessage))}}
         {{#if this.validating}}
             {{#if validationErrors}}
@@ -83,7 +49,9 @@
                     <div class="description midgrey">Validating...</div>
                 </div>
             {{/if}}
-            {{else}}
+        {{/if}}
+
+        {{#if this.customizing}}
             <GhFormGroup>
                 {{#if this.config.enableDeveloperExperiments}}
                     <h4 class="fw6 f8 dib mb1">Mapping</h4>
@@ -110,6 +78,47 @@
                 </div>
             </GhFormGroup>
         {{/if}}
+
+        {{#if this.uploading}}
+            <div class="progress-container">
+                <div class="gh-progress-container-progress">
+                    <div class="gh-progress-bar {{if this.failureMessage "-error"}}" style={{this.progressStyle}}></div>
+                </div>
+            </div>
+        {{/if}}
+
+        {{#if this.summary}}
+            <div class="ba b--whitegrey br3 middarkgrey bg-whitegrey-l2">
+                <div class="flex items-start">
+                    <div class="w-50 gh-member-import-result-summary">
+                        <h2>{{format-number this.importResponse.imported.count}}</h2>
+                        <p>{{pluralize this.importResponse.imported.count "Member" without-count=true}} added</p>
+                    </div>
+                    <div class="bl b--whitegrey w-50 gh-member-import-result-summary">
+                        <h2>{{format-number this.importResponse.invalid.count}}</h2>
+                        <p>{{pluralize this.importResponse.invalid.count "Error" without-count=true}}</p>
+                    </div>
+                </div>
+            </div>
+
+            {{#if this.importResponse.invalid.count}}
+                <div class="mt6 gh-members-upload-errorcontainer error">
+                    <div class="flex items-start">
+                        {{svg-jar "warning" class="w5 h5 fill-red nudge-top--3 mr3"}}
+                        <div class="flex-grow w-100">
+                            <p class="ma0 pa0">{{format-number this.importResponse.invalid.count}} {{pluralize this.importResponse.invalid.count "member" without-count=true}} were skipped due to the following errors:</p>
+                            {{#if this.config.enableDeveloperExperiments}}
+                                <ul class="ma0 pa0 mt4 list bt b--whitegrey">
+                                {{#each this.importResponse.invalid.errors as |error|}}
+                                    <li class="gh-members-import-errormessage">{{error.message}} <span class="fw6">({{format-number error.count}})</span></li>
+                                {{/each}}
+                                </ul>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+            {{/if}}
+        {{/if}}
     {{else}}
         {{#if this.failureMessage}}
             <div class="failed flex items-start gh-members-upload-errorcontainer error">
@@ -128,8 +137,7 @@
             </section>
         </div>
     {{/if}}
-    </div>
-{{/if}}
+</div>
 
 <div class="modal-footer {{if (and this.filePresent (not this.failureMessage) (not this.importResponse)) "modal-footer-spread"}}">
     {{#if this.importResponse}}
@@ -148,7 +156,9 @@
                     </button>
                 {{/unless}}
             {{/if}}
-        {{else}}
+        {{/if}}
+
+        {{#if this.customizing}}
             <button {{action "reset"}} class="gh-btn" data-test-button="close-import-members">
                 <span>Start over</span>
             </button>

ghost/admin/app/components/modal-import-members.js

@@ -71,13 +71,17 @@ export default ModalComponent.extend({
 
     labelText: 'Select or drag-and-drop a CSV file',
 
+    // import stages, default is "CSV file selection"
+    validating: false,
+    customizing: false,
+    uploading: false,
+    summary: false,
+
     dragClass: null,
     file: null,
     fileData: null,
     mapping: null,
     paramName: 'membersfile',
-    validating: false,
-    uploading: false,
     uploadPercentage: 0,
     importResponse: null,
     failureMessage: null,
@@ -161,6 +165,7 @@ export default ModalComponent.extend({
                 // TODO: remove "if" below once import validations are production ready
                 if (this.config.get('enableDeveloperExperiments')) {
                     this.set('validating', true);
+
                     papaparse.parse(file, {
                         header: true,
                         skipEmptyLines: true,
@@ -175,12 +180,15 @@ export default ModalComponent.extend({
                                 this._importValidationFailed(validationErrors);
                             } else {
                                 this.set('validating', false);
+                                this.set('customizing', true);
                             }
                         },
                         error: (error) => {
                             this._validationFailed(error);
                         }
                     });
+                } else {
+                    this.set('customizing', true);
                 }
             }
         },
@@ -192,6 +200,11 @@ export default ModalComponent.extend({
             this.set('fileData', null);
             this.set('mapping', null);
             this.set('validationErrors', null);
+
+            this.set('validating', false);
+            this.set('customizing', false);
+            this.set('uploading', false);
+            this.set('summary', false);
         },
 
         upload() {
@@ -202,6 +215,7 @@ export default ModalComponent.extend({
 
         continueImport() {
             this.set('validating', false);
+            this.set('customizing', true);
         },
 
         confirm() {
@@ -280,6 +294,7 @@ export default ModalComponent.extend({
     },
 
     _uploadStarted() {
+        this.set('customizing', false);
         this.set('uploading', true);
     },
 
@@ -300,6 +315,7 @@ export default ModalComponent.extend({
 
     _uploadFinished() {
         this.set('uploading', false);
+        this.set('summary', true);
     },
 
     _importValidationFailed(errors) {