diff --git a/snuba/admin/package-lock.json b/snuba/admin/package-lock.json
index e662993e02..9926728ac9 100644
--- a/snuba/admin/package-lock.json
+++ b/snuba/admin/package-lock.json
@@ -42,7 +42,9 @@
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.5.0",
"react-bootstrap": "^2.7.4",
+ "resize-observer-polyfill": "^1.5.1",
"ts-jest": "^29.0.5",
+ "use-resize-observer": "^9.1.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
@@ -1401,6 +1403,12 @@
"@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==",
+ "dev": true
+ },
"node_modules/@linaria/core": {
"version": "4.2.9",
"resolved": "https://registry.npmjs.org/@linaria/core/-/core-4.2.9.tgz",
@@ -1466,7 +1474,6 @@
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.15.tgz",
"integrity": "sha512-CN2UV2RXumxac75cWgUPMcHiE36T4ciIpFf20JwpazshnwFNu7scvy6GJDwUouf0zTBLnPMAD1S/B4mIRc3aQw==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@floating-ui/react": "^0.19.1",
"@mantine/styles": "6.0.15",
@@ -1486,7 +1493,6 @@
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.15.tgz",
"integrity": "sha512-2CtNKw/tdiXjeseldrg1J2jy+WKrwiCY/J6UMkZqlZ8aM0j3vFVl5cnyn46i5KzbdGqNjW01aihfJJfkeQh4oQ==",
"dev": true,
- "license": "MIT",
"peerDependencies": {
"react": ">=16.8.0"
}
@@ -1529,7 +1535,6 @@
"resolved": "https://registry.npmjs.org/@mantine/tiptap/-/tiptap-6.0.15.tgz",
"integrity": "sha512-vOyxg3yQJ6XeEgiMGiezKlEwNiONV47snbXhs+pi1wJLvLBiZTPvtE2nntgbT4M7H91HjAS/Q2aHgbEOrN1eYA==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@mantine/utils": "6.0.15"
},
@@ -2008,7 +2013,6 @@
"resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.23.0.tgz",
"integrity": "sha512-+H4mC1EZVCzCRhnPwZEVTI0veVCJuAKlopeCnRlfsYcmzgJm6Ye234c4A2qrLPQoi1Y29uN9+kqCyuYW007jPg==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@tabler/icons": "2.23.0",
"prop-types": "^15.7.2"
@@ -2425,7 +2429,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.0.3.tgz",
"integrity": "sha512-H72tXQ5rkVCkAhFaf08fbEU7EBUCK0uocsqOF+4th9sOlrhfgyJtc8Jv5EXPDpxNgG5jixSqWBo0zKXQm9s9eg==",
"dev": true,
- "license": "MIT",
"dependencies": {
"linkifyjs": "^4.1.0"
},
@@ -2526,7 +2529,6 @@
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.0.3.tgz",
"integrity": "sha512-I9dsInD89Agdm1QjFRO9dmJtU1ldVSILNPW0pEhv9wYqYVvl4HUj/JMtYNqu2jWrCHNXQcaX/WkdSdvGJtmg5g==",
- "license": "MIT",
"dependencies": {
"prosemirror-changeset": "^2.2.0",
"prosemirror-collab": "^1.3.0",
@@ -2560,7 +2562,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.0.3.tgz",
"integrity": "sha512-fiAh8Lk+/NBPAR/PE4Kc/aLiBUbUYI/CpAopz8DI9eInNyV8h8LAGa9uFILJQF/TNu0tclJ4rV0sWc7Se0FZMw==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@tiptap/extension-bubble-menu": "^2.0.3",
"@tiptap/extension-floating-menu": "^2.0.3"
@@ -2581,7 +2582,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.0.3.tgz",
"integrity": "sha512-t4WG4w93zTpL2VxhVyJJvl3kdLF001ZrhpOuEiZqEMBMUMbM56Uiigv1CnUQpTFrjDAh3IM8hkqzAh20TYw2iQ==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@tiptap/core": "^2.0.3",
"@tiptap/extension-blockquote": "^2.0.3",
@@ -7321,6 +7321,12 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/resize-observer-polyfill": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+ "dev": true
+ },
"node_modules/resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -8193,6 +8199,19 @@
}
}
},
+ "node_modules/use-resize-observer": {
+ "version": "9.1.0",
+ "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+ "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+ "dev": true,
+ "dependencies": {
+ "@juggle/resize-observer": "^3.3.1"
+ },
+ "peerDependencies": {
+ "react": "16.8.0 - 18",
+ "react-dom": "16.8.0 - 18"
+ }
+ },
"node_modules/use-sidecar": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
diff --git a/snuba/admin/package.json b/snuba/admin/package.json
index a808b693c9..fa0a533f9e 100644
--- a/snuba/admin/package.json
+++ b/snuba/admin/package.json
@@ -41,7 +41,9 @@
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.5.0",
"react-bootstrap": "^2.7.4",
+ "resize-observer-polyfill": "^1.5.1",
"ts-jest": "^29.0.5",
+ "use-resize-observer": "^9.1.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
diff --git a/snuba/admin/static/query_editor.tsx b/snuba/admin/static/query_editor.tsx
index 4c3c093ebc..1e1c1c76eb 100644
--- a/snuba/admin/static/query_editor.tsx
+++ b/snuba/admin/static/query_editor.tsx
@@ -61,8 +61,6 @@ function QueryEditor(props: {
>(undefined);
const variableRegex = /{{([a-zA-Z0-9_]+)}}/;
- const textAreaStyle = { width: "100%", height: 140 };
-
const editor = useEditor({
extensions: [
StarterKit,
@@ -172,7 +170,7 @@ function QueryEditor(props: {
) : null}
-
+
{renderParameterSetters()}
diff --git a/snuba/admin/static/tests/query_editor.spec.tsx b/snuba/admin/static/tests/query_editor.spec.tsx
index 2e5264adb8..4a527a5b41 100644
--- a/snuba/admin/static/tests/query_editor.spec.tsx
+++ b/snuba/admin/static/tests/query_editor.spec.tsx
@@ -6,6 +6,7 @@ import userEvent from "@testing-library/user-event";
import QueryEditor from "../query_editor";
describe("Query editor", () => {
+ global.ResizeObserver = require("resize-observer-polyfill");
afterEach(cleanup);
describe("when generating queries", () => {
it("should replace all instances of parameter name when it has a non-empty parameter value", () => {
@@ -108,7 +109,7 @@ describe("Query editor", () => {
}
});
});
- describe("with text area input", () => {
+ describe("with text editor input", () => {
it("should invoke call back with text area value when no labels are present", async () => {
const user = userEvent.setup();
let mockOnQueryUpdate = jest.fn<(query: string) => {}>();
@@ -116,8 +117,11 @@ describe("Query editor", () => {
);
const input = "abcde";
- await act(async () => user.type(getByTestId("text-area-input"), input));
- expect(mockOnQueryUpdate).toHaveBeenLastCalledWith(input);
+ const field = getByTestId("text-editor-input").querySelector("input");
+ if (field) {
+ await act(async () => user.type(field, input));
+ expect(mockOnQueryUpdate).toHaveBeenLastCalledWith(input);
+ }
});
});
});
diff --git a/snuba/admin/static/tests/tracing/index.spec.tsx b/snuba/admin/static/tests/tracing/index.spec.tsx
index 4df2ca6fec..97573e39b4 100644
--- a/snuba/admin/static/tests/tracing/index.spec.tsx
+++ b/snuba/admin/static/tests/tracing/index.spec.tsx
@@ -15,6 +15,7 @@ import { ClickhouseNodeData } from "../../clickhouse_queries/types";
import default_response from "./fixture";
+global.ResizeObserver = require("resize-observer-polyfill");
it("select executor rows should appear", async () => {
let mockClient = {
...Client(),
@@ -45,9 +46,12 @@ it("select executor rows should appear", async () => {
expect(queryByText("Copy to clipboard", { exact: false })).toBeNull();
- fireEvent.change(getByRole("textbox"), {
- target: { value: "Foo" },
- });
+ const field = getByRole("textbox").querySelector("input");
+ if (field) {
+ fireEvent.change(field, {
+ target: { value: "Foo" },
+ });
+ }
const submitButton = screen.getByText("Execute query");
expect(submitButton.getAttribute("disabled")).toBeFalsy();
diff --git a/snuba/admin/static/tracing/index.tsx b/snuba/admin/static/tracing/index.tsx
index 3730e41b73..c129ff1e37 100644
--- a/snuba/admin/static/tracing/index.tsx
+++ b/snuba/admin/static/tracing/index.tsx
@@ -334,7 +334,7 @@ function TracingQueries(props: { api: Client }) {
🛑 WARNING! BEFORE RUNNING QUERIES, READ THIS 🛑
-
+
diff --git a/snuba/admin/yarn.lock b/snuba/admin/yarn.lock
index f14c3a32fa..355b6d57c2 100644
--- a/snuba/admin/yarn.lock
+++ b/snuba/admin/yarn.lock
@@ -714,6 +714,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
+"@juggle/resize-observer@^3.3.1":
+ 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==
+
"@linaria/core@4.2.9":
version "4.2.9"
resolved "https://registry.npmjs.org/@linaria/core/-/core-4.2.9.tgz"
@@ -4239,6 +4244,11 @@ requires-port@^1.0.0:
resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+resize-observer-polyfill@^1.5.1:
+ version "1.5.1"
+ resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
+ integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
resolve-cwd@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
@@ -4724,6 +4734,13 @@ use-latest@^1.2.1:
dependencies:
use-isomorphic-layout-effect "^1.1.1"
+use-resize-observer@^9.1.0:
+ version "9.1.0"
+ resolved "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz"
+ integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
+ dependencies:
+ "@juggle/resize-observer" "^3.3.1"
+
use-sidecar@^1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz"