diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.scss b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.scss new file mode 100644 index 000000000..f80b3d83f --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.scss @@ -0,0 +1,19 @@ +@import 'font'; +@import 'color-palette'; + +.string-array-cell { + display: flex; + flex-direction: row; + align-items: center; + + .first-item { + @include ellipsis-overflow(); + padding-right: 8px; + } + + .summary-text { + padding: 0 6px; + background-color: $gray-2; + border-radius: 4px; + } +} diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts new file mode 100644 index 000000000..678a6b0ae --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts @@ -0,0 +1,47 @@ +import { TableCellNoOpParser } from '@hypertrace/components'; +import { createComponentFactory } from '@ngneat/spectator/jest'; +import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers'; +import { StringArrayTableCellRendererComponent } from './string-array-table-cell-renderer.component'; + +describe('String array table cell renderer component', () => { + const buildComponent = createComponentFactory({ + component: StringArrayTableCellRendererComponent, + providers: [ + tableCellProviders( + { + id: 'test' + }, + new TableCellNoOpParser(undefined!) + ) + ], + + shallow: true + }); + + test('should render an array with one item as expected', () => { + const spectator = buildComponent({ + providers: [tableCellDataProvider(['first-item'])] + }); + + expect(spectator.query('.first-item')).toHaveText('first-item'); + expect(spectator.query('.summary-text')).toHaveText(''); + }); + + test('should render an empty array as expected', () => { + const spectator = buildComponent({ + providers: [tableCellDataProvider([])] + }); + + expect(spectator.query('.first-item')).toHaveText('-'); + expect(spectator.query('.summary-text')).toHaveText(''); + }); + + test('should render array with multiple items as expected', () => { + const spectator = buildComponent({ + providers: [tableCellDataProvider(['first-item', 'second-item', 'third-item'])] + }); + + expect(spectator.query('.first-item')).toHaveText('first-item'); + expect(spectator.query('.summary-text')).toHaveText('+2'); + }); +}); diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts new file mode 100644 index 000000000..2116c7f72 --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts @@ -0,0 +1,57 @@ +import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core'; +import { TableColumnConfig, TableRow } from '../../../table-api'; +import { + TABLE_CELL_DATA, + TABLE_COLUMN_CONFIG, + TABLE_COLUMN_INDEX, + TABLE_DATA_PARSER, + TABLE_ROW_DATA +} from '../../table-cell-injection'; +import { TableCellParserBase } from '../../table-cell-parser-base'; +import { TableCellRenderer } from '../../table-cell-renderer'; +import { TableCellRendererBase } from '../../table-cell-renderer-base'; +import { CoreTableCellParserType } from '../../types/core-table-cell-parser-type'; +import { CoreTableCellRendererType } from '../../types/core-table-cell-renderer-type'; +import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; + +@Component({ + selector: 'ht-string-array-table-cell-renderer', + styleUrls: ['./string-array-table-cell-renderer.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` +