Make mandatory fields in CRD forms more prominent

src/servala/core/crd.py

@@ -229,6 +229,12 @@ class CrdModelFormMixin:
         if field and field.label and (position := field.label.find(label)) != -1:
             field.label = field.label[position + len(label) :]
 
+    def has_mandatory_fields(self, field_list):
+        for field_name in field_list:
+            if field_name in self.fields and self.fields[field_name].required:
+                return True
+        return False
+
     def get_fieldsets(self):
         fieldsets = []
 
@@ -239,7 +245,12 @@ class CrdModelFormMixin:
             if not field_name.startswith("spec.")
         ]
         if general_fields:
-            fieldset = {"title": "General", "fields": general_fields, "fieldsets": []}
+            fieldset = {
+                "title": "General",
+                "fields": general_fields,
+                "fieldsets": [],
+                "has_mandatory": self.has_mandatory_fields(general_fields),
+            }
             if all(
                 [
                     isinstance(self.fields[field].widget, forms.HiddenInput)
@@ -315,11 +326,24 @@ class CrdModelFormMixin:
                 title = f"{fieldset['title']}: "
                 for field in fieldset["fields"]:
                     self.strip_title(field, title)
+
+                all_fields = fieldset["fields"][:]
+                for sub_fieldset in nested_fieldsets_list:
+                    all_fields.extend(sub_fieldset["fields"])
+                fieldset["has_mandatory"] = self.has_mandatory_fields(all_fields)
+
                 fieldsets.append(fieldset)
 
         # Add 'others' tab if there are any fields
         if others:
-            fieldsets.append({"title": "Others", "fields": others, "fieldsets": []})
+            fieldsets.append(
+                {
+                    "title": "Others",
+                    "fields": others,
+                    "fieldsets": [],
+                    "has_mandatory": self.has_mandatory_fields(others),
+                }
+            )
 
         if hidden_spec_fields:
             fieldsets.append(
@@ -328,6 +352,7 @@ class CrdModelFormMixin:
                     "fields": hidden_spec_fields,
                     "fieldsets": [],
                     "hidden": True,
+                    "has_mandatory": self.has_mandatory_fields(hidden_spec_fields),
                 }
             )
 

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

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% load get_field %}
-<form class="form form-vertical"
+<form class="form form-vertical crd-form"
       method="post"
       {% if form_action %}action="{{ form_action }}"{% endif %}>
     {% csrf_token %}
@@ -8,7 +8,7 @@
         {% for fieldset in form.get_fieldsets %}
             {% if not fieldset.hidden %}
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link {% if forloop.first %}active{% endif %}"
+                    <button class="nav-link {% if forloop.first %}active{% endif %}{% if fieldset.has_mandatory %} has-mandatory{% endif %}"
                             id="{{ fieldset.title|slugify }}-tab"
                             data-bs-toggle="tab"
                             data-bs-target="#{{ fieldset.title|slugify }}"
@@ -17,6 +17,7 @@
                             aria-controls="{{ fieldset.title|slugify }}"
                             aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
                         {{ fieldset.title }}
+                        {% if fieldset.has_mandatory %}<span class="mandatory-indicator">*</span>{% endif %}
                     </button>
                 </li>
             {% endif %}

src/servala/static/css/servala.css

@@ -192,3 +192,46 @@ a.btn-keycloak {
 .service-cards-container .card-footer {
     margin-top: auto;
 }
+
+/* CRD Form mandatory field styling */
+.crd-form .form-group.mandatory .form-label {
+    font-weight: bold;
+    position: relative;
+}
+
+.crd-form .form-group.mandatory .form-label::after {
+    content: " *";
+    color: #dc3545;
+    font-weight: bold;
+}
+
+.crd-form .form-group.mandatory {
+    border-left: 3px solid #dc3545;
+    padding-left: 10px;
+    background-color: rgba(220, 53, 69, 0.05);
+    border-radius: 3px;
+}
+
+.crd-form .nav-tabs .nav-link .mandatory-indicator {
+    color: #dc3545;
+    font-weight: bold;
+    font-size: 1.1em;
+    margin-left: 4px;
+}
+
+html[data-bs-theme="dark"] .crd-form .form-group.mandatory {
+    background-color: rgba(220, 53, 69, 0.1);
+    border-left-color: #ff6b6b;
+}
+
+html[data-bs-theme="dark"] .crd-form .form-group.mandatory .form-label::after {
+    color: #ff6b6b;
+}
+
+html[data-bs-theme="dark"] .crd-form .nav-tabs .nav-link .mandatory-indicator {
+    color: #ff6b6b;
+}
+
+.crd-form .nav-tabs .nav-link.has-mandatory {
+    position: relative;
+}