From 9615b1020c53b67d127ec3eed46c24c7fdc8ec11 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Tue, 20 Apr 2021 15:02:39 -0700 Subject: [PATCH] feat: string enum table cell renderer --- ...ng-enum-table-cell-renderer.component.scss | 19 ++++++ ...enum-table-cell-renderer.component.test.ts | 59 +++++++++++++++++++ ...ring-enum-table-cell-renderer.component.ts | 27 +++++++++ .../src/table/cells/table-cells.module.ts | 3 + .../types/core-table-cell-renderer-type.ts | 1 + src/styles/main.scss | 15 +++++ 6 files changed, 124 insertions(+) create mode 100644 projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.scss create mode 100644 projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.test.ts create mode 100644 projects/components/src/table/cells/data-renderers/enum/string-enum-table-cell-renderer.component.ts 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: ` +
+ {{ this.value | htDisplayStringEnum }} +
+ ` +}) +@TableCellRenderer({ + type: CoreTableCellRendererType.StringEnum, + alignment: TableCellAlignmentType.Left, + parser: CoreTableCellParserType.String +}) +export class StringEnumTableCellRendererComponent extends TableCellRendererBase {} diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts index 7daf31e83..ad7a15e77 100644 --- a/projects/components/src/table/cells/table-cells.module.ts +++ b/projects/components/src/table/cells/table-cells.module.ts @@ -18,6 +18,7 @@ import { TableCellNumberParser } from './data-parsers/table-cell-number-parser'; import { TableCellStringParser } from './data-parsers/table-cell-string-parser'; import { TableCellTimestampParser } from './data-parsers/table-cell-timestamp-parser'; import { CodeTableCellRendererComponent } from './data-renderers/code/code-table-cell-renderer.component'; +import { StringEnumTableCellRendererComponent } from './data-renderers/enum/string-enum-table-cell-renderer.component'; import { IconTableCellRendererComponent } from './data-renderers/icon/icon-table-cell-renderer.component'; import { NumericTableCellRendererComponent } from './data-renderers/numeric/numeric-table-cell-renderer.component'; import { StringArrayTableCellRendererComponent } from './data-renderers/string-array/string-array-table-cell-renderer.component'; @@ -70,6 +71,7 @@ export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PA TimeAgoTableCellRendererComponent, CodeTableCellRendererComponent, StringArrayTableCellRendererComponent, + StringEnumTableCellRendererComponent, TextWithCopyActionTableCellRendererComponent ], providers: [ @@ -85,6 +87,7 @@ export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PA TimeAgoTableCellRendererComponent, CodeTableCellRendererComponent, StringArrayTableCellRendererComponent, + StringEnumTableCellRendererComponent, TextWithCopyActionTableCellRendererComponent ], multi: true diff --git a/projects/components/src/table/cells/types/core-table-cell-renderer-type.ts b/projects/components/src/table/cells/types/core-table-cell-renderer-type.ts index d6063008b..5c5d8a6e6 100644 --- a/projects/components/src/table/cells/types/core-table-cell-renderer-type.ts +++ b/projects/components/src/table/cells/types/core-table-cell-renderer-type.ts @@ -5,6 +5,7 @@ export const enum CoreTableCellRendererType { Number = 'number', RowExpander = 'row-expander', StringArray = 'string-array', + StringEnum = 'string-enum', Text = 'text', TextWithCopyAction = 'text-with-copy-action', Timestamp = 'timestamp', diff --git a/src/styles/main.scss b/src/styles/main.scss index bc0a89007..adc71e4f8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -52,6 +52,21 @@ h1 { box-sizing: border-box; } +strong { + font-weight: 500; +} + +em { + font-style: normal; + background: $gray-2; + border-radius: 4px; + padding: 2px 4px; +} + +q { + color: $gray-5; +} + mark { background-color: $color-text-highlight; color: $gray-9;