Allow skipping of header selection page (#306)

It's possible that a spreadsheet does not have headers, and so this PR makes it possible for a user to skip the header selection step by clicking the Skip button.

<img width="1310" height="723" alt="Upload_monthly_pension_return_–_GOV_UK_Prototype_Kit" src="https://github.com/user-attachments/assets/793c811f-2e69-4f4e-b723-df0e9787cf5b" />

Before this button existed, not selecting a header row achieved the same result, which was that the first row was chosen as headers.  This means that when, for instance, using tribble.xlsx we get the following result on the mapping page:

<img width="1043" height="463" alt="Upload_monthly_pension_return_–_GOV_UK_Prototype_Kit" src="https://github.com/user-attachments/assets/0e479383-faff-4878-8e1e-5a6065570048" />

This isn't ideal as the first row (the default when nothing selected) could contain useful data.  

To work around this assumption of a non-null header, we instead make the row for the header range out of bounds (e.g. -1) so that we can use it as a sentinel.  This allows us to fetch the column names during mapping as the base26 value of the index, which results in a mapping screen of 

<img width="1031" height="760" alt="Upload_monthly_pension_return_–_GOV_UK_Prototype_Kit" src="https://github.com/user-attachments/assets/51b7ee0e-1411-4bfc-9cf9-b054852daa0a" />

Unfortunately this approach requires that the backend expose the raw dimensions of the sheet so that the appropriate number of column headings can be generated.

Author: rossjones

lib/importer/src/dudk/backend.js

@@ -206,6 +206,15 @@ function pickUniqueSortedIndexesInRange(start, end, count) {
   return indexes;
 }
 
+exports.SessionGetSheetDimensions = (sid, sheetName) => {
+    const dimensions = getDimensions(sid);
+    const sheetDimensions = dimensions.sheetDimensions.get(sheetName);
+
+    return {
+        rows: sheetDimensions.rows,
+        columns: sheetDimensions.columns
+    };
+}
 // Returns a suggested range containing just the data, given (optional) header
 // and footer ranges. If neither are specified, it will take all of the first
 // sheet except the top row. If the header range is specified, it will take all

lib/importer/src/dudk/sheets.js

@@ -17,18 +17,30 @@ exports.ListSheets = (sid) => {
 // it's intended for driving a list of available columns in the header.
 exports.GetHeader = (sid, sheet) => {
   const headerRange = backend.SessionGetHeaderRange(sid, sheet)
-  const headerSample = backend.SessionGetInputSampleRows(sid, headerRange, 1, 0, 0);
-
-  const samples = headerSample[0][0].row;
   const columns = new Array();
 
-  for (let i = 0; i < samples.length; i++) {
-    if (samples[i]) {
-      columns.push(samples[i].value)
-    } else {
+  // If headerRange starts on row -1 then we know it is a null header range
+  // and we should instead return the indices for the dimensions
+  if (headerRange.start.row == -1) {
+    const dimensions = backend.SessionGetSheetDimensions(sid, sheet);
+    for (let i = 0; i < dimensions.columns; i++) {
       const name = b26.toBase26(i + 1);
       columns.push(name)
     }
+  } else {
+    // We have a valid header range selected by a user, get the real
+    // values from the sheet
+    const headerSample = backend.SessionGetInputSampleRows(sid, headerRange, 1, 0, 0);
+    const samples = headerSample[0][0].row;
+
+    for (let i = 0; i < samples.length; i++) {
+      if (samples[i]) {
+        columns.push(samples[i].value)
+      } else {
+        const name = b26.toBase26(i + 1);
+        columns.push(name)
+      }
+    }
   }
 
   return columns

lib/importer/src/index.js

@@ -218,8 +218,8 @@ exports.Initialise = (config, router, prototypeKit) => {
 
       session.headerRange = {
         sheet: session.sheet,
-        start: { row: 0, column: 0 },
-        end: { row: 0, column: maxCol - 1 },
+        start: { row: -1, column: 0 },
+        end: { row: -1, column: maxCol - 1 },
       };
 
       // Ensure the session is persisted. Currently in session, eventually another way
@@ -244,9 +244,19 @@ exports.Initialise = (config, router, prototypeKit) => {
       session.headerRange = getSelectionFromRequest(
         request,
         session,
-        /* optional */ false,
+        /* optional */ true,
       );
 
+      // If the user did not select a header range, then we should create one
+      if (session.headerRange == null) {
+        let [minCol, maxCol] = sheets_lib.GuessHeaderRange(session.backendSid, session.sheet);
+        session.headerRange = {
+          sheet: session.sheet,
+          start: { row: -1, column: minCol },
+          end: { row: -1, column: maxCol },
+        };
+      }
+
       // Ensure the session is persisted. Currently in session, eventually another way
       request.session.data[IMPORTER_SESSION_KEY] = session;
 
@@ -579,13 +589,13 @@ const getSelectionFromRequest = (request, session, optional = false) => {
     defaultMaxCol,
   );
 
-  // If optional is set to true and we don't have any valid values, we will bail
+  // If optional is set to true and we don't have enough valid values, we will bail
   // early
   if (
     optional &&
     [tlRow, tlCol, brRow, brCol].filter((x) => x >= 0).length < 4
   ) {
-    return null;
+    return null
   }
 
   // Normalise the rows

lib/importer/src/session.js

@@ -27,6 +27,8 @@ class Session {
   }
 
   set headerRange(range) {
+    if (!range) return;
+
     const r = range;
     if (!r.sheet) {
       r.sheet = this.sheet
@@ -114,6 +116,17 @@ var validateUpload = (file) => {
   return undefined;
 };
 
+// It's possible the user has not specified any headers, and so
+// that we can construct a header range, we need to know the
+// possible widest row so that we can later map those values.
+exports.GuessHeaderRange = (session, sheet) => {
+  // If we have to guess the header range, then we will ask for the
+  // dimensions and use whatever the sheets library tells us is the
+  // end column
+  const dimensions = backend.SessionGetSheetDimensions(session.backendSid, sheet);
+  return [-1, dimensions.columns]
+}
+
 /*
   * Returns a header row for display, based on the requested mode and the data
   * currently available in the state.

lib/importer/templates/select_header_row.html

@@ -35,6 +35,7 @@ <h1 class="govuk-fieldset__heading">
             </div>
 
             <div class="govuk-button-group">
+                {{ govukButton({ text: "Skip", classes: "govuk-button--secondary"}) }}
                 {{ govukButton({ text: "Next" }) }}
             </div>
         </form>

prototypes/basic/app/views/select_header_row.html

@@ -57,6 +57,7 @@ <h1 class="govuk-heading-l">
             </div>
 
             <div class="govuk-button-group">
+                {{ govukButton({ text: "Skip", classes: "govuk-button--secondary"}) }}
                 {{ govukButton({ text: "Next" }) }}
             </div>
         </form>