Profile UX tweaks + sync between new and edit workflows (#1840)

Follow up to #1815 

- Improved detection / responsiveness to unavailable browser
- Disable Save buttons when browser disconnected / unavailable
- Only add unload handler when browser is available
- Consistency between new and edit views: new profile view also has
cancel button with confirmation
- Don't show cancel confirmation if browser is already unavailable. 

Various text tweaks for consistency / accuracy:
- Save New Profile... to indicate new profile will be saved after dialog
- Load new browser to indicate new browser will be created
- Mention connection to browser is lost in disconnected message.

Also: migrated to LiteElement -> TailwindElement for browser-profiles-new

-------
Co-authored-by: emma <hi@emma.cafe>

frontend/src/features/browser-profiles/new-browser-profile-dialog.ts

@@ -106,7 +106,7 @@ export class NewBrowserProfileDialog extends LiteElement {
           ?loading=${this.isSubmitting}
           ?disabled=${this.isSubmitting}
           @click=${() => this.dialog?.submit()}
-          >${msg("Configure Browser Profile")}</sl-button
+          >${msg("Start Browsing")}</sl-button
         >
       </div>
     </btrix-dialog>`;

frontend/src/features/browser-profiles/profile-browser.ts

@@ -17,7 +17,7 @@ type BrowserResponseData = {
   url?: string;
 };
 export type BrowserLoadDetail = string;
-export type BrowserErrorDetail = {
+export type BrowserNotAvailableError = {
   error: APIError | Error;
 };
 export type BrowserConnectionChange = {
@@ -151,6 +151,16 @@ export class ProfileBrowser extends TailwindElement {
         ),
       );
     }
+    if (changedProperties.has("browserNotAvailable")) {
+      if (this.browserNotAvailable) {
+        window.removeEventListener("beforeunload", this.onBeforeUnload);
+      } else {
+        window.addEventListener("beforeunload", this.onBeforeUnload);
+      }
+      this.dispatchEvent(
+        new CustomEvent<BrowserNotAvailableError>("btrix-browser-error"),
+      );
+    }
   }
 
   private animateSidebar() {
@@ -245,7 +255,7 @@ export class ProfileBrowser extends TailwindElement {
             <div class="py-2 text-center">
               <sl-button size="small" @click=${this.onClickReload}>
                 <sl-icon slot="prefix" name="arrow-clockwise"></sl-icon>
-                ${msg("Reload Browser")}
+                ${msg("Load New Browser")}
               </sl-button>
             </div>
           </btrix-alert>
@@ -271,7 +281,7 @@ export class ProfileBrowser extends TailwindElement {
               <btrix-alert variant="danger">
                 <p>
                   ${msg(
-                    `Interactive browser is offline. Waiting to reconnect...`,
+                    "Connection to interactive browser lost. Waiting to reconnect...",
                   )}
                 </p>
               </btrix-alert>
@@ -373,29 +383,7 @@ export class ProfileBrowser extends TailwindElement {
     this.iframeSrc = undefined;
     this.isIframeLoaded = false;
 
-    try {
+    await this.checkBrowserStatus();
-      await this.checkBrowserStatus();
-
-      this.browserNotAvailable = false;
-    } catch (e) {
-      this.browserNotAvailable = true;
-
-      await this.updateComplete;
-
-      this.dispatchEvent(
-        new CustomEvent<BrowserErrorDetail>("btrix-browser-error", {
-          detail: {
-            error: e instanceof Error ? e : new Error(),
-          },
-        }),
-      );
-
-      this.notify.toast({
-        message: msg("Sorry, can't edit browser profile at this time."),
-        variant: "danger",
-        icon: "exclamation-octagon",
-      });
-    }
   }
 
   /**
@@ -405,6 +393,7 @@ export class ProfileBrowser extends TailwindElement {
     let result: BrowserResponseData;
     try {
       result = await this.getBrowser();
+      this.browserNotAvailable = false;
     } catch (e) {
       this.browserNotAvailable = true;
       return;

frontend/src/pages/org/browser-profiles-detail.ts

@@ -381,10 +381,7 @@ export class BrowserProfilesDetail extends TailwindElement {
   private renderBrowserProfileControls() {
     return html`
       <div class="flex justify-between p-4">
-        <sl-button
+        <sl-button size="small" @click=${this.onCancel}>
-          size="small"
-          @click=${() => void this.discardChangesDialog?.show()}
-        >
           ${msg("Cancel")}
         </sl-button>
         <div>
@@ -494,6 +491,14 @@ export class BrowserProfilesDetail extends TailwindElement {
     this.isBrowserLoaded = e.detail.connected;
   }
 
+  private async onCancel() {
+    if (this.isBrowserLoaded) {
+      void this.discardChangesDialog?.show();
+    } else {
+      void this.cancelEditBrowser();
+    }
+  }
+
   private async startBrowserPreview() {
     if (!this.profile) return;
 

frontend/src/pages/org/browser-profiles-new.ts

@@ -1,11 +1,17 @@
 import { localized, msg, str } from "@lit/localize";
-import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import queryString from "query-string";
 
+import { TailwindElement } from "@/classes/TailwindElement";
+import type { Dialog } from "@/components/ui/dialog";
+import { APIController } from "@/controllers/api";
+import { NavigateController } from "@/controllers/navigate";
+import { NotifyController } from "@/controllers/notify";
+import type { BrowserConnectionChange } from "@/features/browser-profiles/profile-browser";
 import { isApiError } from "@/utils/api";
 import type { AuthState } from "@/utils/AuthService";
-import LiteElement, { html } from "@/utils/LiteElement";
 
 /**
  * Usage:
@@ -19,7 +25,7 @@ import LiteElement, { html } from "@/utils/LiteElement";
  */
 @localized()
 @customElement("btrix-browser-profiles-new")
-export class BrowserProfilesNew extends LiteElement {
+export class BrowserProfilesNew extends TailwindElement {
   @property({ type: Object })
   authState!: AuthState;
 
@@ -42,16 +48,24 @@ export class BrowserProfilesNew extends LiteElement {
     url: "",
   };
 
+  private readonly api = new APIController(this);
+  private readonly notify = new NotifyController(this);
+  private readonly nav = new NavigateController(this);
+
   @state()
   private isSubmitting = false;
 
   @state()
   private isDialogVisible = false;
 
+  @state()
+  private isBrowserLoaded = false;
+
+  @query("#discardDialog")
+  private readonly discardDialog?: Dialog | null;
+
   disconnectedCallback(): void {
-    if (this.browserId) {
+    void this.closeBrowser();
-      void this.deleteBrowser(this.browserId);
-    }
     super.disconnectedCallback();
   }
 
@@ -61,9 +75,9 @@ export class BrowserProfilesNew extends LiteElement {
         <a
           class="text-sm font-medium text-neutral-500 hover:text-neutral-600"
           href=${this.browserParams.profileId
-            ? `${this.orgBasePath}/browser-profiles/profile/${this.browserParams.profileId}`
+            ? `${this.nav.orgBasePath}/browser-profiles/profile/${this.browserParams.profileId}`
-            : `${this.orgBasePath}/browser-profiles`}
+            : `${this.nav.orgBasePath}/browser-profiles`}
-          @click=${this.navLink}
+          @click=${this.nav.link}
         >
           <sl-icon
             name="arrow-left"
@@ -120,19 +134,16 @@ export class BrowserProfilesNew extends LiteElement {
           orgId=${this.orgId}
           browserId=${this.browserId}
           initialNavigateUrl=${ifDefined(this.browserParams.navigateUrl)}
+          @btrix-browser-load=${() => (this.isBrowserLoaded = true)}
           @btrix-browser-reload=${this.onBrowserReload}
+          @btrix-browser-error=${this.onBrowserError}
+          @btrix-browser-connection-change=${this.onBrowserConnectionChange}
         ></btrix-profile-browser>
 
         <div
-          class="sticky bottom-2 z-10 mb-3 flex items-center justify-end rounded-lg border bg-neutral-0 p-2 shadow"
+          class="flex-0 sticky bottom-2 rounded-lg border bg-neutral-0 shadow"
         >
-          <sl-button
+          ${this.renderBrowserProfileControls()}
-            variant="success"
-            size="small"
-            @click=${() => (this.isDialogVisible = true)}
-          >
-            ${msg("Finish Browsing")}
-          </sl-button>
         </div>
       </div>
 
@@ -143,6 +154,78 @@ export class BrowserProfilesNew extends LiteElement {
       >
         ${this.renderForm()}
       </btrix-dialog>
+
+      <btrix-dialog
+        id="discardDialog"
+        .label=${msg("Cancel Profile Creation?")}
+      >
+        ${msg("Are you sure you want to cancel creating a browser profile?")}
+        <div slot="footer" class="flex justify-between">
+          <sl-button
+            size="small"
+            .autofocus=${true}
+            @click=${() => void this.discardDialog?.hide()}
+          >
+            ${msg("No, Continue Browsing")}
+          </sl-button>
+          <sl-button
+            size="small"
+            variant="danger"
+            @click=${() => {
+              void this.discardDialog?.hide();
+              void this.closeBrowser();
+            }}
+            >${msg("Yes, Cancel")}
+          </sl-button>
+        </div>
+      </btrix-dialog>
+    `;
+  }
+
+  private async onBrowserError() {
+    this.isBrowserLoaded = false;
+  }
+
+  private async onBrowserConnectionChange(
+    e: CustomEvent<BrowserConnectionChange>,
+  ) {
+    this.isBrowserLoaded = e.detail.connected;
+  }
+
+  private onCancel() {
+    if (!this.isBrowserLoaded) {
+      void this.closeBrowser();
+    } else {
+      void this.discardDialog?.show();
+    }
+  }
+
+  private async closeBrowser() {
+    this.isBrowserLoaded = false;
+
+    if (this.browserId) {
+      await this.deleteBrowser(this.browserId);
+    }
+    this.nav.to(`${this.nav.orgBasePath}/browser-profiles`);
+  }
+
+  private renderBrowserProfileControls() {
+    return html`
+      <div class="flex justify-between p-4">
+        <sl-button size="small" @click="${this.onCancel}">
+          ${msg("Cancel")}
+        </sl-button>
+        <div>
+          <sl-button
+            variant="success"
+            size="small"
+            ?disabled=${!this.isBrowserLoaded}
+            @click=${() => (this.isDialogVisible = true)}
+          >
+            ${msg("Save New Profile...")}
+          </sl-button>
+        </div>
+      </div>
     `;
   }
 
@@ -210,8 +293,8 @@ export class BrowserProfilesNew extends LiteElement {
       crawlerChannel,
     });
 
-    this.navTo(
+    this.nav.to(
-      `${this.orgBasePath}/browser-profiles/profile/browser/${
+      `${this.nav.orgBasePath}/browser-profiles/profile/browser/${
         data.browserid
       }?${queryString.stringify({
         url,
@@ -234,7 +317,7 @@ export class BrowserProfilesNew extends LiteElement {
     };
 
     try {
-      const data = await this.apiFetch<{ id: string }>(
+      const data = await this.api.fetch<{ id: string }>(
         `/orgs/${this.orgId}/profiles`,
         this.authState!,
         {
@@ -243,13 +326,15 @@ export class BrowserProfilesNew extends LiteElement {
         },
       );
 
-      this.notify({
+      this.notify.toast({
         message: msg("Successfully created browser profile."),
         variant: "success",
         icon: "check2-circle",
       });
 
-      this.navTo(`${this.orgBasePath}/browser-profiles/profile/${data.id}`);
+      this.nav.to(
+        `${this.nav.orgBasePath}/browser-profiles/profile/${data.id}`,
+      );
     } catch (e) {
       this.isSubmitting = false;
 
@@ -267,7 +352,7 @@ export class BrowserProfilesNew extends LiteElement {
         }
       }
 
-      this.notify({
+      this.notify.toast({
         message: message,
         variant: "danger",
         icon: "exclamation-octagon",
@@ -286,7 +371,7 @@ export class BrowserProfilesNew extends LiteElement {
       crawlerChannel,
     };
 
-    return this.apiFetch<{ browserid: string }>(
+    return this.api.fetch<{ browserid: string }>(
       `/orgs/${this.orgId}/profiles/browser`,
       this.authState!,
       {
@@ -298,7 +383,7 @@ export class BrowserProfilesNew extends LiteElement {
 
   private async deleteBrowser(id: string) {
     try {
-      const data = await this.apiFetch(
+      const data = await this.api.fetch(
         `/orgs/${this.orgId}/profiles/browser/${id}`,
         this.authState!,
         {