fix: Update links to running crawls (#2378)

- Updates links to running crawls to redirect to workflow "Watch" tab
- Removes unused "Jump to crawl" superadmin widgets
- Refactors archived item component to remove references to active
crawls

frontend/src/index.ts

@@ -561,7 +561,6 @@ export class App extends BtrixElement {
                     @click=${this.navigate.link}
                     >${msg("Running Crawls")}</a
                   >
-                  <div class="hidden md:block">${this.renderFindCrawl()}</div>
                 </div>
               `
             : nothing}
@@ -907,57 +906,6 @@ export class App extends BtrixElement {
     ></btrix-not-found>`;
   }
 
-  private renderFindCrawl() {
-    return html`
-      <sl-dropdown
-        @sl-after-show=${(e: Event) => {
-          (e.target as HTMLElement).querySelector("sl-input")?.focus();
-        }}
-        @sl-after-hide=${(e: Event) => {
-          (e.target as HTMLElement).querySelector("sl-input")!.value = "";
-        }}
-        hoist
-      >
-        <button
-          slot="trigger"
-          class="font-medium text-primary-700 hover:text-primary"
-        >
-          ${msg("Jump to Crawl")}
-        </button>
-
-        <div class="p-2">
-          <form
-            @submit=${(e: SubmitEvent) => {
-              e.preventDefault();
-              const id = new FormData(e.target as HTMLFormElement).get(
-                "crawlId",
-              ) as string;
-              this.routeTo(`/crawls/crawl/${id}#watch`);
-              void (e.target as HTMLFormElement).closest("sl-dropdown")?.hide();
-            }}
-          >
-            <div class="flex flex-wrap items-center">
-              <div class="w-90 mr-2">
-                <sl-input
-                  size="small"
-                  name="crawlId"
-                  placeholder=${msg("Enter Crawl ID")}
-                  required
-                ></sl-input>
-              </div>
-              <div class="grow-0">
-                <sl-button size="small" variant="neutral" type="submit">
-                  <sl-icon slot="prefix" name="arrow-right-circle"></sl-icon>
-                  ${msg("Go")}</sl-button
-                >
-              </div>
-            </div>
-          </form>
-        </div>
-      </sl-dropdown>
-    `;
-  }
-
   private showUserGuide(pathName?: string) {
     const iframe = this.userGuideDrawer.querySelector("iframe");
 

frontend/src/pages/admin.ts

@@ -132,37 +132,6 @@ export class Admin extends BtrixElement {
 
   private renderAdminOrgs() {
     return html`
-      <section class="mb-5 rounded-lg border bg-white p-4 md:p-6">
-        <form
-          @submit=${(e: SubmitEvent) => {
-            const formData = new FormData(e.target as HTMLFormElement);
-            const id = formData.get("crawlId");
-            this.navigate.to(`/crawls/crawl/${id?.toString()}`);
-          }}
-        >
-          <div class="flex flex-wrap items-center">
-            <div
-              class="mr-8 w-full grow-0 whitespace-nowrap text-lg font-medium md:w-min"
-            >
-              ${msg("Go to Crawl")}
-            </div>
-            <div class="mt-2 grow md:mr-2 md:mt-0">
-              <sl-input
-                name="crawlId"
-                placeholder=${msg("Enter Crawl ID")}
-                required
-              ></sl-input>
-            </div>
-            <div class="mt-2 grow-0 text-right md:mt-0">
-              <sl-button variant="neutral" type="submit">
-                <sl-icon slot="suffix" name="arrow-right"></sl-icon>
-                ${msg("Go")}</sl-button
-              >
-            </div>
-          </div>
-        </form>
-      </section>
-
       <div class="grid grid-cols-3 gap-6">
         <div class="col-span-3 md:col-span-2">
           <section>

frontend/src/pages/crawls.ts

@@ -12,7 +12,7 @@ import { CrawlStatus } from "@/features/archived-items/crawl-status";
 import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
 import type { Crawl } from "@/types/crawler";
 import type { CrawlState } from "@/types/crawlState";
-import { activeCrawlStates } from "@/utils/crawler";
+import { activeCrawlStates, isActive } from "@/utils/crawler";
 
 type SortField = "started" | "firstSeed" | "fileSize";
 type SortDirection = "asc" | "desc";
