From 1dd2a3db07cacb020013c9b371ae4f3dfe720c0f Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Tue, 7 Jul 2020 17:53:59 +0200 Subject: [PATCH] Updated styles for members import no refs. - added spinner to validation state - applied styles to pre-validation step - applied styles to import results --- .../app/components/modal-import-members.hbs | 103 ++++++++++++------ .../app/components/modal-import-members.js | 2 +- .../app/services/member-import-validator.js | 64 +++++------ ghost/admin/app/styles/layouts/members.css | 86 ++++++++++++--- .../services/member-import-validator-test.js | 2 +- 5 files changed, 173 insertions(+), 84 deletions(-) diff --git a/ghost/admin/app/components/modal-import-members.hbs b/ghost/admin/app/components/modal-import-members.hbs index dd484e2cf8..f71f9b0fc8 100644 --- a/ghost/admin/app/components/modal-import-members.hbs +++ b/ghost/admin/app/components/modal-import-members.hbs @@ -1,7 +1,7 @@

{{#if this.importResponse}} - Import complete + Import complete{{unless this.importResponse.invalid.count "!"}} {{else}} Import members {{/if}} @@ -11,23 +11,39 @@ {{#if this.importResponse}} {{!-- post upload step with import stats --}} -
-
- {{svg-jar "check-circle" class="w4 h4 stroke-green mr2"}} -

{{this.importResponse.imported.count}} members were added

-
- {{#if this.importResponse.invalid.count}} -
- {{svg-jar "warning" class="w4 h4 fill-red mr2 nudge-top--3"}} -
-

{{this.importResponse.invalid.count}} members were skipped

+ +
+ + {{!-- Summary --}} +
+
+
+

{{this.importResponse.imported.count}}

+

Members added

+
+
+

{{this.importResponse.invalid.count}}

+

Errors

+
+
+
+ + {{#if this.importResponse.invalid.count}} +
+
+ {{svg-jar "warning" class="w5 h5 fill-red nudge-top--3 mr3"}} +
+

{{this.importResponse.invalid.count}} members were skipped due to the following errors:

+ {{#if this.config.enableDeveloperExperiments}} +
    + {{#each this.importResponse.invalid.errors as |error|}} +
  • {{error.message}} ({{error.count}})
    • + {{/each}} +
+ {{/if}} +
- {{#if this.config.enableDeveloperExperiments}} - {{#each this.importResponse.invalid.errors as |error|}} -

{{error.message}} ({{error.count}})

- {{/each}} - {{/if}} {{/if}}
{{else}} @@ -35,21 +51,31 @@ {{#if (and this.filePresent (not this.failureMessage))}} {{#if this.validating}} {{#if validationErrors}} -
-
{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-yellow-d1"}}
-

The CSV contains errors some members will not be imported

+
+
{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-yellow-d1"}}
+
+

The CSV contains errors! Some members will not be imported.

+ {{#if validationErrors}} +
    + {{#each validationErrors as |error|}} +
  • + {{{error.message}}} + {{#if error.context}} +

    {{{error.context}}}

    + {{/if}} +
    • + {{/each}} +
+ {{/if}} +
- - {{#each validationErrors as |error|}} -
-

{{{error.message}}}

- {{#if error.context}} -

{{{error.context}}}

- {{/if}} -
- {{/each}} {{else}} - Validating... + {{/if}} {{else}} @@ -102,17 +128,22 @@
{{#if this.importResponse}} {{else if (and this.filePresent (not this.failureMessage))}} - {{#if this.validating}} - + {{#if validationErrors}} + + + {{/if}} {{else}} + diff --git a/ghost/admin/app/components/modal-import-members.js b/ghost/admin/app/components/modal-import-members.js index 8951d437c2..01fc51e7e8 100644 --- a/ghost/admin/app/components/modal-import-members.js +++ b/ghost/admin/app/components/modal-import-members.js @@ -69,7 +69,7 @@ export default ModalComponent.extend({ notifications: service(), memberImportValidator: service(), - labelText: 'Select or drag-and-drop a CSV File', + labelText: 'Select or drag-and-drop a CSV file', dragClass: null, file: null, diff --git a/ghost/admin/app/services/member-import-validator.js b/ghost/admin/app/services/member-import-validator.js index 4ddd681832..74d50c9174 100644 --- a/ghost/admin/app/services/member-import-validator.js +++ b/ghost/admin/app/services/member-import-validator.js @@ -25,35 +25,6 @@ export default Service.extend({ const hasStripeIds = !!mapping.stripe_customer_id; const hasEmails = !!mapping.email; - if (!hasEmails) { - validationErrors.push(new MemberImportError({ - message: 'No email addresses found in provided data.' - })); - } else { - // check can be done on whole set as it won't be too slow - const {invalidCount, emptyCount, duplicateCount} = this._checkEmails(data, mapping); - if (invalidCount) { - validationErrors.push(new MemberImportError({ - message: `Invalid email address (${invalidCount})`, - type: 'warning' - })); - } - - if (emptyCount) { - validationErrors.push(new MemberImportError({ - message: `Missing email address (${emptyCount})`, - type: 'warning' - })); - } - - if (duplicateCount) { - validationErrors.push(new MemberImportError({ - message: `Duplicate email address (${duplicateCount})`, - type: 'warning' - })); - } - } - if (hasStripeIds) { // check can be done on whole set as it won't be too slow const {totalCount, duplicateCount} = this._checkStripeIds(data, mapping); @@ -83,6 +54,35 @@ export default Service.extend({ } } + if (!hasEmails) { + validationErrors.push(new MemberImportError({ + message: 'No email addresses found in the uploaded CSV.' + })); + } else { + // check can be done on whole set as it won't be too slow + const {invalidCount, emptyCount, duplicateCount} = this._checkEmails(data, mapping); + if (invalidCount) { + validationErrors.push(new MemberImportError({ + message: `Invalid email address (${invalidCount})`, + type: 'warning' + })); + } + + if (emptyCount) { + validationErrors.push(new MemberImportError({ + message: `Missing email address (${emptyCount})`, + type: 'warning' + })); + } + + if (duplicateCount) { + validationErrors.push(new MemberImportError({ + message: `Duplicate email address (${duplicateCount})`, + type: 'warning' + })); + } + } + return {validationErrors, mapping}; }, @@ -192,11 +192,13 @@ export default Service.extend({ } if (emailValue && !validator.isEmail(emailValue)) { - invalidCount += 1; + // Temporarily not returning this error + // invalidCount += 1; } else if (emailValue) { if (emailMap[emailValue]) { emailMap[emailValue] += 1; - duplicateCount += 1; + // Temporarily not returning this error + // duplicateCount += 1; } else { emailMap[emailValue] = 1; } diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 3b963f2e69..0c20cefb49 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -1,5 +1,9 @@ /* Global /* ----------------------------------------- */ +:root { + --member-import-table-outline: color-mod(var(--darkgrey) a(12%) s(+40%)); + --member-import-table-border: color-mod(var(--darkgrey) a(7%) s(+40%)); +} /* Members avatar /* ----------------------------------------- */ @@ -448,27 +452,62 @@ textarea.gh-member-details-textarea { min-height: 180px; } +.gh-members-import-spinner { + position: relative; + display: flex; + min-height: 182px; + justify-content: center; + align-items: center; +} + +.gh-members-import-spinner .gh-loading-content { + padding-bottom: 40px; +} + +.gh-members-import-spinner .description { + padding-top: 46px; +} + .gh-members-upload-errorcontainer { border: 1px solid var(--whitegrey); border-radius: 4px; - padding: 8px; - margin-bottom: 20px; + padding: 12px; + margin-bottom: 24px; color: var(--middarkgrey); } -.gh-members-upload-warningmessage { +.gh-members-upload-errorcontainer.warning { border-left: 4px solid var(--yellow); } -.gh-members-upload-warningmessage p a { + +.gh-members-upload-errorcontainer.warning p a { color: color-mod(var(--yellow) l(-12%)); text-decoration: underline; } -.gh-members-upload-errormessage { +.gh-members-upload-errorcontainer.error { border-left: 4px solid var(--red); } +.gh-members-upload-errorcontainer.error p a { + color: var(--red); + text-decoration: underline; +} + +.gh-members-import-errormessage { + font-size: 1.25rem; + font-weight: 600; + margin: 12px 0 0; +} + +p.gh-members-import-errorcontext { + font-size: 1.25rem; + line-height: 1.3em; + margin: 0; + font-weight: 400; +} + .gh-members-import-scrollarea { position: relative; max-height: calc(100vh - 350px - 12vw); @@ -550,18 +589,18 @@ p.gh-members-import-errordetailtext { .gh-members-import-table th { padding: 3px 8px; background: color-mod(var(--darkgrey) a(5%) s(+50%)); - border-left: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%)); - border-top: 1px solid color-mod(var(--darkgrey) a(12%) s(+40%)); - border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%)); + border-left: 1px solid var(--member-import-table-border); + border-top: 1px solid var(--member-import-table-outline); + border-bottom: 1px solid var(--member-import-table-border); } .gh-members-import-table tr th:first-of-type { - border-left: 1px solid color-mod(var(--darkgrey) a(12%) s(+40%)); + border-left: 1px solid var(--member-import-table-outline); width: 180px; } .gh-members-import-table tr th:last-of-type { - border-right: 1px solid color-mod(var(--darkgrey) a(12%) s(+40%)); + border-right: 1px solid var(--member-import-table-outline); } .gh-members-import-table td.empty-cell { @@ -570,23 +609,23 @@ p.gh-members-import-errordetailtext { .gh-members-import-table td { padding: 7px 8px 6px; - border-left: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%)); - border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%)); + border-left: 1px solid var(--member-import-table-border); + border-bottom: 1px solid var(--member-import-table-border); vertical-align: top; } .gh-members-import-table tr td:first-of-type { - border-left: 1px solid color-mod(var(--darkgrey) a(12%) s(+40%)); + border-left: 1px solid var(--member-import-table-outline); width: 180px; } .gh-members-import-table tr td:last-of-type { padding: 0; - border-right: 1px solid color-mod(var(--darkgrey) a(12%) s(+40%)); + border-right: 1px solid var(--member-import-table-outline); } .gh-members-import-table tr:last-of-type td { - border-bottom: 1px solid color-mod(var(--darkgrey) a(12%) s(+40%)); + border-bottom: 1px solid var(--member-import-table-outline); } .gh-members-import-datanav { @@ -651,6 +690,23 @@ p.gh-members-import-errordetail:first-of-type { overflow-wrap: break-word; } +.gh-member-import-result-summary { + padding: 20px; +} + +.gh-member-import-result-summary h2 { + font-size: 3.6rem; + font-weight: 600; + margin: 0; + padding: 0; +} + +.gh-member-import-result-summary p { + margin: -2px 0 0; + padding: 0; + color: var(--midlightgrey); +} + /* Fixing Firefox's select padding */ @-moz-document url-prefix() { .gh-import-member-select select { diff --git a/ghost/admin/tests/integration/services/member-import-validator-test.js b/ghost/admin/tests/integration/services/member-import-validator-test.js index d5067746e9..b22e9c7243 100644 --- a/ghost/admin/tests/integration/services/member-import-validator-test.js +++ b/ghost/admin/tests/integration/services/member-import-validator-test.js @@ -74,7 +74,7 @@ describe('Integration: Service: member-import-validator', function () { }]); expect(validationErrors.length).to.equal(1); - expect(validationErrors[0].message).to.equal('No email addresses found in provided data.'); + expect(validationErrors[0].message).to.equal('No email addresses found in the uploaded CSV.'); }); it('returns validation error for invalid email', async function () {