@oneuptime/common 14.0.12 → 14.0.13

package/Tests/UI/Components/FeedOptions.test.ts

@@ -1,6 +1,7 @@
 import {
   DEFAULT_FEED_OPTIONS,
   DEFAULT_FEED_SORT_ORDER,
+  FEED_APPLIED_FILTERS_CHIP_LIMIT,
   FEED_OPTIONS_TEXT,
   FEED_SORT_ORDER_OPTIONS,
   FILTERED_FEED_NO_ITEMS_MESSAGE,
@@ -12,12 +13,10 @@ import {
   getFeedEventTypeQuery,
   getFeedNoItemsMessage,
   getFeedOptionsKey,
-  getFeedOptionsSummary,
   isDefaultFeedOptions,
   isFeedFiltered,
   isFeedSortOrder,
   sanitizeFeedEventTypes,
-  translateFeedOptionsText,
 } from "../../../UI/Components/Feed/FeedOptions";
 import { AlertEpisodeFeedEventType } from "../../../Models/DatabaseModels/AlertEpisodeFeed";
 import { AlertFeedEventType } from "../../../Models/DatabaseModels/AlertFeed";
@@ -60,7 +59,7 @@ interface FeedEventTypeSpec {
 }
 
 /*
- * Every dashboard activity feed that gets the "Filter & Sort" button. Each
+ * Every dashboard activity feed that gets the event type filter. Each
  * one's event types become a checklist, so every label below has to read well
  * and be told apart from its neighbours. "the feed inventory" below checks
  * this table against the models on disk, so a new feed model cannot slip
@@ -175,7 +174,7 @@ const MODELS_DIRECTORY: string = path.resolve(
 
 /*
  * A feed model is recognised by the enum of event types its timeline holds;
- * that enum is exactly what the "Filter & Sort" checklist is built from.
+ * that enum is exactly what the event type filter's checklist is built from.
  */
 const FEED_EVENT_TYPE_ENUM_PATTERN: RegExp =
   /export enum (\w+FeedEventType)\b/g;
@@ -1146,75 +1145,6 @@ describe("getFeedNoItemsMessage", () => {
   });
 });
 
