diff --git a/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.scss b/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.scss new file mode 100644 index 000000000..6ef990260 --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.scss @@ -0,0 +1,19 @@ +@import 'font'; +@import 'color-palette'; + +:host { + overflow: hidden; +} + +.string-enum-cell { + @include ellipsis-overflow(); + @include body-1-regular($gray-7); + + &.first-column { + @include body-1-medium($gray-9); + } +} + +.clickable { + @include link-hover(); +} diff --git a/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.test.ts b/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.test.ts new file mode 100644 index 000000000..425eede2c --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.test.ts @@ -0,0 +1,59 @@ +import { FormattingModule } from '@hypertrace/common'; +import { byText, createComponentFactory } from '@ngneat/spectator/jest'; +import { TableCellStringParser } from '../../data-parsers/table-cell-string-parser'; +import { tableCellColumnProvider, tableCellDataProvider, tableCellProviders } from '../../test/cell-providers'; +import { StringEnumTableCellRendererComponent } from './string-enum-table-cell-renderer.component'; + +describe('String Enum table cell renderer component', () => { + const buildComponent = createComponentFactory({ + component: StringEnumTableCellRendererComponent, + imports: [FormattingModule], + providers: [ + tableCellProviders( + { + id: 'test' + }, + new TableCellStringParser(undefined!) + ) + ], + shallow: true + }); + + test('should render a plain string', () => { + const spectator = buildComponent({ + providers: [tableCellDataProvider('test-text')] + }); + + expect(spectator.element).toHaveText('Test text'); + }); + + test('should render a missing string', () => { + const spectator = buildComponent(); + + expect(spectator.element).toHaveText(''); + }); + + test('should add clickable class for clickable columns', () => { + const spectator = buildComponent({ + providers: [ + tableCellDataProvider('test-text'), + tableCellColumnProvider({ + id: 'test', + onClick: () => { + /* NOOP */ + } + }) + ] + }); + + expect(spectator.query(byText('Test text'))).toHaveClass('clickable'); + }); + + test('should not add clickable class for columns without a click handler', () => { + const spectator = buildComponent({ + providers: [tableCellDataProvider('TEST_TEXT')] + }); + + expect(spectator.query(byText('Test text'))).not.toHaveClass('clickable'); + }); +}); diff --git a/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.ts new file mode 100644 index 000000000..3c1929ff1 --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.ts @@ -0,0 +1,27 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +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-enum-table-cell-renderer', + styleUrls: ['./string-enum-table-cell-renderer.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` +