Merge branch 'i-frame' of github.com:razorpay/hypertrace-ui into i-frame

Author: jyothishjose6190

.github/workflows/build-and-test.yml

@@ -119,7 +119,7 @@ jobs:
           CHUNKS: ${{ needs['setup-test-batches'].outputs['test-chunks'] }}
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v2
         with:
           fail_ci_if_error: true
 

package-lock.json

@@ -36,14 +36,14 @@
     "@angular/platform-browser": "^12.2.1",
     "@angular/platform-browser-dynamic": "^12.2.1",
     "@angular/router": "^12.2.1",
-    "@apollo/client": "^3.5.7",
-    "@fullstory/browser": "^1.4.10",
+    "@apollo/client": "^3.5.8",
+    "@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",
@@ -76,8 +76,8 @@
     "@angular/cli": "12.2.1",
     "@angular/compiler-cli": "~12.2.1",
     "@angular/language-service": "~12.2.1",
-    "@commitlint/cli": "^16.1.0",
-    "@commitlint/config-conventional": "^16.0.0",
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
     "@compodoc/compodoc": "^1.1.18",
     "@ngneat/spectator": "^8.3.2",
     "@types/d3-array": "^2.9.0",
@@ -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.10",
+    "@types/lodash-es": "^4.17.6",
+    "@types/mixpanel-browser": "^2.38.0",
+    "@types/node": "^17.0.17",
     "@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.1",
     "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

@@ -122,4 +122,4 @@ export * from './time/time-unit.type';
 export * from './time/time';
 
 // Validators
-export * from './utilities/validators/email-validator';
+export * from './utilities/validators';

projects/common/src/public-api.ts

@@ -0,0 +1,23 @@
+import { isDomainValid } from './domain-validator';
+
+const VALID_DOMAINS = [
+  'google.com',
+  'fig.io',
+  'hypertrace.org',
+  'f4ncy-domain.cc',
+  'hypertrace.co.uk',
+  'HYPERTRACE.ORG',
+  'HYPER.TRACE.ORG',
+  'hyper.trace.org'
+];
+const INVALID_DOMAINS = ['.hypertrace.org.', 'hypertrace.42', 'hyper.$trace', 'hyper-trac.e'];
+describe('Domain validator', () => {
+  test('can validate email lists correctly', () => {
+    VALID_DOMAINS.forEach(domain => {
+      expect(isDomainValid(domain)).toBeTruthy();
+    });
+    INVALID_DOMAINS.forEach(domain => {
+      expect(isDomainValid(domain)).toBeFalsy();
+    });
+  });
+});

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

@@ -0,0 +1,5 @@
+export const DOMAIN_REGEX = new RegExp(/^.+\.[a-zA-Z]{2,}$/);
+
+export const isDomainValid = (domain: string) => DOMAIN_REGEX.test(domain);
+
+export const areDomainsValid = (domains: string[]) => domains.every(isDomainValid);

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

@@ -0,0 +1,2 @@
+export * from './domain-validator';
+export * from './email-validator';

projects/common/src/utilities/validators/index.ts

@@ -0,0 +1,51 @@
+@import 'mixins';
+
+.collapsible-sidebar {
+  height: inherit;
+  width: 220px;
+  position: relative;
+  border: 1px solid $gray-2;
+  border-radius: 8px;
+  padding: 8px;
+
+  .content {
+    @include fill-container;
+  }
+
+  &.collapsed {
+    width: 40px;
+
+    .content {
+      @include center-contents;
+
+      * {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  .string-label {
+    @include body-1-medium($gray-7);
+  }
+
+  .toggle {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: clamp(10px, 10%, 72px);
+    right: -12px;
+    height: 28px;
+    width: 12px;
+    border: 1px solid $gray-2;
+    border-left-color: white;
+    border-radius: 0 6px 6px 0;
+    cursor: pointer;
+    background: white;
+    padding-right: 4px;
+
+    .icon {
+      position: relative;
+      right: 6px;
+    }
+  }
+}

projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss

@@ -0,0 +1,31 @@
+import { fakeAsync } from '@angular/core/testing';
+import { IconType } from '@hypertrace/assets-library';
+import { createHostFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { IconComponent } from '../icon/icon.component';
+import { CollapsibleSidebarComponent } from './collapsible-sidebar.component';
+
+describe('Collapsible Sidebar Component', () => {
+  const createHost = createHostFactory({
+    component: CollapsibleSidebarComponent,
+    shallow: true,
+    declarations: [MockComponent(IconComponent)]
+  });
+
+  test('should render content correclty', fakeAsync(() => {
+    const spectator = createHost(
+      `<ht-collapsible-sidebar label="test-label"><div class="test-content"></div></ht-collapsible-sidebar>`
+    );
+
+    expect(spectator.query(IconComponent)?.icon).toBe(IconType.TriangleRight);
+    expect(spectator.query('.test-content')).not.toExist();
+    expect(spectator.query('.string-label')).toHaveText('test-label');
+
+    spectator.click(spectator.query('.toggle') as Element);
+    spectator.tick();
+
+    expect(spectator.query(IconComponent)?.icon).toBe(IconType.TriangleLeft);
+    expect(spectator.query('.test-content')).toExist();
+    expect(spectator.query('.string-label')).not.toExist();
+  }));
+});

projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef } from '@angular/core';
+import { IconType } from '@hypertrace/assets-library';
+import { IconSize } from '../icon/icon-size';
+
+@Component({
+  selector: 'ht-collapsible-sidebar',
+  styleUrls: ['./collapsible-sidebar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="collapsible-sidebar" [ngClass]="{ collapsed: !this.isExpanded }">
+      <div class="content">
+        <ng-container *ngIf="this.isExpanded; else labelTemplate"><ng-content></ng-content></ng-container>
+      </div>
+      <ng-template #stringLabelTemplate
+        ><span class="string-label">{{ this.label }}</span></ng-template
+      >
+      <ng-template #labelTemplate
+        ><ng-container *ngTemplateOutlet="this.isLabelATemplate ? this.label : stringLabelTemplate"></ng-container
+      ></ng-template>
+      <div class="toggle" (click)="this.toggleCollapseExpand()">
+        <ht-icon
+          class="icon"
+          [icon]="this.isExpanded ? '${IconType.TriangleLeft}' : '${IconType.TriangleRight}'"
+          size="${IconSize.Small}"
+        ></ht-icon>
+      </div>
+    </div>
+  `
+})
+export class CollapsibleSidebarComponent implements OnChanges {
+  @Input()
+  public label: string | TemplateRef<unknown> = '';
+
+  @Input()
+  public expanded: boolean = false;
+
+  public isExpanded: boolean = false;
+
+  public ngOnChanges(): void {
+    this.isExpanded = this.expanded;
+  }
+
+  public get isLabelATemplate(): boolean {
+    return typeof this.label !== 'string';
+  }
+
+  public toggleCollapseExpand(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+}