@oneuptime/common 12.0.20 → 12.0.22

package/Types/Email/EmailTemplateType.ts

@@ -10,6 +10,8 @@ enum EmailTemplateType {
   ConfirmStatusPageSubscription = "ConfirmStatusPageSubscription.hbs",
   EmailVerified = "EmailVerified.hbs",
   PasswordChanged = "PasswordChanged.hbs",
+  TwoFactorBackupCodeUsed = "TwoFactorBackupCodeUsed.hbs",
+  TwoFactorBackupCodesRegenerated = "TwoFactorBackupCodesRegenerated.hbs",
   ProbeOwnerAdded = "ProbeOwnerAdded.hbs",
   InviteMember = "InviteMember.hbs",
   EmailChanged = "EmailChanged.hbs",

package/Types/Marketing/Attribution.ts

@@ -3,19 +3,14 @@
  * writes it.
  *
  * Attribution starts in the browser (Home/Views/head-basic.ejs stores it in
- * localStorage) and reaches the server through two unrelated doors:
+ * localStorage) and reaches the server through the signup form
+ * (App/FeatureSet/Accounts/src/Pages/Register.tsx), which posts it onto the
+ * User record.
  *
- *   - the signup form (App/FeatureSet/Accounts/src/Pages/Register.tsx), which
- *     posts it onto the User record;
- *   - the Cal.com booking webhook (App/API/CalWebhook.ts), which reads it back
- *     out of the booking metadata the embed carried. Every page that books —
- *     /enterprise/demo, /support, /enterprise/self-hosted — goes through it.
- *
- * Both doors are reachable by an unauthenticated caller, so both must whitelist
- * and length-bound what they accept. Keeping the key lists here rather than in
- * each door means a key added for the browser cannot be silently dropped by one
- * of the readers — which is exactly what happened to UTM parameters on the Cal
- * path, where the webhook parsed click IDs the embed never sent.
+ * That door is reachable by an unauthenticated caller, so it must whitelist and
+ * length-bound what it accepts. Keeping the key lists here rather than in the
+ * door itself means a key added for the browser cannot be silently dropped on
+ * arrival.
  */
 
 // Ad-platform click identifiers, in the spelling each platform uses on the URL.
