From 59ed8d718d50ec6730cc8eb993dd204dcf2a7fab Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 9 Jul 2020 14:42:29 +0200
Subject: [PATCH] Members import refinements

no refs.
- updated and removed copy on mapping screen
---
 ghost/admin/app/components/gh-members-import-table.hbs |  6 +++---
 ghost/admin/app/components/modal-import-members.hbs    |  6 +-----
 ghost/admin/app/styles/layouts/members.css             | 10 +++++++++-
 .../components/modal-import-members-test.js            |  2 +-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-import-table.hbs b/ghost/admin/app/components/gh-members-import-table.hbs
index 3b4156f899..fa79b57a80 100644
--- a/ghost/admin/app/components/gh-members-import-table.hbs
+++ b/ghost/admin/app/components/gh-members-import-table.hbs
@@ -4,14 +4,14 @@
             <th class="table-cell-field"><span class="f-small midgrey ttu fw5">Field</span></th>
             <th class="table-cell-data">
                 <div class="flex items-center justify-between">
-                    <span class="f-small midgrey ttu fw5 nudge-top--1">Data <span class="midlightgrey fw4">({{format-number this.currentRecord}} of {{format-number this.allRecords}})</span></span>
+                    <span class="f-small midgrey ttu fw5 nudge-top--1">Sample data <span class="midlightgrey fw4">(#{{format-number this.currentRecord}})</span></span>
                     <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
                         <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey {{unless this.hasPrevRecord "o-30"}}" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
                         <a href="#" {{action "next"}} class="pa1 flex items-center justify-center {{unless this.hasNextRecord "o-30"}}" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
                     </div>
                 </div>
             </th>
-            <th><span class="f-small midgrey ttu fw5">Import as...</span></th>
+            <th><span class="f-small midgrey ttu fw5">Import as</span></th>
         </tr>
     </thead>
     <tbody>
@@ -23,7 +23,7 @@
             </tr>
         {{else}}
             <tr>
-                <td><span>No data</span></td>
+                <td colspan="3" class="gh-member-import-nodata"><span>No data found in the uploaded CSV.</span></td>
             </tr>
         {{/each}}
     </tbody>
diff --git a/ghost/admin/app/components/modal-import-members.hbs b/ghost/admin/app/components/modal-import-members.hbs
index 019f385e07..45491b330a 100644
--- a/ghost/admin/app/components/modal-import-members.hbs
+++ b/ghost/admin/app/components/modal-import-members.hbs
@@ -46,7 +46,6 @@
                     <div class="gh-loading-content">
                         <div class="gh-loading-spinner"></div>
                     </div>
-                    <div class="description midgrey">Validating...</div>
                 </div>
             {{/if}}
         {{/if}}
@@ -54,14 +53,12 @@
         {{#if this.customizing}}
             <GhFormGroup>
                 {{#if this.config.enableDeveloperExperiments}}
-                    <h4 class="fw6 f8 dib mb1">Mapping</h4>
                     <div class="gh-members-import-scrollarea">
                         <GhMembersImportTable
                             @importData={{this.fileData}}
                             @mapping={{this.mapping}}
                             @updateMapping={{action "updateMapping"}}/>
                     </div>
-                    <p>Match the fields in your uploaded file to Ghost members.</p>
                 {{else}}
                     <div class="bg-whitegrey-l2 ba b--whitegrey br3">
                         <div class="flex flex-column items-center justify-center gh-members-import-file">
@@ -72,9 +69,8 @@
                 {{/if}}
 
                 <div class="mt4">
-                    <label for="label-input"><span class="fw6 f8 dib mb1">Labels</span></label>
+                    <label for="label-input"><span class="fw6 f8 dib mb1">Label these members</span></label>
                     <GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />
-                    <p>Will be applied to all newly imported members</p>
                 </div>
             </GhFormGroup>
         {{/if}}
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 9f89660877..203ed6392c 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -461,7 +461,7 @@ textarea.gh-member-details-textarea {
 }
 
 .gh-members-import-spinner .gh-loading-content {
-    padding-bottom: 40px;
+    padding-bottom: 0px;
 }
 
 .gh-members-import-spinner .description {
@@ -708,6 +708,14 @@ p.gh-members-import-errordetail:first-of-type {
     color: var(--midlightgrey);
 }
 
+.gh-member-import-nodata span {
+    display: flex;
+    min-height: 144px;
+    align-items: center;
+    justify-content: center;
+    color: var(--midgrey);
+}
+
 /* Fixing Firefox's select padding */
 @-moz-document url-prefix() {
     .gh-import-member-select select {
diff --git a/ghost/admin/tests/integration/components/modal-import-members-test.js b/ghost/admin/tests/integration/components/modal-import-members-test.js
index 2c420ff5f5..bd394c3a91 100644
--- a/ghost/admin/tests/integration/components/modal-import-members-test.js
+++ b/ghost/admin/tests/integration/components/modal-import-members-test.js
@@ -65,7 +65,7 @@ describe('Integration: Component: modal-import-members-test', function () {
         await fileUpload('input[type="file"]', ['membersfile'], {name: 'test.csv'});
 
         expect(find('label').textContent.trim(), 'labels label')
-            .to.equal('Labels');
+            .to.equal('Label these members');
         expect(find('.gh-btn-green').textContent).to.match(/Import/g);
 
         await click('.gh-btn-green');