Buncha changes:

* copy values / rows to clipboard
* factor common template stuff into includes
* row detail view a-la the delete view
* download db option

Also change how we tag our containers, so :latest is the latest stable
and :master is the current master commit.

Author: coleifer

…hub/workflows/build_latest_container.yml …hub/workflows/build_master_container.yml.github/workflows/build_latest_container.yml renamed to .github/workflows/build_master_container.yml .github/workflows/build_latest_container.yml renamed to .github/workflows/build_master_container.yml

@@ -1,4 +1,4 @@
-name: Build latest Container
+name: Build master Container
 on:
   push:
     branches:
@@ -24,6 +24,6 @@ jobs:
           docker buildx build \
             --platform linux/amd64,linux/arm64 \
             --file docker/Dockerfile \
-            --tag ghcr.io/coleifer/sqlite-web:latest \
+            --tag ghcr.io/coleifer/sqlite-web:master \
             --push \
             .

.github/workflows/build_release_container.yml

@@ -25,5 +25,6 @@ jobs:
             --platform linux/amd64,linux/arm64 \
             --file docker/Dockerfile \
             --tag ghcr.io/coleifer/sqlite-web:${{ github.ref_name }} \
+            --tag ghcr.io/coleifer/sqlite-web:latest \
             --push \
             .

sqlite_web/sqlite_web.py

@@ -13,6 +13,7 @@
 import optparse
 import os
 import re
+import shutil
 import sys
 import tempfile
 import threading
@@ -32,7 +33,7 @@
 try:
     from flask import (
         Flask, abort, flash, g, jsonify, make_response, redirect,
-        render_template, request, session, url_for)
+        render_template, request, send_file, session, url_for)
 except ImportError:
     raise RuntimeError('Unable to import flask module. Install by running '
                        'pip install flask')
@@ -482,8 +483,8 @@ def _query_view(template, table=None):
         model_class = dataset[table].model_class
         pk = model_class._meta.primary_key
         is_composite_pk = isinstance(pk, CompositeKey)
-        allow_edit = (not dataset.is_readonly and pk is not False and
-                      not dataset.cached_is_view(table))
+        allow_detail = pk is not False and not dataset.cached_is_view(table)
+        allow_edit = allow_detail and not dataset.is_readonly
         allow_bulk = allow_edit and not is_composite_pk
         fk_lookup = {fk.column: (fk.dest_table, fk.dest_column)
                      for fk in dataset.cached_foreign_keys(table)}
@@ -492,7 +493,7 @@ def _query_view(template, table=None):
         model_class = dataset._base_model
         pk = None
         is_composite_pk = False
-        allow_edit = allow_bulk = False
+        allow_detail = allow_edit = allow_bulk = False
         fk_lookup = {}
 
     if request.method == 'POST' and request.form.get('action') == 'bulk-delete':
@@ -544,7 +545,7 @@ def _query_view(template, table=None):
         else:
             results = run_script(dataset, statements, page_size=rpp)
 
