@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.18.2 → 3.19.0

package/dpr/assets/js/all.mjs

@@ -488,12 +488,13 @@ class ToggleButton extends DprClientClass {
     const urlParams = new URLSearchParams(window.location.search);
 
     urlParams.keys().forEach((key) => {
-      const toggle = document.getElementById(key);
-      if (toggle) {
+      const element = document.getElementById(key);
+      if (element && element.classList.contains('dpr-toggle-button')) {
+        console.log('is toggle', key);
         const value = urlParams.get(key);
-        const icons = Array.from(toggle.getElementsByClassName('dpr-icon-wrapper'));
+        const icons = Array.from(element.getElementsByClassName('dpr-icon-wrapper'));
 
-        const toggleContainer = toggle.parentNode.parentNode;
+        const toggleContainer = element.parentNode.parentNode;
         const contentContainers = Array.from(toggleContainer.getElementsByClassName('dpr-toggle-content'));
 
         icons.forEach((icon) => {
@@ -719,31 +720,82 @@ class DataTable extends DprClientClass {
   }
 }
 
+class DprPollingStatusClass extends DprClientClass {
+  getPollingFrquency () {
+    return '2000' // 2 seconds
+  }
+
+  getPollingStatuses () {
+    return ['SUBMITTED', 'STARTED', 'PICKED']
+  }
+
+  getEndStatuses () {
+    return ['FINISHED', 'FAILED', 'EXPIRED']
+  }
+
+  async getRequestStatus (metaData, csrfToken) {
+    return this.getStatus('/getStatus/', metaData, csrfToken)
+  }
+
+  async getExpiredStatus (metaData, csrfToken) {
+    return this.getStatus('/getExpiredStatus/', metaData, csrfToken)
+  }
+
+  async getStatus (endpoint, body, csrfToken) {
+    let response;
+    await fetch(endpoint, {
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'CSRF-Token': csrfToken,
+      },
+      body: JSON.stringify({
+        ...body,
+      }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        response = res;
+      })
+      .catch((error) => console.error('Error:', error));
+
+    return response
+  }
+}
+
 /* eslint-disable class-methods-use-this */
 
-class dprAsyncPolling extends DprClientClass {
+class DprAsyncPolling extends DprPollingStatusClass {
   static getModuleName () {
     return 'async-polling-content'
   }
 
-  async initialise () {
-    this.POLLING_STATUSES = ['SUBMITTED', 'STARTED', 'PICKED'];
-    this.POLLING_FREQUENCY = '2000'; // 2 seconds
+  initialise () {
+    this.POLLING_STATUSES = this.getPollingStatuses();
+    this.POLLING_FREQUENCY = this.getPollingFrquency();
 
     this.statusSection = document.getElementById('async-request-polling-status');
     this.retryRequestButton = document.getElementById('retry-async-request');
     this.cancelRequestButton = document.getElementById('cancel-async-request');
     this.viewReportButton = document.getElementById('view-async-report-button');
 
+    this.requestData = this.statusSection.getAttribute('data-request-data');
+
     this.initCancelRequestButton();
     this.initPollingStatus();
   }
 
   initPollingStatus () {
     const status = this.statusSection.getAttribute('data-current-status');
+
     if (this.POLLING_STATUSES.includes(status)) {
-      setTimeout(() => {
-        window.location.reload();
+      setInterval(async () => {
+        if (this.requestData) {
+          const meta = JSON.parse(this.requestData);
+          await this.getRequestStatus(meta, this.csrfToken);
+          window.location.reload();
+        }
       }, this.POLLING_FREQUENCY);
     }
   }
@@ -819,11 +871,29 @@ class Search extends DprClientClass {
     if (searchBox) {
       searchBox.addEventListener('keyup', (e) => {
         this.updateSearchListing(e.target.value);
+
+        // Update Query Params
+        const queryParams = new URLSearchParams(window.location.search);
+        queryParams.set(searchBox.id, e.target.value);
+        window.history.replaceState(null, null, `?${queryParams.toString()}`);
       });
 
-      this.updateSearchListing('');
+      this.initInputFromQueryParams();
     }
   }
+
+  // eslint-disable-next-line
+  initInputFromQueryParams () {
+    const urlParams = new URLSearchParams(window.location.search);
+
+    urlParams.forEach((value, key) => {
+      const element = document.getElementById(key);
+      if (element && element.classList.contains('dpr-search-box')) {
+        element.value = value;
+        this.updateSearchListing(element.value);
+      }
+    });
+  }
 }
 
 class BookmarkToggle extends DprClientClass {
@@ -959,6 +1029,81 @@ class DateInput extends DprClientClass {
   }
 }
 
+/* eslint-disable class-methods-use-this */
+
+class DprAsyncRequestList extends DprPollingStatusClass {
+  static getModuleName () {
+    return 'async-request-list'
+  }
+
+  initialise () {
+    this.END_STATUSES = this.getEndStatuses();
+    this.POLLING_FREQUENCY = this.getPollingFrquency();
+
+    this.requestList = document.getElementById('dpr-async-request-component');
+    this.requestData = this.requestList.getAttribute('data-request-data');
+    this.csrfToken = this.requestList.getAttribute('data-csrf-token');
+    this.initPollingStatus();
+  }
+
+  initPollingStatus () {
+    setInterval(async () => {
+      if (this.requestData) {
+        const meta = JSON.parse(this.requestData);
+        await Promise.all(
+          meta.map(async (metaData) => {
+            // Don't poll if current state is an end state
+            if (!this.END_STATUSES.includes(metaData.status)) {
+              const response = await this.getRequestStatus(metaData, this.csrfToken);
+
+              // Reload if new status is an end state
+              if (this.END_STATUSES.includes(response.status)) {
+                window.location.reload();
+              }
+            }
+          }),
+        );
+      }
+    }, this.POLLING_FREQUENCY);
+  }
+}
+
+/* eslint-disable class-methods-use-this */
+
+class DprRecentlyViewedList extends DprPollingStatusClass {
+  static getModuleName () {
+    return 'recently-viewed-list'
+  }
+
+  initialise () {
+    this.POLLING_STATUSES = [];
+    this.POLLING_FREQUENCY = '300000'; // 5 mins
+
+    this.viewedList = document.getElementById('dpr-recently-viewed-component');
+    this.viewedReportData = this.viewedList.getAttribute('data-request-data');
+    this.csrfToken = this.viewedList.getAttribute('data-csrf-token');
+    this.initPollingStatus();
+  }
+
+  initPollingStatus () {
+    setInterval(async () => {
+      if (this.viewedReportData) {
+        const meta = JSON.parse(this.viewedReportData);
+        await Promise.all(
+          meta.map(async (metaData) => {
+            if (metaData.status !== 'EXPIRED') {
+              const response = await this.getExpiredStatus(metaData, this.csrfToken);
+              if (response.isExpired) {
+                window.location.reload();
+              }
+            }
+          }),
+        );
+      }
+    }, this.POLLING_FREQUENCY);
+  }
+}
+
 /* eslint-disable no-new */
 
 /**
@@ -981,10 +1126,12 @@ function initAll () {
     Pagination,
     IconButtonList,
     DataTable,
-    dprAsyncPolling,
+    DprAsyncPolling,
     Search,
     BookmarkToggle,
     DateInput,
+    DprAsyncRequestList,
+    DprRecentlyViewedList,
   ];
 
   components.forEach((Component) => {

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

@@ -260,7 +260,6 @@ export default {
     if (executionId && tableId) {
       redirect = await updateStore(req, services, fields, querySummaryData, executionId, tableId)
     }
-
     return redirect
   },
 

package/dpr/components/async-polling/utils.js

@@ -1,10 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const AsyncReport_1 = require("../../types/AsyncReport");
-const reportStatusUtils_1 = __importDefault(require("../../utils/reportStatusUtils"));
 exports.default = {
     cancelRequest: async ({ req, res, services }) => {
         var _a;
@@ -16,49 +12,26 @@ exports.default = {
         }
     },
     renderPolling: async ({ req, res, services }) => {
-        var _a, _b;
+        var _a;
         const csrfToken = res.locals.csrfToken || 'csrfToken';
-        const token = ((_a = res.locals.user) === null || _a === void 0 ? void 0 : _a.token) ? res.locals.user.token : 'token';
         const { reportId, variantId, executionId } = req.params;
-        let reportData = await services.asyncReportsStore.getReportByExecutionId(executionId);
-        let statusResponse;
-        if (reportStatusUtils_1.default.timeoutRequest(reportData.timestamp.requested) && reportData.status !== AsyncReport_1.RequestStatus.READY) {
-            statusResponse = {
-                status: AsyncReport_1.RequestStatus.FAILED,
-                errorMessage: 'Request taking too long. Request Halted',
-            };
-        }
-        else if (reportData.status === AsyncReport_1.RequestStatus.FAILED) {
-            statusResponse = {
-                status: AsyncReport_1.RequestStatus.FAILED,
-                errorMessage: reportData.errorMessage,
-            };
-        }
-        else if (reportData.status === AsyncReport_1.RequestStatus.ABORTED) {
-            statusResponse = {
-                status: AsyncReport_1.RequestStatus.ABORTED,
-            };
-        }
-        else {
-            statusResponse = await reportStatusUtils_1.default.getStatus(token, reportId, variantId, executionId, reportData.status, services, reportData.dataProductDefinitionsPath);
-        }
-        const { status, errorMessage } = statusResponse;
-        if (statusResponse.reportData)
-            reportData = statusResponse.reportData;
+        const reportData = await services.asyncReportsStore.getReportByExecutionId(executionId);
+        const { reportName, name, description, status, tableId, query, timestamp, url, errorMessage } = reportData;
         return {
             pollingRenderData: {
-                reportName: reportData.reportName,
-                variantName: reportData.name,
-                description: reportData.description,
+                reportName,
+                variantName: name,
+                description,
                 executionId,
                 reportId,
                 variantId,
                 status,
-                tableId: reportData.tableId,
-                querySummary: reportData.query.summary,
+                tableId,
+                querySummary: query.summary,
+                requestedAt: timestamp.requested,
                 csrfToken,
-                ...(((_b = reportData.url.report) === null || _b === void 0 ? void 0 : _b.fullUrl) && { reportUrl: reportData.url.report.fullUrl }),
-                ...(reportData.url.request.fullUrl && { requestUrl: reportData.url.request.fullUrl }),
+                ...(((_a = url.report) === null || _a === void 0 ? void 0 : _a.fullUrl) && { reportUrl: url.report.fullUrl }),
+                ...(url.request.fullUrl && { requestUrl: url.request.fullUrl }),
                 ...(errorMessage && { errorMessage }),
             },
         };

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

@@ -1,11 +1,11 @@
 import { RequestStatus } from '../../types/AsyncReport'
 import { AsyncReportUtilsParams } from '../../types/AsyncReportUtils'
-import ReportStatusUtils from '../../utils/reportStatusUtils'
 
 export default {
   cancelRequest: async ({ req, res, services }: AsyncReportUtilsParams) => {
     const token = res.locals.user?.token ? res.locals.user.token : 'token'
     const { reportId, variantId, executionId } = req.body
+
     const response = await services.reportingService.cancelAsyncRequest(token, reportId, variantId, executionId)
     if (response && response.cancellationSucceeded) {
       await services.asyncReportsStore.updateStatus(executionId, RequestStatus.ABORTED)
@@ -14,52 +14,26 @@ export default {
 
   renderPolling: async ({ req, res, services }: AsyncReportUtilsParams) => {
     const csrfToken = (res.locals.csrfToken as unknown as string) || 'csrfToken'
-    const token = res.locals.user?.token ? res.locals.user.token : 'token'
     const { reportId, variantId, executionId } = req.params
-    let reportData = await services.asyncReportsStore.getReportByExecutionId(executionId)
-    let statusResponse
-    if (ReportStatusUtils.timeoutRequest(reportData.timestamp.requested) && reportData.status !== RequestStatus.READY) {
-      statusResponse = {
-        status: RequestStatus.FAILED,
-        errorMessage: 'Request taking too long. Request Halted',
-      }
-    } else if (reportData.status === RequestStatus.FAILED) {
-      statusResponse = {
-        status: RequestStatus.FAILED,
-        errorMessage: reportData.errorMessage,
-      }
-    } else if (reportData.status === RequestStatus.ABORTED) {
-      statusResponse = {
-        status: RequestStatus.ABORTED,
-      }
-    } else {
-      statusResponse = await ReportStatusUtils.getStatus(
-        token,
-        reportId,
-        variantId,
-        executionId,
-        reportData.status,
-        services,
-        reportData.dataProductDefinitionsPath,
-      )
-    }
-    const { status, errorMessage } = statusResponse
-    if (statusResponse.reportData) reportData = statusResponse.reportData
+
+    const reportData = await services.asyncReportsStore.getReportByExecutionId(executionId)
+    const { reportName, name, description, status, tableId, query, timestamp, url, errorMessage } = reportData
 
     return {
       pollingRenderData: {
-        reportName: reportData.reportName,
-        variantName: reportData.name,
-        description: reportData.description,
+        reportName,
+        variantName: name,
+        description,
         executionId,
         reportId,
         variantId,
         status,
-        tableId: reportData.tableId,
-        querySummary: reportData.query.summary,
+        tableId,
+        querySummary: query.summary,
+        requestedAt: timestamp.requested,
         csrfToken,
-        ...(reportData.url.report?.fullUrl && { reportUrl: reportData.url.report.fullUrl }),
-        ...(reportData.url.request.fullUrl && { requestUrl: reportData.url.request.fullUrl }),
+        ...(url.report?.fullUrl && { reportUrl: url.report.fullUrl }),
+        ...(url.request.fullUrl && { requestUrl: url.request.fullUrl }),
         ...(errorMessage && { errorMessage }),
       },
     }

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

@@ -18,10 +18,21 @@
   {% set errorMessage = data.errorMessage %}
   {% set executionId = data.executionId %}
   {% set csrfToken = data.csrfToken %}
+  {% set requestedAt = data.requestedAt %}
   {% set descriptionClasses = 'govuk-!-margin-top-4 govuk-!-margin-bottom-6'%}
 
+  {% set meta = { 
+    reportId: reportId, 
+    variantId: variantId, 
+    executionId: executionId, 
+    status: status,
+    requestedAt: requestedAt
+  }%}
+
   <div id="async-request-polling-status" 
-    data-current-status={{ status }}
+    data-current-status='{{ status }}'
+    data-request-data='{{ meta | dump | safe }}'
+    data-csrf-token="{{ csrfToken }}"
     data-dpr-module="async-polling-content">
 
     {% set filtersHtml %}

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

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterReports = exports.setDataFromStatus = exports.formatCardData = void 0;
+const AsyncReport_1 = require("../../types/AsyncReport");
+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 summary = query.summary;
+    return {
+        id: executionId,
+        text,
+        description,
+        ...(0, exports.setDataFromStatus)(status, reportData),
+        tag: 'MIS',
+        summary,
+        status,
+        meta: {
+            reportId,
+            variantId,
+            executionId,
+            status,
+            requestedAt: timestamp.requested,
+            dataProductDefinitionsPath,
+        },
+    };
+};
+exports.formatCardData = formatCardData;
+const setDataFromStatus = (status, requestedReportsData) => {
+    let timestamp;
+    let href;
+    const { url, timestamp: time } = requestedReportsData;
+    const retryParam = `&retryId=${requestedReportsData.executionId}`;
+    switch (status) {
+        case AsyncReport_1.RequestStatus.FAILED: {
+            const failedTime = time.failed ? new Date(time.failed).toLocaleString() : new Date().toLocaleString();
+            href = `${url.polling.fullUrl}`;
+            timestamp = `Failed at: ${failedTime}`;
+            break;
+        }
+        case AsyncReport_1.RequestStatus.ABORTED: {
+            href = `${url.request.fullUrl}${retryParam}`;
+            timestamp = `Aborted at: ${new Date(time.aborted).toLocaleString()}`;
+            break;
+        }
+        case AsyncReport_1.RequestStatus.FINISHED:
+            href = url.report.fullUrl;
+            timestamp = `Ready at: ${new Date(time.completed).toLocaleString()}`;
+            break;
+        case AsyncReport_1.RequestStatus.EXPIRED: {
+            href = `${url.request.fullUrl}${retryParam}`;
+            timestamp = `Expired at: ${new Date(time.expired).toLocaleString()}`;
+            break;
+        }
+        case AsyncReport_1.RequestStatus.SUBMITTED:
+        case AsyncReport_1.RequestStatus.STARTED:
+        case AsyncReport_1.RequestStatus.PICKED:
+            href = url.polling.fullUrl;
+            timestamp = `Requested at: ${new Date(time.requested).toLocaleString()}`;
+            break;
+        default:
+            timestamp = `Last viewed: ${new Date(time.lastViewed).toLocaleString()}`;
+            break;
+    }
+    return {
+        timestamp,
+        href,
+    };
+};
+exports.setDataFromStatus = setDataFromStatus;
+const filterReports = (report) => {
+    return !report.timestamp.lastViewed && !report.timestamp.retried;
+};
+exports.filterReports = filterReports;
+exports.default = {
+    getRequestStatus: async ({ req, res, services }) => {
+        const { executionId, status: currentStatus } = req.body;
+        const response = await (0, reportStatusHelper_1.getStatus)({ req, res, services });
+        if (currentStatus !== response.status) {
+            await services.asyncReportsStore.updateStatus(executionId, response.status, response.errorMessage);
+            response.reportData = await services.asyncReportsStore.getReportByExecutionId(executionId);
+        }
+        return response;
+    },
+    renderList: async ({ services, res, maxRows, }) => {
+        const csrfToken = res.locals.csrfToken || 'csrfToken';
+        const requestedReportsData = await services.asyncReportsStore.getAllReports();
+        let cardData = await ReportListHelper.formatCards(requestedReportsData, exports.filterReports, exports.formatCardData);
+        if (maxRows)
+            cardData = cardData.slice(0, maxRows);
+        const head = {
+            title: 'Requested Reports',
+            icon: 'hourglass',
+            id: 'requested-reports',
+            ...(cardData.length && { href: './async-reports/requested' }),
+            ...(!cardData.length && { emptyMessage: 'You have 0 requested reports' }),
+        };
+        return {
+            head,
+            cardData,
+            tableData: ReportListHelper.formatTable(cardData),
+            total: ReportListHelper.getTotals(cardData, maxRows),
+            meta: ReportListHelper.getMeta(cardData),
+            csrfToken,
+        };
+    },
+};

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

@@ -0,0 +1,133 @@
+import { CardData, RenderTableListResponse } from '../table-card-group/types'
+import { AsyncReportUtilsParams } from '../../types/AsyncReportUtils'
+import { AsyncReportData, RequestStatus } from '../../types/AsyncReport'
+import { getStatus } from '../../utils/reportStatusHelper'
+import * as ReportListHelper from '../../utils/reportsListHelper'
+
+export const formatCardData = (requestedReportsData: AsyncReportData): CardData => {
+  const reportData: AsyncReportData = JSON.parse(JSON.stringify(requestedReportsData))
+  const {
+    executionId,
+    reportId,
+    variantId,
+    name: text,
+    description,
+    query,
+    status,
+    timestamp,
+    dataProductDefinitionsPath,
+  } = reportData
+  const summary = query.summary as { name: string; value: string }[]
+
+  return {
+    id: executionId,
+    text,
+    description,
+    ...setDataFromStatus(status, reportData),
+    tag: 'MIS',
+    summary,
+    status,
+    meta: {
+      reportId,
+      variantId,
+      executionId,
+      status,
+      requestedAt: timestamp.requested,
+      dataProductDefinitionsPath,
+    },
+  }
+}
+
+export const setDataFromStatus = (status: RequestStatus, requestedReportsData: AsyncReportData) => {
+  let timestamp
+  let href
+  const { url, timestamp: time } = requestedReportsData
+  const retryParam = `&retryId=${requestedReportsData.executionId}`
+  switch (status) {
+    case RequestStatus.FAILED: {
+      const failedTime = time.failed ? new Date(time.failed).toLocaleString() : new Date().toLocaleString()
+      href = `${url.polling.fullUrl}`
+      timestamp = `Failed at: ${failedTime}`
+      break
+    }
+    case RequestStatus.ABORTED: {
+      href = `${url.request.fullUrl}${retryParam}`
+      timestamp = `Aborted at: ${new Date(time.aborted).toLocaleString()}`
+      break
+    }
+    case RequestStatus.FINISHED:
+      href = url.report.fullUrl
+      timestamp = `Ready at: ${new Date(time.completed).toLocaleString()}`
+      break
+    case RequestStatus.EXPIRED: {
+      href = `${url.request.fullUrl}${retryParam}`
+      timestamp = `Expired at: ${new Date(time.expired).toLocaleString()}`
+      break
+    }
+    case RequestStatus.SUBMITTED:
+    case RequestStatus.STARTED:
+    case RequestStatus.PICKED:
+      href = url.polling.fullUrl
+      timestamp = `Requested at: ${new Date(time.requested).toLocaleString()}`
+      break
+    default:
+      timestamp = `Last viewed: ${new Date(time.lastViewed).toLocaleString()}`
+      break
+  }
+
+  return {
+    timestamp,
+    href,
+  }
+}
+
+export const filterReports = (report: AsyncReportData) => {
+  return !report.timestamp.lastViewed && !report.timestamp.retried
+}
+
+export default {
+  getRequestStatus: async ({ req, res, services }: AsyncReportUtilsParams) => {
+    const { executionId, status: currentStatus } = req.body
+    const response = await getStatus({ req, res, services })
+
+    if (currentStatus !== response.status) {
+      await services.asyncReportsStore.updateStatus(
+        executionId,
+        response.status as RequestStatus,
+        response.errorMessage,
+      )
+      response.reportData = await services.asyncReportsStore.getReportByExecutionId(executionId)
+    }
+
+    return response
+  },
+
+  renderList: async ({
+    services,
+    res,
+    maxRows,
+  }: { maxRows?: number } & AsyncReportUtilsParams): Promise<RenderTableListResponse> => {
+    const csrfToken = (res.locals.csrfToken as unknown as string) || 'csrfToken'
+    const requestedReportsData: AsyncReportData[] = await services.asyncReportsStore.getAllReports()
+
+    let cardData = await ReportListHelper.formatCards(requestedReportsData, filterReports, formatCardData)
+    if (maxRows) cardData = cardData.slice(0, maxRows)
+
+    const head = {
+      title: 'Requested Reports',
+      icon: 'hourglass',
+      id: 'requested-reports',
+      ...(cardData.length && { href: './async-reports/requested' }),
+      ...(!cardData.length && { emptyMessage: 'You have 0 requested reports' }),
+    }
+
+    return {
+      head,
+      cardData,
+      tableData: ReportListHelper.formatTable(cardData),
+      total: ReportListHelper.getTotals(cardData, maxRows),
+      meta: ReportListHelper.getMeta(cardData),
+      csrfToken,
+    }
+  },
+}

package/dpr/components/async-request-list/view.njk

@@ -0,0 +1,12 @@
+{% from "components/table-card-group/view.njk" import dprTableCardGroup %}
+
+{% macro dprAsyncRequestList(head, cardData, tableData, total, meta, csrfToken) %}
+  <div id="dpr-async-request-component" data-dpr-module="async-request-list" data-request-data='{{ meta | dump | safe }}' data-csrf-token="{{ csrfToken }}">
+    {{ dprTableCardGroup(
+      head,
+      cardData, 
+      tableData,
+      total
+    )}}
+  </div>
+{% endmacro %}