Add issue specification guidance to issueTable page

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,6 +12,16 @@
      - 📗 Update any related documentation and include any relevant screenshots.
 -->
 
+## Preview Link
+
+<!--
+Replace [PR_NUMBER] with the actual PR number to generate the preview URL.
+For example, for PR #818, the preview link would be:
+https://submit-pr-818.herokuapp.com/
+-->
+
+https://submit-pr-[PR_NUMBER].herokuapp.com/
+
 ## What type of PR is this? (check all applicable)
 
 - [ ] Refactor

src/middleware/common.middleware.js

@@ -685,6 +685,16 @@ export function getErrorSummaryItems (req, res, next) {
   next()
 }
 
+export function getIssueSpecification (req, res, next) {
+  const { issue_field: issueField } = req.params
+  const { specification } = req
+
+  const fieldSpecification = specification.fields.find(f => f.field === issueField)
+  req.issueSpecification = fieldSpecification ?? undefined
+
+  next()
+}
+
 export const prepareIssueDetailsTemplateParams = (req, res, next) => {
   const { entry, pagination, dataRange, errorSummary, dataset, orgInfo } = req
   const { issue_type: issueType, issue_field: issueField, pageNumber } = req.parsedParams

src/middleware/issueTable.middleware.js

@@ -7,7 +7,7 @@
 */
 
 import config from '../../config/index.js'
-import { createPaginationTemplateParams, fetchDatasetInfo, fetchOrgInfo, fetchResources, filterOutEntitiesWithoutIssues, getErrorSummaryItems, getSetBaseSubPath, getSetDataRange, logPageError, processEntitiesMiddlewares, processRelevantIssuesMiddlewares, processSpecificationMiddlewares, show404IfPageNumberNotInRange, validateQueryParams } from './common.middleware.js'
+import { createPaginationTemplateParams, fetchDatasetInfo, fetchOrgInfo, fetchResources, filterOutEntitiesWithoutIssues, getErrorSummaryItems, getIssueSpecification, getSetBaseSubPath, getSetDataRange, logPageError, processEntitiesMiddlewares, processRelevantIssuesMiddlewares, processSpecificationMiddlewares, show404IfPageNumberNotInRange, validateQueryParams } from './common.middleware.js'
 import { onlyIf, renderTemplate } from './middleware.builders.js'
 import * as v from 'valibot'
 import { entryIssueGroups } from '../utils/utils.js'
@@ -74,7 +74,7 @@ export const prepareTableParams = (req, res, next) => {
 }
 
 export const prepareTemplateParams = (req, res, next) => {
-  const { tableParams, orgInfo, dataset, errorSummary, pagination, dataRange } = req
+  const { tableParams, orgInfo, dataset, errorSummary, pagination, dataRange, issueSpecification } = req
   const { issue_type: issueType } = req.params
 
   req.templateParams = {
@@ -84,7 +84,8 @@ export const prepareTemplateParams = (req, res, next) => {
     errorSummary,
     issueType,
     pagination,
-    dataRange
+    dataRange,
+    issueSpecification
   }
   next()
 }
@@ -122,6 +123,7 @@ export default [
   show404IfPageNumberNotInRange,
   getSetBaseSubPath(),
   getErrorSummaryItems,
+  getIssueSpecification,
   createPaginationTemplateParams,
   prepareTableParams,
   prepareTemplateParams,

src/routes/schemas.js

@@ -211,6 +211,12 @@ export const OrgIssueTable = v.strictObject({
   dataset: DatasetNameField,
   errorSummary: errorSummaryParams,
   issueType: v.string(),
+  issueSpecification: v.optional(v.strictObject({
+    datasetField: NonEmptyString,
+    field: NonEmptyString,
+    description: v.optional(NonEmptyString),
+    dataset: v.optional(NonEmptyString)
+  })),
   tableParams,
   pagination: PaginationParams,
   dataRange: dataRangeParams

src/views/organisations/issueTable.html

@@ -4,6 +4,7 @@
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
 {% from "govuk/components/pagination/macro.njk" import govukPagination %}
 {% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
+{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
 
 {% from "../components/table.html" import table %}
 
@@ -96,6 +97,36 @@
 </div>
 {% endif %}
 
+{% if issueSpecification %}
+  {% set issueSpecificationInsetHtml %}
+    <div>
+      <h3 class="govuk-heading-m">{{ issueSpecification.field }}</h3>
+
+      {% if issueSpecification.description %}
+        {{ issueSpecification.description | govukMarkdown | safe }}
+      {% endif %}
+
+      {% if issueSpecification.guidance %}
+        {{ issueSpecification.guidance | govukMarkdown | safe }}
+      {% endif %}
+    </div>
+  {% endset %}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h2 class="govuk-heading-l">
+        How to fix this issue
+      </h2>
+
+      <p class="govuk-body">Your dataset is missing the <strong>{{ issueSpecification.field }}</strong> column.</p>
+      <p class="govuk-body">The <a href="{{ dataset.dataset | getDatasetGuidanceUrl }}" target="_blank">{{ dataset.name }}</a> guidance explains how to fix the issue:</p>
+      {{ govukInsetText({
+        html: issueSpecificationInsetHtml
+      }) }}
+    </div>
+  </div>
+{% endif %}
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <h3 class="govuk-heading-m">