Error view for review page (#273)

Introduces an error view macro (importerErrorView) which shows users any errors of warnings encountered during the mapping process. The data representation for erros and warnings is now grouped by the error itself, showing the rows and fields where it occurs.

{
   message: "An error",
   meta: {
     first:  1,
     count: 1,
   },
  fields: ["A"],
  rows: []
}

rows in the structure above contains all of the rows containing errors along with the previous and following rows for extra context. The specific cells containing the error in each row has a new tag, error: true to show that the cell contains an error.

Author: rossjones

lib/importer/assets/css/error.css

@@ -0,0 +1,3 @@
+.validation-error-message {
+    color: #d4351c !important;
+}

lib/importer/assets/css/selectable_table.css

@@ -345,3 +345,25 @@ table.selectable thead tr[data-key=text]>*:empty::after {
         height: calc((18px) + (4em))
     }
 }
+
+/* Validation errors */
+table.selectable td.validation-error {
+    text-decoration: #d4351c wavy underline;
+}
+
+table.selectable tr.validation-error::before,
+table.selectable tr.validation-error th[scope=row] {
+    background-color: lightpink;
+}
+
+table.selectable tr.validation-error:last-child::before {
+    border-bottom-left-radius: 10px;
+}
+
+/* Don't rely on coloured elements to distinguish rows, as this isn't accessible
+to people with some vision impairments. So display a dot next to invalid rows.
+*/
+table.selectable tr.validation-error::before {
+    content: "•";
+    padding-top: 3px;
+}

lib/importer/assets/docs/component-sheet-selector.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Sheet selector – Data Upload Design Kit by Register Dynamics</title>
     <link href="/public/stylesheets/application.css" rel="stylesheet" type="text/css" />
+    <link href="../css/error.css" rel="stylesheet" type="text/css" />
     <link href="../css/sheet_selector.css" rel="stylesheet" type="text/css" />
     <link href="../css/selectable_table.css" rel="stylesheet" type="text/css" />
     <link href="./docs.css" rel="stylesheet" type="text/css" />

lib/importer/assets/js/selectable_table.js

@@ -721,7 +721,7 @@ window.addEventListener("load", function() {
 
         const headerRowCellCount = table.querySelectorAll('th[scope="col"]').length
         const headerRowCount = table.querySelectorAll('thead tr').length
-        const headerRowOffset = headerRowCellCount > 0 ? headerRowCount  : 0;
+        const headerRowOffset = headerRowCellCount > 0 ? headerRowCount  : 1;
         var columnOffset = 0;
 
         // If there are row numbers, the column numbers will be off as it includes the

lib/importer/govuk-prototype-kit.config.json

@@ -52,6 +52,7 @@
     "/assets/js/selectable_table.js"
   ],
   "stylesheets": [
+    "/assets/css/error.css",
     "/assets/css/sheet_selector.css",
     "/assets/css/range_selector.css",
     "/assets/css/selectable_table.css"
@@ -87,6 +88,10 @@
     {
       "macroName": "tableView",
       "importFrom": "importer/macros/table_view.njk"
+    },
+    {
+      "macroName": "importerErrorView",
+      "importFrom": "importer/macros/error_view.njk"
     }
   ]
 }

lib/importer/nunjucks/importer/macros/error_view.njk

