TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-23 22:11:09 +03:00
Code Issues Projects Releases Wiki Activity

Email debug updates (#16185)

Browse Source 
no refs.

This commit fixes a couple of UX issues on the email debug screen:

- shows [...] button only for errors actually longer than the available
space to avoid confusion about where there's more error text
- use actual avatars instead of fake red/blue dots to make it consistent
with the rest of the app
- adds click through to member details screen to easily access member
data if needed
- updates text select for provider ID for easier copying
- removes unused "Download full error message" icon
This commit is contained in:
Peter Zimon 2023-01-26 15:12:26 +01:00 committed by GitHub
parent bac75b5d1d
commit 63d216c321
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
ghost/admin/app/components/posts/debug.hbs
View File

@ -55,7 +55,7 @@
</div> </div>
</GhCanvasHeader> </GhCanvasHeader>
<Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|> <Tabs::Tabs class="gh-tabs-analytics" @forceRender={{false}} as |tabs|>
<tabs.tab> <tabs.tab>
<h3>{{svg-jar "analytics-tab-sent-large"}} {{this.tabTotals.permanentFailures}}</h3> <h3>{{svg-jar "analytics-tab-sent-large"}} {{this.tabTotals.permanentFailures}}</h3>
<p><span class="analytics-tab-label">Permanent {{gh-pluralize this.tabTotals.permanentFailures "failure" without-count=true}}</span></p> <p><span class="analytics-tab-label">Permanent {{gh-pluralize this.tabTotals.permanentFailures "failure" without-count=true}}</span></p>
@ -67,29 +67,37 @@
{{#each this.permanentFailureData as |failure index|}} {{#each this.permanentFailureData as |failure index|}}
<tr> <tr>
<div class="gh-list-data gh-email-debug-col-member"> <div class="gh-list-data gh-email-debug-col-member">
<div class="gh-email-debug-member"> {{#if failure.member.id}}
<figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-red"> <LinkTo @route="member" @model={{failure.member.id}} class="gh-email-debug-member">
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100"> <GhMemberAvatar @member={{failure.member.record}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<span class="gh-member-avatar-label gh-member-list-avatar">{{failure.recipient.initials}}</span> <div>
<h3 class="ma0 pa0 gh-members-list-name">{{failure.recipient.name}}</h3>
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{failure.recipient.email}}</p>
</div>
</LinkTo>
{{else}}
<div class="gh-email-debug-member">
<figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-red">
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
<span class="gh-member-avatar-label gh-member-list-avatar">{{failure.recipient.initials}}</span>
</div>
</figure>
<div>
<h3 class="ma0 pa0 gh-members-list-name">{{failure.recipient.name}}</h3>
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{failure.recipient.email}}</p>
</div> </div>
</figure>
<div>
<h3 class="ma0 pa0 gh-members-list-name">{{failure.recipient.name}}</h3>
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{failure.recipient.email}}</p>
</div> </div>
</div> {{/if}}
</div> </div>
<div class="gh-list-data gh-email-debug-col-failure"> <div class="gh-list-data gh-email-debug-col-failure">
<div class="gh-email-debug-failure-details"> <div class="gh-email-debug-failure-details">
<div class="gh-email-debug-failure-codes"> <div class="gh-email-debug-failure-codes">
<span class="gh-email-debug-failure-code">Failure code: <span>{{failure.code}}</span></span> <span class="gh-email-debug-failure-code">Failure code: <span>{{failure.code}}</span></span>
<span class="gh-email-debug-failure-code">Enhanced code: <span>{{failure.enhancedCode}}</span></span> {{#if failure.enhancedCode}}
</div> <span class="gh-email-debug-failure-code">Enhanced code: <span>{{failure.enhancedCode}}</span></span>
<div class="gh-email-debug-readmore-error"> {{/if}}
<input type="checkbox" id="error-{{index}}-checkbox" class="toggle-checkbox">
<label for="error-{{index}}-checkbox">{{svg-jar "dotdotdot"}}</label>
<span>{{failure.message}}</span>
</div> </div>
<Posts::Debug::EmailErrorMessage @index={{index}} @message={{failure.message}} />
</div> </div>
</div> </div>
</tr> </tr>
@ -116,33 +124,38 @@
{{#each this.temporaryFailureData as |failure index|}} {{#each this.temporaryFailureData as |failure index|}}
<tr> <tr>
<div class="gh-list-data gh-email-debug-col-member"> <div class="gh-list-data gh-email-debug-col-member">
<div class="gh-email-debug-member"> {{#if failure.member.id}}
<figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-purple"> <LinkTo @route="member" @model={{failure.member.id}} class="gh-email-debug-member">
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100"> <GhMemberAvatar @member={{failure.member.record}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<span class="gh-member-avatar-label gh-member-list-avatar">{{failure.recipient.initials}}</span> <div>
<h3 class="ma0 pa0 gh-members-list-name">{{failure.recipient.name}}</h3>
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{failure.recipient.email}}</p>
</div>
</LinkTo>
{{else}}
<div class="gh-email-debug-member">
<figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-blue">
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
<span class="gh-member-avatar-label gh-member-list-avatar">{{failure.recipient.initials}}</span>
</div>
</figure>
<div>
<h3 class="ma0 pa0 gh-members-list-name">{{failure.recipient.name}}</h3>
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{failure.recipient.email}}</p>
</div> </div>
{{!-- {{#if this.avatarImage}}
<img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or failure.recipient.name failure.recipient.email}}" />
{{/if}} --}}
</figure>
<div>
<h3 class="ma0 pa0 gh-members-list-name">{{failure.recipient.name}}</h3>
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{failure.recipient.email}}</p>
</div> </div>
</div> {{/if}}
</div> </div>
<div class="gh-list-data gh-email-debug-col-failure"> <div class="gh-list-data gh-email-debug-col-failure">
<div class="gh-email-debug-failure"> <div class="gh-email-debug-failure">
<div class="gh-email-debug-failure-details"> <div class="gh-email-debug-failure-details">
<div class="gh-email-debug-failure-codes"> <div class="gh-email-debug-failure-codes">
<span class="gh-email-debug-failure-code">Failure code: <span>{{failure.code}}</span></span> <span class="gh-email-debug-failure-code">Failure code: <span>{{failure.code}}</span></span>
<span class="gh-email-debug-failure-code">Enhanced code: <span>{{failure.enhancedCode}}</span></span> {{#if failure.enhancedCode}}
</div> <span class="gh-email-debug-failure-code">Enhanced code: <span>{{failure.enhancedCode}}</span></span>
<div class="gh-email-debug-readmore-error"> {{/if}}
<input type="checkbox" id="error-{{index}}-checkbox-permanent" class="toggle-checkbox">
<label for="error-{{index}}-checkbox-permanent">{{svg-jar "dotdotdot"}}</label>
<span>{{failure.message}}</span>
</div> </div>
<Posts::Debug::EmailErrorMessage @index={{index}} @message={{failure.message}} />
</div> </div>
</div> </div>
</div> </div>
@ -199,10 +212,11 @@
{{#if (or batch.providerId batch.errorStatusCode batch.errorMessage)}} {{#if (or batch.providerId batch.errorStatusCode batch.errorMessage)}}
<div class="detailtext"> <div class="detailtext">
{{#if batch.providerId}} {{#if batch.providerId}}
<div>Provider id: <div class="noselect">
<span> Provider id:
<code>
{{batch.providerId}} {{batch.providerId}}
</span> </code>
</div> </div>
{{/if}} {{/if}}
{{#if batch.errorStatusCode}} {{#if batch.errorStatusCode}}
@ -214,9 +228,9 @@
<span class="error">{{batch.errorMessage}}</span> <span class="error">{{batch.errorMessage}}</span>
{{/if}} {{/if}}
</div> </div>
{{#if batch.errorMessage}} {{!-- {{#if batch.errorMessage}}
<div class="download-icon">{{svg-jar "download" title="Download full failure message"}}</div> <div class="download-icon">{{svg-jar "download" title="Download full failure message"}}</div>
{{/if}} {{/if}} --}}
{{else}} {{else}}
<div class="dib lightgrey">N/A</div> <div class="dib lightgrey">N/A</div>
{{/if}} {{/if}}
@ -231,93 +245,6 @@
</td> </td>
</tr> </tr>
{{/unless}} {{/unless}}
{{!-- <tr>
<div class="gh-list-data gh-email-debug-batch-col-status">
<span class="failed">Failed</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-created">
<span>22 June, 2022 19:34:29</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-segment">
<span>-status:free</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-recipients">
<span>1,000</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-details">
<div class="flex flex-col items-center space-between w100">
<div class="detailtext">
<div>Provider id: <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
<div>Failure status code: <span>500</span></div>
<span class="error">Mailgun Error 500: Internal server error</span>
</div>
<div class="download-icon">{{svg-jar "download" title="Download full failure message"}}</div>
</div>
</div>
</tr>
<tr>
<div class="gh-list-data gh-email-debug-batch-col-status">
<span class="pending">Pending</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-created">
<span>22 June, 2022 19:34:29</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-segment">
<span>-status:free</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-recipients">
<span>1,000</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-details">
<div class="flex flex-col items-center space-between w100">
<div class="detailtext">
<div>Provider id: <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
</div>
</div>
</div>
</tr>
<tr>
<div class="gh-list-data gh-email-debug-batch-col-status">
<span class="submitting">Submitting</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-created">
<span>22 June, 2022 19:34:29</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-segment">
<span>-status:free</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-recipients">
<span>1,000</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-details">
<div class="flex flex-col items-center space-between w100">
<div class="detailtext">
<div>Provider id: <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
</div>
</div>
</div>
</tr>
<tr>
<div class="gh-list-data gh-email-debug-batch-col-status">
<span class="submitted">Submitted</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-created">
<span>22 June, 2022 19:34:29</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-segment">
<span>-status:free</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-recipients">
<span>1,000</span>
</div>
<div class="gh-list-data gh-email-debug-batch-col-details">
<div class="flex flex-col items-center space-between w100">
<div class="detailtext">
<div>Provider id: <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
</div>
</div>
</div>
</tr> --}}
</tbody> </tbody>
</table> </table>
</tabs.tabPanel> </tabs.tabPanel>

4
ghost/admin/app/components/posts/debug.js
View File

@ -97,6 +97,8 @@ export default class Debug extends Component {
initials: this.getInitials(failure.email_recipient?.member_name || failure.email_recipient?.member_email) initials: this.getInitials(failure.email_recipient?.member_name || failure.email_recipient?.member_email)
}, },
member: { member: {
record: failure.member,
id: failure.member?.id,
name: failure.member?.name || '', name: failure.member?.name || '',
email: failure.member?.email || '', email: failure.member?.email || '',
initials: this.getInitials(failure.member?.name) initials: this.getInitials(failure.member?.name)
@ -120,6 +122,8 @@ export default class Debug extends Component {
initials: this.getInitials(failure.email_recipient?.member_name || failure.email_recipient?.member_email) initials: this.getInitials(failure.email_recipient?.member_name || failure.email_recipient?.member_email)
}, },
member: { member: {
record: failure.member,
id: failure.member?.id,
name: failure.member?.name || '', name: failure.member?.name || '',
email: failure.member?.email || '', email: failure.member?.email || '',
initials: this.getInitials(failure.member?.name) initials: this.getInitials(failure.member?.name)

5
ghost/admin/app/components/posts/debug/email-error-message.hbs Normal file
View File

@ -0,0 +1,5 @@
<div class="gh-email-debug-readmore-error" {{did-insert this.setup}}>
<input type="checkbox" id="error-{{@index}}-checkbox" class="toggle-checkbox">
<label class="{{if this.more "flex" "hidden"}}" for="error-{{@index}}-checkbox">{{svg-jar "dotdotdot"}}</label>
<span>{{@message}}</span>
</div>

15
ghost/admin/app/components/posts/debug/email-error-message.js Normal file
View File

@ -0,0 +1,15 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';
export default class EmailErrorMessage extends Component {
@tracked more = false;
@action
setup(element) {
const errorContainer = element.querySelector('span');
if (element.offsetWidth <= errorContainer.offsetWidth) {
this.more = true;
}
}
}

15
ghost/admin/app/styles/layouts/settings.css
View File

@ -3369,7 +3369,6 @@ p.theme-validation-details {
/* Debug screen /* Debug screen
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-email-debug .gh-post-analytics-header .gh-canvas-header-content { .gh-email-debug .gh-post-analytics-header .gh-canvas-header-content {
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
@ -3456,6 +3455,7 @@ p.theme-validation-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
width: 100%;
} }
.gh-email-debug-failure-codes { .gh-email-debug-failure-codes {
@ -3538,6 +3538,16 @@ p.theme-validation-details {
word-break: break-all; word-break: break-all;
} }
.gh-email-debug-batch-col-details .detailtext .noselect {
user-select: none;
}
.gh-email-debug-batch-col-details .detailtext div code {
white-space: unset;
word-break: normal;
user-select: text;
}
.gh-email-debug-batch-col-details .error { .gh-email-debug-batch-col-details .error {
color: color-mod(var(--red) l(-2%)); color: color-mod(var(--red) l(-2%));
font-weight: unset; font-weight: unset;
@ -3619,6 +3629,7 @@ p.theme-validation-details {
.gh-email-debug-readmore-error { .gh-email-debug-readmore-error {
display: inline-flex; display: inline-flex;
width: 100%;
} }
.gh-email-debug-readmore-error label { .gh-email-debug-readmore-error label {
@ -3648,7 +3659,7 @@ p.theme-validation-details {
} }
.gh-email-debug-readmore-error .toggle-checkbox:checked ~ label { .gh-email-debug-readmore-error .toggle-checkbox:checked ~ label {
display: none; display: none !important;
} }
.gh-email-debug-readmore-error svg { .gh-email-debug-readmore-error svg {