Use Choices for table permissions, refs #24

datasette_acl/static/Choices.js.LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Josh Johnson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

datasette_acl/templates/manage_table_acls.html

@@ -3,6 +3,8 @@
 {% block title %}Permissions for {{ database_name }}/{{ table_name }}{% endblock %}
 
 {% block extra_head %}
+<script src="{{ urls.static_plugins("datasette-acl", "choices-9.0.1.min.js") }}"></script>
+<link rel="stylesheet" href="{{ urls.static_plugins("datasette-acl", "choices-9.0.1.min.css") }}">
 <style>
 #needs-save-message { 
   color: rgb(249, 114, 114);
@@ -24,67 +26,74 @@ <h1>Permissions for {{ database_name }}/{{ table_name }}</h1>
 <p><a href=" {{ urls.table(database_name, table_name) }}">Back to table</a></p>
 
 <form action="{{ request.path }}" method="post">
-{% if valid_actor_ids %}
-  <datalist id="actor-ids">{% for actor_id in valid_actor_ids %}
-    <option value="{{ actor_id }}"></option>
-  {% endfor %}
-  </datalist>
-{% endif %}
-{% if groups %}
-<table>
-  <thead>
-    <tr style="font-weight: bold;">
-      <th>Groups</th>
-      {% for action in actions %}
-        <th>{{ action }}</th>
-      {% endfor %}
-    </tr>
-  </thead>
-  <tbody>
-    {% for group in groups %}
-      <tr>
-        <td><a href="{{ urls.path("/-/acl/groups/" + group) }}">{{ group }}</a> ({{ group_sizes[group] }})</td>
+  {% if groups %}
+  <h3>Groups</h3>
+  {% for group in groups %}
+    <div style="margin-bottom: 1em">
+      <label style="display: block" for="id_group_permissions_{{ group }}"><a href="{{ urls.path("/-/acl/groups/" + group) }}">{{ group }}</a> ({{ group_sizes[group] }})</label>
+      <select multiple name="group_permissions_{{ group }}" id="id_group_permissions_{{ group }}">
         {% for action in actions %}
-          <td><label style="display: block"><input type="checkbox" name="group_permissions_{{ group }}_{{ action }}" {% if group_permissions and group_permissions.get(group, {}).get(action) %}checked{% endif %}></label></td>
+          <option value="{{ action }}" {% if group_permissions and group_permissions.get(group, {}).get(action) %}selected{% endif %}>{{ action }}</option>
         {% endfor %}
-      </tr>
-    {% endfor %}
-  </tbody>
-{% else %}
-<table>
+      </select>
+    </div>
+  {% endfor %}
 {% endif %}
-  <thead>
-    <tr style="font-weight: bold;">
-      <th>Users</th>
+
+<h3>Users</h3>
+{% for user in user_permissions %}
+  <div>
+    {{ user }}
+    <select multiple name="user_permissions_{{ user }}">
       {% for action in actions %}
-        <th>{{ action }}</th>
+        <option value="{{ action }}" {% if user_permissions and user_permissions.get(user, {}).get(action) %}selected{% endif %}>{{ action }}</option>
       {% endfor %}
-    </tr>
-  </thead>
-  <tbody>
-    {% for user in user_permissions %}
-      <tr>
-        <td>{{ user }}</td>
-        {% for action in actions %}
-          <td><label style="display: block"><input type="checkbox" name="user_permissions_{{ user }}_{{ action }}" {% if user_permissions and user_permissions.get(user, {}).get(action) %}checked{% endif %}></label></td>
-        {% endfor %}
-      </tr>
-    {% endfor %}
-    <tr>
-      <td><label for="id_new_actor_id" style="display: block; font-size: 0.7em">Add another user:</label><input data-1p-ignore{% if valid_actor_ids %} list="actor-ids"{% endif %} style="width: 8em" id="id_new_actor_id" name="new_actor_id"></td>
-      {% for action in actions %}
-        <td><label style="padding-top: 0.9em; display: block"><input type="checkbox" name="new_user_{{ action }}"></label></td>
+    </select>
+  </div>
+{% endfor %}
+
+<div style="margin-top: 2em">
+  <label for="id_new_actor_id" style="display: block; font-size: 0.8em">Other user:</label>
+  {% if valid_actor_ids %}
+    <select id="id_new_actor_id" name="new_actor_id">
+      <option></option>
+      {% for actor_id in valid_actor_ids %}
+        <option>{{ actor_id }}</option>
       {% endfor %}
