Feature/mojui

.snyk

@@ -1,4 +1,12 @@
-# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
-version: v1.19.0
-ignore: {}
+# Snyk (<https://snyk.io>) policy file, patches or ignores known vulnerabilities
+
+version: v1.22.0
+
+# ignores vulnerabilities until expiry date; change duration by modifying expiry date
+
+ignore:
+  SNYK-JS-NODEFETCH-2964180:
+    - applicationinsights > @azure/core-http > node-fetch:
+        reason: no upgrad available
+        expires: '2023-08-30T22:28:33.664Z'
 patch: {}

app/config/index.js

@@ -43,7 +43,8 @@ const schema = Joi.object({
   siteTitle: Joi.string().default('Back office'),
   serviceUri: Joi.string().uri(),
   useRedis: Joi.boolean().default(false),
-  applicationApiUri: Joi.string().uri()
+  applicationApiUri: Joi.string().uri(),
+  displayPageSize: Joi.number().default(20)
 })
 
 const config = {
@@ -84,7 +85,8 @@ const config = {
   port: process.env.PORT,
   serviceUri: process.env.SERVICE_URI,
   useRedis: process.env.NODE_ENV !== 'test',
-  applicationApiUri: process.env.APPLICATION_API_URI
+  applicationApiUri: process.env.APPLICATION_API_URI,
+  displayPageSize: process.env.DISPLAY_PAGE_SIZE
 }
 
 const { error, value } = schema.validate(config, { abortEarly: false })

app/frontend/src/css/application.scss

@@ -3,6 +3,13 @@ $govuk-assets-path: "~govuk-frontend/govuk/assets/";
 @import "./app-task-list";
 @import "./guidance-layout";
 
+.govuk-width-container, .moj-header__container, .moj-primary-navigation__container {
+  max-width: 90% !important;
+}
+
+$moj-assets-path: "~@ministryofjustice/frontend/moj/assets/";
+
+@import "@ministryofjustice/frontend/moj/all";
 .nojs-hidden {
   display: none;
 }

app/frontend/src/entry.js

@@ -1,4 +1,8 @@
 import { initAll } from 'govuk-frontend'
 import './css/application.scss'
 import './js/cookies'
+import $ from 'jquery'
+import moj from '@ministryofjustice/frontend'
 initAll()
+window.$ = $
+moj.initAll()

app/pagination.js

@@ -1,9 +1,11 @@
+const { displayPageSize } = require('./config')
+
 /**
  * Get limit and offset on basis of page selected for querying data.
  * @param  {} page=1
  * @param  {} limit=20
  */
-function getPagination (page = 1, limit = 20) {
+function getPagination (page = 1, limit = displayPageSize) {
   const offset = page === 1 ? 0 : (page - 1) * limit
   return { limit, offset }
 }
@@ -39,5 +41,6 @@ function getPagingData (total, limit, page, url) {
 
 module.exports = {
   getPagination,
-  getPagingData
+  getPagingData,
+  displayPageSize
 }

app/plugins/cookies.js

@@ -12,6 +12,7 @@ module.exports = {
         if (request.response.variety === 'view' && statusCode !== 404 && statusCode !== 500 && request.response.source.manager._context) {
           const cookiesPolicy = getCurrentPolicy(request, h)
           request.response.source.manager._context.cookiesPolicy = cookiesPolicy
+          request.response.source.manager._context.user = request.auth?.credentials?.account
         }
         return h.continue
       })

app/plugins/views.js

@@ -16,14 +16,23 @@ module.exports = {
           }
         },
         prepare: (options, next) => {
-          options.compileOptions.environment = nunjucks.configure([
+          const nunjucksAppEnv = nunjucks.configure([
             path.join(options.relativeTo || process.cwd(), options.path),
-            'node_modules/govuk-frontend/'
+            'node_modules/govuk-frontend/',
+            'node_modules/@ministryofjustice/frontend/'
           ], {
             autoescape: true,
             watch: false
           })
 
+          // Add filters from MOJ Frontend
+          let mojFilters = require('../../node_modules/@ministryofjustice/frontend/moj/filters/all')()
+          mojFilters = Object.assign(mojFilters)
+          Object.keys(mojFilters).forEach(function (filterName) {
+            nunjucksAppEnv.addFilter(filterName, mojFilters[filterName])
+          })
+
+          options.compileOptions.environment = nunjucksAppEnv
           return next()
         }
       }

app/routes/applications.js

@@ -1,7 +1,7 @@
 const viewTemplate = 'applications'
 const currentPath = `/${viewTemplate}`
 const { getApplications } = require('../api/applications')
-const { getPagination, getPagingData } = require('../pagination')
+const { getPagination, getPagingData, displayPageSize } = require('../pagination')
 const Joi = require('joi')
 const { setAppSearch, getAppSearch } = require('../session')
 const keys = require('../session/keys')
@@ -22,10 +22,26 @@ async function createModel (request, page) {
       return [
         { text: n.reference },
         { text: n.data?.organisation?.name },
-        { text: n.data?.organisation?.sbi },
-        { text: new Date(n.createdAt).toLocaleDateString('en-GB') },
-        { text: new Date(n.createdAt).toLocaleDateString('en-GB') },
-        { html: `<span class="govuk-tag ${statusClass}">${n.status.status}</span>` },
+        {
+          text: n.data?.organisation?.sbi,
+          format: 'number',
+          attributes: {
+            'data-sort-value': n.data?.organisation?.sbi
+          }
+        },
+        {
+          text: new Date(n.createdAt).toLocaleDateString('en-GB'),
+          format: 'date',
+          attributes: {
+            'data-sort-value': new Date(n.createdAt).toLocaleDateString('en-GB')
+          }
+        },
+        {
+          html: `<span class="govuk-tag ${statusClass}">${n.status.status}</span>`,
+          attributes: {
+            'data-sort-value': `${n.status.status}`
+          }
+        },
         { html: `<a href="view-application/${n.reference}">View application</a>` }
       ]
     })
@@ -43,15 +59,30 @@ async function createModel (request, page) {
       ...pagingData,
       searchText,
       availableStatus: groupByStatus,
-      selectedStatus: groupByStatus.filter(s => s.selected === true)
+      selectedStatus: groupByStatus.filter(s => s.selected === true).map(s => {
+        return {
+          href: `${currentPath}/remove/${s.status}`,
+          classes: s.styleClass,
+          text: s.status
+        }
+      }),
+      filterStatus: groupByStatus.map(s => {
+        return {
+          value: s.status,
+          html: `<div class="govuk-tag ${s.styleClass}"  style="color:#104189;" >${s.status} (${s.total}) </div>`,
+          checked: s.selected,
+          styleClass: s.styleClass
+        }
+      })
     }
   } else {
     return {
       applications: [],
       error: 'No Applications found.',
       searchText,
       availableStatus: [],
-      selectedStatus: []
+      selectedStatus: [],
+      filterStatus: []
     }
   }
 }
