From 6b634d95f4b120edc82f9f7cb78df540e8a96e66 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Mon, 4 Apr 2022 12:59:46 +0530
Subject: [PATCH 1/4] fix(styling): styling fixes for cell renderers

---
 ...g-array-table-cell-renderer.component.scss |  1 +
 ...rray-table-cell-renderer.component.test.ts | 10 +++---
 ...ing-array-table-cell-renderer.component.ts | 35 +++----------------
 .../src/table/cells/table-cells.module.ts     | 24 +++++++++----
 .../src/x-more/x-more.component.scss          | 20 ++++++-----
 5 files changed, 40 insertions(+), 50 deletions(-)

diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.scss b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.scss
index 1d7308e9c..08c08d306 100644
--- a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.scss
+++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.scss
@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
 
   &.first-column {
     @include body-1-medium($gray-9);
diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts
index b7071769c..a0df0dd19 100644
--- a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts
+++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts
@@ -1,12 +1,14 @@
 import { FormattingModule } from '@hypertrace/common';
-import { TableCellNoOpParser } from '@hypertrace/components';
+import { TableCellNoOpParser, XMoreComponent } from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
 import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers';
 import { StringArrayTableCellRendererComponent } from './string-array-table-cell-renderer.component';
 
 describe('String array table cell renderer component', () => {
   const buildComponent = createComponentFactory({
     component: StringArrayTableCellRendererComponent,
+    declarations: [MockComponent(XMoreComponent)],
     imports: [FormattingModule],
     providers: [
       tableCellProviders(
@@ -26,7 +28,7 @@ describe('String array table cell renderer component', () => {
     });
 
     expect(spectator.query('.first-item')).toHaveText('first-item');
-    expect(spectator.query('.summary-text')).toHaveText('');
+    expect(spectator.query(XMoreComponent)?.count).toBe(0);
   });
 
   test('should render an empty array as expected', () => {
@@ -35,7 +37,7 @@ describe('String array table cell renderer component', () => {
     });
 
     expect(spectator.query('.first-item')).toHaveText('-');
-    expect(spectator.query('.summary-text')).toHaveText('');
+    expect(spectator.query(XMoreComponent)?.count).toBe(0);
   });
 
   test('should render array with multiple items as expected', () => {
@@ -44,6 +46,6 @@ describe('String array table cell renderer component', () => {
     });
 
     expect(spectator.query('.first-item')).toHaveText('first-item');
-    expect(spectator.query('.summary-text')).toHaveText('+2');
+    expect(spectator.query(XMoreComponent)?.count).toBe(2);
   });
 });
diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
index 996b2a676..a9da8819e 100644
--- a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
+++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
@@ -1,13 +1,5 @@
-import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
-import { TableColumnConfig, TableRow } from '../../../table-api';
-import {
-  TABLE_CELL_DATA,
-  TABLE_COLUMN_CONFIG,
-  TABLE_COLUMN_INDEX,
-  TABLE_DATA_PARSER,
-  TABLE_ROW_DATA
-} from '../../table-cell-injection';
-import { TableCellParserBase } from '../../table-cell-parser-base';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { XMoreDisplay } from '../../../../x-more/x-more.component';
 import { TableCellRenderer } from '../../table-cell-renderer';
 import { TableCellRendererBase } from '../../table-cell-renderer-base';
 import { CoreTableCellParserType } from '../../types/core-table-cell-parser-type';
@@ -20,8 +12,8 @@ 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 | htDisplayString }}</span>
-      <span class="summary-text">{{ this.summaryText }}</span>
+      <span class="first-item">{{ this.value[0] | htDisplayString }}</span>
+      <ht-x-more [count]="this.value.length - 1" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
 
       <ng-template #summaryTooltip>
         <div *ngFor="let value of this.value">{{ value }}</div>
@@ -35,23 +27,4 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
   parser: CoreTableCellParserType.NoOp
 })
 export class StringArrayTableCellRendererComponent extends TableCellRendererBase<string[]> implements OnInit {
-  public firstItem!: string;
-  public summaryText!: string;
-
-  public constructor(
-    @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
-    @Inject(TABLE_COLUMN_INDEX) index: number,
-    @Inject(TABLE_DATA_PARSER) parser: TableCellParserBase<string[], string[], unknown>,
-    @Inject(TABLE_CELL_DATA) cellData: string[],
-    @Inject(TABLE_ROW_DATA) rowData: TableRow
-  ) {
-    super(columnConfig, index, parser, cellData, rowData);
-  }
-
-  public ngOnInit(): void {
-    super.ngOnInit();
-
-    this.firstItem = this.value[0];
-    this.summaryText = this.value.length > 1 ? `+${this.value.length - 1}` : '';
-  }
 }
diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts
index b184c12f7..429e273f1 100644
--- a/projects/components/src/table/cells/table-cells.module.ts
+++ b/projects/components/src/table/cells/table-cells.module.ts
@@ -10,6 +10,7 @@ import { FilterModalModule } from '../../filtering/filter-modal/filter-modal.mod
 import { IconModule } from '../../icon/icon.module';
 import { PopoverModule } from '../../popover/popover.module';
 import { TooltipModule } from '../../tooltip/tooltip.module';
+import { XMoreModule } from '../../x-more/x-more.module';
 import { TableHeaderCellRendererComponent } from '../header/table-header-cell-renderer.component';
 import { TableCellBooleanParser } from './data-parsers/table-cell-boolean-parser';
 import { TableCellIconParser } from './data-parsers/table-cell-icon-parser';
@@ -22,14 +23,24 @@ import { DurationTableCellRendererComponent } from './data-renderers/duration/du
 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 { RelativeTimestampTableCellRendererComponent } from './data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component';
-import { StringArrayTableCellRendererComponent } from './data-renderers/string-array/string-array-table-cell-renderer.component';
+import {
+  RelativeTimestampTableCellRendererComponent
+} from './data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component';
+import {
+  StringArrayTableCellRendererComponent
+} from './data-renderers/string-array/string-array-table-cell-renderer.component';
 import { TableDataCellRendererComponent } from './data-renderers/table-data-cell-renderer.component';
-import { TextWithCopyActionTableCellRendererComponent } from './data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component';
+import {
+  TextWithCopyActionTableCellRendererComponent
+} from './data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component';
 import { TextTableCellRendererComponent } from './data-renderers/text/text-table-cell-renderer.component';
 import { TimeAgoTableCellRendererComponent } from './data-renderers/time-ago/time-ago-table-cell-renderer.component';
-import { TimestampTableCellRendererComponent } from './data-renderers/timestamp/timestamp-table-cell-renderer.component';
-import { TableExpandedDetailRowCellRendererComponent } from './expanded-detail/table-expanded-detail-row-cell-renderer.component';
+import {
+  TimestampTableCellRendererComponent
+} from './data-renderers/timestamp/timestamp-table-cell-renderer.component';
+import {
+  TableExpandedDetailRowCellRendererComponent
+} from './expanded-detail/table-expanded-detail-row-cell-renderer.component';
 import { TableCellStateParser } from './state-parsers/table-cell-state-parser';
 import { TableCheckboxCellRendererComponent } from './state-renderers/checkbox/table-checkbox-cell-renderer.component';
 import { TableExpanderCellRendererComponent } from './state-renderers/expander/table-expander-cell-renderer.component';
@@ -53,7 +64,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
     FilterButtonModule,
     FilterModalModule,
     PopoverModule,
-    CopyToClipboardModule
+    CopyToClipboardModule,
+    XMoreModule
   ],
   exports: [
     TableHeaderCellRendererComponent,
diff --git a/projects/components/src/x-more/x-more.component.scss b/projects/components/src/x-more/x-more.component.scss
index b7a71984b..ecfc77e8b 100644
--- a/projects/components/src/x-more/x-more.component.scss
+++ b/projects/components/src/x-more/x-more.component.scss
@@ -1,19 +1,21 @@
-@import 'color-palette';
+@import 'mixins';
 
 .ht-x-more {
+  @include body-2-regular($gray-7);
+
   .summary-text {
     padding: 0 6px;
     margin-left: 8px;
     border-radius: 4px;
-  }
 
-  .plain {
-    color: $gray-7;
-    margin-left: 0px;
-    background-color: white;
-  }
+    &.plain {
+      color: $gray-7;
+      margin-left: 0;
+      background-color: white;
+    }
 
-  .gray {
-    background-color: $gray-2;
+    &.gray {
+      background-color: $gray-2;
+    }
   }
 }

From ff13df7cde057787ab0297ec98879388c5415cca Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Mon, 4 Apr 2022 13:01:43 +0530
Subject: [PATCH 2/4] fix: prettier fix

---
 ...ing-array-table-cell-renderer.component.ts |  3 +--
 .../src/table/cells/table-cells.module.ts     | 20 +++++--------------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
index a9da8819e..417d048f2 100644
--- a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
+++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
@@ -26,5 +26,4 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
   alignment: TableCellAlignmentType.Left,
   parser: CoreTableCellParserType.NoOp
 })
