Explain permission decisions in debug tools and documentation

datasette/default_permissions/config.py

@@ -96,6 +96,10 @@ def evaluate_allow_block(self, allow_block: Any) -> Optional[bool]:
         """Evaluate an allow block against the current actor."""
         if allow_block is None:
             return None
+        # Values passed using ``-s permissions.* 1`` or ``0`` are parsed as
+        # integers, but should retain the CLI's boolean 1/0 behavior.
+        if isinstance(allow_block, int) and allow_block in (0, 1):
+            return bool(allow_block)
         return actor_matches_allow(self.actor, allow_block)
 
     def is_in_restriction_allowlist(

datasette/templates/_permission_ui_styles.html

@@ -6,31 +6,72 @@
     padding: 1.5em;
     margin-bottom: 2em;
 }
+.permission-form form {
+    max-width: 60rem;
+}
+.permission-form-grid {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.permission-form-result {
+    margin-top: 1rem;
+    max-width: 60rem;
+}
 .form-section {
-    margin-bottom: 1em;
+    margin-bottom: 1.25em;
 }
 .form-section label {
     display: block;
     margin-bottom: 0.3em;
     font-weight: bold;
 }
 .form-section input[type="text"],
-.form-section select {
-    width: 100%;
-    max-width: 500px;
-    padding: 0.5em;
+.form-section input[type="number"],
+.form-section select,
+.permission-textarea {
+    background-color: #fff;
+    border: 1px solid #aaa;
+    border-radius: 4px;
     box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 3px;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
+    color: #222;
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.4;
+    max-width: none;
+    width: 100%;
+}
+.form-section input[type="text"] {
+    height: 3rem;
+    padding: 0.6rem 0.75rem;
+}
+.form-section input[type="number"] {
+    height: 3rem;
+    max-width: 7rem;
+    padding: 0.6rem 0.75rem;
+}
+.form-section select {
+    height: 3rem;
+    padding: 0.6rem 0.75rem;
+}
+.permission-textarea {
+    font-family: monospace;
+    min-height: 12rem;
+    padding: 0.75rem;
+    resize: vertical;
 }
 .form-section input[type="text"]:focus,
-.form-section select:focus {
-    outline: 2px solid #0066cc;
+.form-section input[type="number"]:focus,
+.form-section select:focus,
+.permission-textarea:focus {
     border-color: #0066cc;
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
+    outline: none;
 }
 .form-section small {
     display: block;
-    margin-top: 0.3em;
+    margin-top: 0.45em;
     color: #666;
 }
 .form-actions {
@@ -142,4 +183,9 @@
     text-align: center;
     color: #666;
 }
+@media only screen and (max-width: 576px) {
+    .permission-form-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
 </style>

datasette/templates/_permissions_debug_tabs.html

@@ -44,10 +44,10 @@
 </style>
 
 <nav class="permissions-debug-tabs">
-    <a href="{{ urls.path('-/permissions') }}" {% if current_tab == "permissions" %}class="active"{% endif %}>Playground</a>
-    <a href="{{ urls.path('-/check') }}{{ query_string }}" {% if current_tab == "check" %}class="active"{% endif %}>Check</a>
-    <a href="{{ urls.path('-/allowed') }}{{ query_string }}" {% if current_tab == "allowed" %}class="active"{% endif %}>Allowed</a>
-    <a href="{{ urls.path('-/rules') }}{{ query_string }}" {% if current_tab == "rules" %}class="active"{% endif %}>Rules</a>
+    <a href="{{ urls.path('-/check') }}{{ query_string }}" {% if current_tab == "check" %}class="active"{% endif %}>Explain</a>
+    <a href="{{ urls.path('-/allowed') }}{{ query_string }}" {% if current_tab == "allowed" %}class="active"{% endif %}>Access map</a>
+    <a href="{{ urls.path('-/rules') }}{{ query_string }}" {% if current_tab == "rules" %}class="active"{% endif %}>Rule explorer</a>
+    <a href="{{ urls.path('-/permissions') }}" {% if current_tab == "permissions" %}class="active"{% endif %}>Activity</a>
     <a href="{{ urls.path('-/actions') }}" {% if current_tab == "actions" %}class="active"{% endif %}>Actions</a>
     <a href="{{ urls.path('-/allow-debug') }}" {% if current_tab == "allow_debug" %}class="active"{% endif %}>Allow debug</a>
 </nav>

datasette/templates/allow_debug.html

@@ -3,29 +3,11 @@
 {% block title %}Debug allow rules{% endblock %}
 
 {% block extra_head %}
+{% include "_permission_ui_styles.html" %}
 <style>
-textarea {
-    height: 10em;
-    width: 95%;
-    box-sizing: border-box;
-    padding: 0.5em;
-    border: 2px dotted black;
-}
-.two-col {
-    display: inline-block;
-    width: 48%;
-}
-.two-col label {
-    width: 48%;
-}
 p.message-warning {
     white-space: pre-wrap;
 }
-@media only screen and (max-width: 576px) {
-    .two-col {
-        width: 100%;
-    }
-}
 </style>
 {% endblock %}
 
@@ -38,24 +20,28 @@ <h1>Debug allow rules</h1>
 
 <p>Use this tool to try out different actor and allow combinations. See <a href="https://docs.datasette.io/en/stable/authentication.html#defining-permissions-with-allow-blocks">Defining permissions with "allow" blocks</a> for documentation.</p>
 
-<form class="core" action="{{ urls.path('-/allow-debug') }}" method="get" style="margin-bottom: 1em">
-    <div class="two-col">
-        <p><label>Allow block</label></p>
-        <textarea name="allow">{{ allow_input }}</textarea>
-    </div>
-    <div class="two-col">
-        <p><label>Actor</label></p>
-        <textarea name="actor">{{ actor_input }}</textarea>
-    </div>
-    <div style="margin-top: 1em;">
-        <input type="submit" value="Apply allow block to actor">
-    </div>
-</form>
-
-{% if error %}<p class="message-warning">{{ error }}</p>{% endif %}
-
-{% if result == "True" %}<p class="message-info">Result: allow</p>{% endif %}
-
-{% if result == "False" %}<p class="message-error">Result: deny</p>{% endif %}
+<div class="permission-form">
+    <form class="core" action="{{ urls.path('-/allow-debug') }}" method="get">
+        <div class="permission-form-grid">
+            <div class="form-section">
+                <label for="allow-block">Allow block</label>
+                <textarea class="permission-textarea" id="allow-block" name="allow">{{ allow_input }}</textarea>
+            </div>
+            <div class="form-section">
+                <label for="allow-actor">Actor</label>
+                <textarea class="permission-textarea" id="allow-actor" name="actor">{{ actor_input }}</textarea>
+            </div>
+        </div>
+        <div class="form-actions">
+            <button type="submit" class="submit-btn">Apply allow block to actor</button>
+        </div>
+    </form>
+
+    {% if error %}<p class="message-warning permission-form-result">{{ error }}</p>{% endif %}
+
+    {% if result == "True" %}<p class="message-info permission-form-result">Result: allow</p>{% endif %}
+
+    {% if result == "False" %}<p class="message-error permission-form-result">Result: deny</p>{% endif %}
+</div>
 
 {% endblock %}

datasette/templates/debug_allowed.html

@@ -49,7 +49,7 @@ <h1>Allowed resources</h1>
 
         <div class="form-section">
             <label for="page_size">Page size:</label>
-            <input type="number" id="page_size" name="_size" value="50" min="1" max="200" style="max-width: 100px;">
+            <input type="number" id="page_size" name="_size" value="50" min="1" max="200">
             <small>Number of results per page (max 200)</small>
         </div>