VIH-11236 upgrade to use V5 of the GDS frontend

AdminWebsite/AdminWebsite/ClientApp/angular.json

@@ -22,15 +22,19 @@
               "src/favicon.ico",
               "src/assets",
               "src/web.config",
-              "src/assets",
               {
                 "glob": "*",
-                "input": "node_modules/govuk-frontend/govuk/assets/fonts",
+                "input": "node_modules/govuk-frontend/dist/govuk/assets/fonts",
                 "output": "assets/fonts/"
+              },
+              {
+                "glob": "*",
+                "input": "node_modules/govuk-frontend/dist/govuk/assets/images",
+                "output": "assets/images/"
               }
             ],
             "styles": ["src/styles.scss"],
-            "scripts": ["node_modules/govuk-frontend/govuk/all.js", "src/scripts/init-script.js"],
+            "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
@@ -93,11 +97,15 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/assets",
               {
                 "glob": "*",
-                "input": "node_modules/govuk-frontend/govuk/assets/fonts",
+                "input": "node_modules/govuk-frontend/dist/govuk/assets/fonts",
                 "output": "assets/fonts/"
+              },
+              {
+                "glob": "*",
+                "input": "node_modules/govuk-frontend/dist/govuk/assets/images",
+                "output": "assets/images/"
               }
             ]
           }

AdminWebsite/AdminWebsite/ClientApp/package.json

@@ -36,22 +36,22 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@hmcts/frontend": "^0.0.41-alpha",
-    "@microsoft/applicationinsights-web": "^3.0.2",
-    "@ministryofjustice/frontend": "^1.4.0",
+    "@hmcts/frontend": "^0.0.50-alpha",
+    "@microsoft/applicationinsights-web": "^3.3.4",
+    "@ministryofjustice/frontend": "^3.3.0",
     "@ng-select/ng-select": "^12.0.7",
     "angular-auth-oidc-client": "^15.0.3",
     "core-js": "^3.27.2",
-    "govuk-frontend": "^4.7.0",
-    "launchdarkly-js-client-sdk": "^3.1.3",
+    "govuk-frontend": "^5.7.1",
+    "launchdarkly-js-client-sdk": "^3.5.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.4",
     "ng-mocks": "^14.12.1",
     "ngx-clipboard": "^16.0.0",
     "ngx-device-detector": "^7.0.0",
     "ngx-moment": "^6.0.2",
     "rxjs": "^7.4.0",
-    "ts-case-convert": "^2.0.2",
+    "ts-case-convert": "^2.1.0",
     "tslib": "^2.2.0",
     "zone.js": "^0.14.4"
   },
@@ -86,10 +86,10 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-junit-reporter": "^2.0.1",
     "nswag": "^13.19.0",
-    "prettier": "^2.8.8",
-    "puppeteer": "^23.9.0",
+    "prettier": "^3.4.2",
+    "puppeteer": "^23.11.1",
     "run-script-os": "^1.1.6",
-    "sass": "^1.32.12",
+    "sass": "^1.83.1",
     "typescript": "^5.4.4",
     "uuid": "^9.0.0"
   },

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/add-participant/add-participant.component.html

@@ -200,7 +200,7 @@ <h2 class="govuk-heading-m">Client details</h2>
 
       <div class="govuk-grid-row">
         <div class="govuk-grid-column-one-half" *ngIf="displayAddButton">
-          <img src="assets/images/AddIcon.png" alt="Add icon with sign plus" />
+          <fa-icon [icon]="addIcon" size="2x" class="govuk-green" aria-hidden="true"></fa-icon>
           <span class="vh-vert-top-m15">
             <a href="javascript:void(0)" (click)="saveParticipant()" type="submit" id="addParticipantBtn" class="govuk-link govuk-body">
               Add participant
@@ -209,7 +209,7 @@ <h2 class="govuk-heading-m">Client details</h2>
         </div>
 
         <div class="govuk-grid-column-one-half" *ngIf="displayUpdateButton">
-          <img src="assets/images/AddIcon.png" alt="Add icon with sign plus" />
+          <fa-icon [icon]="addIcon" size="2x" class="govuk-green" aria-hidden="true"></fa-icon>
           <span class="vh-vert-top-m15">
             <a
               href="javascript:void(0)"
@@ -224,7 +224,10 @@ <h2 class="govuk-heading-m">Client details</h2>
         </div>
 
         <div class="govuk-grid-column-one-half" *ngIf="displayClearButton">
