ensure max collection name

Author: SuaYoo

frontend/src/components/ui/search-combobox.ts

@@ -58,6 +58,9 @@ export class SearchCombobox<T> extends TailwindElement {
   @property({ type: String })
   name?: string;
 
+  @property({ type: Number })
+  maxlength?: number;
+
   @property({ type: Boolean })
   required?: boolean;
 
@@ -149,6 +152,7 @@ export class SearchCombobox<T> extends TailwindElement {
           placeholder=${this.placeholder}
           label=${ifDefined(this.label)}
           size=${ifDefined(this.size)}
+          maxlength=${ifDefined(this.maxlength)}
           ?disabled=${this.disabled}
           clearable
           value=${this.searchByValue}

frontend/src/features/collections/collection-create-dialog.ts

@@ -17,7 +17,12 @@ import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import type { SelectCollectionAccess } from "@/features/collections/select-collection-access";
 import { alerts } from "@/strings/collections/alerts";
-import { CollectionAccess, type Collection } from "@/types/collection";
+import {
+  COLLECTION_CAPTION_MAX_LENGTH,
+  COLLECTION_NAME_MAX_LENGTH,
+  CollectionAccess,
+  type Collection,
+} from "@/types/collection";
 import { isApiError } from "@/utils/api";
 import { maxLengthValidator } from "@/utils/form";
 
@@ -49,8 +54,12 @@ export class CollectionCreateDialog extends BtrixElement {
   @queryAsync("#collectionForm")
   private readonly form!: Promise<HTMLFormElement>;
 
-  private readonly validateNameMax = maxLengthValidator(50);
-  private readonly validateCaptionMax = maxLengthValidator(150);
+  private readonly validateNameMax = maxLengthValidator(
+    COLLECTION_NAME_MAX_LENGTH,
+  );
+  private readonly validateCaptionMax = maxLengthValidator(
+    COLLECTION_CAPTION_MAX_LENGTH,
+  );
 
   protected firstUpdated(): void {
     if (this.open) {

frontend/src/features/collections/collection-name-input.ts

@@ -16,7 +16,10 @@ import type { BtrixChangeEvent } from "@/events/btrix-change";
 import { FormControl } from "@/mixins/FormControl";
 import { validationMessageFor } from "@/strings/validation";
 import type { APIPaginatedList } from "@/types/api";
-import type { Collection } from "@/types/collection";
+import {
+  COLLECTION_NAME_MAX_LENGTH,
+  type Collection,
+} from "@/types/collection";
 import appState from "@/utils/state";
 
 export type CollectionNameInputChangeEvent = BtrixChangeEvent<{
@@ -42,8 +45,9 @@ export class CollectionNameInput extends WithSearchOrgContext(
   collectionId = "";
 
   placeholder = msg("Enter existing or new collection name");
-  searchKeys = searchQueryKeys;
   createNew = true;
+  readonly searchKeys = searchQueryKeys;
+  readonly maxlength = COLLECTION_NAME_MAX_LENGTH;
 
   #collection?: Collection;
 

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

@@ -2427,13 +2427,19 @@ https://archiveweb.page/images/${"logo.svg"}`}
         ${when(
           this.formState.dedupeCollectionName &&
             !this.formState.dedupeCollectionId,
-          () => html`
-            <div class="form-help-text">
-              ${msg(
-                "A new collection will be created when this workflow is saved.",
-              )}
-            </div>
-          `,
+          () => {
+            const workflow_name = html`<strong class="font-medium"
+              >${this.formState.dedupeCollectionName}</strong
+            >`;
+            return html`
+              <div class="form-help-text">
+                ${msg(
+                  html`A new collection named “${workflow_name}” will be created
+                  when this workflow is saved.`,
+                )}
+              </div>
+            `;
+          },
         )}
       `)}
       ${this.renderHelpTextCol(

frontend/src/types/collection.ts

@@ -2,6 +2,9 @@ import { z } from "zod";
 
 import { storageFileSchema } from "./storage";
 
+export const COLLECTION_NAME_MAX_LENGTH = 50;
+export const COLLECTION_CAPTION_MAX_LENGTH = 150;
+
 export enum CollectionAccess {
   Private = "private",
   Public = "public",