feat: Download single WACZ file when possible

frontend/src/features/crawl-workflows/workflow-action-menu/workflow-action-menu.ts

@@ -10,6 +10,7 @@ import { BtrixElement } from "@/classes/BtrixElement";
 import { ClipboardController } from "@/controllers/clipboard";
 import { WorkflowTab } from "@/routes";
 import type { Crawl, ListWorkflow, Workflow } from "@/types/crawler";
+import { downloadLink } from "@/utils/crawl-workflows/downloadLink";
 import { isNotFailed, isSuccessfullyFinished } from "@/utils/crawler";
 import { isArchivingDisabled } from "@/utils/orgs";
 
@@ -209,13 +210,14 @@ export class WorkflowActionMenu extends BtrixElement {
   private renderLatestCrawlMenu(latestCrawl: Crawl) {
     const authToken = this.authState?.headers.Authorization.split(" ")[1];
     const logTotals = this.logTotals;
+    const download = downloadLink(latestCrawl, this.authState);
 
     return html`
       <sl-menu slot="submenu">
         <btrix-menu-item-link
-          href=${`/api/orgs/${this.orgId}/all-crawls/${latestCrawl.id}/download?auth_bearer=${authToken}`}
+          href=${download.path}
           ?disabled=${!latestCrawl.fileSize}
-          download
+          download=${download.name}
         >
           <sl-icon name="cloud-download" slot="prefix"></sl-icon>
           ${msg("Download Item")}

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

@@ -21,6 +21,8 @@ import type {
 } from "@/types/crawler";
 import type { QARun } from "@/types/qa";
 import { isApiError } from "@/utils/api";
+import { downloadLink } from "@/utils/crawl-workflows/downloadLink";
+import { hasFiles } from "@/utils/crawl-workflows/hasFiles";
 import {
   isActive,
   isNotFailed,
@@ -145,13 +147,6 @@ export class ArchivedItemDetail extends BtrixElement {
 
   private timerId?: number;
 
-  private get hasFiles(): boolean | null {
-    if (!this.item) return null;
-    if (!this.item.resources) return false;
-
-    return this.item.resources.length > 0;
-  }
-
   private get formattedFinishedDate() {
     if (!this.item) return;
 
@@ -326,17 +321,7 @@ export class ArchivedItemDetail extends BtrixElement {
       case "files":
         sectionContent = this.renderPanel(
           html` ${this.renderTitle(this.tabLabels.files)}
-            <sl-tooltip content=${msg("Download Files as Multi-WACZ")}>
-              <sl-button
-                href=${`/api/orgs/${this.orgId}/all-crawls/${this.itemId}/download?auth_bearer=${authToken}`}
-                download=${`browsertrix-${this.itemId}.wacz`}
-                size="small"
-                variant="primary"
-              >
-                <sl-icon slot="prefix" name="cloud-download"></sl-icon>
-                ${msg("Download Files")}
-              </sl-button>
-            </sl-tooltip>`,
+          ${this.renderDownloadFilesButton()}`,
           this.renderFiles(),
         );
         break;
@@ -622,7 +607,7 @@ export class ArchivedItemDetail extends BtrixElement {
   private renderMenu() {
     if (!this.item) return;
 
-    const authToken = this.authState?.headers.Authorization.split(" ")[1];
+    const download = downloadLink(this.item, this.authState);
 
     return html`
       <sl-dropdown placement="bottom-end" distance="4" hoist>
@@ -657,8 +642,8 @@ export class ArchivedItemDetail extends BtrixElement {
                 `,
               )}
               <btrix-menu-item-link
-                href=${`/api/orgs/${this.orgId}/all-crawls/${this.itemId}/download?auth_bearer=${authToken}`}
-                download
+                href=${download.path}
+                download=${download.name}
               >
                 <sl-icon name="cloud-download" slot="prefix"></sl-icon>
                 ${msg("Download Item")}
@@ -763,7 +748,7 @@ export class ArchivedItemDetail extends BtrixElement {
 
     const config = JSON.stringify({ headers });
 
-    const canReplay = this.hasFiles;
+    const canReplay = hasFiles(this.item);
 
     return html`
       <!-- https://github.com/webrecorder/browsertrix-crawler/blob/9f541ab011e8e4bccf8de5bd7dc59b632c694bab/screencast/index.html -->
@@ -977,10 +962,10 @@ export class ArchivedItemDetail extends BtrixElement {
 
   private renderFiles() {
     return html`
-      ${this.hasFiles
+      ${hasFiles(this.item)
         ? html`
             <ul class="rounded-lg border text-sm">
-              ${this.item!.resources!.map(
+              ${this.item.resources.map(
                 (file) => html`
                   <li
                     class="flex justify-between border-t p-3 first:border-t-0"
@@ -1026,6 +1011,28 @@ export class ArchivedItemDetail extends BtrixElement {
     `;
   }
 
+  private renderDownloadFilesButton() {
+    if (!hasFiles(this.item)) return;
+
+    const singleFile = this.item.resources.length === 1;
+    const download = downloadLink(this.item, this.authState);
+
+    return html`<sl-tooltip
+      content=${msg("Download Files as Multi-WACZ")}
+      ?disabled=${singleFile}
+    >
+      <sl-button
+        href=${download.path}
+        download=${download.name}
+        size="small"
+        variant="primary"
+      >
+        <sl-icon slot="prefix" name="cloud-download"></sl-icon>
+        ${singleFile ? msg("Download File") : msg("Download Files")}
+      </sl-button>
+    </sl-tooltip>`;
+  }
+
   private renderLogs() {
     if (!this.itemId) return;
 

frontend/src/pages/org/workflow-detail.ts

@@ -37,6 +37,7 @@ import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
 import { type CrawlState } from "@/types/crawlState";
 import { type StorageSeedFile } from "@/types/workflow";
 import { isApiError } from "@/utils/api";
+import { downloadLink } from "@/utils/crawl-workflows/downloadLink";
 import { settingsForDuplicate } from "@/utils/crawl-workflows/settingsForDuplicate";
 import {
   DEFAULT_MAX_SCALE,
@@ -718,8 +719,7 @@ export class WorkflowDetail extends BtrixElement {
       const authToken = this.authState?.headers.Authorization.split(" ")[1];
       const disableDownload = this.isRunning;
       const disableReplay = !latestCrawl.fileSize;
-      const replayHref = `/api/orgs/${this.orgId}/all-crawls/${latestCrawlId}/download?auth_bearer=${authToken}`;
-      const replayFilename = `browsertrix-${latestCrawlId}.wacz`;
+      const download = downloadLink(latestCrawl, this.authState);
 
       return html`
         <btrix-copy-button
@@ -736,22 +736,15 @@ export class WorkflowDetail extends BtrixElement {
           ?disabled=${!disableDownload}
         >
           <sl-button-group>
-            <sl-tooltip
-              content="${msg("Download Item as WACZ")} (${this.localize.bytes(
-                latestCrawl.fileSize || 0,
-              )})"
-              ?disabled=${disableReplay}
+            <sl-button
+              size="small"
+              href=${download.path}
+              download=${download.name}
+              ?disabled=${disableDownload || disableReplay}
             >
-              <sl-button
-                size="small"
-                href=${replayHref}
-                download=${replayFilename}
-                ?disabled=${disableDownload || disableReplay}
-              >
-                <sl-icon name="cloud-download" slot="prefix"></sl-icon>
-                ${msg("Download")}
-              </sl-button>
-            </sl-tooltip>
+              <sl-icon name="cloud-download" slot="prefix"></sl-icon>
+              ${msg("Download")}
+            </sl-button>
             <sl-dropdown distance="4" placement="bottom-end" hoist>
               <sl-button
                 slot="trigger"
@@ -765,9 +758,9 @@ export class WorkflowDetail extends BtrixElement {
               </sl-button>
               <sl-menu>
                 <btrix-menu-item-link
-                  href=${replayHref}
+                  href=${download.path}
                   ?disabled=${disableDownload || disableReplay}
-                  download=${replayFilename}
+                  download=${download.name}
                 >
                   <sl-icon name="cloud-download" slot="prefix"></sl-icon>
                   ${msg("Item")}

frontend/src/types/utils.ts

@@ -22,6 +22,9 @@ export type Range<F extends number, T extends number> = Exclude<
   Enumerate<F>
 >;
 
+/** Array with at least one item */
+export type NonEmptyArray<T> = [T, ...T[]];
+
 export enum SortDirection {
   Descending = -1,
   Ascending = 1,

frontend/src/utils/crawl-workflows/downloadLink.ts

@@ -0,0 +1,24 @@
+import type { Auth } from "@/types/auth";
+import type { ArchivedItem } from "@/types/crawler";
+import { hasFiles } from "@/utils/crawl-workflows/hasFiles";
+
+/**
+ * Get link to download archived item
+ */
+export function downloadLink(
+  item?: ArchivedItem,
+  authState?: Auth | null,
+): { path: string; name: string } {
+  if (!hasFiles(item)) return { path: "", name: "" };
+
+  if (item.resources.length > 1) {
+    return {
+      path: `/api/orgs/${item.oid}/all-crawls/${item.id}/download?auth_bearer=${authState?.headers.Authorization.split(" ")[1]}`,
+      name: `${item.id}.wacz`,
+    };
+  }
+
+  const { path, name } = item.resources[0];
+
+  return { path, name };
+}

frontend/src/utils/crawl-workflows/hasFiles.ts

@@ -0,0 +1,14 @@
+import type { ArchivedItem } from "@/types/crawler";
+import type { NonEmptyArray } from "@/types/utils";
+
+/**
+ * Check whether archived item has at least one WACZ file
+ */
+export function hasFiles(item?: ArchivedItem): item is ArchivedItem & {
+  resources: NonEmptyArray<NonNullable<ArchivedItem["resources"]>[number]>;
+} {
+  if (!item) return false;
+  if (!item.resources) return false;
+
+  return Boolean(item.resources[0]);
+}