-          <img src="assets/images/ClearIcon.png" alt="Clear fields icon" />
+          <fa-stack [style]="{ verticalAlign: 'bottom' }">
+            <fa-icon [icon]="clearCircle" class="govuk-green" stackItemSize="2x"></fa-icon>
+            <fa-icon [icon]="clearIcon" class="govuk-green" [inverse]="true" aria-hidden="true" stackItemSize="1x"></fa-icon>
+          </fa-stack>
           <span class="vh-vert-top-m15">
             <a href="javascript:void(0)" id="clearFormBtn" class="govuk-link govuk-body" (click)="clearForm()"> Clear details </a>
           </span>
@@ -235,7 +238,7 @@ <h2 class="govuk-heading-m">Client details</h2>
       <button *ngIf="displayNextButton" id="nextButton" class="govuk-button vh-mr25" data-module="govuk-button" value="" (click)="next()">
         {{ buttonAction }}
       </button>
-      <button id="cancelBtn" class="govuk-button hmcts-button--secondary" data-module="govuk-button" (click)="addParticipantCancel()">
+      <button id="cancelBtn" class="govuk-button govuk-button--secondary" data-module="govuk-button" (click)="addParticipantCancel()">
         Cancel
       </button>
     </div>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/add-participant/add-participant.component.ts

@@ -19,6 +19,7 @@ import { takeUntil } from 'rxjs/operators';
 import { FeatureFlags, LaunchDarklyService } from 'src/app/services/launch-darkly.service';
 import { InterpreterSelectedDto } from '../interpreter-form/interpreter-selected.model';
 import { VHParticipant } from 'src/app/common/model/vh-participant';
+import { faPlusCircle, faEraser, faCircle } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
     selector: 'app-add-participant',
@@ -49,6 +50,10 @@ export class AddParticipantComponent extends AddParticipantBaseDirective impleme
     forceInterpretationLanguageSelection = false;
     interpreterSelection: InterpreterSelectedDto;
 
+    addIcon = faPlusCircle;
+    clearIcon = faEraser;
+    clearCircle = faCircle;
+
     @ViewChild(ParticipantListComponent, { static: true })
     participantsListComponent: ParticipantListComponent;
 
