diff --git a/ui/.browserslistrc b/ui/.browserslistrc index 62480c759..997c310a5 100644 --- a/ui/.browserslistrc +++ b/ui/.browserslistrc @@ -1,7 +1,7 @@ >= 0.5% last 2 major versions not dead -Chrome >= 60 -Firefox >= 60 -Safari >= 13 -iOS >= 13 +Chrome >= 64 +Firefox >= 69 +Safari >= 13.1 +iOS >= 13.4 diff --git a/ui/package-lock.json b/ui/package-lock.json index 530cd6989..a87575203 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -14,7 +14,6 @@ "@fortawesome/free-regular-svg-icons": "7.2.0", "@fortawesome/free-solid-svg-icons": "7.2.0", "@fortawesome/react-fontawesome": "3.2.0", - "@juggle/resize-observer": "3.4.0", "body-scroll-lock": "3.1.5", "bootstrap": "5.3.8", "bootswatch": "5.3.8", @@ -3717,12 +3716,6 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@juggle/resize-observer": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", - "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==", - "license": "Apache-2.0" - }, "node_modules/@napi-rs/wasm-runtime": { "version": "0.2.12", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz", diff --git a/ui/package.json b/ui/package.json index 1f217351c..0ceee3f43 100644 --- a/ui/package.json +++ b/ui/package.json @@ -10,7 +10,6 @@ "@fortawesome/free-regular-svg-icons": "7.2.0", "@fortawesome/free-solid-svg-icons": "7.2.0", "@fortawesome/react-fontawesome": "3.2.0", - "@juggle/resize-observer": "3.4.0", "body-scroll-lock": "3.1.5", "bootstrap": "5.3.8", "bootswatch": "5.3.8", diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 494053e57..ad1e169ce 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -1,6 +1,3 @@ -// MUST be first thing we import -import "./polyfills"; - import { createRoot } from "react-dom/client"; import { diff --git a/ui/src/polyfill-load.test.tsx b/ui/src/polyfill-load.test.tsx deleted file mode 100644 index 69a36b1b5..000000000 --- a/ui/src/polyfill-load.test.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import fetchMock from "@fetch-mock/jest"; - -import { EmptyAPIResponse } from "__fixtures__/Fetch"; -import { mockMatchMedia } from "__fixtures__/matchMedia"; - -// Mock react-cool-dimensions for this test file only since we're testing -// ResizeObserver polyfill loading and react-cool-dimensions logs an error -// before the polyfill is loaded -jest.mock("react-cool-dimensions", () => ({ - __esModule: true, - default: () => ({ - observe: jest.fn(), - unobserve: jest.fn(), - width: 1000, - height: 500, - entry: undefined, - }), -})); - -declare let global: any; -declare let window: any; - -const settingsElement = { - dataset: { - defaultFiltersBase64: "WyJmb289YmFyIiwiYmFyPX5iYXoiXQ==", - }, -}; - -let root: HTMLDivElement; - -beforeEach(() => { - window.matchMedia = mockMatchMedia({}); - - global.MutationObserver = class { - disconnect() {} - observe() {} - }; - // Remove ResizeObserver polyfill from testEnvironment.ts to test polyfill loading - delete global.ResizeObserver; - - root = document.createElement("div"); - root.id = "root"; - document.body.appendChild(root); -}); - -afterEach(async () => { - // Clean up React root to prevent async operations after test ends - // Clear innerHTML first to trigger React cleanup - if (root) { - root.innerHTML = ""; - } - // Wait for any pending React updates to complete - await new Promise((resolve) => setTimeout(resolve, 0)); - if (root && root.parentNode) { - root.parentNode.removeChild(root); - } - jest.resetModules(); -}); - -it("loads ResizeObserver polyfill if needed", () => { - // Verifies app loads ResizeObserver polyfill when not available - expect(window.ResizeObserver).toBeFalsy(); - - jest.spyOn(global.document, "getElementById").mockImplementation((name) => { - return name === "settings" - ? settingsElement - : name === "defaults" - ? null - : name === "root" - ? root - : null; - }); - const response = EmptyAPIResponse(); - response.filters = []; - - fetchMock.mockReset(); - fetchMock.route("*", { - body: JSON.stringify(response), - }); - - require("./index.tsx"); - expect(window.ResizeObserver).toBeTruthy(); -}); diff --git a/ui/src/polyfill-noop.test.tsx b/ui/src/polyfill-noop.test.tsx deleted file mode 100644 index fc7a71554..000000000 --- a/ui/src/polyfill-noop.test.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import fetchMock from "@fetch-mock/jest"; - -import { EmptyAPIResponse } from "__fixtures__/Fetch"; -import { mockMatchMedia } from "__fixtures__/matchMedia"; - -// Mock react-cool-dimensions for this test file only since we're testing -// ResizeObserver polyfill loading and react-cool-dimensions logs an error -// before the polyfill is loaded -jest.mock("react-cool-dimensions", () => ({ - __esModule: true, - default: () => ({ - observe: jest.fn(), - unobserve: jest.fn(), - width: 1000, - height: 500, - entry: undefined, - }), -})); - -declare let global: any; -declare let window: any; - -const settingsElement = { - dataset: { - defaultFiltersBase64: "WyJmb289YmFyIiwiYmFyPX5iYXoiXQ==", - }, -}; - -let root: HTMLDivElement; - -beforeEach(() => { - window.matchMedia = mockMatchMedia({}); - - global.MutationObserver = class { - disconnect() {} - observe() {} - }; - - root = document.createElement("div"); - root.id = "root"; - document.body.appendChild(root); -}); - -afterEach(async () => { - // Clean up React root to prevent async operations after test ends - // Clear innerHTML first to trigger React cleanup - if (root) { - root.innerHTML = ""; - } - // Wait for any pending React updates to complete - await new Promise((resolve) => setTimeout(resolve, 0)); - if (root && root.parentNode) { - root.parentNode.removeChild(root); - } - jest.resetModules(); - jest.restoreAllMocks(); -}); - -it("doesn't load ResizeObserver polyfill if not needed", () => { - // Verifies app doesn't load ResizeObserver polyfill when already available - global.window.ResizeObserver = jest.fn((_) => { - return { - observe: jest.fn(), - disconnect: jest.fn(), - }; - }); - - jest.spyOn(global.document, "getElementById").mockImplementation((name) => { - return name === "settings" - ? settingsElement - : name === "defaults" - ? null - : name === "root" - ? root - : null; - }); - const response = EmptyAPIResponse(); - response.filters = []; - - fetchMock.mockReset(); - fetchMock.route("*", { - body: JSON.stringify(response), - }); - - require("./index.tsx"); - expect(window.ResizeObserver).toBeTruthy(); -}); diff --git a/ui/src/polyfills.ts b/ui/src/polyfills.ts deleted file mode 100644 index d39a1d6f7..000000000 --- a/ui/src/polyfills.ts +++ /dev/null @@ -1,15 +0,0 @@ -declare global { - interface Window { - ResizeObserver: () => void; - } -} - -const pollyfillsLoaded: string[] = []; - -if ("ResizeObserver" in window === false) { - pollyfillsLoaded.push("ResizeObserver"); - const module = require("@juggle/resize-observer"); // eslint-disable-line @typescript-eslint/no-require-imports - (window as Window).ResizeObserver = module.ResizeObserver; -} - -export default pollyfillsLoaded;