[ADF-3372] Added toggle and global configuration to display metadata (#3636)

* [ADF-3372] Added toggle and global configuration to display metadata

* [ADF-3372] Fixed typo in shcema.json

* [ADF-3372] Removed unnecessary variables and variable name changed

* [ADF-3372] Fixed unit test

* [ADF-3372] Improved logic

* [ADF-3372] Improved Metadata component html logic

* [ADF-3372] Demoshell variable from app.config.json removed

* [ADF-3372] fixed bugs and tests

* [ADF-3372] fixed some error in tests

* [ADF-3372] fixed some wrong compilation in test

* [ADF-3372] fixed wrong locator

* [ADF-3372] fixed randomly failing tests

lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.html

@@ -1,10 +1,11 @@
 <mat-card *ngIf="node">
     <mat-card-content>
         <adf-content-metadata
+            [displayDefaultProperties]="displayDefaultProperties"
+            [expanded]="expanded"
             [node]="node"
             [displayEmpty]="displayEmpty"
             [editable]="editable"
-            [expanded]="expanded"
             [multi]="multi"
             [preset]="preset">
         </adf-content-metadata>
@@ -19,7 +20,7 @@
                 <mat-icon>mode_edit</mat-icon>
             </button>
         </div>
-        <button mat-button (click)="toggleExpanded()" data-automation-id="meta-data-card-toggle-expand">
+        <button *ngIf="displayDefaultProperties" mat-button (click)="toggleExpanded()" data-automation-id="meta-data-card-toggle-expand">
             <ng-container *ngIf="!expanded">
                 <span data-automation-id="meta-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION' | translate }}</span>
                 <mat-icon>keyboard_arrow_down</mat-icon>

lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts

@@ -15,8 +15,6 @@
  * limitations under the License.
  */
 
-/*tslint:disable: ban*/
-
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@@ -62,6 +60,16 @@ describe('ContentMetadataCardComponent', () => {
         expect(component.displayEmpty).toBe(false);
     });
 
+    it('should show more information when no metadata properties are being displayed', () => {
+        component.displayDefaultProperties = false;
+        expect(component.expanded).toBe(!component.displayDefaultProperties);
+    });
+
+    it('should show less information when metadata properties are being displayed', () => {
+        component.displayDefaultProperties = true;
+        expect(component.expanded).toBe(!component.displayDefaultProperties);
+    });
+
     it('should pass through the node to the underlying component', () => {
         const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;
 

lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts

@@ -27,27 +27,60 @@ import { ContentService, PermissionsEnum } from '@alfresco/adf-core';
     host: { 'class': 'adf-content-metadata-card' }
 })
 export class ContentMetadataCardComponent {
+    /** (required) The node entity to fetch metadata about */
     @Input()
     node: MinimalNodeEntryEntity;
 
+    /** (optional) This flag displays/hides empty metadata
+     * fields.
+     */
     @Input()
     displayEmpty: boolean = false;
 
+    /** (required) Name of the metadata preset, which defines aspects
+     * and their properties.
+     */
     @Input()
     preset: string;
 
+    /** (optional) This flag sets the metadata in read only mode
+     * preventing changes.
+     */
     @Input()
     readOnly = false;
 
+    /** (optional) This flag allows the component to display more
+     * than one accordion at a time.
+     */
     @Input()
     multi = false;
 
+    private _displayDefaultProperties: boolean = true;
+
+    /** (optional) This flag displays/hides the metadata
+     * properties.
+     */
+    @Input()
+    set displayDefaultProperties(value: boolean) {
+        this._displayDefaultProperties = value;
+        this.onDisplayDefaultPropertiesChange();
+    }
+
+    get displayDefaultProperties(): boolean {
+        return this._displayDefaultProperties;
+    }
+
     editable: boolean = false;
-    expanded: boolean = false;
+
+    expanded: boolean;
 
     constructor(private contentService: ContentService) {
     }
 
+    onDisplayDefaultPropertiesChange(): void {
+        this.expanded = !this._displayDefaultProperties;
+    }
+
     toggleEdit(): void {
         this.editable = !this.editable;
     }

lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html

@@ -1,6 +1,10 @@
 <div class="adf-metadata-properties">
     <mat-accordion displayMode="flat" [multi]="multi">
-        <mat-expansion-panel [expanded]="!expanded" [hideToggle]="!expanded" [attr.data-automation-id]="'adf-metadata-group-properties'" >
+        <mat-expansion-panel
+            *ngIf="displayDefaultProperties"
+            [expanded]="!expanded"
+            [hideToggle]="!expanded"
+            [attr.data-automation-id]="'adf-metadata-group-properties'" >
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
@@ -16,8 +20,10 @@
 
         <ng-container *ngIf="expanded">
             <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
-                <div *ngFor="let group of groupedProperties" class="adf-metadata-grouped-properties-container">
-                    <mat-expansion-panel [attr.data-automation-id]="'adf-metadata-group-' + group.title" >
+                <div *ngFor="let group of groupedProperties; let first = first;" class="adf-metadata-grouped-properties-container">
+                    <mat-expansion-panel
+                    [attr.data-automation-id]="'adf-metadata-group-' + group.title"
+                    [expanded]="!displayDefaultProperties && first">
                         <mat-expansion-panel-header>
                             <mat-panel-title>
                                 {{ group.title | translate }}
@@ -30,6 +36,7 @@
                             [displayEmpty]="displayEmpty">
                         </adf-card-view>
                     </mat-expansion-panel>
+
                 </div>
             </ng-container>
             <ng-template #loading>

lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -15,8 +15,6 @@
  * limitations under the License.
  */
 
-/*tslint:disable: ban*/
-
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -233,4 +231,26 @@ describe('ContentMetadataComponent', () => {
             });
         }));
     });
+
+    describe('Properties displaying', () => {
+        it('should hide metadata fields if displayDefaultProperties is set to false', () => {
+            component.displayDefaultProperties = false;
+            fixture.detectChanges();
+            const metadataContainer = fixture.debugElement.query(By.css('mat-expansion-panel[data-automation-id="adf-metadata-group-properties"]'));
+            fixture.detectChanges();
+            expect(metadataContainer).toBeNull();
+        });
+
+        it('should display metadata fields if displayDefaultProperties is set to true', () => {
+            component.displayDefaultProperties = true;
+            fixture.detectChanges();
+            const metadataContainer = fixture.debugElement.query(By.css('mat-expansion-panel[data-automation-id="adf-metadata-group-properties"]'));
+            fixture.detectChanges();
+            expect(metadataContainer).toBeDefined();
+        });
+
+        it('should have displayDefaultProperties input param as true by default', () => {
+            expect(component.displayDefaultProperties).toBe(true);
+        });
+    });
 });

lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -57,6 +57,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     preset: string;
 
+    /** Toggles whether the metadata properties should be shown */
+    @Input()
+    displayDefaultProperties: boolean = true;
+
     basicProperties$: Observable<CardViewItem[]>;
     groupedProperties$: Observable<CardViewGroup[]>;
     disposableNodeUpdate: Subscription;