fix: update display string conversion logic (#686)

* fix: update display string conversion logic

Author: arjunlalb

projects/common/src/utilities/formatters/string/string-formatter.test.ts

@@ -21,12 +21,12 @@ describe('String formatter', () => {
   test('can convert to display string', () => {
     // tslint:disable-next-line: no-null-keyword
     expect(displayString(null)).toBe('-');
-    expect(displayString(undefined)).toBe('Unknown');
-    expect(displayString('')).toBe('Unknown');
+    expect(displayString(undefined)).toBe('-');
+    expect(displayString('')).toBe('');
     expect(displayString('value')).toBe('value');
     expect(displayString(15)).toBe('15');
     expect(displayString({})).toBe('Object');
-    expect(displayString([undefined])).toBe('[Unknown]');
+    expect(displayString([undefined])).toBe('[-]');
     expect(displayString(() => 'hi')).toBe('Function');
     expect(displayString(Symbol('test symbol'))).toBe('Symbol(test symbol)');
     expect(displayString(false)).toBe('false');

projects/common/src/utilities/formatters/string/string-formatter.ts

@@ -1,5 +1,3 @@
-import { isEmpty } from 'lodash-es';
-
 export const titleCaseFromKebabCase = (kebabCaseString: string): string =>
   kebabCaseString
     .split('-')
@@ -19,17 +17,13 @@ export const displayString = (provided?: unknown): string => {
 
   switch (typeof provided) {
     case 'object':
-      return Array.isArray(provided)
-        ? `[${provided.map(displayString).join(', ')}]`
-        : provided === null
-        ? 'Unknown'
-        : 'Object';
+      return Array.isArray(provided) ? `[${provided.map(displayString).join(', ')}]` : 'Object';
     case 'undefined':
-      return 'Unknown';
+      return '-';
     case 'function':
       return 'Function';
     case 'string':
-      return isEmpty(provided) ? 'Unknown' : provided;
+      return provided;
     case 'boolean':
     case 'number':
     case 'bigint':

projects/components/src/table/cells/data-renderers/code/code-table-cell-renderer.component.test.ts

@@ -34,7 +34,7 @@ describe('Code table cell renderer component', () => {
   test('should render a missing string', () => {
     const spectator = buildComponent();
 
-    expect(spectator.element).toHaveText('Unknown');
-    expect(spectator.query(TooltipDirective)?.content).toBe('Unknown');
+    expect(spectator.element).toHaveText('-');
+    expect(spectator.query(TooltipDirective)?.content).toBe('-');
   });
 });

projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts

@@ -1,3 +1,4 @@
+import { FormattingModule } from '@hypertrace/common';
 import { TableCellNoOpParser } from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
 import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers';
@@ -6,6 +7,7 @@ import { StringArrayTableCellRendererComponent } from './string-array-table-cell
 describe('String array table cell renderer component', () => {
   const buildComponent = createComponentFactory({
     component: StringArrayTableCellRendererComponent,
+    imports: [FormattingModule],
     providers: [
       tableCellProviders(
         {

projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts

@@ -20,7 +20,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="string-array-cell" [htTooltip]="summaryTooltip">
-      <span class="first-item">{{ this.firstItem }}</span>
+      <span class="first-item">{{ this.firstItem | htDisplayString }}</span>
       <span class="summary-text">{{ this.summaryText }}</span>
 
       <ng-template #summaryTooltip>
@@ -51,7 +51,7 @@ export class StringArrayTableCellRendererComponent extends TableCellRendererBase
   public ngOnInit(): void {
     super.ngOnInit();
 
-    this.firstItem = this.value[0] ?? '-';
+    this.firstItem = this.value[0];
     this.summaryText = this.value.length > 1 ? `+${this.value.length - 1}` : '';
   }
 }