From 9635d0047601ffdd0611244c2a6c8ea86441748d Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Sun, 1 Mar 2020 15:05:44 -0300
Subject: [PATCH] Fix error for query snippets with empty description (#4693)

---
 client/app/components/AceEditorInput.jsx      |  2 +-
 .../query-snippets/QuerySnippetDialog.jsx     | 14 +++++++++---
 .../create_query_snippet_spec.js              | 22 +++++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 client/cypress/integration/query-snippets/create_query_snippet_spec.js

diff --git a/client/app/components/AceEditorInput.jsx b/client/app/components/AceEditorInput.jsx
index eee7e08305..22b45bad73 100644
--- a/client/app/components/AceEditorInput.jsx
+++ b/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"
diff --git a/client/app/components/query-snippets/QuerySnippetDialog.jsx b/client/app/components/query-snippets/QuerySnippetDialog.jsx
index 57d0067e54..e58ed30199 100644
--- a/client/app/components/query-snippets/QuerySnippetDialog.jsx
+++ b/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}
diff --git a/client/cypress/integration/query-snippets/create_query_snippet_spec.js b/client/cypress/integration/query-snippets/create_query_snippet_spec.js
new file mode 100644
index 0000000000..ffd84f3772
--- /dev/null
+++ b/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();
+  });
+});