From 13d5ab7d2bc2a574a896ef6a89597b0643b5650b Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Fri, 18 Nov 2022 14:47:40 -0800
Subject: [PATCH] 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      | 11 +++++++++++
 frontend/src/components/queue-exclusion-table.ts     | 10 ++++++----
 frontend/src/pages/archive/crawl-templates-detail.ts |  2 +-
 frontend/src/pages/archive/crawl-templates-new.ts    |  6 +++---
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/queue-exclusion-form.ts b/frontend/src/components/queue-exclusion-form.ts
index c666ddc2..05125c5b 100644
--- a/frontend/src/components/queue-exclusion-form.ts
+++ b/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();
+  }
 }
diff --git a/frontend/src/components/queue-exclusion-table.ts b/frontend/src/components/queue-exclusion-table.ts
index a8b15586..9b60ea92 100644
--- a/frontend/src/components/queue-exclusion-table.ts
+++ b/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) {
-    this.exclusionToRemove = exclusion.value;
+  private removeExclusion({ value, type }: Exclusion) {
+    this.exclusionToRemove = value;
 
     this.dispatchEvent(
       new CustomEvent("on-remove", {
-        detail: exclusion,
+        detail: {
+          regex: type == "text" ? regexEscape(value) : value,
+        },
       }) as ExclusionRemoveEvent
     );
   }
diff --git a/frontend/src/pages/archive/crawl-templates-detail.ts b/frontend/src/pages/archive/crawl-templates-detail.ts
index 9e70a243..df2bedab 100644
--- a/frontend/src/pages/archive/crawl-templates-detail.ts
+++ b/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>
diff --git a/frontend/src/pages/archive/crawl-templates-new.ts b/frontend/src/pages/archive/crawl-templates-new.ts
index 1480caec..dfa2f3f9 100644
--- a/frontend/src/pages/archive/crawl-templates-new.ts
+++ b/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;
-    if (!this.exclusions || !value) return;
-    this.exclusions = this.exclusions.filter((v) => v !== value);
+    const { regex } = e.detail;
+    if (!this.exclusions || !regex) return;
+    this.exclusions = this.exclusions.filter((v) => v !== regex);
   }
 
   private handleAddRegex(e: ExclusionAddEvent) {