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>
This commit is contained in:
Ilya Kreymer
GitHub
parent
aa6429049e
commit
b432d226bd
@ -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>`;
|
||||
|
||||
@ -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();
|
||||
|
||||
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",
|
||||
});
|
||||
}
|
||||
await this.checkBrowserStatus();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -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;
|
||||
|
||||
@ -381,10 +381,7 @@ export class BrowserProfilesDetail extends TailwindElement {
|
||||
private renderBrowserProfileControls() {
|
||||
return html`
|
||||
<div class="flex justify-between p-4">
|
||||
<sl-button
|
||||
size="small"
|
||||
@click=${() => void this.discardChangesDialog?.show()}
|
||||
>
|
||||
<sl-button size="small" @click=${this.onCancel}>
|
||||
${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;
|
||||
|
||||
|
||||
@ -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.deleteBrowser(this.browserId);
|
||||
}
|
||||
void this.closeBrowser();
|
||||
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.orgBasePath}/browser-profiles`}
|
||||
@click=${this.navLink}
|
||||
? `${this.nav.orgBasePath}/browser-profiles/profile/${this.browserParams.profileId}`
|
||||
: `${this.nav.orgBasePath}/browser-profiles`}
|
||||
@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
|
||||
variant="success"
|
||||
size="small"
|
||||
@click=${() => (this.isDialogVisible = true)}
|
||||
>
|
||||
${msg("Finish Browsing")}
|
||||
</sl-button>
|
||||
${this.renderBrowserProfileControls()}
|
||||
</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.orgBasePath}/browser-profiles/profile/browser/${
|
||||
this.nav.to(
|
||||
`${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!,
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user