-    </tr>
-  </tbody>
-</table>
+    </select>
+  {% else %}
+    <input data-1p-ignore placeholder="User ID" style="width: 8em" id="id_new_actor_id" name="new_actor_id">
+  {% endif %}
+</div>
+
+<div>
+  <label for="id_new_user_actions" style="display: block; font-size: 0.8em">Permissions for the additional user:</label>
+  <select multiple name="new_user_actions" id="id_new_user_actions">
+    {% for action in actions %}
+      <option value="{{ action }}">{{ action }}</option>
+    {% endfor %}
+  </select>
+</div>
 
 <p style="margin-top: 1em">
   <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
-  <input type="submit" value="Save changes">
+  <input type="submit" value="Save changes" class="core">
   <span id="needs-save-message"></span>
 </p>
 </form>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const selects = document.querySelectorAll('select');
+    selects.forEach(select => {
+        new Choices(select, {
+            removeItemButton: true,
+            containerOuter: 'choices'
+        });
+    });
+});
+</script>
+
 {% if audit_log %}
 <h2>Audit history</h2>
 <table>

datasette_acl/views/table_acls.py

@@ -1,10 +1,12 @@
 from datasette import Response, Forbidden
+from datasette.utils import MultiParams
 from datasette_acl.utils import (
     can_edit_permissions,
     generate_changes_message,
     get_acl_actor_ids,
     validate_actor_id,
 )
+from urllib.parse import parse_qs
 
 
 async def manage_table_acls(request, datasette):
@@ -60,18 +62,22 @@ async def manage_table_acls(request, datasette):
 
     if request.method == "POST":
         group_changes_made = {"added": [], "removed": []}
-        post_vars = await request.post_vars()
+        body = await request.post_body()
+        post_vars = MultiParams(
+            parse_qs(qs=body.decode("utf-8"), keep_blank_values=True)
+        )
         for group_name in groups:
+            selected_group_actions = post_vars.getlist(
+                f"group_permissions_{group_name}"
+            )
             for action_name in [
                 "insert-row",
                 "delete-row",
                 "update-row",
                 "alter-table",
                 "drop-table",
             ]:
-                new_value = bool(
-                    post_vars.get(f"group_permissions_{group_name}_{action_name}")
-                )
+                new_value = action_name in selected_group_actions
                 current_value = bool(
                     current_group_permissions.get(group_name, {}).get(action_name)
                 )
@@ -152,9 +158,11 @@ async def manage_table_acls(request, datasette):
                         request, "That user ID is not valid", datasette.ERROR
                     )
                     return Response.redirect(request.path)
-                post_key_prefix = "new_user"
+                user_actions_key = "new_user_actions"
             else:
-                post_key_prefix = f"user_permissions_{actor_id}"
+                user_actions_key = f"user_permissions_{actor_id}"
+
+            selected_user_actions = post_vars.getlist(user_actions_key)
 
             for action_name in [
                 "insert-row",
@@ -163,7 +171,7 @@ async def manage_table_acls(request, datasette):
                 "alter-table",
                 "drop-table",
             ]:
-                new_value = bool(post_vars.get(f"{post_key_prefix}_{action_name}"))
+                new_value = action_name in selected_user_actions
                 current_value = bool(
                     current_user_permissions.get(actor_id, {}).get(action_name)
                 )

pyproject.toml

@@ -11,7 +11,7 @@ classifiers=[
 ]
 requires-python = ">=3.8"
 dependencies = [
-    "datasette>=1.0a15"
+    "datasette>=1.0a16"
 ]
 
 [project.urls]

tests/test_table_acls.py

@@ -24,7 +24,7 @@
         ManageTableTest(
             description="Group: add insert-row",
             setup_post_data={},
-            post_data={"group_permissions_staff_insert-row": "on"},
+            post_data={"group_permissions_staff": "insert-row"},
             expected_acls=[
                 {
                     "group_name": "staff",
@@ -55,10 +55,9 @@
         ),
         ManageTableTest(
             description="Group: remove insert-row, add update-row and delete-row",
-            setup_post_data={"group_permissions_staff_insert-row": "on"},
+            setup_post_data={"group_permissions_staff": "insert-row"},
             post_data={
-                "group_permissions_staff_update-row": "on",
-                "group_permissions_staff_delete-row": "on",
+                "group_permissions_staff": ["update-row", "delete-row"],
             },
             expected_acls=[
                 {
@@ -132,8 +131,7 @@
             setup_post_data={},
             post_data={
                 "new_actor_id": "newbie",
-                "new_user_insert-row": "on",
-                "new_user_update-row": "on",
+                "new_user_actions": ["insert-row", "update-row"],
             },
             expected_acls=[
                 {
@@ -188,10 +186,10 @@
             description="Existing user: remove insert-row, add update-row",
             setup_post_data={
                 "new_actor_id": "newbie",
-                "new_user_insert-row": "on",
+                "new_user_actions": "insert-row",
             },
             post_data={
-                "user_permissions_newbie_update-row": "on",
+                "user_permissions_newbie": "update-row",
             },
             expected_acls=[
                 {