@oneuptime/common 13.0.8 → 14.0.1

package/Tests/App/Dashboard/FeedOptionsLocales.test.ts

@@ -0,0 +1,250 @@
+import {
+  FEED_OPTIONS_TEXT,
+  FEED_SORT_ORDER_OPTIONS,
+  FILTERED_FEED_NO_ITEMS_MESSAGE,
+  FeedSortOrderOption,
+  getFeedEventTypeLabel,
+} from "../../../UI/Components/Feed/FeedOptions";
+import {
+  DEFAULT_DASHBOARD_LANGUAGE,
+  SUPPORTED_DASHBOARD_LANGUAGE_CODES,
+} from "../../../Types/Dashboard/DashboardLanguage";
+import { describe, expect, test } from "@jest/globals";
+import fs from "fs";
+import path from "path";
+
+/*
+ * The "Filter & Sort" control on every dashboard activity feed looks each of
+ * its strings up in the Dashboard locale files by its English text - its own
+ * sentences, the two sort choices, the filtered empty state, and the label of
+ * every event type in the checklist. A string with no entry silently stays
+ * English, and a translation that drops or renames a {{placeholder}} shows a
+ * raw brace or a missing number. This pins the English keys to what the code
+ * renders and every other language to having a usable translation of each.
+ *
+ * The event types are discovered from the feed models on disk, not listed
+ * here, so a feed model or event type added later needs its label translated
+ * before this passes.
+ */
+
+const COMMON_ROOT: string = path.resolve(__dirname, "..", "..", "..");
+
+const MODELS_DIRECTORY: string = path.join(
+  COMMON_ROOT,
+  "Models",
+  "DatabaseModels",
+);
+
+const DASHBOARD_LOCALES: string = path.join(
+  COMMON_ROOT,
+  "..",
+  "App",
+  "FeatureSet",
+  "Dashboard",
+  "src",
+  "Locales",
+);
+
+// The sentence the trigger used as its accessible name before it was retired.
+const RETIRED_KEY: string = "Filter and sort feed: {{summary}}";
+
+const FEED_EVENT_TYPE_ENUM_PATTERN: RegExp =
+  /export enum (\w+FeedEventType)\b/g;
+
+const PLACEHOLDER_PATTERN: RegExp = /\{\{\s*([A-Za-z0-9_]+)\s*\}\}/g;
+
+interface FeedEventTypeEnum {
+  model: string;
+  enumName: string;
+  values: Array<string>;
+}
+
+type FindFeedEventTypeEnums = () => Array<FeedEventTypeEnum>;
+
+/*
+ * Every *FeedEventType enum under Models/DatabaseModels, with the values the
+ * model module actually exports (loaded, not parsed, so a value written in an
+ * unusual way cannot be misread).
+ */
+const findFeedEventTypeEnums: FindFeedEventTypeEnums =
+  (): Array<FeedEventTypeEnum> => {
+    const found: Array<FeedEventTypeEnum> = [];
+
+    for (const entry of fs.readdirSync(MODELS_DIRECTORY, {
+      withFileTypes: true,
+    })) {
+      if (!entry.isFile() || !entry.name.endsWith(".ts")) {
+        continue;
+      }
+
+      const source: string = fs.readFileSync(
+        path.join(MODELS_DIRECTORY, entry.name),
+        "utf8",
+      );
+      const enumNames: Array<string> = Array.from(
+        source.matchAll(FEED_EVENT_TYPE_ENUM_PATTERN),
+        (match: RegExpMatchArray): string => {
+          return match[1]!;
+        },
+      );
+
+      if (enumNames.length === 0) {
+        continue;
+      }
+
+      const model: string = entry.name.replace(/\.ts$/, "");
+      // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+      const exported: Record<string, unknown> = require(
+        path.join(MODELS_DIRECTORY, model),
+      );
+
+      for (const enumName of enumNames) {
+        const eventTypeEnum: unknown = exported[enumName];
+
+        found.push({
+          model,
+          enumName,
+          values:
+            eventTypeEnum && typeof eventTypeEnum === "object"
+              ? Object.values(eventTypeEnum as Record<string, string>)
+              : [],
+        });
+      }
+    }
+
+    return found;
+  };
+
+type ReadLocale = (fileName: string) => Record<string, unknown>;
+
+const readLocale: ReadLocale = (fileName: string): Record<string, unknown> => {
+  return JSON.parse(
+    fs.readFileSync(path.join(DASHBOARD_LOCALES, fileName), "utf8"),
+  ) as Record<string, unknown>;
+};
+
+type GetPlaceholders = (text: string) => Array<string>;
+
+// The placeholder names in a string, repeats kept, in a stable order.
+const getPlaceholders: GetPlaceholders = (text: string): Array<string> => {
+  return Array.from(
+    text.matchAll(PLACEHOLDER_PATTERN),
+    (match: RegExpMatchArray): string => {
+      return match[1]!;
+    },
+  ).sort();
+};
+
+type Unique = (values: Array<string>) => Array<string>;
+
+const unique: Unique = (values: Array<string>): Array<string> => {
+  return Array.from(new Set<string>(values));
+};
+
+const FEED_EVENT_TYPE_ENUMS: Array<FeedEventTypeEnum> =
+  findFeedEventTypeEnums();
+
+// The control's own words, exactly as it passes them to the translator.
+const CONTROL_KEYS: Array<string> = unique([
+  ...Object.values(FEED_OPTIONS_TEXT),
+  ...FEED_SORT_ORDER_OPTIONS.map((option: FeedSortOrderOption): string => {
+    return option.label;
+  }),
+  FILTERED_FEED_NO_ITEMS_MESSAGE,
+]);
+
+// The checklist's labels, which are translated by their English text too.
+const EVENT_TYPE_LABEL_KEYS: Array<string> = unique(
+  FEED_EVENT_TYPE_ENUMS.flatMap((eventTypeEnum: FeedEventTypeEnum) => {
+    return eventTypeEnum.values.map((value: string): string => {
+      return getFeedEventTypeLabel(value);
+    });
+  }),
+);
+
+const ALL_KEYS: Array<string> = unique([
+  ...CONTROL_KEYS,
+  ...EVENT_TYPE_LABEL_KEYS,
+]);
+
+const OTHER_LANGUAGES: Array<string> =
+  SUPPORTED_DASHBOARD_LANGUAGE_CODES.filter((code: string): boolean => {
+    return code !== DEFAULT_DASHBOARD_LANGUAGE;
+  });
+
+describe("Filter & Sort translations in the Dashboard locales", () => {
+  test("the feed models on disk were found and loaded", () => {
+    // An empty or unloaded scan would make every check below vacuous.
+    expect(FEED_EVENT_TYPE_ENUMS.length).toBeGreaterThan(0);
+
+    for (const eventTypeEnum of FEED_EVENT_TYPE_ENUMS) {
+      expect({
+        enumName: eventTypeEnum.enumName,
+        loaded: eventTypeEnum.values.length > 0,
+      }).toEqual({ enumName: eventTypeEnum.enumName, loaded: true });
+    }
+
+    expect(OTHER_LANGUAGES.length).toBeGreaterThan(0);
+  });
+
+  test("English maps every string the control shows to itself", () => {
+    const english: Record<string, unknown> = readLocale(
+      `${DEFAULT_DASHBOARD_LANGUAGE}.json`,
+    );
+
+    const missing: Array<string> = ALL_KEYS.filter((key: string): boolean => {
+      return english[key] !== key;
+    });
+
+    expect(missing).toEqual([]);
+  });
+
+  test.each(OTHER_LANGUAGES)(
+    "%s translates every string the control shows, keeping its placeholders",
+    (language: string) => {
+      const locale: Record<string, unknown> = readLocale(`${language}.json`);
+      const problems: Array<string> = [];
+
+      for (const key of ALL_KEYS) {
+        const value: unknown = locale[key];
+
+        if (typeof value !== "string" || value.trim().length === 0) {
+          problems.push(`missing: ${key}`);
+          continue;
+        }
+
+        const expected: string = getPlaceholders(key).join(",");
+        const actual: string = getPlaceholders(value).join(",");
+
+        if (actual !== expected) {
+          problems.push(
+            `placeholders {${actual}} instead of {${expected}}: ${key}`,
+          );
+        }
+      }
+
+      expect(problems).toEqual([]);
+    },
+  );
+
+  test("the retired accessible-name sentence is in no locale file", () => {
+    const localeFiles: Array<string> = fs
+      .readdirSync(DASHBOARD_LOCALES)
+      .filter((fileName: string): boolean => {
+        return fileName.endsWith(".json");
+      });
+
+    expect(localeFiles.length).toBeGreaterThan(1);
+
+    const stillThere: Array<string> = localeFiles.filter(
+      (fileName: string): boolean => {
+        return Object.prototype.hasOwnProperty.call(
+          readLocale(fileName),
+          RETIRED_KEY,
+        );
+      },
+    );
+
+    expect(stillThere).toEqual([]);
+  });
+});

