fix: import export validation errors (#897)

Author: lukasvinclav

src/unfold/contrib/import_export/templates/admin/import_export/import_validation.html

@@ -1,21 +1,21 @@
 {% load i18n unfold %}
 
 {% block validation_errors %}
-    <div class="bg-red-50 border border-red-200 mb-4 mt-8 rounded shadow-sm text-red-500 text-sm dark:bg-red-500/20 dark:border-red-500/20">
-        <div class="border-b border-red-200 flex flex-row py-3 px-4 dark:border-red-500/20">
-            <h2 class="font-medium">
-                {% trans "Some rows failed to validate" %}
-            </h2>
-        </div>
+    {% capture as import_error silent %}
+        <span class="block font-semibold mb-2">
+            {% trans "Some rows failed to validate" %}
+        </span>
 
-        <div class="px-4 py-3">
-            <p>
-                {% trans "Please correct these errors in your data where possible, then reupload it using the form above." %}
-            </p>
-        </div>
+        <span class="block">
+            {% trans "Please correct these errors in your data where possible, then reupload it using the form above." %}
+        </span>
+    {% endcapture %}
+
+    <div class="mt-8">
+        {% include "unfold/helpers/messages/error.html" with error=import_error %}
     </div>
 
-    <table class="border-gray-200 border-spacing-none border-separate w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
+    <table class="import-preview border-gray-200 border-spacing-none border-separate w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
         <thead class="hidden lg:table-header-group font-semibold text-gray-900 dark:text-gray-100">
             <tr>
                 <th class="align-middle capitalize px-3 py-2 text-left">
@@ -41,19 +41,24 @@ <h2 class="font-medium">
                         {{ row.number }}
                     </td>
 
-                    <td data-label="{% trans "Errors" %}" class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800">
-                        <div>
-                            <span class="bg-red-600 font-semibold ml-2 px-1 rounded-sm text-xs text-white">{{ row.error_count }}</span>
-                        </div>
+                    <td data-label="{% trans "Errors" %}" class="errors align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800">
+                        <span class="validation-error-count bg-red-600 font-semibold ml-2 px-1 rounded-sm text-xs text-white">{{ row.error_count }}</span>
 
-                        <div class="validation-error-container">
+                        <div class="validation-error-container rounded-md !bg-white border left-12 !m-0 !p-0 !top-3 dark:!bg-gray-800 dark:!border-gray-700 min-w-72">
                             <ul class="validation-error-list">
                                 {% for field_name, error_list in row.field_specific_errors.items %}
-                                    <li>
-                                        <span class="validation-error-field-label">{{ field_name }}</span>
-                                        <ul>
+                                    <li class="p-3">
+                                        <span class="validation-error-field-label !border-0 font-semibold mb-1 !text-font-important-light dark:!text-font-important-dark">
+                                            {{ field_name }}
+                                        </span>
+
+                                        <ul class="text-xs !m-0">
                                             {% for error in error_list %}
-                                                <li>{{ error }}</li>
+                                                <li class="!m-0">
+                                                    <p class="leading-normal">
+                                                        {{ error }}
+                                                    </p>
+                                                </li>
                                             {% endfor %}
                                         </ul>
                                     </li>

src/unfold/contrib/import_export/templates/admin/import_export/resource_fields_list.html

@@ -1,7 +1,7 @@
-{% load i18n %}
+{% load unfold i18n %}
 
 {% block fields_help %}
-    <div class="bg-blue-50 mb-4 text-blue-500 px-3 py-3 rounded-md text-sm dark:bg-blue-500/20 dark:border-blue-500/10">
+    {% capture as fields_help silent %}
         {% if import_or_export == "export" %}
             {% trans "This exporter will export the following fields: " %}
         {% elif import_or_export == "import" %}
@@ -20,5 +20,7 @@
                 {% endfor %}
             </dl>
         {% endif %}
-    </div>
+    {% endcapture %}
+
+    {% include "unfold/helpers/messages/info.html" with message=fields_help %}
 {% endblock %}

src/unfold/static/unfold/css/styles.css

@@ -1,19 +1,18 @@
 {% if messages %}
-    <ul>
+    <ul class="flex flex-col gap-4 mb-8">
         {% for message in messages %}
-            <li class="{{ message.tags }} mb-3 px-3 py-3 rounded-md text-sm last:mb-8
-                       {% if message.tags == 'success' %}
-                           bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
-                       {% elif message.tags == 'warning' %}
-                           bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400
-                       {% elif message.tags == 'error' %}
-                           bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400
-                       {% elif message.tags == 'info' %}
-                           bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
-                       {% else %}
-                           bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400
-                       {% endif %}">
-                {{ message|capfirst }}
+            <li class="*:!mb-0">
+                {% if message.tags == 'info' %}
+                    {% include "unfold/helpers/messages/info.html" with message=message %}
+                {% elif message.tags == 'success' %}
+                    {% include "unfold/helpers/messages/success.html" with message=message %}
+                {% elif message.tags == 'warning' %}
+                    {% include "unfold/helpers/messages/warning.html" with message=message %}
+                {% elif message.tags == 'error' %}
+                    {% include "unfold/helpers/messages/error.html" with message=message %}
+                {% else %}
+                    {% include "unfold/helpers/messages/debug.html" with message=message %}
+                {% endif %}
             </li>
         {% endfor %}
     </ul>

src/unfold/templates/unfold/helpers/messages.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400">
+    {{ message }}
+</p>

src/unfold/templates/unfold/helpers/messages/debug.html

@@ -1,13 +1,15 @@
 {% load i18n %}
 
-{% if errors or error %}
-    <p class="errornote bg-red-100 mb-8 text-red-600 px-3 py-3 rounded-md text-sm dark:bg-red-500/20 dark:border-red-500/20 dark:text-red-500 group-[.inline-tabular]:mb-0 group-[.inline-tabular]:mt-3 group-[.inline-tabular]:mx-3 group-[.inline-stacked]:mb-3 group-[.inline-stacked]:mt-3 group-[.inline-stacked]:mx-3">
+{% if errors or error or message %}
+    <div class="errornote mb-3 px-3 py-3 rounded-md group-[.inline-tabular]:mb-0 group-[.inline-tabular]:mt-3 group-[.inline-tabular]:mx-3 group-[.inline-stacked]:mb-3 group-[.inline-stacked]:mt-3 group-[.inline-stacked]:mx-3 bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
         {% if error %}
             {{ error }}
+        {% elif message %}
+            {{ message }}
         {% else %}
             {% for error in errors %}
                 {{ error }}
             {% endfor %}
         {% endif %}
-    </p>
+    </div>
 {% endif %}

src/unfold/templates/unfold/helpers/messages/error.html

@@ -1,3 +1,3 @@
-<p class="bg-blue-50 mb-8 text-blue-500 px-3 py-3 rounded-md text-sm dark:bg-blue-500/20 dark:border-blue-500/10">
-    {{ message|safe }}
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
+    {{ message }}
 </p>

src/unfold/templates/unfold/helpers/messages/info.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
+    {{ message }}
+</p>

src/unfold/templates/unfold/helpers/messages/success.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
+    {{ message }}
+</p>