feat: Bulk delete archived items

frontend/src/controllers/api.ts

@@ -271,6 +271,11 @@ export class APIController implements ReactiveController {
         break;
       }
       case 404: {
+        if (typeof errorDetail === "string") {
+          errorDetails = [errorDetail];
+        } else if (Array.isArray(errorDetail) && errorDetail.length) {
+          errorDetails = errorDetail;
+        }
         errorMessage = msg("Not found");
         break;
       }

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

@@ -124,7 +124,7 @@ export class ArchivedItemListItem extends BtrixElement {
         ${this.checkbox
           ? html`
               <btrix-table-cell
-                class="pr-1.5"
+                class="pl-2.5 pr-1"
                 @click=${(e: MouseEvent) =>
                   (e.target as HTMLElement)
                     .querySelector("sl-checkbox")

frontend/src/features/archived-items/bulk-delete-items-dialog.ts

@@ -13,6 +13,7 @@ import { deleteConfirmation } from "@/strings/ui";
 import type { ListArchivedItem } from "@/types/crawler";
 import { pathForArchivedItem } from "@/utils/archived-items/pathForArchivedItem";
 import { renderName } from "@/utils/crawler";
+import { isNotEqual } from "@/utils/is-not-equal";
 import { tw } from "@/utils/tailwind";
 
 /**
@@ -22,12 +23,15 @@ import { tw } from "@/utils/tailwind";
 @customElement("btrix-bulk-delete-items-dialog")
 @localized()
 export class BulkDeleteItemsDialog extends BtrixElement {
-  @property({ type: Array })
+  @property({ type: Array, hasChanged: isNotEqual })
   items?: ListArchivedItem[];
 
   @property({ type: Boolean })
   open = false;
 
+  @property({ type: Boolean })
+  inProgress = false;
+
   @query("btrix-dialog")
   readonly dialog?: Dialog | null;
 
@@ -95,6 +99,11 @@ export class BulkDeleteItemsDialog extends BtrixElement {
       class="[--width:36rem]"
       .label=${msg("Delete Archived Items?")}
       .open=${this.open}
+      @sl-request-close=${(e: CustomEvent) => {
+        if (this.inProgress) {
+          e.preventDefault();
+        }
+      }}
     >
       ${when(this.items, this.renderContent)}
     </btrix-dialog>`;
@@ -116,6 +125,13 @@ export class BulkDeleteItemsDialog extends BtrixElement {
             html`<div>
               <p class="max-w-prose text-pretty">
                 ${deleteConfirmation(pluralOfItems(items.length))}
+                ${when(
+                  items.some((item) => item.type === "crawl"),
+                  () =>
+                    msg(
+                      "Crawl runs associated with crawled items will also be deleted.",
+                    ),
+                )}
               </p>
               <btrix-data-grid
                 class="part-[body]:text-xs"
@@ -156,7 +172,8 @@ export class BulkDeleteItemsDialog extends BtrixElement {
         <sl-button
           size="small"
           variant="danger"
-          ?disabled=${!deleteable}
+          ?disabled=${!deleteable || this.inProgress}
+          ?loading=${this.inProgress}
           @click=${() => {
             this.dispatchEvent(new CustomEvent("btrix-confirm"));
           }}

frontend/src/features/archived-items/delete-item-dialog.ts

@@ -9,7 +9,7 @@ import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import type { ArchivedItemSectionName } from "@/pages/org/archived-item-detail/archived-item-detail";
 import { CommonTab, OrgTab, WorkflowTab } from "@/routes";
-import type { ArchivedItem } from "@/types/crawler";
+import type { ArchivedItem, ListArchivedItem } from "@/types/crawler";
 import { isCrawl, isFailed, renderName } from "@/utils/crawler";
 import { pluralOf } from "@/utils/pluralize";
 
@@ -23,7 +23,7 @@ import { pluralOf } from "@/utils/pluralize";
 @localized()
 export class DeleteItemDialog extends BtrixElement {
   @property({ type: Object })
-  item?: ArchivedItem;
+  item?: ListArchivedItem | ArchivedItem;
 
   @property({ type: Boolean })
   open = false;

frontend/src/layouts/listControls.ts

@@ -9,19 +9,21 @@ export function listControls({
   renderSortControl,
   renderViewControl,
   renderFilterControl,
+  renderBulkActionsControl,
 }: {
   renderSearchControl: () => TemplateResult;
   renderSortControl: () => TemplateResult;
   renderViewControl?: () => TemplateResult;
   renderFilterControl?: () => TemplateResult;
+  renderBulkActionsControl?: () => TemplateResult;
 }) {
   return html`
     <div
-      class="sticky top-2 z-10 mb-3 flex flex-col gap-3 rounded-lg border bg-neutral-50 px-3.5 py-3"
+      class="sticky top-2 z-10 mb-3 flex flex-col gap-2 rounded-lg border bg-neutral-50 p-2.5 @container/controls lg:gap-3 lg:px-3.5 lg:py-3"
     >
       <div
         class=${clsx(
-          tw`grid items-center gap-3`,
+          tw`grid items-center gap-x-3 gap-y-2 lg:gap-y-2`,
           renderViewControl
             ? tw`grid-cols-[1fr_fit-content(100%)] lg:grid-cols-[minmax(0,100%)_fit-content(100%)_fit-content(100%)]`
             : tw`grid-cols-1 md:grid-cols-[minmax(0,100%)_fit-content(100%)]`,
@@ -56,12 +58,51 @@ export function listControls({
             </div>`
           : nothing}
       </div>
-      ${renderFilterControl
-        ? html`<div class="flex flex-wrap items-center gap-2">
-            <span class="whitespace-nowrap text-sm text-neutral-500">
-              ${msg("Filter by:")}
-            </span>
-            ${renderFilterControl()}
+      ${renderFilterControl || renderBulkActionsControl
+        ? html`<div
+            class="relative flex flex-col gap-y-2 overflow-hidden @3xl/controls:gap-y-0"
+          >
+            ${renderBulkActionsControl
+              ? html`<div
+                  class=${clsx(
+                    tw`peer hidden items-center gap-2 text-neutral-500 @3xl/controls:absolute @3xl/controls:flex @3xl/controls:h-full @3xl/controls:translate-y-full @3xl/controls:opacity-0 @3xl/controls:delay-75 @3xl/controls:motion-safe:transition-all`,
+                    tw`@3xl/controls:hover:translate-y-0 @3xl/controls:hover:opacity-100`,
+                    tw`@3xl/controls:has-[sl-checkbox[checked]]:translate-y-0 @3xl/controls:has-[sl-checkbox[checked]]:opacity-100`,
+                    tw`@3xl/controls:has-[sl-checkbox[indeterminate]]:translate-y-0 @3xl/controls:has-[sl-checkbox[indeterminate]]:opacity-100`,
+                  )}
+                >
+                  ${renderBulkActionsControl()}
+                </div>`
+              : nothing}
+            ${renderFilterControl
+              ? html`<div
+                  class=${clsx(
+                    tw`flex flex-wrap items-center gap-2`,
+                    renderBulkActionsControl && [
+                      tw`order-first @3xl/controls:delay-75 @3xl/controls:motion-safe:transition-all`,
+                      tw`@3xl/controls:peer-hover:-translate-y-full @3xl/controls:peer-hover:opacity-0 @3xl/controls:peer-hover:delay-0`,
+                      tw`@3xl/controls:peer-has-[sl-checkbox[checked]]:-translate-y-full @3xl/controls:peer-has-[sl-checkbox[checked]]:opacity-0 @3xl/controls:peer-has-[sl-checkbox[checked]]:delay-0`,
+                      tw`@3xl/controls:peer-has-[sl-checkbox[indeterminate]]:-translate-y-full @3xl/controls:peer-has-[sl-checkbox[indeterminate]]:opacity-0 @3xl/controls:peer-has-[sl-checkbox[indeterminate]]:delay-75`,
+                    ],
+                  )}
+                >
+                  <span class="whitespace-nowrap text-sm text-neutral-500">
+                    ${msg("Filter by:")}
+                  </span>
+                  ${renderFilterControl()}
+                </div>`
+              : nothing}
+          </div>`
+        : nothing}
+      ${renderBulkActionsControl
+        ? html`<div
+            class=${clsx(
+              tw`fixed inset-x-2 bottom-3 z-10 hidden min-h-10 items-center gap-2 rounded-lg border border-neutral-300 bg-neutral-50 px-3.5 shadow`,
+              tw`has-[sl-checkbox[checked]]:flex @3xl/controls:has-[sl-checkbox[checked]]:hidden`,
+              tw`has-[sl-checkbox[indeterminate]]:flex @3xl/controls:has-[sl-checkbox[indeterminate]]:hidden`,
+            )}
+          >
+            ${renderBulkActionsControl()}
           </div>`
         : nothing}
     </div>

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

@@ -1674,7 +1674,7 @@ export class ArchivedItemDetail extends BtrixElement {
       );
       this.navigate.to(this.listUrl);
       this.notify.toast({
-        message: msg(`Successfully deleted crawl`),
+        message: msg(`Successfully deleted archived item.`),
         variant: "success",
         icon: "check2-circle",
         id: "crawl-stop-error",