Merge pull request #1956 from hmcts/exui-3199-upload-file-issue

exui-3199-drag-drop-file-upload-issue

Author: Josh-HMCTS

RELEASE-NOTES.md

@@ -1,5 +1,8 @@
 ## RELEASE NOTES
 
+### Version 7.2.9
+**EXUI-3199** drag-drop-file-upload-issue
+
 ### Version 7.2.8
 **EXUI-3186** Task Completion Message appears after page refresh for responded query but is no longer valid
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.8",
+  "version": "7.2.9",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.8",
+  "version": "7.2.9",
   "engines": {
     "node": ">=18.19.0"
   },

projects/ccd-case-ui-toolkit/src/karma.conf.js

@@ -43,14 +43,10 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['ChromeHeadless'],
     customLaunchers: {
-      ChromeHeadless: {
-        base: 'Chrome',
-        flags: [
-          '--headless',
-          '--disable-gpu',
-          '--no-sandbox',
-        ],
-      },
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
     },
     singleRun: true,
     restartOnFileChange: true

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/base-field/field-write.component.scss

@@ -1,15 +1 @@
-.input-upload-file {
-  width: 100%;
-  display: none;
-}
-
-.upload-file-container {
-  display: flex;
-  align-items: baseline;
-}
-
-.input-label {
-  width: 8rem;
-}
-
 @import "../base-field/grey-bar.scss";

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/document/write-document-field.component.spec.ts

@@ -20,7 +20,6 @@ import { WriteDocumentFieldComponent } from './write-document-field.component';
 import createSpyObj = jasmine.createSpyObj;
 import any = jasmine.any;
 import { HttpErrorResponse } from '@angular/common/http';
-import { RpxTranslationService } from 'rpx-xui-translation';
 
 const FIELD_TYPE: FieldType = {
   id: 'Document',
@@ -164,10 +163,6 @@ describe('WriteDocumentFieldComponent', () => {
           { provide: JurisdictionService, useValue: jurisdictionService },
           { provide: EventTriggerService, useValue: eventTriggerService },
           { provide: CaseNotifier, useValue: caseNotifier },
-          {
-            provide: RpxTranslationService, useValue: createSpyObj('RpxTranslationService',
-              ['getTranslation$', 'translate'])
-          },
           DocumentDialogComponent
         ]
       })
@@ -287,7 +282,6 @@ describe('WriteDocumentFieldComponent', () => {
       }
     });
 
-    expect(component.fileName).toBe('test.pdf')
     expect(component.caseField.value.document_filename).toBe('test.pdf');
   });
 