package/Tests/App/Dashboard/FeedOrdering.test.ts

@@ -7,6 +7,22 @@ interface FeedImplementation {
   relativePath: string;
 }
 
+/*
+ * How one feed connects its Filter & Sort state to the request it makes. The
+ * checks below compare against the name the feed itself gave the
+ * useFeedOptions() result, and look inside the two hook calls rather than
+ * the whole file, so they survive renames and reformatting but not a wire
+ * that goes to the wrong place.
+ */
+interface FeedOptionsWiring {
+  // What the feed called its useFeedOptions() result.
+  hook: string;
+  // The arguments of the useFeedOptions() call.
+  optionsCall: string;
+  // The arguments of the useFeedItems() call: the request the feed makes.
+  itemsCall: string;
+}
+
 const DASHBOARD_COMPONENTS: string = path.join(
   __dirname,
   "..",
@@ -62,14 +78,30 @@ const FEED_IMPLEMENTATIONS: Array<FeedImplementation> = [
   },
 ];
 
-function readSource(implementation: FeedImplementation): string {
+/*
+ * Ends at the call's opening parenthesis, so the same pattern both names the
+ * result and locates the call's arguments.
+ */
+const FEED_OPTIONS_HOOK_CALL: RegExp =
+  /const\s+(\w+)\s*:\s*UseFeedOptionsResult\s*=\s*useFeedOptions\s*\(/;
+
+const FEED_ITEMS_HOOK_CALL: RegExp = /\buseFeedItems\s*(?:<[^<>()]*>)?\s*\(/;
+
+// A storage key written as a string literal ("incident"), not an expression.
+const QUOTED_STRING_LITERAL: RegExp = /^(["'`])[^"'`]*\1$/;
+
+const readSource: (implementation: FeedImplementation) => string = (
+  implementation: FeedImplementation,
+): string => {
   return fs.readFileSync(
     path.join(DASHBOARD_COMPONENTS, implementation.relativePath),
     "utf8",
   );
-}
+};
 
-function findFeedImplementationPaths(directory: string): Array<string> {
+const findFeedImplementationPaths: (directory: string) => Array<string> = (
+  directory: string,
+): Array<string> => {
   return fs
     .readdirSync(directory, { withFileTypes: true })
     .flatMap((entry: fs.Dirent): Array<string> => {
@@ -95,7 +127,104 @@ function findFeedImplementationPaths(directory: string): Array<string> {
           .join("/"),
       ];
     });
-}
+};
+
+/*
+ * The text between the parentheses of the first call that `callee` finds (a
+ * pattern ending at the opening parenthesis). Strings and comments are
+ * skipped, so a bracket inside one cannot end the call early.
+ */
+const getCallArguments: (source: string, callee: RegExp) => string = (
+  source: string,
+  callee: RegExp,
+): string => {
+  const match: RegExpExecArray | null = callee.exec(source);
+
+  if (!match) {
+    throw new Error(`No call matching ${callee.toString()}`);
+  }
+
+  const openIndex: number = match.index + match[0].length - 1;
+  let depth: number = 0;
+  let index: number = openIndex;
+
+  while (index < source.length) {
+    const character: string = source[index]!;
+    const nextCharacter: string | undefined = source[index + 1];
+
+    if (character === "/" && nextCharacter === "*") {
+      index = source.indexOf("*/", index + 2) + 2;
+      continue;
+    }
+
+    if (character === "/" && nextCharacter === "/") {
+      const lineEnd: number = source.indexOf("\n", index);
+      index = lineEnd === -1 ? source.length : lineEnd;
+      continue;
+    }
+
+    if (character === '"' || character === "'" || character === "`") {
+      index++;
+
+      while (index < source.length && source[index] !== character) {
+        index += source[index] === "\\" ? 2 : 1;
+      }
+
+      index++;
+      continue;
+    }
+
+    if ("([{".includes(character)) {
+      depth++;
+    } else if (")]}".includes(character)) {
+      depth--;
+
+      if (depth === 0) {
+        return source.slice(openIndex + 1, index);
+      }
+    }
+
+    index++;
+  }
+
+  throw new Error(`Unbalanced call matching ${callee.toString()}`);
+};
+
+/*
+ * A property's value expression inside a call's arguments, with whitespace
+ * removed so that line breaks never decide whether two expressions match.
+ */
+const getPropertyExpression: (
+  callArguments: string,
+  property: string,
+) => string | undefined = (
+  callArguments: string,
+  property: string,
+): string | undefined => {
+  const match: RegExpMatchArray | null = callArguments.match(
+    new RegExp(String.raw`\b${property}\s*:\s*([^,}]+?)\s*[,}]`),
+  );
+
+  return match ? match[1]!.replace(/\s+/g, "") : undefined;
+};
+
+const getFeedOptionsWiring: (source: string) => FeedOptionsWiring = (
+  source: string,
+): FeedOptionsWiring => {
+  const hookMatch: RegExpMatchArray | null = source.match(
+    FEED_OPTIONS_HOOK_CALL,
+  );
+
+  if (!hookMatch) {
+    throw new Error("The feed does not keep a UseFeedOptionsResult");
+  }
+
+  return {
+    hook: hookMatch[1]!,
+    optionsCall: getCallArguments(source, FEED_OPTIONS_HOOK_CALL),
+    itemsCall: getCallArguments(source, FEED_ITEMS_HOOK_CALL),
+  };
+};
 
 describe("dashboard feed ordering parity", () => {
   test("tracks every feed implementation", () => {
@@ -110,20 +239,161 @@ describe("dashboard feed ordering parity", () => {
     );
   });
 
+  /*
+   * The order is the reader's choice from the Filter & Sort button, and it
+   * is applied by the API. Reversing or re-sorting the loaded window in the
+   * browser would show the newest ten upside down instead of the oldest ten.
+   */
   test.each(FEED_IMPLEMENTATIONS)(
-    "$name requests the newest activity first",
+    "$name requests activity in the reader's chosen order",
     (implementation: FeedImplementation) => {
       const source: string = readSource(implementation);
+      const wiring: FeedOptionsWiring = getFeedOptionsWiring(source);
 
-      expect(source).toContain("postedAt: SortOrder.Descending");
-      expect(source).not.toContain("postedAt: SortOrder.Ascending");
+      expect(wiring.itemsCall).toMatch(
+        new RegExp(
+          String.raw`\bpostedAt\s*:\s*${wiring.hook}\.options\.sortOrder\b`,
+        ),
+      );
+      expect(source).not.toMatch(/\bpostedAt\s*:\s*SortOrder\./);
       expect(source).not.toContain(".reverse()");
-      expect(source).toContain("skip: 0");
-      expect(source).toContain("limit,");
+      expect(wiring.itemsCall).toMatch(/\bskip\s*:\s*0\b/);
+      expect(wiring.itemsCall).toMatch(/\blimit\s*,/);
       expect(source).not.toContain("LIMIT_PER_PROJECT");
     },
   );
 
+  test.each(FEED_IMPLEMENTATIONS)(
+    "$name offers Filter & Sort as the first header control and filters through the API",
+    (implementation: FeedImplementation) => {
+      const source: string = readSource(implementation);
+      const wiring: FeedOptionsWiring = getFeedOptionsWiring(source);
+      const hook: string = wiring.hook;
+
+      expect(source).toMatch(
+        /import\s+useFeedOptions\b[^;]*from\s+"Common\/UI\/Components\/Feed\/useFeedOptions"/,
+      );
+      expect(source).toMatch(
+        /import\s+FeedOptionsButton\s+from\s+"Common\/UI\/Components\/Feed\/FeedOptionsButton"/,
+      );
+      expect(source).toMatch(/buttons=\{\[\s*<FeedOptionsButton\b/);
+
+      /*
+       * A change of options must both re-read the feed (viewKey) and change
+       * what is read (the event type query). Either one alone shows stale or
+       * mislabelled items.
+       */
+      expect(wiring.itemsCall).toMatch(
+        new RegExp(String.raw`\bviewKey\s*:\s*${hook}\.optionsKey\b`),
+      );
+      /*
+       * The first argument may carry a generic cast with a comma of its own:
+       * ResourceFeed names its column `as Extract<keyof TFeedModel, string>`.
+       */
+      expect(wiring.itemsCall).toMatch(
+        new RegExp(
+          String.raw`\.\.\.getFeedEventTypeQuery<\w+>\(\s*(?:[^,()<>]|<[^<>]*>)+,\s*${hook}\.options\s*,?\s*\)`,
+        ),
+      );
+
+      const button: RegExpMatchArray | null = source.match(
+        /<FeedOptionsButton\b[\s\S]*?\/>/,
+      );
+
+      expect(button).not.toBeNull();
+      expect(button![0]).toMatch(
+        new RegExp(String.raw`\bvalue=\{\s*${hook}\.options\s*\}`),
+      );
+      expect(button![0]).toMatch(
+        new RegExp(
+          String.raw`\beventTypeOptions=\{\s*${hook}\.eventTypeOptions\s*\}`,
+        ),
+      );
+      expect(button![0]).toMatch(
+        new RegExp(String.raw`\bonChange=\{\s*${hook}\.setOptions\s*\}`),
+      );
+
+      /*
+       * A filtered feed with no matches must say it is filtered, not claim
+       * the resource has no activity at all.
+       */
+      expect(
+        getCallArguments(
+          source,
+          /noItemsMessage=\{\s*getFeedNoItemsMessage\s*\(/,
+        ),
+      ).toMatch(new RegExp(String.raw`\boptions\s*:\s*${hook}\.options\b`));
+    },
+  );
+
+  /*
+   * The dashboard moves from one incident (cluster, monitor, ...) to the next
+   * without remounting the feed. useFeedItems starts over when its
+   * resourceKey changes, and useFeedOptions drops the event type filter when
+   * its resetKey changes. Only when both are the same expression do the two
+   * happen in the same render, so the first request for the new resource is
+   * unfiltered instead of carrying the filter chosen on the previous one.
+   */
+  test.each(FEED_IMPLEMENTATIONS)(
+    "$name drops its event type filter on the render that moves it to another resource",
+    (implementation: FeedImplementation) => {
+      const wiring: FeedOptionsWiring = getFeedOptionsWiring(
+        readSource(implementation),
+      );
+      const resourceKey: string | undefined = getPropertyExpression(
+        wiring.itemsCall,
+        "resourceKey",
+      );
+
+      expect(resourceKey).toBeTruthy();
+      expect(getPropertyExpression(wiring.optionsCall, "resetKey")).toBe(
+        resourceKey,
+      );
+    },
+  );
+
+  /*
+   * Only literal keys can be compared here. ResourceFeed keys its order by
+   * props.eventTypeColumn, one per product, and
+   * ResourceFeedPagesFilterSort.test.tsx checks that those are distinct.
+   */
+  test("each feed remembers its sort order under its own storage key", () => {
+    const storageKeys: Array<[string, string | undefined]> =
+      FEED_IMPLEMENTATIONS.map(
+        (implementation: FeedImplementation): [string, string | undefined] => {
+          return [
+            implementation.name,
+            getPropertyExpression(
+              getFeedOptionsWiring(readSource(implementation)).optionsCall,
+              "storageKey",
+            ),
+          ];
+        },
+      );
+
+    // Without a key the order is forgotten on every page load.
+    expect(
+      storageKeys
+        .filter((entry: [string, string | undefined]): boolean => {
+          return !entry[1];
+        })
+        .map((entry: [string, string | undefined]): string => {
+          return entry[0];
+        }),
+    ).toEqual([]);
+
+    const literalKeys: Array<string> = storageKeys
+      .map((entry: [string, string | undefined]): string => {
+        return entry[1] || "";
+      })
+      .filter((key: string): boolean => {
+        return QUOTED_STRING_LITERAL.test(key);
+      });
+
+    expect(literalKeys.length).toBeGreaterThan(1);
+    expect(new Set(literalKeys).size).toBe(literalKeys.length);
+  });
+
   test.each(FEED_IMPLEMENTATIONS)(
     "$name uses the shared progressive feed UI",
     (implementation: FeedImplementation) => {