QA UI: Copy updates & beta tag (#1722)

Closes #1718

- Adds beta badge & icon components
- Changes the capitalization of "analysis run" to lowercase in sentences
- Changes instances of "in Replay" and "From Replay" to "During
Analysis"

| Screenshots |
| --- |
| <img width="400" alt="Screenshot 2024-04-22 at 6 09 28 PM"
src="https://github.com/webrecorder/browsertrix/assets/5727389/4822e361-c82c-4349-957a-a7a9f15dbc7a">
|
| <img width="254" alt="Screenshot 2024-04-22 at 6 09 44 PM"
src="https://github.com/webrecorder/browsertrix/assets/5727389/01a1457f-e00c-46ba-8af5-66b702344b7a">
|
| <img width="313" alt="Screenshot 2024-04-22 at 6 10 04 PM"
src="https://github.com/webrecorder/browsertrix/assets/5727389/bd38e2f7-28ea-49e9-b856-cc7ade6ae618">
|
| <img width="597" alt="image"
src="https://github.com/webrecorder/browsertrix/assets/5727389/ac95c2a3-ba67-42b3-a33d-c0b61e2ba6f7">
|

frontend/src/components/beta-badges.stylesheet.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  :host {
+    @apply contents !leading-[0];
+  }
+  sl-tooltip {
+    @apply [--max-width:theme(spacing.64)];
+  }
+  sl-tooltip::part(body),
+  sl-tooltip::part(base__arrow) {
+    @apply bg-theme-green;
+  }
+
+  sl-tooltip::part(body) {
+    @apply w-auto text-balance text-white;
+  }
+}

frontend/src/components/beta-badges.ts

