Merge branch 'main' into minor-changes-to-components

Author: anandtiwary

package-lock.json

@@ -94,7 +94,7 @@
     "@types/jest": "^27.4.1",
     "@types/lodash-es": "^4.17.6",
     "@types/mixpanel-browser": "^2.38.0",
-    "@types/node": "^17.0.21",
+    "@types/node": "^17.0.23",
     "@types/uuid": "^8.3.4",
     "@types/webpack-env": "^1.16.3",
     "codelyzer": "^6.0.2",

package.json

@@ -99,3 +99,18 @@
     cursor: not-allowed;
   }
 }
+
+@mixin nav-primary-background {
+  background: $blue-6;
+  opacity: 0.95;
+}
+
+@mixin nav-primary-background-hover {
+  background: $blue-8;
+  opacity: 0.95;
+}
+
+@mixin nav-secondary-background {
+  background: $blue-9;
+  opacity: 0.95;
+}

projects/assets-library/assets/styles/_interaction.scss

@@ -1,11 +1,20 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { TimeDuration, TimeUnit, UnitStringType } from './../../../public-api';
 import { durationFormatter } from './duration-formatter';
 
 @Pipe({
   name: 'htDisplayDuration'
 })
 export class DisplayDurationPipe implements PipeTransform {
-  public transform(millis?: number): string {
-    return durationFormatter(millis);
+  public transform(millis?: number, unitStringType: UnitStringType = UnitStringType.Short): string {
+    if (millis === undefined) {
+      return '-';
+    }
+
+    if (unitStringType === UnitStringType.Short) {
+      return durationFormatter(millis);
+    }
+
+    return new TimeDuration(millis, TimeUnit.Millisecond).toMultiUnitString(TimeUnit.Second, true, UnitStringType.Long);
   }
 }

projects/common/src/utilities/formatters/duration/display-duration.pipe.ts

@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { isArray } from 'lodash-es';
 import { assertUnreachable } from '../../lang/lang-utils';
 
+// TODO: Currently htHighlight does not escape reserved regex characters
 @Pipe({ name: 'htHighlight' })
 export class HighlightPipe implements PipeTransform {
   public transform(fullText: string, highlightSnippets: TextHighlightConfig | TextHighlightConfig[]): string {

projects/common/src/utilities/formatters/string/highlight.pipe.ts

@@ -10,10 +10,15 @@
   justify-content: flex-start;
   align-items: center;
 
-  border-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
   padding-left: 16px;
   padding-right: 16px;
 
+  &.collapsed {
+    border-radius: 0;
+  }
+
   .label-container {
     flex-grow: 1;
     margin-left: 14px;
@@ -27,40 +32,37 @@
   }
 
   .icon {
-    color: $gray-4;
+    color: $gray-1;
   }
 
   .label {
     flex: 1;
-    @include body-1-medium($gray-6);
+    @include body-1-medium($gray-2);
   }
 
   &.active {
-    background-color: $gray-2;
+    @include nav-primary-background;
 
-    .label {
-      color: $gray-9;
+    &:hover {
+      background-color: $blue-5;
     }
 
-    .icon {
-      color: $gray-6;
+    .label {
+      color: white;
     }
 
-    &:hover {
-      background-color: $gray-1;
+    .icon {
+      color: white;
     }
   }
 
   &:hover {
-    background-color: $gray-1;
+    @include nav-primary-background;
   }
 
   .soon-container {
     flex: 0;
-    display: flex;
-    flex-direction: row;
-    vertical-align: center;
-    align-items: center;
+    @include center-contents;
   }
 
   .soon {
@@ -71,6 +73,36 @@
     font-weight: 600;
     padding: 2px 4px;
   }
+
+  &:not(.navigation-dark) {
+    border-radius: 4px;
+    .icon {
+      color: $gray-4;
+    }
+    .label {
+      @include body-1-medium($gray-6);
+    }
+
+    &:hover {
+      background-color: $gray-1;
+    }
+
+    &.active {
+      background-color: $gray-2;
+
+      .label {
+        color: $gray-9;
+      }
+
+      .icon {
+        color: $gray-6;
+      }
+
+      &:hover {
+        background-color: $gray-1;
+      }
+    }
+  }
 }
 
 :hover {

projects/components/src/navigation/nav-item/nav-item.component.scss

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common';
 import { IconSize } from '../../icon/icon-size';
-import { NavItemLinkConfig } from '../navigation.config';
+import { NavItemLinkConfig, NavViewStyle } from '../navigation.config';
 
 @Component({
   selector: 'ht-nav-item',
@@ -13,7 +13,7 @@ import { NavItemLinkConfig } from '../navigation.config';
       <div
         *htIfFeature="this.config.featureState$ | async as featureState"
         class="nav-item"
-        [ngClass]="{ active: this.active }"
+        [ngClass]="[this.active ? 'active' : '', this.navItemViewStyle ?? '', this.collapsed ? 'collapsed' : '']"
       >
         <ht-icon
           class="icon"
@@ -54,6 +54,9 @@ export class NavItemComponent {
   @Input()
   public collapsed: boolean = true;
 
+  @Input()
+  public readonly navItemViewStyle?: NavViewStyle;
+
   public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => ({
     navType: NavigationParamsType.InApp,
     path: item.matchPaths[0],

projects/components/src/navigation/nav-item/nav-item.component.ts

@@ -1,7 +1,7 @@
-@import 'color-palette';
-@import 'font';
+@import 'mixins';
 
 .navigation-list {
+  @include nav-secondary-background;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -12,7 +12,8 @@
 
   .content {
     overflow-y: auto;
-    padding: 18px 12px;
+    overflow-x: hidden;
+    padding: 18px 0 12px 12px;
 
     .nav-header {
       padding-top: 24px;
@@ -23,7 +24,7 @@
       align-items: center;
 
       .label {
-        @include overline($gray-9);
+        @include overline($blue-2);
       }
 
       .beta {
@@ -33,19 +34,17 @@
   }
 
   .resize-tab-button {
+    @include nav-secondary-background;
     position: absolute;
     display: flex;
     align-items: center;
     top: 22px;
     right: -12px;
     height: 28px;
     width: 12px;
-    border: 1px solid $gray-2;
-    border-left-color: white;
     border-radius: 0 6px 6px 0;
     cursor: pointer;
-    color: $gray-7;
-    background: white;
+    color: white;
 
     &:hover {
       color: $gray-4;
@@ -58,31 +57,100 @@
   }
 
   .footer {
+    display: flex;
+    flex-direction: column;
     position: relative;
-    margin-left: 6px;
     color: $gray-5;
     padding: 8px 12px 18px;
 
     .footer-item {
       display: flex;
       align-items: center;
-      margin-left: 12px;
+      justify-content: center;
+
+      .nav-group-icon {
+        height: 190px;
+        opacity: 0.15;
+        color: $blue-gray-4;
+      }
+
+      .nav-group-label {
+        margin: 10px auto 0 0;
+        padding-right: 20px;
+        font-size: 24px;
+        font-weight: bold;
+        color: $gray-4;
+      }
 
       .link {
+        margin-right: auto;
         @include link;
         @include footnote($gray-5);
       }
     }
 
     .nav-divider {
-      position: absolute;
-      top: 0;
-      left: 24px;
-      margin: 0;
+      margin: 12px auto 8px 0;
       height: 1px;
       width: 16px;
-      background-color: $gray-2;
-      border: none;
+      background-color: $gray-4;
+    }
+  }
+
+  &:not(.expanded) {
+    .footer .footer-item .link {
+      margin-right: 0;
+    }
+
+    .footer .nav-divider {
+      margin: 8px auto;
+    }
+
+    .content {
+      padding: 18px 0 12px 0;
+    }
+  }
+
+  &:not(.navigation-dark) {
+    background: white;
+
+    .content {
+      padding: 18px 12px;
+    }
+    &:not(.expanded) {
+      .content {
+        padding: 18px 12px;
+      }
+    }
+
+    .content .nav-header .label {
+      @include overline($gray-9);
+    }
+
+    .footer {
+      margin-left: 6px;
+
+      .footer-item {
+        margin-left: 12px;
+        justify-content: unset;
+      }
+      .nav-divider {
+        position: absolute;
+        top: 0;
+        left: 24px;
+        margin: 0;
+        height: 1px;
+        width: 16px;
+        background-color: $gray-2;
+        border: none;
+      }
+    }
+
+    .resize-tab-button {
+      border: 1px solid $gray-2;
+      border-left-color: white;
+      color: $gray-7;
+      background: white;
     }
   }
 }