From e11cb4c66442abca2a6b6159521a6cf4da8739c1 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Thu, 11 Apr 2019 22:00:47 -0700
Subject: [PATCH] Persist show/hide state better, closes #425

---
 datasette/templates/_codemirror_foot.html | 2 +-
 datasette/templates/query.html            | 5 ++++-
 tests/test_html.py                        | 8 ++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/datasette/templates/_codemirror_foot.html b/datasette/templates/_codemirror_foot.html
index 1e07fc72..4b55bf8d 100644
--- a/datasette/templates/_codemirror_foot.html
+++ b/datasette/templates/_codemirror_foot.html
@@ -1,5 +1,5 @@
 <script>
-    var editor = CodeMirror.fromTextArea(document.getElementsByName("sql")[0], {
+    var editor = CodeMirror.fromTextArea(document.getElementById("sql-editor"), {
       lineNumbers: true,
       mode: "text/x-sql",
       lineWrapping: true,
diff --git a/datasette/templates/query.html b/datasette/templates/query.html
index 46aac76f..81901660 100644
--- a/datasette/templates/query.html
+++ b/datasette/templates/query.html
@@ -29,10 +29,13 @@
     <h3>Custom SQL query{% if display_rows %} returning {% if truncated %}more than {% endif %}{{ "{:,}".format(display_rows|length) }} row{% if display_rows|length == 1 %}{% else %}s{% endif %}{% endif %} <span class="show-hide-sql">{% if hide_sql %}(<a href="{{ path_with_removed_args(request, {'_hide_sql': '1'}) }}">show</a>){% else %}(<a href="{{ path_with_added_args(request, {'_hide_sql': '1'}) }}">hide</a>){% endif %}</span></h3>
     {% if not hide_sql %}
         {% if editable and config.allow_sql %}
-            <p><textarea name="sql">{% if query and query.sql %}{{ query.sql }}{% else %}select * from {{ tables[0].name|escape_sqlite }}{% endif %}</textarea></p>
+            <p><textarea id="sql-editor" name="sql">{% if query and query.sql %}{{ query.sql }}{% else %}select * from {{ tables[0].name|escape_sqlite }}{% endif %}</textarea></p>
         {% else %}
             <pre>{% if query %}{{ query.sql }}{% endif %}</pre>
         {% endif %}
+    {% else %}
+        <input type="hidden" name="sql" value="{% if query and query.sql %}{{ query.sql }}{% else %}select * from {{ tables[0].name|escape_sqlite }}{% endif %}">
+        <input type="hidden" name="_hide_sql" value="1">
     {% endif %}
     {% if named_parameter_values %}
         <h3>Query parameters</h3>
diff --git a/tests/test_html.py b/tests/test_html.py
index 3e2ea845..a52b8d79 100644
--- a/tests/test_html.py
+++ b/tests/test_html.py
@@ -861,3 +861,11 @@ def test_show_hide_sql_query(app_client):
     assert not span.find("a")["href"].endswith("&_hide_sql=1")
     assert "(show)" == span.getText()
     assert soup.find("textarea") is None
+    # The SQL should still be there in a hidden form field
+    hiddens = soup.find("form").select("input[type=hidden]")
+    assert [
+        ('sql', "select ('https://twitter.com/' || 'simonw') as user_url;"),
+        ('_hide_sql', '1'),
+    ] == [
+        (hidden['name'], hidden['value']) for hidden in hiddens
+    ]