Merge branch 'main' into fix-notification-operator

Author: anandtiwary

package-lock.json

@@ -35,12 +35,12 @@
     "@angular/platform-browser": "^11.2.0",
     "@angular/platform-browser-dynamic": "^11.2.0",
     "@angular/router": "^11.2.0",
-    "@apollo/client": "^3.3.10",
+    "@apollo/client": "^3.3.11",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.5.0",
     "@types/d3-hierarchy": "^2.0.0",
     "@types/d3-transition": "1.1.5",
-    "apollo-angular": "^2.3.0",
+    "apollo-angular": "^2.4.0",
     "core-js": "^3.8.3",
     "d3-array": "^2.11.0",
     "d3-axis": "^1.0.12",
@@ -64,14 +64,14 @@
     "rxjs": "~6.6.6",
     "tslib": "^2.1.0",
     "uuid": "^8.3.2",
-    "zone.js": "^0.10.3"
+    "zone.js": "^0.11.4"
   },
   "devDependencies": {
     "@angular-builders/jest": "^11.0.0",
     "@angular-devkit/build-angular": "~0.1102.0",
-    "@angular/cli": "11.2.0",
+    "@angular/cli": "11.2.3",
     "@angular/compiler-cli": "~11.2.0",
-    "@angular/language-service": "~11.2.0",
+    "@angular/language-service": "~11.2.4",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@compodoc/compodoc": "^1.1.11",
@@ -101,7 +101,7 @@
     "jest-html-reporter": "^3.2.0",
     "jest-junit": "^12.0.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^11.7.0",
+    "ng-mocks": "^11.9.0",
     "ng-packagr": "^11.2.2",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.0.0",

package.json

@@ -278,6 +278,7 @@ export * from './toggle-group/toggle-item';
 // Toggle Switch
 export * from './toggle-switch/toggle-switch.component';
 export * from './toggle-switch/toggle-switch.module';
+export { ToggleSwitchSize } from './toggle-switch/toggle-switch-size';
 
 // Tooltip
 export { TooltipModule } from './tooltip/tooltip.module';

projects/components/src/public-api.ts

@@ -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.scss

@@ -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.test.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/data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component.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/table-cells.module.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'
 }

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

@@ -1,4 +1,5 @@
 import { fakeAsync } from '@angular/core/testing';
+import { IconType } from '@hypertrace/assets-library';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { LabelComponent } from '../label/label.component';
@@ -23,6 +24,7 @@ describe('Toggle Group Component', () => {
       },
       {
         label: 'Second',
+        icon: IconType.Add,
         value: 'second-value'
       }
     ];

projects/components/src/toggle-group/toggle-group.component.test.ts

@@ -28,7 +28,12 @@ import { ToggleItemComponent } from './toggle-item.component';
         ></div>
         <div class="container" *ngFor="let item of this.items; let index = index">
           <div class="divider" *ngIf="index !== 0" [class.hide-divider]="this.shouldHideDivider(index)"></div>
-          <ht-toggle-item class="tab" [label]="item.label" (click)="this.setActiveItem(item)"></ht-toggle-item>
+          <ht-toggle-item
+            class="tab"
+            [label]="item.label"
+            [icon]="item.icon"
+            (click)="this.setActiveItem(item)"
+          ></ht-toggle-item>
         </div>
       </div>
     </div>