@@ -94,10 +125,39 @@ module.exports = [
       validate: {
         query: Joi.object({
           page: Joi.number().greater(0).default(1),
-          limit: Joi.number().greater(0).default(10)
+          limit: Joi.number().greater(0).default(displayPageSize)
+        })
+      },
+      handler: async (request, h) => {
+        return h.view(viewTemplate, await createModel(request))
+      }
+    }
+  },
+  {
+    method: 'GET',
+    path: `${currentPath}/clear`,
+    options: {
+      auth: { scope: [administrator, processor, user] },
+      handler: async (request, h) => {
+        setAppSearch(request, keys.appSearch.filterStatus, [])
+        return h.view(viewTemplate, await createModel(request))
+      }
+    }
+  },
+  {
+    method: 'GET',
+    path: `${currentPath}/remove/{status}`,
+    options: {
+      auth: { scope: [administrator, processor, user] },
+      validate: {
+        params: Joi.object({
+          status: Joi.string()
         })
       },
       handler: async (request, h) => {
+        let filterStatus = getAppSearch(request, keys.appSearch.filterStatus)
+        filterStatus = filterStatus.filter(s => s !== request.params.status)
+        setAppSearch(request, keys.appSearch.filterStatus, filterStatus)
         return h.view(viewTemplate, await createModel(request))
       }
     }
@@ -110,16 +170,21 @@ module.exports = [
       validate: {
         query: Joi.object({
           page: Joi.number().greater(0).default(1),
-          limit: Joi.number().greater(0).default(10)
+          limit: Joi.number().greater(0).default(displayPageSize)
         })
       },
       handler: async (request, h) => {
         try {
-          let filterStatus = request.payload?.status ?? []
-          filterStatus = Array.isArray(filterStatus) ? filterStatus : [filterStatus]
+          let filterStatus = []
+          // Is Search Button Clicked
+          if (!request.payload.submit) {
+            filterStatus = request.payload?.status ?? []
+            filterStatus = Array.isArray(filterStatus) ? filterStatus : [filterStatus]
+          }
+
+          setAppSearch(request, keys.appSearch.filterStatus, filterStatus)
           const { searchText, searchType } = checkValidSearch(request.payload.searchText)
           setAppSearch(request, keys.appSearch.searchText, searchText ?? '')
-          setAppSearch(request, keys.appSearch.filterStatus, filterStatus)
           setAppSearch(request, keys.appSearch.searchType, searchType ?? '')
           return h.view(viewTemplate, await createModel(request, 1))
         } catch (err) {

app/routes/home.js

@@ -1,8 +1,9 @@
+const { administrator, processor, user } = require('../auth/permissions')
 module.exports = {
   method: 'GET',
   path: '/',
   options: {
-    auth: false,
+    auth: { scope: [administrator, processor, user] },
     handler: async (_, h) => {
       return h.view('home')
     }