Config - format actions, add missing buttons

Author: pkujawa

src/hope/apps/administration/panels/console.py

@@ -26,6 +26,15 @@
 from django.utils.translation import gettext_lazy as _
 from django.views.decorators.cache import cache_page
 
+# Unfold-compatible CSS classes for form widgets
+_INPUT_CSS = (
+    "border border-base-200 bg-white font-medium rounded-default shadow-xs "
+    "text-font-default-light text-sm px-3 py-2 w-full max-w-2xl "
+    "focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 "
+    "dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark"
+)
+_SELECT_CSS = _INPUT_CSS + " appearance-none pr-8"
+
 logger = logging.getLogger(__name__)
 
 
@@ -81,8 +90,11 @@ def _sysinfo(request: Any) -> HttpResponse:
 
 
 class RedisCLIForm(forms.Form):
-    command = forms.CharField()
-    connection = forms.ChoiceField(choices=zip(settings.CACHES.keys(), settings.CACHES.keys(), strict=False))
+    command = forms.CharField(widget=forms.TextInput(attrs={"class": _INPUT_CSS}))
+    connection = forms.ChoiceField(
+        choices=zip(settings.CACHES.keys(), settings.CACHES.keys(), strict=False),
+        widget=forms.Select(attrs={"class": _SELECT_CSS}),
+    )
 
 
 def panel_redis(self: Any, request: Any, extra_context: Any = None) -> HttpResponse:
@@ -161,7 +173,10 @@ class SentryForm(forms.Form):
         ("404", "Error 404"),
         ("500", "Error 500"),
     ]
-    action = forms.ChoiceField(choices=ACTIONS, widget=forms.RadioSelect)
+    action = forms.ChoiceField(
+        choices=ACTIONS,
+        widget=forms.RadioSelect(attrs={"class": "accent-primary-600"}),
+    )
 
 
 def panel_sentry(self: Any, request: Any, extra_context: Any = None) -> HttpResponse:
@@ -236,7 +251,10 @@ class ErrorPageForm(forms.Form):
         ("404", "Error 404"),
         ("500", "Error 500"),
     ]
-    action = forms.ChoiceField(choices=ACTIONS, widget=forms.RadioSelect)
+    action = forms.ChoiceField(
+        choices=ACTIONS,
+        widget=forms.RadioSelect(attrs={"class": "accent-primary-600"}),
+    )
 
 
 def panel_error_page(self: Any, request: Any, extra_context: Any = None) -> HttpResponse:

src/hope/apps/administration/panels/es.py

@@ -25,7 +25,10 @@ class EsForm(forms.Form):
         ("rebuild_search_index", "rebuild_search_index()"),
         ("populate_all_indexes", "populate_all_indexes()"),
     ]
-    action = forms.ChoiceField(choices=ACTIONS, widget=forms.RadioSelect)
+    action = forms.ChoiceField(
+        choices=ACTIONS,
+        widget=forms.RadioSelect(attrs={"class": "accent-primary-600"}),
+    )
 
 
 class ElasticsearchPanel:

src/hope/apps/administration/templates/administration/_form_card.html