@@ -294,7 +299,6 @@ export class AddParticipantComponent extends AddParticipantBaseDirective impleme
 
     saveParticipant() {
         this.actionsBeforeSave();
-
         if (
             this.form.valid &&
             this.isInterpreterFormValid &&

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/assign-judge/assign-judge.component.html

@@ -127,7 +127,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">
         </button>
         <button
           id="cancelButton"
-          class="govuk-button hmcts-button--secondary"
+          class="govuk-button govuk-button--secondary"
           data-module="govuk-button"
           (click)="confirmCancelBooking()"
           type="button"

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/breadcrumb/breadcrumb.component.scss

@@ -1,4 +1,4 @@
-@import 'govuk-frontend/govuk/base';
+@import 'govuk-frontend/dist/govuk/base';
 
 .vh-active {
   color: govuk-colour('blue') !important;

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/create-hearing/create-hearing.component.html

@@ -109,7 +109,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">Please complete
     </button>
     <button
       id="cancelButton"
-      class="govuk-button hmcts-button--secondary"
+      class="govuk-button govuk-button--secondary"
       data-module="govuk-button"
       value="Cancel"
       type="button"

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/hearing-schedule/edit-hearing-dates/edit-hearing-dates.component.html

@@ -9,7 +9,7 @@
     <tr class="govuk-table__row" *ngFor="let hearing of hearingsInGroupToEdit; let i = index">
       <td class="govuk-table__cell">{{ formatDate(hearing?.originalScheduledDateTime) }}</td>
       <td class="govuk-table__cell" [ngClass]="{ 'govuk-form-group--error': newDatesInvalid }">
-        <input class="govuk-input" type="date" [formControl]="newDatesFormArray.controls[i]" min="{{ today | date : 'yyyy-MM-dd' }}" />
+        <input class="govuk-input" type="date" [formControl]="newDatesFormArray.controls[i]" min="{{ today | date: 'yyyy-MM-dd' }}" />
       </td>
     </tr>
   </tbody>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/hearing-schedule/hearing-schedule.component.html

@@ -29,7 +29,7 @@ <h2 class="govuk-heading-m">Time and location</h2>
         formControlName="hearingDate"
         required
         placeholder="e.g. 30/02/2018"
-        min="{{ today | date : 'yyyy-MM-dd' }}"
+        min="{{ today | date: 'yyyy-MM-dd' }}"
         (blur)="resetPastTimeOnBlur()"
       />
       <div *ngIf="hearingDateInvalid">
@@ -58,7 +58,7 @@ <h2 class="govuk-heading-m">Time and location</h2>
             formControlName="hearingDate"
             required
             placeholder="e.g. 30/02/2018"
-            min="{{ today | date : 'yyyy-MM-dd' }}"
+            min="{{ today | date: 'yyyy-MM-dd' }}"
             (blur)="resetPastTimeOnBlur()"
           />
           <div *ngIf="hearingDateInvalid">
@@ -78,7 +78,7 @@ <h2 class="govuk-heading-m">Time and location</h2>
             formControlName="endHearingDate"
             required
             placeholder="e.g. 30/02/2018"
-            min="{{ today | date : 'yyyy-MM-dd' }}"
+            min="{{ today | date: 'yyyy-MM-dd' }}"
           />
           <div *ngIf="endHearingDateInvalid">
             <app-date-error-messages
@@ -103,7 +103,7 @@ <h2 class="govuk-heading-m">Time and location</h2>
         <div *ngIf="hearingDates.length > 0" class="multi-date-selection__list govuk-!-width-one-half">
           <div class="multi-date-selection__list-item" *ngFor="let date of hearingDates; index as i">
             <div class="multi-date-selection__date">
-              {{ date | date : 'EEEE dd MMMM yyyy' }}
+              {{ date | date: 'EEEE dd MMMM yyyy' }}
             </div>
             <a class="vhlink" href="javascript:void(0)" (click)="removeHearingDate(i)">Remove</a>
           </div>
@@ -120,7 +120,7 @@ <h2 class="govuk-heading-m">Time and location</h2>
             type="date"
             [formControl]="addHearingDateControl"
             placeholder="e.g. 30/02/2018"
-            min="{{ today | date : 'yyyy-MM-dd' }}"
+            min="{{ today | date: 'yyyy-MM-dd' }}"
             (blur)="resetPastTimeOnBlur()"
             (change)="hearingDateChanged($event)"
           />
@@ -305,7 +305,7 @@ <h2 class="govuk-heading-m">Time and location</h2>
     </button>
     <button
       id="cancelButton"
-      class="govuk-button hmcts-button--secondary"
+      class="govuk-button govuk-button--secondary"
       data-module="govuk-button"
       (click)="confirmCancelBooking()"
       type="button"

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/interpreter-form/interpreter-form.component.html

@@ -10,8 +10,8 @@
         name="interpreter-required"
         type="checkbox"
         [(ngModel)]="displayForm"
-        (keydown.enter)="displayForm = !displayForm; $event.stopPropagation()"
-        (click)="displayForm = !displayForm; $event.stopPropagation()"
+        (keydown.enter)="toggleDisplayForm(); $event.stopPropagation()"
+        (click)="toggleDisplayForm(); $event.stopPropagation()"
       />
       <label class="govuk-label govuk-checkboxes__label" [htmlFor]="checkboxId"> Interpreter required </label>
     </div>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/interpreter-form/interpreter-form.component.ts

@@ -76,6 +76,11 @@ export class InterpreterFormComponent implements OnInit, OnDestroy {
         });
     }
 
+    toggleDisplayForm() {
+        this.displayForm = !this.displayForm;
+        this.cdRef.detectChanges();
+    }
+
     prepopulateForm(interpreterSelected: InterpreterSelectedDto) {
         if (!interpreterSelected) {
             return;

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/add-judicial-office-holders/add-judicial-office-holders.component.html

@@ -29,7 +29,7 @@ <h2 class="govuk-heading-m">Add a Judicial Office Holder</h2>
       </div>
 
       <div class="govuk-grid-column-full vh-horizontal-align" *ngIf="!showAddPanelMember">
-        <img ngSrc="assets/images/AddIcon.png" [alt]="addPanelMemberText" height="40" width="40" />
+        <fa-icon [icon]="addIcon" size="2x" class="govuk-green" aria-hidden="true"></fa-icon>
         <span class="govuk-!-margin-left-2">
           <a
             href="javascript:void(0)"

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/add-judicial-office-holders/add-judicial-office-holders.component.ts

@@ -8,6 +8,7 @@ import { PageUrls } from 'src/app/shared/page-url.constants';
 import { Router } from '@angular/router';
 import { VideoHearingsService } from 'src/app/services/video-hearings.service';
 import { BookingService } from 'src/app/services/booking.service';
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
     selector: 'app-add-judicial-office-holders',
@@ -28,6 +29,8 @@ export class AddJudicialOfficeHoldersComponent implements OnInit, OnDestroy {
 
     destroyed$ = new Subject<void>();
 
+    addIcon = faPlusCircle;
+
     @ViewChild(ParticipantListComponent, { static: true })
     participantsListComponent: ParticipantListComponent;
 

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/search-for-judicial-member/search-for-judicial-member.component.html

@@ -3,7 +3,7 @@
     <label class="govuk-label" for="judiciaryEmailInput">Email</label>
     <input id="judiciaryEmailInput" class="govuk-input" type="email" autocomplete="off" formControlName="judiciaryEmail" />
     <ul id="search-results-list" *ngIf="showResult && searchResult?.length > 0" class="vh-li-email govuk-body">
-      <li *ngFor="let result of searchResult | slice : 0 : 9" class="vk-showlist-m30">
+      <li *ngFor="let result of searchResult | slice: 0 : 9" class="vk-showlist-m30">
         <span class="vh-a-email" (keypress)="selectJudicialMember(result)" (click)="selectJudicialMember(result)">{{ result.email }}</span>
       </li>
     </ul>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/search-for-judicial-member/search-for-judicial-member.component.scss

@@ -1,4 +1,4 @@
-@import 'govuk-frontend/govuk/base';
+@import 'govuk-frontend/dist/govuk/base';
 
 .search-result-list {
   margin-top: 3px;

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/judicial-office-holders/search-for-judicial-member/search-for-judicial-member.component.ts

@@ -54,7 +54,10 @@ export class SearchForJudicialMemberComponent implements AfterContentChecked {
 
     private editMode = false;
 
-    constructor(private readonly judiciaryService: JudicialService, private readonly cdr: ChangeDetectorRef) {
+    constructor(
+        private readonly judiciaryService: JudicialService,
+        private readonly cdr: ChangeDetectorRef
+    ) {
         this.createForm();
     }
 

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/other-information/other-information.component.html

@@ -82,7 +82,7 @@ <h1 class="govuk-heading-m" id="other-info-header">Other information</h1>
           </button>
           <button
             id="cancelButton"
-            class="govuk-button hmcts-button--secondary"
+            class="govuk-button govuk-button--secondary"
             data-module="govuk-button"
             (click)="confirmCancelBooking()"
             type="button"

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/participant/list/participant-list.component.ts

@@ -29,7 +29,10 @@ export class ParticipantListComponent implements OnInit, OnChanges, DoCheck, OnD
 
     isEditMode = false;
 
-    constructor(private readonly videoHearingsService: VideoHearingsService, private readonly ldService: LaunchDarklyService) {}
+    constructor(
+        private readonly videoHearingsService: VideoHearingsService,
+        private readonly ldService: LaunchDarklyService
+    ) {}
 
     ngOnDestroy(): void {
         this.destroyed$.unsubscribe();

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/screening/screening-form.component.ts

@@ -12,7 +12,10 @@ export class ScreeningFormComponent {
     isEditMode = false;
     newParticipantRemovedFromOptions = false;
 
-    constructor(private readonly formBuilder: FormBuilder, private readonly cdRef: ChangeDetectorRef) {}
+    constructor(
+        private readonly formBuilder: FormBuilder,
+        private readonly cdRef: ChangeDetectorRef
+    ) {}
 
     @Output() screeningSaved = new EventEmitter<SelectedScreeningDto>();
 
@@ -34,7 +37,7 @@ export class ScreeningFormComponent {
                         displayName: participant.displayName,
                         externalReferenceId: participant.externalReferenceId,
                         isNewlyAdded: participant.id === null || participant.id === undefined
-                    } as GenericParticipantsModel)
+                    }) as GenericParticipantsModel
             );
 
         const mappedEndpoints = hearing.endpoints.map(
@@ -43,7 +46,7 @@ export class ScreeningFormComponent {
                     displayName: endpoint.displayName,
                     externalReferenceId: endpoint.externalReferenceId,
                     isNewlyAdded: endpoint.id === null || endpoint.id === undefined
-                } as GenericParticipantsModel)
+                }) as GenericParticipantsModel
         );
         this.isEditMode = !!hearing.hearingId;
         this.allParticipants = [...mappedParticipants, ...mappedEndpoints].filter(participant =>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/screening/screening-list.component.scss

@@ -1,4 +1,4 @@
-@import 'govuk-frontend/govuk/base';
+@import 'govuk-frontend/dist/govuk/base';
 
 .screening-list-container {
   display: block;

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/search-email/search-email.component.html

@@ -30,7 +30,7 @@
     />
 
     <ul id="search-results-list" *ngIf="isShowResult" class="vh-li-email">
-      <li *ngFor="let result of results | slice : 0 : 9" class="vk-showlist-m30">
+      <li *ngFor="let result of results | slice: 0 : 9" class="vk-showlist-m30">
         <a class="govuk-body vh-a-email" href="javascript: void(0)" (click)="selectItemClick(result)">{{ result.email }}</a>
       </li>
     </ul>

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/summary/multi-day-hearing-schedule/multi-day-hearing-schedule.component.html

@@ -2,7 +2,7 @@
   <span class="govuk-caption-m">{{ group.label }}</span>
   <div class="dates">
     <div class="date" *ngFor="let date of group.hearingDates">
-      {{ date | date : 'd' }}
+      {{ date | date: 'd' }}
     </div>
   </div>
 </div>