update workflow settings

Author: SuaYoo

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

@@ -16,9 +16,7 @@ import {
 import { labelFor } from "@/strings/crawl-workflows/labels";
 import scopeTypeLabel from "@/strings/crawl-workflows/scopeType";
 import sectionStrings from "@/strings/crawl-workflows/section";
-import type { Collection } from "@/types/collection";
 import { WorkflowScopeType, type StorageSeedFile } from "@/types/workflow";
-import { isApiError } from "@/utils/api";
 import { unescapeCustomPrefix } from "@/utils/crawl-workflows/unescapeCustomPrefix";
 import { DEPTH_SUPPORTED_SCOPES, isPageScopeType } from "@/utils/crawler";
 import { humanizeSchedule } from "@/utils/cron";
@@ -60,13 +58,9 @@ export class ConfigDetails extends BtrixElement {
     maxPagesPerCrawl?: number;
   };
 
-  @state()
-  private collections: Collection[] = [];
-
   async connectedCallback() {
     super.connectedCallback();
     void this.fetchOrgDefaults();
-    await this.fetchCollections();
   }
 
   render() {
@@ -313,6 +307,22 @@ export class ConfigDetails extends BtrixElement {
           )}
         `,
       })}
+      ${when(!this.hideMetadata, () =>
+        this.renderSection({
+          id: "collection",
+          heading: sectionStrings.collection,
+          renderDescItems: () => html`
+            ${this.renderSetting(
+              html`<span class="mb-1 inline-block">${msg("Auto-Add")}</span>`,
+              crawlConfig?.autoAddCollections.length
+                ? html`<btrix-linked-collections-list
+                    .collectionIds=${crawlConfig.autoAddCollections}
+                  ></btrix-linked-collections-list>`
+                : undefined,
+            )}
+          `,
+        }),
+      )}
       ${when(!this.hideMetadata, () =>
         this.renderSection({
           id: "crawl-metadata",
@@ -338,21 +348,6 @@ export class ConfigDetails extends BtrixElement {
                   )
                 : [],
             )}
-            ${this.renderSetting(
-              msg("Collections"),
-              this.collections.length
-                ? this.collections.map(
-                    (coll) =>
-                      html`<sl-tag class="mr-2 mt-1" variant="neutral">
-                        ${coll.name}
-                        <span class="font-monostyle pl-1 text-xs">
-                          (${this.localize.number(coll.crawlCount)}
-                          ${pluralOf("items", coll.crawlCount)})
-                        </span>
-                      </sl-tag>`,
-                  )
-                : undefined,
-            )}
           `,
         }),
       )}
@@ -633,44 +628,6 @@ export class ConfigDetails extends BtrixElement {
     `;
   }
 
-  private async fetchCollections() {
-    if (this.crawlConfig?.autoAddCollections) {
-      try {
-        await this.getCollections();
-      } catch (e) {
-        this.notify.toast({
-          message:
-            isApiError(e) && e.statusCode === 404
-              ? msg("Collections not found.")
-              : msg(
-                  "Sorry, couldn't retrieve Collection details at this time.",
-                ),
-          variant: "danger",
-          icon: "exclamation-octagon",
-          id: "collection-fetch-status",
-        });
-      }
-    }
-  }
-
-  private async getCollections() {
-    const collections: Collection[] = [];
-    const orgId = this.crawlConfig?.oid;
-
-    if (this.crawlConfig?.autoAddCollections && orgId) {
-      for (const collectionId of this.crawlConfig.autoAddCollections) {
-        const data = await this.api.fetch<Collection | undefined>(
-          `/orgs/${orgId}/collections/${collectionId}`,
-        );
-        if (data) {
-          collections.push(data);
-        }
-      }
-    }
-    this.collections = collections;
-    this.requestUpdate();
-  }
-
   // TODO Consolidate with workflow-editor
   private async fetchOrgDefaults() {
     try {

frontend/src/features/collections/index.ts

@@ -6,6 +6,7 @@ import("./collection-edit-dialog");
 import("./collection-create-dialog");
 import("./collection-initial-view-dialog");
 import("./collection-workflow-list");
+import("./linked-collections-list");
 import("./select-collection-access");
 import("./select-collection-page");
 import("./share-collection");

frontend/src/features/collections/linked-collections-list.ts

@@ -0,0 +1,76 @@
+import { localized, msg } from "@lit/localize";
+import { Task } from "@lit/task";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import isEqual from "lodash/fp/isEqual";
+
+import { BtrixElement } from "@/classes/BtrixElement";
+import type { Collection } from "@/types/collection";
+import { pluralOf } from "@/utils/pluralize";
+
+/**
+ * Display list of collections that are linked to a workflow or archived item by ID.
+ */
+@customElement("btrix-linked-collections-list")
+@localized()
+export class LinkedCollectionsList extends BtrixElement {
+  /**
+   * List of collection IDs, checked against values so collection data is not
+   * unnecessarily fetched if IDs have not changed
+   */
+  @property({ type: Array, hasChanged: (a, b) => !isEqual(a, b) })
+  collectionIds: string[] = [];
+
+  private readonly collectionsTask = new Task(this, {
+    task: async ([ids], { signal }) => {
+      return Promise.all(ids.map(async (id) => this.getCollection(id, signal)));
+    },
+    args: () => [this.collectionIds] as const,
+  });
+
+  render() {
+    return this.collectionsTask.render({
+      complete: this.renderList,
+    });
+  }
+
+  private readonly renderList = (items: (Collection | undefined)[]) => {
+    const collections = items.filter((v): v is Collection => v !== undefined);
+
+    if (!collections.length) {
+      return;
+    }
+
+    return html`<ul class="divide-y rounded border">
+      ${collections.map(
+        (col) =>
+          html`<li class="flex items-center">
+            <div class="flex-1 p-1.5 leading-none">${col.name}</div>
+            <div class="flex-none">
+              <btrix-badge pill variant="cyan"
+                >${col.crawlCount}
+                ${pluralOf("items", col.crawlCount)}</btrix-badge
+              >
+            </div>
+            <div class="flex-none">
+              <sl-tooltip placement="right" content=${msg("Open in New Tab")}>
+                <sl-icon-button
+                  name="arrow-up-right"
+                  href="${this.navigate.orgBasePath}/collections/view/${col.id}"
+                  target="_blank"
+                >
+                </sl-icon-button>
+              </sl-tooltip>
+            </div>
+          </li>`,
+      )}
+    </ul>`;
+  };
+
+  private async getCollection(id: string, signal: AbortSignal) {
+    return this.api.fetch<Collection | undefined>(
+      `/orgs/${this.orgId}/collections/${id}`,
+      { signal },
+    );
+  }
+}