src/servala/core/forms.py

@@ -5,14 +5,25 @@ from django_jsonform.widgets import JSONFormWidget
 from servala.core.models import ControlPlane, ServiceDefinition
 
 CONTROL_PLANE_USER_INFO_SCHEMA = {
+    "type": "array",
+    "items": {
         "type": "object",
         "properties": {
-        "CNAME Record": {
+            "title": {
-            "title": "CNAME Record",
                 "type": "string",
+                "title": "Title",
+            },
+            "content": {
+                "type": "string",
+                "title": "Content",
+            },
+            "help_text": {
+                "type": "string",
+                "title": "Help Text (optional)",
             },
         },
-    "additionalProperties": {"type": "string"},
+        "required": ["title", "content"],
+    },
 }
 
 

src/servala/core/migrations/0012_convert_user_info_to_array.py

@@ -0,0 +1,65 @@
+# Generated by Django 5.2.7 on 2025-10-24 10:04
+
+from django.db import migrations
+
+
+def convert_user_info_to_array(apps, schema_editor):
+    """
+    Convert user_info from object format {"key": "value"} to array format
+    [{"title": "key", "content": "value"}].
+    """
+    ControlPlane = apps.get_model("core", "ControlPlane")
+
+    for control_plane in ControlPlane.objects.all():
+        if not control_plane.user_info:
+            continue
+
+        # If it's already an array (migration already run or new format), skip
+        if isinstance(control_plane.user_info, list):
+            continue
+
+        # Convert from dict to array
+        if isinstance(control_plane.user_info, dict):
+            new_user_info = []
+            for key, value in control_plane.user_info.items():
+                new_user_info.append({"title": key, "content": value})
+
+            control_plane.user_info = new_user_info
+            control_plane.save(update_fields=["user_info"])
+
+
+def reverse_user_info_to_object(apps, schema_editor):
+    """
+    Reverse the migration by converting array format back to object format.
+    Note: help_text will be lost during reversal.
+    """
+    ControlPlane = apps.get_model("core", "ControlPlane")
+
+    for control_plane in ControlPlane.objects.all():
+        if not control_plane.user_info:
+            continue
+
+        # If it's already an object, skip
+        if isinstance(control_plane.user_info, dict):
+            continue
+
+        # Convert from array to dict
+        if isinstance(control_plane.user_info, list):
+            new_user_info = {}
+            for item in control_plane.user_info:
+                if isinstance(item, dict) and "title" in item and "content" in item:
+                    new_user_info[item["title"]] = item["content"]
+
+            control_plane.user_info = new_user_info
+            control_plane.save(update_fields=["user_info"])
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("core", "0011_alter_organizationorigin_billing_entity"),
+    ]
+
+    operations = [
+        migrations.RunPython(convert_user_info_to_array, reverse_user_info_to_object),
+    ]

src/servala/core/models/service.py

