@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.23.2 → 3.23.4

package/dpr/assets/js/all.mjs

@@ -1086,24 +1086,31 @@ class DprAsyncRequestList extends DprPollingStatusClass {
     this.initStatusPollingStatus();
   }
 
-  initExpiredPollingStatus() {
+  async initExpiredPollingStatus() {
+    // run expired check on load first
+    await this.checkIfExpired(true);
+
     setInterval(async () => {
-      if (this.requestData) {
-        const meta = JSON.parse(this.requestData);
-        await Promise.all(
-          meta.map(async (metaData) => {
-            if (metaData.status !== 'EXPIRED') {
-              const response = await this.getExpiredStatus('/getRequestedExpiredStatus/', metaData, this.csrfToken);
-              if (response.isExpired) {
-                window.location.reload();
-              }
-            }
-          }),
-        );
-      }
+      await this.checkIfExpired();
     }, '60000'); // 1 minute
   }
 
+  async checkIfExpired() {
+    if (this.requestData) {
+      const meta = JSON.parse(this.requestData);
+      await Promise.all(
+        meta.map(async (metaData) => {
+          if (metaData.status !== 'EXPIRED') {
+            const response = await this.getExpiredStatus('/getRequestedExpiredStatus/', metaData, this.csrfToken);
+            if (response.isExpired) {
+              window.location.reload();
+            }
+          }
+        }),
+      );
+    }
+  }
+
   initStatusPollingStatus() {
     setInterval(async () => {
       if (this.requestData) {
@@ -1398,7 +1405,7 @@ class ShowMore extends DprClientClass {
     const textContainer = element.querySelector('.dpr-show-more-content');
     const button = element.querySelector('.dpr-show-hide-button');
     const textContent = element.getAttribute('data-content');
-    const shortString = textContent.substring(0, 200);
+    const shortString = textContent.replaceAll(/<[^>]+>/g, '').substring(0, 200);
 
     if (textContent.length > 200) {
       textContainer.innerHTML = `${shortString}... `;

package/dpr/components/async-filters/utils.ts

@@ -14,7 +14,6 @@ import DefinitionUtils from '../../utils/definitionUtils'
 import { getDuplicateRequestIds } from '../../utils/reportSummaryHelper'
 import { Services } from '../../types/Services'
 import { RenderFiltersReturnValue } from './types'
-
 /**
  * Initialises the filters & Sort from the definition data
  *

package/dpr/components/async-filters/view.njk

@@ -22,7 +22,7 @@
     html: reportDetailsHtml,
     classes: 'dpr-meta-data-details'
   }) }}
-
+  
   <div class="dpr-async-controls dpr-filters" data-dpr-module="async-filters">
     <form action="{{ endpoint }}" method="post" id="async-filters-form">
       <input type="hidden" name="dataProductDefinitionsPath" value="{{ definitionPath }}">

package/dpr/components/async-request-list/utils.js

@@ -29,11 +29,12 @@ const reportStatusHelper_1 = require("../../utils/reportStatusHelper");
 const ReportListHelper = __importStar(require("../../utils/reportsListHelper"));
 const formatCardData = (requestedReportsData) => {
     const reportData = JSON.parse(JSON.stringify(requestedReportsData));
-    const { executionId, reportId, variantId, name: text, description, query, status, timestamp, dataProductDefinitionsPath, } = reportData;
+    const { executionId, reportId, variantId, name: text, description, query, status, timestamp, reportName, dataProductDefinitionsPath, } = reportData;
     const summary = query.summary;
     return {
         id: executionId,
         text,
+        reportName,
         description,
         ...(0, exports.setDataFromStatus)(status, reportData),
         tag: 'MIS',

package/dpr/components/async-request-list/utils.ts

@@ -15,6 +15,7 @@ export const formatCardData = (requestedReportsData: AsyncReportData): CardData
     query,
     status,
     timestamp,
+    reportName,
     dataProductDefinitionsPath,
   } = reportData
   const summary = query.summary as { name: string; value: string }[]
@@ -22,6 +23,7 @@ export const formatCardData = (requestedReportsData: AsyncReportData): CardData
   return {
     id: executionId,
     text,
+    reportName,
     description,
     ...setDataFromStatus(status, reportData),
     tag: 'MIS',

package/dpr/components/bookmark-toggle/view.njk

@@ -4,7 +4,7 @@
   {% set tooltip %}{{ 'Remove Bookmark' if bookmarked else 'Add Bookmark' }}{% endset %}
 
   <div class='dpr-bookmark dpr-bookmark-inline dpr-bookmark-tooltip' tooltip="{{ tooltip }}" data-dpr-module="bookmark-toggle">
-    <input class="bookmark-input" aria-label="bookmark toggle" type='checkbox' id='{{ variantId }}-{{id}}' data-variant-id='{{ variantId }}' data-report-id='{{ reportId }}' data-csrf-token='{{ csrfToken }}' {{ checked }}/>
-    <label tabindex="0" for='{{ variantId }}-{{id}}' class=''><span class="dpr-visually-hidden">Bookmark toggle</span></label>
+    <input class="bookmark-input" aria-label="bookmark toggle" type='checkbox' id='{{ reportId }}-{{ variantId }}-{{id}}' data-variant-id='{{ variantId }}' data-report-id='{{ reportId }}' data-csrf-token='{{ csrfToken }}' {{ checked }}/>
+    <label id="${variantId}-${reportId}-${id}-bookmark-label" tabindex="0" for='{{ reportId }}-{{ variantId }}-{{id}}' class=''><span class="dpr-visually-hidden">Bookmark toggle</span></label>
   </div>
 {% endmacro %}

package/dpr/components/pagination/view.njk

@@ -7,6 +7,7 @@
   {% set nextHref = pagination.next %}
   {% set pages = pagination.pages %}
   {% set sizes = pagination.sizes %}
+  {% set pageSize = pagination.pageSize %}
 
   <div class="dpr-pagination">
     <div class="govuk-grid-column-three-quarters govuk-!-padding-left-0">
@@ -20,6 +21,7 @@
         items: pages
       }) }}
     </div>
+
     <div class="govuk-grid-column-one-quarter govuk-!-padding-0 data-table-page-size-container">
       <div class="data-table-page-size">
         <div class="govuk-input__wrapper">

package/dpr/components/recently-viewed-list/utils.js

@@ -28,24 +28,28 @@ const AsyncReport_1 = require("../../types/AsyncReport");
 const reportStatusHelper_1 = require("../../utils/reportStatusHelper");
 const ReportListHelper = __importStar(require("../../utils/reportsListHelper"));
 const formatCardData = (reportData) => {
-    const { executionId: id, variantName: text, description, query, url, timestamp, executionId, reportId, variantId, dataProductDefinitionsPath, } = reportData;
+    const { executionId: id, variantName: text, description, query, url, timestamp, executionId, reportId, variantId, reportName, dataProductDefinitionsPath, } = reportData;
     let { status } = reportData;
     let href;
+    let ts;
     if (status === AsyncReport_1.RequestStatus.EXPIRED) {
         href = `${url.request.fullUrl}`;
+        ts = `Expired at: ${new Date(timestamp.expired).toLocaleString()}`;
     }
     else {
         status = AsyncReport_1.RequestStatus.READY;
+        ts = `Last viewed: ${new Date(timestamp.lastViewed).toLocaleString()}`;
         href = url.report.fullUrl;
     }
     return {
         id,
         text,
+        reportName,
         description,
         tag: 'MIS',
         summary: query.summary,
         href,
-        timestamp: `Last viewed: ${new Date(timestamp.lastViewed).toLocaleString()}`,
+        timestamp: ts,
         status,
         meta: {
             reportId,

package/dpr/components/recently-viewed-list/utils.ts

@@ -16,26 +16,31 @@ export const formatCardData = (reportData: RecentlyViewedReportData): CardData =
     executionId,
     reportId,
     variantId,
+    reportName,
     dataProductDefinitionsPath,
   } = reportData
   let { status } = reportData
 
   let href
+  let ts
   if (status === RequestStatus.EXPIRED) {
     href = `${url.request.fullUrl}`
+    ts = `Expired at: ${new Date(timestamp.expired).toLocaleString()}`
   } else {
     status = RequestStatus.READY
+    ts = `Last viewed: ${new Date(timestamp.lastViewed).toLocaleString()}`
     href = url.report.fullUrl
   }
 
   return {
     id,
     text,
+    reportName,
     description,
     tag: 'MIS',
     summary: query.summary as { name: string; value: string }[],
     href,
-    timestamp: `Last viewed: ${new Date(timestamp.lastViewed).toLocaleString()}`,
+    timestamp: ts,
     status,
     meta: {
       reportId,

package/dpr/components/reports-list/utils.ts

@@ -53,7 +53,6 @@ export default {
     const rows = sortedVariants.map((v: variantData) => {
       const { variantId, variantName, variantDescription, reportName, reportId, reportDescription } = v
       const description = variantDescription || reportDescription
-
       return [
         { text: reportName },
         { html: `<a href="/async-reports/${reportId}/${variantId}/request${pathSuffix}">${variantName}</a>` },

package/dpr/components/show-more/view.njk

@@ -1,5 +1,5 @@
 {% macro dprShowMore(text) %}
-  <div class="dpr-show-more" data-content='{{ text }}' data-dpr-module="show-more">
+  <div class="dpr-show-more" data-content="{{ text }}" data-dpr-module="show-more">
     <p><span class='dpr-show-more-content'>{{ text }}</span><a class="dpr-show-hide-button" href="#">Show more</a></p>
   </div>
 {% endmacro %}

package/dpr/components/table-card-group/types.d.ts

@@ -34,6 +34,7 @@ export interface CardData {
   id: string
   href: string
   text: string
+  reportName: string
   description: string
   timestamp?: string
   tag?: string

package/dpr/services/bookmarkService.js

@@ -53,7 +53,7 @@ class BookmarkService extends userStoreService_1.default {
         const tooltip = !checked ? 'Add Bookmark' : 'Remove Bookmark';
         return `<div class='dpr-bookmark dpr-bookmark-tooltip dpr-bookmark-table' tooltip="${tooltip}" data-dpr-module="bookmark-toggle">
   <input class="bookmark-input" aria-label="bookmark toggle" type='checkbox' id='${reportId}-${variantId}-${id}' data-report-id='${reportId}' data-variant-id='${variantId}' data-csrf-token='${csrfToken}' ${checked} />
-  <label id="${variantId}-${reportId}-bookmark-label" for='${reportId}-${variantId}-${id}'><span class="dpr-visually-hidden">Bookmark toggle</span></label>
+  <label id="${variantId}-${reportId}-${id}-bookmark-label" for='${reportId}-${variantId}-${id}'><span class="dpr-visually-hidden">Bookmark toggle</span></label>
 </div>`;
     }
 }

package/dpr/services/bookmarkService.ts

@@ -61,7 +61,7 @@ export default class BookmarkService extends UserStoreService {
     const tooltip = !checked ? 'Add Bookmark' : 'Remove Bookmark'
     return `<div class='dpr-bookmark dpr-bookmark-tooltip dpr-bookmark-table' tooltip="${tooltip}" data-dpr-module="bookmark-toggle">
   <input class="bookmark-input" aria-label="bookmark toggle" type='checkbox' id='${reportId}-${variantId}-${id}' data-report-id='${reportId}' data-variant-id='${variantId}' data-csrf-token='${csrfToken}' ${checked} />
-  <label id="${variantId}-${reportId}-bookmark-label" for='${reportId}-${variantId}-${id}'><span class="dpr-visually-hidden">Bookmark toggle</span></label>
+  <label id="${variantId}-${reportId}-${id}-bookmark-label" for='${reportId}-${variantId}-${id}'><span class="dpr-visually-hidden">Bookmark toggle</span></label>
 </div>`
   }
 }

package/dpr/services/recentlyViewedService.js

@@ -30,6 +30,7 @@ class RecentlyViewedStoreService extends userStoreService_1.default {
         return this.recentlyViewedReports;
     }
     async getAllReportsByVariantId(variantId) {
+        await this.getRecentlyViewedState();
         return this.recentlyViewedReports.filter((report) => {
             return report.variantId === variantId;
         });

package/dpr/services/recentlyViewedService.ts

@@ -37,6 +37,7 @@ export default class RecentlyViewedStoreService extends UserStoreService {
   }
 
   async getAllReportsByVariantId(variantId: string) {
+    await this.getRecentlyViewedState()
     return this.recentlyViewedReports.filter((report) => {
       return report.variantId === variantId
     })

package/dpr/services/requestedReportsService.js

@@ -85,6 +85,7 @@ class AsyncReportStoreService extends userStoreService_1.default {
         return this.requestedReports;
     }
     async getAllReportsByVariantId(variantId) {
+        await this.getRequestedReportsState();
         return this.requestedReports.filter((report) => {
             return report.variantId === variantId;
         });

package/dpr/services/requestedReportsService.ts

@@ -117,6 +117,7 @@ export default class AsyncReportStoreService extends UserStoreService {
   }
 
   async getAllReportsByVariantId(variantId: string) {
+    await this.getRequestedReportsState()
     return this.requestedReports.filter((report) => {
       return report.variantId === variantId
     })

package/dpr/utils/bookmarkListUtils.js

@@ -12,9 +12,10 @@ const formatCards = async (bookmarksData, maxRows) => {
 exports.formatCards = formatCards;
 const formatCardData = (bookmarkData) => {
     const reportData = JSON.parse(JSON.stringify(bookmarkData));
-    const { variantId, name, description, href } = reportData;
+    const { variantId, name, description, href, reportName } = reportData;
     return {
         id: variantId,
+        reportName,
         text: name,
         description,
         href,

package/dpr/utils/bookmarkListUtils.ts

@@ -16,10 +16,11 @@ export const formatCards = async (bookmarksData: BookmarkedReportData[], maxRows
 
 export const formatCardData = (bookmarkData: BookmarkedReportData): CardData => {
   const reportData: BookmarkedReportData = JSON.parse(JSON.stringify(bookmarkData))
-  const { variantId, name, description, href } = reportData
+  const { variantId, name, description, href, reportName } = reportData
 
   return {
     id: variantId,
+    reportName,
     text: name,
     description,
     href,

package/dpr/utils/reportStatusHelper.js

@@ -61,7 +61,10 @@ const getExpiredStatus = async ({ req, res, services }) => {
     catch (error) {
         const { data } = error;
         errorMessage = (data !== null && data !== void 0 ? data : {}).userMessage;
-        status = currentStatus === AsyncReport_1.RequestStatus.READY ? AsyncReport_1.RequestStatus.EXPIRED : AsyncReport_1.RequestStatus.FAILED;
+        status =
+            currentStatus === AsyncReport_1.RequestStatus.READY || currentStatus === AsyncReport_1.RequestStatus.FINISHED
+                ? AsyncReport_1.RequestStatus.EXPIRED
+                : AsyncReport_1.RequestStatus.FAILED;
     }
     const result = {
         status,

package/dpr/utils/reportStatusHelper.ts

@@ -80,7 +80,10 @@ export const getExpiredStatus = async ({ req, res, services }: AsyncReportUtilsP
   } catch (error) {
     const { data } = error
     errorMessage = (data ?? {}).userMessage
-    status = currentStatus === RequestStatus.READY ? RequestStatus.EXPIRED : RequestStatus.FAILED
+    status =
+      currentStatus === RequestStatus.READY || currentStatus === RequestStatus.FINISHED
+        ? RequestStatus.EXPIRED
+        : RequestStatus.FAILED
   }
 
   const result: GetStatusUtilsResponse = {

package/dpr/utils/reportsListHelper.js

@@ -24,8 +24,9 @@ const getMeta = (cardData) => {
 };
 exports.getMeta = getMeta;
 const createShowMoreHtml = (text) => {
-    return `<div class="dpr-show-more" data-content='${text}' data-dpr-module="show-more">
-    <p><span class='dpr-show-more-content'>${text}</span><a class="dpr-show-hide-button" href="#">Show more</a></p>
+    const sanitizedString = text.replace(/"/g, "'");
+    return `<div class="dpr-show-more" data-content="${sanitizedString}" data-dpr-module="show-more">
+    <p><span class='dpr-show-more-content'>${sanitizedString}</span><a class="dpr-show-hide-button" href="#">Show more</a></p>
   </div>`;
 };
 exports.createShowMoreHtml = createShowMoreHtml;
@@ -36,6 +37,7 @@ const formatTable = (cardData, type) => {
     return {
         rows,
         head: [
+            { text: 'Product' },
             { text: 'Name' },
             { text: 'Description' },
             { text: 'Applied Filters', classes: `dpr-req-filters-summary` },
@@ -77,6 +79,7 @@ const formatTableData = (card, type) => {
             break;
     }
     return [
+        { text: card.reportName },
         { html: `<a href='${card.href}'>${card.text}</a>` },
         { html: (0, reportSummaryHelper_1.createDetailsHtml)('Description', card.description) },
         { html: (0, reportSummaryHelper_1.createDetailsHtml)('Applied Filters', (0, reportSummaryHelper_1.createSummaryHtml)(card)) },
@@ -87,9 +90,9 @@ const formatTableData = (card, type) => {
     ];
 };
 exports.formatTableData = formatTableData;
-const formatCards = async (reports, filterFunction, formatFuntion) => {
+const formatCards = async (reports, filterFunction, formatFunction) => {
     return reports.filter(filterFunction).map((report) => {
-        return formatFuntion(report);
+        return formatFunction(report);
     });
 };
 exports.formatCards = formatCards;

package/dpr/utils/reportsListHelper.ts

@@ -25,8 +25,10 @@ export const getMeta = (cardData: CardData[]) => {
 }
 
 export const createShowMoreHtml = (text: string) => {
-  return `<div class="dpr-show-more" data-content='${text}' data-dpr-module="show-more">
-    <p><span class='dpr-show-more-content'>${text}</span><a class="dpr-show-hide-button" href="#">Show more</a></p>
+  const sanitizedString = text.replace(/"/g, "'")
+
+  return `<div class="dpr-show-more" data-content="${sanitizedString}" data-dpr-module="show-more">
+    <p><span class='dpr-show-more-content'>${sanitizedString}</span><a class="dpr-show-hide-button" href="#">Show more</a></p>
   </div>`
 }
 
@@ -38,6 +40,7 @@ export const formatTable = (cardData: CardData[], type: 'requested' | 'viewed')
   return {
     rows,
     head: [
+      { text: 'Product' },
       { text: 'Name' },
       { text: 'Description' },
       { text: 'Applied Filters', classes: `dpr-req-filters-summary` },
@@ -81,6 +84,7 @@ export const formatTableData = (card: CardData, type: 'requested' | 'viewed') =>
   }
 
   return [
+    { text: card.reportName },
     { html: `<a href='${card.href}'>${card.text}</a>` },
     { html: createDetailsHtml('Description', card.description) },
     { html: createDetailsHtml('Applied Filters', createSummaryHtml(card)) },
@@ -94,9 +98,9 @@ export const formatTableData = (card: CardData, type: 'requested' | 'viewed') =>
 export const formatCards = async (
   reports: AsyncReportData[] | RecentlyViewedReportData[],
   filterFunction: (report: AsyncReportData | RecentlyViewedReportData) => boolean,
-  formatFuntion: (reportData: RecentlyViewedReportData | AsyncReportData) => CardData,
+  formatFunction: (reportData: RecentlyViewedReportData | AsyncReportData) => CardData,
 ): Promise<CardData[]> => {
   return reports.filter(filterFunction).map((report: AsyncReportData | RecentlyViewedReportData) => {
-    return formatFuntion(report)
+    return formatFunction(report)
   })
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/hmpps-digital-prison-reporting-frontend",
   "description": "The Digital Prison Reporting Frontend contains templates and code to help display data effectively in UI applications.",
-  "version": "3.23.2",
+  "version": "3.23.4",
   "main": "dpr/assets/js/all.mjs",
   "sass": "dpr/all.scss",
   "engines": {