Fix archived item crawl settings (#1473)

Fixes https://github.com/webrecorder/browsertrix-cloud/issues/1418

### Changes
- Fixes crawl detail always showing URL list seed settings
- Removes metadata section from crawl detail settings tab

frontend/src/components/ui/config-details.ts

@@ -39,9 +39,9 @@ export class ConfigDetails extends LiteElement {
   @property({ type: Boolean })
   anchorLinks = false;
 
-  // Hide tag field, e.g. if embedded in crawl detail view
+  // Hide metadata section, e.g. if embedded in crawl detail view
   @property({ type: Boolean })
-  hideTags = false;
+  hideMetadata = false;
 
   @state()
   private orgDefaults?: {
@@ -215,7 +215,7 @@ export class ConfigDetails extends LiteElement {
               >
                 ${crawlConfig?.profileName}
               </a>`,
-              () => msg("Default Profile")
+              () => crawlConfig?.profileName || msg("Default Profile")
             )
           )}
           ${this.renderSetting(
@@ -262,45 +262,51 @@ export class ConfigDetails extends LiteElement {
           )}
         </btrix-desc-list>
       </section>
-      <section id="crawl-metadata" class="mb-8">
+      ${this.hideMetadata
-        <btrix-section-heading style="--margin: var(--sl-spacing-medium)">
+        ? nothing
-          <h4>${msg("Crawl Metadata")}</h4>
+        : html`
-        </btrix-section-heading>
+            <section id="crawl-metadata" class="mb-8">
-        <btrix-desc-list>
+              <btrix-section-heading style="--margin: var(--sl-spacing-medium)">
-          ${this.renderSetting(msg("Name"), crawlConfig?.name)}
+                <h4>${msg("Metadata")}</h4>
-          ${this.renderSetting(
+              </btrix-section-heading>
-            msg("Description"),
+              <btrix-desc-list>
-            html`
+                ${this.renderSetting(msg("Name"), crawlConfig?.name)}
-              <p class="font-sans max-w-prose">${crawlConfig?.description}</p>
+                ${this.renderSetting(
-            `
+                  msg("Description"),
-          )}
+                  crawlConfig?.description
-          ${this.hideTags
+                    ? html`
-            ? ""
+                        <p class="font-sans max-w-prose">
-            : this.renderSetting(
+                          ${crawlConfig?.description}
-                msg("Tags"),
+                        </p>
-                crawlConfig?.tags?.length
+                      `
-                  ? crawlConfig.tags.map(
+                    : undefined
-                      (tag) =>
+                )}
-                        html`<btrix-tag class="mt-1 mr-2">${tag}</btrix-tag>`
+                ${this.renderSetting(
-                    )
+                  msg("Tags"),
-                  : undefined
+                  crawlConfig?.tags?.length
-              )}
+                    ? crawlConfig.tags.map(
-          ${this.renderSetting(
+                        (tag) =>
-            msg("Collections"),
+                          html`<btrix-tag class="mt-1 mr-2">${tag}</btrix-tag>`
-            this.collections.length
+                      )
-              ? this.collections.map(
+                    : []
-                  (coll) =>
+                )}
-                    html`<sl-tag class="mt-1 mr-2" variant="neutral">
+                ${this.renderSetting(
-                      ${coll.name}
+                  msg("Collections"),
-                      <span class="pl-1 font-monostyle text-xs">
+                  this.collections.length
-                        (${msg(str`${coll.crawlCount} items`)})
+                    ? this.collections.map(
-                      </span>
+                        (coll) =>
-                    </sl-tag>`
+                          html`<sl-tag class="mt-1 mr-2" variant="neutral">
-                )
+                            ${coll.name}
-              : undefined
+                            <span class="pl-1 font-monostyle text-xs">
-          )}
+                              (${msg(str`${coll.crawlCount} items`)})
-        </btrix-desc-list>
+                            </span>
-      </section>
+                          </sl-tag>`
+                      )
+                    : undefined
+                )}
+              </btrix-desc-list>
+            </section>
+          `}
     `;
   }
 
