Properly pluralize "Pages" in QA, and display skeletons instead of incorrect fallback values (#2026)

This commit is contained in:
Emma Segal-Grossman 2024-08-20 20:33:52 -04:00 committed by GitHub
parent 8c9a14b6a2
commit 570dc10f2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -249,33 +249,45 @@ export class ArchivedItemDetailQA extends BtrixElement {
</sl-tooltip> </sl-tooltip>
</div> </div>
</div> </div>
<div> ${this.crawl
<p> ? html`<div class="tabular-nums">
<span class="text-primary">${htmlCount}</span> ${msg( <p>
"HTML Pages", ${msg(html`
)} <span class="text-primary">${htmlCount}</span>
</p> HTML ${pluralOf("pages", htmlCount)}
<p> `)}
<span class="text-neutral-600">${fileCount}</span> ${msg( </p>
"Non-HTML Files Captured As Pages", <p>
)} ${msg(html`
</p> <span class="text-neutral-600">${fileCount}</span>
<p> Non-HTML files captured as ${pluralOf("pages", fileCount)}
<span class="text-danger">${errorCount}</span> ${msg( `)}
"Failed Pages", </p>
)} <p>
</p> ${msg(html`
</div> <span class="text-danger">${errorCount}</span>
Failed ${pluralOf("pages", errorCount)}
`)}
</p>
</div> `
: html`
<sl-skeleton class="mb-[5px] w-24"></sl-skeleton>
<sl-skeleton class="mb-[5px] w-64"></sl-skeleton>
<sl-skeleton class="mb-[5px] w-28"></sl-skeleton>
`}
${when(this.mostRecentNonFailedQARun && this.qaRuns, (qaRuns) => ${when(this.mostRecentNonFailedQARun && this.qaRuns, (qaRuns) =>
this.renderAnalysis(qaRuns), this.renderAnalysis(qaRuns),
)} )}
</btrix-card> </btrix-card>
<div> <div>
<h4 class="mb-2 mt-4 text-lg leading-8"> <h4 class="mb-2 mt-4 text-lg tabular-nums leading-8">
<span class="font-semibold">${msg("Pages")}</span> (${( <span class="font-semibold">${msg("Pages")}</span>
this.pages?.total ?? 0 ${this.pages != null
).toLocaleString()}) ? `(${this.pages.total.toLocaleString()})`
: html`<sl-skeleton
class="inline-block h-6 w-5 align-[-6px]"
></sl-skeleton>`}
</h4> </h4>
</div> </div>
${this.renderPageListControls()} ${this.renderPageList()} ${this.renderPageListControls()} ${this.renderPageList()}