Add "Copy <item type> ID" to a bunch of menus (#2426)

Addresses feedback from here https://discord.com/channels/895426029194207262/910966759165657161/1344367205004873819 by @tw4l. Add "Copy <item type> ID" to a bunch of menus, including all list and detail pages, as well as all other item/crawl/page lists. | Screenshots | |--------| | <img width="323" alt="Screenshot 2025-02-26 at 3 56 48 PM" src="https://github.com/user-attachments/assets/32044c47-65f3-4e80-8f39-df5fd2101324" /> | | <img width="246" alt="Screenshot 2025-02-26 at 4 02 06 PM" src="https://github.com/user-attachments/assets/8f2d6272-f450-4923-b5c9-751a2eea9a26" /> | | <img width="419" alt="Screenshot 2025-02-26 at 4 02 55 PM" src="https://github.com/user-attachments/assets/0c005a33-055d-4fb7-a79e-9bedae57b785" /> | | <img width="1104" alt="Screenshot 2025-02-26 at 1 57 01 PM" src="https://github.com/user-attachments/assets/7ee43400-1b30-4c78-89a0-3ddb89ef90ca" /> | | <img width="292" alt="Screenshot 2025-02-26 at 4 01 10 PM" src="https://github.com/user-attachments/assets/929f7870-aa83-4f3c-947a-efad377e0b49" /> | | <img width="240" alt="Screenshot 2025-02-26 at 4 03 19 PM" src="https://github.com/user-attachments/assets/45bff838-f741-45ce-b1a7-a8cfefa9656b" /> | --------- Co-authored-by: Henry Wilkinson <[email protected]>
webrecorder · Feb 26, 2025 · 00e85c3 · 00e85c3
1 parent e67708b
commit 00e85c3
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 60 deletions.
diff --git a/frontend/src/components/ui/menu-item-link.ts b/frontend/src/components/ui/menu-item-link.ts
@@ -47,7 +47,10 @@ export class MenuItemLink extends TailwindElement {
       download=${this.download}
       aria-disabled=${this.disabled}
       @click=${(e: MouseEvent) => {
-        if (this.disabled || this.loading) return;
+        if (this.disabled || this.loading) {
+          e.preventDefault();
+          return;
+        }
 
         if (this.download) {
           const dropdown = this.shadowRoot!.host.closest<

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
@@ -630,6 +630,26 @@ export class ArchivedItemDetail extends BtrixElement {
               <sl-divider></sl-divider>
             `,
           )}
+          ${when(
+            isSuccessfullyFinished(this.item),
+            () => html`
+              <btrix-menu-item-link
+                href=${`/api/orgs/${this.orgId}/all-crawls/${this.itemId}/download?auth_bearer=${authToken}`}
+                download
+              >
+                <sl-icon name="cloud-download" slot="prefix"></sl-icon>
+                ${msg("Download Item")}
+                ${this.item?.fileSize
+                  ? html` <btrix-badge
+                      slot="suffix"
+                      class="font-monostyle text-xs text-neutral-500"
+                      >${this.localize.bytes(this.item.fileSize)}</btrix-badge
+                    >`
+                  : nothing}
+              </btrix-menu-item-link>
+              <sl-divider></sl-divider>
+            `,
+          )}
           ${when(
             this.itemType === "crawl",
             () => html`
@@ -659,19 +679,15 @@ export class ArchivedItemDetail extends BtrixElement {
             <sl-icon name="tags" slot="prefix"></sl-icon>
             ${msg("Copy Tags")}
           </sl-menu-item>
-          ${when(
-            isSuccessfullyFinished(this.item),
-            () => html`
-              <sl-divider></sl-divider>
-              <btrix-menu-item-link
-                href=${`/api/orgs/${this.orgId}/all-crawls/${this.itemId}/download?auth_bearer=${authToken}`}
-                download
-              >
-                <sl-icon name="cloud-download" slot="prefix"></sl-icon>
-                ${msg("Download Item")}
-              </btrix-menu-item-link>
-            `,
-          )}
+          <sl-menu-item
+            @click=${() =>
+              ClipboardController.copyToClipboard(
+                this.item?.id ?? this.itemId ?? "",
+              )}
+          >
+            <sl-icon name="copy" slot="prefix"></sl-icon>
+            ${msg("Copy Item ID")}
+          </sl-menu-item>
           ${when(
             this.isCrawler,
             () => html`

diff --git a/frontend/src/pages/org/archived-item-detail/ui/qa.ts b/frontend/src/pages/org/archived-item-detail/ui/qa.ts
@@ -16,6 +16,7 @@ import queryString from "query-string";
 import { BtrixElement } from "@/classes/BtrixElement";
 import { type Dialog } from "@/components/ui/dialog";
 import type { PageChangeEvent } from "@/components/ui/pagination";
+import { ClipboardController } from "@/controllers/clipboard";
 import { iconFor as iconForPageReview } from "@/features/qa/page-list/helpers";
 import * as pageApproval from "@/features/qa/page-list/helpers/approval";
 import type { SelectDetail } from "@/features/qa/qa-run-dropdown";
@@ -392,6 +393,13 @@ export class ArchivedItemDetailQA extends BtrixElement {
                         </btrix-menu-item-link>
                         <sl-divider></sl-divider>
                       `}
+                  <sl-menu-item
+                    @click=${() => ClipboardController.copyToClipboard(run.id)}
+                  >
+                    <sl-icon name="copy" slot="prefix"></sl-icon>
+                    ${msg("Copy Run ID")}
+                  </sl-menu-item>
+                  <sl-divider></sl-divider>
                   <sl-menu-item
                     @click=${() => {
                       this.deleting = run.id;
@@ -750,12 +758,16 @@ export class ArchivedItemDetailQA extends BtrixElement {
           "[clickable-start] minmax(12rem, auto)",
           "minmax(min-content, 12rem)",
           "minmax(min-content, 12rem) [clickable-end]",
+          "min-content",
         ].join(" ")}"
       >
         <btrix-table-head>
           <btrix-table-header-cell>${msg("Page")}</btrix-table-header-cell>
           <btrix-table-header-cell>${msg("Approval")}</btrix-table-header-cell>
           <btrix-table-header-cell>${msg("Comments")}</btrix-table-header-cell>
+          <btrix-table-header-cell class="px-0">
+            <span class="sr-only">${msg("Row actions")}</span>
+          </btrix-table-header-cell>
         </btrix-table-head>
         <btrix-table-body class="rounded border">
           ${this.pages?.items.map(
@@ -809,6 +821,21 @@ export class ArchivedItemDetailQA extends BtrixElement {
                         ${msg("None")}
                       </span>`}
                 </btrix-table-cell>
+                <btrix-table-cell class="p-0">
+                  <div class="col action">
+                    <btrix-overflow-dropdown>
+                      <sl-menu>
+                        <sl-menu-item
+                          @click=${() =>
+                            ClipboardController.copyToClipboard(page.id)}
+                        >
+                          <sl-icon name="copy" slot="prefix"></sl-icon>
+                          ${msg("Copy Page ID")}
+                        </sl-menu-item>
+                      </sl-menu>
+                    </btrix-overflow-dropdown>
+                  </div>
+                </btrix-table-cell>
               </btrix-table-row>
             `,
           )}

diff --git a/frontend/src/pages/org/archived-items.ts b/frontend/src/pages/org/archived-items.ts
@@ -598,6 +598,26 @@ export class CrawlsList extends BtrixElement {
           <sl-divider></sl-divider>
         `,
       )}
+      ${when(
+        isSuccessfullyFinished(item),
+        () => html`
+          <btrix-menu-item-link
+            href=${`/api/orgs/${this.orgId}/all-crawls/${item.id}/download?auth_bearer=${authToken}`}
+            download
+          >
+            <sl-icon name="cloud-download" slot="prefix"></sl-icon>
+            ${msg("Download Item")}
+            ${item.fileSize
+              ? html` <btrix-badge
+                  slot="suffix"
+                  class="font-monostyle text-xs text-neutral-500"
+                  >${this.localize.bytes(item.fileSize)}</btrix-badge
+                >`
+              : nothing}
+          </btrix-menu-item-link>
+          <sl-divider></sl-divider>
+        `,
+      )}
       ${item.type === "crawl"
         ? html`
             <sl-menu-item
@@ -615,14 +635,9 @@ export class CrawlsList extends BtrixElement {
               <sl-icon name="copy" slot="prefix"></sl-icon>
               ${msg("Copy Workflow ID")}
             </sl-menu-item>
-            <sl-menu-item
-              @click=${() => ClipboardController.copyToClipboard(item.id)}
-            >
-              <sl-icon name="copy" slot="prefix"></sl-icon>
-              ${msg("Copy Archived Item ID")}
-            </sl-menu-item>
           `
         : nothing}
+
       <sl-menu-item
         @click=${() =>
           ClipboardController.copyToClipboard(item.tags.join(", "))}
@@ -631,19 +646,12 @@ export class CrawlsList extends BtrixElement {
         <sl-icon name="tags" slot="prefix"></sl-icon>
         ${msg("Copy Tags")}
       </sl-menu-item>
-      ${when(
-        isSuccessfullyFinished(item),
-        () => html`
-          <sl-divider></sl-divider>
-          <btrix-menu-item-link
-            href=${`/api/orgs/${this.orgId}/all-crawls/${item.id}/download?auth_bearer=${authToken}`}
-            download
-          >
-            <sl-icon name="cloud-download" slot="prefix"></sl-icon>
-            ${msg("Download Item")}
-          </btrix-menu-item-link>
-        `,
-      )}
+      <sl-menu-item
+        @click=${() => ClipboardController.copyToClipboard(item.id)}
+      >
+        <sl-icon name="copy" slot="prefix"></sl-icon>
+        ${msg("Copy Item ID")}
+      </sl-menu-item>
       ${when(
         this.isCrawler && (item.type !== "crawl" || !isActive(item)),
         () => html`

diff --git a/frontend/src/pages/org/browser-profiles-detail.ts b/frontend/src/pages/org/browser-profiles-detail.ts
@@ -10,6 +10,7 @@ import type { Profile, ProfileWorkflow } from "./types";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
+import { ClipboardController } from "@/controllers/clipboard";
 import type { BrowserConnectionChange } from "@/features/browser-profiles/profile-browser";
 import { pageNav } from "@/layouts/pageHeader";
 import { isApiError } from "@/utils/api";
@@ -432,12 +433,19 @@ export class BrowserProfilesDetail extends BtrixElement {
             ${msg("Duplicate Profile")}
           </sl-menu-item>
           <sl-divider></sl-divider>
+          <sl-menu-item
+            @click=${() => ClipboardController.copyToClipboard(this.profileId)}
+          >
+            <sl-icon name="copy" slot="prefix"></sl-icon>
+            ${msg("Copy Profile ID")}
+          </sl-menu-item>
+          <sl-divider></sl-divider>
           <sl-menu-item
             style="--sl-color-neutral-700: var(--danger)"
             @click=${() => void this.deleteProfile()}
           >
             <sl-icon slot="prefix" name="trash3"></sl-icon>
-            ${msg("Delete")}
+            ${msg("Delete Profile")}
           </sl-menu-item>
         </sl-menu>
       </sl-dropdown>

diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
@@ -15,6 +15,7 @@ import {
   SortDirection,
   type SortValues,
 } from "@/components/ui/table/table-header-cell";
+import { ClipboardController } from "@/controllers/clipboard";
 import { pageHeader } from "@/layouts/pageHeader";
 import type {
   APIPaginatedList,
@@ -325,14 +326,22 @@ export class BrowserProfilesList extends BtrixElement {
             <sl-icon slot="prefix" name="files"></sl-icon>
             ${msg("Duplicate Profile")}
           </sl-menu-item>
+          <sl-divider></sl-divider>
+          <sl-menu-item
+            @click=${() => ClipboardController.copyToClipboard(data.id)}
+          >
+            <sl-icon name="copy" slot="prefix"></sl-icon>
+            ${msg("Copy Profile ID")}
+          </sl-menu-item>
+          <sl-divider></sl-divider>
           <sl-menu-item
             style="--sl-color-neutral-700: var(--danger)"
             @click=${() => {
               void this.deleteProfile(data);
             }}
           >
             <sl-icon slot="prefix" name="trash3"></sl-icon>
-            ${msg("Delete")}
+            ${msg("Delete Profile")}
           </sl-menu-item>
         </sl-menu>
       </btrix-overflow-dropdown>

diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
@@ -14,6 +14,7 @@ import { BtrixElement } from "@/classes/BtrixElement";
 import type { MarkdownEditor } from "@/components/ui/markdown-editor";
 import type { PageChangeEvent } from "@/components/ui/pagination";
 import { viewStateContext, type ViewStateContext } from "@/context/view-state";
+import { ClipboardController } from "@/controllers/clipboard";
 import type { EditDialogTab } from "@/features/collections/collection-edit-dialog";
 import { collectionShareLink } from "@/features/collections/helpers/share-link";
 import { SelectCollectionAccess } from "@/features/collections/select-collection-access";
@@ -563,6 +564,16 @@ export class CollectionDetail extends BtrixElement {
             )}
           </btrix-menu-item-link>
           <sl-divider></sl-divider>
+          <sl-menu-item
+            @click=${() =>
+              ClipboardController.copyToClipboard(
+                this.collection?.id ?? this.collectionId,
+              )}
+          >
+            <sl-icon name="copy" slot="prefix"></sl-icon>
+            ${msg("Copy Collection ID")}
+          </sl-menu-item>
+          <sl-divider></sl-divider>
           <sl-menu-item
             style="--sl-color-neutral-700: var(--danger)"
             @click=${this.confirmDelete}
@@ -868,6 +879,13 @@ export class CollectionDetail extends BtrixElement {
                     <sl-icon name="folder-minus" slot="prefix"></sl-icon>
                     ${msg("Remove from Collection")}
                   </sl-menu-item>
+                  <sl-divider></sl-divider>
+                  <sl-menu-item
+                    @click=${() => ClipboardController.copyToClipboard(item.id)}
+                  >
+                    <sl-icon name="copy" slot="prefix"></sl-icon>
+                    ${msg("Copy Item ID")}
+                  </sl-menu-item>
                 </sl-menu>
               </btrix-overflow-dropdown>
             </btrix-table-cell>

diff --git a/frontend/src/pages/org/collections-list.ts b/frontend/src/pages/org/collections-list.ts
@@ -585,12 +585,10 @@ export class CollectionsList extends BtrixElement {
             <sl-icon name="gear" slot="prefix"></sl-icon>
             ${msg("Edit Collection Settings")}
           </sl-menu-item>
-          <sl-divider></sl-divider>
           ${col.access === CollectionAccess.Public ||
           col.access === CollectionAccess.Unlisted
             ? html`
                 <sl-menu-item
-                  style="--sl-color-neutral-700: var(--success)"
                   @click=${() => {
                     ClipboardController.copyToClipboard(this.getShareLink(col));
                     this.notify.toast({
@@ -605,21 +603,28 @@ export class CollectionsList extends BtrixElement {
                 </sl-menu-item>
               `
             : nothing}
-
+          <sl-divider></sl-divider>
           <btrix-menu-item-link
             href=${`/api/orgs/${this.orgId}/collections/${col.id}/download?auth_bearer=${authToken}`}
             download
             ?disabled=${!col.totalSize}
           >
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
-            ${msg("Download")}
+            ${msg("Download Collection")}
             <btrix-badge
               slot="suffix"
               class="font-monostyle text-xs text-neutral-500"
               >${this.localize.bytes(col.totalSize)}</btrix-badge
             >
           </btrix-menu-item-link>
           <sl-divider></sl-divider>
+          <sl-menu-item
+            @click=${() => ClipboardController.copyToClipboard(col.id)}
+          >
+            <sl-icon name="copy" slot="prefix"></sl-icon>
+            ${msg("Copy Collection ID")}
+          </sl-menu-item>
+          <sl-divider></sl-divider>
           <sl-menu-item
             style="--sl-color-neutral-700: var(--danger)"
             @click=${() => void this.manageCollection(col, "delete")}