@oneuptime/common 12.0.5 → 12.0.6

package/Server/Views/Partials/Head.ejs

@@ -1,9 +1,21 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-    rel="stylesheet">
+<link rel="preload" href="/oneuptime-assets/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin>
 <style>
+    /*
+     * Inter is served from this install rather than from Google's font CDN.
+     * A stylesheet <link> to an unreachable host blocks first paint for the
+     * whole connect timeout, so on an air-gapped deployment the hosted version
+     * did not just lose the font - it held the page blank. The variable font
+     * covers 100-900 in one file.
+     */
+    @font-face {
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url('/oneuptime-assets/fonts/InterVariable.woff2') format('woff2') tech('variations'),
+             url('/oneuptime-assets/fonts/InterVariable.woff2') format('woff2-variations');
+    }
+
     * {
         font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
@@ -35,9 +47,10 @@
         width: auto;
     }
 </style>
-<link rel="preload" href="https://cdn.tailwindcss.com" as="script">
-<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preload" href="/oneuptime-assets/tailwind/tailwind-3.4.5.js" as="script">
+<script src="/oneuptime-assets/tailwind/tailwind-3.4.5.js"></script>
 
+<% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %>
 <!-- Google Tag Manager -->
 <script>(function (w, d, s, l, i) {
         w[l] = w[l] || []; w[l].push({
@@ -48,6 +61,7 @@
                 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
     })(window, document, 'script', 'dataLayer', 'GTM-PKQD5WH');</script>
 <!-- End Google Tag Manager -->
+<% } %>
 
 
 

package/Tests/App/AdminDashboard/AdminProjectsIdFilter.test.tsx

@@ -0,0 +1,207 @@
+import "@testing-library/jest-dom";
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import { beforeEach, describe, expect, jest, test } from "@jest/globals";
+import { Location, MemoryRouter } from "react-router-dom";
+
+/*
+ * Same story as the Users table: a master admin holding a project ID - from a
+ * billing record, a support ticket, a telemetry attribute - needs to reach the
+ * project. Search covers the project name only, so an ID was previously a dead
+ * end.
+ *
+ * The Projects page has a second axis this file has to hold steady: it rebuilds
+ * its form fields whenever the billing toggle flips, in an effect. The filters
+ * must not be collateral damage of that re-render, so every assertion here runs
+ * against the props captured after the effect has settled.
+ */
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string): string => {
+          return key;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: () => {
+        return [];
+      },
+      getProjectPermissions: () => {
+        return [];
+      },
+      getGlobalPermissions: () => {
+        return [];
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: () => {
+        return true;
+      },
+      getUserId: () => {
+        return null;
+      },
+    },
+  };
+});
+
+type CapturedTableProps = {
+  filters?: Array<Filter<Project>> | undefined;
+  searchableFields?: Array<string> | undefined;
+  showViewIdButton?: boolean | undefined;
+};
+
+let capturedTableProps: CapturedTableProps | null = null;
+let renderCount: number = 0;
+
+jest.mock("../../../UI/Components/ModelTable/ModelTable", () => {
+  return {
+    __esModule: true,
+    default: (props: CapturedTableProps) => {
+      capturedTableProps = props;
+      renderCount = renderCount + 1;
+      return null;
+    },
+  };
+});
+
+import Projects from "../../../../App/FeatureSet/AdminDashboard/src/Pages/Projects/Index";
+import Filter from "../../../UI/Components/ModelFilter/Filter";
+import FieldType from "../../../UI/Components/Types/FieldType";
+import Navigation from "../../../UI/Utils/Navigation";
+import Project from "../../../Models/DatabaseModels/Project";
+import { getFilterKeys } from "../../../UI/Components/ModelTable/FilterDataToQuery";
+
+type FilterTitledFunction = (title: string) => Filter<Project>;
+
+const filterTitled: FilterTitledFunction = (title: string): Filter<Project> => {
+  const filter: Filter<Project> | undefined = (
+    capturedTableProps?.filters || []
+  ).find((candidate: Filter<Project>) => {
+    return candidate.title === title;
+  });
+
+  if (!filter) {
+    throw new Error(
+      `No "${title}" filter. Filters: ${(capturedTableProps?.filters || [])
+        .map((candidate: Filter<Project>) => {
+          return candidate.title;
+        })
+        .join(", ")}`,
+    );
+  }
+
+  return filter;
+};
+
+describe("Admin > Projects page", () => {
+  beforeEach(async () => {
+    capturedTableProps = null;
+    renderCount = 0;
+
+    /*
+     * The page reads the current route to build the row's view link. In the
+     * app the router pushes this in; under test nothing does.
+     */
+    Navigation.setLocation({
+      pathname: "/admin/projects",
+      search: "",
+      hash: "",
+      state: null,
+      key: "test",
+    } as Location);
+
+    render(
+      <MemoryRouter>
+        <Projects />
+      </MemoryRouter>,
+    );
+
+    // The form-field effect renders a second time; wait it out.
+    await waitFor(() => {
+      expect(renderCount).toBeGreaterThan(1);
+    });
+  });
+
+  describe("the Project ID filter", () => {
+    test("is offered as a filter", () => {
+      expect(() => {
+        return filterTitled("Project ID");
+      }).not.toThrow();
+    });
+
+    test("filters on the project's own id column", () => {
+      expect(filterTitled("Project ID").field).toEqual({ _id: true });
+    });
+
+    /*
+     * ObjectID routes to the free-text input with the operator menu. A
+     * Dropdown or Entity type would render a picker instead, which is useless
+     * to someone who has the ID and not the name.
+     */
+    test("renders as a typed-in ID, not a picker", () => {
+      expect(filterTitled("Project ID").type).toBe(FieldType.ObjectID);
+    });
+
+    /*
+     * Undeclared keys are stripped from the outgoing query by
+     * `sanitizeFilterData`, so this is what stops the filter being silently
+     * dropped between the modal and the request.
+     */
+    test("declares _id as an allowed filter key", () => {
+      expect(
+        getFilterKeys<Project>(capturedTableProps!.filters || []),
+      ).toContain("_id");
+    });
+
+    test("comes first, where an admin pasting an ID will look", () => {
+      expect(capturedTableProps!.filters?.[0]?.title).toBe("Project ID");
+    });
+
+    /*
+     * The page re-renders on its own whenever the billing toggle flips. The
+     * filter list is rebuilt inline on each of those renders, so this guards
+     * against it being tangled up with the form-field state that does change.
+     */
+    test("survives the page's own re-renders", () => {
+      expect(renderCount).toBeGreaterThan(1);
+      expect(filterTitled("Project ID").field).toEqual({ _id: true });
+    });
+  });
+
+  describe("what it must not have displaced", () => {
+    test("keeps the filters the page already had", () => {
+      expect(
+        (capturedTableProps!.filters || []).map((filter: Filter<Project>) => {
+          return filter.title;
+        }),
+      ).toEqual(["Project ID", "Name", "Created At"]);
+    });
+
+    /*
+     * `_id` deliberately stays out of free-text search: a hex id contains most
+     * characters somewhere, so searching "a" would match nearly every project.
+     */
+    test("leaves the search box searching names", () => {
+      expect(capturedTableProps!.searchableFields).toEqual(["name"]);
+    });
+
+    test("still lets an admin read a row's id", () => {
+      expect(capturedTableProps!.showViewIdButton).toBe(true);
+    });
+  });
+});

