feat: adding explore filter link component (#776)

* feat: adding explore filter link component

* refactor: fixing lint

Author: anandtiwary

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';

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);
+    }
+  }
+}

projects/observability/src/shared/components/explore-filter-link/explore-filter-link.component.test.ts

@@ -0,0 +1,41 @@
+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';
+
+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-explore-filter-link [paramsOrUrl]="paramsOrUrl"></ht-explore-filter-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.ExtraSmall);
+  });
+});

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;
+}

projects/observability/src/shared/components/explore-filter-link/explore-filter-link.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconModule, LinkModule } from '@hypertrace/components';
+import { ExploreFilterLinkComponent } from './explore-filter-link.component';
+
+@NgModule({
+  declarations: [ExploreFilterLinkComponent],
+  exports: [ExploreFilterLinkComponent],
+  imports: [CommonModule, LinkModule, IconModule]
+})
+export class ExploreFilterLinkModule {}