query_console 0.2.0 → 0.2.6

data/app/views/query_console/queries/new.html.erb

@@ -124,23 +124,66 @@
       background: #545b62;
     }
 
-    /* SQL Editor Textarea */
-    .sql-editor {
+    /* DML Warning Styles */
+    .btn-dml {
+      background-color: #ff6b6b;
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .btn-dml:hover {
+      background-color: #ff5252;
+    }
+
+    .dml-warning {
+      background-color: #fff3cd;
+      border-left: 4px solid #ffc107;
+      padding: 12px 16px;
+      margin-bottom: 16px;
+      margin-top: 16px;
+      border-radius: 4px;
+    }
+
+    .dml-warning-icon {
+      color: #ff6b6b;
+      font-weight: bold;
+      margin-right: 8px;
+    }
+
+    /* SQL Editor (CodeMirror) */
+    .sql-editor-container {
       width: 100%;
       min-height: 200px;
-      padding: 12px;
-      border: 1px solid #ddd;
       border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .sql-editor-container:focus-within {
+      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+    }
+
+    .cm-editor {
+      height: 100%;
+    }
+
+    .cm-scroller {
+      min-height: 200px;
       font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
       font-size: 14px;
       line-height: 1.5;
-      resize: vertical;
     }
 
-    .sql-editor:focus {
-      outline: none;
-      border-color: #007bff;
-      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+    .cm-content {
+      padding: 12px;
+    }
+
+    .cm-focused {
+      outline: none !important;
     }
 
 
@@ -351,7 +394,9 @@
     {
       "imports": {
         "@hotwired/turbo-rails": "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/dist/turbo.es2017-esm.min.js",
-        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.min.js"
+        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.min.js",
+        "codemirror": "https://esm.sh/codemirror@6.0.1",
+        "@codemirror/lang-sql": "https://esm.sh/@codemirror/lang-sql@6.6.0"
       }
     }
   </script>
@@ -359,6 +404,8 @@
   <script type="module">
     import * as Turbo from "@hotwired/turbo-rails"
     import { Application, Controller } from "@hotwired/stimulus"
+    import { EditorView, basicSetup } from "codemirror"
+    import { sql } from "@codemirror/lang-sql"
 
     const application = Application.start()
 
@@ -415,34 +462,86 @@
     }
     application.register("tabs", TabsController)
 
-    // Editor Controller (Simple Textarea)
+    // Editor Controller (CodeMirror)
     class EditorController extends Controller {
-      static targets = ["textarea"]
+      static targets = ["container"]
+      
+      connect() {
+        this.initializeCodeMirror()
+      }
+      
+      disconnect() {
+        if (this.view) {
+          this.view.destroy()
+        }
+      }
+      
+      initializeCodeMirror() {
+        try {
+          this.view = new EditorView({
+            doc: "SELECT * FROM users LIMIT 10;",
+            extensions: [
+              basicSetup,
+              sql(),
+              EditorView.lineWrapping,
+              EditorView.theme({
+                "&": {
+                  fontSize: "14px"
+                },
+                ".cm-content": {
+                  fontFamily: "'Monaco', 'Menlo', 'Courier New', monospace",
+                  minHeight: "200px",
+                  padding: "12px"
+                },
+                ".cm-scroller": {
+                  overflow: "auto"
+                },
+                "&.cm-focused": {
+                  outline: "none"
+                }
+              })
+            ],
+            parent: this.containerTarget
+          })
+        } catch (error) {
+          console.error('CodeMirror initialization error:', error)
+          // Fallback to simple textarea
+          this.containerTarget.innerHTML = '<textarea class="sql-editor" style="width:100%; min-height:200px; font-family:monospace; padding:12px;">SELECT * FROM users LIMIT 10;</textarea>'
+        }
+      }
       
       getSql() {
-        return this.textareaTarget.value
+        return this.view.state.doc.toString()
       }
       
       setSql(text) {
-        this.textareaTarget.value = text
-        this.textareaTarget.focus()
+        this.view.dispatch({
+          changes: {
+            from: 0,
+            to: this.view.state.doc.length,
+            insert: text
+          }
+        })
+        this.view.focus()
       }
       
       insertAtCursor(text) {
-        const textarea = this.textareaTarget
-        const start = textarea.selectionStart
-        const end = textarea.selectionEnd
-        const before = textarea.value.substring(0, start)
-        const after = textarea.value.substring(end)
-        
-        textarea.value = before + text + after
-        textarea.selectionStart = textarea.selectionEnd = start + text.length
-        textarea.focus()
+        const selection = this.view.state.selection.main
+        this.view.dispatch({
+          changes: {
+            from: selection.from,
+            to: selection.to,
+            insert: text
+          },
+          selection: {
+            anchor: selection.from + text.length
+          }
+        })
+        this.view.focus()
       }
       
       clearEditor() {
-        this.textareaTarget.value = ''
-        this.textareaTarget.focus()
+        this.setSql('')
         
         // Clear query results
         const queryFrame = document.querySelector('turbo-frame#query-results')
@@ -457,13 +556,33 @@
         }
       }
       
+      isDmlQuery(sql) {
+        const trimmed = sql.trim().toLowerCase()
+        return /^(insert|update|delete|merge)\b/.test(trimmed)
+      }
+      
       runQuery() {
-        const sql = this.getSql()
-        if (!sql.trim()) {
+        const sql = this.getSql().trim()
+        if (!sql) {
           alert('Please enter a SQL query')
           return
         }
         
+        // Check if it's a DML query and confirm with user
+        if (this.isDmlQuery(sql)) {
+          const confirmed = confirm(
+            '⚠️ DATA MODIFICATION WARNING\n\n' +
+            'This query will INSERT, UPDATE, or DELETE data.\n\n' +
+            '• All changes are PERMANENT and cannot be undone\n' +
+            '• All operations are logged\n\n' +
+            'Do you want to proceed?'
+          )
+          
+          if (!confirmed) {
+            return // User cancelled
+          }
+        }
+        
         // Clear explain results when running query
         const explainFrame = document.querySelector('turbo-frame#explain-results')
         if (explainFrame) {
@@ -476,10 +595,10 @@
         // Create form with Turbo Frame target
         const form = document.createElement('form')
         form.method = 'POST'
-        form.action = '<%= query_console.run_path %>'
+        form.action = '<%= run_path %>'
         form.setAttribute('data-turbo-frame', 'query-results')
         form.innerHTML = `
-          <input type="hidden" name="sql" value="${sql.replace(/"/g, '&quot;')}">
+          <input type="hidden" name="sql" value="${this.escapeHtml(sql)}">
           <input type="hidden" name="authenticity_token" value="${document.querySelector('meta[name=csrf-token]').content}">
         `
         document.body.appendChild(form)
@@ -488,8 +607,8 @@
       }
       
       explainQuery() {
-        const sql = this.getSql()
-        if (!sql.trim()) {
+        const sql = this.getSql().trim()
+        if (!sql) {
           alert('Please enter a SQL query')
           return
         }
@@ -503,16 +622,22 @@
         // Create form with Turbo Frame target
         const form = document.createElement('form')
         form.method = 'POST'
-        form.action = '<%= query_console.explain_path %>'
+        form.action = '<%= explain_path %>'
         form.setAttribute('data-turbo-frame', 'explain-results')
         form.innerHTML = `
-          <input type="hidden" name="sql" value="${sql.replace(/"/g, '&quot;')}">
+          <input type="hidden" name="sql" value="${this.escapeHtml(sql)}">
           <input type="hidden" name="authenticity_token" value="${document.querySelector('meta[name=csrf-token]').content}">
         `
         document.body.appendChild(form)
         form.requestSubmit()
         document.body.removeChild(form)
       }
+      
+      escapeHtml(text) {
+        const div = document.createElement('div')
+        div.textContent = text
+        return div.innerHTML
+      }
     }
     application.register("editor", EditorController)
 
@@ -526,7 +651,7 @@
       
       async loadTables() {
         try {
-          const response = await fetch('<%= query_console.schema_tables_path %>')
+          const response = await fetch('<%= schema_tables_path %>')
           this.tables = await response.json()
           this.renderTables()
         } catch (error) {
@@ -555,7 +680,7 @@
         const tableName = event.currentTarget.dataset.tableName
         
         try {
-          const response = await fetch(`<%= query_console.schema_tables_path %>/${tableName}`)
+          const response = await fetch(`<%= schema_tables_path %>/${tableName}`)
           const tableData = await response.json()
           this.renderTableDetails(tableData)
         } catch (error) {
@@ -834,9 +959,16 @@
   <div class="container">
     <!-- Banner -->
     <div class="banner" data-controller="collapsible" data-collapsible-key-value="banner">
-      <h2>🔍 Read-Only SQL Query Console <small>v0.2.0</small></h2>
+      <h2>🔍 <% if QueryConsole.configuration.enable_dml %>SQL Query Console<% else %>Read-Only SQL Query Console<% end %> <small>v0.2.0</small></h2>
       <div class="banner-content">
-        <p><strong>Security:</strong> Read-only SELECT & WITH queries only. All queries are logged.</p>
+        <p>
+          <strong>Security:</strong> 
+          <% if QueryConsole.configuration.enable_dml %>
+            DML queries (INSERT, UPDATE, DELETE) are enabled. All queries are logged. Use with caution.
+          <% else %>
+            Read-only SELECT & WITH queries only. All queries are logged.
+          <% end %>
+        </p>
         <p><strong>New in v0.2.0:</strong> EXPLAIN query plans, Interactive Schema Explorer with quick insert buttons, Saved Queries with tags, import/export, and localStorage-based Query History!</p>
       </div>
       <button class="section-toggle" data-action="click->collapsible#toggle" type="button">▼</button>
@@ -856,17 +988,8 @@
         </div>
 
         <div class="editor-content" data-collapsible-target="content">
-        <!-- SQL Editor -->
-        <textarea
-          data-editor-target="textarea"
-          class="sql-editor"
-          placeholder="Enter your SELECT or WITH query here...
-
-Examples:
-  SELECT * FROM users LIMIT 10;
-  SELECT id, name, email FROM users WHERE active = true;
-  
-Use the Schema Explorer to discover tables and columns!">SELECT * FROM users LIMIT 10;</textarea>
+        <!-- SQL Editor (CodeMirror) -->
+        <div data-editor-target="container" class="sql-editor-container"></div>
 
         <!-- Results Area -->
         <%= turbo_frame_tag "query-results" do %>

data/lib/query_console/configuration.rb

@@ -3,12 +3,14 @@ module QueryConsole
     attr_accessor :enabled_environments,
                   :max_rows,
                   :timeout_ms,
+                  :timeout_strategy,
                   :authorize,
                   :current_actor,
                   :forbidden_keywords,
                   :allowed_starts_with,
                   :enable_explain,
                   :enable_explain_analyze,
+                  :enable_dml,
                   :schema_explorer,
                   :schema_cache_seconds,
                   :schema_table_denylist,
@@ -20,6 +22,7 @@ module QueryConsole
       @enabled_environments = ["development"]
       @max_rows = 500
       @timeout_ms = 3000
+      @timeout_strategy = :database # :database (safer, PostgreSQL only) or :ruby (fallback, but can leave orphan queries)
       @authorize = nil # nil means deny by default
       @current_actor = -> (_controller) { "unknown" }
       @forbidden_keywords = %w[
@@ -32,6 +35,7 @@ module QueryConsole
       # v0.2.0 additions
       @enable_explain = true
       @enable_explain_analyze = false # ANALYZE can be expensive, disabled by default
+      @enable_dml = false # DML queries disabled by default for safety
       @schema_explorer = true
       @schema_cache_seconds = 60
       @schema_table_denylist = ["schema_migrations", "ar_internal_metadata"]

data/lib/query_console/engine.rb

@@ -11,7 +11,7 @@ module QueryConsole
     
     # Load Hotwire (Turbo & Stimulus)
     initializer "query_console.importmap", before: "importmap" do |app|
-      if app.config.respond_to?(:importmap)
+      if defined?(Importmap) && app.config.respond_to?(:importmap)
         app.config.importmap.paths << root.join("config/importmap.rb")
       end
     end

data/lib/query_console/version.rb

@@ -1,3 +1,3 @@
 module QueryConsole
-  VERSION = "0.2.0"
+  VERSION = "0.2.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: query_console
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.6
 platform: ruby
 authors:
 - Johnson Gnanasekar
@@ -16,6 +16,9 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 7.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -23,6 +26,9 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 7.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9.0'
 - !ruby/object:Gem::Dependency
   name: turbo-rails
   requirement: !ruby/object:Gem::Requirement
@@ -51,20 +57,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.3'
-- !ruby/object:Gem::Dependency
-  name: importmap-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
@@ -93,8 +85,10 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.0'
-description: A Rails engine that provides a web-based SQL query console with read-only
-  enforcement, authorization hooks, and audit logging.
+description: 'A Rails engine providing a web-based SQL query console with security-first
+  design: read-only by default, optional DML (INSERT/UPDATE/DELETE) with confirmation
+  dialogs, flexible authorization, comprehensive audit logging, and query execution
+  plans.'
 email:
 - johnson@example.com
 executables: []
@@ -154,5 +148,6 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubygems_version: 3.6.7
 specification_version: 4
-summary: Mountable Rails engine for secure read-only SQL queries
+summary: Secure, mountable Rails SQL console with read-only enforcement and optional
+  DML support
 test_files: []