@@ -0,0 +1,31 @@
+{# Reusable Unfold-styled form card for console panels. #}
+{# Pass `form` — renders visible fields with labels inside a bordered card. #}
+<div class="border border-base-200 dark:border-base-700 rounded-default bg-white dark:bg-base-900 shadow-xs overflow-hidden mb-4">
+    <div class="p-4 space-y-5">
+        {% for field in form.visible_fields %}
+            <div>
+                {% if field.label %}
+                    <label for="{{ field.id_for_label }}" class="block font-semibold mb-2 text-font-important-light dark:text-font-important-dark text-sm">
+                        {{ field.label }}
+                    </label>
+                {% endif %}
+
+                <div class="text-sm [&_ul]:space-y-2.5 [&_ul]:list-none [&_ul]:p-0 [&_ul]:m-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2.5 [&_label]:flex [&_label]:items-center [&_label]:gap-2.5 [&_label]:cursor-pointer [&_input[type=radio]]:accent-primary-600 [&_input[type=radio]]:w-4 [&_input[type=radio]]:h-4">
+                    {{ field }}
+                </div>
+
+                {% if field.errors %}
+                    <div class="mt-1">
+                        {% for error in field.errors %}
+                            <p class="text-red-600 text-xs">{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+
+                {% if field.help_text %}
+                    <p class="text-font-subtle-light dark:text-font-subtle-dark text-xs mt-1">{{ field.help_text }}</p>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+</div>

src/hope/apps/administration/templates/administration/panels/elasticsearch.html

@@ -3,11 +3,7 @@
     {% include "administration/_kv_table.html" with items=config.items %}
     <form method="post">
         {% csrf_token %}
-        <div class="border border-base-200 dark:border-base-700 rounded-default bg-white dark:bg-base-900 shadow-xs overflow-hidden mb-4">
-            <table class="w-full text-sm">
-                {{ form }}
-            </table>
-        </div>
+        {% include "administration/_form_card.html" %}
         <div class="mt-4">
             <button type="submit" class="font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 bg-primary-600 border-transparent text-white hover:bg-primary-600/80">
                 <span class="material-symbols-outlined !text-[18px]">play_arrow</span> {% translate 'Execute' %}

src/hope/apps/administration/templates/administration/panels/email.html

@@ -14,14 +14,9 @@
         {% include "administration/_kv_table.html" with items=smtp.items %}
         <form method="POST">
             {% csrf_token %}
-            <div class="border border-base-200 dark:border-base-700 rounded-default bg-white dark:bg-base-900 shadow-xs overflow-hidden mb-4">
-                <table class="w-full text-sm">
-                    {{ form }}
-                </table>
-            </div>
             <div class="mt-4">
                 <button type="submit" class="font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 bg-primary-600 border-transparent text-white hover:bg-primary-600/80">
-                    <span class="material-symbols-outlined !text-[18px]">send</span> {% translate 'Test' %}
+                    <span class="material-symbols-outlined !text-[18px]">send</span> {% translate 'Send Test Email' %}
                 </button>
             </div>
         </form>

src/hope/apps/administration/templates/administration/panels/redis.html

@@ -3,16 +3,18 @@
     <div class="redis-cli">
         <form method="POST" id="redisForm">
             {% csrf_token %}
-            <div class="border border-base-200 dark:border-base-700 rounded-default bg-white dark:bg-base-900 shadow-xs overflow-hidden mb-4">
-                <table class="w-full text-sm">
-                    {{ form.connection }}
-                    {{ form.command }}
-                </table>
-            </div>
-            <div class="mt-4 mb-6">
+            {% include "administration/_form_card.html" %}
+            <div class="flex flex-wrap items-center gap-2 mt-4 mb-6">
                 <button type="submit" class="font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 bg-primary-600 border-transparent text-white hover:bg-primary-600/80">
                     <span class="material-symbols-outlined !text-[18px]">play_arrow</span> {% translate 'Execute' %}
                 </button>
+                <span class="text-font-subtle-light dark:text-font-subtle-dark text-sm mx-1">|</span>
+                <a href="#" class="redis-cli-command font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 border-base-200 bg-white text-important dark:border-base-700 dark:bg-transparent hover:bg-base-100/80 dark:hover:bg-base-800/80">FLUSHALL ASYNC</a>
+                <a href="#" class="redis-cli-command font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 border-base-200 bg-white text-important dark:border-base-700 dark:bg-transparent hover:bg-base-100/80 dark:hover:bg-base-800/80">KEYS *</a>
+                <a href="#" class="redis-cli-command font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 border-base-200 bg-white text-important dark:border-base-700 dark:bg-transparent hover:bg-base-100/80 dark:hover:bg-base-800/80">CONFIG GET *</a>
+                <a href="https://redis.io/commands/" target="_blank" rel="noopener" class="font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 border-base-200 bg-white text-important dark:border-base-700 dark:bg-transparent hover:bg-base-100/80 dark:hover:bg-base-800/80">
+                    <span class="material-symbols-outlined !text-[18px]">open_in_new</span> {% translate 'Commands' %}
+                </a>
             </div>
         </form>
         {% if stdout %}
@@ -25,3 +27,16 @@
         {% endif %}
     </div>
 {% endblock left %}
+
+{% block footer %}
+    <script src="{% static 'admin/js/jquery.init.js' %}"></script>
+    <script>
+        (function($) {
+            $(".redis-cli-command").on("click", function(e) {
+                e.preventDefault();
+                $("#id_command").val($(this).text());
+                $("#redisForm").submit();
+            });
+        })(django.jQuery);
+    </script>
+{% endblock footer %}

src/hope/apps/administration/templates/administration/panels/sentry.html

@@ -4,11 +4,7 @@
 
     <form method="POST">
         {% csrf_token %}
-        <div class="border border-base-200 dark:border-base-700 rounded-default bg-white dark:bg-base-900 shadow-xs overflow-hidden mb-4">
-            <table class="w-full text-sm">
-                {{ form }}
-            </table>
-        </div>
+        {% include "administration/_form_card.html" %}
         <div class="mt-4">
             <button type="submit" class="font-medium text-sm px-3 py-2 rounded-default border shadow-xs inline-flex items-center justify-center gap-1.5 bg-primary-600 border-transparent text-white hover:bg-primary-600/80">
                 <span class="material-symbols-outlined !text-[18px]">play_arrow</span> {% translate 'Execute' %}