Add QA tab to archived item detail (#1590)

Adds tab with placeholders as a starting point to work off of. The badge and button is not currently linked up to any data or actions.

frontend/src/components/ui/badge.ts

@@ -1,7 +1,7 @@
-import { TailwindElement } from "@/classes/TailwindElement";
-import { tw } from "@/utils/tailwind";
-import { html } from "lit";
+import { css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import SlBadge from "@shoelace-style/shoelace/dist/components/badge/badge.component.js";
+import badgeStyles from "@shoelace-style/shoelace/dist/components/badge/badge.styles.js";
 
 /**
  * Show numeric value in a label
@@ -12,35 +12,18 @@ import { customElement, property } from "lit/decorators.js";
  * ```
  */
 @customElement("btrix-badge")
-export class Badge extends TailwindElement {
-  @property({ type: String })
-  variant:
-    | "success"
-    | "warning"
-    | "danger"
-    | "neutral"
-    | "primary"
-    | "high-contrast" = "neutral";
+export class Badge extends SlBadge {
+  static styles = [
+    badgeStyles,
+    css`
+      .badge {
+        border-color: rgba(255, 255, 255, 0.5);
+        line-height: 1rem;
+        padding: 0 1ch;
+      }
+    `,
+  ];
 
   @property({ type: String, reflect: true })
   role: string | null = "status";
-
-  render() {
-    return html`
-      <span
-        class="h-4.5 ${{
-          success: tw`bg-success-500 text-neutral-0`,
-          warning: tw`bg-warning-600 text-neutral-0`,
-          danger: tw`bg-danger-500 text-neutral-0`,
-          neutral: tw`bg-neutral-100 text-neutral-600`,
-          "high-contrast": tw`bg-neutral-600 text-neutral-0`,
-          primary: tw`bg-primary text-neutral-0`,
-        }[
-          this.variant
-        ]} inline-flex items-center justify-center rounded-sm px-2 align-[1px] text-xs"
-      >
-        <slot></slot>
-      </span>
-    `;
-  }
 }

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

@@ -21,6 +21,7 @@ import { isApiError } from "@/utils/api";
 
 const SECTIONS = [
   "overview",
+  "qa",
   "watch",
   "replay",
   "files",
@@ -142,6 +143,15 @@ export class CrawlDetail extends LiteElement {
     let sectionContent: string | TemplateResult = "";
 
     switch (this.sectionName) {
+      case "qa":
+        sectionContent = this.renderPanel(
+          html`${this.renderTitle(msg("Crawl Analysis"))}
+            <sl-button size="small" @click=${() => console.log("TODO")}>
+              ${msg("Reanalyze Crawl")}
+            </sl-button>`,
+          this.renderQA(),
+        );
+        break;
       case "replay":
         sectionContent = this.renderPanel(msg("Replay"), this.renderReplay(), {
           "overflow-hidden": true,
@@ -314,11 +324,13 @@ export class CrawlDetail extends LiteElement {
       label,
       iconLibrary,
       icon,
+      detail,
     }: {
       section: SectionName;
       label: string;
       iconLibrary: "app" | "default";
       icon: string;
+      detail?: TemplateResult<1>;
     }) => {
       const isActive = section === this.sectionName;
       const baseUrl = window.location.pathname.split("#")[0];
@@ -336,7 +348,7 @@ export class CrawlDetail extends LiteElement {
             aria-hidden="true"
             library=${iconLibrary}
           ></sl-icon>
-          ${label}</btrix-navigation-button
+          ${label}${detail}</btrix-navigation-button
         >
       `;
     };
@@ -351,6 +363,20 @@ export class CrawlDetail extends LiteElement {
           icon: "info-circle-fill",
           label: msg("Overview"),
         })}
+        ${when(
+          this.itemType === "crawl",
+          () => html`
+            ${renderNavItem({
+              section: "qa",
+              iconLibrary: "default",
+              icon: "clipboard2-data-fill",
+              label: msg("QA"),
+              detail: html`
+                <btrix-badge variant="primary">${msg("Ready")}</btrix-badge>
+              `,
+            })}
+          `,
+        )}
         ${renderNavItem({
           section: "replay",
           iconLibrary: "app",
@@ -526,6 +552,15 @@ export class CrawlDetail extends LiteElement {
     `;
   }
 
+  private renderQA() {
+    return html`
+      <section class="mb-5 rounded-lg border p-4">[summary]</section>
+      <section class="mb-7 rounded-lg border p-4">[stats]</section>
+      <h4 class="text-lg font-semibold">${msg("Pages")}</h4>
+      <section>[pages]</section>
+    `;
+  }
+
   private renderReplay() {
     if (!this.crawl) return;
     const replaySource = `/api/orgs/${this.crawl.oid}/${

frontend/src/shoelace.ts

@@ -75,6 +75,9 @@ import(
 import(
   /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/tree-item/tree-item"
 );
+import(
+  /* webpackChunkName: "shoelace" */ "@shoelace-style/shoelace/dist/components/badge/badge"
+);
 
 setBasePath("/shoelace");
 registerIconLibrary("app", {