Refactor collections and browser profile data-tables (#1505)

- Updates browser profile list styles to match other data table styles
- Makes entire collection item clickable
- Refactors row click area to fix text overflow

frontend/src/components/ui/overflow-dropdown.ts

@@ -1,7 +1,12 @@
 import { LitElement, html, css } from "lit";
-import { customElement, state, queryAssignedElements } from "lit/decorators.js";
+import {
+  customElement,
+  state,
+  queryAssignedElements,
+  query,
+} from "lit/decorators.js";
 import { msg, localized } from "@lit/localize";
-import type { SlMenu } from "@shoelace-style/shoelace";
+import type { SlDropdown, SlMenu } from "@shoelace-style/shoelace";
 
 /**
  * Dropdown for additional actions.
@@ -34,12 +39,15 @@ export class OverflowDropdown extends LitElement {
   @state()
   private hasMenuItems?: boolean;
 
+  @query("sl-dropdown")
+  private dropdown?: SlDropdown;
+
   @queryAssignedElements({ selector: "sl-menu", flatten: true })
   private menu!: Array<SlMenu>;
 
   render() {
     return html`
-      <sl-dropdown ?disabled=${!this.hasMenuItems}>
+      <sl-dropdown ?disabled=${!this.hasMenuItems} hoist>
         <sl-icon-button
           slot="trigger"
           class="trigger"
@@ -54,4 +62,8 @@ export class OverflowDropdown extends LitElement {
       </sl-dropdown>
     `;
   }
+
+  hide() {
+    this.dropdown?.hide();
+  }
 }

frontend/src/components/ui/table/table-cell.ts

@@ -40,23 +40,22 @@ export class TableCell extends LitElement {
   role = "cell";
 
   @property({ type: String })
-  rowClickTarget?: (typeof ALLOWED_ROW_CLICK_TARGET_TAG)[number] | "" = "";
+  rowClickTarget?: (typeof ALLOWED_ROW_CLICK_TARGET_TAG)[number];
 
   render() {
-    return html`${this.rowClickTarget &&
-      ALLOWED_ROW_CLICK_TARGET_TAG.includes(this.rowClickTarget)
-        ? html`<style>
-            :host {
-              display: grid;
-              grid-template-columns: subgrid;
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 
-            ::slotted(${unsafeCSS(this.rowClickTarget)}) {
-              position: absolute;
-              inset: 0;
-              grid-column: clickable-start / clickable-end;
-            }
-          </style>`
-        : nothing} <slot></slot>`;
+  private handleSlotChange(e: Event) {
+    if (!this.rowClickTarget) return;
+    const elems = (e.target as HTMLSlotElement).assignedElements();
+    const rowClickTarget = elems.find(
+      (el) => el.tagName.toLowerCase() === this.rowClickTarget
+    );
+
+    if (!rowClickTarget) return;
+
+    // Styled in table.css
+    rowClickTarget.classList.add("rowClickTarget");
   }
 }

frontend/src/components/ui/table/table-row.ts

@@ -11,6 +11,7 @@ export class TableRow extends LitElement {
       grid-column: var(--btrix-table-grid-column);
       display: grid;
       grid-template-columns: subgrid;
+      position: relative;
     }
   `;
 

frontend/src/components/ui/table/table.stylesheet.css

@@ -0,0 +1,24 @@
+btrix-table-cell[rowClickTarget] {
+  display: grid;
+  grid-template-columns: subgrid;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.rowClickTarget {
+  max-width: 100%;
+}
+
+.rowClickTarget::after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  grid-column: clickable-start / clickable-end;
+}
+
+.rowClickTarget:focus-visible {
+  outline: var(--sl-focus-ring);
+  outline-offset: -0.25rem;
+  border-radius: 0.5rem;
+}

frontend/src/components/ui/table/table.ts

@@ -6,9 +6,18 @@ import {
   queryAssignedElements,
 } from "lit/decorators.js";
 
-import { TailwindElement } from "@/classes/TailwindElement";
+import { theme } from "@/theme";
+import tableCSS from "./table.stylesheet.css";
 import { type TableHead } from "./table-head";
 
+// Add table CSS to theme CSS to make it available throughout the app,
+// to both shadow and light dom components.
+// TODO Remove once all `LiteElement`s are migrated over to `TailwindElement`
+tableCSS.split("}").forEach((rule: string) => {
+  if (!rule.trim()) return;
+  theme.insertRule(`${rule}}`);
+});
+
 /**
  * Low-level component for displaying content as a table.
  * To style tables, use TailwindCSS utility classes.
@@ -46,7 +55,7 @@ import { type TableHead } from "./table-head";
  * @cssproperty --btrix-cell-padding-bottom
  */
 @customElement("btrix-table")
-export class Table extends TailwindElement {
+export class Table extends LitElement {
   static styles = css`
     :host {
       --btrix-cell-gap: 0;

frontend/src/features/archived-items/archived-item-list.ts

@@ -6,15 +6,14 @@ import {
   queryAssignedElements,
   query,
 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
+import { type SlCheckbox } from "@shoelace-style/shoelace";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import type { ArchivedItem } from "@/types/crawler";
 import { renderName } from "@/utils/crawler";
 import { NavigateController } from "@/controllers/navigate";
-import { type SlCheckbox } from "@shoelace-style/shoelace";
-
-const NAME_WIDTH_CSS = css`26rem`;
 
 export type CheckboxChangeEventDetail = {
   checked: boolean;
@@ -38,29 +37,8 @@ export class ArchivedItemListItem extends TailwindElement {
       border-radius: var(--btrix-border-radius-top, 0)
         var(--btrix-border-radius-to, 0) var(--btrix-border-radius-bottom, 0)
         var(--btrix-border-radius-bottom, 0);
-      position: relative;
       height: 2.5rem;
     }
-
-    /*
-     * TODO consolidate data-table variations
-     * https://github.com/webrecorder/browsertrix-cloud/issues/1504
-     */
-    btrix-table-cell {
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .clickLabel {
-      width: ${NAME_WIDTH_CSS};
-      display: flex;
-      gap: var(--btrix-cell-gap, 0);
-      align-items: center;
-      height: 100%;
-      box-sizing: border-box;
-      padding: var(--btrix-cell-padding-top) var(--btrix-cell-padding-right)
-        var(--btrix-cell-padding-bottom) var(--btrix-cell-padding-left);
-    }
   `;
 
   @property({ type: Object })
@@ -87,7 +65,7 @@ export class ArchivedItemListItem extends TailwindElement {
     if (!this.item) return;
     const checkboxId = `${this.item.id}-checkbox`;
     const rowName = html`
-      <div class="clickLabel">
+      <div class="flex items-center gap-3">
         <slot name="namePrefix"></slot>
         ${renderName(this.item)}
       </div>
@@ -122,7 +100,9 @@ export class ArchivedItemListItem extends TailwindElement {
             `
           : nothing}
         <btrix-table-cell
-          rowClickTarget=${this.href ? "a" : this.checkbox ? "label" : ""}
+          rowClickTarget=${ifDefined(
+            this.href ? "a" : this.checkbox ? "label" : undefined
+          )}
         >
           ${this.href
             ? html`<a href=${this.href} @click=${this.navigate.link}>
@@ -225,7 +205,7 @@ export class ArchivedItemList extends TailwindElement {
         btrix-table {
           grid-template-columns: ${`${
             this.hasCheckboxCell ? "min-content" : ""
-          } [clickable-start] ${NAME_WIDTH_CSS} 12rem 1fr 1fr 1fr [clickable-end] ${
+          } [clickable-start] 60ch 12rem 1fr 1fr 30ch [clickable-end] ${
             this.hasActionCell ? "min-content" : ""
           }`.trim()};
         }

frontend/src/features/archived-items/crawl-list.ts

@@ -19,6 +19,7 @@ import {
   query,
   queryAssignedElements,
 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
 
 import { RelativeDuration } from "@/components/ui/relative-duration";
@@ -28,8 +29,6 @@ import { renderName } from "@/utils/crawler";
 import { TailwindElement } from "@/classes/TailwindElement";
 import { NavigateController } from "@/controllers/navigate";
 
-const NAME_WIDTH_CSS = css`16rem`;
-
 /**
  * @slot menu
  */
@@ -46,28 +45,6 @@ export class CrawlListItem extends TailwindElement {
       border-radius: var(--btrix-border-radius-top, 0)
         var(--btrix-border-radius-to, 0) var(--btrix-border-radius-bottom, 0)
         var(--btrix-border-radius-bottom, 0);
-      position: relative;
-    }
-
-    /*
-     * TODO consolidate data-table variations
-     * https://github.com/webrecorder/browsertrix-cloud/issues/1504
-     */
-    btrix-table-cell {
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .clickLabel {
-      width: ${NAME_WIDTH_CSS};
-      overflow: hidden;
-      display: flex;
-      gap: var(--btrix-cell-gap, 0);
-      align-items: center;
-      height: 100%;
-      box-sizing: border-box;
-      padding: var(--btrix-cell-padding-top) var(--btrix-cell-padding-right)
-        var(--btrix-cell-padding-bottom) var(--btrix-cell-padding-left);
     }
   `;
 
@@ -102,7 +79,7 @@ export class CrawlListItem extends TailwindElement {
 
     if (this.workflowId) {
       const label = html`
-        <div class="clickLabel">
+        <div>
           ${this.safeRender(
             (crawl) => html`
               <sl-format-date
@@ -118,7 +95,9 @@ export class CrawlListItem extends TailwindElement {
         </div>
       `;
       idCell = html`
-        <btrix-table-cell rowClickTarget=${this.href ? "a" : ""}>
+        <btrix-table-cell
+          rowClickTarget=${ifDefined(this.href ? "a" : undefined)}
+        >
           ${this.href
             ? html`<a href=${this.href} @click=${this.navigate.link}>
                 ${label}
@@ -320,7 +299,7 @@ export class CrawlList extends TailwindElement {
         btrix-table {
           grid-template-columns:
             min-content [clickable-start]
-            ${this.workflowId ? "" : `${NAME_WIDTH_CSS} `}${NAME_WIDTH_CSS} auto
+            ${this.workflowId ? "" : `auto `}auto auto
             auto auto auto auto [clickable-end] min-content;
         }
       </style>

frontend/src/pages/org/browser-profiles-list.ts

@@ -8,6 +8,7 @@ import type { Profile } from "./types";
 import type { APIPaginatedList } from "@/types/api";
 import type { SelectNewDialogEvent } from "./index";
 import type { Browser } from "@/types/browser";
+import { nothing } from "lit";
 
 /**
  * Usage:
@@ -54,133 +55,129 @@ export class BrowserProfilesList extends LiteElement {
           </sl-button>
         </div>
       </header>
-
-      ${this.renderTable()}`;
+      <div class="overflow-auto pb-1 px-2">${this.renderTable()}</div>`;
   }
 
   private renderTable() {
     return html`
-      <div role="table">
-        <div class="mb-2 px-1" role="rowgroup">
-          <div
-            class="hidden md:grid grid-cols-8 gap-3 md:gap-5 text-sm text-neutral-500"
-            role="row"
+      <btrix-table
+        style="grid-template-columns: min-content [clickable-start] 60ch repeat(2, auto) [clickable-end] min-content; --btrix-cell-padding-left: var(--sl-spacing-x-small); --btrix-cell-padding-right: var(--sl-spacing-x-small);"
       >
-            <div class="col-span-3 px-2" role="columnheader" aria-sort="none">
-              ${msg("Description")}
-            </div>
-            <div class="col-span-1 px-2" role="columnheader" aria-sort="none">
-              ${msg("Created")}
-            </div>
-            <div class="col-span-2 px-2" role="columnheader" aria-sort="none">
+        <btrix-table-head class="mb-2">
+          <btrix-table-header-cell>
+            <span class="sr-only">${msg("Backed up status")}</span>
+          </btrix-table-header-cell>
+          <btrix-table-header-cell class="pl-0">
+            ${msg("Name")}
+          </btrix-table-header-cell>
+          <btrix-table-header-cell>
+            ${msg("Date Created")}
+          </btrix-table-header-cell>
+          <btrix-table-header-cell>
             ${msg("Visited URLs")}
-            </div>
-          </div>
-        </div>
-        ${this.browserProfiles
-          ? this.browserProfiles.length
-            ? html`<div class="border rounded" role="rowgroup">
-                ${this.browserProfiles.map(this.renderItem.bind(this))}
-              </div>`
+          </btrix-table-header-cell>
+          <btrix-table-header-cell>
+            <span class="sr-only">${msg("Row Actions")}</span>
+          </btrix-table-header-cell>
+        </btrix-table-head>
+        ${this.browserProfiles?.length
+          ? html`
+              <btrix-table-body
+                style="--btrix-row-gap: var(--sl-spacing-x-small); --btrix-cell-padding-top: var(--sl-spacing-2x-small); --btrix-cell-padding-bottom: var(--sl-spacing-2x-small);"
+              >
+                ${this.browserProfiles.map(this.renderItem)}
+              </btrix-table-body>
+            `
+          : nothing}
+      </btrix-table>
+      ${this.browserProfiles?.length
+        ? nothing
         : html`
             <div class="border-t border-b py-5">
               <p class="text-center text-0-500">
                 ${msg("No browser profiles yet.")}
               </p>
             </div>
-              `
-          : ""}
-      </div>
+          `}
     `;
   }
 
-  private renderItem(data: Profile) {
+  private renderItem = (data: Profile) => {
+    const isBackedUp = data.resource && data.resource.replicas.length > 0;
     return html`
+      <btrix-table-row
+        class="border rounded cursor-pointer select-none transition-all shadow hover:shadow-none hover:bg-neutral-50 focus-within:bg-neutral-50"
+      >
+        <btrix-table-cell class="p-3">
+          <sl-tooltip
+            content=${isBackedUp ? msg("Backed up") : msg("Not backed up")}
+          >
+            <sl-icon
+              name=${isBackedUp ? "clouds" : "cloud-slash"}
+              class="${isBackedUp ? "text-success" : "text-neutral-500"}"
+            ></sl-icon>
+          </sl-tooltip>
+        </btrix-table-cell>
+        <btrix-table-cell
+          class="flex-col items-start justify-center pl-0"
+          rowClickTarget="a"
+        >
           <a
-        class="block p-1 leading-none hover:bg-zinc-50 hover:text-primary border-t first:border-t-0 transition-colors"
+            class="flex items-center gap-3"
             href=${`${this.orgBasePath}/browser-profiles/profile/${data.id}`}
             @click=${this.navLink}
-        title=${data.name}
           >
-        <div class="grid grid-cols-8 gap-3 md:gap-5" role="row">
-          <div class="col-span-8 md:col-span-3 p-2" role="cell">
-            <div class="font-medium text-sm">
-              <span>${data.name}</span>
-              ${when(
-                data.resource && data.resource.replicas.length > 0,
-                () => html` <sl-tooltip content=${msg("Backed up")}>
-                  <sl-icon
-                    name="clouds"
-                    class="w-4 h-4 ml-2 align-text-bottom text-success"
-                  ></sl-icon>
-                </sl-tooltip>`
-              )}
-            </div>
-            <div class="text-sm truncate" title=${data.description}>
+            ${data.name}
+          </a>
+          <div class="text-xs text-neutral-500 w-full">
+            <div class="truncate">
+              ${data.description} ${data.description} ${data.description}
+              ${data.description} ${data.description} ${data.description}
               ${data.description}
             </div>
           </div>
-          <div class="col-span-8 md:col-span-1 p-2 text-sm" role="cell">
-            ${new Date(data.created).toLocaleDateString()}
-          </div>
-          <div class="col-span-7 md:col-span-3 p-2 text-sm" role="cell">
-            ${data.origins.join(", ")}
-          </div>
-          <div class="col-span-1 md:col-span-1 flex items-center justify-end">
-            ${this.renderMenu(data)}
-          </div>
-        </div>
-      </a>
-    `;
-  }
-
-  private renderMenu(data: Profile) {
-    return html`
-      <sl-dropdown hoist @click=${(e: Event) => e.preventDefault()}>
-        <sl-icon-button
-          slot="trigger"
-          name="three-dots"
-          label=${msg("Actions")}
-          style="font-size: 1rem"
-        ></sl-icon-button>
-        <ul
-          class="text-sm text-neutral-800 bg-white whitespace-nowrap"
-          role="menu"
+        </btrix-table-cell>
+        <btrix-table-cell class="whitespace-nowrap">
+          <sl-format-date
+            date=${`${data.created}Z`}
+            month="2-digit"
+            day="2-digit"
+            year="2-digit"
+            hour="2-digit"
+            minute="2-digit"
+          ></sl-format-date>
+        </btrix-table-cell>
+        <btrix-table-cell>${data.origins.join(", ")}</btrix-table-cell>
+        <btrix-table-cell class="px-1"
+          >${this.renderActions(data)}</btrix-table-cell
         >
-          <li
-            class="p-2 hover:bg-zinc-100 cursor-pointer"
-            role="menuitem"
+      </btrix-table-row>
+    `;
+  };
+
+  private renderActions(data: Profile) {
+    return html`
+      <btrix-overflow-dropdown @click=${(e: Event) => e.preventDefault()}>
+        <sl-menu>
+          <sl-menu-item
             @click=${(e: any) => {
               this.duplicateProfile(data);
-              e.target.closest("sl-dropdown").hide();
             }}
           >
-            <sl-icon
-              class="inline-block align-middle px-1"
-              name="files"
-            ></sl-icon>
-            <span class="inline-block align-middle pr-2"
-              >${msg("Duplicate profile")}</span
-            >
-          </li>
-          <li
-            class="p-2 text-danger hover:bg-danger hover:text-white cursor-pointer"
-            role="menuitem"
+            <sl-icon slot="prefix" name="files"></sl-icon>
+            ${msg("Duplicate profile")}
+          </sl-menu-item>
+          <sl-menu-item
+            style="--sl-color-neutral-700: var(--danger)"
             @click=${(e: any) => {
-              // Close dropdown before deleting template
-              e.target.closest("sl-dropdown").hide();
-
               this.deleteProfile(data);
             }}
           >
-            <sl-icon
-              class="inline-block align-middle px-1"
-              name="trash3"
-            ></sl-icon>
-            <span class="inline-block align-middle pr-2">${msg("Delete")}</span>
-          </li>
-        </ul>
-      </sl-dropdown>
+            <sl-icon slot="prefix" name="trash3"></sl-icon>
+            ${msg("Delete")}
+          </sl-menu-item>
+        </sl-menu>
+      </btrix-overflow-dropdown>
     `;
   }
 

frontend/src/pages/org/collections-list.ts

@@ -15,6 +15,7 @@ import type { Collection, CollectionSearchValues } from "@/types/collection";
 import type { CollectionSavedEvent } from "@/features/collections/collection-metadata-dialog";
 import noCollectionsImg from "~assets/images/no-collections-found.webp";
 import type { SelectNewDialogEvent } from "./index";
+import type { OverflowDropdown } from "@/components/ui/overflow-dropdown";
 
 type Collections = APIPaginatedList<Collection>;
 type SearchFields = "name";
@@ -151,7 +152,9 @@ export class CollectionsList extends LiteElement {
               >
                 ${this.renderControls()}
               </div>
+              <div class="overflow-auto pb-1 px-2">
                 ${guard([this.collections], this.renderList)}
+              </div>
             `
           : this.renderLoading()
       )}
@@ -391,7 +394,7 @@ export class CollectionsList extends LiteElement {
     if (this.collections?.items.length) {
       return html`
         <btrix-table
-          style="grid-template-columns: min-content 24rem repeat(3, 1fr) 12rem min-content"
+          style="grid-template-columns: min-content [clickable-start] 60ch repeat(3, 1fr) 12rem [clickable-end] min-content"
         >
           <btrix-table-head class="mb-2">
             <btrix-table-header-cell>
@@ -485,7 +488,9 @@ export class CollectionsList extends LiteElement {
 
   private renderItem = (col: Collection) =>
     html`
-      <btrix-table-row class="border rounded">
+      <btrix-table-row
+        class="border rounded cursor-pointer select-none transition-all shadow hover:shadow-none hover:bg-neutral-50 focus-within:bg-neutral-50"
+      >
         <btrix-table-cell class="p-3">
           ${col?.isPublic
             ? html`
@@ -507,10 +512,10 @@ export class CollectionsList extends LiteElement {
                 </sl-tooltip>
               `}
         </btrix-table-cell>
-        <btrix-table-cell>
+        <btrix-table-cell rowClickTarget="a">
           <a
+            class="block py-2 truncate"
             href=${`${this.orgBasePath}/collections/view/${col.id}`}
-            class="block text-primary hover:text-indigo-500"
             @click=${this.navLink}
           >
             ${col.name}
@@ -542,7 +547,7 @@ export class CollectionsList extends LiteElement {
             minute="2-digit"
           ></sl-format-date>
         </btrix-table-cell>
-        <btrix-table-cell>
+        <btrix-table-cell class="px-1">
           ${this.isCrawler ? this.renderActions(col) : ""}
         </btrix-table-cell>
       </btrix-table-row>
@@ -552,10 +557,7 @@ export class CollectionsList extends LiteElement {
     const authToken = this.authState!.headers.Authorization.split(" ")[1];
 
     return html`
-      <sl-dropdown distance="4">
-        <btrix-button class="p-2" slot="trigger" label=${msg("Actions")} icon>
-          <sl-icon class="font-base" name="three-dots-vertical"></sl-icon>
-        </btrix-button>
+      <btrix-overflow-dropdown>
         <sl-menu>
           <sl-menu-item
             @click=${() => this.manageCollection(col, "editMetadata")}
@@ -602,7 +604,11 @@ export class CollectionsList extends LiteElement {
             class="px-6 py-[0.6rem] flex gap-2 items-center whitespace-nowrap hover:bg-neutral-100"
             download
             @click=${(e: MouseEvent) => {
-              (e.target as HTMLAnchorElement).closest("sl-dropdown")?.hide();
+              (
+                (e.target as HTMLAnchorElement).closest(
+                  "btrix-overflow-dropdown"
+                ) as OverflowDropdown
+              )?.hide();
             }}
           >
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
@@ -617,7 +623,7 @@ export class CollectionsList extends LiteElement {
             ${msg("Delete Collection")}
           </sl-menu-item>
         </sl-menu>
-      </sl-dropdown>
+      </btrix-overflow-dropdown>
     `;
   };
 

frontend/src/theme.ts

@@ -1,4 +1,4 @@
-import themeCSS from "./theme.css";
+import themeCSS from "./theme.stylesheet.css";
 
 // Create a new style sheet from the compiled theme CSS
 export const theme = new CSSStyleSheet();

frontend/webpack.config.js

@@ -104,13 +104,14 @@ const main = {
         exclude: /node_modules/,
       },
       {
-        // Non-theme styles and assets like fonts and Shoelace
+        // Global styles and assets, like fonts and Shoelace,
+        // that get added to document styles
         test: /\.css$/,
         include: [
           path.resolve(__dirname, "src"),
           path.resolve(__dirname, "node_modules/@shoelace-style/shoelace"),
         ],
-        exclude: [path.resolve(__dirname, "src/theme.css")],
+        exclude: /\.stylesheet\.css$/,
         use: [
           "style-loader",
           { loader: "css-loader", options: { importLoaders: 1 } },
@@ -118,8 +119,8 @@ const main = {
         ],
       },
       {
-        // Theme CSS loaded as raw string and used as a CSSStyleSheet
-        test: /theme\.css$/,
+        // CSS loaded as raw string and used as a CSSStyleSheet
+        test: /\.stylesheet\.css$/,
         type: "asset/source",
         include: [path.resolve(__dirname, "src")],
         use: ["postcss-loader"],