From 6de928d9cdf789620471d22201528e19ff842996 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Thu, 15 Apr 2021 18:22:05 -0700
Subject: [PATCH 1/2] feat: adding explore filter link component

---
 projects/observability/src/public-api.ts      |  4 ++
 .../explore-filter-link.component.scss        | 18 ++++++++
 .../explore-filter-link.component.test.ts     | 41 +++++++++++++++++++
 .../explore-filter-link.component.ts          | 20 +++++++++
 .../explore-filter-link.module.ts             | 11 +++++
 5 files changed, 94 insertions(+)
 create mode 100644 projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.scss
 create mode 100644 projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts
 create mode 100644 projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.ts
 create mode 100644 projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts

diff --git a/projects/observability/src/public-api.ts b/projects/observability/src/public-api.ts
index d720965dd..462c84681 100644
--- a/projects/observability/src/public-api.ts
+++ b/projects/observability/src/public-api.ts
@@ -197,6 +197,10 @@ export * from './shared/components/timeline-card-list/timeline-card-list.compone
 export * from './shared/components/timeline-card-list/container/timeline-card-container.component';
 export * from './shared/components/timeline-card-list/timeline-card-list.module';
 
+// Explore Filter link
+export * from './shared/components/explore-filter-link/explore-filter-link.component';
+export * from './shared/components/explore-filter-link/explore-filter-link.module';
+
 // Interval Select
 export * from './shared/components/interval-select/interval-select.component';
 export * from './shared/components/interval-select/interval-select.module';
diff --git a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.scss b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.scss
new file mode 100644
index 000000000..5c8a1ab76
--- /dev/null
+++ b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.scss
@@ -0,0 +1,18 @@
+@import 'font';
+@import 'color-palette';
+
+.explore-filter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .filter-icon {
+    transition: all 0.2s ease-in-out;
+  }
+
+  &:hover {
+    .filter-icon {
+      transform: scale(1.2);
+    }
+  }
+}
diff --git a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts
new file mode 100644
index 000000000..dc74ef01b
--- /dev/null
+++ b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts
@@ -0,0 +1,41 @@
+import { LinkComponent, IconComponent, IconSize } from '@hypertrace/components';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { ExploreFilterLinkComponent } from './explore-filter-link.component';
+import { IconType } from '@hypertrace/assets-library';
+
+describe('Explore Filter Link component', () => {
+  let spectator: SpectatorHost<ExploreFilterLinkComponent>;
+
+  const createHost = createHostFactory({
+    component: ExploreFilterLinkComponent,
+    declarations: [MockComponent(LinkComponent), MockComponent(IconComponent)]
+  });
+
+  test('should display all elements', () => {
+    spectator = createHost(`<ht-link [paramsOrUrl]="paramsOrUrl"></ht-link>`, {
+      props: {
+        paramsOrUrl: undefined
+      }
+    });
+
+    expect(spectator.query('.ht-link')).not.toExist();
+  });
+
+  test('Link should navigate correctly to external URLs', () => {
+    spectator = createHost(`<ht-explore-filter-link [paramsOrUrl]="paramsOrUrl"></ht-explore-filter-link>`, {
+      hostProps: {
+        paramsOrUrl: 'http://test.hypertrace.ai'
+      }
+    });
+
+    const linkComponent = spectator.query(LinkComponent);
+    expect(linkComponent).toExist();
+    expect(linkComponent?.paramsOrUrl).toEqual('http://test.hypertrace.ai');
+
+    const iconComponent = spectator.query(IconComponent);
+    expect(iconComponent).toExist();
+    expect(iconComponent?.icon).toEqual(IconType.Filter);
+    expect(iconComponent?.size).toEqual(IconSize.Small);
+  });
+});
diff --git a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.ts b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.ts
new file mode 100644
index 000000000..eeeaa7bdd
--- /dev/null
+++ b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IconType } from '@hypertrace/assets-library';
+import { NavigationParams } from '@hypertrace/common';
+import { IconSize } from '@hypertrace/components';
+
+@Component({
+  selector: 'ht-explore-filter-link',
+  styleUrls: ['./explore-filter-link.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ht-link class="explore-filter" [paramsOrUrl]="this.paramsOrUrl">
+      <ng-content></ng-content>
+      <ht-icon class="filter-icon" size="${IconSize.ExtraSmall}" icon="${IconType.Filter}"></ht-icon>
+    </ht-link>
+  `
+})
+export class ExploreFilterLinkComponent {
+  @Input()
+  public paramsOrUrl?: NavigationParams | string;
+}
diff --git a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts
new file mode 100644
index 000000000..c59350968
--- /dev/null
+++ b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts
@@ -0,0 +1,11 @@
+import { LinkModule, IconModule } from '@hypertrace/components';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ExploreFilterLinkComponent } from './explore-filter-link.component';
+
+@NgModule({
+  declarations: [ExploreFilterLinkComponent],
+  exports: [ExploreFilterLinkComponent],
+  imports: [CommonModule, LinkModule, IconModule]
+})
+export class ExploreFilterLinkModule {}

From 4e8cec3102cf9fd0c5e22858e31cd61bedc8bdc1 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Fri, 16 Apr 2021 08:24:49 -0700
Subject: [PATCH 2/2] refactor: fixing lint

---
 .../explore-filter-link.component.test.ts                 | 8 ++++----
 .../explore-filter-link/explore-filter-link.module.ts     | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts
index dc74ef01b..a58444987 100644
--- a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts
+++ b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts
@@ -1,8 +1,8 @@
-import { LinkComponent, IconComponent, IconSize } from '@hypertrace/components';
+import { IconType } from '@hypertrace/assets-library';
+import { IconComponent, IconSize, LinkComponent } from '@hypertrace/components';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { ExploreFilterLinkComponent } from './explore-filter-link.component';
-import { IconType } from '@hypertrace/assets-library';
 
 describe('Explore Filter Link component', () => {
   let spectator: SpectatorHost<ExploreFilterLinkComponent>;
@@ -13,7 +13,7 @@ describe('Explore Filter Link component', () => {
   });
 
   test('should display all elements', () => {
-    spectator = createHost(`<ht-link [paramsOrUrl]="paramsOrUrl"></ht-link>`, {
+    spectator = createHost(`<ht-explore-filter-link [paramsOrUrl]="paramsOrUrl"></ht-explore-filter-link>`, {
       props: {
         paramsOrUrl: undefined
       }
@@ -36,6 +36,6 @@ describe('Explore Filter Link component', () => {
     const iconComponent = spectator.query(IconComponent);
     expect(iconComponent).toExist();
     expect(iconComponent?.icon).toEqual(IconType.Filter);
-    expect(iconComponent?.size).toEqual(IconSize.Small);
+    expect(iconComponent?.size).toEqual(IconSize.ExtraSmall);
   });
 });
diff --git a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts
index c59350968..9c23c0e20 100644
--- a/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts
+++ b/projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts
@@ -1,6 +1,6 @@
-import { LinkModule, IconModule } from '@hypertrace/components';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { IconModule, LinkModule } from '@hypertrace/components';
 import { ExploreFilterLinkComponent } from './explore-filter-link.component';
 
 @NgModule({