task: Display built-in behaviors as list (#2518)

- Displays built-in behaviors as single field in workflow settings
- Standardizes how "None" is displayed in workflow settings
- Refactors behavior names into enum

Author: SuaYoo

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

@@ -8,7 +8,13 @@ import capitalize from "lodash/fp/capitalize";
 import RegexColorize from "regex-colorize";
 
 import { BtrixElement } from "@/classes/BtrixElement";
-import type { CrawlConfig, Seed, SeedConfig } from "@/pages/org/types";
+import { none, notSpecified } from "@/layouts/empty";
+import {
+  Behavior,
+  type CrawlConfig,
+  type Seed,
+  type SeedConfig,
+} from "@/pages/org/types";
 import { labelFor } from "@/strings/crawl-workflows/labels";
 import scopeTypeLabel from "@/strings/crawl-workflows/scopeType";
 import sectionStrings from "@/strings/crawl-workflows/section";
@@ -162,22 +168,15 @@ export class ConfigDetails extends BtrixElement {
         heading: sectionStrings.behaviors,
         renderDescItems: (seedsConfig) => html`
           ${this.renderSetting(
-            labelFor.autoscrollBehavior,
-            seedsConfig?.behaviors &&
-              !seedsConfig.behaviors.includes("autoscroll")
-              ? msg("Disabled")
-              : html`<span class="text-neutral-400"
-                  >${msg("Enabled (default)")}</span
-                >`,
-          )}
-          ${this.renderSetting(
-            labelFor.autoclickBehavior,
-            seedsConfig?.behaviors &&
-              seedsConfig.behaviors.includes("autoclick")
-              ? msg("Enabled")
-              : html`<span class="text-neutral-400"
-                  >${msg("Disabled (default)")}</span
-                >`,
+            labelFor.behaviors,
+            [
+              seedsConfig?.behaviors?.includes(Behavior.AutoScroll) &&
+                labelFor.autoscrollBehavior,
+              seedsConfig?.behaviors?.includes(Behavior.AutoClick) &&
+                labelFor.autoclickBehavior,
+            ]
+              .filter((v) => v)
+              .join(", ") || none,
           )}
           ${this.renderSetting(
             labelFor.pageLoadTimeoutSeconds,
@@ -424,7 +423,7 @@ export class ConfigDetails extends BtrixElement {
                   )}
                 </ul>
               `
-            : msg("None"),
+            : none,
           true,
         ),
       )}
@@ -463,7 +462,7 @@ export class ConfigDetails extends BtrixElement {
                 })}
               </ul>
             `
-          : msg("None"),
+          : none,
         true,
       )}
       ${when(
@@ -477,7 +476,7 @@ export class ConfigDetails extends BtrixElement {
             </btrix-queue-exclusion-table>
           </div>
         `,
-        () => this.renderSetting(msg("Exclusions"), msg("None")),
+        () => this.renderSetting(msg("Exclusions"), none),
       )}
     `;
   };
@@ -490,11 +489,9 @@ export class ConfigDetails extends BtrixElement {
     } else if (typeof value === "boolean") {
       content = value ? msg("Yes") : msg("No");
     } else if (Array.isArray(value) && !value.length) {
-      content = html`<span class="text-neutral-400">${msg("None")}</span>`;
+      content = none;
     } else if (typeof value !== "number" && !value) {
-      content = html`<span class="text-neutral-400"
-        >${msg("Not specified")}</span
-      >`;
+      content = notSpecified;
     }
     return html`
       <btrix-desc-list-item label=${label} class=${breakAll ? "break-all" : ""}>

frontend/src/features/crawl-workflows/workflow-editor.ts

@@ -62,7 +62,12 @@ import { labelFor } from "@/strings/crawl-workflows/labels";
 import scopeTypeLabels from "@/strings/crawl-workflows/scopeType";
 import sectionStrings from "@/strings/crawl-workflows/section";
 import { AnalyticsTrackEvent } from "@/trackEvents";
-import { ScopeType, type Seed, type WorkflowParams } from "@/types/crawler";
+import {
+  Behavior,
+  ScopeType,
+  type Seed,
+  type WorkflowParams,
+} from "@/types/crawler";
 import type { UnderlyingFunction } from "@/types/utils";
 import { NewWorkflowOnlyScopeType } from "@/types/workflow";
 import { track } from "@/utils/analytics";