@@ -31,9 +26,8 @@ export const AdClickIdKeys: Array<string> = [
 ];
 
 /*
- * UTM parameters travel as snake_case on a URL and in Cal booking metadata,
- * and as camelCase once they are columns on User/Project/MarketingConversion.
- * Both spellings are accepted on the way in — Cal booking questions and hand
+ * UTM parameters travel as snake_case on a URL and as camelCase once they are
+ * columns on User/Project. Both spellings are accepted on the way in — hand
  * written links produce either — and only the camelCase form is stored.
  */
 export const UtmWireKeyToPropertyKey: Record<string, string> = {

package/Types/Marketing/MarketingEvent.ts

@@ -13,7 +13,7 @@ import { JSONObject } from "../JSON";
  *
  *   - DEDUPLICATION. `eventId` is stable for a given real-world occurrence, so
  *     a redelivery carries the id the first attempt did. Retries are expected
- *     (the queue retries, and Cal retries into us), so a receiver that keys on
+ *     (the delivery queue retries), so a receiver that keys on
  *     anything else will double-count.
  *   - ORDERING. Events are delivered per-occurrence with no sequence number.
  *     A signup and a plan change seconds apart may arrive either way round;
@@ -26,7 +26,6 @@ import { JSONObject } from "../JSON";
  */
 export enum MarketingEventType {
   SignUp = "sign_up",
-  MeetingBooked = "meeting_booked",
   /*
    * A project's first paid subscription, created together with the project.
    *
@@ -45,53 +44,19 @@ export enum MarketingEventType {
    * whose email is typed in by a human rather than captured from a session —
    * which is exactly what makes it joinable: set EnterpriseLicense.email to
    * the address the customer booked with and this event shares an identity
-   * with the meeting_booked that preceded it, months earlier.
+   * with whatever else that address has done, months earlier.
    */
   EnterpriseLicenseIssued = "enterprise_license_issued",
 }
 
-/*
- * Which conversation a booked meeting actually is.
- *
- * All three Cal embeds book the same event type (oneuptimehq/demo), so without
- * this the webhook cannot tell a free user's support call from a net-new
- * enterprise demo — they arrive as one undifferentiated `meeting_booked`, and
- * anything bidding on or reporting against that count values them identically.
- *
- * The browser event has carried this since the embeds were instrumented; the
- * webhook did not, which meant the authoritative record was the one that could
- * not make the distinction.
- *
- * `Unknown` is a real state, not a failure: a booking made through a Cal link
- * that was not one of the instrumented embeds genuinely has no kind, and is
- * still a booking worth emitting.
- */
-export enum MeetingBookingKind {
-  EnterpriseDemo = "enterprise_demo",
-  SupportCall = "support_call",
-  ArchitectureAssessment = "architecture_assessment",
-  Unknown = "unknown",
-}
-
-/*
- * The Cal booking-metadata key the embeds write and the webhook reads. Shared
- * so a rename cannot land on one side only - the failure mode there is silent,
- * because a booking with no recognised kind still succeeds.
- */
-export const BOOKING_KIND_METADATA_KEY: string = "ou_booking_kind";
-
-export const MeetingBookingKinds: Array<string> =
-  Object.values(MeetingBookingKind);
-
 export const MARKETING_EVENT_SCHEMA_VERSION: number = 1;
 
 /*
  * The campaign the converting visitor carried.
  *
- * Copied from the User or Project row for a signup or a plan change, and read
- * out of Cal booking metadata for a booked meeting. Every field is optional:
- * a conversion with no attribution at all is still a conversion, and is still
- * emitted.
+ * Copied from the User or Project row the conversion happened on. Every field
+ * is optional: a conversion with no attribution at all is still a conversion,
+ * and is still emitted.
  */
 export interface MarketingEventAttribution extends JSONObject {
   utmSource?: string | undefined;
@@ -110,17 +75,16 @@ export interface MarketingEvent extends JSONObject {
    * Stable per real-world occurrence, and the receiver's deduplication key:
    *
    *   sign_up:{userId}
-   *   meeting_booked:{calBookingUid}
    *   subscription_started:{projectId}
    *   subscription_upgraded:{projectId}:{occurredAt}
    *   subscription_downgraded:{projectId}:{occurredAt}
    *   enterprise_license_issued:{enterpriseLicenseId}
    *
-   * Four of these are naturally unique — a user signs up once, a booking has
-   * one uid, a project has one first subscription, a licence row is issued
-   * once — so Cal retrying a delivery or the queue retrying a job cannot
-   * produce a second conversion. A plan change can legitimately recur for one
-   * project, so its id carries the instant it happened.
+   * Three of these are naturally unique — a user signs up once, a project has
+   * one first subscription, a licence row is issued once — so the queue
+   * retrying a job cannot produce a second conversion. A plan change can
+   * legitimately recur for one project, so its id carries the instant it
+   * happened.
    */
   eventId: string;
   eventType: MarketingEventType;

package/Types/UserAuthenticationStatus.ts

@@ -47,6 +47,22 @@ export default interface UserAuthenticationStatus {
    */
   verifiedTwoFactorAuthMethodCount: number;
 
+  /*
+   * How many single-use backup codes the user has left.
+   *
+   * Deliberately NOT folded into `verifiedTwoFactorAuthMethodCount`, and the
+   * separation is the operator's whole decision. The count above answers "can
+   * they sign in at all today"; this one answers "can they get themselves back
+   * in without me". An operator looking at a lost-phone ticket needs both: a
+   * user with codes left should be told to use one, and only a user with none
+   * needs the reset button -- which signs them out everywhere and marches them
+   * through enrolment.
+   *
+   * Zero is the normal reading for an account that never generated any, not an
+   * error state.
+   */
+  unusedTwoFactorBackupCodeCount: number;
+
   // Is there an unexpired password-reset link outstanding for this user?
   hasPendingPasswordResetLink: boolean;
 }

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -63,6 +63,19 @@ export interface ComponentProps {
    * buckets calls back with the [start, end) of the selected time range.
    */
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  // Plain click on a bucket — see ChartLibrary onBucketClick.
+  onBucketClick?:
+    | ((
+        bucketStart: Date,
+        bucketEnd: Date,
+        valuesAtBucket: Record<string, number | string>,
+      ) => void)
+    | undefined;
+  /*
+   * Series rendered as compare-to-previous-period ghosts (dashed, faded,
+   * dotless). Names must exist in `data`.
+   */
+  ghostSeriesNames?: Array<string> | undefined;
   showLegend?: boolean | undefined;
   /**
    * Render a shaded "expected range" band underneath the plotted lines.
@@ -228,6 +241,8 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         }
         onExemplarClick={props.onExemplarClick}
         onTimeRangeSelect={props.onTimeRangeSelect}
+        onBucketClick={props.onBucketClick}
+        ghostCategories={props.ghostSeriesNames}
         anomalyBandLowerKey={bandLower}
         anomalyBandUpperKey={bandUpper}
       />

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -57,12 +57,27 @@ export interface ComponentProps {
   charts: Array<Chart>;
   hideCard?: boolean | undefined;
   chartCssClass?: string | undefined;
+  /**
+   * Share one crosshair-sync channel across SEVERAL ChartGroup instances
+   * (e.g. every metric widget on one dashboard passes the dashboard id,
+   * so hovering an instant on one widget highlights it on all of them).
+   * Absent → this group syncs only within itself.
+   */
+  syncId?: string | undefined;
 }
 
 const ChartGroup: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const syncId: string = Text.generateRandomText(10);
+  /*
+   * Stable per-mount fallback: a plain const regenerated the id on every
+   * render, which forced recharts to tear down and re-subscribe its sync
+   * listeners on each parent re-render (auto-refresh ticks included).
+   */
+  const [fallbackSyncId] = useState<string>(() => {
+    return Text.generateRandomText(10);
+  });
+  const syncId: string = props.syncId || fallbackSyncId;
   const [metricInfoModalChart, setMetricInfoModalChart] =
     useState<ChartMetricInfo | null>(null);
 

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -54,6 +54,24 @@ import ChartCurve from "../../Types/ChartCurve";
  */
 const MAX_LABELED_TIME_REFERENCE_LINES: number = 6;
 
+/*
+ * recharts invokes child event handlers with varying shapes ((event) for
+ * plain SVG passthrough, (data, event) for adapted children) — find the
+ * DOM event wherever it is so propagation can be stopped reliably.
+ */
+function stopChartEventPropagation(...args: Array<unknown>): void {
+  for (const candidate of args) {
+    if (
+      candidate &&
+      typeof (candidate as { stopPropagation?: unknown }).stopPropagation ===
+        "function"
+    ) {
+      (candidate as { stopPropagation: () => void }).stopPropagation();
+      return;
+    }
+  }
+}
+
 //#region Legend
 
 interface LegendItemProps {
@@ -613,6 +631,26 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Plain click on a time bucket (the plot background — dot/legend clicks
+   * and drag-selections never reach this). [bucketStart, bucketEnd) uses
+   * the same adjacent-row width derivation as drag-to-select. Fires only
+   * when no toggle-selection is active: a click that clears an active
+   * legend/dot selection keeps its existing meaning.
+   */
+  onBucketClick?:
+    | ((
+        bucketStart: Date,
+        bucketEnd: Date,
+        // The clicked row: one numeric entry per series + the axis keys.
+        valuesAtBucket: Record<string, number | string>,
+      ) => void)
+    | undefined;
+  /**
+   * Categories rendered as compare-to-previous-period ghosts: dashed,
+   * faded, no fill, no dots — context, not data.
+   */
+  ghostCategories?: Array<string> | undefined;
   /**
    * Render a shaded "expected range" band underneath the data lines.
    * Both keys must already be present on every entry of `data` (the
@@ -661,6 +699,8 @@ const AreaChart: React.ForwardRefExoticComponent<
       formattedTimeReferenceLines,
       formattedReferenceRegions,
       onTimeRangeSelect,
+      onBucketClick,
+      ghostCategories,
       ...other
     } = props;
     const CustomTooltip: React.ComponentType<TooltipProps> | undefined =
@@ -928,7 +968,12 @@ const AreaChart: React.ForwardRefExoticComponent<
         <ResponsiveContainer>
           <RechartsAreaChart
             data={data}
-            syncId={props.syncid?.toString() || ""}
+            /*
+             * Omitted, not "": recharts treats "" as a real sync
+             * channel, so every unsynced chart page-wide would
+             * accidentally sync with every other one.
+             */
+            {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
             {...(hasOnTimeRangeSelect
               ? {
                   onMouseDown: handleRangeSelectMouseDown,
@@ -936,19 +981,51 @@ const AreaChart: React.ForwardRefExoticComponent<
                   onMouseUp: handleRangeSelectMouseUp,
                 }
               : {})}
-            onClick={
-              hasOnValueChange && (activeLegend || activeDot)
-                ? () => {
-                    // Ignore the click that follows a drag-to-select.
-                    if (suppressNextClickRef.current) {
-                      return;
-                    }
-                    setActiveDot(undefined);
-                    setActiveLegend(undefined);
-                    onValueChange?.(null);
-                  }
-                : () => {}
-            }
+            onClick={(chartState: RangeSelectionChartState) => {
+              // Ignore the click that follows a drag-to-select.
+              if (suppressNextClickRef.current) {
+                return;
+              }
+              /*
+               * A click while a legend/dot selection is active keeps its
+               * long-standing meaning — clear the selection — and never
+               * also pins a bucket.
+               */
+              if (hasOnValueChange && (activeLegend || activeDot)) {
+                setActiveDot(undefined);
+                setActiveLegend(undefined);
+                onValueChange?.(null);
+                return;
+              }
+              if (!onBucketClick) {
+                return;
+              }
+              const rowIndex: number | null =
+                getRowIndexFromChartState(chartState);
+              if (rowIndex === null) {
+                return;
+              }
+              const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
+              if (!bucketStart) {
+                return;
+              }
+              /*
+               * Cover the full bucket: width from adjacent row dates, the
+               * same derivation drag-to-select uses.
+               */
+              const adjacentDate: Date | null =
+                rowIndex > 0
+                  ? getBucketDateAtIndex(rowIndex - 1)
+                  : getBucketDateAtIndex(rowIndex + 1);
+              const bucketWidthInMs: number = adjacentDate
+                ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
+                : 0;
+              onBucketClick(
+                bucketStart,
+                new Date(bucketStart.getTime() + bucketWidthInMs),
+                (data[rowIndex] || {}) as Record<string, number | string>,
+              );
+            }}
             margin={{
               bottom: (xAxisLabel
                 ? 40
@@ -1173,6 +1250,8 @@ const AreaChart: React.ForwardRefExoticComponent<
               ) as ChartColorValue;
               const hex: string = getColorHex(colorKey);
               const isCustomColor: boolean = isHexColorValue(colorKey);
+              const isGhost: boolean =
+                ghostCategories?.includes(category) || false;
 
               return (
                 <Area
@@ -1181,92 +1260,103 @@ const AreaChart: React.ForwardRefExoticComponent<
                   type={props.curve || ChartCurve.MONOTONE}
                   dataKey={category}
                   stroke={hex}
-                  strokeWidth={2}
+                  strokeWidth={isGhost ? 1.5 : 2}
                   strokeLinejoin="round"
                   strokeLinecap="round"
                   fill={`url(#${gradientId})`}
-                  fillOpacity={1}
+                  fillOpacity={isGhost ? 0 : 1}
                   strokeOpacity={
-                    activeDot || (activeLegend && activeLegend !== category)
+                    (activeDot || (activeLegend && activeLegend !== category)
                       ? 0.3
-                      : 1
+                      : 1) * (isGhost ? 0.45 : 1)
                   }
                   isAnimationActive={false}
                   connectNulls={connectNulls}
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  activeDot={(dotProps: any) => {
-                    const {
-                      cx: cxCoord,
-                      cy: cyCoord,
-                      stroke,
-                      strokeLinecap: slc,
-                      strokeLinejoin: slj,
-                      strokeWidth,
-                    } = dotProps;
-                    return (
-                      <Dot
-                        className={cx(
-                          "stroke-white",
-                          onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(colorKey, "fill"),
-                        )}
-                        cx={cxCoord}
-                        cy={cyCoord}
-                        r={5}
-                        fill={isCustomColor ? hex : ""}
-                        stroke={stroke}
-                        strokeLinecap={slc}
-                        strokeLinejoin={slj}
-                        strokeWidth={strokeWidth}
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        onClick={(_: any, event: any) => {
-                          return onDotClick(dotProps, event);
-                        }}
-                      />
-                    );
-                  }}
+                  activeDot={
+                    isGhost
+                      ? false
+                      : (dotProps: any) => {
+                          const {
+                            cx: cxCoord,
+                            cy: cyCoord,
+                            stroke,
+                            strokeLinecap: slc,
+                            strokeLinejoin: slj,
+                            strokeWidth,
+                          } = dotProps;
+                          return (
+                            <Dot
+                              className={cx(
+                                "stroke-white",
+                                onValueChange ? "cursor-pointer" : "",
+                                getColorClassName(colorKey, "fill"),
+                              )}
+                              cx={cxCoord}
+                              cy={cyCoord}
+                              r={5}
+                              fill={isCustomColor ? hex : ""}
+                              stroke={stroke}
+                              strokeLinecap={slc}
+                              strokeLinejoin={slj}
+                              strokeWidth={strokeWidth}
+                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                              onClick={(_: any, event: any) => {
+                                return onDotClick(dotProps, event);
+                              }}
+                            />
+                          );
+                        }
+                  }
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  dot={(dotProps: any) => {
-                    const {
-                      stroke,
-                      strokeLinecap: slc,
-                      strokeLinejoin: slj,
-                      strokeWidth,
-                      cx: cxCoord,
-                      cy: cyCoord,
-                      index: dotIndex,
-                    } = dotProps;
-
-                    if (
-                      (hasOnlyOneValueForKey(data, category) &&
-                        !(
-                          activeDot ||
-                          (activeLegend && activeLegend !== category)
-                        )) ||
-                      (activeDot?.index === dotIndex &&
-                        activeDot?.dataKey === category)
-                    ) {
-                      return (
-                        <Dot
-                          key={dotIndex}
-                          cx={cxCoord}
-                          cy={cyCoord}
-                          r={5}
-                          stroke={stroke}
-                          fill={isCustomColor ? hex : ""}
-                          strokeLinecap={slc}
-                          strokeLinejoin={slj}
-                          strokeWidth={strokeWidth}
-                          className={cx(
-                            "stroke-white",
-                            onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(colorKey, "fill"),
-                          )}
-                        />
-                      );
-                    }
-                    return <React.Fragment key={dotIndex}></React.Fragment>;
-                  }}
+                  dot={
+                    isGhost
+                      ? false
+                      : (dotProps: any) => {
+                          const {
+                            stroke,
+                            strokeLinecap: slc,
+                            strokeLinejoin: slj,
+                            strokeWidth,
+                            cx: cxCoord,
+                            cy: cyCoord,
+                            index: dotIndex,
+                          } = dotProps;
+
+                          if (
+                            (hasOnlyOneValueForKey(data, category) &&
+                              !(
+                                activeDot ||
+                                (activeLegend && activeLegend !== category)
+                              )) ||
+                            (activeDot?.index === dotIndex &&
+                              activeDot?.dataKey === category)
+                          ) {
+                            return (
+                              <Dot
+                                key={dotIndex}
+                                cx={cxCoord}
+                                cy={cyCoord}
+                                r={5}
+                                stroke={stroke}
+                                fill={isCustomColor ? hex : ""}
+                                strokeLinecap={slc}
+                                strokeLinejoin={slj}
+                                strokeWidth={strokeWidth}
+                                className={cx(
+                                  "stroke-white",
+                                  onValueChange ? "cursor-pointer" : "",
+                                  getColorClassName(colorKey, "fill"),
+                                )}
+                              />
+                            );
+                          }
+                          return (
+                            <React.Fragment key={dotIndex}></React.Fragment>
+                          );
+                        }
+                  }
+                  {...(isGhost ? { strokeDasharray: "6 4" } : {})}
                 />
               );
             })}
@@ -1310,7 +1400,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                     {...(region.original.onClick
                       ? {
                           style: { cursor: "pointer" as const },
-                          onClick: (): void => {
+                          onClick: (...args: Array<unknown>): void => {
+                            // Never let an annotation click also pin a bucket.
+                            stopChartEventPropagation(...args);
                             if (suppressNextClickRef.current) {
                               return;
                             }
@@ -1352,7 +1444,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                     {...(timeRefLine.original.onClick
                       ? {
                           style: { cursor: "pointer" as const },
-                          onClick: (): void => {
+                          onClick: (...args: Array<unknown>): void => {
+                            // Never let an annotation click also pin a bucket.
+                            stopChartEventPropagation(...args);
                             if (suppressNextClickRef.current) {
                               return;
                             }
@@ -1398,7 +1492,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                     stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
-                    onClick={() => {
+                    onClick={(...args: Array<unknown>) => {
+                      // Never let an exemplar click also pin a bucket.
+                      stopChartEventPropagation(...args);
                       // Ignore the click that follows a drag-to-select.
                       if (suppressNextClickRef.current) {
                         return;

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -843,7 +843,12 @@ const BarChart: React.ForwardRefExoticComponent<
         <ResponsiveContainer>
           <RechartsBarChart
             data={data}
-            syncId={props.syncid?.toString() || ""}
+            /*
+             * Omitted, not "": recharts treats "" as a real sync
+             * channel, so every unsynced chart page-wide would
+             * accidentally sync with every other one.
+             */
+            {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
             {...(hasOnValueChange && (activeLegend || activeBar)
               ? {
                   onClick: handleChartClick,