@oneuptime/common 13.0.4 → 13.0.5

package/UI/Components/CopyTextButton/CopyTextButton.tsx

@@ -33,7 +33,13 @@ const CopyTextButton: FunctionComponent<ComponentProps> = (
   ) => {
     event.preventDefault();
     event.stopPropagation();
-    await Clipboard.copyToClipboard(props.textToBeCopied);
+    // A refused or unavailable clipboard resolves false; "Copied!" would lie.
+    const succeeded: boolean = await Clipboard.copyToClipboard(
+      props.textToBeCopied,
+    );
+    if (!succeeded) {
+      return;
+    }
     setCopied(true);
     setTimeout(() => {
       setCopied(false);

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -5,7 +5,7 @@ import PermissionGate, {
   PermissionGateResult,
 } from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
-import Card, { CardButtonSchema } from "../Card/Card";
+import Card, { CardButtonSchema, CardHeaderLayout } from "../Card/Card";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Detail from "../Detail/Detail";
 import { DropdownOption } from "../Dropdown/Dropdown";
@@ -95,6 +95,8 @@ export interface ComponentProps {
    * somebody edits it here.
    */
   onValuesLoaded?: ((customFields: JSONObject) => void) | undefined;
+  // Handed to the Card; "stacked" suits a narrow column.
+  headerLayout?: CardHeaderLayout | undefined;
 }
 
 const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
@@ -362,6 +364,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       title={props.title}
       description={props.description}
       buttons={cardButtons}
+      headerLayout={props.headerLayout}
     >
       <div className="border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2">
         {isLoading && !loadError && <ComponentLoader />}

package/UI/Components/Detail/Detail.tsx

@@ -8,6 +8,7 @@ import DictionaryOfStringsViewer from "../Dictionary/DictionaryOfStingsViewer";
 import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import DropdownValueBadge from "../Dropdown/DropdownValueBadge";
 import HiddenText from "../HiddenText/HiddenText";
+import Link from "../Link/Link";
 import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import ObjectIDView from "../ObjectID/ObjectIDView";
 import FieldType from "../Types/FieldType";
@@ -27,6 +28,12 @@ export enum DetailStyle {
   Default = "default",
   Card = "card",
   Minimal = "minimal",
+  /*
+   * Dense label-over-value rows split by hairline dividers, for the narrow
+   * right-hand details column of an overview page. Opt-in: the other styles
+   * render exactly as before.
+   */
+  Compact = "compact",
 }
 
 export interface ComponentProps<T extends GenericObject> {
@@ -44,7 +51,7 @@ type DetailFunction = <T extends GenericObject>(
 const Detail: DetailFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  const { translateString } = useTranslateValue();
+  const { translateString, translateValue } = useTranslateValue();
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -385,6 +392,117 @@ const Detail: DetailFunction = <T extends GenericObject>(
     );
   };
 
+  type GetFieldValueContentFunction = (
+    field: Field<T>,
+    data: string | ReactElement,
+  ) => ReactElement;
+
+  // The rendered value (or its placeholder), shared by every style.
+  const getFieldValueContent: GetFieldValueContentFunction = (
+    field: Field<T>,
+    data: string | ReactElement,
+  ): ReactElement => {
+    return (
+      <>
+        {data && (
+          <div
+            className={`${field.contentClassName || ""} w-full ${
+              field.opts?.isCopyable
+                ? "flex items-center gap-3 group/copyable"
+                : ""
+            }`}
+          >
+            <div className="break-words leading-relaxed">{data}</div>
+
+            {field.opts?.isCopyable &&
+              field.fieldType !== FieldType.HiddenText && (
+                <div className="opacity-0 group-hover/copyable:opacity-100 transition-all duration-200 transform group-hover/copyable:translate-x-0 -translate-x-1">
+                  <CopyableButton textToBeCopied={data.toString()} />
+                </div>
+              )}
+          </div>
+        )}
+        {(data === null || data === undefined || data === "") &&
+          field.placeholder && <PlaceholderText text={field.placeholder} />}
+      </>
+    );
+  };
+
+  type GetCompactFieldFunction = (
+    field: Field<T>,
+    index: number,
+    data: string | ReactElement,
+    colSpanClassName: string,
+    alignClassName: string,
+  ) => ReactElement;
+
+  /*
+   * DetailStyle.Compact. The DOM keeps the same shape as the other styles -
+   * a row holding the label block (div.space-y-1) and then the value - so
+   * anything that walks from a label to its value keeps working; only the
+   * spacing and type scale change. Rows sit flush in a single column (the
+   * container draws hairline dividers between them) and fall back to plain
+   * vertical rhythm when several columns share a row.
+   */
+  const getCompactField: GetCompactFieldFunction = (
+    field: Field<T>,
+    index: number,
+    data: string | ReactElement,
+    colSpanClassName: string,
+    alignClassName: string,
+  ): ReactElement => {
+    const translatedTitle: string | undefined = translateString(field.title);
+    const translatedDescription: string | ReactElement | undefined =
+      translateValue(field.description);
+    const translatedSideLinkText: string | undefined = translateString(
+      field.sideLink?.text,
+    );
+    const isSingleColumn: boolean =
+      (props.showDetailsInNumberOfColumns || 1) <= 1;
+
+    return (
+      <div
+        className={`${colSpanClassName} min-w-0 py-3${
+          isSingleColumn ? " first:pt-0 last:pb-0" : ""
+        }`}
+        key={index}
+        id={props.id}
+      >
+        <div className="space-y-1">
+          {translatedTitle && (
+            <label
+              className={`${alignClassName} items-center gap-2 text-xs font-medium text-gray-500`}
+            >
+              <span>{translatedTitle}</span>
+              {field.sideLink &&
+                translatedSideLinkText &&
+                field.sideLink.url && (
+                  <Link
+                    to={field.sideLink.url}
+                    openInNewTab={field.sideLink.openLinkInNewTab}
+                    className="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 hover:underline underline-offset-2"
+                  >
+                    {translatedSideLinkText}
+                  </Link>
+                )}
+            </label>
+          )}
+          {translatedDescription && (
+            <div
+              className={`${alignClassName} text-xs leading-5 text-gray-400`}
+            >
+              {translatedDescription}
+            </div>
+          )}
+        </div>
+
+        <div className={`mt-1 text-sm text-gray-900 ${alignClassName}`}>
+          {getFieldValueContent(field, data)}
+        </div>
+      </div>
+    );
+  };
+
   type GetFieldFunction = (field: Field<T>, index: number) => ReactElement;
 
   // Helper function to get nested property values using dot notation
@@ -795,6 +913,10 @@ const Detail: DetailFunction = <T extends GenericObject>(
     const isCardStyle: boolean = styleType === DetailStyle.Card;
     const isMinimalStyle: boolean = styleType === DetailStyle.Minimal;
 
+    if (styleType === DetailStyle.Compact) {
+      return getCompactField(field, index, data, className, alignClassName);
+    }
+
     /* Container classes based on style - uses first:pt-0 to remove top padding from first field */
     let containerClasses: string =
       "group transition-all duration-200 ease-in-out";
@@ -837,26 +959,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
             isCardStyle ? "text-gray-800" : "text-gray-700"
           }`}
         >
-          {data && (
-            <div
-              className={`${field.contentClassName || ""} w-full ${
-                field.opts?.isCopyable
-                  ? "flex items-center gap-3 group/copyable"
-                  : ""
-              }`}
-            >
-              <div className="break-words leading-relaxed">{data}</div>
-
-              {field.opts?.isCopyable &&
-                field.fieldType !== FieldType.HiddenText && (
-                  <div className="opacity-0 group-hover/copyable:opacity-100 transition-all duration-200 transform group-hover/copyable:translate-x-0 -translate-x-1">
-                    <CopyableButton textToBeCopied={data.toString()} />
-                  </div>
-                )}
-            </div>
-          )}
-          {(data === null || data === undefined || data === "") &&
-            field.placeholder && <PlaceholderText text={field.placeholder} />}
+          {getFieldValueContent(field, data)}
         </div>
       </div>
     );
@@ -867,7 +970,19 @@ const Detail: DetailFunction = <T extends GenericObject>(
   const isCardStyle: boolean = styleType === DetailStyle.Card;
 
   // Grid gap classes - cards need more gap, others less since they have internal padding
-  const gapClasses: string = isCardStyle ? "gap-4" : "gap-0";
+  let gapClasses: string = isCardStyle ? "gap-4" : "gap-0";
+
+  if (styleType === DetailStyle.Compact) {
+    /*
+     * Hairline dividers between stacked rows. Once several columns share a
+     * row (sm and up) a top border would also land on the first row's
+     * right-hand cells, so that layout separates cells with whitespace.
+     */
+    gapClasses =
+      (props.showDetailsInNumberOfColumns || 1) > 1
+        ? "gap-0 divide-y divide-gray-100 sm:gap-x-6 sm:divide-y-0"
+        : "gap-0 divide-y divide-gray-100";
+  }
 
   return (
     <div

package/UI/Components/ErrorBoundary.tsx

@@ -144,6 +144,35 @@ export const reloadPage: ReloadPageFunction = (): void => {
   window.location.reload();
 };
 
+/*
+ * Leaving a page aborts whatever the document is still downloading, and
+ * Firefox rejects a lazy route bundle cut off that way with the very "error
+ * loading dynamically imported module" a stale deploy produces. Reloading then
+ * is not a recovery: window.location.reload() replaces the navigation that was
+ * just started, so the page being left loads again and the destination never
+ * does. Anyone who leaves a page, or is sent on by a forced navigation, while a
+ * route bundle is still downloading is bounced back. The E2E onboarding showed
+ * it on every Firefox run: opening /dashboard/welcome while /dashboard/ was
+ * still fetching its Init route bundle reloaded /dashboard/ instead.
+ *
+ * The browser fires beforeunload before it cancels those downloads, so a chunk
+ * error arriving after it is a side effect of leaving, not a missing asset.
+ * pageshow marks the document as in use again (a back/forward cache restore).
+ * If a beforeunload prompt keeps the user on the page, a later chunk error
+ * shows the fallback and its Reload button instead of reloading by itself.
+ */
+let isDocumentUnloading: boolean = false;
+
+if (typeof window !== "undefined") {
+  window.addEventListener("beforeunload", (): void => {
+    isDocumentUnloading = true;
+  });
+
+  window.addEventListener("pageshow", (): void => {
+    isDocumentUnloading = false;
+  });
+}
+
 /**
  * Recover from a stale-bundle error by reloading once. Returns true when a
  * reload was triggered, so the caller knows the fallback is only transient.
@@ -157,6 +186,15 @@ export const handleChunkLoadError: HandleChunkLoadErrorFunction = (
     return false;
   }
 
+  /*
+   * Checked before the cooldown is recorded: sessionStorage outlives this
+   * document, and the page being navigated to must not inherit a cooldown for
+   * an error that never called for a reload.
+   */
+  if (isDocumentUnloading) {
+    return false;
+  }
+
   const now: number = Date.now();
 
   if (hasRecentlyReloadedForChunkLoadError(now)) {