fix(styling): styling fixes for cell renderers (#1526)

* fix(styling): styling fixes for cell renderers

Author: arjunlalb

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);

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

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 | slice: 1).length" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
 
       <ng-template #summaryTooltip>
         <div *ngFor="let value of this.value">{{ value }}</div>
@@ -34,24 +26,4 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
   alignment: TableCellAlignmentType.Left,
   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}` : '';
-  }
-}
+export class StringArrayTableCellRendererComponent extends TableCellRendererBase<string[]> implements OnInit {}

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';
@@ -53,7 +54,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
     FilterButtonModule,
     FilterModalModule,
     PopoverModule,
-    CopyToClipboardModule
+    CopyToClipboardModule,
+    XMoreModule
   ],
   exports: [
     TableHeaderCellRendererComponent,

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