@@ -436,6 +442,8 @@ export class ConfigDetails extends LiteElement {
       content = html` <sl-skeleton></sl-skeleton> `;
     } else if (typeof value === "boolean") {
       content = value ? msg("Yes") : msg("No");
+    } else if (Array.isArray(value) && !value.length) {
+      content = html`<span class="text-neutral-400">${msg("None")}</span>`;
     } else if (typeof value !== "number" && !value) {
       content = html`<span class="text-neutral-400"
         >${msg("Not specified")}</span

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

@@ -11,7 +11,7 @@ import type { AuthState } from "@/utils/AuthService";
 import LiteElement, { html } from "@/utils/LiteElement";
 import { isActive } from "@/utils/crawler";
 import { CopyButton } from "@/components/ui/copy-button";
-import type { ArchivedItem, Crawl, CrawlConfig, Seed } from "./types";
+import type { ArchivedItem, Crawl, CrawlConfig, Seed, Workflow } from "./types";
 import type { APIPaginatedList } from "@/types/api";
 import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter";
 import type { CrawlLog } from "@/features/archived-items/crawl-logs";
@@ -65,6 +65,9 @@ export class CrawlDetail extends LiteElement {
   @state()
   private crawl?: ArchivedItem;
 
+  @state()
+  private workflow?: Workflow;
+
   @state()
   private seeds?: APIPaginatedList<Seed>;
 
@@ -119,6 +122,9 @@ export class CrawlDetail extends LiteElement {
       this.fetchCrawlLogs();
       this.fetchSeeds();
     }
+    if (changedProperties.has("workflowId") && this.workflowId) {
+      this.fetchWorkflow();
+    }
   }
 
   connectedCallback(): void {
@@ -330,7 +336,7 @@ export class CrawlDetail extends LiteElement {
       `;
     };
     return html`
-      <nav class="border-b md:border-b-0 pb-4 md:mt-10">
+      <nav class="sticky top-0 border-b md:border-b-0 pb-4 md:mt-10">
         <ul
           class="flex flex-row md:flex-col gap-2 text-center md:text-start"
           role="menu"
@@ -854,16 +860,16 @@ ${this.crawl?.description}
     return html`
       <div aria-live="polite" aria-busy=${!this.crawl || !this.seeds}>
         ${when(
-          this.crawl && this.seeds,
+          this.crawl && this.seeds && (!this.workflowId || this.workflow),
           () => html`
             <btrix-config-details
               .authState=${this.authState!}
               .crawlConfig=${{
                 ...this.crawl,
-                autoAddCollections: this.crawl!.collectionIds,
+                jobType: this.workflow?.jobType,
               } as CrawlConfig}
               .seeds=${this.seeds!.items}
-              hideTags
+              hideMetadata
             ></btrix-config-details>
           `,
           this.renderLoading
@@ -906,13 +912,19 @@ ${this.crawl?.description}
     }
   }
 
+  private async fetchWorkflow(): Promise<void> {
+    try {
+      this.workflow = await this.getWorkflow();
+    } catch (e: unknown) {
+      console.debug(e);
+    }
+  }
+
   private async getCrawl(): Promise<Crawl> {
     const apiPath = `/orgs/${this.orgId}/${
       this.itemType === "upload" ? "uploads" : "crawls"
     }/${this.crawlId}/replay.json`;
-    const data: Crawl = await this.apiFetch(apiPath, this.authState!);
+    return this.apiFetch<Crawl>(apiPath, this.authState!);
-
-    return data;
   }
 
   private async getSeeds() {
@@ -924,6 +936,13 @@ ${this.crawl?.description}
     return data;
   }
 
+  private async getWorkflow(): Promise<Workflow> {
+    return this.apiFetch<Workflow>(
+      `/orgs/${this.orgId}/crawlconfigs/${this.workflowId}`,
+      this.authState!
+    );
+  }
+
   private async fetchCrawlLogs(
     params: Partial<APIPaginatedList> = {}
   ): Promise<void> {