@oneuptime/common 14.0.13 → 14.0.14

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

@@ -194,6 +194,11 @@ import ScheduledMaintenanceState from "../../../Models/DatabaseModels/ScheduledM
 import Route from "../../../Types/API/Route";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
+import {
+  hasSetChip,
+  listedNames,
+  setChips,
+} from "../../UI/Components/FoldedSection/FoldedSectionQueries";
 
 type Page = FunctionComponent<PageComponentProps>;
 
@@ -228,6 +233,8 @@ interface PageCase {
   endStateRole: string;
   startState: string;
   endState: string;
+  // The switch that lists it on each event's page.
+  showOnView: { column: string; title: string };
   // A saved measurement: starts at Timeline Start, ends at a role.
   saved: {
     // What Timeline Start is: the same instant as another moment.
@@ -276,6 +283,10 @@ const PAGES: Array<PageCase> = [
     endStateRole: "endIncidentStateRole",
     startState: "startIncidentState",
     endState: "endIncidentState",
+    showOnView: {
+      column: "showOnIncidentView",
+      title: "Show on incident pages",
+    },
     saved: {
       startLabel: "The incident is declared",
       roleEndLabel: "The incident is resolved",
@@ -312,6 +323,7 @@ const PAGES: Array<PageCase> = [
     endStateRole: "endAlertStateRole",
     startState: "startAlertState",
     endState: "endAlertState",
+    showOnView: { column: "showOnAlertView", title: "Show on alert pages" },
     saved: {
       startLabel: "The alert is created",
       roleEndLabel: "The alert is resolved",
@@ -359,6 +371,10 @@ const PAGES: Array<PageCase> = [
     endStateRole: "endScheduledMaintenanceStateRole",
     startState: "startScheduledMaintenanceState",
     endState: "endScheduledMaintenanceState",
+    showOnView: {
+      column: "showOnScheduledMaintenanceView",
+      title: "Show on maintenance event pages",
+    },
     saved: {
       // Maintenance is created, then scheduled: Timeline Start is creation.
       startLabel: "The event is created in OneUptime",
@@ -442,7 +458,12 @@ function queryDropdownNamed(name: string): HTMLElement | null {
 }
 
 function advancedHeader(): HTMLElement {
-  return within(form()).getByRole("button", { name: /^Advanced/ });
+  return within(form()).getByRole("button", { name: "More fields" });
+}
+
+// The "Show on ... pages" switch, folded away under More fields or not.
+function showOnViewSwitch(title: string): HTMLElement {
+  return within(form()).getByRole("switch", { name: title, hidden: true });
 }
 
 function stateRow(
@@ -750,7 +771,7 @@ describe.each(PAGES)("$label - Create", (entry: PageCase) => {
     // Folded: present, but out of sight until opened.
     expect(advancedHeader()).toHaveAttribute("aria-expanded", "false");
     expect(dropdownNamed("Show durations in")).not.toBeVisible();
-    expect(advancedHeader()).not.toHaveTextContent("Configured");
+    expect(setChips(advancedHeader())).toEqual([]);
 
     await user.click(advancedHeader());
 
@@ -792,7 +813,7 @@ describe.each(PAGES)("$label - Create", (entry: PageCase) => {
 
     // Folded again, it still says something in it is set.
     await user.click(advancedHeader());
-    expect(advancedHeader()).toHaveTextContent("Configured");
+    expect(hasSetChip(advancedHeader())).toBe(true);
 
     await clickCreate(user);
 
@@ -803,6 +824,81 @@ describe.each(PAGES)("$label - Create", (entry: PageCase) => {
     expect(savedModel()["unit"]).toBe("hours");
   });
 
+  /*
+   * The value of each measurement is on each event's own page, in its
+   * Measurements card, unless this is turned off: on, as the server has
+   * it, folded with the other options most measurements never change.
+   */
+  test("shows the measurement on each event's page by default, from a switch under More fields", async () => {
+    const user: UserEvent = await renderPage(entry.page, "create");
+
+    await user.click(
+      await within(form()).findByTestId(
+        `card-select-option-${entry.preset.id}`,
+      ),
+    );
+    await clickNext(user);
+    await within(form()).findByRole("combobox", { name: "Ends when" });
+
+    // Named while folded, and not set: on is what it is anyway.
+    expect(listedNames(advancedHeader())).toContain(entry.showOnView.title);
+    expect(setChips(advancedHeader())).toEqual([]);
+    expect(showOnViewSwitch(entry.showOnView.title)).not.toBeVisible();
+
+    await user.click(advancedHeader());
+
+    const toggle: HTMLElement = showOnViewSwitch(entry.showOnView.title);
+
+    expect(toggle).toBeVisible();
+    expect(toggle).toHaveAttribute("aria-checked", "true");
+    // It says where the measurement shows.
+    expect(
+      within(form()).getByText(/^Shown in the Measurements card on each /),
+    ).toBeVisible();
+
+    await clickCreate(user);
+
+    await waitFor(() => {
+      expect(createOrUpdateMock).toHaveBeenCalledTimes(1);
+    });
+
+    expect(savedModel()[entry.showOnView.column]).toBe(true);
+  });
+
+  test("turned off, the folded section says so, and it is saved off", async () => {
+    const user: UserEvent = await renderPage(entry.page, "create");
+
+    await user.click(
+      await within(form()).findByTestId(
+        `card-select-option-${entry.preset.id}`,
+      ),
+    );
+    await clickNext(user);
+    await within(form()).findByRole("combobox", { name: "Ends when" });
+    await user.click(advancedHeader());
+
+    await user.click(showOnViewSwitch(entry.showOnView.title));
+
+    expect(showOnViewSwitch(entry.showOnView.title)).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+
+    // Folded again, it still says what is set, and to what.
+    await user.click(advancedHeader());
+    expect(setChips(advancedHeader())).toEqual([
+      `${entry.showOnView.title}: Off`,
+    ]);
+
+    await clickCreate(user);
+
+    await waitFor(() => {
+      expect(createOrUpdateMock).toHaveBeenCalledTimes(1);
+    });
+
+    expect(savedModel()[entry.showOnView.column]).toBe(false);
+  });
+
   test("an end moved off a state drops the role it no longer has", async () => {
     const user: UserEvent = await renderPage(entry.page, "create");
 
@@ -884,7 +980,7 @@ describe.each(PAGES)("$label - Edit", (entry: PageCase) => {
     ).toHaveTextContent(entry.saved.roleEndLabel);
 
     // The last time counts: Advanced says something in it is set.
-    expect(advancedHeader()).toHaveTextContent("Configured");
+    expect(hasSetChip(advancedHeader())).toBe(true);
 
     await user.click(advancedHeader());
 
@@ -897,6 +993,82 @@ describe.each(PAGES)("$label - Edit", (entry: PageCase) => {
     ).toHaveTextContent("Use the last time");
   });
 
+  test("a measurement kept off event pages says so, folded, and stays off when saved", async () => {
+    getItemMock.mockImplementation((() => {
+      return Promise.resolve(
+        Object.assign(entry.existing(), {
+          _id: RECORD_ID,
+          name: "Time to resolve, our way",
+          startAnchorType: "Timeline Start",
+          endAnchorType: "State Role Entered",
+          [entry.endStateRole]: entry.saved.role,
+          startStateOccurrence: "First",
+          endStateOccurrence: "First",
+          unit: "seconds",
+          aggregationType: "Avg",
+          isEnabled: true,
+          [entry.showOnView.column]: false,
+        }),
+      );
+    }) as never);
+
+    const user: UserEvent = await renderPage(entry.page, "edit");
+
+    await within(form()).findByRole("textbox", { name: /^Name/ });
+    await user.click(
+      await within(form()).findByTestId("modal-footer-next-button"),
+    );
+    await within(form()).findByRole("combobox", { name: "Ends when" });
+
+    expect(setChips(advancedHeader())).toEqual([
+      `${entry.showOnView.title}: Off`,
+    ]);
+
+    await user.click(
+      await within(form()).findByRole("button", { name: "Save Changes" }),
+    );
+
+    await waitFor(() => {
+      expect(createOrUpdateMock).toHaveBeenCalledTimes(1);
+    });
+
+    expect(savedModel()[entry.showOnView.column]).toBe(false);
+  });
+
+  test("one shown on event pages, as most are, is not called out", async () => {
+    getItemMock.mockImplementation((() => {
+      return Promise.resolve(
+        Object.assign(entry.existing(), {
+          _id: RECORD_ID,
+          name: "Time to resolve",
+          startAnchorType: "Timeline Start",
+          endAnchorType: "State Role Entered",
+          [entry.endStateRole]: entry.saved.role,
+          startStateOccurrence: "First",
+          endStateOccurrence: "First",
+          unit: "seconds",
+          aggregationType: "Avg",
+          isEnabled: true,
+          [entry.showOnView.column]: true,
+        }),
+      );
+    }) as never);
+
+    const user: UserEvent = await renderPage(entry.page, "edit");
+
+    await within(form()).findByRole("textbox", { name: /^Name/ });
+    await user.click(
+      await within(form()).findByTestId("modal-footer-next-button"),
+    );
+    await within(form()).findByRole("combobox", { name: "Ends when" });
+
+    expect(setChips(advancedHeader())).toEqual([]);
+    expect(showOnViewSwitch(entry.showOnView.title)).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
   test("saving a rename leaves what it measures exactly as it was saved", async () => {
     const user: UserEvent = await renderPage(entry.page, "edit");
 
@@ -906,8 +1078,22 @@ describe.each(PAGES)("$label - Edit", (entry: PageCase) => {
     await user.clear(name);
     await user.type(name, "Time to resolve");
 
+    /*
+     * Save Changes is on the last step only. Every step of an edit form is
+     * filled in already, so the step list opens the last one.
+     */
+    expect(
+      within(form()).queryByRole("button", { name: "Save Changes" }),
+    ).toBeNull();
+
+    const steps: Array<HTMLElement> = within(
+      within(form()).getByRole("navigation", { name: "Progress" }),
+    ).getAllByRole("listitem");
+
+    await user.click(steps[steps.length - 1] as HTMLElement);
+
     await user.click(
-      within(form()).getByRole("button", { name: "Save Changes" }),
+      await within(form()).findByRole("button", { name: "Save Changes" }),
     );
 
     await waitFor(() => {

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

@@ -72,6 +72,8 @@ const PAGES: Array<string> = [
   "Pages/ScheduledMaintenanceEvents/Settings/ScheduledMaintenanceMeasurements.tsx",
   "Components/Measurement/MeasurementPresetPicker.tsx",
   "Components/Measurement/MeasurementSummaryElement.tsx",
+  // The Measurements card on an incident's, alert's or maintenance event's page.
+  "Components/Measurement/EventMeasurementsCard.tsx",
 ];
 
 describe("the measurement pages' words", () => {

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

@@ -27,6 +27,7 @@ import {
   getValuesForMeasurementPreset,
 } from "../../../../App/FeatureSet/Dashboard/src/Utils/Measurement/MeasurementSetup";
 import { getMeasurementsHelpMarkdown } from "../../../../App/FeatureSet/Dashboard/src/Utils/Measurement/MeasurementHelp";
+import { MORE_FIELDS_SECTION_TITLE } from "../../../UI/Components/Forms/Utils/AdvancedFormSection";
 import AlertMeasurement from "../../../Models/DatabaseModels/AlertMeasurement";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import IncidentMeasurement from "../../../Models/DatabaseModels/IncidentMeasurement";
@@ -475,14 +476,16 @@ describe.each(FORMS)("$label measurement form", (entry: FormCase) => {
     }
 
     expect(markdown).toContain("View Chart");
-    expect(markdown).toContain("Advanced");
+    // The fold the rarely changed options sit in, by the name the form shows.
+    expect(markdown).toContain(`under **${MORE_FIELDS_SECTION_TITLE}**`);
+    expect(markdown).not.toContain("Advanced");
     expect(markdown).toContain(".measurement.<key>");
     expect(markdown).not.toMatch(/anchor|Timeline Start|State Role Entered/);
     expect(markdown).not.toContain("mermaid");
   });
 });
 
-describe("the options under Advanced", () => {
+describe("the options under More fields", () => {
   const values: (options: Array<MeasurementOption>) => Array<string> = (
     options: Array<MeasurementOption>,
   ): Array<string> => {

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

@@ -271,8 +271,6 @@ describe("User Settings: the checklist and how you are reached start open", () =
     expect(sectionStates()).toEqual([
       { title: "Get Started", expanded: true },
       { title: "Alerts & Notifications", expanded: true },
-      { title: "Incident On-Call", expanded: false },
-      { title: "Alert On-Call", expanded: false },
       { title: "On-Call Logs", expanded: false },
       { title: "Incoming Call Policy", expanded: false },
       { title: "Calendar", expanded: false },
@@ -291,17 +289,45 @@ describe("User Settings: the checklist and how you are reached start open", () =
     );
   });
 
+  /*
+   * Your on-call rules are one page, with a tab per kind, among the pages
+   * people come here for: it opens nothing folded, and no section of its
+   * own is left behind for it.
+   */
+  test("On-Call Rules sits in Alerts & Notifications, right after the methods it uses", async () => {
+    await renderUserSettingsMenuAt(PageMap.USER_SETTINGS_SETUP);
+
+    expect(linksIn("Alerts & Notifications")).toEqual([
+      {
+        title: "Notification Methods",
+        href: routeFor(PageMap.USER_SETTINGS_NOTIFICATION_METHODS),
+      },
+      {
+        title: "On-Call Rules",
+        href: routeFor(PageMap.USER_SETTINGS_ON_CALL_RULES),
+      },
+      {
+        title: "Notification Settings",
+        href: routeFor(PageMap.USER_SETTINGS_NOTIFICATION_SETTINGS),
+      },
+      {
+        title: "Email Preferences",
+        href: routeFor(PageMap.USER_SETTINGS_EMAIL_PREFERENCES),
+      },
+    ]);
+    expect(sectionTitlesInOrder()).not.toContain("Incident On-Call");
+    expect(sectionTitlesInOrder()).not.toContain("Alert On-Call");
+  });
+
+  test("the On-Call Rules page marks its entry and opens nothing folded", async () => {
+    await renderUserSettingsMenuAt(PageMap.USER_SETTINGS_ON_CALL_RULES);
+
+    expect(activeLinkTitles()).toEqual(["On-Call Rules"]);
+    expect(isExpanded("Alerts & Notifications")).toBe(true);
+    expect(isExpanded("On-Call Logs")).toBe(false);
+  });
+
   test.each([
-    [
-      PageMap.USER_SETTINGS_INCIDENT_ON_CALL_RULES,
-      "Incident On-Call",
-      "Incident On-Call Rules",
-    ],
-    [
-      PageMap.USER_SETTINGS_ALERT_EPISODE_ON_CALL_RULES,
-      "Alert On-Call",
-      "Alert Episode On-Call Rules",
-    ],
     [PageMap.USER_SETTINGS_ON_CALL_LOGS, "On-Call Logs", "On-Call Logs"],
     [
       PageMap.USER_SETTINGS_INCOMING_CALL_PHONE_NUMBERS,

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

@@ -115,7 +115,11 @@ describe.each([
     listPath: "settings/label-rules",
     tableId: "message-queue-label-rules-table",
     actionStep: "labels",
-    actionFields: ["labelsToAdd"],
+    /*
+     * What the rule adds, then its name (filled in from it), its Enabled
+     * switch (Edit only) and its description (folded): the shared form.
+     */
+    actionFields: ["labelsToAdd", "name", "isEnabled", "description"],
   },
   {
     name: "owner rules",
@@ -127,7 +131,13 @@ describe.each([
     tableId: "message-queue-owner-rules-table",
     actionStep: "owners",
     // One picker for people and teams, in place of a dropdown for each.
-    actionFields: ["owners"],
+    actionFields: [
+      "owners",
+      "name",
+      "isEnabled",
+      "notifyOwners",
+      "description",
+    ],
   },
 ])("the queue $name page", (page: any) => {
   const listUrl: string = `/dashboard/${PROJECT_ID}/queues/${page.listPath}`;
@@ -192,7 +202,7 @@ describe.each([
       tableProps()["formSteps"].map((step: Props): string => {
         return step["id"];
       }),
-    ).toEqual(["basic-info", "match-criteria", page.actionStep]);
+    ).toEqual(["match-criteria", page.actionStep]);
   });
 
   test("its action step is the rule's action", () => {
@@ -265,11 +275,14 @@ describe("the owner rules page's owners", () => {
     const props: Props = ruleTableMock.mock.calls[0]![0] as Props;
     const owners: Array<Props> = props["formFields"].filter(
       (field: Props): boolean => {
-        return field["stepId"] === "owners";
+        return field["fieldType"] === FormFieldSchemaType.PeoplePicker;
       },
     );
 
     expect(owners).toHaveLength(1);
+    expect(owners[0]!["stepId"]).toBe("owners");
+    // A rule that adds no owner cannot be saved.
+    expect(owners[0]!["required"]).toBe(true);
     expect(owners[0]!["title"]).toBe("Owners");
     expect(owners[0]!["description"]).toBe(OWNER_RULE_OWNERS_DESCRIPTION);
     expect(owners[0]!["fieldType"]).toBe(FormFieldSchemaType.PeoplePicker);
@@ -284,18 +297,28 @@ describe("the owner rules page's owners", () => {
     expect(rule.hasColumn("ownerTeams")).toBe(true);
   });
 
-  test("owners are notified by default", () => {
+  test("owners are notified by default, which waits folded under the owners", () => {
     renderPage(
       MessageQueueOwnerRulesPage,
       `/dashboard/${PROJECT_ID}/queues/settings/owner-rules`,
     );
 
     const props: Props = ruleTableMock.mock.calls[0]![0] as Props;
-    expect(fieldsInStep(props, "basic-info")).toEqual([
-      "name",
-      "description",
-      "isEnabled",
-      "notifyOwners",
-    ]);
+    const notifyOwners: Props = props["formFields"].find(
+      (field: Props): boolean => {
+        return Boolean(field["field"]?.["notifyOwners"]);
+      },
+    );
+
+    expect(notifyOwners["stepId"]).toBe("owners");
+    expect(notifyOwners["fieldType"]).toBe(FormFieldSchemaType.Toggle);
+    expect(notifyOwners["collapsibleSection"]).toBeDefined();
+    // No default of its own: the form starts it where the server does (on).
+    expect(notifyOwners["defaultValue"]).toBeUndefined();
+    expect(
+      new MessageQueueOwnerRule().getTableColumnMetadata("notifyOwners")
+        .defaultValue,
+    ).toBe(true);
+    expect(fieldsInStep(props, "basic-info")).toEqual([]);
   });
 });