[ACS-5566] - Add configurable columns to document list (#8968)

* [ACS-5566] - add configurable columns to document list

* [ACS-5566] - add max visible columns

* [ACS-5566] - add unit tests

* [ACS-5566] - add docs

* [ACS-5566] - style changes after CR

* [ACS-5566] - changes for pipeline

* [ACS-5566] - changes for pipeline

* [ACS-5566] - changes for pipeline

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html

@@ -43,6 +43,7 @@
                     class="adf-columns-selector-column-checkbox"
                     [attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
                     [checked]="!column.isHidden"
+                    [disabled]="isCheckboxDisabled(column)"
                     (change)="changeColumnVisibility(column)">
                     <div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
                 </mat-checkbox>

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts

@@ -156,19 +156,35 @@ describe('ColumnsSelectorComponent', () => {
         expect(toggledColumnItem.isHidden).toBe(true);
     });
 
-    it('should set proper default state for checkboxes', async () => {
-        menuOpenedTrigger.next();
-        fixture.detectChanges();
 
-        const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+    describe('checkboxes', () => {
+        it('should have set proper default state', async () => {
+            menuOpenedTrigger.next();
+            fixture.detectChanges();
 
-        expect(await checkboxes[0].isChecked()).toBe(true);
-        expect(await checkboxes[1].isChecked()).toBe(true);
-        expect(await checkboxes[2].isChecked()).toBe(true);
-        expect(await checkboxes[3].isChecked()).toBe(false);
+            const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+
+            expect(await checkboxes[0].isChecked()).toBe(true);
+            expect(await checkboxes[1].isChecked()).toBe(true);
+            expect(await checkboxes[2].isChecked()).toBe(true);
+            expect(await checkboxes[3].isChecked()).toBe(false);
+        });
+
+        it('should be disabled when visible columns limit is reached', async () => {
+            component.maxColumnsVisible = 4;
+            menuOpenedTrigger.next();
+            fixture.detectChanges();
+
+            const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+
+            expect(await checkboxes[0].isDisabled()).toBe(false);
+            expect(await checkboxes[1].isDisabled()).toBe(false);
+            expect(await checkboxes[2].isDisabled()).toBe(false);
+            expect(await checkboxes[3].isDisabled()).toBe(true);
+        });
     });
 
-    it('should show hidden columns at the end of the list', async () => {
+    describe('sorting', () => {
         const hiddenDataColumn: DataColumn = {
             id: 'hiddenDataColumn',
             title: 'hiddenDataColumn',
@@ -183,14 +199,27 @@ describe('ColumnsSelectorComponent', () => {
             key: 'shownDataColumn',
             type: 'text'
         };
+        it('should show hidden columns at the end of the list by default', async () => {
+            component.columns = [hiddenDataColumn, shownDataColumn];
+            menuOpenedTrigger.next();
+            fixture.detectChanges();
 
-        component.columns = [hiddenDataColumn, shownDataColumn];
-        menuOpenedTrigger.next();
-        fixture.detectChanges();
+            const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
 
-        const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+            expect(await checkboxes[0].getLabelText()).toBe(shownDataColumn.title);
+            expect(await checkboxes[1].getLabelText()).toBe(hiddenDataColumn.title);
+        });
 
-        expect(await checkboxes[0].getLabelText()).toBe(shownDataColumn.title);
-        expect(await checkboxes[1].getLabelText()).toBe(hiddenDataColumn.title);
+        it('should NOT show hidden columns at the end of the list if sorting is disabled', async () => {
+            component.columns = [hiddenDataColumn, shownDataColumn];
+            component.columnsSorting = false;
+            menuOpenedTrigger.next();
+            fixture.detectChanges();
+
+            const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
+
+            expect(await checkboxes[0].getLabelText()).toBe(hiddenDataColumn.title);
+            expect(await checkboxes[1].getLabelText()).toBe(shownDataColumn.title);
+        });
     });
 });

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts

@@ -34,6 +34,12 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
     @Input()
     mainMenuTrigger: MatMenuTrigger;
 
+    @Input()
+    columnsSorting = true;
+
+    @Input()
+    maxColumnsVisible?: number;
+
     @Output()
     submitColumnsVisibility = new EventEmitter<DataColumn[]>();
 
@@ -47,7 +53,7 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
             takeUntil(this.onDestroy$)
         ).subscribe(() => {
             const columns = this.columns.map(column => ({...column}));
-            this.columnItems = this.sortColumns(columns);
+            this.columnItems = this.columnsSorting ? this.sortColumns(columns) : columns;
         });
 
         this.mainMenuTrigger.menuClosed.pipe(
@@ -82,6 +88,10 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
         this.closeMenu();
     }
 
+    isCheckboxDisabled(column: DataColumn): boolean {
+        return this.maxColumnsVisible && column.isHidden && this.maxColumnsVisible === this.columnItems.filter(dataColumn => !dataColumn.isHidden).length;
+    }
+
     private sortColumns(columns: DataColumn[]): DataColumn[] {
         const shownColumns = columns.filter(column => !column.isHidden);
         const hiddenColumns = columns.filter(column => column.isHidden);

lib/core/src/lib/datatable/data/data-table.schema.ts

@@ -49,7 +49,6 @@ export abstract class DataTableSchema<T = unknown> {
 
     public createDatatableSchema(): void {
         this.loadLayoutPresets();
-
         if (!this.columns || this.columns.length === 0) {
             this.createColumns();
             this.columnsSchemaSubject$.next(true);
@@ -98,7 +97,7 @@ export abstract class DataTableSchema<T = unknown> {
     }
 
     public getSchemaFromConfig(presetColumn: string): DataColumn[] {
-        return presetColumn ? this.layoutPresets[presetColumn].map((col) => new ObjectDataColumn(col)) : [];
+        return presetColumn && this.layoutPresets[presetColumn] ? this.layoutPresets[presetColumn].map((col) => new ObjectDataColumn(col)) : [];
     }
 
     private getDefaultLayoutPreset(): DataColumn[] {