Fix exclusion dropdown & removal in crawl config edit (#372)

* fix dialog closing on regex

* fix unable to delete regex with same text

frontend/src/components/queue-exclusion-form.ts

@@ -81,6 +81,8 @@ export class QueueExclusionForm extends LiteElement {
               placeholder=${msg("Select Type")}
               size="small"
               .value=${this.selectValue}
+              @sl-hide=${this.stopProp}
+              @sl-after-hide=${this.stopProp}
               @sl-select=${(e: any) => {
                 this.selectValue = e.target.value;
               }}
@@ -223,4 +225,13 @@ export class QueueExclusionForm extends LiteElement {
       }) as ExclusionAddEvent
     );
   }
+
+  /**
+   * Stop propgation of sl-select events.
+   * Prevents bug where sl-dialog closes when dropdown closes
+   * https://github.com/shoelace-style/shoelace/issues/170
+   */
+  private stopProp(e: CustomEvent) {
+    e.stopPropagation();
+  }
 }

frontend/src/components/queue-exclusion-table.ts

@@ -9,7 +9,7 @@ import { regexEscape } from "../utils/string";
 import type { Exclusion } from "./queue-exclusion-form";
 
 export type ExclusionRemoveEvent = CustomEvent<{
-  value: string;
+  regex: string;
 }>;
 
 /**
@@ -205,12 +205,14 @@ export class QueueExclusionTable extends LiteElement {
     return [typeColClass, valueColClass, actionColClass];
   }
 
-  private removeExclusion(exclusion: Exclusion) {
+  private removeExclusion({ value, type }: Exclusion) {
-    this.exclusionToRemove = exclusion.value;
+    this.exclusionToRemove = value;
 
     this.dispatchEvent(
       new CustomEvent("on-remove", {
-        detail: exclusion,
+        detail: {
+          regex: type == "text" ? regexEscape(value) : value,
+        },
       }) as ExclusionRemoveEvent
     );
   }

frontend/src/pages/archive/crawl-templates-detail.ts

@@ -1062,7 +1062,7 @@ export class CrawlTemplatesDetail extends LiteElement {
         editable
         @on-remove=${(e: ExclusionRemoveEvent) => {
           if (!this.exclusions) return;
-          const { value } = e.detail;
+          const { regex: value } = e.detail;
           this.exclusions = this.exclusions.filter((v) => v !== value);
         }}
       ></btrix-queue-exclusion-table>

frontend/src/pages/archive/crawl-templates-new.ts

@@ -537,9 +537,9 @@ export class CrawlTemplatesNew extends LiteElement {
   }
 
   private handleRemoveRegex(e: ExclusionRemoveEvent) {
-    const { value } = e.detail;
+    const { regex } = e.detail;
-    if (!this.exclusions || !value) return;
+    if (!this.exclusions || !regex) return;
-    this.exclusions = this.exclusions.filter((v) => v !== value);
+    this.exclusions = this.exclusions.filter((v) => v !== regex);
   }
 
   private handleAddRegex(e: ExclusionAddEvent) {