From a60f56b87a695ee33da4b50f82284e995ae5a78e Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Fri, 19 Apr 2024 22:26:04 -0400 Subject: [PATCH] Frontend QA Polish Changes (#1703) Fixes #1696 - Inverts the toggle button state for screenshot comparison, is now untoggled by default - Changes the Resources tab to a puzzle piece - Parity with the metaphor used in ReplayWeb.page. Would like to leave databases to represent actual databases... Which given the app could very well make their way in here! - Fixes the dashed boarder radius being applied to the text comparison tab - Sets the data table header row to `position: sticky;` so it's always visible if the table scrolls! - This applies to all data tables, tested the one in QA review, the overview page, and the org settings members list - Casing changes for parity with other dropdown sorting controls Co-authored-by: Emma Segal-Grossman --- frontend/src/components/ui/data-table.ts | 8 ++-- .../src/features/qa/page-list/page-list.ts | 12 ++--- .../archived-item-detail.ts | 2 +- .../pages/org/archived-item-detail/ui/qa.ts | 6 +-- .../org/archived-item-qa/archived-item-qa.ts | 47 ++++++++++--------- .../src/pages/org/archived-item-qa/styles.ts | 2 +- .../org/archived-item-qa/ui/resources.ts | 13 +++-- .../src/pages/org/archived-item-qa/ui/text.ts | 4 +- 8 files changed, 50 insertions(+), 44 deletions(-) diff --git a/frontend/src/components/ui/data-table.ts b/frontend/src/components/ui/data-table.ts index 05e2bce6..d0c8f1ed 100644 --- a/frontend/src/components/ui/data-table.ts +++ b/frontend/src/components/ui/data-table.ts @@ -61,10 +61,12 @@ export class DataTable extends TailwindElement { }`; return html` - + ${this.columns.map( (content, i) => html` 0 ? "border-l" : ""}> @@ -73,7 +75,7 @@ export class DataTable extends TailwindElement { `, )} - + ${this.rows.map( (cells, i) => html` 0 ? "border-t" : ""}> diff --git a/frontend/src/features/qa/page-list/page-list.ts b/frontend/src/features/qa/page-list/page-list.ts index 2085ad18..e5a1511c 100644 --- a/frontend/src/features/qa/page-list/page-list.ts +++ b/frontend/src/features/qa/page-list/page-list.ts @@ -244,14 +244,14 @@ export class PageList extends TailwindElement { }} > ${msg("Worst screenshot match")}${msg("Worst Screenshot Match")} ${msg("Worst extracted text match")}${msg("Worst Extracted Text Match")} - ${msg("Most comments")} - ${msg("Recently approved")} - ${msg("Not approved")} + ${msg("Most Comments")} + ${msg("Recently Approved")} + ${msg("Not Approved")} `; @@ -310,7 +310,7 @@ export class PageList extends TailwindElement { ${msg("Any")} ${msg("None")} ${msg("Approved, rejected, or commented")}${msg("Approved, Rejected, or Commented")} ${msg("Approved")} ${msg("Rejected")} diff --git a/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts b/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts index 11269e63..d7305e1e 100644 --- a/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts +++ b/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts @@ -484,7 +484,7 @@ export class ArchivedItemDetail extends TailwindElement { section: "qa", iconLibrary: "default", icon: "clipboard2-data-fill", - label: msg("QA"), + label: msg("Quality Assurance"), })} `, )} diff --git a/frontend/src/pages/org/archived-item-detail/ui/qa.ts b/frontend/src/pages/org/archived-item-detail/ui/qa.ts index 0f0d5f27..d7bfa1f8 100644 --- a/frontend/src/pages/org/archived-item-detail/ui/qa.ts +++ b/frontend/src/pages/org/archived-item-detail/ui/qa.ts @@ -592,11 +592,11 @@ export class ArchivedItemDetailQA extends TailwindElement { > ${msg("Title")} ${msg("URL")} - ${msg("Most comments")} + ${msg("Most Comments")} ${msg("Recently approved")}${msg("Recently Approved")} - ${msg("Not approved")} + ${msg("Not Approved")} diff --git a/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts b/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts index 8ae27222..31544e50 100644 --- a/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts +++ b/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts @@ -377,7 +377,10 @@ export class ArchivedItemQA extends TailwindElement {
-

+

${this.page ? this.page.title || msg("no page title") : nothing}

@@ -450,7 +453,7 @@ export class ArchivedItemQA extends TailwindElement { ?active=${this.tab === "resources"} @click=${this.onTabNavClick} > - + ${msg("Resources")} - ${choose(this.tab, [ - [ - "replay", - () => html` - - `, - ], - [ - "screenshots", - () => html` + ${choose(this.tab, [ + // [ + // "replay", + // () => html` + //
+ // + //
+ // `, + // ], + [ + "screenshots", + () => html` +
- `, - ], - ])} -
+
+ `, + ], + ])} `; return html`
${buttons}
${this.page?.url || "http://"} diff --git a/frontend/src/pages/org/archived-item-qa/styles.ts b/frontend/src/pages/org/archived-item-qa/styles.ts index 1d0b5fff..d0514c3b 100644 --- a/frontend/src/pages/org/archived-item-qa/styles.ts +++ b/frontend/src/pages/org/archived-item-qa/styles.ts @@ -49,7 +49,7 @@ export const styles = css` } sl-image-comparer::part(divider) { - width: 1rem; + --divider-width: 1rem; border-left: 1px solid var(--sl-panel-border-color); border-right: 1px solid var(--sl-panel-border-color); box-shadow: var(--sl-shadow-large); diff --git a/frontend/src/pages/org/archived-item-qa/ui/resources.ts b/frontend/src/pages/org/archived-item-qa/ui/resources.ts index a2587057..c77d2d2f 100644 --- a/frontend/src/pages/org/archived-item-qa/ui/resources.ts +++ b/frontend/src/pages/org/archived-item-qa/ui/resources.ts @@ -86,25 +86,24 @@ export function renderResources(crawlData: ReplayData, qaData: ReplayData) { return html`
-
+
${crawlData && qaData ? crawlData.resources && qaData.resources ? renderDiff(crawlData.resources, qaData.resources) : noData : renderSpinner()}
-