Case file view 1.1 - Based from master (#1425)

* EUI-7812 EUI-7819 Case file view upload timestamp display and sort * EUI-7812 EUI-7819 Case file view upload timestamp display and sort * Merge from master * Merge from master * Update after merge from master * Merge from master * Merge from master * Merge from master * Merge from master * Add feature toggle (#1595) * Remove mock data code from CaseFileViewService --------- Co-authored-by: David Rajkumar Jayakumar <[email protected]>
hmcts · Nov 8, 2023 · 14bc451 · 14bc451
1 parent 8759d21
commit 14bc451
Show file tree

Hide file tree

Showing 29 changed files with 809 additions and 508 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,4 +1,9 @@
 ## RELEASE NOTES
+### Version 6.19.11-case-file-view-feature-toggle-v1.1
+**EUI-7807** Case file view v1.1
+
+### Version 6.19.6-case-file-view-document-upload-date-v2
+**EUI-7807** Case file view v1.1
 
 ### Version 6.19.11-rc1
 **EXUI-1000** Complex type not showing data
@@ -14,6 +19,12 @@
 **EUI-8679** Remove JudicialUser FormControl values from the overall FormGroup value stored and passed as search criteria by the `WorkbasketFiltersComponent` when applying filters
 **EUI-8770** Ensure the `WorkbasketFiltersComponent` announces the selected jurisdiction and case type via the `JurisdictionService`; in the `WriteJudicialUserField` component, get the current jurisdiction and case type from the `JurisdictionService` if no case info is present
 
+### Version 6.19.5-secure-doc-case-creation.1
+**EXUI-623** Make secure docstore work during case creation
+
+### Version 6.19.4-sscs-joh-fixes
+**EUI-8679/EUI-8770** Re-tag for formal release. Also includes partial reversion of EXUI-623 (`WriteDocumentFieldComponent` changes) due to deficient unit test coverage
+
 ### Version 6.18.3-hotfix-EUI-8738
 **EUI-8738** Remove JudicialUser FormControls from FormGroup displayed on "Check your answers" page
 
@@ -34,6 +45,12 @@
 **EUI-8515** Fix Case Flags and Linked Cases submissions not to depend on presence of "Check your answers" page
 **EUI-8550** Fix incorrect behaviour of showEventNotes() function on Case Event submission, introduced in error by EUI-6693
 
+### Version 6.13.10-case-file-view-sort-by-document-upload-date-v9
+**EUI-7812** Case file view sort by document upload date
+
+### Version 6.13.10-case-file-view-display-document-upload-date-v3
+**EUI-7819** Case file view display document upload date
+
 ### Version 6.13.10-case-flags-show-language-for-interpreter-flag-types
 **EUI-8069** Fix Case Flags table display to show selected language for "Language Interpreter" flag types
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "6.19.11-rc2",
+  "version": "6.19.11-case-file-view-feature-toggle-v1.1",
   "engines": {
     "yarn": "^3.5.0",
     "npm": "^8.10.0"

diff --git a/projects/ccd-case-ui-toolkit/package.json b/projects/ccd-case-ui-toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "6.19.11-rc2",
+  "version": "6.19.11-case-file-view-feature-toggle-v1.1",
   "engines": {
     "yarn": "^3.5.0",
     "npm": "^8.10.0"

diff --git a/projects/ccd-case-ui-toolkit/src/lib/app-config.mock.ts b/projects/ccd-case-ui-toolkit/src/lib/app-config.mock.ts
@@ -206,4 +206,8 @@ export class AppMockConfig implements AbstractAppConfig {
   public getCaseDataStoreApiUrl(): string {
     return '';
   }
+
+  public getEnableCaseFileViewVersion1_1(): boolean {
+    return true;
+  }
 }
diff --git a/projects/ccd-case-ui-toolkit/src/lib/app.config.ts b/projects/ccd-case-ui-toolkit/src/lib/app.config.ts
@@ -103,6 +103,7 @@ export abstract class AbstractAppConfig {
   public abstract getCaseFlagsRefdataApiUrl(): string;
   public abstract getRDCommonDataApiUrl(): string;
   public abstract getCaseDataStoreApiUrl(): string;
+  public abstract getEnableCaseFileViewVersion1_1(): boolean;
 }
 
 export class CaseEditorConfig {
@@ -171,4 +172,5 @@ export class CaseEditorConfig {
   public case_flags_refdata_api_url: string;
   public rd_common_data_api_url: string;
   public case_data_store_api_url: string;
+  public enable_case_file_view_version_1_1: boolean;
 }
diff --git a/...-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component.spec.ts b/...-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component.spec.ts
@@ -2,18 +2,22 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { AbstractAppConfig } from '../../../../../../../app.config';
 import { CaseFileViewOverlayMenuComponent } from '../../shared';
 import { CaseFileViewFolderSortComponent } from './case-file-view-folder-sort.component';
 
 describe('CaseFileViewFolderSortComponent', () => {
   let component: CaseFileViewFolderSortComponent;
   let fixture: ComponentFixture<CaseFileViewFolderSortComponent>;
   let overlayMenuButtons: DebugElement[];
+  let mockAppConfig: any;
 
   beforeEach(async () => {
+    mockAppConfig = jasmine.createSpyObj<AbstractAppConfig>('AbstractAppConfig', ['getEnableCaseFileViewVersion1_1']);
     await TestBed.configureTestingModule({
       declarations: [ CaseFileViewFolderSortComponent, CaseFileViewOverlayMenuComponent ],
-      imports: [ OverlayModule ]
+      imports: [ OverlayModule ],
+      providers: [{provide: AbstractAppConfig, useValue: mockAppConfig}]
     })
     .compileComponents();
   });
@@ -41,4 +45,18 @@ describe('CaseFileViewFolderSortComponent', () => {
     overlayMenuButtons[1].nativeElement.click();
     expect(component.sortDescending.emit).toHaveBeenCalled();
   });
+
+  it('should have sort by upload date options if feature toggle is on', () => {
+    mockAppConfig.getEnableCaseFileViewVersion1_1.and.returnValue(true);
+    fixture.detectChanges();
+    component.ngOnInit();
+    expect(component.overlayMenuItems.length).toEqual(4);
+  });
+
+  it('should not have sort by upload date options if feature toggle is off', () => {
+    mockAppConfig.getEnableCaseFileViewVersion1_1.and.returnValue(false);
+    fixture.detectChanges();
+    component.ngOnInit();
+    expect(component.overlayMenuItems.length).toEqual(2);
+  });
 });
diff --git a/.../case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component.ts b/.../case-file-view-folder/case-file-view-folder-sort/case-file-view-folder-sort.component.ts
@@ -1,20 +1,34 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { AbstractAppConfig } from '../../../../../../../app.config';
+import { CaseFileViewSortColumns } from '../../../../../../domain/case-file-view/case-file-view-sort-columns.enum';
 import { CaseFileViewOverlayMenuItem } from '../../shared/case-file-view-overlay-menu/case-file-view-overlay-menu-item.model';
 
 @Component({
   selector: 'ccd-case-file-view-folder-sort',
   templateUrl: './case-file-view-folder-sort.component.html',
   styleUrls: ['./case-file-view-folder-sort.component.scss']
 })
-export class CaseFileViewFolderSortComponent {
+export class CaseFileViewFolderSortComponent implements OnInit {
   public isOpen = false;
 
-  @Output() public sortAscending = new EventEmitter<void>();
-  @Output() public sortDescending = new EventEmitter<void>();
+  @Output() public sortAscending = new EventEmitter<number>();
+  @Output() public sortDescending = new EventEmitter<number>();
 
   public overlayMenuItems: CaseFileViewOverlayMenuItem[] = [
-    { actionText: 'A to Z ascending', iconSrc: '/assets/img/sort/sort-down-arrow.svg', actionFn: () => this.sortAscending.emit() },
-    { actionText: 'Z to A descending', iconSrc: '/assets/img/sort/sort-up-arrow.svg', actionFn: () => this.sortDescending.emit() },
+    { actionText: 'A to Z ascending', iconSrc: '/assets/img/sort/sort-down-arrow.svg', actionFn: () => this.sortAscending.emit(CaseFileViewSortColumns.DOCUMENT_NAME) },
+    { actionText: 'Z to A descending', iconSrc: '/assets/img/sort/sort-up-arrow.svg', actionFn: () => this.sortDescending.emit(CaseFileViewSortColumns.DOCUMENT_NAME) },
   ];
-  constructor() { }
+
+  constructor(private readonly appConfig: AbstractAppConfig) { }
+
+  public ngOnInit(): void {
+    if (this.appConfig.getEnableCaseFileViewVersion1_1()) {
+      this.overlayMenuItems = [
+        { actionText: 'A to Z ascending', iconSrc: '/assets/img/sort/sort-down-arrow.svg', actionFn: () => this.sortAscending.emit(CaseFileViewSortColumns.DOCUMENT_NAME) },
+        { actionText: 'Z to A descending', iconSrc: '/assets/img/sort/sort-up-arrow.svg', actionFn: () => this.sortDescending.emit(CaseFileViewSortColumns.DOCUMENT_NAME) },
+        { actionText: 'Recent first', iconSrc: '/assets/img/sort/sort-down-arrow.svg', actionFn: () => this.sortDescending.emit(CaseFileViewSortColumns.DOCUMENT_UPLOAD_TIMESTAMP) },
+        { actionText: 'Oldest first', iconSrc: '/assets/img/sort/sort-up-arrow.svg', actionFn: () => this.sortAscending.emit(CaseFileViewSortColumns.DOCUMENT_UPLOAD_TIMESTAMP) },
+      ];
+    }
+  }
 }
diff --git a/...ette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html b/...ette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.html
@@ -13,8 +13,8 @@
   <div class="document-folders-header__title">Documents ({{ documentCount }})</div>
   <div>
     <ccd-case-file-view-folder-sort
-      (sortAscending)="sortDataSourceAscAlphabetically()"
-      (sortDescending)="sortDataSourceDescAlphabetically()"
+      (sortAscending)="sortDataSourceAscending($event)"
+      (sortDescending)="sortDataSourceDescending($event)"
     ></ccd-case-file-view-folder-sort>
   </div>
 </div>
@@ -32,7 +32,11 @@
           <div class="node__icon" disabled>
             <img src="/assets/img/case-file-view/case-file-view-document.svg" class="node__iconImg" alt="Document icon">
           </div>
-          <span class="node__name node-name-document">{{node.name}}</span>
+          <span class="node__name node-name-document">
+            {{node.name}}
+            <br>
+            <span class="node__document-upload-timestamp">{{node.upload_timestamp}}</span>
+          </span>
           <div class="node__document-options">
             <ccd-case-file-view-folder-document-actions
               (changeFolderAction)="triggerDocumentAction('changeFolder', node)"

diff --git a/...ette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.scss b/...ette/case-file-view/components/case-file-view-folder/case-file-view-folder.component.scss
@@ -106,7 +106,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 6px;
+  padding: 10px;
   background: none;
   border: 0;
   cursor: pointer;
@@ -154,4 +154,10 @@
     margin-left: auto;
     margin-right: 0;
   }
+
+  &__document-upload-timestamp {
+    font-size: 0.8rem;
+    float: left;
+    padding-left: 10px;
+  }
 }
diff --git a/...e/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts b/...e/case-file-view/components/case-file-view-folder/case-file-view-folder.component.spec.ts
@@ -6,7 +6,8 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { plainToClass } from 'class-transformer';
 import { of } from 'rxjs';
-import { DocumentTreeNode, DocumentTreeNodeType } from '../../../../../domain/case-file-view';
+import { AbstractAppConfig } from '../../../../../../app.config';
+import { CaseFileViewSortColumns, DocumentTreeNode, DocumentTreeNodeType } from '../../../../../domain/case-file-view';
 import { DocumentManagementService, WindowService } from '../../../../../services';
 import { mockDocumentManagementService } from '../../../../../services/document-management/document-management.service.mock';
 import { categoriesAndDocumentsTestData } from '../../test-data/categories-and-documents-test-data';
@@ -24,10 +25,39 @@ describe('CaseFileViewFolderComponent', () => {
   let component: CaseFileViewFolderComponent;
   let fixture: ComponentFixture<CaseFileViewFolderComponent>;
   let nativeElement: any;
+  let mockAppConfig: any;
+
+  const documentsTreeNodes: DocumentTreeNode[] = plainToClass(DocumentTreeNode, [
+    {
+      name: 'Lager encyclopedia',
+      type: DocumentTreeNodeType.DOCUMENT,
+      document_filename: 'Lager encyclopedia',
+      document_binary_url: '/test/binary',
+      attribute_path: '',
+      upload_timestamp: '11 May 2023'
+    },
+    {
+      name: 'Beers encyclopedia',
+      type: DocumentTreeNodeType.DOCUMENT,
+      document_filename: 'Beers encyclopedia',
+      document_binary_url: '/test/binary',
+      attribute_path: '',
+      upload_timestamp: '14 Apr 2023'
+    },
+    {
+      name: 'Ale encyclopedia',
+      type: DocumentTreeNodeType.DOCUMENT,
+      document_filename: 'Ale encyclopedia',
+      document_binary_url: '/test/binary',
+      attribute_path: '',
+      upload_timestamp: '12 Mar 2023'
+    }
+  ]);
 
   beforeEach(waitForAsync(() => {
     const mockWindowService = createSpyObj<WindowService>('WindowService', ['setLocalStorage', 'openOnNewTab']);
-
+    mockAppConfig = jasmine.createSpyObj<AbstractAppConfig>('AbstractAppConfig', ['getEnableCaseFileViewVersion1_1']);
+    mockAppConfig.getEnableCaseFileViewVersion1_1.and.returnValue(true);
     TestBed.configureTestingModule({
       imports: [
         CdkTreeModule,
@@ -40,7 +70,8 @@ describe('CaseFileViewFolderComponent', () => {
       ],
       providers: [
         { provide: WindowService, useValue: mockWindowService },
-        { provide: DocumentManagementService, useValue: mockDocumentManagementService }
+        { provide: DocumentManagementService, useValue: mockDocumentManagementService },
+        { provide: AbstractAppConfig, useValue: mockAppConfig }
       ]
     })
     .compileComponents();
@@ -69,44 +100,34 @@ describe('CaseFileViewFolderComponent', () => {
     expect(component.generateTreeData(categoriesAndDocumentsTestData.categories)).toEqual(categorisedTreeData);
   });
 
-  it('should get documents from category', () => {
+  it('should get documents from category with upload timestamp when feature toggle is on', () => {
     const documents = categoriesAndDocumentsTestData.categories[0].documents;
-    const documentsTreeNodes: DocumentTreeNode[] = plainToClass(DocumentTreeNode, [
-      {
-        name: 'Lager encyclopedia',
-        type: DocumentTreeNodeType.DOCUMENT,
-        document_filename: 'Lager encyclopedia',
-        document_binary_url: '/test/binary',
-        attribute_path: ''
-      },
-      {
-        name: 'Beers encyclopedia',
-        type: DocumentTreeNodeType.DOCUMENT,
-        document_filename: 'Beers encyclopedia',
-        document_binary_url: '/test/binary',
-        attribute_path: ''
-      },
-      {
-        name: 'Ale encyclopedia',
-        type: DocumentTreeNodeType.DOCUMENT,
-        document_filename: 'Ale encyclopedia',
-        document_binary_url: '/test/binary',
-        attribute_path: ''
-      }
-    ]);
-
+    fixture.detectChanges();
     expect(component.getDocuments(documents)).toEqual(documentsTreeNodes);
   });
 
   it('should get uncategorised documents', () => {
     expect(component.getUncategorisedDocuments(categoriesAndDocumentsTestData.uncategorised_documents)).toEqual(uncategorisedTreeData);
   });
 
-  it('should render cdk nested tree', () => {
+  it('should render cdk nested tree and verify the timestamp values', () => {
     component.nestedDataSource = treeData;
     fixture.detectChanges();
     const documentTreeContainerEl = nativeElement.querySelector('.document-tree-container');
     expect(documentTreeContainerEl).toBeDefined();
+    const timestampElements = nativeElement.querySelectorAll('.node__document-upload-timestamp');
+    expect(timestampElements[0].textContent).toEqual('11 May 2023');
+    expect(timestampElements[1].textContent).toEqual('14 Apr 2023');
+    expect(timestampElements[2].textContent).toEqual('12 Mar 2023');
+    expect(timestampElements[3].textContent).toEqual('');
+    expect(timestampElements[4].textContent).toEqual('10 Feb 2023');
+    expect(timestampElements[5].textContent).toEqual('12 Apr 2023');
+    expect(timestampElements[6].textContent).toEqual('16 Mar 2023');
+    expect(timestampElements[7].textContent).toEqual('21 Jun 2022');
+    expect(timestampElements[8].textContent).toEqual('04 Nov 2022');
+    expect(timestampElements[9].textContent).toEqual('28 Dec 2022');
+    expect(timestampElements[10].textContent).toEqual('17 Nov 2022');
+    expect(timestampElements[11].textContent).toEqual('23 Feb 2023');
   });
 
   it('should call sortChildrenAscending on all children of nestedDataSource when calling sortDataSourceAscAlphabetically', () => {
@@ -115,7 +136,7 @@ describe('CaseFileViewFolderComponent', () => {
       sortChildrenAscendingSpies.push(spyOn(item,'sortChildrenAscending').and.callThrough());
     });
 
-    component.sortDataSourceAscAlphabetically();
+    component.sortDataSourceAscending(CaseFileViewSortColumns.DOCUMENT_NAME);
     fixture.detectChanges();
 
     sortChildrenAscendingSpies.forEach((item) => {
@@ -130,7 +151,7 @@ describe('CaseFileViewFolderComponent', () => {
     component.nestedDataSource.forEach((item) => {
       sortChildrenDescendingSpies.push(spyOn(item,'sortChildrenDescending').and.callThrough());
     });
-    component.sortDataSourceDescAlphabetically();
+    component.sortDataSourceDescending(CaseFileViewSortColumns.DOCUMENT_NAME);
     fixture.detectChanges();
 
     sortChildrenDescendingSpies.forEach((item) => {
@@ -303,7 +324,7 @@ describe('CaseFileViewFolderComponent', () => {
   });
 
   it('should get all document count as get documentCount', () => {
-    expect(component.documentCount).toEqual(8);
+    expect(component.documentCount).toEqual(12);
   });
 
   it('should emit clickedDocument when clicking a node that is of type document', () => {
@@ -372,4 +393,19 @@ describe('CaseFileViewFolderComponent', () => {
     expect(fakeAnchorElement.click).toHaveBeenCalled();
     expect(fakeAnchorElement.remove).toHaveBeenCalled();
   });
+
+  it('should get documents from category without upload timestamp when feature toggle is off', () => {
+    const documents = categoriesAndDocumentsTestData.categories[0].documents;
+    mockAppConfig.getEnableCaseFileViewVersion1_1.and.returnValue(false);
+    fixture.detectChanges();
+    documentsTreeNodes.forEach((n) => n.upload_timestamp = '');
+    expect(component.getDocuments(documents)).toEqual(documentsTreeNodes);
+  });
+
+  it('should get uncategorised documents', () => {
+    mockAppConfig.getEnableCaseFileViewVersion1_1.and.returnValue(false);
+    fixture.detectChanges();
+    uncategorisedTreeData.children.forEach((c) => c.upload_timestamp = '');
+    expect(component.getUncategorisedDocuments(categoriesAndDocumentsTestData.uncategorised_documents)).toEqual(uncategorisedTreeData);
+  });
 });