Minor Workflow Creator UX Changes (#1267)

- Adds `position: sticky` to the workflow creator / editor controls to
affix them to the bottom of the screen, they are now always visible!
- Renames "Extra URLs in Scope" to "Extra URL Prefixes in Scope"
- Updates documentation accordingly
- Adjusts casing for checkboxes
- Adds the multiplication sign to the crawler instances settings to
better communicate that they are increases in scale and not arbitrary
numbers.

docs/user-guide/workflow-setup.md

@@ -62,7 +62,7 @@ You must specify the protocol (likely `http://` or `https://`) as a part of the
 :   This scope will crawl all pages on the domain and any subdomains found. If `example.com` is set as the _Crawl Start URL_, both pages on `example.com` and `subdomain.example.com` will be crawled.
 
 `Custom Page Prefix`
-:   This scope will crawl all pages that begin with the _Crawl Start URL_ as well as pages from any URL that begin with the URLs listed in `Extra URLs in Scope`
+:   This scope will crawl all pages that begin with the _Crawl Start URL_ as well as pages from any URL that begin with the URLs listed in `Extra URL Prefixes in Scope`
 
 ### Max Depth
 
@@ -70,7 +70,7 @@ You must specify the protocol (likely `http://` or `https://`) as a part of the
 
 Only shown with a _Start URL Scope_ of `Pages on This Domain` and above, the _Max Depth_ setting instructs the crawler to stop visiting new links past a specified depth.
 
-### Extra URLs in Scope
+### Extra URL Prefixes in Scope
 
 `Seeded Crawl`{ .badge-orange }
 

frontend/src/components/config-details.ts

@@ -188,7 +188,10 @@ export class ConfigDetails extends LiteElement {
             msg("Crawl Size Limit"),
             renderSize(crawlConfig?.maxCrawlSize)
           )}
-          ${this.renderSetting(msg("Crawler Instances"), crawlConfig?.scale)}
+          ${this.renderSetting(
+            msg("Crawler Instances"),
+            crawlConfig?.scale ? `${crawlConfig.scale}×` : ""
+          )}
         </btrix-desc-list>
       </section>
       <section id="browser-settings" class="mb-8">
@@ -330,7 +333,7 @@ export class ConfigDetails extends LiteElement {
         ]
       )}
       ${this.renderSetting(
-        msg("Extra URLs in Scope"),
+        msg("Extra URL Prefixes in Scope"),
         includeUrlList?.length
           ? html`
               <ul>

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

@@ -1213,15 +1213,15 @@ export class WorkflowDetail extends LiteElement {
     const scaleOptions = [
       {
         value: 1,
-        label: "1",
+        label: "1×",
       },
       {
         value: 2,
-        label: "2",
+        label: "2×",
       },
       {
         value: 3,
-        label: "3",
+        label: "3×",
       },
     ];
 

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

@@ -308,9 +308,9 @@ export class CrawlConfigEditor extends LiteElement {
     FormState["scheduleType"],
     string
   > = {
-    date: msg("Run on a Specific Date & Time"),
+    date: msg("Run on a specific date & time"),
-    cron: msg("Run on a Recurring Basis"),
+    cron: msg("Run on a recurring basis"),
-    none: msg("No Schedule"),
+    none: msg("No schedule"),
   };
 
   private readonly scheduleFrequencyLabels: Record<
@@ -728,10 +728,7 @@ export class CrawlConfigEditor extends LiteElement {
     return html`
       <div class="flex flex-col h-full min-h-[21rem]">
         <div
-          class="flex-1 p-6 grid grid-cols-5 gap-4 border rounded-lg ${!this
+          class="flex-1 p-6 grid grid-cols-5 gap-4 border rounded-lg border-b-0 rounded-b-none"
-            .configId && !isLast
-            ? "border-b-0 rounded-b-none"
-            : "mb-4"}"
         >
           ${content}
           ${when(this.serverError, () =>
@@ -748,7 +745,7 @@ export class CrawlConfigEditor extends LiteElement {
     if (this.configId) {
       return html`
         <footer
-          class="px-6 py-4 flex gap-2 items-center justify-end border rounded-lg"
+          class="px-6 py-4 flex gap-2 items-center justify-end border rounded-b-lg sticky bottom-0 bg-white"
         >
           <div class="mr-auto">${this.renderRunNowToggle()}</div>
           <aside class="text-xs text-neutral-500">
@@ -770,9 +767,7 @@ export class CrawlConfigEditor extends LiteElement {
     if (!this.configId) {
       return html`
         <footer
-          class="px-6 py-4 flex gap-2 items-center justify-end border ${isLast
+          class="px-6 py-4 flex gap-2 items-center justify-end border sticky bottom-0 bg-white rounded-b-lg"
-            ? "rounded-lg"
-            : "rounded-b-lg"}"
         >
           ${this.renderSteppedFooterButtons({ isFirst, isLast })}
         </footer>
@@ -1118,7 +1113,7 @@ https://example.com/path`}
               >${exampleDomain}${examplePathname}</span
             >
             or any URL that begins with those specified in
-            <em>Extra URLs in Scope</em>`
+            <em>Extra URL Prefixes in Scope</em>`
         );
         break;
       default:
@@ -1224,7 +1219,7 @@ https://example.com/path`}
           ${this.renderFormCol(html`
             <sl-textarea
               name="customIncludeUrlList"
-              label=${msg("Extra URLs in Scope")}
+              label=${msg("Extra URL Prefixes in Scope")}
               rows="3"
               autocomplete="off"
               inputmode="url"
@@ -1245,7 +1240,7 @@ https://example.net`}
           name="includeLinkedPages"
           ?checked=${this.formState.includeLinkedPages}
         >
-          ${msg("Include Any Linked Page (“one hop out”)")}
+          ${msg("Include any linked page (“one hop out”)")}
         </sl-checkbox>
       `)}
       ${this.renderHelpTextCol(
@@ -1255,7 +1250,7 @@ https://example.net`}
       )}
       ${this.renderFormCol(html`
         <sl-checkbox name="useSitemap" ?checked=${this.formState.useSitemap}>
-          ${msg("Check For Sitemap")}
+          ${msg("Check for sitemap")}
         </sl-checkbox>
       `)}
       ${this.renderHelpTextCol(
@@ -1487,9 +1482,9 @@ https://archiveweb.page/images/${"logo.svg"}`}
               scale: +(e.target as SlCheckbox).value,
             })}
         >
-          <sl-radio-button value="1" size="small">1</sl-radio-button>
+          <sl-radio-button value="1" size="small">1×</sl-radio-button>
-          <sl-radio-button value="2" size="small">2</sl-radio-button>
+          <sl-radio-button value="2" size="small">2×</sl-radio-button>
-          <sl-radio-button value="3" size="small">3</sl-radio-button>
+          <sl-radio-button value="3" size="small">3×</sl-radio-button>
         </sl-radio-group>
       `)}
       ${this.renderHelpTextCol(
@@ -1545,7 +1540,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
         name="autoscrollBehavior"
         ?checked=${this.formState.autoscrollBehavior}
       >
-        ${msg("Auto-Scroll Behavior")}
+        ${msg("Auto-scroll behavior")}
       </sl-checkbox>`)}
       ${this.renderHelpTextCol(
         msg(
@@ -1593,7 +1588,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
       )}
       ${this.renderFormCol(html`
         <sl-checkbox name="blockAds" ?checked=${this.formState.blockAds}>
-          ${msg("Block Ads by Domain")}
+          ${msg("Block ads by domain")}
         </sl-checkbox>
       `)}
       ${this.renderHelpTextCol(