Merge branch 'feat/domain-validator' of github.com:hypertrace/hypertrace-ui into feat/domain-validator

Author: adisreyaj

package-lock.json

@@ -37,13 +37,13 @@
     "@angular/platform-browser-dynamic": "^12.2.1",
     "@angular/router": "^12.2.1",
     "@apollo/client": "^3.5.8",
-    "@fullstory/browser": "^1.4.10",
+    "@fullstory/browser": "^1.5.0",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.6.0",
     "@types/d3-hierarchy": "^2.0.2",
     "@types/d3-transition": "1.1.5",
     "apollo-angular": "^2.6.0",
-    "core-js": "^3.20.3",
+    "core-js": "^3.21.0",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
     "d3-brush": "^1.1.6",
@@ -92,26 +92,26 @@
     "@types/d3-shape": "^2.1.0",
     "@types/d3-zoom": "^1.7.5",
     "@types/jest": "^27.4.0",
-    "@types/lodash-es": "^4.17.5",
-    "@types/mixpanel-browser": "^2.36.0",
-    "@types/node": "^17.0.13",
+    "@types/lodash-es": "^4.17.6",
+    "@types/mixpanel-browser": "^2.38.0",
+    "@types/node": "^17.0.15",
     "@types/uuid": "^8.3.4",
     "@types/webpack-env": "^1.16.3",
     "codelyzer": "^6.0.2",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
-    "jest-config": "^27.4.7",
+    "jest-config": "^27.5.0",
     "jest-html-reporter": "^3.4.2",
     "jest-junit": "^13.0.0",
     "jest-preset-angular": "^8.4.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^13.0.0",
+    "ng-mocks": "^13.0.2",
     "ng-packagr": "^12.2.5",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.3",
-    "ts-node": "~10.4.0",
+    "ts-node": "~10.5.0",
     "tslint": "~6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "~4.3.5",

package.json

@@ -1,6 +1,4 @@
-export const DOMAIN_REGEX = new RegExp(
-  /^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-);
+export const DOMAIN_REGEX = new RegExp(/^.+\.[a-zA-Z]{2,}$/);
 
 export const isDomainValid = (domain: string) => {
   return DOMAIN_REGEX.test(domain);

projects/common/src/utilities/validators/domain-validator.ts

@@ -30,6 +30,10 @@
     height: 34px;
     border-radius: 6px;
 
+    &.disabled {
+      cursor: not-allowed;
+    }
+
     &.extra-small {
       height: 30px;
     }

projects/components/src/multi-select/multi-select.component.scss

@@ -80,7 +80,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: selectionOptions[1].label,
-          selectedItemsCount: 1 // Selected element is 1 as set in hostProps
+          overflowItemsCount: 0,
+          overflowLabel: undefined
         }
       });
     });
@@ -116,7 +117,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: selectionOptions[1].label,
-          selectedItemsCount: 2
+          overflowItemsCount: 1,
+          overflowLabel: 'third'
         }
       });
     });
@@ -159,7 +161,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: 'second',
-          selectedItemsCount: 2
+          overflowItemsCount: 1,
+          overflowLabel: 'third'
         }
       });
     });
@@ -232,7 +235,8 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: 'second',
-          selectedItemsCount: 2
+          overflowItemsCount: 1,
+          overflowLabel: 'third'
         }
       });
     });
@@ -368,7 +372,7 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('(x|)', {
         x: {
           label: 'Placeholder',
-          selectedItemsCount: 0
+          overflowItemsCount: 0
         }
       });
     });
@@ -398,7 +402,7 @@ describe('Multi Select Component', () => {
       expectObservable(spectator.component.triggerValues$).toBe('x', {
         x: {
           label: selectionOptions[1].label,
-          selectedItemsCount: 1
+          overflowItemsCount: 0
         }
       });
     });

projects/components/src/multi-select/multi-select.component.test.ts

@@ -53,15 +53,23 @@ import { MultiSelectJustify } from './multi-select-justify';
           <div
             class="trigger-content"
             [style.justify-content]="this.justify"
-            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '', this.size]"
+            [ngClass]="[
+              this.triggerLabelDisplayMode,
+              this.popoverOpen ? 'open' : '',
+              this.size,
+              this.disabled ? 'disabled' : ''
+            ]"
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"></ht-icon>
             <ng-container *ngIf="!this.isIconOnlyMode()">
               <div class="trigger-label-container" *ngIf="this.triggerValues$ | async as triggerValues">
                 <ht-label class="trigger-label" [label]="triggerValues.label"></ht-label>