@@ -615,7 +609,6 @@ describe('WriteDocumentFieldComponent with Mandatory casefield', () => {
   let casesService: any;
   const jurisdictionService: any = {};
   const eventTriggerService: any = {};
-  let rpxTranslationService: jasmine.SpyObj<RpxTranslationService>;
 
   beforeEach(waitForAsync(() => {
 
@@ -656,10 +649,6 @@ describe('WriteDocumentFieldComponent with Mandatory casefield', () => {
           { provide: CasesService, useValue: casesService },
           { provide: JurisdictionService, useValue: jurisdictionService },
           { provide: EventTriggerService, useValue: eventTriggerService },
-          {
-            provide: RpxTranslationService, useValue: createSpyObj('RpxTranslationService',
-              ['getTranslation$', 'translate'])
-          },
           DocumentDialogComponent,
           CaseNotifier
         ]

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/document/write-document-field.component.ts

@@ -15,12 +15,10 @@ import { DocumentDialogComponent } from '../../dialogs/document-dialog/document-
 import { initDialog } from '../../helpers/init-dialog-helper';
 import { AbstractFieldWriteComponent } from '../base-field/abstract-field-write.component';
 import { FileUploadStateService } from './file-upload-state.service';
-import { RpxTranslationService } from 'rpx-xui-translation';
 
 @Component({
   selector: 'ccd-write-document-field',
-  templateUrl: './write-document-field.html',
-  styleUrls: ['./../base-field/field-write.component.scss']
+  templateUrl: './write-document-field.html'
 })
 export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent implements OnInit, OnDestroy {
   public static readonly DOCUMENT_URL = 'document_url';
@@ -33,7 +31,6 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
   public static readonly UPLOAD_ERROR_INVALID_FORMAT = 'Document format is not supported';
   public static readonly UPLOAD_WAITING_FILE_STATUS = 'Uploading...';
   public static readonly ERROR_UPLOADING_FILE = 'Error Uploading File';
-  public static readonly NO_FILE_CHOSED = 'No file chosen';
 
   @ViewChild('fileInput', { static: false }) public fileInput: ElementRef;
 
@@ -48,7 +45,6 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
   public dialogSubscription: Subscription;
   public caseNotifierSubscription: Subscription;
   public jurisdictionSubs: Subscription;
-  public fileName = WriteDocumentFieldComponent.NO_FILE_CHOSED;
 
   private uploadedDocument: FormGroup;
   private dialogConfig: MatDialogConfig;
@@ -64,18 +60,12 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
     public dialog: MatDialog,
     private readonly fileUploadStateService: FileUploadStateService,
     private readonly jurisdictionService: JurisdictionService,
-    private readonly rpxTranslationService : RpxTranslationService
   ) {
     super();
   }
 
   public ngOnInit(): void {
     this.secureModeOn = this.appConfig.getDocumentSecureMode();
-    if (this.rpxTranslationService.language === 'cy'){
-      this.rpxTranslationService.getTranslation$(WriteDocumentFieldComponent.NO_FILE_CHOSED).subscribe((translation) => {
-        this.fileName = translation;
-      });
-    }
     if (this.secureModeOn) {
       this.subscribeToCaseDetails();
     }
@@ -138,7 +128,6 @@ export class WriteDocumentFieldComponent extends AbstractFieldWriteComponent imp
       this.invalidFileFormat();
     } else if (fileInput.target.files[0]) {
       this.selectedFile = fileInput.target.files[0];
-      this.fileName = fileInput.target.files[0].name;
       this.displayFileUploadMessages(WriteDocumentFieldComponent.UPLOAD_WAITING_FILE_STATUS);
       const documentUpload: FormData = this.buildDocumentUploadData(this.selectedFile);
       this.fileUploadStateService.setUploadInProgress(true);

projects/ccd-case-ui-toolkit/src/lib/shared/components/palette/document/write-document-field.html

@@ -16,40 +16,12 @@
     <ccd-read-document-field *ngIf="caseField" [caseField]="caseField"></ccd-read-document-field>
   </div>
 
-  <div style="position:relative">
-    <div
-      [id]="createElementId('fileInputWrapper')"
-      (click)="fileSelectEvent()"
-      (keyup)="fileSelectEvent()"
-    ></div>
-    <div class="upload-file-container">
-      <label
-        [for]="id()"
-        class="button button-secondary input-label"
-        aria-label="Choose file">
-        {{'Choose file' | rpxTranslate}}
-      </label>
-      <span class="form-control bottom-30">
-        <span>{{fileName}}</span>
-      </span>
-    </div>
-    <input
-      [id]="id()"
-      type="file"
-      class="input-upload-file"
-      (keydown.Tab)="fileValidationsOnTab()"
-      (change)="fileChangeEvent($event, caseField.field_type.regular_expression)"
-      accept="{{caseField.field_type.regular_expression}}"
-      #fileInput/>
+  <div style='position:relative'>
+    <div [id]="createElementId('fileInputWrapper')" (click)="fileSelectEvent()" (keyup)="fileSelectEvent()"></div>
+    <input class="form-control bottom-30" [id]="id()" type="file" (keydown.Tab)="fileValidationsOnTab()" (change)="fileChangeEvent($event, caseField.field_type.regular_expression)"
+           accept="{{caseField.field_type.regular_expression}}" #fileInput/>
   </div>
 </div>
 <div class="form-group bottom-30">
-  <button
-    class="button button-secondary"
-    type="button"
-    aria-label="Cancel upload"
-    (click)="cancelUpload()"
-    [disabled]="!isUploadInProgress()">
-    {{'Cancel upload' | rpxTranslate}}
-  </button>
+  <button class="button button-secondary" type="button" aria-label="Cancel upload" (click)="cancelUpload()" [disabled]="!isUploadInProgress()">{{'Cancel upload' | rpxTranslate}}</button>
 </div>