clean up crawl list display

Author: SuaYoo

frontend/src/components/ui/badge.ts

@@ -28,6 +28,9 @@ export class Badge extends TailwindElement {
   @property({ type: String })
   variant: BadgeVariant = "neutral";
 
+  @property({ type: String })
+  size?: "medium" | "large" = "medium";
+
   @property({ type: Boolean })
   outline = false;
 
@@ -47,15 +50,16 @@ export class Badge extends TailwindElement {
     return html`
       <span
         class=${clsx(
-          tw`inline-flex min-h-4 items-center justify-center align-[1px] text-xs leading-none`,
+          tw`inline-flex min-h-4 items-center justify-center align-[1px] leading-none`,
+          this.size === "medium" && tw`text-xs`,
           this.outline
             ? [
-                tw`ring-1`,
+                tw`mx-px ring-1`,
                 {
-                  success: tw`bg-success-500 text-success-500 ring-success-500`,
+                  success: tw`bg-success-50 text-success-700 ring-success-400`,
                   warning: tw`bg-warning-600 text-warning-600 ring-warning-600`,
                   danger: tw`bg-danger-500 text-danger-500 ring-danger-500`,
-                  neutral: tw`bg-neutral-100 text-neutral-600 ring-neutral-600`,
+                  neutral: tw`bg-neutral-100 text-neutral-600 ring-neutral-300`,
                   "high-contrast": tw`bg-neutral-600 text-neutral-0 ring-neutral-0`,
                   primary: tw`bg-white text-primary ring-primary`,
                   cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
@@ -72,7 +76,12 @@ export class Badge extends TailwindElement {
                 cyan: tw`bg-cyan-50 text-cyan-600`,
                 blue: tw`bg-blue-50 text-blue-600`,
               }[this.variant],
-          this.pill ? tw`min-w-[1.125rem] rounded-full px-1` : tw`rounded px-2`,
+          this.pill
+            ? [
+                tw`min-w-[1.125rem] rounded-full`,
+                this.size === "large" ? tw`px-1.5 py-0.5` : tw`px-1`,
+              ]
+            : [tw`rounded`, this.size === "large" ? tw`px-2.5 py-1` : tw`px-2`],
         )}
         part="base"
       >

frontend/src/features/archived-items/index.ts

@@ -1,7 +1,6 @@
 import("./archived-item-list");
 import("./archived-item-state-filter");
 import("./archived-item-tag-filter");
-import("./crawl-list");
 import("./crawl-log-table");
 import("./crawl-logs");
 import("./delete-item-dialog");

frontend/src/features/crawl-workflows/workflow-list.ts

@@ -452,7 +452,12 @@ export class WorkflowListItem extends BtrixElement {
       <sl-tooltip hoist placement="bottom">
         <div>
           <div class="detail truncate">
-            <span class="userName">${workflow.modifiedByName}</span>
+            ${workflow.modifiedByName
+              ? html`<btrix-user-chip
+                  userId=${workflow.modifiedBy}
+                  userName=${workflow.modifiedByName}
+                ></btrix-user-chip>`
+              : notSpecified}
           </div>
           <div class="desc">${shortDate(workflow.modified)}</div>
         </div>

frontend/src/features/archived-items/crawl-list.ts renamed to frontend/src/features/crawls/crawl-list/crawl-list-item.ts

@@ -1,31 +1,12 @@
-/**
- * Display list of crawls
- *
- * Usage example:
- * ```ts
- * <btrix-crawl-list>
- *   <btrix-crawl-list-item .crawl=${crawl1}>
- *   </btrix-crawl-list-item>
- *   <btrix-crawl-list-item .crawl=${crawl2}>
- *   </btrix-crawl-list-item>
- * </btrix-crawl-list>
- * ```
- */
 import { localized, msg } from "@lit/localize";
 import { css, html, nothing, type TemplateResult } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAssignedElements,
-} from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import { BtrixElement } from "@/classes/BtrixElement";
-import { TailwindElement } from "@/classes/TailwindElement";
 import type { OverflowDropdown } from "@/components/ui/overflow-dropdown";
 import type { Crawl } from "@/types/crawler";
-import { renderName } from "@/utils/crawler";
+import { isSkipped, renderName } from "@/utils/crawler";
 import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter";
 
 /**
@@ -99,7 +80,7 @@ export class CrawlListItem extends BtrixElement {
       `;
     } else {
       const label = html`
-        <btrix-table-cell class="clickLabel" role="generic">
+        <btrix-table-cell class="clickLabel pl-0" role="generic">
           ${this.safeRender((workflow) => renderName(workflow))}
         </btrix-table-cell>
       `;
@@ -114,6 +95,12 @@ export class CrawlListItem extends BtrixElement {
       `;
     }
 
+    const skipped = isSkipped(this.crawl);
+    const hasExec = Boolean(this.crawl.crawlExecSeconds);
+    const notApplicable = html`<sl-tooltip content=${msg("Not applicable")}>
+      <sl-icon name="slash" class="text-base text-neutral-400"></sl-icon>
+    </sl-tooltip>`;
+
     return html`
       <btrix-table-row
         class=${this.href
@@ -171,51 +158,62 @@ export class CrawlListItem extends BtrixElement {
                     minute="2-digit"
                   ></btrix-format-date>
                 `
-              : html`<span class="text-neutral-400" role="presentation"
-                  >---</span
-                >`,
+              : notApplicable,
           )}
         </btrix-table-cell>
         <btrix-table-cell>
           ${this.safeRender((crawl) =>
-            this.localize.humanizeDuration(
-              (crawl.finished
-                ? new Date(crawl.finished)
-                : new Date()
-              ).valueOf() - new Date(crawl.started).valueOf(),
-            ),
-          )}
-        </btrix-table-cell>
-        <btrix-table-cell>
-          ${this.safeRender((crawl) =>
-            humanizeExecutionSeconds(crawl.crawlExecSeconds),
+            !skipped
+              ? html`<sl-tooltip>
+                  ${humanizeExecutionSeconds(crawl.crawlExecSeconds, {
+                    style: "short",
+                  })}
+                  <span slot="content">
+                    ${humanizeExecutionSeconds(crawl.crawlExecSeconds, {
+                      style: "long",
+                    })}
+                  </span>
+                </sl-tooltip>`
+              : notApplicable,
           )}
         </btrix-table-cell>
         <btrix-table-cell>
           ${this.safeRender((crawl) => {
-            const pagesFound = +(crawl.stats?.found || 0);
-            if (crawl.finished) {
-              const pagesComplete = crawl.pageCount ? +crawl.pageCount : 0;
-              return `${this.localize.number(pagesComplete, { notation: "compact" })}`;
+            if (hasExec) {
+              const pagesComplete = crawl.finished
+                ? crawl.pageCount
+                  ? +crawl.pageCount
+                  : 0
+                : +(crawl.stats?.done || 0);
+
+              return this.localize.number(pagesComplete, {
+                notation: "compact",
+              });
             }
 
-            const pagesComplete = +(crawl.stats?.done || 0);
-            return `${this.localize.number(pagesComplete, { notation: "compact" })} / ${this.localize.number(pagesFound, { notation: "compact" })}`;
+            return notApplicable;
           })}
         </btrix-table-cell>
         <btrix-table-cell>
           ${this.safeRender((crawl) =>
-            this.localize.bytes(
-              crawl.finished ? crawl.fileSize || 0 : +(crawl.stats?.size || 0),
-              {
-                unitDisplay: "narrow",
-              },
-            ),
+            hasExec
+              ? this.localize.bytes(
+                  crawl.finished
+                    ? crawl.fileSize || 0
+                    : +(crawl.stats?.size || 0),
+                )
+              : notApplicable,
           )}
         </btrix-table-cell>
         <btrix-table-cell>
           <div class="max-w-sm truncate">
-            ${this.safeRender((crawl) => crawl.userName)}
+            ${this.safeRender(
+              (crawl) =>
+                html`<btrix-user-chip
+                  userId=${crawl.userid}
+                  userName=${crawl.userName}
+                ></btrix-user-chip>`,
+            )}
           </div>
         </btrix-table-cell>
         <btrix-table-cell class="pl-1 pr-1">
@@ -248,110 +246,3 @@ export class CrawlListItem extends BtrixElement {
     </div>`;
   }
 }
-
-/**
- * @slot
- */
-@customElement("btrix-crawl-list")
-@localized()
-export class CrawlList extends TailwindElement {
-  static styles = css`
-    btrix-table {
-      --btrix-table-cell-gap: var(--sl-spacing-x-small);
-      --btrix-table-cell-padding-x: var(--sl-spacing-small);
-    }
-
-    btrix-table-body {
-      --btrix-table-cell-padding-y: var(--sl-spacing-2x-small);
-    }
-
-    btrix-table-body ::slotted(*:nth-of-type(n + 2)) {
-      --btrix-border-top: 1px solid var(--sl-panel-border-color);
-    }
-
-    btrix-table-body ::slotted(*:first-of-type) {
-      --btrix-border-radius-top: var(--sl-border-radius-medium);
-    }
-
-    btrix-table-body ::slotted(*:last-of-type) {
-      --btrix-border-radius-bottom: var(--sl-border-radius-medium);
-    }
-  `;
-
-  @property({ type: String })
-  collectionId?: string;
-
-  @property({ type: String })
-  workflowId?: string;
-
-  @queryAssignedElements({ selector: "btrix-crawl-list-item" })
-  listItems!: HTMLElement[];
-
-  render() {
-    return html` <style>
-        btrix-table {
-          --btrix-table-grid-template-columns: min-content [clickable-start]
-            ${this.workflowId ? "" : `30ch `}repeat(7, auto) [clickable-end]
-            min-content;
-        }
-      </style>
-      <btrix-overflow-scroll class="-mx-3 part-[content]:px-3">
-        <btrix-table>
-          <btrix-table-head class="mb-2">
-            <btrix-table-header-cell class="pr-0">
-              <span class="sr-only">${msg("Status")}</span>
-            </btrix-table-header-cell>
-            ${this.workflowId
-              ? nothing
-              : html`
-                  <btrix-table-header-cell>
-                    ${msg("Name")}
-                  </btrix-table-header-cell>
-                `}
-            <btrix-table-header-cell>
-              ${msg("Started")}
-            </btrix-table-header-cell>
-            <btrix-table-header-cell>
-              ${msg("Finished")}
-            </btrix-table-header-cell>
-            <btrix-table-header-cell
-              >${msg("Run Duration")}</btrix-table-header-cell
-            >
-            <btrix-table-header-cell
-              >${msg("Execution Time")}</btrix-table-header-cell
-            >
-            <btrix-table-header-cell>${msg("Pages")}</btrix-table-header-cell>
-            <btrix-table-header-cell>${msg("Size")}</btrix-table-header-cell>
-            <btrix-table-header-cell>
-              ${msg("Run By")}
-            </btrix-table-header-cell>
-            <btrix-table-header-cell class="pl-1 pr-1">
-              <span class="sr-only">${msg("Row actions")}</span>
-            </btrix-table-header-cell>
-          </btrix-table-head>
-          <btrix-table-body class="rounded border">
-            <slot @slotchange=${this.handleSlotchange}></slot>
-          </btrix-table-body>
-        </btrix-table>
-      </btrix-overflow-scroll>`;
-  }
-
-  private handleSlotchange() {
-    const assignProp = (
-      el: HTMLElement,
-      attr: { name: string; value: string },
-    ) => {
-      if (!el.attributes.getNamedItem(attr.name)) {
-        el.setAttribute(attr.name, attr.value);
-      }
-    };
-
-    this.listItems.forEach((item) => {
-      assignProp(item, {
-        name: "collectionId",
-        value: this.collectionId || "",
-      });
-      assignProp(item, { name: "workflowId", value: this.workflowId || "" });
-    });
-  }
-}