[ADF-5062] Content Node Selector - show inputs based on configuration (#5368)

* toggle search and dropdown list by configuration

* update docs

* tests

* fix inputs setter

* rename

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html

@@ -1,5 +1,5 @@
 <div class="adf-content-node-selector-content" (node-select)="onNodeSelect($event)">
-    <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
+    <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input" *ngIf="showSearch">
         <input matInput
             id="searchInput"
             [formControl]="searchInput"
@@ -23,6 +23,7 @@
     </mat-form-field>
 
     <adf-sites-dropdown
+        *ngIf="showDropdownSiteList"
         class="full-width"
         (change)="siteChanged($event)"
         [placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.spec.ts

@@ -172,6 +172,32 @@ describe('ContentNodeSelectorComponent', () => {
                 const testSiteContent = new Node({ id: 'blog-id', properties: { 'st:componentId': 'blog' } });
                 expect(component.rowFilter(<any> { node: { entry: testSiteContent } }, null, null)).toBe(true);
             });
+
+            it('should render search input by default', () => {
+                fixture.detectChanges();
+                expect(fixture.debugElement.nativeElement.querySelector('.adf-content-node-selector-content-input'))
+                .not.toBe(null);
+            });
+
+            it('should not render search input if `showSearch` is false', () => {
+                component.showSearch = false;
+                fixture.detectChanges();
+                expect(fixture.debugElement.nativeElement.querySelector('.adf-content-node-selector-content-input'))
+                .toBe(null);
+            });
+
+            it('should render sites list dropdown by default', () => {
+                fixture.detectChanges();
+                expect(fixture.debugElement.nativeElement.querySelector('adf-sites-dropdown'))
+                .not.toBe(null);
+            });
+
+            it('should not render sites list dropdown if `showDropdownSiteList` is false', () => {
+                component.showDropdownSiteList = false;
+                fixture.detectChanges();
+                expect(fixture.debugElement.nativeElement.querySelector('adf-sites-dropdown'))
+                .toBe(null);
+            });
         });
 
         describe('Breadcrumbs', () => {

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts

@@ -54,6 +54,9 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
         hasMoreItems: false
     });
 
+    private showSiteList = true;
+    private showSearchField = true;
+
     /** Node ID of the folder currently listed. */
     @Input()
     currentFolderId: string = null;
@@ -136,6 +139,30 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
     @Input()
     breadcrumbTransform: (node) => any;
 
+    /** Toggle search input rendering */
+    @Input()
+    set showSearch(value: boolean) {
+        if (value !== undefined && value !== null) {
+            this.showSearchField = value;
+        }
+    }
+
+    get showSearch(): boolean {
+        return this.showSearchField;
+    }
+
+    /** Toggle sites list dropdown rendering */
+    @Input()
+    set showDropdownSiteList(value: boolean) {
+        if (value !== undefined && value !== null) {
+            this.showSiteList = value;
+        }
+    }
+
+    get showDropdownSiteList(): boolean {
+        return this.showSiteList;
+    }
+
     /** Emitted when the user has chosen an item. */
     @Output()
     select: EventEmitter<Node[]> = new EventEmitter<Node[]>();

lib/content-services/src/lib/content-node-selector/content-node-selector.component-data.interface.ts

@@ -31,4 +31,6 @@ export interface ContentNodeSelectorComponentData {
     breadcrumbTransform?: (node) => any;
     excludeSiteContent?: string[];
     select: Subject<Node[]>;
+    showSearch?: boolean;
+    showDropdownSiteList?: boolean;
 }

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

@@ -15,6 +15,8 @@
         [breadcrumbTransform]="data?.breadcrumbTransform"
         [excludeSiteContent]="data?.excludeSiteContent"
         [where]="data?.where"
+        [showSearch]="data?.showSearch"
+        [showDropdownSiteList]="data?.showDropdownSiteList"
         (select)="onSelect($event)">
     </adf-content-node-selector-panel>
 </mat-dialog-content>