@oneuptime/common 14.0.3 → 14.0.5

package/Tests/App/Dashboard/TelemetryResourceRetentionSettings.test.tsx

@@ -23,6 +23,7 @@ import CloudSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Cloud/
 import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
 import RumSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Rum/View/Settings";
 import ServerlessSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Serverless/View/Settings";
+import DatabaseServerSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Database/View/Settings";
 import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
 import RouteMap, {
   RouteUtil,
@@ -32,6 +33,7 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import CloudResource from "../../../Models/DatabaseModels/CloudResource";
 import RumApplication from "../../../Models/DatabaseModels/RumApplication";
 import ServerlessFunction from "../../../Models/DatabaseModels/ServerlessFunction";
+import DatabaseServer from "../../../Models/DatabaseModels/DatabaseServer";
 import Route from "../../../Types/API/Route";
 import { JSONObject } from "../../../Types/JSON";
 import LogSeverity from "../../../Types/Log/LogSeverity";
@@ -195,6 +197,14 @@ const RESOURCES: Array<ResourceSettingsCase> = [
     detailIdPrefix: "serverless-function",
     hasSessionReplayRetention: false,
   },
+  {
+    name: "database",
+    Page: DatabaseServerSettings,
+    modelType: DatabaseServer,
+    settingsKey: PageMap.DATABASE_SERVER_VIEW_SETTINGS,
+    detailIdPrefix: "database-server",
+    hasSessionReplayRetention: false,
+  },
 ];
 
 let storedModel: BaseModel;

package/Tests/App/Dashboard/TracesResourceFacets.test.tsx

@@ -355,7 +355,7 @@ describe("TracesViewer — a facet for every resource type", () => {
       "resource.host.name",
     ]);
 