-                <span *ngIf="triggerValues.selectedItemsCount > 1" class="trigger-more-items"
-                  >+{{ triggerValues.selectedItemsCount - 1 }}</span
+                <span
+                  *ngIf="triggerValues.overflowItemsCount"
+                  class="trigger-more-items"
+                  [htTooltip]="triggerValues.overflowLabel"
+                  >+{{ triggerValues.overflowItemsCount }}</span
                 >
                 <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" [size]="this.iconSize"></ht-icon>
               </div>
@@ -262,6 +270,10 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
     this.propagateControlValueChangeOnTouch = onTouch;
   }
 
+  public setDisabledState(isDisabled?: boolean): void {
+    this.disabled = isDisabled ?? false;
+  }
+
   private setSelection(selected: V[]): void {
     this.selected = selected;
     this.setTriggerLabel();
@@ -273,7 +285,7 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
     if (this.triggerLabelDisplayMode === TriggerLabelDisplayMode.Placeholder) {
       this.triggerValues$ = of({
         label: this.placeholder,
-        selectedItemsCount: 0
+        overflowItemsCount: 0
       });
 
       return;
@@ -282,10 +294,17 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
     this.triggerValues$ = this.allOptions$?.pipe(
       map(options => {
         const selectedItems: SelectOptionComponent<V>[] = options.filter(item => this.isSelectedItem(item));
+        const isMultiSelection = selectedItems.length > 1;
 
         return {
           label: this.getLabel(selectedItems),
-          selectedItemsCount: selectedItems.length
+          overflowItemsCount: isMultiSelection ? selectedItems.length - 1 : 0,
+          overflowLabel: isMultiSelection
+            ? selectedItems
+                .slice(1)
+                .map(item => item.label)
+                .join(', ')
+            : undefined
         };
       })
     );
@@ -307,7 +326,8 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
 
 interface TriggerValues {
   label: string | undefined;
-  selectedItemsCount: number;
+  overflowItemsCount: number;
+  overflowLabel?: string;
 }
 
 export const enum TriggerLabelDisplayMode {

projects/components/src/multi-select/multi-select.component.ts

@@ -8,6 +8,7 @@ import { LabelModule } from '../label/label.module';
 import { LoadAsyncModule } from '../load-async/load-async.module';
 import { PopoverModule } from '../popover/popover.module';
 import { TraceSearchBoxModule } from '../search-box/search-box.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
 import { MultiSelectComponent } from './multi-select.component';
 
 @NgModule({
@@ -20,7 +21,8 @@ import { MultiSelectComponent } from './multi-select.component';
     TraceSearchBoxModule,
     ButtonModule,
     LoadAsyncModule,
-    TraceCheckboxModule
+    TraceCheckboxModule,
+    TooltipModule
   ],
   declarations: [MultiSelectComponent],
   exports: [MultiSelectComponent]

projects/components/src/multi-select/multi-select.module.ts

@@ -8,7 +8,14 @@ import {
   QueryList
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Color, FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
+import {
+  Color,
+  FeatureState,
+  NavigationParams,
+  NavigationParamsType,
+  NavigationService,
+  queryListAndChanges$
+} from '@hypertrace/common';
 import { merge, Observable } from 'rxjs';
 import { distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
 import { NavigableTabComponent } from './navigable-tab.component';
@@ -20,7 +27,7 @@ import { NavigableTabComponent } from './navigable-tab.component';
   template: `
     <div class="tab-group">
       <nav mat-tab-nav-bar *htLetAsync="this.activeTab$ as activeTab" disableRipple>
-        <ng-container *ngFor="let tab of this.tabs">
+        <ng-container *ngFor="let tab of this.tabs$ | async">
           <ng-container *ngIf="!tab.hidden">
             <div class="tab-button" *htIfFeature="tab.featureFlags | htFeature as featureState">
               <ht-link
@@ -53,19 +60,21 @@ import { NavigableTabComponent } from './navigable-tab.component';
 })
 export class NavigableTabGroupComponent implements AfterContentInit {
   @ContentChildren(NavigableTabComponent)
-  public tabs!: QueryList<NavigableTabComponent>;
+  private readonly tabs!: QueryList<NavigableTabComponent>;
 
   @Output()
   public readonly tabChange: EventEmitter<string | undefined> = new EventEmitter<string | undefined>();
 
   public activeTab$?: Observable<NavigableTabComponent | undefined>;
+  public tabs$!: Observable<NavigableTabComponent[]>;
 
   public constructor(
     public readonly navigationService: NavigationService,
     private readonly activatedRoute: ActivatedRoute
   ) {}
 
   public ngAfterContentInit(): void {
+    this.tabs$ = queryListAndChanges$(this.tabs).pipe(map(list => list.toArray()));
     this.activeTab$ = merge(this.navigationService.navigation$, this.tabs.changes).pipe(
       startWith(undefined),
       map(() => this.findActiveTab()),