Crawl config frontend fixes (#482)

* fix current time limit (#480)
* fix browser profile name not shown (#474)
* fix finish setup button label (#473)
* fix paginated exclusion, border and page size (#475)

frontend/src/components/queue-exclusion-table.ts

@@ -75,9 +75,15 @@ export class QueueExclusionTable extends LiteElement {
   }
 
   willUpdate(changedProperties: Map<string, any>) {
-    if (changedProperties.has("exclusions") && this.exclusions) {
+    if (changedProperties.get("exclusions") && this.exclusions) {
+      if (
+        changedProperties.get("exclusions").toString() ===
+        this.exclusions.toString()
+      ) {
+        // Check list equality
+        return;
+      }
       this.exclusionToRemove = undefined;
-
       const prevVal = changedProperties.get("exclusions");
       if (prevVal) {
         const prevTotal = prevVal.length;
@@ -88,9 +94,14 @@ export class QueueExclusionTable extends LiteElement {
           this.page = lastPage;
         }
       }
-
       this.updatePageResults();
-    } else if (changedProperties.has("page")) {
+    } else if (changedProperties.get("page") && this.page) {
+      this.updatePageResults();
+    }
+  }
+
+  firstUpdated() {
+    if (this.exclusions) {
       this.updatePageResults();
     }
   }
@@ -167,11 +178,12 @@ export class QueueExclusionTable extends LiteElement {
 
   private renderItem = (
     exclusion: Exclusion,
-    index: number,
+    pageIndex: number,
     arr: Exclusion[]
   ) => {
+    const index = (this.page - 1) * this.pageSize + pageIndex;
     const [typeColClass, valueColClass, actionColClass] =
-      this.getColumnClassNames(index + 1, arr.length);
+      this.getColumnClassNames(pageIndex + 1, arr.length);
 
     return html`
       <tr

frontend/src/pages/archive/crawl-config-editor.ts

@@ -354,6 +354,9 @@ export class CrawlConfigEditor extends LiteElement {
     if (this.initialCrawlConfig.tags?.length) {
       formState.tags = this.initialCrawlConfig.tags;
     }
+    if (this.initialCrawlConfig.crawlTimeout) {
+      formState.crawlTimeoutMinutes = this.initialCrawlConfig.crawlTimeout / 60;
+    }
 
     return {
       jobName: this.initialCrawlConfig.name,
@@ -573,7 +576,8 @@ export class CrawlConfigEditor extends LiteElement {
                   ?disabled=${this.isSubmitting || this.formHasError}
                   ?loading=${this.isSubmitting}
                 >
-                  ${this.formState.runNow
+                  ${this.formState.scheduleType === "now" ||
+                  this.formState.runNow
                     ? msg("Save & Run Crawl")
                     : msg("Save & Schedule Crawl")}
                 </sl-button>`
@@ -743,7 +747,7 @@ https://example.com/path`}
           ${this.renderFormCol(html`
             <btrix-queue-exclusion-table
               .exclusions=${this.formState.exclusions}
-              pageSize="10"
+              pageSize="30"
               editable
               removable
               @on-remove=${this.handleRemoveRegex}
@@ -971,6 +975,7 @@ https://example.net`}
         <sl-input
           name="crawlTimeoutMinutes"
           label=${msg("Crawl Time Limit")}
+          value=${ifDefined(this.formState.crawlTimeoutMinutes ?? undefined)}
           placeholder=${msg("Unlimited")}
           type="number"
         >
@@ -1062,7 +1067,7 @@ https://example.net`}
           type="number"
           label=${msg("Page Time Limit")}
           placeholder=${msg("Unlimited")}
-          value=${ifDefined(this.formState.pageTimeoutMinutes || undefined)}
+          value=${ifDefined(this.formState.pageTimeoutMinutes ?? undefined)}
         >
           <span slot="suffix">${msg("minutes")}</span>
         </sl-input>
@@ -1278,11 +1283,18 @@ https://example.net`}
   }
 
   private renderConfirmSettings = () => {
-    const crawlConfig = this.parseConfig();
     return html`
       <div class="col-span-1 md:col-span-5">
-        <btrix-config-details .crawlConfig=${crawlConfig}>
-        </btrix-config-details>
+        ${when(this.progressState.activeTab === "confirmSettings", () => {
+          // Prevent parsing and rendering tab when not visible
+          const crawlConfig = this.parseConfig();
+          const profileName = this.formState.browserProfile?.name;
+
+          return html`<btrix-config-details
+            .crawlConfig=${{ ...crawlConfig, profileName }}
+          >
+          </btrix-config-details>`;
+        })}
       </div>
 
       ${when(this.formHasError, () =>

frontend/src/pages/archive/types.ts

@@ -60,13 +60,13 @@ export type CrawlConfigParams = {
   scale: number;
   profileid: string | null;
   config: SeedConfig;
-  crawlTimeout: number | null;
+  crawlTimeout?: number | null;
   tags?: string[];
 };
 
 export type InitialCrawlConfig = Pick<
   CrawlConfigParams,
-  "name" | "profileid" | "schedule" | "tags"
+  "name" | "profileid" | "schedule" | "tags" | "crawlTimeout"
 > & {
   jobType?: JobType;
   config: Pick<