-export class StringArrayTableCellRendererComponent extends TableCellRendererBase<string[]> implements OnInit {
-}
+export class StringArrayTableCellRendererComponent extends TableCellRendererBase<string[]> implements OnInit {}
diff --git a/projects/components/src/table/cells/table-cells.module.ts b/projects/components/src/table/cells/table-cells.module.ts
index 429e273f1..2970955b9 100644
--- a/projects/components/src/table/cells/table-cells.module.ts
+++ b/projects/components/src/table/cells/table-cells.module.ts
@@ -23,24 +23,14 @@ import { DurationTableCellRendererComponent } from './data-renderers/duration/du
 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 {
-  RelativeTimestampTableCellRendererComponent
-} from './data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component';
-import {
-  StringArrayTableCellRendererComponent
-} from './data-renderers/string-array/string-array-table-cell-renderer.component';
+import { RelativeTimestampTableCellRendererComponent } from './data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component';
+import { StringArrayTableCellRendererComponent } from './data-renderers/string-array/string-array-table-cell-renderer.component';
 import { TableDataCellRendererComponent } from './data-renderers/table-data-cell-renderer.component';
-import {
-  TextWithCopyActionTableCellRendererComponent
-} from './data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component';
+import { TextWithCopyActionTableCellRendererComponent } from './data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component';
 import { TextTableCellRendererComponent } from './data-renderers/text/text-table-cell-renderer.component';
 import { TimeAgoTableCellRendererComponent } from './data-renderers/time-ago/time-ago-table-cell-renderer.component';
-import {
-  TimestampTableCellRendererComponent
-} from './data-renderers/timestamp/timestamp-table-cell-renderer.component';
-import {
-  TableExpandedDetailRowCellRendererComponent
-} from './expanded-detail/table-expanded-detail-row-cell-renderer.component';
+import { TimestampTableCellRendererComponent } from './data-renderers/timestamp/timestamp-table-cell-renderer.component';
+import { TableExpandedDetailRowCellRendererComponent } from './expanded-detail/table-expanded-detail-row-cell-renderer.component';
 import { TableCellStateParser } from './state-parsers/table-cell-state-parser';
 import { TableCheckboxCellRendererComponent } from './state-renderers/checkbox/table-checkbox-cell-renderer.component';
 import { TableExpanderCellRendererComponent } from './state-renderers/expander/table-expander-cell-renderer.component';

From 8d04cf2147c601e09aafa5b4ec1f5bf20fc89f1d Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Mon, 4 Apr 2022 13:10:25 +0530
Subject: [PATCH 3/4] fix: minor fix

---
 .../string-array/string-array-table-cell-renderer.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
index 417d048f2..748446768 100644
--- a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
+++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
@@ -13,7 +13,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
   template: `
     <div class="string-array-cell" [htTooltip]="summaryTooltip">
       <span class="first-item">{{ this.value[0] | htDisplayString }}</span>
-      <ht-x-more [count]="this.value.length - 1" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
+      <ht-x-more [count]="(this.value | slice:1).length" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
 
       <ng-template #summaryTooltip>
         <div *ngFor="let value of this.value">{{ value }}</div>

From 9721cf21a24fd720de805f545e509c3fdaa8a1d7 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Mon, 4 Apr 2022 13:18:23 +0530
Subject: [PATCH 4/4] fix: prettier fix

---
 .../string-array/string-array-table-cell-renderer.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
index 748446768..aad2e3d7c 100644
--- a/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
+++ b/projects/components/src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
@@ -13,7 +13,7 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
   template: `
     <div class="string-array-cell" [htTooltip]="summaryTooltip">
       <span class="first-item">{{ this.value[0] | htDisplayString }}</span>
-      <ht-x-more [count]="(this.value | slice:1).length" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
+      <ht-x-more [count]="(this.value | slice: 1).length" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
 
       <ng-template #summaryTooltip>
         <div *ngFor="let value of this.value">{{ value }}</div>