fix readonly attach file scenarios (#5365)

lib/core/i18n/en.json

@@ -26,6 +26,7 @@
       "REMOVE_FILE": "Remove",
       "UPLOAD": "UPLOAD",
       "REQUIRED": "*Required",
+      "NO_FILE_ATTACHED" : "No file attached",
       "VALIDATOR": {
         "INVALID_NUMBER": "Use a different number format",
         "INVALID_DATE": "Use a different date format",

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html

@@ -28,7 +28,8 @@
                             (click)="uploadFileFromCS()">
                         {{field.params?.fileSource?.name}}
                         <mat-icon>
-                                <img alt="alfresco" class="adf-attach-widget__image-logo" src="../assets/images/alfresco-flower.svg">
+                            <img alt="alfresco" class="adf-attach-widget__image-logo"
+                                 src="../assets/images/alfresco-flower.svg">
                         </mat-icon>
                     </button>
                 </div>
@@ -71,6 +72,10 @@
             </mat-menu>
         </mat-list-item>
     </mat-list>
+    <div *ngIf="!hasFile && field.readOnly" id="{{'adf-attach-empty-list-'+field.id}}">
+        {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}
+    </div>
+
 </div>
 
 <error-widget [error]="field.validationSummary"></error-widget>

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts

@@ -234,6 +234,56 @@ describe('AttachFileCloudWidgetComponent', () => {
         });
     }));
 
+    describe('when is readonly', () => {
+
+        it('should show empty list message when there are no file', async(() => {
+            widget.field = new FormFieldModel(new FormModel(), {
+                type: FormFieldTypes.UPLOAD,
+                readOnly: true,
+                value: []
+            });
+            widget.field.id = 'empty-test';
+            widget.field.params = <FormFieldMetadata> onlyLocalParams;
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#adf-attach-empty-list-empty-test')).not.toBeNull();
+            });
+        }));
+
+        it('should not show empty list message when there are files', async(() => {
+            widget.field = new FormFieldModel(new FormModel(), {
+                type: FormFieldTypes.UPLOAD,
+                readOnly: true,
+                value: [fakePngAnswer]
+            });
+            widget.field.id = 'fill-test';
+            widget.field.params = <FormFieldMetadata> onlyLocalParams;
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#adf-attach-empty-list-fill-test')).toBeNull();
+            });
+        }));
+
+        it('should not show remove button when there are files attached', async(() => {
+            widget.field = new FormFieldModel(new FormModel(), {
+                type: FormFieldTypes.UPLOAD,
+                readOnly: true,
+                value: [fakePngAnswer]
+            });
+            widget.field.id = 'fill-test';
+            widget.field.params = <FormFieldMetadata> onlyLocalParams;
+
+            fixture.detectChanges();
+            const menuButton: HTMLButtonElement = <HTMLButtonElement> (
+                fixture.debugElement.query(By.css('#file-1155-option-menu'))
+                    .nativeElement
+            );
+            menuButton.click();
+            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('#file-1155-remove'))).toBeNull();
+        }));
+    });
+
     describe('when a file is uploaded', () => {
         beforeEach(async(() => {
             widget.field = new FormFieldModel(new FormModel(), {

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html

@@ -34,6 +34,11 @@
                        (change)="onFileChanged($event)"/>
             </button>
         </div>
+
+        <div *ngIf="!hasFile && field.readOnly">
+            {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}
+        </div>
+
     </div>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>