diff --git a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss index 04c3deba5b..0f07152f11 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss @@ -26,6 +26,11 @@ .adf-authority-icon-column { min-width: 40px; } + + .adf-datatable-selected > svg { + width: 40px; + height: 40px; + } } } } diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss index 6b9427b8e0..c78c4ca195 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss @@ -75,16 +75,8 @@ overflow: hidden; flex: 1 1 auto; } - - &-datatable-list { - .adf-datatable-selected > svg { - width: 40px; - height: 40px; - } - } } - [aria-sort='Ascending'] adf-user-role-column, [aria-sort='Descending'] adf-user-role-column { padding-left: 10px; diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index 0b3eea12ab..3e3fb108f8 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts @@ -36,6 +36,17 @@ import { TranslateModule } from '@ngx-translate/core'; class CustomColumnTemplateComponent { @ViewChild('tmplRef', { static: true }) templateRef: TemplateRef; } +@Component({ + selector: 'adf-custom-column-header-component', + template: ` + + CUSTOM HEADER + + ` +}) +class CustomColumnHeaderComponent { + @ViewChild('tmplRef', { static: true }) templateRef: TemplateRef; +} class FakeDataRow implements DataRow { isDropTarget = false; @@ -74,7 +85,7 @@ describe('DataTable', () => { TranslateModule.forRoot(), CoreTestingModule ], - schemas: [NO_ERRORS_SCHEMA] + declarations: [CustomColumnHeaderComponent] }); beforeEach(() => { @@ -1306,8 +1317,8 @@ describe('DataTable', () => { spyOn(dataTable, 'resolverFn').and.callFake(resolverFn); fixture.detectChanges(); - const id1 = element.querySelector('[data-automation-id="text_1'); - const id2 = element.querySelector('[data-automation-id="text_2'); + const id1 = element.querySelector('[data-automation-id="text_1"]'); + const id2 = element.querySelector('[data-automation-id="text_2"]'); const namesId1 = element.querySelector('[data-automation-id="text_foo - bar"]'); const namesId2 = element.querySelector('[data-automation-id="text_bar - baz"]'); @@ -1333,6 +1344,26 @@ describe('DataTable', () => { const expectedNewDataColumns = [new ObjectDataColumn(newDataColumnsSchema)]; expect(dataTable.data.getColumns()).toEqual(expectedNewDataColumns); }); + + it('should render the custom column header', () => { + const customHeader = TestBed.createComponent(CustomColumnHeaderComponent).componentInstance.templateRef; + dataTable.data = new ObjectDataTableAdapter([ + { id: 1, name: 'foo' }, + { id: 2, name: 'bar' } + ], + [ + new ObjectDataColumn({ key: 'id', title: 'ID' }), + new ObjectDataColumn({ key: 'name', title: 'Name', header: customHeader }) + ] + ); + fixture.detectChanges(); + + const idColumn = element.querySelector('[data-automation-id="auto_id_id"]'); + const nameColumn = element.querySelector('[data-automation-id="auto_id_name"]'); + + expect(idColumn.innerText).toContain('ID'); + expect(nameColumn.innerText).toContain('CUSTOM HEADER'); + }); }); describe('Accesibility', () => {