@@ -0,0 +1,53 @@
+import { localized, msg } from "@lit/localize";
+import { type SlTooltip } from "@shoelace-style/shoelace";
+import { html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import stylesheet from "./beta-badges.stylesheet.css";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+
+const styles = unsafeCSS(stylesheet);
+
+@localized()
+@customElement("btrix-beta-icon")
+export class BetaIcon extends TailwindElement {
+  static styles = styles;
+  render() {
+    return html`<sl-tooltip content=${msg("Beta feature")} hoist>
+      <sl-icon
+        name="stars"
+        label="Beta"
+        class="h-4 w-4 text-theme-green"
+      ></sl-icon>
+    </sl-tooltip>`;
+  }
+}
+
+@localized()
+@customElement("btrix-beta-badge")
+export class BetaBadge extends TailwindElement {
+  @property({ type: String })
+  placement: SlTooltip["placement"] = "top";
+
+  static styles = styles;
+
+  render() {
+    return html`<sl-tooltip hoist placement=${this.placement}>
+      <div slot="content">
+        <b>${msg("This part of Browsertrix is in beta!")}</b>
+        ${msg(
+          "Parts might change or be broken. Please share your thoughts with us!",
+        )}
+      </div>
+      <span class="inline-block align-middle text-xs text-theme-green">
+        <sl-icon
+          name="stars"
+          label="Beta feature"
+          class="h-4 w-4 align-middle"
+        ></sl-icon
+        >&nbsp;${msg("Beta")}
+      </span>
+    </sl-tooltip>`;
+  }
+}

frontend/src/components/index.ts

@@ -4,3 +4,4 @@ import "./utils";
 import("./orgs-list");
 import("./not-found");
 import("./screencast");
+import("./beta-badges");

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

@@ -258,7 +258,10 @@ export class ArchivedItemDetail extends TailwindElement {
     switch (this.activeTab) {
       case "qa":
         sectionContent = this.renderPanel(
-          html`${this.renderTitle(msg("Quality Assurance"))}
+          html`${this.renderTitle(
+              html`${msg("Quality Assurance")}
+                <btrix-beta-badge></btrix-beta-badge>`,
+            )}
             <div class="ml-auto flex flex-wrap justify-end gap-2">
               ${when(this.qaRuns, this.renderQAHeader)}
             </div> `,
@@ -486,6 +489,7 @@ export class ArchivedItemDetail extends TailwindElement {
               iconLibrary: "default",
               icon: "clipboard2-data-fill",
               label: msg("Quality Assurance"),
+              detail: html`<btrix-beta-icon></btrix-beta-icon>`,
             })}
           `,
         )}
@@ -635,7 +639,7 @@ export class ArchivedItemDetail extends TailwindElement {
     `;
   }
 
-  private renderTitle(title: string) {
+  private renderTitle(title: string | TemplateResult<1>) {
     return html`<h2 class="text-lg font-semibold leading-8">${title}</h2>`;
   }
 

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

@@ -446,13 +446,13 @@ export class ArchivedItemDetailQA extends TailwindElement {
       >
         <b class="font-semibold"
           >${msg(
-            "All of the data included in this Analysis Run will be deleted.",
+            "All of the data included in this analysis run will be deleted.",
           )}</b
         >
         ${runToBeDeleted &&
         html`<div>
             ${msg(
-              str`This Analysis Run includes data for ${runToBeDeleted.stats.done} ${pluralize(runToBeDeleted.stats.done, { zero: msg("pages", { desc: 'plural form of "page" for zero pages', id: "pages.plural.zero" }), one: msg("page"), two: msg("pages", { desc: 'plural form of "page" for two pages', id: "pages.plural.two" }), few: msg("pages", { desc: 'plural form of "page" for few pages', id: "pages.plural.few" }), many: msg("pages", { desc: 'plural form of "page" for many pages', id: "pages.plural.many" }), other: msg("pages", { desc: 'plural form of "page" for multiple/other pages', id: "pages.plural.other" }) })} and was started on `,
+              str`This analysis run includes data for ${runToBeDeleted.stats.done} ${pluralize(runToBeDeleted.stats.done, { zero: msg("pages", { desc: 'plural form of "page" for zero pages', id: "pages.plural.zero" }), one: msg("page"), two: msg("pages", { desc: 'plural form of "page" for two pages', id: "pages.plural.two" }), few: msg("pages", { desc: 'plural form of "page" for few pages', id: "pages.plural.few" }), many: msg("pages", { desc: 'plural form of "page" for many pages', id: "pages.plural.many" }), other: msg("pages", { desc: 'plural form of "page" for multiple/other pages', id: "pages.plural.other" }) })} and was started on `,
             )}
             <sl-format-date
               lang=${getLocale()}

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

@@ -326,6 +326,8 @@ export class ArchivedItemQA extends TailwindElement {
     return html`
       ${this.renderHidden()}
 
+      <btrix-beta-badge placement="right"></btrix-beta-badge>
+
       <article class="qa-grid grid gap-x-6 gap-y-0">
         <header
           class="grid--header flex flex-wrap items-center justify-between gap-1 border-b py-2"

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

@@ -18,8 +18,8 @@ function renderDiff(
     msg("Resource Type"),
     msg("Good During Crawl"),
     msg("Bad During Crawl"),
-    msg("Good in Replay"),
+    msg("Good During Analysis"),
-    msg("Bad in Replay"),
+    msg("Bad During Analysis"),
   ];
   const rows = [
     [

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

@@ -51,7 +51,7 @@ export function renderScreenshots(
           splitView ? "flex-1" : "flex-grow-0",
         )}
       >
-        ${msg("Screenshot from replay")}
+        ${msg("Screenshot during analysis")}
       </h3>
     </div>
     ${splitView

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

@@ -78,7 +78,7 @@ export function renderText(crawlData: ReplayData, qaData: ReplayData) {
           ${msg("Text extracted during crawl")}
         </h3>
         <h3 id="qaTextHeading" class=${tw`flex-1`}>
-          ${msg("Text extracted from replay")}
+          ${msg("Text extracted during analysis")}
         </h3>
       </div>
       <div

frontend/tailwind.config.js

@@ -63,6 +63,7 @@ function makeTheme() {
       current: "currentColor",
       ...colors.map(makeColorPalette),
       primary,
+      theme: { blue: primary, green: "#4d7c0f" },
       success: { ...makeColorPalette("success"), DEFAULT: `var(--success)` },
       warning: { ...makeColorPalette("warning"), DEFAULT: `var(--warning)` },
       danger: { ...makeColorPalette("danger"), DEFAULT: `var(--danger)` },