-describe("getFeedOptionsSummary", () => {
-  test("an unfiltered feed shows all event types", () => {
-    expect(
-      getFeedOptionsSummary({
-        options: DEFAULT_FEED_OPTIONS,
-        eventTypeCount: 12,
-      }),
-    ).toBe("Newest first, all event types");
-  });
-
-  test("names the oldest-first order", () => {
-    expect(
-      getFeedOptionsSummary({
-        options: { sortOrder: SortOrder.Ascending, eventTypes: [] },
-        eventTypeCount: 12,
-      }),
-    ).toBe("Oldest first, all event types");
-  });
-
-  test("counts the selection against the feed's event types", () => {
-    expect(
-      getFeedOptionsSummary({
-        options: {
-          sortOrder: SortOrder.Descending,
-          eventTypes: [
-            IncidentFeedEventType.PublicNote,
-            IncidentFeedEventType.RootCause,
-          ],
-        },
-        eventTypeCount: 5,
-      }),
-    ).toBe("Newest first, 2 of 5 event types");
-
-    expect(
-      getFeedOptionsSummary({
-        options: {
-          sortOrder: SortOrder.Ascending,
-          eventTypes: [IncidentFeedEventType.PublicNote],
-        },
-        eventTypeCount: 5,
-      }),
-    ).toBe("Oldest first, 1 of 5 event types");
-  });
-
-  test("a feed with one event type reads in the singular", () => {
-    expect(
-      getFeedOptionsSummary({
-        options: {
-          sortOrder: SortOrder.Descending,
-          eventTypes: [IncidentFeedEventType.PublicNote],
-        },
-        eventTypeCount: 1,
-      }),
-    ).toBe("Newest first, 1 of 1 event type");
-  });
-
-  test("an unknown sort order reads as the default", () => {
-    expect(
-      getFeedOptionsSummary({
-        options: {
-          sortOrder: "sideways" as unknown as SortOrder,
-          eventTypes: [],
-        },
-        eventTypeCount: 3,
-      }),
-    ).toBe("Newest first, all event types");
-  });
-});
-
 describe("event types named like Object.prototype members", () => {
   /*
    * The shared label table is a Map. As an object literal, looking up
@@ -1247,84 +1177,73 @@ describe("event types named like Object.prototype members", () => {
   });
 });
 
-describe("translateFeedOptionsText", () => {
-  test("returns the English text when there is no translator", () => {
-    expect(translateFeedOptionsText({ text: "Sort by time" })).toBe(
-      "Sort by time",
-    );
-  });
+/*
+ * The words of a feed's ⋯ menu, its filter dialog and the box over a filtered
+ * feed. The dashboard translates each by its English text, so these pin the
+ * text the locale files are keyed by.
+ */
+describe("FEED_OPTIONS_TEXT", () => {
+  const SOURCE: string = fs.readFileSync(
+    path.join(
+      __dirname,
+      "..",
+      "..",
+      "..",
+      "UI",
+      "Components",
+      "Feed",
+      "FeedOptions.ts",
+    ),
+    "utf8",
+  );
 
-  test("uses the translation when there is one", () => {
-    expect(
-      translateFeedOptionsText({
-        text: "Sort by time",
-        translate: (text: string | undefined): string | undefined => {
-          return text === "Sort by time" ? "Nach Zeit sortieren" : text;
-        },
-      }),
-    ).toBe("Nach Zeit sortieren");
+  test("names the menu's items as the table's card header names its own", () => {
+    expect(FEED_OPTIONS_TEXT.sortHeading).toBe("Sort by time");
+    expect(FEED_OPTIONS_TEXT.filter).toBe("Filter by event type");
+    // The table's ⋯ calls its refresh "Refresh", and so does a feed's.
+    expect(FEED_OPTIONS_TEXT.refresh).toBe("Refresh");
+    // The table's filter dialog applies with "Apply Filters", and so does a feed's.
+    expect(FEED_OPTIONS_TEXT.applyFilters).toBe("Apply Filters");
   });
 
-  test("falls back to the English text when the translator has nothing", () => {
-    expect(
-      translateFeedOptionsText({
-        text: "Sort by time",
-        translate: (): string | undefined => {
-          return undefined;
-        },
-      }),
-    ).toBe("Sort by time");
-    expect(
-      translateFeedOptionsText({
-        text: "Sort by time",
-        translate: (): string | undefined => {
-          return "";
-        },
-      }),
-    ).toBe("Sort by time");
-  });
-
-  test("fills placeholders after looking the whole sentence up", () => {
-    const lookedUp: Array<string | undefined> = [];
-
-    expect(
-      translateFeedOptionsText({
-        text: FEED_OPTIONS_TEXT.showingSomeEventTypes,
-        values: { selected: 2, total: 23 },
-        translate: (text: string | undefined): string | undefined => {
-          lookedUp.push(text);
-          return "{{total}} Ereignistypen, davon {{selected}} angezeigt.";
-        },
-      }),
-    ).toBe("23 Ereignistypen, davon 2 angezeigt.");
-    expect(lookedUp).toEqual([FEED_OPTIONS_TEXT.showingSomeEventTypes]);
+  test("titles the box over a filtered feed with a count, as a heading with no full stop", () => {
+    expect(FEED_OPTIONS_TEXT.appliedFiltersTitle).toBe(
+      "Showing {{selected}} of {{total}} event types",
+    );
+    // The dialog's sentence about the same ticks is a sentence, and keeps its stop.
+    expect(FEED_OPTIONS_TEXT.showingSomeEventTypes).toBe(
+      `${FEED_OPTIONS_TEXT.appliedFiltersTitle}.`,
+    );
   });
 
-  test("leaves a placeholder with no value visible", () => {
-    expect(
-      translateFeedOptionsText({
-        text: "Showing {{selected}} of {{total}} event types.",
-        values: { selected: 1 },
-      }),
-    ).toBe("Showing 1 of {{total}} event types.");
+  test("folds the chips past the limit into the sentence the delete dialogs use", () => {
+    expect(FEED_OPTIONS_TEXT.moreEventTypes).toBe("and {{remaining}} more");
+    expect(Number.isInteger(FEED_APPLIED_FILTERS_CHIP_LIMIT)).toBe(true);
+    expect(FEED_APPLIED_FILTERS_CHIP_LIMIT).toBeGreaterThan(0);
   });
 
-  test("tolerates spaces inside the braces and repeats", () => {
-    expect(
-      translateFeedOptionsText({
-        text: "{{ a }} and {{a}}",
-        values: { a: "x" },
-      }),
-    ).toBe("x and x");
+  test("keeps the sentences of the checklist", () => {
+    expect(FEED_OPTIONS_TEXT.searchResults).toBe(
+      "Matching event types: {{count}}",
+    );
+    expect(FEED_OPTIONS_TEXT.showingEveryEventType).toBe(
+      "Showing every event type. Tick one or more to narrow the feed.",
+    );
+    expect(FEED_OPTIONS_TEXT.noSearchMatches).toBe(
+      'No event types match "{{search}}".',
+    );
+    expect(FEED_OPTIONS_TEXT.noEventTypes).toBe(
+      "This feed has no event types to filter by.",
+    );
   });
 
-  test("every template names only the placeholders the control fills", () => {
+  test("every template names only the placeholders the controls fill", () => {
     const allowed: Set<string> = new Set<string>([
       "selected",
       "total",
       "search",
-      "sortOrder",
       "count",
+      "remaining",
     ]);
 
     const unfilled: Array<string> = [];
@@ -1341,70 +1260,35 @@ describe("translateFeedOptionsText", () => {
     expect(unfilled).toEqual([]);
   });
 
-  test("the trigger has no separate accessible-name template", () => {
-    /*
-     * The button's name is its visible "Filter & Sort" label and the state
-     * summary is its description, so the old "Filter and sort feed:
-     * {{summary}}" sentence is gone rather than left untranslated.
-     */
-    expect(Object.keys(FEED_OPTIONS_TEXT)).not.toContain(
-      "triggerAccessibleName",
-    );
-  });
+  test("declares every string with translationKey, so npm run i18n:extract finds it", () => {
+    const missing: Array<string> = Object.values(FEED_OPTIONS_TEXT).filter(
+      (text: string): boolean => {
+        const literal: string = JSON.stringify(text);
+        const singleQuoted: string = `'${text}'`;
 
-  test("the search announcement counts the matching event types", () => {
-    expect(FEED_OPTIONS_TEXT.searchResults).toBe(
-      "Matching event types: {{count}}",
+        return (
+          !SOURCE.includes(`translationKey(${literal})`) &&
+          !SOURCE.includes(`translationKey(\n    ${literal},\n  )`) &&
+          !SOURCE.includes(`translationKey(${singleQuoted})`)
+        );
+      },
     );
-  });
-});
-
-describe("getFeedOptionsSummary in another language", () => {
-  const GERMAN: Record<string, string> = {
-    "Newest first": "Neueste zuerst",
-    "Oldest first": "\u00c4lteste zuerst",
-    "{{sortOrder}}, all event types": "{{sortOrder}}, alle Ereignistypen",
-    "{{sortOrder}}, {{selected}} of {{total}} event types":
-      "{{sortOrder}}, {{selected}} von {{total}} Ereignistypen",
-  };
 
-  const translate: (text: string | undefined) => string | undefined = (
-    text: string | undefined,
-  ): string | undefined => {
-    return text === undefined ? undefined : GERMAN[text];
-  };
-
-  test("translates the order and the sentence around it", () => {
-    expect(
-      getFeedOptionsSummary({
-        options: DEFAULT_FEED_OPTIONS,
-        eventTypeCount: 12,
-        translate,
-      }),
-    ).toBe("Neueste zuerst, alle Ereignistypen");
-
-    expect(
-      getFeedOptionsSummary({
-        options: {
-          sortOrder: SortOrder.Ascending,
-          eventTypes: [IncidentFeedEventType.PublicNote],
-        },
-        eventTypeCount: 12,
-        translate,
-      }),
-    ).toBe("\u00c4lteste zuerst, 1 von 12 Ereignistypen");
+    expect(missing).toEqual([]);
   });
 
-  test("a sentence with no translation stays English, with its numbers", () => {
+  test("has nothing left of the retired Filter & Sort button", () => {
+    const texts: Array<string> = Object.values(FEED_OPTIONS_TEXT);
+
+    expect(texts).not.toContain("Filter & Sort");
+    expect(texts).not.toContain("Filter and sort feed");
+    expect(texts).not.toContain("Reset to default");
     expect(
-      getFeedOptionsSummary({
-        options: {
-          sortOrder: SortOrder.Descending,
-          eventTypes: [IncidentFeedEventType.PublicNote],
-        },
-        eventTypeCount: 1,
-        translate,
+      texts.filter((text: string): boolean => {
+        return text.includes("{{sortOrder}}");
       }),
-    ).toBe("Neueste zuerst, 1 of 1 event type");
+    ).toEqual([]);
+    expect(Object.keys(FEED_OPTIONS_TEXT)).not.toContain("triggerLabel");
+    expect(Object.keys(FEED_OPTIONS_TEXT)).not.toContain("panelLabel");
   });
 });

package/Tests/UI/Components/Filters/FilterRowsChangeFilter.test.tsx

@@ -0,0 +1,300 @@
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import React, { ReactElement } from "react";
+import { afterEach, beforeAll, describe, expect, test } from "@jest/globals";
+import DateFilter from "../../../../UI/Components/Filters/DateFilter";
+import EntityFilter from "../../../../UI/Components/Filters/EntityFilter";
+import FiltersForm from "../../../../UI/Components/Filters/FiltersForm";
+import NumberFilter from "../../../../UI/Components/Filters/NumberFilter";
+import TextFilter from "../../../../UI/Components/Filters/TextFilter";
+import Filter from "../../../../UI/Components/Filters/Types/Filter";
+import FilterData from "../../../../UI/Components/Filters/Types/FilterData";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import GenericObject from "../../../../Types/GenericObject";
+
+/*
+ * FiltersForm draws all of DateFilter, EntityFilter, NumberFilter, TextFilter
+ * (and the rest) in every row, keyed by the row's position, and each draws
+ * nothing for a filter it does not own. So one mounted filter component goes
+ * from "not mine" to "mine" and back whenever the filter in its row changes:
+ * the rows below an advanced filter move when the advanced filters are shown
+ * or hidden, a table's filter list can change while its filter modal is open,
+ * and an entity filter's options can arrive after the filter does.
+ *
+ * #4285 put useTranslator() at the top of these components, above their
+ * "not mine" return, while their own useState and useEffect stayed below it.
+ * The number of hooks one component called then changed with the filter it
+ * was given, and React threw "Rendered more hooks than during the previous
+ * render" (or "fewer hooks than expected") and unmounted the whole form.
+ *
+ * i18next is set up the way the Dashboard sets it up. Without an instance,
+ * useTranslation() returns before calling any hook of its own, and React
+ * cannot notice a hook count that changes from zero, so the crash only shows
+ * with translations switched on.
+ */
+
+const GERMAN: Record<string, string> = {
+  "Filter by {{field}}": "Nach {{field}} filtern",
+  "Show Advanced Filters": "Erweiterte Filter anzeigen",
+  "Hide Advanced Filters": "Erweiterte Filter ausblenden",
+};
+
+type Row = GenericObject & {
+  createdAt?: Date;
+  name?: string;
+  retries?: number;
+  ownerId?: string;
+};
+
+const DATE_FILTER: Filter<Row> = {
+  key: "createdAt",
+  title: "Created",
+  type: FieldType.Date,
+};
+
+const TEXT_FILTER: Filter<Row> = {
+  key: "name",
+  title: "Name",
+  type: FieldType.Text,
+};
+
+const NUMBER_FILTER: Filter<Row> = {
+  key: "retries",
+  title: "Retries",
+  type: FieldType.Number,
+};
+
+const ENTITY_FILTER_WITHOUT_OPTIONS: Filter<Row> = {
+  key: "ownerId",
+  title: "Owner",
+  type: FieldType.Entity,
+};
+
+const ENTITY_FILTER: Filter<Row> = {
+  ...ENTITY_FILTER_WITHOUT_OPTIONS,
+  filterDropdownOptions: [
+    { label: "Alex", value: "user-1" },
+    { label: "Sam", value: "user-2" },
+  ],
+};
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "de",
+    fallbackLng: false,
+    resources: { de: { translation: GERMAN } },
+    interpolation: { escapeValue: false },
+    keySeparator: false,
+    nsSeparator: false,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+type FilterComponent = (props: {
+  filter: Filter<Row>;
+  filterData: FilterData<Row>;
+  onFilterChanged?: undefined | ((filterData: FilterData<Row>) => void);
+}) => ReactElement;
+
+function filterRow(
+  Component: FilterComponent,
+  filter: Filter<Row>,
+): ReactElement {
+  return (
+    <Component filter={filter} filterData={{}} onFilterChanged={() => {}} />
+  );
+}
+
+// What a filter row shows to type or pick a value in, by its placeholder.
+function placeholderOf(title: string): string {
+  return `Nach ${title} filtern`;
+}
+
+function isDrawingInputFor(title: string): boolean {
+  return screen.queryByPlaceholderText(placeholderOf(title)) !== null;
+}
+
+describe("DateFilter", () => {
+  test("a row whose filter becomes a date filter and back keeps drawing", () => {
+    const { container, rerender } = render(
+      filterRow(DateFilter as FilterComponent, TEXT_FILTER),
+    );
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(DateFilter as FilterComponent, DATE_FILTER));
+    expect(isDrawingInputFor("Created")).toBe(true);
+
+    rerender(filterRow(DateFilter as FilterComponent, TEXT_FILTER));
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(DateFilter as FilterComponent, DATE_FILTER));
+    expect(isDrawingInputFor("Created")).toBe(true);
+  });
+});
+
+describe("NumberFilter", () => {
+  test("a row whose filter becomes a number filter and back keeps drawing", () => {
+    const { container, rerender } = render(
+      filterRow(NumberFilter as FilterComponent, DATE_FILTER),
+    );
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(NumberFilter as FilterComponent, NUMBER_FILTER));
+    expect(isDrawingInputFor("Retries")).toBe(true);
+
+    rerender(filterRow(NumberFilter as FilterComponent, DATE_FILTER));
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("a number column offered as a list of values is left to the dropdown filter", () => {
+    const { container, rerender } = render(
+      filterRow(NumberFilter as FilterComponent, NUMBER_FILTER),
+    );
+    expect(isDrawingInputFor("Retries")).toBe(true);
+
+    rerender(
+      filterRow(NumberFilter as FilterComponent, {
+        ...NUMBER_FILTER,
+        filterDropdownOptions: [{ label: "Three", value: 3 }],
+      }),
+    );
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(NumberFilter as FilterComponent, NUMBER_FILTER));
+    expect(isDrawingInputFor("Retries")).toBe(true);
+  });
+});
+
+describe("TextFilter", () => {
+  test("a row whose filter becomes a text filter and back keeps drawing", () => {
+    const { container, rerender } = render(
+      filterRow(TextFilter as FilterComponent, NUMBER_FILTER),
+    );
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(TextFilter as FilterComponent, TEXT_FILTER));
+    expect(isDrawingInputFor("Name")).toBe(true);
+
+    rerender(filterRow(TextFilter as FilterComponent, NUMBER_FILTER));
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("a text column offered as a list of values is left to the dropdown filter", () => {
+    const { container, rerender } = render(
+      filterRow(TextFilter as FilterComponent, TEXT_FILTER),
+    );
+    expect(isDrawingInputFor("Name")).toBe(true);
+
+    rerender(
+      filterRow(TextFilter as FilterComponent, {
+        ...TEXT_FILTER,
+        filterDropdownOptions: [{ label: "Checkout API", value: "checkout" }],
+      }),
+    );
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(TextFilter as FilterComponent, TEXT_FILTER));
+    expect(isDrawingInputFor("Name")).toBe(true);
+  });
+});
+
+describe("EntityFilter", () => {
+  test("an entity filter whose options arrive after it does starts drawing them", () => {
+    const { container, rerender } = render(
+      filterRow(EntityFilter as FilterComponent, ENTITY_FILTER_WITHOUT_OPTIONS),
+    );
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(EntityFilter as FilterComponent, ENTITY_FILTER));
+    expect(screen.getByText(placeholderOf("Owner"))).toBeInTheDocument();
+
+    rerender(
+      filterRow(EntityFilter as FilterComponent, ENTITY_FILTER_WITHOUT_OPTIONS),
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("a row whose filter becomes an entity filter and back keeps drawing", () => {
+    const { container, rerender } = render(
+      filterRow(EntityFilter as FilterComponent, TEXT_FILTER),
+    );
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(filterRow(EntityFilter as FilterComponent, ENTITY_FILTER));
+    expect(screen.getByText(placeholderOf("Owner"))).toBeInTheDocument();
+
+    rerender(filterRow(EntityFilter as FilterComponent, TEXT_FILTER));
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe("FiltersForm", () => {
+  function form(
+    filters: Array<Filter<Row>>,
+    showFilter: boolean = true,
+  ): ReactElement {
+    return (
+      <FiltersForm<Row>
+        id="rows-filter-form"
+        showFilter={showFilter}
+        filters={filters}
+        filterData={{}}
+        onFilterChanged={() => {}}
+      />
+    );
+  }
+
+  test("a hidden form can be shown, hidden and shown again", () => {
+    const { container, rerender } = render(form([TEXT_FILTER], false));
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(form([TEXT_FILTER], true));
+    expect(isDrawingInputFor("Name")).toBe(true);
+
+    rerender(form([TEXT_FILTER], false));
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(form([TEXT_FILTER], true));
+    expect(isDrawingInputFor("Name")).toBe(true);
+  });
+
+  /*
+   * The form's own button moves the rows: with an advanced filter between two
+   * others, showing it puts the advanced text filter in the second row and
+   * moves the number filter down to a new third row. The second row's
+   * NumberFilter, which drew the number filter, is handed the text filter,
+   * and its TextFilter, which drew nothing, now has to draw it. Hiding it
+   * again does the reverse.
+   */
+  test("showing and hiding an advanced filter between two others keeps every row drawing", () => {
+    render(
+      form([
+        DATE_FILTER,
+        { ...TEXT_FILTER, isAdvancedFilter: true },
+        NUMBER_FILTER,
+      ]),
+    );
+    expect(isDrawingInputFor("Created")).toBe(true);
+    expect(isDrawingInputFor("Name")).toBe(false);
+    expect(isDrawingInputFor("Retries")).toBe(true);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Erweiterte Filter anzeigen" }),
+    );
+    expect(isDrawingInputFor("Created")).toBe(true);
+    expect(isDrawingInputFor("Name")).toBe(true);
+    expect(isDrawingInputFor("Retries")).toBe(true);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Erweiterte Filter ausblenden" }),
+    );
+    expect(isDrawingInputFor("Created")).toBe(true);
+    expect(isDrawingInputFor("Name")).toBe(false);
+    expect(isDrawingInputFor("Retries")).toBe(true);
+  });
+});