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 <hi@emma.cafe>

frontend/src/components/ui/data-table.ts

@@ -61,10 +61,12 @@ export class DataTable extends TailwindElement {
     }`;
     return html`
       <btrix-table
-        class="overflow-auto rounded border"
+        class="relative h-full w-full rounded border"
         style=${gridAutoColumnsStyle}
       >
-        <btrix-table-head class="rounded-t border-b bg-neutral-50">
+        <btrix-table-head
+          class="sticky top-0 z-10 rounded-t-[0.1875rem] border-b bg-neutral-50"
+        >
           ${this.columns.map(
             (content, i) => html`
               <btrix-table-header-cell class=${i > 0 ? "border-l" : ""}>
@@ -73,7 +75,7 @@ export class DataTable extends TailwindElement {
             `,
           )}
         </btrix-table-head>
-        <btrix-table-body>
+        <btrix-table-body class="overflow-auto">
           ${this.rows.map(
             (cells, i) => html`
               <btrix-table-row class=${i > 0 ? "border-t" : ""}>

frontend/src/features/qa/page-list/page-list.ts

@@ -244,14 +244,14 @@ export class PageList extends TailwindElement {
           }}
         >
           <sl-option value="screenshotMatch"
-            >${msg("Worst screenshot match")}</sl-option
+            >${msg("Worst Screenshot Match")}</sl-option
           >
           <sl-option value="textMatch"
-            >${msg("Worst extracted text match")}</sl-option
+            >${msg("Worst Extracted Text Match")}</sl-option
           >
-          <sl-option value="comments">${msg("Most comments")}</sl-option>
-          <sl-option value="approved">${msg("Recently approved")}</sl-option>
-          <sl-option value="notApproved">${msg("Not approved")}</sl-option>
+          <sl-option value="comments">${msg("Most Comments")}</sl-option>
+          <sl-option value="approved">${msg("Recently Approved")}</sl-option>
+          <sl-option value="notApproved">${msg("Not Approved")}</sl-option>
         </sl-select>
       </div>
     `;
@@ -310,7 +310,7 @@ export class PageList extends TailwindElement {
           <sl-option value="">${msg("Any")}</sl-option>
           <sl-option value="notReviewed">${msg("None")}</sl-option>
           <sl-option value="reviewed"
-            >${msg("Approved, rejected, or commented")}</sl-option
+            >${msg("Approved, Rejected, or Commented")}</sl-option
           >
           <sl-option value="approved">${msg("Approved")}</sl-option>
           <sl-option value="rejected">${msg("Rejected")}</sl-option>

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"),
             })}
           `,
         )}

frontend/src/pages/org/archived-item-detail/ui/qa.ts

@@ -592,11 +592,11 @@ export class ArchivedItemDetailQA extends TailwindElement {
           >
             <sl-option value="title.1">${msg("Title")}</sl-option>
             <sl-option value="url.1">${msg("URL")}</sl-option>
-            <sl-option value="notes.-1">${msg("Most comments")}</sl-option>
+            <sl-option value="notes.-1">${msg("Most Comments")}</sl-option>
             <sl-option value="approved.-1"
-              >${msg("Recently approved")}</sl-option
+              >${msg("Recently Approved")}</sl-option
             >
-            <sl-option value="approved.1">${msg("Not approved")}</sl-option>
+            <sl-option value="approved.1">${msg("Not Approved")}</sl-option>
           </sl-select>
         </div>
       </div>

frontend/src/pages/org/archived-item-qa/archived-item-qa.ts

@@ -377,7 +377,10 @@ export class ArchivedItemQA extends TailwindElement {
         <div
           class="grid--pageToolbar flex items-center justify-between overflow-hidden border-b py-2"
         >
-          <h2 class="mr-4 truncate text-base font-semibold text-neutral-700">
+          <h2
+            class="mr-4 truncate text-base font-semibold text-neutral-700"
+            title="${this.page ? this.page.title : nothing}"
+          >
             ${this.page ? this.page.title || msg("no page title") : nothing}
           </h2>
           <div class="flex gap-4">
@@ -450,7 +453,7 @@ export class ArchivedItemQA extends TailwindElement {
               ?active=${this.tab === "resources"}
               @click=${this.onTabNavClick}
             >
-              <sl-icon name="server"></sl-icon>
+              <sl-icon name="puzzle-fill"></sl-icon>
               ${msg("Resources")}
             </btrix-navigation-button>
             <btrix-navigation-button
@@ -651,43 +654,45 @@ export class ArchivedItemQA extends TailwindElement {
 
   private renderPanelToolbar() {
     const buttons = html`
