@oneuptime/common 13.0.6 → 13.0.8

package/UI/Components/ModelTable/TableView.tsx

@@ -6,7 +6,7 @@ import MoreMenuItem from "../MoreMenu/MoreMenuItem";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
-import API from "../../../Utils/API";
+import API from "../../Utils/API/API";
 import MoreMenuSection from "../MoreMenu/MoreMenuSection";
 import { ButtonStyleType } from "../Button/Button";
 import IconProp from "../../../Types/Icon/IconProp";

package/UI/Components/Navbar/NavBar.tsx

@@ -29,6 +29,8 @@ export interface NavItem {
 export interface MoreMenuItem {
   title: string;
   description: string;
+  /** Acronyms and alternate names users can search for in navigation. */
+  keywords?: Array<string> | undefined;
   route: Route;
   icon: IconProp;
   iconColor?: string; // Tailwind color name like "blue", "purple", "amber"

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -186,14 +186,18 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
 
   const recentLabel: string = tx(props.recentLabel || "Recent");
 
-  // Filter items by the search query (title only).
+  // Keep familiar acronyms searchable even when the displayed title is translated.
   const filteredItems: MoreMenuItem[] = useMemo(() => {
     const normalizedQuery: string = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return props.items;
     }
     return props.items.filter((item: MoreMenuItem) => {
-      return item.title.toLowerCase().includes(normalizedQuery);
+      return [item.title, item.description, ...(item.keywords || [])].some(
+        (value: string) => {
+          return value.toLowerCase().includes(normalizedQuery);
+        },
+      );
     });
   }, [props.items, query]);
 

package/UI/Components/TelemetryViewer/components/TelemetryHistogram.tsx

@@ -118,8 +118,15 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
   const activeSeries: Array<HistogramSeriesOption> = useMemo(() => {
     const present: Set<string> = new Set<string>();
 
+    /*
+     * A zero-count bucket holds a slot on the time axis (so a quiet stretch
+     * reads as a gap rather than being squeezed out); it is not a sighting
+     * of its series, which draws nothing and must not be legended.
+     */
     for (const bucket of props.buckets) {
-      present.add(bucket.series);
+      if (bucket.count > 0) {
+        present.add(bucket.series);
+      }
     }
 
     return props.series.filter((option: HistogramSeriesOption): boolean => {

package/UI/Components/Tooltip/Tooltip.tsx

@@ -15,6 +15,13 @@ export interface ComponentProps {
   richContent?: ReactElement | undefined;
   // Large collections can wait to create a tooltip until first opened.
   lazy?: boolean | undefined;
+  /*
+   * Rich tooltips are interactive by default, and Tippy mounts an interactive
+   * tooltip inside the trigger's parent - where an overflow-clipped ancestor
+   * (a scrolling grid, say) cuts it off. Pass false for rich content that has
+   * nothing to click: it then mounts on <body> and hides on mouse-out.
+   */
+  interactive?: boolean | undefined;
 }
 
 interface PopupProps extends ComponentProps {
@@ -61,7 +68,7 @@ const TooltipPopup: FunctionComponent<PopupProps> = (
       {...(props.reference
         ? { reference: props.reference, showOnCreate: true }
         : { children: props.children })}
-      interactive={isRich}
+      interactive={props.interactive ?? isRich}
       trigger="mouseenter focus"
       hideOnClick={false}
       maxWidth={isRich ? 380 : 350}

package/UI/Utils/API/API.ts

@@ -22,8 +22,25 @@ import {
 import API, { AuthRetryContext } from "../../../Utils/API";
 import { IDENTITY_URL } from "../../Config";
 
+/*
+ * One in-flight refresh per session, shared by every caller in this tab: the
+ * dashboard's BaseAPI, any subclass that inherits its refresh, and callers of
+ * refreshSession() that are not going through a request at all (raw fetch,
+ * navigations, the realtime socket). Keyed by session name rather than kept on
+ * `this`, because a static field read through `this` gives every subclass its
+ * own slot, and two slots for one session means two refreshes racing with the
+ * same rotating refresh token.
+ */
+const inFlightSessionRefreshes: Map<string, Promise<boolean>> = new Map();
+
 class BaseAPI extends API {
-  private static refreshPromise: Promise<boolean> | null = null;
+  /*
+   * A refresh another tab finished this recently is one this tab can reuse:
+   * tabs share cookies, so its new access token is already ours. Comfortably
+   * longer than a refresh round trip, far shorter than the token lifetime.
+   */
+  public static readonly RECENT_SESSION_REFRESH_WINDOW_IN_MS: number =
+    15 * 1000;
 
   public constructor(protocol: Protocol, hostname: Hostname, route?: Route) {
     super(protocol, hostname, route);
@@ -117,6 +134,14 @@ class BaseAPI extends API {
 
       this.logoutUser();
 
+      /*
+       * Already there: a forced navigation would reload the login page, whose
+       * requests would fail the same way and reload it again.
+       */
+      if (Navigation.getCurrentRoute().toString() === loginRoute.toString()) {
+        return error;
+      }
+
       if (Navigation.getQueryStringByName("token")) {
         Navigation.navigate(loginRoute.addRouteParam("sso", "true"), {
           forceNavigate: true,
@@ -140,14 +165,79 @@ class BaseAPI extends API {
     return error;
   }
 
+  /*
+   * A refresh that got no answer at all (network down, identity unreachable)
+   * rejects here rather than resolving false: the request that asked for it
+   * then fails with that transport error, instead of logging the user out
+   * over a blip.
+   */
   protected static override async tryRefreshAuth(
     _context: AuthRetryContext,
   ): Promise<boolean> {
-    if (!this.refreshPromise) {
-      this.refreshPromise = (async () => {
-        const refreshUrl: URL = URL.fromString(
-          IDENTITY_URL.toString(),
-        ).addRoute("/refresh-token");
+    return await this.refreshSessionOrThrow();
+  }
+
+  /*
+   * Where this client's session is refreshed, or null when it has no session
+   * that can be (a public dashboard, a status page with no id yet).
+   */
+  protected static getRefreshSessionUrl(): URL | null {
+    return URL.fromString(IDENTITY_URL.toString()).addRoute("/refresh-token");
+  }
+
+  // Names the session for the in-tab single flight, the cross-tab lock and the "recently refreshed" marker.
+  protected static getSessionName(): string {
+    return "dashboard";
+  }
+
+  /*
+   * Refresh the session now, and say whether it worked.
+   *
+   * Requests made through this class already do this for themselves when they
+   * come back 401. This is for the paths that cannot: a raw fetch() (binary
+   * responses), a navigation or new tab pointed at an authenticated route, the
+   * realtime socket's handshake. Those call it before (or after) and carry on.
+   *
+   * Concurrent callers share one refresh, in this tab and across tabs. The
+   * server rotates the refresh token on every use, and a token that has
+   * already been rotated no longer matches a session: that refresh gets a 401
+   * and a response that clears every session cookie, including the ones the
+   * winning refresh just set. So two tabs that both notice an expired session
+   * and both refresh would log each other out. The refresh therefore runs
+   * under a cross-tab lock, and a tab that gets the lock just after another
+   * tab refreshed reuses that result instead of spending the stale token.
+   */
+  public static async refreshSession(): Promise<boolean> {
+    try {
+      return await this.refreshSessionOrThrow();
+    } catch {
+      // No answer at all; callers outside a request just carry on.
+      return false;
+    }
+  }
+
+  private static async refreshSessionOrThrow(): Promise<boolean> {
+    const refreshUrl: URL | null = this.getRefreshSessionUrl();
+
+    if (!refreshUrl) {
+      return false;
+    }
+
+    const sessionName: string = this.getSessionName();
+
+    const inFlight: Promise<boolean> | undefined =
+      inFlightSessionRefreshes.get(sessionName);
+
+    if (inFlight) {
+      return await inFlight;
+    }
+
+    const refresh: Promise<boolean> = this.runWithSessionLock(
+      sessionName,
+      async (): Promise<boolean> => {
+        if (this.wasSessionRefreshedRecently(sessionName)) {
+          return true;
+        }
 
         const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
           await super.fetch<JSONObject>({
@@ -156,20 +246,91 @@ class BaseAPI extends API {
             options: {
               skipAuthRefresh: true,
               hasAttemptedAuthRefresh: true,
+              /*
+               * A refresh that fails because the identity service is
+               * restarting is not a dead session, and treating it as one logs
+               * the user out. Retry what a retry can fix; a 401 is final.
+               */
+              retries: 2,
+              exponentialBackoff: true,
+              retryOnlyOnRetryableErrors: true,
             },
           });
 
-        if (result instanceof HTTPResponse && result.isSuccess()) {
-          return true;
+        const refreshed: boolean =
+          result instanceof HTTPResponse && result.isSuccess();
+
+        if (refreshed) {
+          this.markSessionRefreshed(sessionName);
         }
 
+        return refreshed;
+      },
+    ).finally(() => {
+      inFlightSessionRefreshes.delete(sessionName);
+    });
+
+    inFlightSessionRefreshes.set(sessionName, refresh);
+
+    return await refresh;
+  }
+
+  private static getSessionRefreshedAtKey(sessionName: string): string {
+    return `session-refreshed-at:${sessionName}`;
+  }
+
+  private static wasSessionRefreshedRecently(sessionName: string): boolean {
+    try {
+      const refreshedAt: number = Number(
+        LocalStorage.getItem(this.getSessionRefreshedAtKey(sessionName)),
+      );
+
+      if (!refreshedAt) {
         return false;
-      })().finally(() => {
-        this.refreshPromise = null;
-      });
+      }
+
+      const ageInMs: number = Date.now() - refreshedAt;
+
+      return (
+        ageInMs >= 0 && ageInMs < BaseAPI.RECENT_SESSION_REFRESH_WINDOW_IN_MS
+      );
+    } catch {
+      // Storage can be unavailable (privacy modes); then every tab refreshes.
+      return false;
+    }
+  }
+
+  private static markSessionRefreshed(sessionName: string): void {
+    try {
+      LocalStorage.setItem(
+        this.getSessionRefreshedAtKey(sessionName),
+        Date.now().toString(),
+      );
+    } catch {
+      // Best effort, as above.
+    }
+  }
+
+  /*
+   * Web Locks serialise the refresh across every tab of this origin. Where
+   * they are unavailable the refresh simply runs, which is what happened
+   * before this lock existed.
+   */
+  private static async runWithSessionLock(
+    sessionName: string,
+    work: () => Promise<boolean>,
+  ): Promise<boolean> {
+    const locks: LockManager | undefined =
+      typeof navigator !== "undefined" ? navigator.locks : undefined;
+
+    if (!locks || typeof locks.request !== "function") {
+      return await work();
     }
 
-    return await this.refreshPromise;
+    return await locks.request(
+      `oneuptime-session-refresh:${sessionName}`,
+      work,
+    );
   }
 
   protected static getLoginRoute(): Route {

package/UI/Utils/API/RequestOptions.ts

@@ -2,10 +2,21 @@ import URL from "../../../Types/API/URL";
 import type { RequestOptions as CoreRequestOptions } from "../../../Utils/API";
 import Dictionary from "../../../Types/Dictionary";
 import { JSONObject } from "../../../Types/JSON";
+import type BaseAPI from "./API";
 
 export default interface RequestOptions {
   requestHeaders?: Dictionary<string> | undefined;
   overrideRequestUrl?: URL | undefined;
+  /*
+   * The client that sends THIS request instead of the model API's default
+   * (the dashboard client, or a subclass's getApiClient()). Set by callers
+   * that route a shared model request to another app's endpoint - a public
+   * dashboard widget's /public-dashboard-api/resource-list read - so that
+   * endpoint's 401/403 is handled by that app's client (its master-password
+   * page), never by the dashboard's refresh-token + User.logout +
+   * /accounts/login.
+   */
+  apiClient?: typeof BaseAPI | undefined;
   apiRequestOptions?: CoreRequestOptions | undefined;
   /*
    * Extra top-level fields merged into a list request body before the

package/UI/Utils/AnalyticsModelAPI/AnalyticsModelAPI.ts

@@ -28,6 +28,24 @@ export type ListResult<TAnalyticsBaseModel extends AnalyticsBaseModel> =
   BaseListResult<TAnalyticsBaseModel>;
 
 export default class ModelAPI {
+  /**
+   * The API client used for analytics model requests: the authenticated
+   * dashboard client.
+   */
+  protected static getApiClient(): typeof API {
+    return API;
+  }
+
+  /*
+   * The client for ONE request: a client the caller routed this request
+   * through (RequestOptions.apiClient) wins; otherwise this class's client.
+   */
+  protected static getApiClientForRequest(
+    requestOptions?: RequestOptions | undefined,
+  ): typeof API {
+    return requestOptions?.apiClient || this.getApiClient();
+  }
+
   public static async create<
     TAnalyticsBaseModel extends AnalyticsBaseModel,
   >(data: {
@@ -103,7 +121,7 @@ export default class ModelAPI {
           | JSONArray
           | TAnalyticsBaseModel
           | Array<TAnalyticsBaseModel>
-        > = await API.fetch<
+        > = await this.getApiClientForRequest(requestOptions).fetch<
       JSONObject | JSONArray | TAnalyticsBaseModel | Array<TAnalyticsBaseModel>
     >({
       method: HTTPMethod.PUT,
@@ -155,7 +173,9 @@ export default class ModelAPI {
     }
 
     const apiResult: HTTPErrorResponse | HTTPResponse<TAnalyticsBaseModel> =
-      await API.fetch<TAnalyticsBaseModel>({
+      await this.getApiClientForRequest(
+        requestOptions,
+      ).fetch<TAnalyticsBaseModel>({
         method: httpMethod,
         url: apiUrl,
         data: {
@@ -221,7 +241,7 @@ export default class ModelAPI {
     const headers: Dictionary<string> = this.getCommonHeaders(requestOptions);
 
     const result: HTTPResponse<JSONArray> | HTTPErrorResponse =
-      await API.fetch<JSONArray>({
+      await this.getApiClientForRequest(requestOptions).fetch<JSONArray>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -288,7 +308,7 @@ export default class ModelAPI {
     const headers: Dictionary<string> = this.getCommonHeaders(requestOptions);
 
     const result: HTTPResponse<JSONArray> | HTTPErrorResponse =
-      await API.fetch<JSONArray>({
+      await this.getApiClientForRequest(requestOptions).fetch<JSONArray>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -355,7 +375,7 @@ export default class ModelAPI {
     const headers: Dictionary<string> = this.getCommonHeaders(requestOptions);
 
     const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
-      await API.fetch<JSONObject>({
+      await this.getApiClientForRequest(requestOptions).fetch<JSONObject>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -440,7 +460,9 @@ export default class ModelAPI {
     requestOptions?: RequestOptions | undefined,
   ): Promise<TAnalyticsBaseModel | null> {
     const result: HTTPResponse<TAnalyticsBaseModel> | HTTPErrorResponse =
-      await API.fetch<TAnalyticsBaseModel>({
+      await this.getApiClientForRequest(
+        requestOptions,
+      ).fetch<TAnalyticsBaseModel>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -488,7 +510,9 @@ export default class ModelAPI {
     }
 
     const result: HTTPResponse<TAnalyticsBaseModel> | HTTPErrorResponse =
-      await API.fetch<TAnalyticsBaseModel>({
+      await this.getApiClientForRequest(
+        requestOptions,
+      ).fetch<TAnalyticsBaseModel>({
         method: HTTPMethod.DELETE,
         url: apiUrl,
         headers: this.getCommonHeaders(requestOptions),

package/UI/Utils/ModelAPI/ModelAPI.ts

@@ -47,6 +47,16 @@ export default class ModelAPI {
     return API;
   }
 
+  /*
+   * The client for ONE request: a client the caller routed this request
+   * through (RequestOptions.apiClient) wins; otherwise this class's client.
+   */
+  protected static getApiClientForRequest(
+    requestOptions?: RequestOptions | undefined,
+  ): typeof API {
+    return requestOptions?.apiClient || this.getApiClient();
+  }
+
   public static async create<TBaseModel extends BaseModel>(data: {
     model: TBaseModel;
     modelType: { new (): TBaseModel };
@@ -109,7 +119,7 @@ export default class ModelAPI {
 
     const result: HTTPResponse<
       JSONObject | JSONArray | TBaseModel | Array<TBaseModel>
-    > = await this.getApiClient().fetch<
+    > = await this.getApiClientForRequest(data.requestOptions).fetch<
       JSONObject | JSONArray | TBaseModel | Array<TBaseModel>
     >({
       method: HTTPMethod.PUT,
@@ -163,7 +173,7 @@ export default class ModelAPI {
     }
 
     const apiResult: HTTPErrorResponse | HTTPResponse<TBaseModel> =
-      await this.getApiClient().fetch<TBaseModel>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<TBaseModel>({
         method: httpMethod,
         url: apiUrl,
         data: {
@@ -241,7 +251,7 @@ export default class ModelAPI {
     }
 
     const result: HTTPResponse<JSONArray> | HTTPErrorResponse =
-      await this.getApiClient().fetch<JSONArray>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<JSONArray>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -315,7 +325,7 @@ export default class ModelAPI {
     }
 
     const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
-      await this.getApiClient().fetch<JSONObject>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<JSONObject>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -343,10 +353,21 @@ export default class ModelAPI {
   ): Dictionary<string> {
     let headers: Dictionary<string> = {};
 
+    /*
+     * A request routed through another app's client (a public dashboard
+     * widget's /public-dashboard-api read) is not scoped to the viewer's own
+     * project: that client sends its own tenant header. The viewer's
+     * last-opened dashboard project would override it, and a stale or
+     * foreign one turns the public read into a 405 (tenant not found) that
+     * the public page treats as a login event.
+     */
+    const isRoutedToAnotherClient: boolean = Boolean(requestOptions?.apiClient);
+
     if (
-      !requestOptions ||
-      !requestOptions.isMultiTenantRequest ||
-      Object.keys(requestOptions).length === 0
+      !isRoutedToAnotherClient &&
+      (!requestOptions ||
+        !requestOptions.isMultiTenantRequest ||
+        Object.keys(requestOptions).length === 0)
     ) {
       /*
        * Read the tenant id via getCurrentProjectId() first - a plain string
@@ -427,7 +448,7 @@ export default class ModelAPI {
     requestOptions?: RequestOptions | undefined;
   }): Promise<TBaseModel | null> {
     const result: HTTPResponse<TBaseModel> | HTTPErrorResponse =
-      await this.getApiClient().fetch<TBaseModel>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<TBaseModel>({
         method: HTTPMethod.POST,
         url: data.apiUrl,
         data: {
@@ -476,7 +497,7 @@ export default class ModelAPI {
     }
 
     const result: HTTPResponse<TBaseModel> | HTTPErrorResponse =
-      await this.getApiClient().fetch<TBaseModel>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<TBaseModel>({
         method: HTTPMethod.DELETE,
         url: apiUrl,
         headers: this.getCommonHeaders(data.requestOptions),

package/UI/Utils/Navigation.ts

@@ -174,6 +174,15 @@ abstract class Navigation {
   }
 
   public static getCurrentRoute(): Route {
+    /*
+     * The router hands us its location once it has rendered. An API error can
+     * be handled before that (or outside a router altogether), and the address
+     * bar is the same answer then.
+     */
+    if (!this.location) {
+      return new Route(window.location.pathname);
+    }
+
     return new Route(this.location.pathname);
   }
 

package/UI/Utils/OpenAuthenticatedUrl.ts

@@ -0,0 +1,154 @@
+import BaseAPI from "./API/API";
+
+/*
+ * Opening an authenticated URL in a new tab, with the session refreshed first.
+ *
+ * A link to an authenticated API route (an attachment, a pprof export) is a
+ * plain navigation. It carries the session cookies but none of the API
+ * class's recovery: a request made through BaseAPI that comes back 401
+ * refreshes the session and replays itself, while a navigation simply shows
+ * the 401. The access cookie expires with the 15-minute access token, so on a
+ * page left open that long every such link opened a bare "Authentication
+ * required" page although the refresh token was still good. Refreshing before
+ * navigating makes the new tab arrive with a live access cookie. It costs
+ * nothing extra when another request or another tab has just refreshed:
+ * refreshSession() reuses that result.
+ */
+
+export type RefreshSessionFunction = () => Promise<boolean>;
+
+/*
+ * The part of a click event the link handler reads. React.MouseEvent
+ * satisfies it, and so does a DOM MouseEvent, so this module needs neither.
+ */
+export interface AuthenticatedLinkClickEvent {
+  button: number;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  shiftKey: boolean;
+  altKey: boolean;
+  defaultPrevented: boolean;
+  preventDefault: () => void;
+}
+
+/*
+ * The dashboard's session. A client with a session of its own (the status
+ * page) passes its API class's refresh instead.
+ */
+const refreshDashboardSession: RefreshSessionFunction =
+  async (): Promise<boolean> => {
+    return await BaseAPI.refreshSession();
+  };
+
+/*
+ * Point a tab this click already opened at the URL, once the session has been
+ * refreshed. A refresh that did not work closes the tab instead: a refused one
+ * means the session has ended and this page's API client is already taking
+ * the user to the login page, and one that got no answer means the server
+ * cannot be reached, so the tab would only show an error either way.
+ */
+async function navigateTabAfterRefresh(
+  tab: Window,
+  url: string,
+  refreshSession: RefreshSessionFunction,
+): Promise<void> {
+  /*
+   * Cut loose from this page, as rel="noopener" would have done. A blank tab
+   * opened WITH the "noopener" feature could not be pointed anywhere
+   * afterwards, because window.open returns null for it.
+   */
+  tab.opener = null;
+
+  let refreshed: boolean = false;
+
+  try {
+    refreshed = await refreshSession();
+  } catch {
+    refreshed = false;
+  }
+
+  // Closed while the refresh ran: the user changed their mind.
+  if (tab.closed) {
+    return;
+  }
+
+  if (!refreshed) {
+    tab.close();
+    return;
+  }
+
+  tab.location.href = url;
+}
+
+export default async function openAuthenticatedUrl(
+  url: string,
+  refreshSession: RefreshSessionFunction = refreshDashboardSession,
+): Promise<void> {
+  /*
+   * Popup blockers let window.open through only while the click is still
+   * being handled; once the handler has awaited something, Safari and Firefox
+   * no longer count the new tab as the user's doing and block it. So the tab
+   * is opened now, blank, and pointed at the URL once the refresh has settled.
+   */
+  const newTab: Window | null = window.open("", "_blank");
+
+  if (!newTab) {
+    /*
+     * Blocked. Ask for the URL itself, still inside the click: without a tab
+     * to hold, there is nothing to refresh the session for.
+     */
+    window.open(url, "_blank", "noopener,noreferrer");
+    return;
+  }
+
+  await navigateTabAfterRefresh(newTab, url, refreshSession);
+}
+
+/*
+ * The onClick for an <a href={url} target="_blank"> that points at an
+ * authenticated route. The href stays on the element so middle-click, "copy
+ * link address" and the context menu keep working exactly as before (those
+ * paths get no refresh); a plain click opens the URL in a tab of its own once
+ * the session is refreshed.
+ */
+export function handleAuthenticatedLinkClick(
+  event: AuthenticatedLinkClickEvent,
+  url: string,
+  refreshSession?: RefreshSessionFunction,
+): void {
+  /*
+   * Modified clicks stay the browser's: cmd/ctrl-click opens a background
+   * tab, shift-click a new window, alt-click downloads. Turning all of them
+   * into a foreground tab would be a surprise.
+   */
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return;
+  }
+
+  /*
+   * Open the tab before deciding to take the click over. Where window.open
+   * is refused (a popup-blocking extension, some in-app browsers) the anchor's
+   * own navigation may still be allowed, so the click is left to it - no
+   * refresh, but a link that opens, as it always did.
+   */
+  const newTab: Window | null = window.open("", "_blank");
+
+  if (!newTab) {
+    return;
+  }
+
+  event.preventDefault();
+
+  void navigateTabAfterRefresh(
+    newTab,
+    url,
+    refreshSession || refreshDashboardSession,
+  );
+}