Fix error for query snippets with empty description (#4693)

client/app/components/AceEditorInput.jsx

@@ -5,7 +5,7 @@ import "./AceEditorInput.less";
 
 function AceEditorInput(props, ref) {
   return (
-    <div className="ace-editor-input">
+    <div className="ace-editor-input" data-test={props["data-test"]}>
       <AceEditor
         ref={ref}
         mode="sql"

client/app/components/query-snippets/QuerySnippetDialog.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { get } from "lodash";
+import { get, isNil } from "lodash";
 import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 import DynamicForm from "@/components/dynamic-form/DynamicForm";
@@ -28,6 +28,10 @@ class QuerySnippetDialog extends React.Component {
     const { querySnippet, dialog, onSubmit } = this.props;
     const querySnippetId = get(querySnippet, "id");
 
+    if (isNil(values.description)) {
+      values.description = "";
+    }
+
     this.setState({ saving: true });
     onSubmit(querySnippetId ? { id: querySnippetId, ...values } : values)
       .then(() => {
@@ -66,11 +70,15 @@ class QuerySnippetDialog extends React.Component {
               loading={saving}
               disabled={readOnly}
               type="primary"
-              form="querySnippetForm">
+              form="querySnippetForm"
+              data-test="SaveQuerySnippetButton">
               {isEditing ? "Save" : "Create"}
             </Button>
           ),
-        ]}>
+        ]}
+        wrapProps={{
+          "data-test": "QuerySnippetDialog",
+        }}>
         <DynamicForm
           id="querySnippetForm"
           fields={formFields}

client/cypress/integration/query-snippets/create_query_snippet_spec.js

@@ -0,0 +1,22 @@
+describe("Create Query Snippet", () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit("/query_snippets/new");
+  });
+
+  it("creates a query snippet with an empty description", () => {
+    // delete existing "example-snippet"
+    cy.request("GET", "api/query_snippets")
+      .then(({ body }) => body.filter(snippet => snippet.trigger === "example-snippet"))
+      .each(snippet => cy.request("DELETE", `api/query_snippets/${snippet.id}`));
+
+    cy.getByTestId("QuerySnippetDialog").within(() => {
+      cy.getByTestId("Trigger").type("example-snippet");
+      cy.getByTestId("Snippet")
+        .find(".ace_text-input")
+        .type("SELECT 1", { force: true });
+    });
+
+    cy.getByTestId("SaveQuerySnippetButton").click();
+  });
+});