feat: add code table cell renderer (#627)

Author: aaron-steinfeld

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;
+}

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');
+  });
+});

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: `
+    <div class="code-cell" [htTooltip]="this.value | htDisplayString">
+      {{ this.value | htDisplayString }}
+    </div>
+  `
+})
+@TableCellRenderer({
+  type: CoreTableCellRendererType.Code,
+  alignment: TableCellAlignmentType.Left,
+  parser: CoreTableCellParserType.String
+})
+export class CodeTableCellRendererComponent extends TableCellRendererBase<string> {}

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<unknown[][]>('TABLE_CELL_PA
     TableHeaderCellRendererComponent,
     TextTableCellRendererComponent,
     TimestampTableCellRendererComponent,
-    TimeAgoTableCellRendererComponent
+    TimeAgoTableCellRendererComponent,
+    CodeTableCellRendererComponent
   ],
   providers: [
     {
@@ -74,7 +76,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
         TableExpanderCellRendererComponent,
         TextTableCellRendererComponent,
         TimestampTableCellRendererComponent,
-        TimeAgoTableCellRendererComponent
+        TimeAgoTableCellRendererComponent,
+        CodeTableCellRendererComponent
       ],
       multi: true
     },

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',