-    if (result is not None and result.kind == 'rows' and allow_edit and
+    if (result is not None and result.kind == 'rows' and allow_detail and
             not explain and not is_composite_pk and
             pk.column_name in result.columns):
         pk_index = result.columns.index(pk.column_name)  # First one wins.
@@ -566,6 +567,7 @@ def _query_view(template, table=None):
     return render_template(
         template,
         allow_bulk=allow_bulk,
+        allow_detail=allow_detail,
         allow_edit=allow_edit,
         default_sql=default_sql,
         error=error,
@@ -856,11 +858,11 @@ def table_content(table):
     model = ds_table.model_class
     is_composite_pk = isinstance(model._meta.primary_key, CompositeKey)
 
-    # Views get a synthetic all-column pk from introspection, but cannot be
-    # edited in place, so treat them as read-only here.
-    allow_edit = (not dataset.is_readonly and
-                  model._meta.primary_key is not False and
-                  not dataset.cached_is_view(table))
+    # Views get a synthetic all-column pk from introspection, which is not
+    # a usable row key. They get no row links and no editing.
+    allow_detail = (model._meta.primary_key is not False and
+                    not dataset.cached_is_view(table))
+    allow_edit = allow_detail and not dataset.is_readonly
     allow_bulk = allow_edit and not is_composite_pk
 
     if request.method == 'POST':
@@ -922,10 +924,10 @@ def table_content(table):
     session['last_viewed'] = last_viewed[:10]
 
     table_pk = model._meta.primary_key
-    rows, keys = [], ([] if allow_edit else None)
+    rows, keys = [], ([] if allow_detail else None)
     for row in query:
         rows.append([row[c] for c in columns])
-        if allow_edit:
+        if allow_detail:
             keys.append(encode_pk(row, table_pk))
     result = Result('rows', columns=columns, rows=rows, keys=keys)
 
@@ -935,6 +937,7 @@ def table_content(table):
     return render_template(
         'table_content.html',
         allow_bulk=allow_bulk,
+        allow_detail=allow_detail,
         allow_edit=allow_edit,
         fk_lookup=fk_lookup,
         next_page=next_page,
@@ -1201,6 +1204,38 @@ def table_delete(table, pk):
         table=table,
         table_pk=table_pk)
 
+@app.route('/<table>/row/<b64:pk>/')
+@require_table
+def table_row_detail(table, pk):
+    dataset = get_dataset()
+    dataset.ensure_cache()
+    model = dataset[table].model_class
+    table_pk = model._meta.primary_key
+    if not table_pk or dataset.cached_is_view(table):
+        flash('Row detail requires a table with a primary key.', 'danger')
+        return redirect(url_for('table_content', table=table))
+
+    expr = decode_pk(model, pk)
+    try:
+        row = model.select().where(expr).dicts().get()
+    except model.DoesNotExist:
+        pk_repr = pk_display(table_pk, pk)
+        flash('Could not fetch row with primary-key %s.' % str(pk_repr),
+              'danger')
+        return redirect(url_for('table_content', table=table))
+
+    fk_lookup = {fk.column: (fk.dest_table, fk.dest_column)
+                 for fk in dataset.cached_foreign_keys(table)}
+    return render_template(
+        'table_row.html',
+        allow_edit=not dataset.is_readonly,
+        fk_lookup=fk_lookup,
+        model=model,
+        pk=pk,
+        row=row,
+        table=table,
+        table_pk=table_pk)
+
 @app.route('/<table>/query/', methods=['GET', 'POST'])
 @require_table
 def table_query(table):
@@ -1266,6 +1301,27 @@ def table_export(table):
         columns=columns,
         table=table)
 
+@app.route('/download/')
+def db_download():
+    dataset = get_dataset()
+    # The same filename sanitizer the row exports use.
+    filename = re.sub(r'[^\w\d\-\.]+', '', dataset.basename) or 'database.db'
+    tmp_dir = tempfile.mkdtemp()
+    dest = os.path.join(tmp_dir, filename)
+    try:
+        # VACUUM INTO produces a consistent snapshot even mid-write.
+        dataset.query('VACUUM INTO ?', (dest,))
+    except Exception as exc:
+        shutil.rmtree(tmp_dir, ignore_errors=True)
+        flash('Error creating database snapshot: %s' % exc, 'danger')
+        app.logger.exception('Error creating database snapshot.')
+        return redirect(url_for('index'))
+
+    response = send_file(dest, mimetype='application/octet-stream',
+                         as_attachment=True)
+    response.call_on_close(lambda: shutil.rmtree(tmp_dir, ignore_errors=True))
+    return response
+
 @app.route('/<table>/import/', methods=['GET', 'POST'])
 @require_table
 def table_import(table):

sqlite_web/static/css/sqlbrowse.css

@@ -37,6 +37,43 @@ table.cell-content td.num {
     font-variant-numeric: tabular-nums;
     text-align: right;
 }
+table.cell-content tbody td {
+    position: relative;
+}
+svg.icon {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+    vertical-align: -2px;
+}
+td a.rowaction {
+    padding: 0 2px;
+}
+button.copy-cell {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    padding: 1px 3px 2px;
+    line-height: 1;
+    color: #555555;
+    background: #f8f9fa;
+    border: 1px solid #aaaaaa;
+    border-radius: 3px;
+    cursor: pointer;
+}
+button.copy-cell:hover {
+    background: #e2e6ea;
+}
+button.copy-cell svg.icon {
+    width: 12px;
+    height: 12px;
+    vertical-align: 0;
+}
+/* Numbers are right-aligned, so the button docks left in numeric cells. */
+td.num button.copy-cell {
+    left: 1px;
+    right: auto;
+}
 ul.pagination .page-item .page-link {
     border-color: #aaaaaa !important;
     color: #888;

sqlite_web/static/js/app.js

@@ -109,6 +109,91 @@ App = window.App || {};
             $('button.bulk-action').prop('disabled', ($('input.toggle-pk:checked').length == 0));
         });
 
