Restore hierarchical tree original behaviour

src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html

@@ -7,8 +7,10 @@ <h1 *ngIf="displayTitle">
   } }}
   </h1>
   <div class="mb-3">
-    <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
+    <ds-vocabulary-treeview [description]="description"
+                            [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"
+                            [showAdd]="false"
                             (select)="onSelect($event)"
                             (deselect)="onDeselect($event)">
     </ds-vocabulary-treeview>

src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts

@@ -14,7 +14,10 @@ import {
   Params,
   RouterLink,
 } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import {
   BehaviorSubject,
   Observable,
@@ -124,13 +127,19 @@ export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
    */
   browseDefinition$: Observable<BrowseDefinition>;
 
+  /**
+   * Browse description
+   */
+  description: string;
+
   /**
    * Subscriptions to track
    */
   subs: Subscription[] = [];
 
   public constructor(
     protected route: ActivatedRoute,
+    protected translate: TranslateService,
   ) {
   }
 
@@ -141,9 +150,11 @@ export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
       }),
     );
     this.subs.push(this.browseDefinition$.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
+      this.selectedItems = [];
       this.facetType = browseDefinition.facetType;
       this.vocabularyName = browseDefinition.vocabulary;
       this.vocabularyOptions = { name: this.vocabularyName, closed: true };
+      this.description = this.translate.instant(`browse.metadata.${this.vocabularyName}.tree.descrption`);
     }));
     this.subs.push(this.scope$.subscribe(() => {
       this.updateQueryParams();

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts

@@ -293,7 +293,7 @@ export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent imple
       const modalRef: NgbModalRef = this.modalService.open(VocabularyTreeviewModalComponent, { size: 'lg', windowClass: 'treeview' });
       modalRef.componentInstance.vocabularyOptions = this.model.vocabularyOptions;
       modalRef.componentInstance.preloadLevel = preloadLevel;
-      modalRef.componentInstance.selectedItems = this.currentValue ? [this.currentValue.value] : [];
+      modalRef.componentInstance.selectedItems = this.currentValue ? [this.currentValue] : [];
       modalRef.result.then((result: VocabularyEntryDetail) => {
         if (result) {
           this.currentValue = result;

src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html

@@ -7,9 +7,11 @@ <h4 class="modal-title">{{'vocabulary-treeview.header' | translate}}</h4>
 <div class="modal-body">
   <div class="p-3">
     <ds-vocabulary-treeview [vocabularyOptions]="vocabularyOptions"
+                            [description]="description"
                             [preloadLevel]="preloadLevel"
                             [selectedItems]="selectedItems"
                             [multiSelect]="multiSelect"
+                            [showAdd]="showAdd"
                             (select)="onSelect($event)">
     </ds-vocabulary-treeview>
   </div>

src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.spec.ts

@@ -5,6 +5,7 @@ import {
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyTreeviewComponent } from '../vocabulary-treeview/vocabulary-treeview.component';
 import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal.component';
 
@@ -13,6 +14,7 @@ describe('VocabularyTreeviewModalComponent', () => {
   let fixture: ComponentFixture<VocabularyTreeviewModalComponent>;
 
   const modalStub = jasmine.createSpyObj('modalStub', ['close']);
+  const vocabularyOptions = new VocabularyOptions('vocabularyTest', false);
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -32,10 +34,16 @@ describe('VocabularyTreeviewModalComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(VocabularyTreeviewModalComponent);
     component = fixture.componentInstance;
+    component.vocabularyOptions = vocabularyOptions;
+    spyOn(component as any, 'setDescription').and.callThrough();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should init descrption message', () => {
+    expect((component as any).setDescription).toHaveBeenCalled();
+  });
 });

src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.ts

@@ -2,10 +2,14 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnInit,
   Output,
 } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
@@ -24,7 +28,7 @@ import { VocabularyTreeviewComponent } from '../vocabulary-treeview/vocabulary-t
 /**
  * Component that contains a modal to display a VocabularyTreeviewComponent
  */
-export class VocabularyTreeviewModalComponent {
+export class VocabularyTreeviewModalComponent implements OnInit {
 
   /**
    * The {@link VocabularyOptions} object
@@ -39,13 +43,23 @@ export class VocabularyTreeviewModalComponent {
   /**
    * The vocabulary entries already selected, if any
    */
-  @Input() selectedItems: string[] = [];
+  @Input() selectedItems: VocabularyEntryDetail[] = [];
 
   /**
    * Whether to allow selecting multiple values with checkboxes
    */
   @Input() multiSelect = false;
 
+  /**
+   * A boolean representing if to show the add button or not
+   */
+  @Input() showAdd = true;
+
+  /**
+   * Contain a descriptive message for this vocabulary retrieved from i18n files
+   */
+  description: string;
+
   /**
    * An event fired when a vocabulary entry is selected.
    * Event's payload equals to {@link VocabularyEntryDetail} selected.
@@ -56,16 +70,31 @@ export class VocabularyTreeviewModalComponent {
    * Initialize instance variables
    *
    * @param {NgbActiveModal} activeModal
+   * @param {TranslateService} translate
    */
   constructor(
     public activeModal: NgbActiveModal,
+    protected translate: TranslateService,
   ) { }
 
+  ngOnInit(): void {
+    this.setDescription();
+  }
+
   /**
    * Method called on entry select
    */
   onSelect(item: VocabularyEntryDetail) {
     this.select.emit(item);
     this.activeModal.close(item);
   }
+
+  /**
+   * Set the description message related to the given vocabulary
+   */
+  private setDescription() {
+    const descriptionLabel = 'vocabulary-treeview.tree.description.' + this.vocabularyOptions.name;
+    this.description = this.translate.instant(descriptionLabel);
+  }
+
 }

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -1,4 +1,4 @@
-<ds-alert [content]="'vocabulary-treeview.info' | translate" [type]="AlertType.Info"></ds-alert>
+<ds-alert *ngIf="description" [content]="description" [type]="AlertType.Info"></ds-alert>
 <div class="treeview-header row mb-1">
   <div class="col-12">
     <div class="input-group">
@@ -11,7 +11,7 @@
         <button class="btn btn-outline-secondary" type="button" (click)="reset()">
           {{'vocabulary-treeview.search.form.reset' | translate}}
         </button>
-        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">
+        <button *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()">
           {{'vocabulary-treeview.search.form.add' | translate}}
         </button>
         <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts

@@ -13,14 +13,9 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { StoreModule } from '@ngrx/store';
-import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 
-import { storeModuleConfig } from '../../../app.reducer';
-import { authReducer } from '../../../core/auth/auth.reducer';
-import { AuthTokenInfo } from '../../../core/auth/models/auth-token-info.model';
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { VocabularyEntry } from '../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
@@ -40,7 +35,6 @@ describe('VocabularyTreeviewComponent test suite', () => {
   let comp: VocabularyTreeviewComponent;
   let compAsAny: any;
   let fixture: ComponentFixture<VocabularyTreeviewComponent>;
-  let initialState;
   let de;
 
   const item = new VocabularyEntryDetail();
@@ -71,25 +65,10 @@ describe('VocabularyTreeviewComponent test suite', () => {
     clearSearchTopRequests: jasmine.createSpy('clearSearchTopRequests'),
   });
 
-  initialState = {
-    core: {
-      auth: {
-        authenticated: true,
-        loaded: true,
-        blocking: false,
-        loading: false,
-        authToken: new AuthTokenInfo('test_token'),
-        userId: 'testid',
-        authMethods: [],
-      },
-    },
-  };
-
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         CdkTreeModule,
-        StoreModule.forRoot({ auth: authReducer }, storeModuleConfig),
         TranslateModule.forRoot(),
         VocabularyTreeviewComponent,
         TestComponent,
@@ -99,7 +78,6 @@ describe('VocabularyTreeviewComponent test suite', () => {
         { provide: VocabularyTreeviewService, useValue: vocabularyTreeviewServiceStub },
         { provide: VocabularyService, useValue: vocabularyServiceStub },
         { provide: NgbActiveModal, useValue: modalStub },
-        provideMockStore({ initialState }),
         ChangeDetectorRef,
         VocabularyTreeviewComponent,
       ],
@@ -155,10 +133,10 @@ describe('VocabularyTreeviewComponent test suite', () => {
       currentValue.otherInformation = {
         id: 'entryID',
       };
-      comp.selectedItems = [currentValue.value];
+      comp.selectedItems = [currentValue];
       fixture.detectChanges();
       expect(comp.dataSource.data).toEqual([]);
-      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['testValue'], null);
+      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['entryID'], 'entryID');
     });
 
     it('should should init component properly with init value as VocabularyEntry', () => {
@@ -167,10 +145,20 @@ describe('VocabularyTreeviewComponent test suite', () => {
       currentValue.otherInformation = {
         id: 'entryID',
       };
-      comp.selectedItems = [currentValue.value];
+      comp.selectedItems = [currentValue];
+      fixture.detectChanges();
+      expect(comp.dataSource.data).toEqual([]);
+      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['entryID'], 'entryID');
+    });
+
+    it('should should init component properly with init value as VocabularyEntryDetail', () => {
+      const currentValue = new VocabularyEntryDetail();
+      currentValue.value = 'testValue';
+      currentValue.id = 'entryID';
+      comp.selectedItems = [currentValue];
       fixture.detectChanges();
       expect(comp.dataSource.data).toEqual([]);
-      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['testValue'], null);
+      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['entryID'], 'entryID');
     });
 
     it('should call loadMore function', () => {