From 010fd650828b07bd3d04b0a46843f54c2675e749 Mon Sep 17 00:00:00 2001
From: Jens Vagelpohl <jens@plyp.com>
Date: Sat, 17 Jan 2026 10:10:30 +0100
Subject: [PATCH 1/2] - Add "Copy to clipboard" button to the ZMI `Test` tab

---
 CHANGES.rst                       |  4 +++
 src/Shared/DC/ZRDB/dtml/test.dtml | 41 ++++++++++++++++++++++++++++---
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index 447ed35..54f0533 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -4,6 +4,10 @@ Changelog
 5.1 (unreleased)
 ----------------
 
+- Add "Copy to clipboard" button to the ZMI `Test` tab.
+  The button copies the rendered SQL output to the user's clipboard.
+  (`#53 <https://github.com/zopefoundation/Products.ZSQLMethods/issues/53>`_)
+
 - Move package metadata from setup.py to pyproject.toml.
 
 
diff --git a/src/Shared/DC/ZRDB/dtml/test.dtml b/src/Shared/DC/ZRDB/dtml/test.dtml
index c1b0f96..eb4f184 100644
--- a/src/Shared/DC/ZRDB/dtml/test.dtml
+++ b/src/Shared/DC/ZRDB/dtml/test.dtml
@@ -4,6 +4,14 @@
   <dtml-var manage_tabs>
 </dtml-with>
 
+<style>
+  button#copyToClipboard {
+    position: absolute;
+    right: 1.5rem;
+    z-index: 10;
+  }
+</style>
+
 <main class="container-fluid">
 
   <dtml-let num_rows="REQUEST.get('num_rows') or 20">
@@ -92,6 +100,10 @@
             The final query sent to the database may contain additional
             elements inserted automatically, such as a <em>LIMIT</em> clause.
           </p>
+          <button type="button" class="btn btn-secondary mt-2"
+                  id="copyToClipboard" title="Copy to Clipboard">
+            <i class="fas fa-copy"></i>
+          </button>
           <pre class="form-control code col-sm-12 bg-dark text-white small border-0"
             name="template:text" data-contenttype="sql"
             ><dtml-var "this().manage_zmi_test(REQUEST, src__=1)" html_quote></pre>
@@ -192,11 +204,32 @@
           </dtml-try>
 
           <script>
-            $(function() {
-              editor.setOptions({
-                  'readOnly': true,
+              $(function() {
+                  try {
+                      editor.setOptions({
+                          'readOnly': true,
+                      });
+                  } catch (err) {
+                      // Ignore
+                  }
+                  $('#copyToClipboard').on('click', function(e) {
+                      const $icon = $(e.currentTarget).find('i');
+                      const tempInput = document.createElement('textarea');
+                      tempInput.value = document.querySelector('pre[name="template:text"]').innerText;
+                      document.body.appendChild(tempInput);
+                      tempInput.select();
+                      try {
+                          document.execCommand('copy');
+                          $icon.removeClass('fa-copy').addClass('fa-check');
+                          setTimeout(function() {
+                              $icon.removeClass('fa-check').addClass('fa-copy');
+                          }, 2000);
+                      } catch (err) {
+                          alert('Failed to copy text: ' + err);
+                      }
+                      document.body.removeChild(tempInput);
+                  });
               });
-            });
           </script>
 
         <dtml-except>

From 6d9ee0c4fc191485bb106ee81d1bc0f668f95596 Mon Sep 17 00:00:00 2001
From: drfho <dr.frank.hoffmann@web.de>
Date: Sat, 17 Jan 2026 21:14:22 +0800
Subject: [PATCH 2/2] zmi: revised test tab forms

---
 src/Shared/DC/ZRDB/dtml/test.dtml | 42 +++++++++++++++----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/Shared/DC/ZRDB/dtml/test.dtml b/src/Shared/DC/ZRDB/dtml/test.dtml
index eb4f184..4949887 100644
--- a/src/Shared/DC/ZRDB/dtml/test.dtml
+++ b/src/Shared/DC/ZRDB/dtml/test.dtml
@@ -7,7 +7,7 @@
 <style>
   button#copyToClipboard {
     position: absolute;
-    right: 1.5rem;
+    right: 1rem;
     z-index: 10;
   }
 </style>
@@ -33,12 +33,13 @@
             </p>
             <dtml-in args mapping>
               <div class="form-group row">
-                <label for="&dtml-name;"
-                       class="form-label col-sm-3 col-md-2">&dtml-name;</label>
-
-                <dtml-let typ="type or REQUEST.get('%s_type' % name, 'string')">
-                  <div class="col-sm-3 col-md-2">
-                    <select name="&dtml-name;_type" class="form-control">
+                <div class="input-group col">
+                  <label for="&dtml-name;"
+                    class="form-control col-sm-3 col-md-2 input-group-text bg-light">
+                    <code>&dtml-name;</code>
+                  </label>
+                  <dtml-let typ="type or REQUEST.get('%s_type' % name, 'string')">
+                    <select name="&dtml-name;_type" class="form-control col-sm-3 col-md-2">
                       <option <dtml-if "typ == 'float'">selected</dtml-if>>
                         float
                       </option>
@@ -52,14 +53,11 @@
                         tokens
                       </option>
                     </select>
-                  </div>
-                </dtml-let>
-
-                <div class="col-sm-6 col-md-7">
-                  <input type="text" class="form-control" size="40"
-                         name="&dtml-name;"
-                         id="&dtml-name;"
-                         value="<dtml-var "REQUEST.get(name, default)">"/>
+                  </dtml-let>
+                  <input type="text" class="form-control"
+                        name="&dtml-name;"
+                        id="&dtml-name;"
+                        value="<dtml-var "REQUEST.get(name, default)">"/>
                 </div>
               </div>
             </dtml-in>
@@ -70,10 +68,12 @@
         </dtml-let>
 
         <div class="form-group row">
-          <label for="num_rows"
-                 class="form-label col-sm-3 col-md-2">Rows per page</label>
-          <div class="col-sm-3 col-md-2">
-            <select name="num_rows" class="form-control">
+          <div class="input-group col">
+            <label for="num_rows" 
+              class="form-control col-sm-3 col-md-2 input-group-text bg-light text-muted">
+              Rows per page
+            </label>
+            <select name="num_rows" class="form-control col-sm-3 col-md-2">
               <dtml-in "[10, 20, 50, 100, 500, 1000]">
                 <option <dtml-if "_.int(num_rows)==_['sequence-item']">selected</dtml-if>>
                   <dtml-var sequence-item>
@@ -100,11 +100,11 @@
             The final query sent to the database may contain additional
             elements inserted automatically, such as a <em>LIMIT</em> clause.
           </p>
-          <button type="button" class="btn btn-secondary mt-2"
+          <button type="button" class="btn btn-secondary mt-0"
                   id="copyToClipboard" title="Copy to Clipboard">
             <i class="fas fa-copy"></i>
           </button>
-          <pre class="form-control code col-sm-12 bg-dark text-white small border-0"
+          <pre class="form-control code col-sm-12 bg-dark text-white small border-dark"
             name="template:text" data-contenttype="sql"
             ><dtml-var "this().manage_zmi_test(REQUEST, src__=1)" html_quote></pre>