Fix browser navigation button usage in QA review (#1776)

frontend/src/controllers/navigate.ts

@@ -6,6 +6,7 @@ export type NavigateEventDetail = {
   url: string;
   state?: { [key: string]: unknown };
   resetScroll: boolean;
+  replace?: boolean;
 };
 
 export interface NavigateEventMap {
@@ -40,9 +41,10 @@ export class NavigateController implements ReactiveController {
     url: string,
     state?: { [key: string]: unknown },
     resetScroll = true,
+    replace = false,
   ): void => {
     const evt = new CustomEvent<NavigateEventDetail>(NAVIGATE_EVENT_NAME, {
-      detail: { url, state, resetScroll },
+      detail: { url, state, resetScroll, replace },
       bubbles: true,
       composed: true,
     });

frontend/src/index.ts

@@ -198,7 +198,11 @@ export class App extends LiteElement {
     }
   }
 
-  navigate(newViewPath: string, state?: { [key: string]: unknown }) {
+  navigate(
+    newViewPath: string,
+    state?: { [key: string]: unknown },
+    replace?: boolean,
+  ) {
     let url;
 
     if (newViewPath.startsWith("http")) {
@@ -220,14 +224,15 @@ export class App extends LiteElement {
     }
 
     this.viewState.data = state;
+    const urlStr = `${this.viewState.pathname.replace(url.search, "")}${url.hash}${
+      url.search
+    }`;
 
-    window.history.pushState(
-      this.viewState,
-      "",
-      `${this.viewState.pathname.replace(url.search, "")}${url.hash}${
-        url.search
-      }`,
-    );
+    if (replace) {
+      window.history.replaceState(this.viewState, "", urlStr);
+    } else {
+      window.history.pushState(this.viewState, "", urlStr);
+    }
   }
 
   render() {
@@ -556,7 +561,6 @@ export class App extends LiteElement {
       case "forgotPassword":
         return html`<btrix-log-in
           class="flex w-full items-center justify-center md:bg-neutral-50"
-          @navigate=${this.onNavigateTo}
           .viewState=${this.viewState}
           redirectUrl=${this.viewState.params.redirectUrl ||
           this.viewState.data?.redirectUrl}
@@ -565,14 +569,12 @@ export class App extends LiteElement {
       case "resetPassword":
         return html`<btrix-reset-password
           class="flex w-full items-center justify-center md:bg-neutral-50"
-          @navigate=${this.onNavigateTo}
           .viewState=${this.viewState}
         ></btrix-reset-password>`;
 
       case "home":
         return html`<btrix-home
           class="w-full md:bg-neutral-50"
-          @navigate=${this.onNavigateTo}
           @update-user-info=${(e: CustomEvent) => {
             e.stopPropagation();
             void this.updateUserInfo();
@@ -599,7 +601,6 @@ export class App extends LiteElement {
             .split("/")[0] || "home";
         return html`<btrix-org
           class="w-full"
-          @navigate=${this.onNavigateTo}
           @update-user-info=${(e: CustomEvent) => {
             e.stopPropagation();
             void this.updateUserInfo();
@@ -648,7 +649,6 @@ export class App extends LiteElement {
           if (this.appState.userInfo.isAdmin) {
             return html`<btrix-crawls
               class="w-full"
-              @navigate=${this.onNavigateTo}
               @notify=${this.onNotify}
               .authState=${this.authService.authState}
               crawlId=${this.viewState.params.crawlId}
@@ -795,9 +795,9 @@ export class App extends LiteElement {
   onNavigateTo = (event: CustomEvent<NavigateEventDetail>) => {
     event.stopPropagation();
 
-    const { url, state, resetScroll } = event.detail;
+    const { url, state, resetScroll, replace } = event.detail;
 
-    this.navigate(url, state);
+    this.navigate(url, state, replace);
 
     if (resetScroll) {
       // Scroll to top of page

frontend/src/pages/org/archived-item-qa/archived-item-qa.ts

@@ -7,7 +7,6 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import { cache } from "lit/directives/cache.js";
 import { choose } from "lit/directives/choose.js";
 import { guard } from "lit/directives/guard.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 import { when } from "lit/directives/when.js";
 import queryString from "query-string";
@@ -296,7 +295,12 @@ export class ArchivedItemQA extends TailwindElement {
       searchParams.set("itemPageId", firstPage.id);
     }
 
-    this.navigate.to(`${window.location.pathname}?${searchParams.toString()}`);
+    this.navigate.to(
+      `${window.location.pathname}?${searchParams.toString()}`,
+      undefined,
+      undefined,
+      /* replace: */ true,
+    );
   }
 
   /**
@@ -883,10 +887,7 @@ export class ArchivedItemQA extends TailwindElement {
     `;
   }
 
-  private readonly renderRWP = (
-    rwpId: string,
-    { qa, url }: { qa: boolean; url?: string },
-  ) => {
+  private readonly renderRWP = (rwpId: string, { qa }: { qa: boolean }) => {
     if (!rwpId) return;
 
     const replaySource = `/api/orgs/${this.orgId}/crawls/${this.itemId}${qa ? `/qa/${rwpId}` : ""}/replay.json`;
@@ -903,7 +904,10 @@ export class ArchivedItemQA extends TailwindElement {
           replayBase="/replay/"
           embed="replayonly"
           noCache="true"
-          url="${ifDefined(url)}"
+          url=${
+            /* TODO investigate if there's an RWP fix for preventing history manipulation when url is omitted */
+            "about:blank"
+          }
         ></replay-web-page>
       `,
     );