fix: Show correct max depth in settings (#1858)

Fixes https://github.com/webrecorder/browsertrix/issues/1626

frontend/src/components/ui/config-details.ts

@@ -13,6 +13,7 @@ import type { CrawlConfig, Seed, SeedConfig } from "@/pages/org/types";
 import type { Collection } from "@/types/collection";
 import { isApiError } from "@/utils/api";
 import type { AuthState } from "@/utils/AuthService";
+import { DEPTH_SUPPORTED_SCOPES } from "@/utils/crawler";
 import { humanizeSchedule } from "@/utils/cron";
 import LiteElement, { html } from "@/utils/LiteElement";
 
@@ -406,15 +407,15 @@ export class ConfigDetails extends LiteElement {
         true,
       )}
       ${when(
-        ["host", "domain", "custom", "any"].includes(
+        DEPTH_SUPPORTED_SCOPES.includes(
           primarySeedConfig!.scopeType || seedsConfig.scopeType!,
         ),
         () =>
           this.renderSetting(
             msg("Max Depth"),
-            primarySeedConfig?.depth
+            primarySeedConfig && primarySeedConfig.depth !== null
               ? msg(str`${primarySeedConfig.depth} hop(s)`)
-              : msg("None"),
+              : msg("Unlimited (default)"),
           ),
       )}
       ${this.renderSetting(

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

@@ -57,7 +57,7 @@ import type {
 } from "@/features/crawl-workflows/queue-exclusion-table";
 import { isApiError, type Detail } from "@/utils/api";
 import type { AuthState } from "@/utils/AuthService";
-import { DEFAULT_MAX_SCALE } from "@/utils/crawler";
+import { DEFAULT_MAX_SCALE, DEPTH_SUPPORTED_SCOPES } from "@/utils/crawler";
 import {
   getNextDate,
   getScheduleInterval,
@@ -135,8 +135,6 @@ type FormState = {
   crawlerChannel: string;
 };
 
-const DEPTH_SUPPORTED_SCOPES = ["prefix", "host", "domain", "custom", "any"];
-
 const getDefaultProgressState = (hasConfigId = false): ProgressState => {
   let activeTab: StepName = "crawlSetup";
   if (window.location.hash) {

frontend/src/utils/crawler.ts

@@ -31,6 +31,14 @@ export const inactiveCrawlStates: CrawlState[] = [
 
 export const DEFAULT_MAX_SCALE = 3;
 
+export const DEPTH_SUPPORTED_SCOPES = [
+  "prefix",
+  "host",
+  "domain",
+  "custom",
+  "any",
+];
+
 export function isActive(state: CrawlState | null) {
   return state && activeCrawlStates.includes(state);
 }