frontend: fixes for queue / exclusions: (#1076)

- fix 'Edit Crawler Instances' not showing up when crawl running
- urlencode regex params to properly encode '+'
- catch server-side regex error, display 'Invalid Regex'

frontend/src/components/crawl-queue.ts

@@ -193,18 +193,24 @@ export class CrawlQueue extends LiteElement {
       this.timerId = window.setTimeout(() => {
         this.fetchQueue();
       }, POLL_INTERVAL_SECONDS * 1000);
-    } catch (e) {
-      this.notify({
-        message: msg("Sorry, couldn't fetch crawl queue at this time."),
-        variant: "danger",
-        icon: "exclamation-octagon",
-      });
+    } catch (e: any) {
+      if (e.message !== "invalid_regex") {
+        this.notify({
+          message: msg("Sorry, couldn't fetch crawl queue at this time."),
+          variant: "danger",
+          icon: "exclamation-octagon",
+        });
+      }
     }
   }
 
   private async getQueue(): Promise<ResponseData> {
+    const offset = "0";
+    const count = this.pageSize.toString();
+    const regex = this.regex;
+    const params = new URLSearchParams({ offset, count, regex });
     const data: ResponseData = await this.apiFetch(
-      `/orgs/${this.orgId}/crawls/${this.crawlId}/queue?offset=0&count=${this.pageSize}&regex=${this.regex}`,
+      `/orgs/${this.orgId}/crawls/${this.crawlId}/queue?${params}`,
       this.authState!
     );
 

frontend/src/components/exclusion-editor.ts

@@ -153,8 +153,9 @@ export class ExclusionEditor extends LiteElement {
     const { regex } = e.detail;
 
     try {
+      const params = new URLSearchParams({ regex });
       const data = await this.apiFetch(
-        `/orgs/${this.orgId}/crawls/${this.crawlId}/exclusions?regex=${regex}`,
+        `/orgs/${this.orgId}/crawls/${this.crawlId}/exclusions?${params}`,
         this.authState!,
         {
           method: "DELETE",
@@ -195,20 +196,28 @@ export class ExclusionEditor extends LiteElement {
     try {
       const { matched } = await this.getQueueMatches();
       this.matchedURLs = matched;
-    } catch (e) {
-      this.notify({
-        message: msg("Sorry, couldn't fetch pending exclusions at this time."),
-        variant: "danger",
-        icon: "exclamation-octagon",
-      });
+    } catch (e: any) {
+      if (e.message === "invalid_regex") {
+        this.exclusionFieldErrorMessage = msg("Invalid Regex");
+      } else {
+        this.notify({
+          message: msg(
+            "Sorry, couldn't fetch pending exclusions at this time."
+          ),
+          variant: "danger",
+          icon: "exclamation-octagon",
+        });
+      }
     }
 
     this.isLoading = false;
   }
 
   private async getQueueMatches(): Promise<ResponseData> {
+    const regex = this.regex;
+    const params = new URLSearchParams({ regex });
     const data: ResponseData = await this.apiFetch(
-      `/orgs/${this.orgId}/crawls/${this.crawlId}/queueMatchAll?regex=${this.regex}`,
+      `/orgs/${this.orgId}/crawls/${this.crawlId}/queueMatchAll?${params}`,
       this.authState!
     );
 
@@ -221,8 +230,9 @@ export class ExclusionEditor extends LiteElement {
     const { regex, onSuccess } = e.detail;
 
     try {
+      const params = new URLSearchParams({ regex });
       const data = await this.apiFetch(
-        `/orgs/${this.orgId}/crawls/${this.crawlId}/exclusions?regex=${regex}`,
+        `/orgs/${this.orgId}/crawls/${this.crawlId}/exclusions?${params}`,
         this.authState!,
         {
           method: "POST",
@@ -248,6 +258,8 @@ export class ExclusionEditor extends LiteElement {
     } catch (e: any) {
       if (e.message === "exclusion_already_exists") {
         this.exclusionFieldErrorMessage = msg("Exclusion already exists");
+      } else if (e.message === "invalid_regex") {
+        this.exclusionFieldErrorMessage = msg("Invalid Regex");
       } else {
         this.notify({
           message: msg("Sorry, couldn't add exclusion at this time."),

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

@@ -486,11 +486,11 @@ export class WorkflowDetail extends LiteElement {
       return html` <h3>${this.tabLabels[this.activePanel]}</h3>
         <sl-button
           size="small"
-          ?disabled=${this.workflow?.isCrawlRunning}
+          ?disabled=${!this.workflow?.isCrawlRunning}
           @click=${() => (this.openDialogName = "scale")}
         >
           <sl-icon name="plus-slash-minus" slot="prefix"></sl-icon>
-          <span> ${msg("Edit Instances")} </span>
+          <span> ${msg("Edit Crawler Instances")} </span>
         </sl-button>`;
     }