+        /* Copy cell values and rows as JSON to the clipboard. */
+        function copyText(text, done) {
+            if (navigator.clipboard && window.isSecureContext) {
+                navigator.clipboard.writeText(text).then(done);
+            } else {
+                var ta = $('<textarea style="position:fixed;opacity:0;"></textarea>')
+                    .val(text).appendTo('body');
+                ta[0].select();
+                document.execCommand('copy');
+                ta.remove();
+                done();
+            }
+        }
+
+        /* Returns [value, isNull] for a result cell. The full span holds the
+           untruncated value and external links keep it in the href. */
+        function cellData(td) {
+            var el = td.clone();
+            el.find('button.copy-cell').remove();
+            if (el.children('code').length && el.text().trim() === 'NULL') {
+                return [null, true];
+            }
+            var full = el.find('span.full');
+            if (full.length) {
+                return [full.text(), false];
+            }
+            var href = el.children('a').first().attr('href') || '';
+            if (/^(https?:|mailto:)/.test(href)) {
+                return [href, false];
+            }
+            return [el.text().trim(), false];
+        }
+
+        /* One shared button that rides along inside the hovered cell. */
+        var copyBtn = $('<button class="copy-cell" title="Copy value" type="button">' +
+                        '<svg class="icon"><use href="#i-copy"/></svg></button>');
+        copyBtn.on('click', function(e) {
+            e.preventDefault();
+            var data = cellData(copyBtn.parent()),
+                use = copyBtn.find('use');
+            copyText(data[1] ? 'NULL' : String(data[0]), function() {
+                use.attr('href', '#i-check');
+                setTimeout(function() { use.attr('href', '#i-copy'); }, 800);
+            });
+        });
+        $('table.cell-content').on('mouseenter', 'tbody td', function() {
+            var td = $(this);
+            if (td.find('input.toggle-pk').length || td.find('a.copy-row').length) {
+                copyBtn.detach();
+            } else {
+                copyBtn.appendTo(td);
+            }
+        });
+        $('table.cell-content').on('mouseleave', 'tbody tr', function() {
+            copyBtn.detach();
+        });
+
+        $('a.copy-row').on('click', function(e) {
+            e.preventDefault();
+            var elem = $(this),
+                row = elem.parents('tr'),
+                cols = row.parents('table').find('thead th[data-col]'),
+                tds = row.children('td').filter(function() {
+                    var td = $(this);
+                    return !td.find('input.toggle-pk').length &&
+                           !td.find('a.copy-row').length;
+                }),
+                accum = {};
+            cols.each(function(i) {
+                var td = tds.eq(i);
+                if (!td.length) return;
+                var data = cellData(td),
+                    value = data[0];
+                if (!data[1] && td.hasClass('num') && isFinite(Number(value))) {
+                    value = Number(value);
+                }
+                accum[$(this).data('col')] = value;
+            });
+            copyText(JSON.stringify(accum, null, 2), function() {
+                var use = elem.find('use');
+                use.attr('href', '#i-check');
+                setTimeout(function() { use.attr('href', '#i-copy'); }, 800);
+            });
+        });
+
         /* Initialize focus on SQL textarea. */
         var sqlTextarea = $('textarea#sql, textarea#table-sql');
         if (sqlTextarea.length > 0) {

sqlite_web/static/js/bootstrap.bundle.min.js

@@ -17,7 +17,7 @@
       }
     </style>
     {% block extra_head %}{% endblock %}
-    <script src="{{ url_for('static', filename='js/jquery-1.11.0.min.js') }}" type="text/javascript"></script>
+    <script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}" type="text/javascript"></script>
     <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/app.js') }}" type="text/javascript"></script>
     <script type="text/javascript">
@@ -30,6 +30,7 @@
   </head>
 
   <body class="{% block body_class %}{% endblock %}">
+    {% include "icons.html" %}
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark primary-nav">
       <a class="navbar-brand" href="{{ url_for('index') }}">sqlite-web {{ version }}</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

sqlite_web/static/js/jquery-1.11.0.min.js

@@ -0,0 +1,10 @@
+{# Bootstrap Icons (MIT): copy, check2, eye, pencil, trash. Referenced as
+   <svg class="icon"><use href="#i-name"/></svg>. Same-document symbols, so
+   app.js can swap hrefs and fills follow the link color. #}
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="i-copy" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/></symbol>
+  <symbol id="i-check" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/></symbol>
+  <symbol id="i-eye" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/></symbol>
+  <symbol id="i-pencil" viewBox="0 0 16 16"><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/></symbol>
+  <symbol id="i-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></symbol>
+</svg>