Disable "Update collection thumbnail" checkbox on initial page selection dialog until thumbnail is loaded (#2392)

Closes #2391

frontend/src/features/collections/collection-initial-view-dialog.ts

@@ -8,6 +8,7 @@ import queryString from "query-string";
 
 import {
   HomeView,
+  type BtrixValidateDetail,
   type CollectionSnapshotPreview,
 } from "./collection-snapshot-preview";
 import type { SelectSnapshotDetail } from "./select-collection-page";
@@ -20,8 +21,8 @@ import type { Collection } from "@/types/collection";
  * @fires btrix-change
  */
 @localized()
-@customElement("btrix-collection-replay-dialog")
+@customElement("btrix-collection-initial-view-dialog")
-export class CollectionStartPageDialog extends BtrixElement {
+export class CollectionInitialViewDialog extends BtrixElement {
   static readonly Options: Record<
     HomeView,
     { label: string; icon: NonNullable<SlIcon["name"]>; detail: string }
@@ -71,6 +72,9 @@ export class CollectionStartPageDialog extends BtrixElement {
   @query("#thumbnailPreview")
   private readonly thumbnailPreview?: CollectionSnapshotPreview | null;
 
+  @state()
+  validThumbnail = false;
+
   willUpdate(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("collection") && this.collection) {
       this.homeView = this.collection.homeUrl ? HomeView.URL : HomeView.Pages;
@@ -174,6 +178,12 @@ export class CollectionStartPageDialog extends BtrixElement {
           view=${this.homeView}
           replaySrc=${`/replay/?${query}#view=pages`}
           .snapshot=${snapshot}
+          @btrix-validate=${({
+            detail: { valid },
+          }: CustomEvent<BtrixValidateDetail>) => {
+            console.log({ valid });
+            this.validThumbnail = valid;
+          }}
         >
         </btrix-collection-snapshot-preview>
 
@@ -192,7 +202,7 @@ export class CollectionStartPageDialog extends BtrixElement {
   }
 
   private renderForm() {
-    const { icon, detail } = CollectionStartPageDialog.Options[this.homeView];
+    const { icon, detail } = CollectionInitialViewDialog.Options[this.homeView];
 
     return html`
       <form @submit=${this.onSubmit}>
@@ -226,7 +236,7 @@ export class CollectionStartPageDialog extends BtrixElement {
 
           ${Object.values(HomeView).map((homeView) => {
             const { label, icon, detail } =
-              CollectionStartPageDialog.Options[homeView];
+              CollectionInitialViewDialog.Options[homeView];
             return html`
               <sl-option value=${homeView}>
                 <sl-icon slot="prefix" name=${icon}></sl-icon>
@@ -255,7 +265,8 @@ export class CollectionStartPageDialog extends BtrixElement {
               <sl-checkbox
                 name="useThumbnail"
                 class="mt-3 part-[form-control-help-text]:text-balance"
-                checked
+                ?checked=${this.validThumbnail}
+                ?disabled=${!this.validThumbnail || !this.selectedSnapshot}
                 help-text=${msg(
                   "If this collection is public, the preview will be used as the thumbnail for this collection.",
                 )}

frontend/src/features/collections/collection-snapshot-preview.ts

@@ -16,7 +16,7 @@ export enum HomeView {
   URL = "url",
 }
 
-export type BtrixValidateDetails = {
+export type BtrixValidateDetail = {
   valid: boolean;
 };
 
@@ -93,7 +93,7 @@ export class CollectionSnapshotPreview extends TailwindElement {
 
         if (resp.status === 200) {
           this.dispatchEvent(
-            new CustomEvent<BtrixValidateDetails>("btrix-validate", {
+            new CustomEvent<BtrixValidateDetail>("btrix-validate", {
               detail: { valid: true },
             }),
           );
@@ -105,7 +105,7 @@ export class CollectionSnapshotPreview extends TailwindElement {
         console.error(e);
         if (signal.aborted) return;
         this.dispatchEvent(
-          new CustomEvent<BtrixValidateDetails>("btrix-validate", {
+          new CustomEvent<BtrixValidateDetail>("btrix-validate", {
             detail: { valid: false },
           }),
         );

frontend/src/features/collections/edit-dialog/presentation-section.ts

@@ -12,7 +12,7 @@ import {
   validateNameMax,
   type CollectionEdit,
 } from "../collection-edit-dialog";
-import { type BtrixValidateDetails } from "../collection-snapshot-preview";
+import { type BtrixValidateDetail } from "../collection-snapshot-preview";
 import {
   CollectionThumbnail,
   DEFAULT_THUMBNAIL_VARIANT,
@@ -305,7 +305,7 @@ function renderPageThumbnail(
           isEqual(this.selectedSnapshot, this.collection?.thumbnailSource)}
           @btrix-validate=${({
             detail: { valid },
-          }: CustomEvent<BtrixValidateDetails>) => {
+          }: CustomEvent<BtrixValidateDetail>) => {
             if (this.defaultThumbnailName == null && !valid) {
               this.errorTab = "general";
             } else {

frontend/src/features/collections/index.ts

@@ -3,7 +3,7 @@ import("./collections-grid");
 import("./collection-items-dialog");
 import("./collection-edit-dialog");
 import("./collection-create-dialog");
-import("./collection-replay-dialog");
+import("./collection-initial-view-dialog");
 import("./collection-workflow-list");
 import("./select-collection-access");
 import("./select-collection-page");

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

@@ -328,7 +328,7 @@ export class CollectionDetail extends BtrixElement {
       >
       </btrix-collection-items-dialog>
 
-      <btrix-collection-replay-dialog
+      <btrix-collection-initial-view-dialog
         ?open=${this.openDialogName === "replaySettings"}
         @btrix-change=${() => {
           // Don't do full refresh of rwp so that rwp-url-change fires
@@ -341,7 +341,7 @@ export class CollectionDetail extends BtrixElement {
         .collection=${this.collection}
         ?replayLoaded=${this.isRwpLoaded}
       >
-      </btrix-collection-replay-dialog>
+      </btrix-collection-initial-view-dialog>
 
       <btrix-collection-edit-dialog
         .collection=${this.collection}