frontend crawl stopping improvements (#836) (#838)

* frontend crawl stopping improvements (#836)
- support new backend 'stopping' property
- for now, keep 'stopping' indicator state when crawl is running but stopping set to true

frontend/src/components/crawl-status.ts

@@ -15,6 +15,9 @@ export class CrawlStatus extends LitElement {
   @property({ type: Boolean })
   hideLabel = false;
 
+  @property({ type: Boolean })
+  stopping = false;
+
   static styles = [
     animatePulse,
     css`
@@ -173,7 +176,8 @@ export class CrawlStatus extends LitElement {
   }
 
   render() {
-    const { icon, label } = CrawlStatus.getContent(this.state);
+    const state = this.stopping && this.state === "running" ? "stopping" : this.state;
+    const { icon, label } = CrawlStatus.getContent(state);
     if (this.hideLabel) {
       return html`<div class="icon-only">
         <sl-tooltip content=${label}

frontend/src/components/workflow-list.ts

@@ -297,6 +297,7 @@ export class WorkflowListItem extends LitElement {
                   state=${workflow.currCrawlState ||
                   workflow.lastCrawlState ||
                   msg("No Crawls Yet")}
+                  ?stopping=${workflow.currCrawlStopping}
                 ></btrix-crawl-status>
               `
           )}

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

@@ -398,7 +398,7 @@ export class WorkflowDetail extends LiteElement {
             @click=${() => this.stop()}
             ?disabled=${!this.workflow?.currCrawlId ||
             this.isCancelingOrStoppingCrawl ||
-            this.workflow?.currCrawlState === "stopping"}
+            this.workflow?.currCrawlStopping}
           >
             <sl-icon name="dash-circle" slot="prefix"></sl-icon>
             <span>${msg("Stop")}</span>
@@ -480,7 +480,7 @@ export class WorkflowDetail extends LiteElement {
             () => html`
               <sl-menu-item
                 @click=${() => this.stop()}
-                ?disabled=${workflow.currCrawlState === "stopping" ||
+                ?disabled=${workflow.currCrawlStopping ||
                 this.isCancelingOrStoppingCrawl}
               >
                 <sl-icon name="dash-circle" slot="prefix"></sl-icon>
@@ -586,6 +586,7 @@ export class WorkflowDetail extends LiteElement {
               state=${this.workflow!.currCrawlState ||
               this.workflow!.lastCrawlState ||
               msg("No Crawls Yet")}
+              ?stopping=${this.workflow?.currCrawlStopping}
             ></btrix-crawl-status>
           `
         )}
@@ -796,7 +797,7 @@ export class WorkflowDetail extends LiteElement {
     const isStarting = this.workflow.currCrawlState === "starting";
     const isWaiting = this.workflow.currCrawlState === "waiting";
     const isRunning = this.workflow.currCrawlState === "running";
-    const isStopping = this.workflow.currCrawlState === "stopping";
+    const isStopping = this.workflow.currCrawlStopping;
     const authToken = this.authState.headers.Authorization.split(" ")[1];
 
     return html`

frontend/src/pages/org/workflows-list.ts

@@ -361,7 +361,7 @@ export class WorkflowsList extends LiteElement {
         () => html`
           <sl-menu-item
             @click=${() => this.stop(workflow.currCrawlId)}
-            ?disabled=${workflow.currCrawlState === "stopping"}
+            ?disabled=${workflow.currCrawlStopping}
           >
             <sl-icon name="dash-circle" slot="prefix"></sl-icon>
             ${msg("Stop Crawl")}

frontend/src/types/crawler.ts

@@ -71,6 +71,7 @@ export type Workflow = CrawlConfig & {
   currCrawlState: CrawlState | null;
   currCrawlStartTime: string | null;
   currCrawlSize: number | null;
+  currCrawlStopping: boolean | null;
   totalSize: string | null;
   inactive: boolean;
   firstSeed: string;
@@ -119,4 +120,5 @@ export type Crawl = CrawlConfig & {
   notes: string | null;
   firstSeed: string;
   seedCount: number;
+  stopping: boolean;
 };