feat: cell renderer for text with copy action

Author: arjunlalb

projects/components/src/table/cells/data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component.scss

@@ -0,0 +1,36 @@
+@import 'font';
+@import 'color-palette';
+
+:host {
+  .text {
+    overflow: hidden;
+    @include ellipsis-overflow();
+    @include body-1-regular($gray-7);
+    padding-right: 8px;
+  }
+
+  .copy-button {
+    visibility: hidden;
+  }
+}
+
+.text-with-copy-action-cell {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  &.first-column {
+    @include body-1-medium($gray-9);
+  }
+
+  &:hover {
+    .copy-button {
+      visibility: visible;
+    }
+  }
+}
+
+.clickable {
+  @include link-hover();
+}

projects/components/src/table/cells/data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component.test.ts

@@ -0,0 +1,75 @@
+import { FormattingModule } from '@hypertrace/common';
+import { ButtonSize, CopyToClipboardComponent } from '@hypertrace/components';
+import { byText, createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { TableCellStringParser } from '../../data-parsers/table-cell-string-parser';
+import { tableCellColumnProvider, tableCellDataProvider, tableCellProviders } from '../../test/cell-providers';
+import { TextWithCopyActionTableCellRendererComponent } from './text-with-copy-table-cell-renderer.component';
+
+describe('Text with copy action table cell renderer component', () => {
+  const buildComponent = createComponentFactory({
+    component: TextWithCopyActionTableCellRendererComponent,
+    imports: [FormattingModule],
+    declarations: [MockComponent(CopyToClipboardComponent)],
+    providers: [
+      tableCellProviders(
+        {
+          id: 'test'
+        },
+        new TableCellStringParser(undefined!)
+      )
+    ],
+    shallow: true
+  });
+
+  test('should render a plain string', () => {
+    const spectator = buildComponent({
+      providers: [tableCellDataProvider('test-text')]
+    });
+
+    expect(spectator.query('.text')).toHaveText('test-text');
+  });
+
+  test('should render a missing string', () => {
+    const spectator = buildComponent();
+
+    expect(spectator.query('.text')).toHaveText('');
+  });
+
+  test('should render the copy action button as expected', () => {
+    const spectator = buildComponent({ providers: [tableCellDataProvider('test-text')] });
+    expect(spectator.query('.copy-button')).toExist();
+    expect(spectator.query(CopyToClipboardComponent)?.label).toBe('');
+    expect(spectator.query(CopyToClipboardComponent)?.size).toBe(ButtonSize.ExtraSmall);
+    expect(spectator.query(CopyToClipboardComponent)?.text).toBe('test-text');
+  });
+
+  test('should not render the copy action button if string is empty', () => {
+    const spectator = buildComponent({ providers: [tableCellDataProvider('')] });
+    expect(spectator.query('.copy-button')).not.toExist();
+  });
+
+  test('should add clickable class for clickable columns', () => {
+    const spectator = buildComponent({
+      providers: [
+        tableCellDataProvider('test-text'),
+        tableCellColumnProvider({
+          id: 'test',
+          onClick: () => {
+            /* NOOP */
+          }
+        })
+      ]
+    });
+
+    expect(spectator.query('.text-with-copy-action-cell')).toHaveClass('clickable');
+  });
+
+  test('should not add clickable class for columns without a click handler', () => {
+    const spectator = buildComponent({
+      providers: [tableCellDataProvider('test-text')]
+    });
+
+    expect(spectator.query(byText('test-text'))).not.toHaveClass('clickable');
+  });
+});

projects/components/src/table/cells/data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ButtonSize } from '../../../../button/button';
+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-text-table-with-copy-cell-renderer',
+  styleUrls: ['./text-with-copy-table-cell-renderer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      [ngClass]="{ clickable: this.clickable, 'first-column': this.isFirstColumn }"
+      class="text-with-copy-action-cell"
+    >
+      <span class="text" [htTooltip]="this.value">{{ this.value | htDisplayString }}</span>
+
+      <div class="copy-button" *ngIf="this.value !== ''">
+        <ht-copy-to-clipboard size="${ButtonSize.ExtraSmall}" label="" [text]="this.value"></ht-copy-to-clipboard>
+      </div>
+    </div>
+  `
+})
+@TableCellRenderer({
+  type: CoreTableCellRendererType.TextWithCopyAction,
+  alignment: TableCellAlignmentType.Left,
+  parser: CoreTableCellParserType.String
+})
+export class TextWithCopyActionTableCellRendererComponent extends TableCellRendererBase<string> {}

projects/components/src/table/cells/table-cells.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { Inject, InjectionToken, NgModule } from '@angular/core';
 import { FormattingModule } from '@hypertrace/common';
 import { TraceCheckboxModule } from '../../checkbox/checkbox.module';
+import { CopyToClipboardModule } from '../../copy-to-clipboard/copy-to-clipboard.module';
 import { ExpanderToggleModule } from '../../expander/expander-toggle.module';
 import { FilterButtonModule } from '../../filtering/filter-button/filter-button.module';
 import { FilterModalModule } from '../../filtering/filter-modal/filter-modal.module';
@@ -21,6 +22,7 @@ import { IconTableCellRendererComponent } from './data-renderers/icon/icon-table
 import { NumericTableCellRendererComponent } from './data-renderers/numeric/numeric-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 { 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';
@@ -47,7 +49,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
     TraceCheckboxModule,
     FilterButtonModule,
     FilterModalModule,
-    PopoverModule
+    PopoverModule,
+    CopyToClipboardModule
   ],
   exports: [
     TableHeaderCellRendererComponent,
@@ -66,7 +69,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
     TimestampTableCellRendererComponent,
     TimeAgoTableCellRendererComponent,
     CodeTableCellRendererComponent,
-    StringArrayTableCellRendererComponent
+    StringArrayTableCellRendererComponent,
+    TextWithCopyActionTableCellRendererComponent
   ],
   providers: [
     {
@@ -80,7 +84,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
         TimestampTableCellRendererComponent,
         TimeAgoTableCellRendererComponent,
         CodeTableCellRendererComponent,
-        StringArrayTableCellRendererComponent
+        StringArrayTableCellRendererComponent,
+        TextWithCopyActionTableCellRendererComponent
       ],
       multi: true
     },

projects/components/src/table/cells/types/core-table-cell-renderer-type.ts

@@ -6,6 +6,7 @@ export const enum CoreTableCellRendererType {
   RowExpander = 'row-expander',
   StringArray = 'string-array',
   Text = 'text',
+  TextWithCopyAction = 'text-with-copy-action',
   Timestamp = 'timestamp',
   TimeAgo = 'time-ago'
 }