VB-3391 Add DPS footer component

README.md

@@ -43,6 +43,7 @@ API_CLIENT_SECRET=clientsecret
 SYSTEM_CLIENT_ID=clientid
 SYSTEM_CLIENT_SECRET=clientsecret
 
+COMPONENT_API_URL="https://frontend-components-dev.hmpps.service.justice.gov.uk"
 NOMIS_USER_ROLES_API_URL="https://nomis-user-roles-api-dev.prison.service.justice.gov.uk"
 ORCHESTRATION_API_URL="https://hmpps-manage-prison-visits-orchestration-dev.prison.service.justice.gov.uk"
 PRISONER_SEARCH_API_URL="https://prisoner-search-dev.prison.service.justice.gov.uk"

assets/sass/application.scss

@@ -12,6 +12,7 @@ $govuk-page-width: $moj-page-width;
 @import './components/block-background';
 @import './components/date-picker';
 @import './components/filter';
+@import './components/footer';
 @import './components/notificationTypes';
 @import './components/prisoner-profile';
 @import './components/restrictions';

assets/sass/components/_footer.scss

@@ -0,0 +1,3 @@
+.govuk-footer {
+  min-height: 160px;
+}

cypress.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'cypress'
 import { resetStubs } from './integration_tests/mockApis/wiremock'
 
 import auth from './integration_tests/mockApis/auth'
+import frontendComponents from './integration_tests/mockApis/frontendComponents'
 import manageUsersApi from './integration_tests/mockApis/manageUsersApi'
 import tokenVerification from './integration_tests/mockApis/tokenVerification'
 import nomisUserRoles from './integration_tests/mockApis/nomisUserRoles'
