VIH-11082 im behind feature flag (#2302)

* defer checking for hearing layout until conference is not null * VIH-11082 hide im behind a feature flag * hide im components
hmcts · Nov 18, 2024 · 405c282 · 405c282
1 parent 3e73c63
commit 405c282
Show file tree

Hide file tree

Showing 21 changed files with 247 additions and 226 deletions.
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/services/hearing-layout.service.ts b/VideoWeb/VideoWeb/ClientApp/src/app/services/hearing-layout.service.ts
@@ -125,6 +125,7 @@ export class HearingLayoutService {
 
     getCurrentLayout(): Observable<HearingLayout> {
         return this.conferenceService.currentConference$.pipe(
+            filter(conference => conference !== null),
             take(1),
             map(conference => conference.id),
             mergeMap(currentConferenceId => this.apiClient.getLayoutForHearing(currentConferenceId))

diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/services/launch-darkly.service.ts b/VideoWeb/VideoWeb/ClientApp/src/app/services/launch-darkly.service.ts
@@ -10,7 +10,8 @@ export const FEATURE_FLAGS = {
     vodafone: 'vodafone',
     activeSessionFilter: 'active-sessions-filter',
     interpreterEnhancements: 'interpreter-enhancements',
-    dialOutParticipant: 'dial-out-participant'
+    dialOutParticipant: 'dial-out-participant',
+    instantMessaging: 'instant-messaging'
 };
 
 @Injectable({

diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/vh-officer/admin-im-list/admin-im-list.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/vh-officer/admin-im-list/admin-im-list.component.html
@@ -8,7 +8,7 @@
       'im-list-top': participant.isJudge
     }"
   >
-    <div id="{{ participant.id }}-unread-messages-image" class="im-icon">
+    <div *appFeatureFlag="featureFlags.instantMessaging" id="{{ participant.id }}-unread-messages-image" class="im-icon">
       <app-unread-messages-participant [hearing]="hearing" [participant]="participant"></app-unread-messages-participant>
     </div>
     <div class="name list-item" [ngClass]="isParticipantAvailable(participant) ? 'available' : 'unavailable'">

diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/vh-officer/admin-im-list/admin-im-list.component.ts b/VideoWeb/VideoWeb/ClientApp/src/app/vh-officer/admin-im-list/admin-im-list.component.ts
@@ -4,6 +4,7 @@ import { Hearing } from 'src/app/shared/models/hearing';
 import { Participant } from 'src/app/shared/models/participant';
 import { ParticipantContactDetails } from 'src/app/shared/models/participant-contact-details';
 import { ParticipantStatusDirective } from '../vho-shared/participant-status-base/participant-status-base.component';
+import { FEATURE_FLAGS } from 'src/app/services/launch-darkly.service';
 @Component({
     selector: 'app-admin-im-list',
     templateUrl: './admin-im-list.component.html',
@@ -13,6 +14,8 @@ export class AdminImListComponent extends ParticipantStatusDirective implements
     @Input() hearing: Hearing;
     @Output() selectedParticipant = new EventEmitter<ParticipantContactDetails>();
 
+    featureFlags = FEATURE_FLAGS;
+
     currentParticipant: ParticipantContactDetails;
     roles = Role;
 

diff --git a/...eoWeb/ClientApp/src/app/vh-officer/command-centre-menu/command-centre-menu.component.html b/...eoWeb/ClientApp/src/app/vh-officer/command-centre-menu/command-centre-menu.component.html
@@ -1,11 +1,13 @@
 <div class="tabcontainer">
   <div class="tab tab--left">
-      <button id="hearingsTabButton" [ngClass]="{ active: currentMenu === 'Hearing' }" (click)="displayHearing()">Hearings</button>
+    <button id="hearingsTabButton" [ngClass]="{ active: currentMenu === 'Hearing' }" (click)="displayHearing()">Hearings</button>
   </div>
-  <div [ngClass]="isStaffMember ? 'tab tab--middle' : 'tab tab--right'">
+  <ng-container *appFeatureFlag="featureFlags.instantMessaging">
+    <div [ngClass]="isStaffMember ? 'tab tab--middle' : 'tab tab--right'">
       <button id="messagesTabButton" [ngClass]="{ active: currentMenu === 'Message' }" (click)="displayMessages()">Messages</button>
-  </div>
-  <div  class="tab tab--right" *ngIf="isStaffMember">
-      <button id="command-centre-join-hearing-btn" (click)="signIntoConference()" [disabled]="!conferenceId" > Join Hearing </button>
+    </div>
+  </ng-container>
+  <div class="tab tab--right" *ngIf="isStaffMember">
+    <button id="command-centre-join-hearing-btn" (click)="signIntoConference()" [disabled]="!conferenceId">Join Hearing</button>
   </div>
 </div>
diff --git a/...ideoWeb/ClientApp/src/app/vh-officer/command-centre-menu/command-centre-menu.component.ts b/...ideoWeb/ClientApp/src/app/vh-officer/command-centre-menu/command-centre-menu.component.ts
@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
 import { Role, UserProfileResponse } from '../../services/clients/api-client';
 import { VideoWebService } from '../../services/api/video-web.service';
 import { ProfileService } from '../../services/api/profile.service';
+import { FEATURE_FLAGS } from 'src/app/services/launch-darkly.service';
 
 @Component({
     selector: 'app-command-centre-menu',
@@ -18,6 +19,8 @@ export class CommandCentreMenuComponent implements OnInit, OnDestroy {
     @Output() selectedMenu = new EventEmitter<MenuOption>();
     @Input() conferenceId: string | null;
 
+    featureFlags = FEATURE_FLAGS;
+
     subscriptions$ = new Subscription();
     currentMenu: MenuOption;
     private loggedInUser: UserProfileResponse;

diff --git a/...eb/VideoWeb/ClientApp/src/app/vh-officer/vho-hearing-list/vho-hearing-list.component.html b/...eb/VideoWeb/ClientApp/src/app/vh-officer/vho-hearing-list/vho-hearing-list.component.html
@@ -4,7 +4,8 @@ <h3 class="govuk-heading-m">{{ 'judge-hearing-list.you-have-no-video-hearings' |
   </div>
 </div>
 <div id="conference-list" class="govuk-!-padding-3">
-  <div onKeyPress=""
+  <div
+    onKeyPress=""
     class="vhList govuk-!-padding-top-2"
     [ngClass]="{ 'selected-conference': isCurrentConference(conference) }"
     *ngFor="let conference of conferences; trackBy: trackConference"
@@ -48,21 +49,15 @@ <h3 class="govuk-heading-m">{{ 'judge-hearing-list.you-have-no-video-hearings' |
 
     <div class="judge listItemBold" id="{{ conference.id }}-judge">{{ conference.judgeName }}</div>
     <div class="venue listItem" id="{{ conference.id }}-venue">{{ conference.hearingVenueName }}</div>
-    <div class="cso listItem" id="{{ conference.id }}-cso">
-      Allocated To: {{ conference.allocatedCso }}
-    </div>
+    <div class="cso listItem" id="{{ conference.id }}-cso">Allocated To: {{ conference.allocatedCso }}</div>
     <div class="alert"><app-pending-tasks [conferenceId]="conference.id"></app-pending-tasks></div>
-    <div class="message"><app-unread-messages [hearing]="mapToHearingWithParticipants(conference)"></app-unread-messages></div>
-    <div
-      id="{{ conference.id }}-hearing-status"
-      [ngClass]="{ 'status-down': true }"
-    >
+    <div *appFeatureFlag="featureFlags.instantMessaging" class="message">
+      <app-unread-messages [hearing]="mapToHearingWithParticipants(conference)"></app-unread-messages>
+    </div>
+    <div id="{{ conference.id }}-hearing-status" [ngClass]="{ 'status-down': true }">
       <app-hearing-status [hearing]="mapToHearing(conference)"></app-hearing-status>
     </div>
-    <div
-      class="vh-top-padding"
-      [ngClass]="{ 'pIcons-down': true }"
-    >
+    <div class="vh-top-padding" [ngClass]="{ 'pIcons-down': true }">
       <div *ngFor="let participant of getParticipantsForConference(conference)" class="vh-pIcons">
         <app-participant-network-status [participant]="participant" [conferenceId]="conference.id"> </app-participant-network-status>
       </div>

diff --git a/...oWeb/VideoWeb/ClientApp/src/app/vh-officer/vho-hearing-list/vho-hearing-list.component.ts b/...oWeb/VideoWeb/ClientApp/src/app/vh-officer/vho-hearing-list/vho-hearing-list.component.ts
@@ -3,6 +3,7 @@ import { ConferenceResponseVho, ParticipantResponseVho } from 'src/app/services/
 import { Hearing } from 'src/app/shared/models/hearing';
 import { HearingSummary } from 'src/app/shared/models/hearing-summary';
 import { ParticipantSummary } from '../../shared/models/participant-summary';
+import { FEATURE_FLAGS } from 'src/app/services/launch-darkly.service';
 
 @Component({
     selector: 'app-vho-hearing-list',
@@ -13,6 +14,8 @@ export class VhoHearingListComponent {
     @Input() conferences: HearingSummary[];
     @Output() selectedConference = new EventEmitter<HearingSummary>();
 
+    featureFlags = FEATURE_FLAGS;
+
     currentConference: HearingSummary;
 
     get noConferences(): boolean {

diff --git a/...src/app/waiting-space/joh-waiting-room/joh-waiting-room.component.eventhub.events.spec.ts b/...src/app/waiting-space/joh-waiting-room/joh-waiting-room.component.eventhub.events.spec.ts
@@ -52,6 +52,7 @@ describe('JohWaitingRoomComponent eventhub events', () => {
 
     beforeEach(async () => {
         launchDarklyService.getFlag.withArgs(FEATURE_FLAGS.vodafone, false).and.returnValue(of(false));
+        launchDarklyService.getFlag.withArgs(FEATURE_FLAGS.instantMessaging, false).and.returnValue(of(true));
         unloadDetectorServiceSpy = jasmine.createSpyObj<UnloadDetectorService>('UnloadDetectorService', [], ['shouldUnload']);
         shouldUnloadSubject = new Subject<void>();
         getSpiedPropertyGetter(unloadDetectorServiceSpy, 'shouldUnload').and.returnValue(shouldUnloadSubject.asObservable());