-      <div class="ml-1 flex">
-        ${choose(this.tab, [
-          [
-            "replay",
-            () => html`
-              <!-- <sl-icon-button name="arrow-clockwise"></sl-icon-button> -->
-            `,
-          ],
-          [
-            "screenshots",
-            () => html`
+      ${choose(this.tab, [
+        // [
+        //   "replay",
+        //   () => html`
+        //     <div class="flex">
+        //        <sl-icon-button name="arrow-clockwise"></sl-icon-button>
+        //     </div>
+        //   `,
+        // ],
+        [
+          "screenshots",
+          () => html`
+            <div class="flex">
               <sl-tooltip
-                content=${msg("Toggle view")}
+                content=${msg("Toggle screenshot wipe view")}
                 placement="bottom-start"
               >
                 <btrix-button
                   icon
-                  variant=${this.splitView ? "primary" : "neutral"}
+                  variant=${!this.splitView ? "primary" : "neutral"}
                   @click="${() => (this.splitView = !this.splitView)}"
                 >
                   <sl-icon name="vr" label=${msg("Split view")}></sl-icon>
                 </btrix-button>
               </sl-tooltip>
-            `,
-          ],
-        ])}
-      </div>
+            </div>
+          `,
+        ],
+      ])}
     `;
     return html`
       <div
         class="${this.tab === "replay"
           ? "rounded-t-lg"
-          : "rounded-lg mb-3"} flex h-12 items-center border bg-neutral-50 text-base"
+          : "rounded-lg mb-3"} flex h-12 items-center gap-2 border bg-neutral-50 p-2 text-base"
       >
         ${buttons}
         <div
-          class="mx-1.5 flex h-8 min-w-0 flex-1 items-center justify-between gap-2 overflow-hidden whitespace-nowrap rounded border bg-neutral-0 px-2 text-sm"
+          class="flex h-8 min-w-0 flex-1 items-center justify-between gap-2 overflow-hidden whitespace-nowrap rounded border bg-neutral-0 px-2 text-sm"
         >
           <div class="fade-out-r scrollbar-hidden flex-1 overflow-x-scroll">
             <span class="pr-2">${this.page?.url || "http://"}</span>

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);

frontend/src/pages/org/archived-item-qa/ui/resources.ts

@@ -86,25 +86,24 @@ export function renderResources(crawlData: ReplayData, qaData: ReplayData) {
 
   return html`
     <div class=${tw`flex h-full flex-col outline`}>
-      <div class=${tw`flex-1 overflow-auto overscroll-contain pb-3`}>
+      <div class=${tw`flex-1 overflow-auto overscroll-contain`}>
         ${crawlData && qaData
           ? crawlData.resources && qaData.resources
             ? renderDiff(crawlData.resources, qaData.resources)
             : noData
           : renderSpinner()}
       </div>
-      <footer class=${tw`border-t pt-2 text-xs text-neutral-600`}>
-        <p class=${tw`mb-2`}>
-          ${msg('"Good" and "Bad" indicates the status code of the resource.')}
-        </p>
+      <footer class=${tw`pt-2 text-xs text-neutral-600`}>
         <dl>
           <div class=${tw`flex gap-1`}>
             <dt class=${tw`font-semibold`}>${msg("Good:")}</dt>
-            <dd>${msg("Status code between 200-399")}</dd>
+            <dd>${msg("Success (2xx) and Redirection (3xx) status codes")}</dd>
           </div>
           <div class=${tw`flex gap-1`}>
             <dt class=${tw`font-semibold`}>${msg("Bad:")}</dt>
-            <dd>${msg("Status code between 400-599")}</dd>
+            <dd>
+              ${msg("Client error (4xx) and Server error (5xx) status codes")}
+            </dd>
           </div>
         </dl>
       </footer>

frontend/src/pages/org/archived-item-qa/ui/text.ts

@@ -25,7 +25,7 @@ function renderDiff(
 
       return html`
         <div
-          class=${tw`flex-1 overflow-hidden rounded-lg border-dashed p-4 first-of-type:border-r`}
+          class=${tw`flex-1 overflow-hidden border-dashed p-4 first-of-type:border-r`}
           aria-labelledby="crawlTextHeading"
         >
           ${diff.map((part) => {
@@ -42,7 +42,7 @@ function renderDiff(
           })}
         </div>
         <div
-          class=${tw`flex-1 overflow-hidden rounded-lg border-dashed p-4 first-of-type:border-r`}
+          class=${tw`flex-1 overflow-hidden border-dashed p-4 first-of-type:border-r`}
           aria-labelledby="qaTextHeading"
         >
           ${diff.map((part) => {