@@ -32,6 +33,7 @@ export default defineConfig({
         ...manageUsersApi,
         ...tokenVerification,
 
+        ...frontendComponents,
         ...nomisUserRoles,
         ...orchestrationService,
         ...prisonerContactRegistry,

feature.env

@@ -13,6 +13,7 @@ SYSTEM_CLIENT_ID=clientid
 SYSTEM_CLIENT_SECRET=clientsecret
 FEATURE_REVIEW_BOOKINGS=true
 
+COMPONENT_API_URL=http://localhost:9091/frontendComponents
 NOMIS_USER_ROLES_API_URL=http://localhost:9091/nomisUserRoles
 ORCHESTRATION_API_URL=http://localhost:9091/orchestration
 PRISONER_SEARCH_API_URL=http://localhost:9091/offenderSearch

helm_deploy/values-dev.yaml

@@ -19,6 +19,7 @@ generic-service:
     PRISONER_CONTACT_REGISTRY_API_URL: "https://prisoner-contact-registry-dev.prison.service.justice.gov.uk"
     WHEREABOUTS_API_URL: "https://whereabouts-api-dev.service.justice.gov.uk"
     PRISON_REGISTER_API_URL: "https://prison-register-dev.hmpps.service.justice.gov.uk"
+    COMPONENT_API_URL: https://frontend-components-dev.hmpps.service.justice.gov.uk
     DPS_URL: "https://digital-dev.prison.service.justice.gov.uk/"
     REDIS_KEY: "bapv-staff-dev"
     FEATURE_REVIEW_BOOKINGS: "true"

helm_deploy/values-preprod.yaml

@@ -20,6 +20,7 @@ generic-service:
     PRISONER_CONTACT_REGISTRY_API_URL: "https://prisoner-contact-registry-preprod.prison.service.justice.gov.uk"
     WHEREABOUTS_API_URL: "https://whereabouts-api-preprod.service.justice.gov.uk"
     PRISON_REGISTER_API_URL: "https://prison-register-preprod.hmpps.service.justice.gov.uk"
+    COMPONENT_API_URL: https://frontend-components-preprod.hmpps.service.justice.gov.uk
     DPS_URL: "https://digital-preprod.prison.service.justice.gov.uk/"
     REDIS_KEY: "bapv-staff-preprod"
     FEATURE_REVIEW_BOOKINGS: "true"

helm_deploy/values-prod.yaml

@@ -20,6 +20,7 @@ generic-service:
     PRISONER_CONTACT_REGISTRY_API_URL: "https://prisoner-contact-registry.prison.service.justice.gov.uk"
     WHEREABOUTS_API_URL: "https://whereabouts-api.service.justice.gov.uk"
     PRISON_REGISTER_API_URL: "https://prison-register.hmpps.service.justice.gov.uk"
+    COMPONENT_API_URL: https://frontend-components.hmpps.service.justice.gov.uk
     DPS_URL: "https://digital.prison.service.justice.gov.uk/"
     REDIS_KEY: "bapv-staff-prod"
     FEATURE_REVIEW_BOOKINGS: "true"

helm_deploy/values-staging.yaml

@@ -19,6 +19,7 @@ generic-service:
     PRISONER_CONTACT_REGISTRY_API_URL: "https://prisoner-contact-registry-staging.prison.service.justice.gov.uk"
     WHEREABOUTS_API_URL: "https://whereabouts-api-dev.service.justice.gov.uk"
     PRISON_REGISTER_API_URL: "https://prison-register-dev.hmpps.service.justice.gov.uk"
+    COMPONENT_API_URL: https://frontend-components-dev.hmpps.service.justice.gov.uk
     DPS_URL: "https://digital-dev.prison.service.justice.gov.uk/"
     APPLICATIONINSIGHTS_CONNECTION_STRING: null # disable App Insights for staging
     REDIS_KEY: "bapv-staff-staging"

integration_tests/integration/bookAVisit.cy.ts

@@ -36,6 +36,7 @@ context('Book a visit', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/cancelVisit.cy.ts

@@ -28,6 +28,7 @@ context('Cancel visit journey', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/changeEstablishment.cy.ts

@@ -7,6 +7,7 @@ context('Change establishment', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/checkYourBooking.cy.ts

@@ -18,6 +18,7 @@ context('Check visit details page', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/datePicker.cy.ts

@@ -12,6 +12,7 @@ context('Date picker', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/frontendComponents.cy.ts

@@ -0,0 +1,33 @@
+import TestData from '../../server/routes/testutils/testData'
+import HomePage from '../pages/home'
+import Page from '../pages/page'
+
+context('Frontend components', () => {
+  const notificationCount = TestData.notificationCount()
+
+  beforeEach(() => {
+    cy.task('reset')
+    cy.task('stubSignIn')
+    cy.task('stubManageUser')
+    cy.task('stubSupportedPrisonIds')
+    cy.task('stubPrisonNames')
+    cy.task('stubGetPrison')
+    cy.task('stubGetNotificationCount', { notificationCount })
+  })
+
+  it('should render the footer from the frontend components', () => {
+    cy.task('stubFrontendComponents')
+    cy.signIn()
+
+    Page.verifyOnPage(HomePage)
+    cy.get('footer').contains('Footer component')
+  })
+
+  it('should render the fallback footer when frontend components load fails', () => {
+    cy.task('stubFrontendComponentsFail')
+    cy.signIn()
+
+    Page.verifyOnPage(HomePage)
+    cy.get('footer').should('not.contain.text', 'Footer component')
+  })
+})

integration_tests/integration/home.cy.ts

@@ -8,6 +8,7 @@ context('Home page', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/login.cy.ts

@@ -8,6 +8,7 @@ context('SignIn', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/prisonerProfile.cy.ts

@@ -9,6 +9,7 @@ context('Prisoner profile page', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/review.cy.ts

@@ -45,6 +45,7 @@ context('Bookings review page', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/searchForABooking.cy.ts

@@ -20,6 +20,7 @@ context('Search for a booking by reference', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/searchForAPrisoner.cy.ts

@@ -11,6 +11,7 @@ context('Search for a prisoner', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/updateAVisit.cy.ts

@@ -24,6 +24,7 @@ context('Update a visit', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/visitDetails.cy.ts

@@ -13,6 +13,7 @@ context('Visit details page', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/visitTimetable.cy.ts

@@ -15,6 +15,7 @@ context('View visit schedule timetable', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/integration/visitsByDate.cy.ts

@@ -34,6 +34,7 @@ context('View visits by date', () => {
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
+    cy.task('stubFrontendComponents')
     cy.task('stubManageUser')
     cy.task('stubSupportedPrisonIds')
     cy.task('stubPrisonNames')

integration_tests/mockApis/frontendComponents.ts

@@ -0,0 +1,36 @@
+import { SuperAgentRequest } from 'superagent'
+import { stubFor } from './wiremock'
+
+export default {
+  stubFrontendComponents: (): SuperAgentRequest => {
+    return stubFor({
+      request: {
+        method: 'GET',
+        url: '/frontendComponents/components?component=footer',
+      },
+      response: {
+        status: 200,
+        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+        jsonBody: {
+          footer: {
+            html: '<footer class="govuk-footer"><div class="govuk-width-container">Footer component</div></footer>',
+            css: [],
+            javascript: [],
+          },
+        },
+      },
+    })
+  },
+
+  stubFrontendComponentsFail: () => {
+    return stubFor({
+      request: {
+        method: 'GET',
+        url: '/frontendComponents/components?component=footer',
+      },
+      response: {
+        status: 500,
+      },
+    })
+  },
+}

server/app.ts

@@ -26,6 +26,7 @@ import timetableRoutes from './routes/timetable'
 import visitRoutes from './routes/visit'
 import visitsRoutes from './routes/visits'
 import type { Services } from './services'
+import getFrontendComponents from './middleware/setupFrontendComponents'
 
 export default function createApp(services: Services): express.Application {
   const app = express()
@@ -46,6 +47,8 @@ export default function createApp(services: Services): express.Application {
   app.use(setUpCurrentUser(services))
   app.use(appInsightsOperationId)
 
+  app.get('*', getFrontendComponents(services))
+
   app.use('/', indexRoutes(services))
   app.use('/book-a-visit', bookAVisitRoutes(services))
   app.use('/change-establishment', establishmentRoutes(services))

server/config.ts

@@ -145,6 +145,14 @@ export default {
       },
       agent: new AgentConfig(Number(get('ORCHESTRATION_API_TIMEOUT_RESPONSE', 10000))),
     },
+    frontendComponents: {
+      url: get('COMPONENT_API_URL', 'http://localhost:8082/frontend-components', requiredInProduction),
+      timeout: {
+        response: Number(get('FRONTEND_COMPONENTS_TIMEOUT_RESPONSE', 3000)),
+        deadline: Number(get('FRONTEND_COMPONENTS_TIMEOUT_DEADLINE', 3000)),
+      },
+      agent: new AgentConfig(Number(get('FRONTEND_COMPONENTS_TIMEOUT_RESPONSE', 3000))),
+    },
   },
   features: {
     reviewBookings: get('FEATURE_REVIEW_BOOKINGS', 'false', requiredInProduction) === 'true',

server/data/frontendComponentsClient.test.ts

@@ -0,0 +1,36 @@
+import nock from 'nock'
+import config from '../config'
+import FrontendComponentsClient from './frontendComponentsClient'
+
+describe('FrontendComponentsClient', () => {
+  const frontendComponentsClient = new FrontendComponentsClient('not used')
+  let fakeFrontendComponentsApi: nock.Scope
+
+  beforeEach(() => {
+    fakeFrontendComponentsApi = nock(config.apis.frontendComponents.url)
+  })
+
+  afterEach(() => {
+    if (!nock.isDone()) {
+      nock.cleanAll()
+      throw new Error('Not all nock interceptors were used!')
+    }
+    nock.abortPendingRequests()
+    nock.cleanAll()
+  })
+
+  describe('getComponents', () => {
+    it('should get frontend components', async () => {
+      const userToken = 'user1'
+      const response = { some: 'response' }
+
+      fakeFrontendComponentsApi
+        .get('/components?component=header&component=footer')
+        .matchHeader('x-user-token', userToken)
+        .reply(200, response)
+
+      const result = await frontendComponentsClient.getComponents(['header', 'footer'], userToken)
+      expect(result).toStrictEqual(response)
+    })
+  })
+})

server/data/frontendComponentsClient.ts

@@ -0,0 +1,29 @@
+import RestClient from './restClient'
+import config from '../config'
+
+export interface Component {
+  html: string
+  css: string[]
+  javascript: string[]
+}
+
+export type AvailableComponent = 'header' | 'footer'
+
+export default class FrontendComponentsClient {
+  restClient: RestClient
+
+  constructor(token: string) {
+    this.restClient = new RestClient('Frontend components', config.apis.frontendComponents, token)
+  }
+
+  async getComponents<T extends AvailableComponent[]>(
+    components: T,
+    userToken: string,
+  ): Promise<Record<T[number], Component>> {
+    return this.restClient.get({
+      path: `/components`,
+      query: `component=${components.join('&component=')}`,
+      headers: { 'x-user-token': userToken },
+    })
+  }
+}

server/data/index.ts

@@ -21,6 +21,7 @@ import PrisonRegisterApiClient from './prisonRegisterApiClient'
 import { createRedisClient } from './redisClient'
 import TokenStore from './tokenStore'
 import WhereaboutsApiClient from './whereaboutsApiClient'
+import FrontendComponentsClient from './frontendComponentsClient'
 
 type RestClientBuilder<T> = (token: string) => T
 
@@ -29,6 +30,8 @@ export const dataAccess = () => ({
   hmppsAuthClient: new HmppsAuthClient(new TokenStore(createRedisClient())),
   manageUsersApiClient: new ManageUsersApiClient(),
   nomisUserRolesApiClient: new NomisUserRolesApiClient(),
+  frontendComponentsClientBuilder: ((token: string) =>
+    new FrontendComponentsClient(token)) as RestClientBuilder<FrontendComponentsClient>,
   orchestrationApiClientBuilder: ((token: string) =>
     new OrchestrationApiClient(token)) as RestClientBuilder<OrchestrationApiClient>,
   prisonApiClientBuilder: ((token: string) => new PrisonApiClient(token)) as RestClientBuilder<PrisonApiClient>,
@@ -46,6 +49,7 @@ export type DataAccess = ReturnType<typeof dataAccess>
 
 export {
   HmppsAuthClient,
+  FrontendComponentsClient,
   ManageUsersApiClient,
   NomisUserRolesApiClient,
   OrchestrationApiClient,