From 76aa65b265c78a8fcbdb8a416098b9819ba3fde8 Mon Sep 17 00:00:00 2001 From: Aaron Steinfeld Date: Mon, 22 Feb 2021 18:39:53 -0500 Subject: [PATCH] feat: add code table cell renderer --- .../code-table-cell-renderer.component.scss | 13 ++++++ ...code-table-cell-renderer.component.test.ts | 40 +++++++++++++++++++ .../code-table-cell-renderer.component.ts | 23 +++++++++++ .../src/table/cells/table-cells.module.ts | 7 +++- .../types/core-table-cell-renderer-type.ts | 1 + 5 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.scss create mode 100644 projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.test.ts create mode 100644 projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.ts diff --git a/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.scss b/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.scss new file mode 100644 index 000000000..e2c1d2224 --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.scss @@ -0,0 +1,13 @@ +@import 'font'; +@import 'color-palette'; + +.code-cell { + @include code($gray-7); + @include ellipsis-overflow(); + background-color: $gray-2; + border-radius: 4px; + padding: 0 4px; + display: inline-block; + max-width: 100%; + vertical-align: text-bottom; +} diff --git a/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.test.ts b/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.test.ts new file mode 100644 index 000000000..b433b158c --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.test.ts @@ -0,0 +1,40 @@ +import { FormattingModule } from '@hypertrace/common'; +import { createComponentFactory } from '@ngneat/spectator/jest'; +import { MockDirective } from 'ng-mocks'; +import { TooltipDirective } from '../../../../tooltip/tooltip.directive'; +import { TableCellStringParser } from '../../data-parsers/table-cell-string-parser'; +import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers'; +import { CodeTableCellRendererComponent } from './code-table-cell-renderer.component'; + +describe('Code table cell renderer component', () => { + const buildComponent = createComponentFactory({ + component: CodeTableCellRendererComponent, + imports: [FormattingModule], + providers: [ + tableCellProviders( + { + id: 'test' + }, + new TableCellStringParser(undefined!) + ) + ], + declarations: [MockDirective(TooltipDirective)], + shallow: true + }); + + test('should render a plain string', () => { + const spectator = buildComponent({ + providers: [tableCellDataProvider('test text')] + }); + + expect(spectator.element).toHaveText('test text'); + expect(spectator.query(TooltipDirective)?.content).toBe('test text'); + }); + + test('should render a missing string', () => { + const spectator = buildComponent(); + + expect(spectator.element).toHaveText('Unknown'); + expect(spectator.query(TooltipDirective)?.content).toBe('Unknown'); + }); +}); diff --git a/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.ts new file mode 100644 index 000000000..bfdd20c69 --- /dev/null +++ b/projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.ts @@ -0,0 +1,23 @@ +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-code-table-cell-renderer', + styleUrls: ['./code-table-cell-renderer.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` +
+ {{ this.value | htDisplayString }} +
+ ` +}) +@TableCellRenderer({ + type: CoreTableCellRendererType.Code, + alignment: TableCellAlignmentType.Left, + parser: CoreTableCellParserType.String +}) +export class CodeTableCellRendererComponent 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 3212e6235..0a87f9300 100644 --- a/projects/components/src/table/cells/table-cells.module.ts +++ b/projects/components/src/table/cells/table-cells.module.ts @@ -16,6 +16,7 @@ import { TableCellNoOpParser } from './data-parsers/table-cell-no-op-parser'; 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 { IconTableCellRendererComponent } from './data-renderers/icon/icon-table-cell-renderer.component'; import { NumericTableCellRendererComponent } from './data-renderers/numeric/numeric-table-cell-renderer.component'; import { TableDataCellRendererComponent } from './data-renderers/table-data-cell-renderer.component'; @@ -62,7 +63,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PA TableHeaderCellRendererComponent, TextTableCellRendererComponent, TimestampTableCellRendererComponent, - TimeAgoTableCellRendererComponent + TimeAgoTableCellRendererComponent, + CodeTableCellRendererComponent ], providers: [ { @@ -74,7 +76,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken('TABLE_CELL_PA TableExpanderCellRendererComponent, TextTableCellRendererComponent, TimestampTableCellRendererComponent, - TimeAgoTableCellRendererComponent + TimeAgoTableCellRendererComponent, + CodeTableCellRendererComponent ], 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 202db5eaa..8be4d8506 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 @@ -1,5 +1,6 @@ export const enum CoreTableCellRendererType { Checkbox = 'checkbox', + Code = 'code', Icon = 'icon', Number = 'number', RowExpander = 'row-expander',