QA page details (#1656)

### Changes - improves overflow issues at smaller screen sizes - adds icons to buttons - updates text & layout to match mocks - changes primary button & button options depending on if there's a qa run available - adds a loading state for qa run status & buttons - updates `<btrix-crawl-status>` with a `type` param allowing for crawls, uploads, and QA runs - Updates `<btrix-alert>` to match `<sl-tag>` styling - Improves overflow issues at smaller viewport sizes by making tab lists overflow when necessary ### Features - Ability to start/stop/cancel QA runs #1666 @SuaYoo - Ability to see progress of current QA run @emma-sg - Ability to delete QA runs @emma-sg - Ability to download QA run files #1666 @SuaYoo - Only able to start review if a QA Run is finished (for now, initial pass). @SuaYoo - Only most recent running or successful QA run is displayed in header --------- Co-authored-by: sua yoo <[email protected]> Co-authored-by: sua yoo <[email protected]> Co-authored-by: Ilya Kreymer <[email protected]> Co-authored-by: Henry Wilkinson <[email protected]>
webrecorder · Apr 17, 2024 · 9f0a1fc · 9f0a1fc
1 parent 6cabb9c
commit 9f0a1fc
Show file tree

Hide file tree

Showing 22 changed files with 1,498 additions and 571 deletions.
diff --git a/frontend/src/components/ui/alert.ts b/frontend/src/components/ui/alert.ts
@@ -1,6 +1,9 @@
-import { css, html, LitElement } from "lit";
+import clsx from "clsx";
+import { css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
+import { TailwindElement } from "@/classes/TailwindElement";
+
 /**
  * Alert used inline, e.g. for form server errors
  *
@@ -11,41 +14,30 @@ import { customElement, property } from "lit/decorators.js";
  * ```
  */
 @customElement("btrix-alert")
-export class Alert extends LitElement {
+export class Alert extends TailwindElement {
   @property({ type: String })
   variant: "success" | "warning" | "danger" | "info" = "info";
 
-  // postcss-lit-disable-next-line
   static styles = css`
-    :host > div {
-      padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
-      border-radius: var(--sl-border-radius-medium);
-    }
-
-    .success {
-      background-color: var(--sl-color-success-50);
-      color: var(--success);
-    }
-
-    .warning {
-      background-color: var(--sl-color-warning-50);
-      color: var(--warning);
-    }
-
-    .danger {
-      background-color: var(--sl-color-danger-50);
-      color: var(--danger);
-    }
-
-    .info {
-      background-color: var(--sl-color-sky-50);
-      color: var(--sl-color-sky-600);
+    :host {
+      display: block;
     }
   `;
 
   render() {
     return html`
-      <div class="${this.variant}" role="alert">
+      <div
+        class="${clsx(
+          "px-3 py-2 rounded border",
+          {
+            success: "bg-success-50 text-success-800 border-success-200",
+            warning: "bg-warning-50 text-warning-800 border-warning-200",
+            danger: "bg-danger-50 text-danger-800 border-danger-200",
+            info: "bg-primary-50 text-primary-800 border-primary-200",
+          }[this.variant],
+        )}"
+        role="alert"
+      >
         <slot></slot>
       </div>
     `;

diff --git a/frontend/src/components/ui/desc-list.ts b/frontend/src/components/ui/desc-list.ts
@@ -30,7 +30,7 @@ export class DescListItem extends LitElement {
       color: var(--sl-color-neutral-500);
       font-size: var(--sl-font-size-x-small);
       line-height: 1rem;
-      margin: var(--sl-spacing-3x-small) 0;
+      margin: 0 0 var(--sl-spacing-2x-small) 0;
     }
 
     dd {
@@ -46,7 +46,6 @@ export class DescListItem extends LitElement {
     .item {
       display: flex;
       justify-content: var(--justify-item, initial);
-      border-right: var(--border-right, 0px);
     }
 
     .content {
@@ -74,24 +73,46 @@ export class DescList extends LitElement {
     dl {
       display: grid;
       margin: 0;
+      gap: 1rem;
     }
 
     .vertical {
       grid-template-columns: 100%;
-      gap: 1rem;
       --width-full: 100%;
     }
 
     .horizontal {
       --justify-item: center;
-      --border-right: 1px solid var(--sl-panel-border-color);
-      grid-auto-flow: column;
+      overflow: hidden;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .horizontal ::slotted(btrix-desc-list-item) {
+      position: relative;
+      display: inline-block;
+      flex: 1 0 0;
+      min-width: min-content;
+    }
+
+    .horizontal ::slotted(btrix-desc-list-item)::before {
+      content: "";
+      width: 1px;
+      height: 100%;
+      top: 0;
+      left: -0.5rem;
+      position: absolute;
+      background-color: var(--sl-panel-border-color);
     }
 
-    /* Although this only applies to .horizontal, apply to any last child
-    since we can't do complex selectors with ::slotted */
-    ::slotted(*:last-of-type) {
-      --border-right: 0px;
+    .horizontal ::slotted(btrix-desc-list-item)::after {
+      content: "";
+      height: 1px;
+      width: 100%;
+      top: -0.5rem;
+      left: 0;
+      position: absolute;
+      background-color: var(--sl-panel-border-color);
     }
   `;
 

diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
@@ -19,6 +19,7 @@ import("./language-select");
 import("./locale-picker");
 import("./markdown-editor");
 import("./markdown-viewer");
+import("./menu-item-link");
 import("./meter");
 import("./numbered-list");
 import("./overflow-dropdown");

diff --git a/frontend/src/components/ui/menu-item-link.ts b/frontend/src/components/ui/menu-item-link.ts
@@ -0,0 +1,77 @@
+import { localized } from "@lit/localize";
+import type { SlDropdown } from "@shoelace-style/shoelace";
+import menuItemStyles from "@shoelace-style/shoelace/dist/components/menu-item/menu-item.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+import type { OverflowDropdown } from "@/components/ui/overflow-dropdown";
+import { NavigateController } from "@/controllers/navigate";
+
+/**
+ * Enables `href` on menu items
+ * See https://github.com/shoelace-style/shoelace/discussions/1629
+ *
+ * Based on https://github.com/shoelace-style/shoelace/blob/d0b71adb81e21687a5ef036565dad44bc609bcce/src/components/menu-item/menu-item.component.ts
+ */
+@localized()
+@customElement("btrix-menu-item-link")
+export class MenuItemLink extends TailwindElement {
+  static styles = [menuItemStyles];
+
+  @property({ type: String })
+  href = "";
+
+  @property({ type: Boolean })
+  download: boolean | string = false;
+
+  @property({ type: Boolean })
+  disabled = false;
+
+  @property({ type: Boolean })
+  loading = false;
+
+  private readonly navigate = new NavigateController(this);
+
+  render() {
+    return html`<a
+      href=${this.href}
+      id="anchor"
+      part="base"
+      class=${classMap({
+        "menu-item": true,
+        "menu-item--disabled": this.disabled,
+        "menu-item--loading": this.loading,
+      })}
+      download=${this.download}
+      aria-disabled=${this.disabled}
+      @click=${(e: MouseEvent) => {
+        if (this.disabled || this.loading) return;
+
+        if (this.download) {
+          const dropdown = this.shadowRoot!.host.closest<
+            SlDropdown | OverflowDropdown
+          >("sl-dropdown, btrix-overflow-dropdown");
+
+          if (dropdown) {
+            void dropdown.hide();
+          }
+        } else {
+          this.navigate.link(e);
+        }
+      }}
+    >
+      <span part="checked-icon" class="menu-item__check">
+        <sl-icon name="check" library="system" aria-hidden="true"></sl-icon>
+      </span>
+      <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+      <slot part="label" class="menu-item__label"></slot>
+      <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+      <span part="submenu-icon" class="menu-item__chevron">
+        <!-- This also functions as a spacer in sl-menu-item -->
+      </span>
+      ${this.loading ? html` <sl-spinner part="spinner"></sl-spinner> ` : ""}
+    </a>`;
+  }
+}
diff --git a/frontend/src/components/ui/pagination.ts b/frontend/src/components/ui/pagination.ts
@@ -106,6 +106,7 @@ export class Pagination extends LitElement {
         transition: opacity 0.2s;
         min-height: 1.5rem;
         min-width: 1.5rem;
+        user-select: none;
       }
 
       .navButton[disabled] {

diff --git a/frontend/src/components/ui/tab-list.ts b/frontend/src/components/ui/tab-list.ts
@@ -1,4 +1,4 @@
-import { css, html, LitElement, type PropertyValues } from "lit";
+import { css, html, type PropertyValues } from "lit";
 import { customElement, property, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -77,7 +77,7 @@ type TabElement = Tab & HTMLElement;
 type TabPanelElement = TabPanel & HTMLElement;
 
 @customElement("btrix-tab-list")
-export class TabList extends LitElement {
+export class TabList extends TailwindElement {
   static styles = css`
     :host {
       --track-width: 4px;
@@ -228,7 +228,7 @@ export class TabList extends LitElement {
   render() {
     return html`
       <div class="container">
-        <div class="navWrapper">${this.renderNav()}</div>
+        <div class="navWrapper min-w-0">${this.renderNav()}</div>
         <div class="header"><slot name="header"></slot></div>
         <div class="content">
           <slot></slot>
@@ -247,13 +247,13 @@ export class TabList extends LitElement {
           class="nav ${this.progressPanel ? "linear" : "nonlinear"} ${this
             .hideIndicator
             ? "hide-indicator"
-            : "show-indicator"}"
+            : "show-indicator"} -m-3 overflow-x-hidden p-3"
         >
           <div class="track" role="presentation">
             <div class="indicator" role="presentation"></div>
           </div>
 
-          <ul class="tablist" role="tablist">
+          <ul class="tablist -m-3 overflow-x-auto p-3" role="tablist">
             <slot name="nav"></slot>
           </ul>
         </div>

diff --git a/frontend/src/features/archived-items/crawl-status.ts b/frontend/src/features/archived-items/crawl-status.ts
@@ -6,6 +6,8 @@ import startCase from "lodash/fp/startCase";
 import type { CrawlState } from "@/types/crawler";
 import { animatePulse } from "@/utils/css";
 
+type CrawlType = "crawl" | "upload" | "qa";
+
 @localized()
 @customElement("btrix-crawl-status")
 export class CrawlStatus extends LitElement {
@@ -15,8 +17,8 @@ export class CrawlStatus extends LitElement {
   @property({ type: Boolean })
   hideLabel = false;
 
-  @property({ type: Boolean })
-  isUpload = false;
+  @property({ type: String })
+  type: CrawlType = "crawl";
 
   @property({ type: Boolean })
   stopping = false;
@@ -59,11 +61,12 @@ export class CrawlStatus extends LitElement {
   // instead of separate utility function?
   static getContent(
     state?: CrawlState | AnyString,
-    isUpload?: boolean,
+    type: CrawlType = "crawl",
   ): {
     icon: TemplateResult;
     label: string;
   } {
+    const isUpload = type === "upload";
     let icon = html`<sl-icon
       name="circle"
       class="neutral"
@@ -155,11 +158,15 @@ export class CrawlStatus extends LitElement {
 
       case "complete":
         icon = html`<sl-icon
-          name=${isUpload ? "upload" : "check-circle-fill"}
+          name=${type === "upload" ? "upload" : "check-circle-fill"}
           slot="prefix"
           style="color: var(--success)"
         ></sl-icon>`;
-        label = isUpload ? msg("Uploaded") : msg("Complete");
+        label = {
+          upload: msg("Uploaded"),
+          crawl: msg("Complete"),
+          qa: msg("Complete"),
+        }[type];
         break;
 
       case "failed":
@@ -220,7 +227,7 @@ export class CrawlStatus extends LitElement {
   render() {
     const state =
       this.stopping && this.state === "running" ? "stopping" : this.state;
-    const { icon, label } = CrawlStatus.getContent(state, this.isUpload);
+    const { icon, label } = CrawlStatus.getContent(state, this.type);
     if (this.hideLabel) {
       return html`<div class="icon-only">
         <sl-tooltip content=${label}

diff --git a/frontend/src/features/qa/index.ts b/frontend/src/features/qa/index.ts
@@ -1,3 +1,3 @@
 export * from "./page-list";
-import("./page-qa-toolbar");
+import("./page-qa-approval");
 import("./qa-run-dropdown");
diff --git a/frontend/src/features/qa/page-list/helpers/reviewStatus.ts b/frontend/src/features/qa/page-list/helpers/reviewStatus.ts
@@ -1,4 +1,6 @@
-import { type ArchivedItemPage } from "@/types/crawler";
+import { msg } from "@lit/localize";
+
+import type { ArchivedItemPage } from "@/types/crawler";
 import { cached } from "@/utils/weakCache";
 
 export type ReviewStatus = "approved" | "rejected" | "commentOnly" | null;
@@ -13,3 +15,19 @@ export const approvalFromPage = cached(
         ? "approved"
         : "rejected",
 );
+
+export const labelFor = cached((status: ReviewStatus) => {
+  switch (status) {
+    // Approval
+    case "approved":
+      return msg("Approved");
+    case "rejected":
+      return msg("Rejected");
+    case "commentOnly":
+      return msg("Comments Only");
+
+    // No data
+    default:
+      return;
+  }
+});