From 0aaae171106fbf6d7fd9367fa029373b789dfea0 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@webrecorder.org>
Date: Mon, 7 Apr 2025 19:19:36 -0700
Subject: [PATCH] fix: Enable saving workflow with default select links (#2537)

Allows users to save a workflow with an empty "Link Selectors" table,
using the default value. This is aligned with how we use default values
for other empty inputs, and prevents a case where a user may
inadvertently removed a row and now cannot save a workflow with the
default link selector.

Also updates the info text to show the default value.
---
 .../crawl-workflows/link-selector-table.ts    | 10 +++----
 .../crawl-workflows/workflow-editor.ts        | 26 +++++++++++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/crawl-workflows/link-selector-table.ts b/frontend/src/features/crawl-workflows/link-selector-table.ts
index e3cf7a94..40d6fe06 100644
--- a/frontend/src/features/crawl-workflows/link-selector-table.ts
+++ b/frontend/src/features/crawl-workflows/link-selector-table.ts
@@ -12,7 +12,7 @@ import type { SyntaxInput } from "@/components/ui/syntax-input";
 import type { SeedConfig } from "@/types/crawler";
 import { tw } from "@/utils/tailwind";
 
-const SELECTOR_DELIMITER = "->" as const;
+export const SELECTOR_DELIMITER = "->" as const;
 const emptyCells = ["", ""];
 
 /**
@@ -153,8 +153,8 @@ export class LinkSelectorTable extends BtrixElement {
                 class="flex-1"
                 value=${sel}
                 language="css"
-                placeholder="Enter selector"
-                required
+                placeholder=${msg("Enter selector")}
+                ?required=${Boolean(attr)}
                 @sl-change=${(e: CustomEvent) => {
                   const el = e.currentTarget as SyntaxInput;
                   const value = el.input?.value.trim() || "";
@@ -197,8 +197,8 @@ export class LinkSelectorTable extends BtrixElement {
                 class="flex-1"
                 value=${attr}
                 language="xml"
-                placeholder="Enter attribute"
-                required
+                placeholder=${msg("Enter attribute")}
+                ?required=${Boolean(sel)}
                 @sl-change=${(e: CustomEvent) => {
                   const el = e.currentTarget as SyntaxInput;
                   const value = el.input?.value.trim() || "";
diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 6157d087..a4ac83c2 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -33,7 +33,10 @@ import isEqual from "lodash/fp/isEqual";
 import throttle from "lodash/fp/throttle";
 import uniq from "lodash/fp/uniq";
 
-import type { LinkSelectorTable } from "./link-selector-table";
+import {
+  SELECTOR_DELIMITER,
+  type LinkSelectorTable,
+} from "./link-selector-table";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type {
@@ -1131,6 +1134,15 @@ https://archiveweb.page/images/${"logo.svg"}`}
   private renderLinkSelectors() {
     const selectors = this.formState.selectLinks;
     const isCustom = !isEqual(defaultFormState.selectLinks, selectors);
+    const [defaultSel, defaultAttr] =
+      DEFAULT_SELECT_LINKS[0].split(SELECTOR_DELIMITER);
+    const defaultValue = html`<span
+      class="inline-flex items-center gap-0.5 rounded border px-1"
+    >
+      <btrix-code language="css" value=${defaultSel}></btrix-code
+      ><code class="text-neutral-400">${SELECTOR_DELIMITER}</code
+      ><btrix-code language="xml" value=${defaultAttr}></btrix-code>
+    </span>`;
 
     return html`
       <div class="col-span-5">
@@ -1151,7 +1163,17 @@ https://archiveweb.page/images/${"logo.svg"}`}
                 }}
               ></btrix-link-selector-table>`,
             )}
-            ${this.renderHelpTextCol(infoTextStrings["selectLinks"], false)}
+            ${this.renderHelpTextCol(
+              html`
+                ${infoTextStrings["selectLinks"]}
+                <br /><br />
+                ${msg(
+                  html`If none are specified, the crawler will default to
+                  ${defaultValue}.`,
+                )}
+              `,
+              false,
+            )}
           </div>
         </btrix-details>
       </div>