@@ -156,7 +156,8 @@ class ControlPlane(ServalaModelMixin, models.Model):
         blank=True,
         verbose_name=_("User Information"),
         help_text=_(
-            "Key-value information displayed to users when selecting this control plane"
+            'Array of info objects: [{"title": "…", "content": "…", "help_text": "…"}]. '
+            "The help_text field is optional and will be shown as a hover popover on an info icon."
         ),
     )
     wildcard_dns = models.CharField(

src/servala/frontend/templates/frontend/organizations/service_instance_detail.html

@@ -102,8 +102,17 @@
                         </div>
                     </div>
                 {% endif %}
+                {% if control_plane.user_info %}
+                    <div class="card">
+                        <div class="card-header">
+                            <h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
+                        </div>
+                        <div class="card-content">
                             {% include "includes/control_plane_user_info.html" with control_plane=instance.context.control_plane %}
                         </div>
+                    </div>
+                {% endif %}
+            </div>
             {% if instance.spec and spec_fieldsets %}
                 <div class="col-12">
                     <div class="card">
@@ -239,3 +248,12 @@
         </div>
     </div>
 {% endblock content %}
+{% block extra_js %}
+    <script>
+        // Initialize Bootstrap popovers for help text
+        document.addEventListener('DOMContentLoaded', function() {
+            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
+            [...popoverTriggerList].map(el => new bootstrap.Popover(el));
+        });
+    </script>
+{% endblock extra_js %}

src/servala/frontend/templates/frontend/organizations/service_offering_detail.html

@@ -7,9 +7,13 @@
         {{ offering }}
     {% endblock page_title %}
 {% endblock html_title %}
-{% partialdef control-plane-info %}
+{% partialdef control-plane-info inline=True %}
-{% if selected_plane %}
+{% if selected_plane and selected_plane.user_info %}
+    <div class="mt-3">
+        <div class="border-top pt-3">
             {% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
+        </div>
+    </div>
 {% endif %}
 {% endpartialdef %}
 {% partialdef service-form %}
@@ -30,66 +34,99 @@
 {% endpartialdef %}
 {% block content %}
     <section class="section">
+        {% if not has_control_planes %}
+            <!-- No Service Available Message -->
             <div class="row">
-            <div class="col-12 col-lg-8">
+                <div class="col-12">
-                <div class="card">
+                    <div class="alert alert-warning d-flex align-items-center" role="alert">
-                    <div class="card-header d-flex align-items-center">
+                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                        {% if service.logo %}
+                        <div>
-                            <img src="{{ service.logo.url }}"
+                            <strong>{% translate "Service Unavailable" %}</strong>
-                                 alt="{{ service.name }}"
+                            <p class="mb-0">{% translate "We currently cannot offer this service. Please check back later or contact support for more information." %}</p>
-                                 class="me-3"
-                                 style="max-width: 48px;
-                                        max-height: 48px">
-                        {% endif %}
-                        <div class="d-flex flex-column">
-                            <h4 class="mb-0">{{ offering }}</h4>
-                            <small class="text-muted">{{ offering.service.category }}</small>
                         </div>
                     </div>
+                </div>
+            </div>
+        {% else %}
+            <!-- Two Column Layout -->
+            <div class="row g-3">
+                <!-- Left Column: Service Provider Zone -->
+                <div class="col-12 col-lg-6">
+                    <div class="card h-100">
+                        <div class="card-header">
+                            <h5 class="mb-0">{% translate "Service Provider Zone" %}</h5>
+                        </div>
                         <div class="card-body">
-                        {% if offering.description %}
-                            <div class="row mb-3">
-                                <div class="col-12">
-                                    <p>{{ offering.description|urlize }}</p>
-                                </div>
-                            </div>
-                        {% endif %}
-                        {% if not has_control_planes %}
-                            <p>{% translate "We currently cannot offer this service, sorry!" %}</p>
-                        {% else %}
                             <form hx-trigger="change"
                                   hx-get="{{ request.path }}?fragment=service-form"
                                   hx-target="#service-form"
-                                  hx-swap="outerHTML">
+                                  hx-swap="outerHTML"
+                                  class="control-plane-select-form">
                                 {{ select_form }}
                             </form>
+                            <style>
+                                .control-plane-select-form .form-label {
+                                    display: none;
+                                }
+                            </style>
+                            <div id="control-plane-info"
+                                 hx-trigger="load, change from:form"
+                                 hx-get="{{ request.path }}?fragment=control-plane-info">
+                                {% partial control-plane-info %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Right Column: Service Information -->
+                <div class="col-12 col-lg-6">
+                    <div class="card h-100">
+                        <div class="card-header">
+                            <h5 class="mb-0">{% translate "Service Information" %}</h5>
+                        </div>
+                        <div class="card-body">
+                            {% if offering.service.logo or offering.description %}
+                                <div class="d-flex gap-3 mb-3">
+                                    {% if offering.service.logo %}
+                                        <div class="flex-shrink-0">
+                                            <img src="{{ offering.service.logo.url }}"
+                                                 alt="{{ offering.service.name }}"
+                                                 style="max-width: 64px;
+                                                        max-height: 64px">
+                                        </div>
                                     {% endif %}
-                        {% if service.external_links or offering.external_links %}
+                                    {% if offering.description %}
-                            <div class="row mt-3">
+                                        <div class="flex-grow-1">
-                                <div class="col-12">
+                                            <p class="mb-0">{{ offering.description|urlize }}</p>
+                                        </div>
+                                    {% endif %}
+                                </div>
+                            {% endif %}
+                            {% if offering.service.external_links or offering.external_links %}
+                                {% if offering.service.logo or offering.description %}<hr class="my-3">{% endif %}
                                 <h6 class="mb-3">{% translate "External Links" %}</h6>
                                 <div class="d-flex flex-wrap gap-2">
-                                        {% for link in service.external_links %}
+                                    {% for link in offering.service.external_links %}
                                         {% include "includes/external_link.html" %}
                                     {% endfor %}
                                     {% for link in offering.external_links %}
                                         {% include "includes/external_link.html" %}
                                     {% endfor %}
                                 </div>
-                                </div>
+                            {% else %}
-                            </div>
+                                {% if not offering.service.logo and not offering.description %}
+                                    <p class="text-muted mb-0">{% translate "No additional information available." %}</p>
+                                {% endif %}
                             {% endif %}
                         </div>
                     </div>
+                </div>
+            </div>
+        {% endif %}
+        <!-- Service Form (unchanged) -->
+        <div class="row mt-3">
+            <div class="col-12">
                 <div id="service-form">{% partial service-form %}</div>
             </div>
-            <div class="col-12 col-lg-4">
-                {% if has_control_planes %}
-                    <div id="control-plane-info"
-                         hx-trigger="load, change from:form"
-                         hx-get="{{ request.path }}?fragment=control-plane-info">{% partial control-plane-info %}</div>
-                {% endif %}
-            </div>
         </div>
     </section>
 {% endblock content %}
@@ -103,4 +140,19 @@
         </script>
         <script defer src="{% static "js/fqdn.js" %}"></script>
     {% endif %}
+    <script>
+        // Initialize Bootstrap popovers for help text
+        document.addEventListener('DOMContentLoaded', function() {
+            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
+            [...popoverTriggerList].map(el => new bootstrap.Popover(el));
+        });
+
+        // Re-initialize popovers after HTMX swaps
+        document.body.addEventListener('htmx:afterSwap', function(event) {
+            if (event.detail.target.id === 'control-plane-info') {
+                const popoverTriggerList = event.detail.target.querySelectorAll('[data-bs-toggle="popover"]');
+                [...popoverTriggerList].map(el => new bootstrap.Popover(el));
+            }
+        });
+    </script>
 {% endblock extra_js %}

src/servala/frontend/templates/includes/control_plane_user_info.html

@@ -1,26 +1,26 @@
 {% load i18n %}
-{% comment %}
-Reusable snippet for displaying ControlPlane user_info
-Usage: {% include "includes/control_plane_user_info.html" with control_plane=control_plane_object %}
-{% endcomment %}
 {% if control_plane.user_info %}
-    <div class="card">
+    <div class="control-plane-info-list">
-        <div class="card-header">
+        {% for info in control_plane.user_info %}
-            <h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
+            <div class="info-item mb-3">
+                <div class="d-flex align-items-center mb-1">
+                    <small class="text-muted fw-semibold">
+                        {{ info.title }}
+                    </small>
+                    {% if info.help_text %}
+                        <i class="bi bi-info-circle ms-1 text-muted"
+                           data-bs-toggle="popover"
+                           data-bs-trigger="hover focus"
+                           data-bs-placement="top"
+                           data-bs-content="{{ info.help_text }}"
+                           style="cursor: help;
+                                  font-size: 0.875rem;"></i>
+                    {% endif %}
+                </div>
+                <div class="bg-light-subtle p-2 rounded">
+                    <code class="text-dark">{{ info.content }}</code>
+                </div>
             </div>
-        <div class="card-content">
-            <div class="table-responsive">
-                <table class="table mb-0 table-lg">
-                    <tbody>
-                        {% for key, value in control_plane.user_info.items %}
-                            <tr>
-                                <th>{{ key }}</th>
-                                <td>{{ value }}</td>
-                            </tr>
         {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
     </div>
 {% endif %}