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
? html`<div class="tabular-nums">
<p> <p>
<span class="text-primary">${htmlCount}</span> ${msg( ${msg(html`
"HTML Pages", <span class="text-primary">${htmlCount}</span>
)} HTML ${pluralOf("pages", htmlCount)}
`)}
</p> </p>
<p> <p>
<span class="text-neutral-600">${fileCount}</span> ${msg( ${msg(html`
"Non-HTML Files Captured As Pages", <span class="text-neutral-600">${fileCount}</span>
)} Non-HTML files captured as ${pluralOf("pages", fileCount)}
`)}
</p> </p>
<p> <p>
<span class="text-danger">${errorCount}</span> ${msg( ${msg(html`
"Failed Pages", <span class="text-danger">${errorCount}</span>
)} Failed ${pluralOf("pages", errorCount)}
`)}
</p> </p>
</div> </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()}