From c2be1a27ce9b288d0932eb14b83f2357bd24a5bd Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Thu, 23 Jun 2022 16:35:03 -0700
Subject: [PATCH] Handle stopping state in UI (#269)

closes #262
---
 frontend/src/pages/archive/crawl-detail.ts |  6 +++++-
 frontend/src/pages/archive/crawls-list.ts  | 14 +++++++++-----
 frontend/src/pages/archive/types.ts        |  3 ++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/archive/crawl-detail.ts b/frontend/src/pages/archive/crawl-detail.ts
index 95ade4b4..22588bd5 100644
--- a/frontend/src/pages/archive/crawl-detail.ts
+++ b/frontend/src/pages/archive/crawl-detail.ts
@@ -63,7 +63,11 @@ export class CrawlDetail extends LiteElement {
   private get isActive(): boolean | null {
     if (!this.crawl) return null;
 
-    return this.crawl.state === "running" || this.crawl.state === "starting";
+    return (
+      this.crawl.state === "running" ||
+      this.crawl.state === "starting" ||
+      this.crawl.state === "stopping"
+    );
   }
 
   private get hasFiles(): boolean | null {
diff --git a/frontend/src/pages/archive/crawls-list.ts b/frontend/src/pages/archive/crawls-list.ts
index e143aa56..1c7d9c1c 100644
--- a/frontend/src/pages/archive/crawls-list.ts
+++ b/frontend/src/pages/archive/crawls-list.ts
@@ -30,8 +30,12 @@ const sortableFieldLabels = {
   fileSize_desc: msg("Largest Files"),
 };
 
-function isRunning(crawl: Crawl) {
-  return crawl.state === "running" || crawl.state === "starting";
+function isActive(crawl: Crawl) {
+  return (
+    crawl.state === "running" ||
+    crawl.state === "starting" ||
+    crawl.state === "stopping"
+  );
 }
 
 /**
@@ -279,7 +283,7 @@ export class CrawlsList extends LiteElement {
             ></sl-icon-button>
 
             <ul class="text-sm text-0-800 whitespace-nowrap" role="menu">
-              ${isRunning(crawl)
+              ${isActive(crawl)
                 ? html`
                     <li
                       class="p-2 hover:bg-zinc-100 cursor-pointer"
@@ -376,7 +380,7 @@ export class CrawlsList extends LiteElement {
                 ? "text-red-500"
                 : crawl.state === "complete"
                 ? "text-emerald-500"
-                : isRunning(crawl)
+                : isActive(crawl)
                 ? "text-purple-500"
                 : "text-zinc-300"}"
               style="font-size: 10px; vertical-align: 2px"
@@ -386,7 +390,7 @@ export class CrawlsList extends LiteElement {
           </div>
           <div>
             <div
-              class="whitespace-nowrap mb-1 capitalize${isRunning(crawl)
+              class="whitespace-nowrap mb-1 capitalize${isActive(crawl)
                 ? " motion-safe:animate-pulse"
                 : ""}"
             >
diff --git a/frontend/src/pages/archive/types.ts b/frontend/src/pages/archive/types.ts
index 6d8241fb..98141a09 100644
--- a/frontend/src/pages/archive/types.ts
+++ b/frontend/src/pages/archive/types.ts
@@ -4,7 +4,8 @@ type CrawlState =
   | "complete"
   | "failed"
   | "partial_complete"
-  | "timed_out";
+  | "timed_out"
+  | "stopping";
 
 export type Crawl = {
   id: string;