-    // The eight types that used to be missing are all asked for.
+    // The types beyond the original four (Databases included) are all asked for.
     for (const key of [
       "dockerSwarmClusterId",
       "proxmoxClusterId",
@@ -365,6 +365,7 @@ describe("TracesViewer — a facet for every resource type", () => {
       "cloudResourceId",
       "rumApplicationId",
       "iotFleetId",
+      "databaseServerId",
     ]) {
       expect(facetKeys).toContain(key);
     }

package/Tests/App/StatusPage/StatusPageHeaderForeignHiddenRule.test.tsx

@@ -0,0 +1,284 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  test,
+} from "@jest/globals";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { createInstance, i18n } from "i18next";
+import React from "react";
+import { I18nextProvider, initReactI18next } from "react-i18next";
+import URL from "../../../Types/API/URL";
+import Link from "../../../Types/Link";
+import {
+  LAPTOP_WIDTH_IN_PX,
+  PHONE_WIDTH_IN_PX,
+  TABLET_WIDTH_IN_PX,
+  TAILWIND_BREAKPOINTS_IN_PX,
+  VisibilityOptions,
+  WIDE_DESKTOP_WIDTH_IN_PX,
+  describeVisibility,
+  isVisibleAtWidth,
+  restorePreFixMarkup,
+} from "../../ResponsiveVisibility";
+import StatusPageHeader from "../../../../App/FeatureSet/StatusPage/src/Components/Header/Header";
+import StatusPageNavBar from "../../../../App/FeatureSet/StatusPage/src/Components/NavBar/NavBar";
+import englishLocale from "../../../../App/FeatureSet/StatusPage/src/Locales/en.json";
+
+/*
+ * A status page's header links and nav bar under a foreign
+ * `.hidden { display: none !important }`.
+ *
+ * The dashboard lost its navigation bar to that rule: Bootstrap 3 and HTML5
+ * Boilerplate define it, and browser extensions and user stylesheets inject it
+ * into every page. Status pages are read by our customers' own customers, on
+ * browsers we know even less about, and both rows here were hidden the same
+ * way — `hidden md:flex` — so the rule matched the bare class, outranked
+ * `md:flex`, and took the header links and every nav entry (Incidents,
+ * Subscribe, Log Out on a private page) off a desktop screen. A visitor
+ * checking on an outage was left with the overview and no way to the incident
+ * history.
+ *
+ * Both rows now use `max-md:hidden md:flex`: the same paint on a clean page,
+ * without the class the rule targets. Each group ends with a control that
+ * puts the old class strings back on the rendered markup and shows the same
+ * assertion failing.
+ */
+
+const translation: i18n = createInstance();
+
+const WITH_FOREIGN_HIDDEN_RULE: VisibilityOptions = {
+  withForeignHiddenRule: true,
+};
+
+const MD_WIDTH_IN_PX: number = TAILWIND_BREAKPOINTS_IN_PX["md"]!;
+
+// From md up both rows are meant to be on screen.
+const DESKTOP_WIDTHS_IN_PX: Array<number> = [
+  TABLET_WIDTH_IN_PX,
+  LAPTOP_WIDTH_IN_PX,
+  WIDE_DESKTOP_WIDTH_IN_PX,
+];
+
+// Below md both rows fold behind a menu button.
+const PHONE_WIDTHS_IN_PX: Array<number> = [
+  PHONE_WIDTH_IN_PX,
+  MD_WIDTH_IN_PX - 1,
+];
+
+// The kind of links a status page owner puts in the header.
+const HEADER_LINKS: Array<Link> = [
+  { title: "Website", to: URL.fromString("https://example.com") },
+  {
+    title: "Support",
+    to: URL.fromString("https://example.com/support"),
+    openInNewTab: true,
+  },
+];
+
+// Every entry a private page with subscriptions and history shows.
+const NAV_ENTRIES: Array<string> = [
+  "Overview",
+  "Incidents",
+  "Announcements",
+  "Scheduled Events",
+  "Subscribe",
+  "Log Out",
+];
+
+type VisibleWithRuleFunction = (width: number) => string;
+
+// What describeVisibility says about an element the rule leaves alone.
+const visibleWithRule: VisibleWithRuleFunction = (width: number): string => {
+  return `visible at ${width}px with a foreign .hidden rule on the page`;
+};
+
+type RenderFunction = () => Promise<void>;
+
+const renderHeader: RenderFunction = async (): Promise<void> => {
+  await act(async () => {
+    render(<StatusPageHeader links={HEADER_LINKS} onLogoClicked={() => {}} />);
+  });
+};
+
+const renderNavBar: RenderFunction = async (): Promise<void> => {
+  await act(async () => {
+    render(
+      <I18nextProvider i18n={translation}>
+        <StatusPageNavBar
+          show={true}
+          isPreview={false}
+          isPrivateStatusPage={true}
+          enableEmailSubscribers={true}
+          enableSMSSubscribers={false}
+          showIncidentsOnStatusPage={true}
+          showAnnouncementsOnStatusPage={true}
+          showScheduledMaintenanceEventsOnStatusPage={true}
+          showSubscriberPageOnStatusPage={true}
+        />
+      </I18nextProvider>,
+    );
+  });
+};
+
+type GetElementFunction = (name: string) => HTMLElement;
+
+// The desktop copies are links; the phone bar's active entry is a button.
+const getLink: GetElementFunction = (name: string): HTMLElement => {
+  return screen.getByRole("link", { name });
+};
+
+beforeAll(async () => {
+  await translation.use(initReactI18next).init({
+    lng: "en",
+    fallbackLng: "en",
+    resources: {
+      en: { translation: englishLocale },
+    },
+    interpolation: { escapeValue: false },
+  });
+});
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  window.localStorage.clear();
+});
+
+describe("status page header links with a foreign .hidden rule on the page", () => {
+  test.each(DESKTOP_WIDTHS_IN_PX)(
+    "at %ipx every header link is on screen with the rule",
+    async (width: number) => {
+      await renderHeader();
+
+      for (const link of HEADER_LINKS) {
+        expect(
+          describeVisibility(
+            getLink(link.title),
+            width,
+            WITH_FOREIGN_HIDDEN_RULE,
+          ),
+        ).toBe(visibleWithRule(width));
+      }
+    },
+  );
+
+  test("below md they fold behind the menu button, which the rule leaves alone", async () => {
+    await renderHeader();
+
+    for (const width of PHONE_WIDTHS_IN_PX) {
+      for (const link of HEADER_LINKS) {
+        expect(
+          isVisibleAtWidth(
+            getLink(link.title),
+            width,
+            WITH_FOREIGN_HIDDEN_RULE,
+          ),
+        ).toBe(false);
+      }
+
+      // `md:hidden` is a breakpoint class, not the bare one the rule matches.
+      expect(
+        describeVisibility(
+          screen.getByTestId("mobile-header-toggle"),
+          width,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(visibleWithRule(width));
+    }
+  });
+
+  test("control: with the pre-fix `hidden md:flex` put back, the links vanish at 1917px", async () => {
+    await renderHeader();
+
+    restorePreFixMarkup();
+
+    for (const link of HEADER_LINKS) {
+      expect(
+        describeVisibility(
+          getLink(link.title),
+          WIDE_DESKTOP_WIDTH_IN_PX,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(
+        'hidden at 1917px with a foreign .hidden rule on the page by <div class="hidden md:flex md:items-center md:gap-5">',
+      );
+
+      // On a clean page the old row was fine, which is why nobody saw it.
+      expect(
+        isVisibleAtWidth(getLink(link.title), WIDE_DESKTOP_WIDTH_IN_PX),
+      ).toBe(true);
+    }
+  });
+});
+
+describe("status page nav bar with a foreign .hidden rule on the page", () => {
+  test.each(DESKTOP_WIDTHS_IN_PX)(
+    "at %ipx every nav entry is on screen with the rule",
+    async (width: number) => {
+      await renderNavBar();
+
+      // One line per entry, so a failure names the entry and what hid it.
+      expect(
+        NAV_ENTRIES.map((name: string): string => {
+          return `${name}: ${describeVisibility(
+            getLink(name),
+            width,
+            WITH_FOREIGN_HIDDEN_RULE,
+          )}`;
+        }),
+      ).toEqual(
+        NAV_ENTRIES.map((name: string): string => {
+          return `${name}: ${visibleWithRule(width)}`;
+        }),
+      );
+    },
+  );
+
+  test("below md the compact bar takes over, and the rule leaves that alone too", async () => {
+    await renderNavBar();
+
+    for (const width of PHONE_WIDTHS_IN_PX) {
+      expect(
+        isVisibleAtWidth(getLink("Incidents"), width, WITH_FOREIGN_HIDDEN_RULE),
+      ).toBe(false);
+
+      expect(
+        describeVisibility(
+          screen.getByTestId("mobile-nav-toggle"),
+          width,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(visibleWithRule(width));
+    }
+  });
+
+  test("control: with the pre-fix `hidden md:flex` put back, every entry vanishes at 1917px", async () => {
+    await renderNavBar();
+
+    restorePreFixMarkup();
+
+    for (const name of NAV_ENTRIES) {
+      expect(
+        describeVisibility(
+          getLink(name),
+          WIDE_DESKTOP_WIDTH_IN_PX,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(
+        'hidden at 1917px with a foreign .hidden rule on the page by <div class="mt-5 hidden justify-between rounded-lg bg-white px-5 py-2 text-center shadow md:flex">',
+      );
+    }
+
+    // On a clean page the old row was fine, which is why nobody saw it.
+    expect(
+      isVisibleAtWidth(getLink("Incidents"), WIDE_DESKTOP_WIDTH_IN_PX),
+    ).toBe(true);
+  });
+});

package/Tests/ClassStrings.ts

@@ -0,0 +1,178 @@
+import ts from "typescript";
+
+/*
+ * Every whole class string a module can hand to a class attribute, read
+ * through the TypeScript AST: each string literal, and each string a
+ * template literal can become - every substitution filled with nothing or
+ * with one of its string branches - so `sr-only ${wide ? "sm:not-sr-only" :
+ * ""}` is read as the class lists it renders, "sr-only " and
+ * "sr-only sm:not-sr-only".
+ *
+ * The suites that sweep the tree for a class shape use it:
+ * ThemeGroupHoverReveal.test.ts hands each string to Theme.css's substring
+ * selectors, and SrOnlyForeignRule.test.tsx hands each one to the sr-only
+ * resolver in ResponsiveVisibility.ts. Both need the finished strings.
+ *
+ * Why this is not in ForeignHiddenRuleGuard.ts, which reads the same AST: the
+ * guard asks a different question. It reads class *expressions* - which
+ * pieces of one value meet, behind which branch, which piece carries the bare
+ * class - so it can print one finding per offending string with the exact
+ * rewrite. Expanding templates into finished strings would lose exactly that.
+ * Two readers with two answers stay simpler apart than one reader with both.
+ */
+
+// A class string found in a module, and where.
+export interface ClassCandidate {
+  file: string;
+  // The line the string (or the template) starts on.
+  line: number;
+  // Whitespace collapsed, ends trimmed.
+  classText: string;
+}
+
+/*
+ * A template with several substitutions expands to every combination of its
+ * branches; this bounds that, far above anything a class template here needs.
+ */
+export const MAX_TEMPLATE_EXPANSIONS: number = 64;
+
+export function collapseWhitespace(text: string): string {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+/*
+ * The class text a substitution can contribute: its string literals (and
+ * the expansions of a nested template), never a ternary's condition (`mode
+ * === "x" ? ...` is not class text), and for `a && "b"` only the right-hand
+ * side.
+ */
+export function stringOptionsOf(expression: ts.Expression): Array<string> {
+  if (ts.isParenthesizedExpression(expression)) {
+    return stringOptionsOf(expression.expression);
+  }
+
+  if (
+    ts.isStringLiteral(expression) ||
+    ts.isNoSubstitutionTemplateLiteral(expression)
+  ) {
+    return [expression.text];
+  }
+
+  if (ts.isTemplateExpression(expression)) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return expandTemplate(expression);
+  }
+
+  if (ts.isConditionalExpression(expression)) {
+    return [
+      ...stringOptionsOf(expression.whenTrue),
+      ...stringOptionsOf(expression.whenFalse),
+    ];
+  }
+
+  if (ts.isBinaryExpression(expression)) {
+    const operator: ts.SyntaxKind = expression.operatorToken.kind;
+
+    if (operator === ts.SyntaxKind.AmpersandAmpersandToken) {
+      return stringOptionsOf(expression.right);
+    }
+
+    if (
+      operator === ts.SyntaxKind.BarBarToken ||
+      operator === ts.SyntaxKind.QuestionQuestionToken
+    ) {
+      return [
+        ...stringOptionsOf(expression.left),
+        ...stringOptionsOf(expression.right),
+      ];
+    }
+  }
+
+  return [];
+}
+
+/*
+ * Every class string a template literal can produce: each substitution
+ * filled with nothing or with one of its string branches, so
+ * `a ${x ? "" : "b c"}` yields "a " and "a b c". At most
+ * MAX_TEMPLATE_EXPANSIONS, the first ones in that order.
+ */
+export function expandTemplate(template: ts.TemplateExpression): Array<string> {
+  let results: Array<string> = [template.head.text];
+
+  for (const span of template.templateSpans) {
+    const options: Array<string> = ["", ...stringOptionsOf(span.expression)];
+    const next: Array<string> = [];
+
+    for (const prefix of results) {
+      for (const option of options) {
+        if (next.length < MAX_TEMPLATE_EXPANSIONS) {
+          next.push(`${prefix}${option}${span.literal.text}`);
+        }
+      }
+    }
+
+    results = next;
+  }
+
+  return results;
+}
+
+/*
+ * Every string a module can hand to a class attribute: string literals, and
+ * each expansion of a template literal (whose own substitutions are covered
+ * by that expansion, so they are not read a second time). Every literal is a
+ * candidate, a ternary's condition included - callers filter for the class
+ * shape they are after.
+ */
+export function collectClassCandidates(
+  relativePath: string,
+  sourceText: string,
+): Array<ClassCandidate> {
+  const sourceFile: ts.SourceFile = ts.createSourceFile(
+    relativePath,
+    sourceText,
+    ts.ScriptTarget.Latest,
+    true,
+    relativePath.endsWith(".tsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS,
+  );
+  const candidates: Array<ClassCandidate> = [];
+
+  const add: (node: ts.Node, text: string) => void = (
+    node: ts.Node,
+    text: string,
+  ): void => {
+    candidates.push({
+      file: relativePath,
+      line:
+        sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
+          .line + 1,
+      classText: collapseWhitespace(text),
+    });
+  };
+
+  const visit: (node: ts.Node) => void = (node: ts.Node): void => {
+    if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+      add(node, node.text);
+      return;
+    }
+
+    if (ts.isTemplateExpression(node)) {
+      for (const expansion of expandTemplate(node)) {
+        add(node, expansion);
+      }
+      return;
+    }
+
+    ts.forEachChild(node, visit);
+  };
+
+  visit(sourceFile);
+
+  return candidates;
+}
+
+// `file:line "class text"`, for a failure message that reads as a list.
+export function describeCandidate(candidate: ClassCandidate): string {
+  return `${candidate.file}:${candidate.line} "${candidate.classText}"`;
+}

package/Tests/Fixtures/MobilePasskeyUser.json

@@ -3,6 +3,5 @@
   "email": { "_type": "Email", "value": "passkey@example.com" },
   "name": { "_type": "Name", "value": "Passkey Tester" },
   "isMasterAdmin": false,
-  "isEmailVerified": true,
-  "isBlocked": false
+  "isEmailVerified": true
 }