@@ -0,0 +1,76 @@
+{% from "importer/macros/table_view.njk" import tableView %}
+
+{#
+    importerErrorView displays errors from the result of a mapping attempt.
+
+    These errors are grouped so that similar errors in the same column are
+    shown together, and each side of the error there should also be a single
+    row of non-erroring data for context where possible.
+
+    The expected error/warning structure from the API is as follows:
+
+    [
+        {
+          message: "An error occurred",
+          fields: ["A"],
+          rows: [["A", "B", "C"]] }
+        },
+        {
+          message: "A warning is necessary",
+          fields: ["B"],
+            rows: [["A"]]
+        }
+    ]
+
+#}
+{% macro importerErrorView(session, results ) %}
+    {% set tableHeaders =  importerHeaderRowDisplay(session, "source") %}
+
+    <p class="govuk-body">
+        During import there were <strong>{{results.errorCount}}</strong> errors and <strong>{{results.warningCount}}</strong> warnings.
+    </p>
+
+    {% if results.errors.length > 0 %}
+        <h2 class="govuk-heading-m">Errors</h2>
+        {% for error in results.errors %}
+            <div class="govuk-form-group govuk-form-group--error">
+                <h2 class="govuk-heading-m validation-error-message">{{error.message}}</h2>
+                <p class="govuk-body">This error occurs {{error.meta.count | count_string}} in your data. The first time at row {{ error.meta.first}}:</p>
+
+                {{ tableView( {
+                        caption: false,
+                        showHeaders: true,
+                        headers: tableHeaders,
+                        showRowNumbers: true,
+                        rows: error.rows,
+                        moreRowsCount: 0
+                    } )
+                }}
+            </div>
+        {% endfor %}
+    {% endif %}
+
+    {% if results.warnings.length > 0 %}
+        <h2 class="govuk-heading-m">Warnings</h2>
+        {% for warning in results.warnings %}
+            <div class="govuk-form-group govuk-form-group--error">
+                <h2 class="govuk-heading-m validation-error-message">{{warning.message}}</h2>
+                <p class="govuk-body">This warning occurs {{warning.meta.count | count_string}} in your data. The first time at row {{ warning.meta.first}}:</p>
+
+
+                {{ tableView( {
+                        caption: false,
+                        showHeaders: true,
+                        headers: tableHeaders,
+                        showRowNumbers: true,
+                        rows: warning.rows,
+                        moreRowsCount: 0
+                    } )
+                }}
+            </div>
+        {% endfor %}
+    {% endif %}
+
+{% endmacro %}
+
+

lib/importer/nunjucks/importer/macros/footer_selector.njk

@@ -5,7 +5,5 @@
     {% set rows = importerGetTrailingRows(data, count) %}
     {% set caption = importerGetTableCaption(data, "Last", count) %}
 
-    {% set tableHeaders = importerHeaderRowDisplay(data, "source") %}
-
-    {{ importerRangeSelector(rows, caption, tableHeaders, true) }}
+    {{ importerRangeSelector(rows, caption, false, true) }}
 {% endmacro %}

lib/importer/nunjucks/importer/macros/header_selector.njk

@@ -4,7 +4,6 @@
 {% macro importerHeaderSelector(data, start, count=10) %}
     {% set rows = importerGetRows(data, start, count) %}
     {% set caption = importerGetTableCaption(data, "First", count) %}
-    {% set tableHeaders =  importerHeaderRowDisplay(data, "index") %}
 
-    {{ importerRangeSelector(rows, caption, tableHeaders, true) }}
+    {{ importerRangeSelector(rows, caption, false, true) }}
 {% endmacro %}

lib/importer/nunjucks/importer/macros/range_selector.njk

@@ -43,7 +43,6 @@
                 {% if showRowNumbers %}
                   <th scope="row" class="rowIndex">{{ rowObj.index }}</th>
                 {% endif %}
-
                   {% for cell in rowObj.row %}
                   <td aria-selected="false"
                     {% if cell.colspan %}

lib/importer/nunjucks/importer/macros/table_view.njk

@@ -26,6 +26,7 @@ Renders a table view using the provided parameters to determine what is being sh
   * moreRowsCount - How many more rows are available but now shown, useful when showing only n of many.
 #}
 {% macro tableView(params) %}
+
     <table class="selectable govuk-body" data-persist-selection="true">
         {% if params.caption %}
           <caption class="govuk-table__caption govuk-table__caption--m">{{params.caption}}</caption>
@@ -44,8 +45,9 @@ Renders a table view using the provided parameters to determine what is being sh
         {% endif %}
         <tbody>
             {% for rowObj in params.rows %}
-            <tr>
-                {% if showRowNumbers %}
+            <tr class="govuk-table__row {% if importerRowHasHeader(rowObj) %}
+            validation-error{%endif%}">
+                {% if params.showRowNumbers %}
                   <th scope="row" class="rowIndex">{{ rowObj.index }}</th>
                 {% endif %}
                 {% for cell in rowObj.row %}
@@ -56,6 +58,10 @@ Renders a table view using the provided parameters to determine what is being sh
                   {% if cell.rowspan %}
                     rowspan="{{ cell.rowspan }}"
                   {% endif %}
+
+                  {% if cell.error %}
+                    class="validation-error"
+                  {% endif %}
                 >{{cell.value }}</td>
                 {% endfor %}
             </tr>