package/Tests/App/AdminDashboard/AdminUsersIdFilter.test.tsx

@@ -0,0 +1,216 @@
+import "@testing-library/jest-dom";
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import { beforeEach, describe, expect, jest, test } from "@jest/globals";
+import { Location, MemoryRouter } from "react-router-dom";
+
+/*
+ * A master admin who has an ID in hand - out of a support ticket, a log line,
+ * an API response - needs to get from that ID to the user it belongs to. The
+ * Users table's search box only covers name and email, so before this filter
+ * existed the only route was paging through every user on the instance.
+ *
+ * The filter is declarative: the page hands ModelTable a `filters` array and
+ * the shared table machinery does the rest. That makes the declaration itself
+ * the whole feature, and losing a line of it is silent - the table renders
+ * perfectly well with one fewer filter. Hence this file pins the declaration.
+ */
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string): string => {
+          return key;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: () => {
+        return [];
+      },
+      getProjectPermissions: () => {
+        return [];
+      },
+      getGlobalPermissions: () => {
+        return [];
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: () => {
+        return true;
+      },
+      getUserId: () => {
+        return null;
+      },
+    },
+  };
+});
+
+/*
+ * The real ModelTable would drag in the pager, the URL state and a live fetch.
+ * What this file is about is the props the page hands it, so a stand-in that
+ * records them is both enough and more precise.
+ */
+type CapturedTableProps = {
+  filters?: Array<Filter<User>> | undefined;
+  searchableFields?: Array<string> | undefined;
+  showViewIdButton?: boolean | undefined;
+};
+
+let capturedTableProps: CapturedTableProps | null = null;
+
+jest.mock("../../../UI/Components/ModelTable/ModelTable", () => {
+  return {
+    __esModule: true,
+    default: (props: CapturedTableProps) => {
+      capturedTableProps = props;
+      return null;
+    },
+  };
+});
+
+import Users from "../../../../App/FeatureSet/AdminDashboard/src/Pages/Users/Index";
+import Filter from "../../../UI/Components/ModelFilter/Filter";
+import FieldType from "../../../UI/Components/Types/FieldType";
+import Navigation from "../../../UI/Utils/Navigation";
+import User from "../../../Models/DatabaseModels/User";
+import { getFilterKeys } from "../../../UI/Components/ModelTable/FilterDataToQuery";
+
+type FilterTitledFunction = (title: string) => Filter<User>;
+
+const filterTitled: FilterTitledFunction = (title: string): Filter<User> => {
+  const filter: Filter<User> | undefined = (
+    capturedTableProps?.filters || []
+  ).find((candidate: Filter<User>) => {
+    return candidate.title === title;
+  });
+
+  if (!filter) {
+    throw new Error(
+      `No "${title}" filter. Filters: ${(capturedTableProps?.filters || [])
+        .map((candidate: Filter<User>) => {
+          return candidate.title;
+        })
+        .join(", ")}`,
+    );
+  }
+
+  return filter;
+};
+
+describe("Admin > Users page", () => {
+  beforeEach(async () => {
+    capturedTableProps = null;
+
+    /*
+     * The page reads the current route to build the row's view link. In the
+     * app the router pushes this in; under test nothing does.
+     */
+    Navigation.setLocation({
+      pathname: "/admin/users",
+      search: "",
+      hash: "",
+      state: null,
+      key: "test",
+    } as Location);
+
+    render(
+      <MemoryRouter>
+        <Users />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(capturedTableProps).not.toBeNull();
+    });
+  });
+
+  describe("the User ID filter", () => {
+    test("is offered as a filter", () => {
+      expect(() => {
+        return filterTitled("User ID");
+      }).not.toThrow();
+    });
+
+    /*
+     * `_id` and nothing else. A filter pointed at any other column would look
+     * identical in the UI and quietly return the wrong rows.
+     */
+    test("filters on the user's own id column", () => {
+      expect(filterTitled("User ID").field).toEqual({ _id: true });
+    });
+
+    /*
+     * The type is what picks the input the filter modal renders. ObjectID
+     * routes to the text input with its operator menu (contains / equals /
+     * starts with / ...); Entity or Dropdown would render a picker of options
+     * that nothing populates, leaving an admin with an ID and no way to type
+     * it.
+     */
+    test("renders as a typed-in ID, not a picker", () => {
+      expect(filterTitled("User ID").type).toBe(FieldType.ObjectID);
+    });
+
+    /*
+     * `sanitizeFilterData` drops any key the table did not declare a filter
+     * for, so an undeclared `_id` would be stripped between the modal and the
+     * request - the modal would accept the ID and the table would come back
+     * unfiltered.
+     */
+    test("declares _id as an allowed filter key", () => {
+      expect(getFilterKeys<User>(capturedTableProps!.filters || [])).toContain(
+        "_id",
+      );
+    });
+
+    test("comes first, where an admin pasting an ID will look", () => {
+      expect(capturedTableProps!.filters?.[0]?.title).toBe("User ID");
+    });
+  });
+
+  describe("what it must not have displaced", () => {
+    test("keeps the filters the page already had", () => {
+      expect(
+        (capturedTableProps!.filters || []).map((filter: Filter<User>) => {
+          return filter.title;
+        }),
+      ).toEqual([
+        "User ID",
+        "Full Name",
+        "Email",
+        "Email Verified",
+        "Last Active At",
+      ]);
+    });
+
+    /*
+     * Free-text search stays on name and email. Adding `_id` here would make
+     * every single-character search match nearly every row on the instance,
+     * because a hex id contains most characters somewhere.
+     */
+    test("leaves the search box searching names and emails", () => {
+      expect(capturedTableProps!.searchableFields).toEqual(["name", "email"]);
+    });
+
+    /*
+     * Filtering by ID is only half the loop - the other half is reading an ID
+     * off a row to filter or search with elsewhere.
+     */
+    test("still lets an admin read a row's id", () => {
+      expect(capturedTableProps!.showViewIdButton).toBe(true);
+    });
+  });
+});