@@ -111,11 +116,10 @@ type ProgressState = {
   tabs: Tabs;
 };
 const DEFAULT_BEHAVIORS = [
-  "autoscroll",
-  "autoplay",
-  "autofetch",
-  "siteSpecific",
-];
+  Behavior.AutoPlay,
+  Behavior.AutoFetch,
+  Behavior.SiteSpecific,
+] as const;
 const formName = "newJobConfig" as const;
 const panelSuffix = "--panel" as const;
 
@@ -1182,7 +1186,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
 
   private renderBehaviors() {
     return html`
-      ${this.renderSectionHeading(msg("Built-in Behaviors"))}
+      ${this.renderSectionHeading(labelFor.behaviors)}
       ${inputCol(
         html`<sl-checkbox
           name="autoscrollBehavior"
@@ -2206,17 +2210,17 @@ https://archiveweb.page/images/${"logo.svg"}`}
   }
 
   private setBehaviors(): string {
-    let behaviors = (
-      this.formState.autoscrollBehavior
-        ? DEFAULT_BEHAVIORS
-        : DEFAULT_BEHAVIORS.slice(1)
-    ).join(",");
+    const behaviors: Behavior[] = [...DEFAULT_BEHAVIORS];
+
+    if (this.formState.autoscrollBehavior) {
+      behaviors.unshift(Behavior.AutoScroll);
+    }
 
     if (this.formState.autoclickBehavior) {
-      behaviors += ",autoclick";
+      behaviors.push(Behavior.AutoClick);
     }
 
-    return behaviors;
+    return behaviors.join(",");
   }
 
   private parseUrlListConfig(): Pick<

frontend/src/layouts/empty.ts

@@ -0,0 +1,11 @@
+import { html } from "lit";
+
+import { stringFor } from "@/strings/ui";
+
+export const notSpecified = html`<span class="text-neutral-400">
+  ${stringFor.notSpecified}
+</span>`;
+
+export const none = html`<span class="text-neutral-400">
+  ${stringFor.none}
+</span>`;

frontend/src/strings/crawl-workflows/labels.ts

@@ -1,6 +1,7 @@
 import { msg } from "@lit/localize";
 
 export const labelFor = {
+  behaviors: msg("Built-in Behaviors"),
   autoscrollBehavior: msg("Autoscroll"),
   autoclickBehavior: msg("Autoclick"),
   pageLoadTimeoutSeconds: msg("Page Load Limit"),

frontend/src/strings/ui.ts

@@ -1,8 +1,15 @@
 import { msg } from "@lit/localize";
 import { html, type TemplateResult } from "lit";
 
-export const noData = "--";
-export const notApplicable = msg("n/a");
+export const stringFor: Record<string, string> = {
+  noData: "--",
+  notApplicable: msg("n/a"),
+  notSpecified: msg("Not specified"),
+  none: msg("None"),
+};
+
+export const noData = stringFor.noData;
+export const notApplicable = stringFor.notApplicable;
 
 // TODO Refactor all generic confirmation messages to use utility
 export const deleteConfirmation = (name: string | TemplateResult) =>

frontend/src/types/crawler.ts

@@ -10,6 +10,14 @@ export enum ScopeType {
   Any = "any",
 }
 
+export enum Behavior {
+  AutoScroll = "autoscroll",
+  AutoClick = "autoclick",
+  AutoPlay = "autoplay",
+  AutoFetch = "autofetch",
+  SiteSpecific = "siteSpecific",
+}
+
 export type Seed = {
   url: string;
   scopeType: ScopeType | undefined;

frontend/src/utils/workflow.ts

@@ -5,6 +5,7 @@ import { getAppSettings } from "./app";
 
 import type { Tags } from "@/components/ui/tag-input";
 import {
+  Behavior,
   ScopeType,
   type Profile,
   type Seed,
@@ -284,10 +285,10 @@ export function getInitialFormState(params: {
     pageLimit:
       params.initialWorkflow.config.limit ?? defaultFormState.pageLimit,
     autoscrollBehavior: params.initialWorkflow.config.behaviors
-      ? params.initialWorkflow.config.behaviors.includes("autoscroll")
+      ? params.initialWorkflow.config.behaviors.includes(Behavior.AutoScroll)
       : defaultFormState.autoscrollBehavior,
     autoclickBehavior: params.initialWorkflow.config.behaviors
-      ? params.initialWorkflow.config.behaviors.includes("autoclick")
+      ? params.initialWorkflow.config.behaviors.includes(Behavior.AutoClick)
       : defaultFormState.autoclickBehavior,
     userAgent:
       params.initialWorkflow.config.userAgent ?? defaultFormState.userAgent,