From 7871d30ba1b871067e89604dc0e17d3b976f4e18 Mon Sep 17 00:00:00 2001 From: Emma Segal-Grossman Date: Mon, 22 Apr 2024 20:03:55 -0400 Subject: [PATCH] QA UI: Copy updates & beta tag (#1722) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | | --- | | Screenshot 2024-04-22 at 6 09 28 PM | | Screenshot 2024-04-22 at 6 09 44 PM | | Screenshot 2024-04-22 at 6 10 04 PM | | image | --- .../src/components/beta-badges.stylesheet.css | 20 +++++++ frontend/src/components/beta-badges.ts | 53 +++++++++++++++++++ frontend/src/components/index.ts | 1 + .../archived-item-detail.ts | 8 ++- .../pages/org/archived-item-detail/ui/qa.ts | 4 +- .../org/archived-item-qa/archived-item-qa.ts | 2 + .../org/archived-item-qa/ui/resources.ts | 4 +- .../org/archived-item-qa/ui/screenshots.ts | 2 +- .../src/pages/org/archived-item-qa/ui/text.ts | 2 +- frontend/tailwind.config.js | 1 + 10 files changed, 89 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/beta-badges.stylesheet.css create mode 100644 frontend/src/components/beta-badges.ts diff --git a/frontend/src/components/beta-badges.stylesheet.css b/frontend/src/components/beta-badges.stylesheet.css new file mode 100644 index 00000000..556bbae0 --- /dev/null +++ b/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; + } +} diff --git a/frontend/src/components/beta-badges.ts b/frontend/src/components/beta-badges.ts new file mode 100644 index 00000000..1188420c --- /dev/null +++ b/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` + + `; + } +} + +@localized() +@customElement("btrix-beta-badge") +export class BetaBadge extends TailwindElement { + @property({ type: String }) + placement: SlTooltip["placement"] = "top"; + + static styles = styles; + + render() { + return html` +
+ ${msg("This part of Browsertrix is in beta!")} + ${msg( + "Parts might change or be broken. Please share your thoughts with us!", + )} +
+ +  ${msg("Beta")} + + `; + } +} diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 2193e691..7ea08b96 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -4,3 +4,4 @@ import "./utils"; import("./orgs-list"); import("./not-found"); import("./screencast"); +import("./beta-badges"); 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 8afc2577..420ed3c2 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 @@ -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")} + `, + )}
${when(this.qaRuns, this.renderQAHeader)}
`, @@ -486,6 +489,7 @@ export class ArchivedItemDetail extends TailwindElement { iconLibrary: "default", icon: "clipboard2-data-fill", label: msg("Quality Assurance"), + detail: html``, })} `, )} @@ -635,7 +639,7 @@ export class ArchivedItemDetail extends TailwindElement { `; } - private renderTitle(title: string) { + private renderTitle(title: string | TemplateResult<1>) { return html`

${title}

`; } 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 c5dab816..1aa337db 100644 --- a/frontend/src/pages/org/archived-item-detail/ui/qa.ts +++ b/frontend/src/pages/org/archived-item-detail/ui/qa.ts @@ -446,13 +446,13 @@ export class ArchivedItemDetailQA extends TailwindElement { > ${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.", )} ${runToBeDeleted && html`
${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 `, )} +
- ${msg("Screenshot from replay")} + ${msg("Screenshot during analysis")}
${splitView diff --git a/frontend/src/pages/org/archived-item-qa/ui/text.ts b/frontend/src/pages/org/archived-item-qa/ui/text.ts index 99868744..b31f44b2 100644 --- a/frontend/src/pages/org/archived-item-qa/ui/text.ts +++ b/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")}

- ${msg("Text extracted from replay")} + ${msg("Text extracted during analysis")}