From 89c93e871f4fc278f7ca84ca7c3c9cda803b695b Mon Sep 17 00:00:00 2001
From: Enoch Tang <enoch.tang@sentry.io>
Date: Tue, 4 Jul 2023 16:29:35 -0400
Subject: [PATCH] use mantine text area instead of rich text editor

---
 snuba/admin/static/query_editor.tsx           | 49 ++++++-------------
 .../admin/static/tests/query_editor.spec.tsx  |  9 ++--
 2 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/snuba/admin/static/query_editor.tsx b/snuba/admin/static/query_editor.tsx
index 1e1c1c76eb..d964c3e8b3 100644
--- a/snuba/admin/static/query_editor.tsx
+++ b/snuba/admin/static/query_editor.tsx
@@ -1,12 +1,7 @@
 import React, { useEffect, useState, ReactElement } from "react";
 
-import { Editor } from "@tiptap/core";
 import { Prism } from "@mantine/prism";
-import { RichTextEditor } from "@mantine/tiptap";
-import { useEditor } from "@tiptap/react";
-import HardBreak from "@tiptap/extension-hard-break";
-import StarterKit from "@tiptap/starter-kit";
-import Placeholder from "@tiptap/extension-placeholder";
+import { Textarea } from "@mantine/core";
 
 type PredefinedQuery = {
   name: string;
@@ -61,26 +56,6 @@ function QueryEditor(props: {
   >(undefined);
 
   const variableRegex = /{{([a-zA-Z0-9_]+)}}/;
-  const editor = useEditor({
-    extensions: [
-      StarterKit,
-      Placeholder.configure({
-        placeholder:
-          "Write your query here. To add variables, use '{{ }}' around substrings you wish to replace, e.g. {{ label }}",
-      }),
-      HardBreak.extend({
-        addKeyboardShortcuts() {
-          return {
-            Enter: () => this.editor.commands.setHardBreak(),
-          };
-        },
-      }),
-    ],
-    content: `${queryTemplate}`,
-    onUpdate({ editor }) {
-      setQueryTemplate(editor.getText());
-    },
-  });
 
   useEffect(() => {
     const newQueryParams = new Set(
@@ -103,7 +78,7 @@ function QueryEditor(props: {
     setQueryParamValues((queryParams) => ({ ...queryParams, [name]: value }));
   }
 
-  function renderPredefinedQueriesSelectors(editor?: Editor | null) {
+  function renderPredefinedQueriesSelectors() {
     return (
       <div>
         <label>Predefined query: </label>
@@ -115,8 +90,6 @@ function QueryEditor(props: {
             );
             setSelectedPredefinedQuery(selectedPredefinedQuery);
             setQueryTemplate(selectedPredefinedQuery?.sql ?? "");
-            editor?.commands.clearContent();
-            editor?.commands.insertContent(selectedPredefinedQuery?.sql ?? "");
           }}
           data-testid="select"
         >
@@ -164,14 +137,22 @@ function QueryEditor(props: {
 
   return (
     <form>
-      {renderPredefinedQueriesSelectors(editor)}
+      {renderPredefinedQueriesSelectors()}
       {selectedPredefinedQuery?.description ? (
         <p>{selectedPredefinedQuery?.description}</p>
       ) : null}
-
-      <RichTextEditor editor={editor}>
-        <RichTextEditor.Content data-testid="text-editor-input" />
-      </RichTextEditor>
+      <Textarea
+        value={queryTemplate || ""}
+        onChange={(evt) => {
+          setSelectedPredefinedQuery(undefined);
+          setQueryTemplate(evt.target.value);
+        }}
+        placeholder="Write your query here. To add variables, use '{{ }}' around substrings you wish to replace, e.g. {{ label }}"
+        autosize
+        minRows={2}
+        maxRows={8}
+        data-testid="text-area-input"
+      />
       {renderParameterSetters()}
       <Prism withLineNumbers language="sql">
         {query || ""}
diff --git a/snuba/admin/static/tests/query_editor.spec.tsx b/snuba/admin/static/tests/query_editor.spec.tsx
index 4a527a5b41..02fd59c24b 100644
--- a/snuba/admin/static/tests/query_editor.spec.tsx
+++ b/snuba/admin/static/tests/query_editor.spec.tsx
@@ -109,7 +109,7 @@ describe("Query editor", () => {
         }
       });
     });
-    describe("with text editor input", () => {
+    describe("with text area 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) => {}>();
@@ -117,11 +117,8 @@ describe("Query editor", () => {
           <QueryEditor onQueryUpdate={mockOnQueryUpdate} />
         );
         const input = "abcde";
-        const field = getByTestId("text-editor-input").querySelector("input");
-        if (field) {
-          await act(async () => user.type(field, input));
-          expect(mockOnQueryUpdate).toHaveBeenLastCalledWith(input);
-        }
+        await act(async () => user.type(getByTestId("text-area-input"), input));
+        expect(mockOnQueryUpdate).toHaveBeenLastCalledWith(input);
       });
     });
   });