@@ -68,16 +68,12 @@ export class Crawls extends BtrixElement {
   // Use to cancel requests
   private getCrawlsController: AbortController | null = null;
 
-  protected async willUpdate(
+  protected willUpdate(
     changedProperties: PropertyValues<this> & Map<string, unknown>,
   ) {
     if (changedProperties.has("crawlId") && this.crawlId) {
       // Redirect to org crawl page
-      await this.fetchWorkflowId();
+      void this.fetchWorkflowId();
-      const slug = this.slugLookup[this.crawl!.oid];
-      this.navigate.to(
-        `/orgs/${slug}/workflows/${this.crawl?.cid}/crawls/${this.crawlId}`,
-      );
     } else {
       if (
         changedProperties.has("filterBy") ||
@@ -86,6 +82,16 @@ export class Crawls extends BtrixElement {
         void this.fetchCrawls();
       }
     }
+    if (changedProperties.has("crawl") && this.crawl) {
+      const slug = this.slugLookup[this.crawl.oid];
+      if (isActive(this.crawl)) {
+        this.navigate.to(`/orgs/${slug}/workflows/${this.crawl.cid}#cid`);
+      } else {
+        this.navigate.to(
+          `/orgs/${slug}/workflows/${this.crawl.cid}/crawls/${this.crawlId}`,
+        );
+      }
+    }
   }
 
   firstUpdated() {
@@ -283,14 +289,14 @@ export class Crawls extends BtrixElement {
   }
 
   private readonly renderCrawlItem = (crawl: Crawl) => {
-    const crawlPath = `/orgs/${this.slugLookup[crawl.oid]}/workflows/${crawl.cid}/crawls/${
+    const crawlPath = `/orgs/${this.slugLookup[crawl.oid]}/workflows/${crawl.cid}`;
-      crawl.id
-    }`;
     return html`
-      <btrix-crawl-list-item href=${crawlPath} .crawl=${crawl}>
+      <btrix-crawl-list-item href=${`${crawlPath}#watch`} .crawl=${crawl}>
         <sl-menu slot="menu">
-          <sl-menu-item @click=${() => this.navigate.to(`${crawlPath}#config`)}>
+          <sl-menu-item
-            ${msg("View Crawl Settings")}
+            @click=${() => this.navigate.to(`${crawlPath}#settings`)}
+          >
+            ${msg("View Workflow Settings")}
           </sl-menu-item>
         </sl-menu>
       </btrix-crawl-list-item>

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -141,11 +141,6 @@ export class ArchivedItemDetail extends BtrixElement {
 
   private timerId?: number;
 
-  private get isActive(): boolean {
-    if (!this.item || this.item.type !== "crawl") return false;
-    return isActive(this.item);
-  }
-
   private get hasFiles(): boolean | null {
     if (!this.item) return null;
     if (!this.item.resources) return false;
@@ -203,28 +198,40 @@ export class ArchivedItemDetail extends BtrixElement {
       }
     }
 
-    // If item is a crawl and workflow id isn't set, redirect to item page with workflow prefix
     if (
-      this.workflowId === "" &&
       this.itemType === "crawl" &&
       changedProperties.has("item") &&
       this.item
     ) {
-      if (this.qaTab) {
+      if (this.workflowId) {
-        // QA review open
+        if (this.item.type === "crawl" && isActive(this.item)) {
-        this.navigate.to(
+          // Items can technically be "running" on the backend, but only
-          `${this.navigate.orgBasePath}/workflows/${this.item.cid}/crawls/${this.item.id}/review/${this.qaTab}${location.search}`,
+          // workflows should be considered running by the frontend
-          undefined,
+          this.navigate.to(
-          undefined,
+            `${this.navigate.orgBasePath}/workflows/${this.item.cid}#watch`,
-          true,
+            undefined,
-        );
+            undefined,
+            true,
+          );
+        }
       } else {
-        this.navigate.to(
+        // If item is a crawl and workflow ID isn't set, redirect to item page with workflow prefix
-          `${this.navigate.orgBasePath}/workflows/${this.item.cid}/crawls/${this.item.id}#${this.activeTab}`,
+        if (this.qaTab) {
-          undefined,
+          // QA review open
-          undefined,
+          this.navigate.to(
-          true,
+            `${this.navigate.orgBasePath}/workflows/${this.item.cid}/crawls/${this.item.id}/review/${this.qaTab}${location.search}`,
-        );
+            undefined,
+            undefined,
+            true,
+          );
+        } else {
+          this.navigate.to(
+            `${this.navigate.orgBasePath}/workflows/${this.item.cid}/crawls/${this.item.id}#${this.activeTab}`,
+            undefined,
+            undefined,
+            true,
+          );
+        }
       }
     }
   }
@@ -387,22 +394,12 @@ export class ArchivedItemDetail extends BtrixElement {
                   ${when(
                     this.isCrawler,
                     () => html`
-                      <sl-tooltip
+                      <sl-icon-button
-                        content=${msg(
+                        class="text-base"
-                          "Metadata cannot be edited while crawl is running.",
+                        name="pencil"
-                        )}
+                        @click=${this.openMetadataEditor}
-                        ?disabled=${!this.isActive}
+                        label=${msg("Edit Metadata")}
-                      >
+                      ></sl-icon-button>
-                        <sl-icon-button
-                          class=${`text-base${
-                            this.isActive ? " cursor-not-allowed" : ""
-                          }`}
-                          name="pencil"
-                          @click=${this.openMetadataEditor}
-                          label=${msg("Edit Metadata")}
-                          ?disabled=${this.isActive}
-                        ></sl-icon-button>
-                      </sl-tooltip>
                     `,
                   )}
                 `,
@@ -596,24 +593,6 @@ export class ArchivedItemDetail extends BtrixElement {
       <header class="mb-3 flex flex-wrap gap-2 border-b pb-3">
         <btrix-detail-page-title .item=${this.item}></btrix-detail-page-title>
         <div class="ml-auto flex flex-wrap justify-end gap-2">
-          ${this.isActive
-            ? html`
-                <sl-button-group>
-                  <sl-button size="small" @click=${this.stop}>
-                    <sl-icon name="dash-square" slot="prefix"></sl-icon>
-                    <span> ${msg("Stop")} </span>
-                  </sl-button>
-                  <sl-button size="small" @click=${this.cancel}>
-                    <sl-icon
-                      class="text-danger"
-                      name="trash3"
-                      slot="prefix"
-                    ></sl-icon>
-                    <span class="text-danger"> ${msg("Cancel")} </span>
-                  </sl-button>
-                </sl-button-group>
-              `
-            : ""}
           ${this.isCrawler
             ? this.item
               ? this.renderMenu()
@@ -634,9 +613,7 @@ export class ArchivedItemDetail extends BtrixElement {
     return html`
       <sl-dropdown placement="bottom-end" distance="4" hoist>
         <sl-button slot="trigger" size="small" caret
-          >${this.isActive
+          >${msg("Actions")}</sl-button
-            ? html`<sl-icon name="three-dots"></sl-icon>`
-            : msg("Actions")}</sl-button
         >
         <sl-menu>
           ${when(
@@ -696,8 +673,7 @@ export class ArchivedItemDetail extends BtrixElement {
             `,
           )}
           ${when(
-            this.isCrawler &&
+            this.isCrawler,
-              (this.item.type !== "crawl" || !isActive(this.item)),
             () => html`
               <sl-divider></sl-divider>
               <sl-menu-item
@@ -768,9 +744,7 @@ export class ArchivedItemDetail extends BtrixElement {
             </div>`
           : html`
               <p class="p-4 text-sm text-neutral-400">
-                ${this.isActive
+                ${msg("No files to replay.")}
-                  ? msg("No files yet.")
-                  : msg("No files to replay.")}
               </p>
             `
       }
@@ -1007,9 +981,7 @@ ${this.item?.description}
           `
         : html`
             <p class="text-sm text-neutral-400">
-              ${this.isActive
+              ${msg("No files to download.")}
-                ? msg("No files yet.")
-                : msg("No files to download.")}
             </p>
           `}
     `;

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

@@ -918,7 +918,11 @@ export class WorkflowDetail extends BtrixElement {
               this.crawls!.items.map(
                 (crawl: Crawl) =>
                   html` <btrix-crawl-list-item
-                    href=${`${this.navigate.orgBasePath}/workflows/${this.workflowId}/crawls/${crawl.id}`}
+                    href=${ifDefined(
+                      isActive(crawl)
+                        ? undefined
+                        : `${this.navigate.orgBasePath}/workflows/${this.workflowId}/crawls/${crawl.id}`,
+                    )}
                     .crawl=${crawl}
                   >
                     ${when(