From 9647d0db99e6ecd909bb413b460679121fc60b33 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Wed, 31 Mar 2021 16:09:54 -0700
Subject: [PATCH 1/7] feat: adding grouped style

---
 .../card-list/card-list.component.scss        | 30 ++++++++++++++
 .../card-list/card-list.component.test.ts     | 39 ++++++++++++++++++
 .../card-list/card-list.component.ts          | 41 +++++++++++--------
 .../container/card-container.component.ts     |  7 +++-
 4 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/projects/observability/src/shared/components/card-list/card-list.component.scss b/projects/observability/src/shared/components/card-list/card-list.component.scss
index 133846314..27ac8c325 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.scss
+++ b/projects/observability/src/shared/components/card-list/card-list.component.scss
@@ -1,5 +1,9 @@
 @import 'mixins';
 
+@mixin grouped-style($color: white) {
+  box-shadow: 0 3px 0 -1px $color, 0 4px 0 -1px $gray-2;
+}
+
 .ht-card-list {
   display: flex;
   flex-direction: column;
@@ -23,9 +27,19 @@
       background: $blue-1;
       border: 1px solid $blue-2;
 
+      &.grouped-style {
+        margin-bottom: 8px;
+        @include grouped-style($blue-1);
+      }
+
       &:hover {
         background: $blue-2;
         border: 1px solid $blue-5;
+
+        &.grouped-style {
+          margin-bottom: 8px;
+          @include grouped-style($blue-2);
+        }
       }
     }
 
@@ -33,6 +47,22 @@
       background: $gray-1;
       border: 1px solid $gray-2;
     }
+
+    &.grouped-style {
+      margin-bottom: 8px;
+      @include grouped-style($gray-1);
+    }
+  }
+
+  .card:before {
+    content: ' ';
+    position: absolute;
+    z-index: -1;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border: 5px solid #ffea00;
   }
 
   .list {
diff --git a/projects/observability/src/shared/components/card-list/card-list.component.test.ts b/projects/observability/src/shared/components/card-list/card-list.component.test.ts
index eb35429fc..5f446c21f 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.test.ts
+++ b/projects/observability/src/shared/components/card-list/card-list.component.test.ts
@@ -62,4 +62,43 @@ describe('Card List component', () => {
     expect(spectator.query('.selected-card')).not.toBe(cardElements[1]);
     expect(spectator.query('.selected-card')).not.toBe(cardElements[2]);
   });
+
+  test('should apply grouped style class', () => {
+    const data = [
+      {
+        name: 'first'
+      },
+      {
+        name: 'second'
+      },
+      {
+        name: 'third'
+      }
+    ];
+
+    spectator = createHost(
+      `
+    <ht-card-list [mode]="mode">
+      <ht-card-container *ngFor="let cardData of this.data; first" showGroupedStyle="{{cardData === first ? true: false}}">
+        <div class="custom-card">
+          <div class="title">{{cardData.name}}</div>
+        </div>
+      </ht-card-container>
+    </ht-card-list>
+    `,
+      {
+        hostProps: {
+          data: data,
+          mode: CardListMode.Card
+        }
+      }
+    );
+
+    // Test selection style
+    const cardElements = spectator.queryAll('.card');
+    spectator.click(cardElements[0]);
+    expect(spectator.query('.grouped-style')).toBe(cardElements[0]);
+    expect(spectator.query('.grouped-style')).not.toBe(cardElements[1]);
+    expect(spectator.query('.grouped-style')).not.toBe(cardElements[2]);
+  });
 });
diff --git a/projects/observability/src/shared/components/card-list/card-list.component.ts b/projects/observability/src/shared/components/card-list/card-list.component.ts
index c3c937fc7..068874ce6 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.ts
+++ b/projects/observability/src/shared/components/card-list/card-list.component.ts
@@ -1,4 +1,7 @@
-import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, AfterContentInit } from '@angular/core';
+import { queryListAndChanges$ } from '@hypertrace/common';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 import { CardContainerComponent } from './container/card-container.component';
 
 @Component({
@@ -7,8 +10,13 @@ import { CardContainerComponent } from './container/card-container.component';
     <div class="ht-card-list">
       <div
         class="content"
-        [ngClass]="this.getCardStyle(card)"
-        *ngFor="let card of this.cards"
+        [ngClass]="{
+          card: this.mode === '${CardListMode.Card}',
+          list: this.mode === '${CardListMode.List}',
+          'selected-card': this.selectedCard === card,
+          'grouped-style': card.showGroupedStyle
+        }"
+        *ngFor="let card of this.cards$ | async"
         (click)="this.onCardClicked(card)"
       >
         <ng-container *ngTemplateOutlet="card.content"></ng-container>
@@ -18,27 +26,26 @@ import { CardContainerComponent } from './container/card-container.component';
   styleUrls: ['./card-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CardListComponent {
-  @ContentChildren(CardContainerComponent)
-  public readonly cards!: QueryList<CardContainerComponent>;
-
+export class CardListComponent implements AfterContentInit {
   @Input()
   public mode?: CardListMode = CardListMode.List;
 
-  public selectedCard?: CardContainerComponent;
+  @ContentChildren(CardContainerComponent)
+  private readonly cards!: QueryList<CardContainerComponent>;
 
-  public onCardClicked(card: CardContainerComponent): void {
-    this.selectedCard = this.selectedCard === card ? undefined : card;
-  }
+  public cards$!: Observable<CardContainerComponent[]>;
 
-  public getCardStyle(card: CardContainerComponent): string[] {
-    const classes: string[] = [this.mode ?? CardListMode.List];
+  public ngAfterContentInit(): void {
+    this.cards$ = queryListAndChanges$(this.cards).pipe(
+      map(list => list.toArray()),
+      tap(console.log)
+    );
+  }
 
-    if (this.selectedCard === card) {
-      classes.push('selected-card');
-    }
+  public selectedCard?: CardContainerComponent;
 
-    return classes;
+  public onCardClicked(card: CardContainerComponent): void {
+    this.selectedCard = this.selectedCard === card ? undefined : card;
   }
 }
 
diff --git a/projects/observability/src/shared/components/card-list/container/card-container.component.ts b/projects/observability/src/shared/components/card-list/container/card-container.component.ts
index 36a9ceb1e..3a89826da 100644
--- a/projects/observability/src/shared/components/card-list/container/card-container.component.ts
+++ b/projects/observability/src/shared/components/card-list/container/card-container.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '@hypertrace/components';
 
 @Component({
@@ -6,4 +6,7 @@ import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '@hypertrace/components';
   template: CONTENT_HOLDER_TEMPLATE,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CardContainerComponent extends ContentHolder {}
+export class CardContainerComponent extends ContentHolder {
+  @Input()
+  public showGroupedStyle: boolean = false;
+}

From fbc845cebaccad749048a5a7e4d0e66a7c2edcef Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Wed, 31 Mar 2021 16:13:21 -0700
Subject: [PATCH 2/7] refactor: remove unused style

---
 .../components/card-list/card-list.component.scss     | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/projects/observability/src/shared/components/card-list/card-list.component.scss b/projects/observability/src/shared/components/card-list/card-list.component.scss
index 27ac8c325..6e846853f 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.scss
+++ b/projects/observability/src/shared/components/card-list/card-list.component.scss
@@ -54,17 +54,6 @@
     }
   }
 
-  .card:before {
-    content: ' ';
-    position: absolute;
-    z-index: -1;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border: 5px solid #ffea00;
-  }
-
   .list {
     &:first-child {
       margin-top: 12px;

From e05f82f4dad1f78b5c63e4839a1be8486fec5cf2 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Wed, 31 Mar 2021 16:16:16 -0700
Subject: [PATCH 3/7] refactor: remove console log

---
 .../src/shared/components/card-list/card-list.component.ts   | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/projects/observability/src/shared/components/card-list/card-list.component.ts b/projects/observability/src/shared/components/card-list/card-list.component.ts
index 068874ce6..336a414c2 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.ts
+++ b/projects/observability/src/shared/components/card-list/card-list.component.ts
@@ -36,10 +36,7 @@ export class CardListComponent implements AfterContentInit {
   public cards$!: Observable<CardContainerComponent[]>;
 
   public ngAfterContentInit(): void {
-    this.cards$ = queryListAndChanges$(this.cards).pipe(
-      map(list => list.toArray()),
-      tap(console.log)
-    );
+    this.cards$ = queryListAndChanges$(this.cards).pipe(map(list => list.toArray()));
   }
 
   public selectedCard?: CardContainerComponent;

From 81f6eb2d0505040baa831361708cc229957d2ea2 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Wed, 31 Mar 2021 17:11:08 -0700
Subject: [PATCH 4/7] refactor: removing unused import

---
 .../src/shared/components/card-list/card-list.component.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/observability/src/shared/components/card-list/card-list.component.ts b/projects/observability/src/shared/components/card-list/card-list.component.ts
index 336a414c2..726629f56 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.ts
+++ b/projects/observability/src/shared/components/card-list/card-list.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, AfterContentInit } from '@angular/core';
 import { queryListAndChanges$ } from '@hypertrace/common';
 import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { CardContainerComponent } from './container/card-container.component';
 
 @Component({

From d1629e28e9afd4e04fb25dc1d53b4b1691880f20 Mon Sep 17 00:00:00 2001
From: Anand Tiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Wed, 31 Mar 2021 23:15:27 -0700
Subject: [PATCH 5/7] Update
 projects/observability/src/shared/components/card-list/card-list.component.scss

Co-authored-by: Aaron Steinfeld <45047841+aaron-steinfeld@users.noreply.github.com>
---
 .../src/shared/components/card-list/card-list.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/observability/src/shared/components/card-list/card-list.component.scss b/projects/observability/src/shared/components/card-list/card-list.component.scss
index 6e846853f..623fbf0c3 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.scss
+++ b/projects/observability/src/shared/components/card-list/card-list.component.scss
@@ -1,6 +1,6 @@
 @import 'mixins';
 
-@mixin grouped-style($color: white) {
+@mixin grouped-style($color) {
   box-shadow: 0 3px 0 -1px $color, 0 4px 0 -1px $gray-2;
 }
 

From 5df55962c58997a403fa4a215cac4ca9bbb87d34 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Thu, 1 Apr 2021 11:35:07 -0700
Subject: [PATCH 6/7] refactor: fix formatting

---
 .../src/shared/components/card-list/card-list.component.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/observability/src/shared/components/card-list/card-list.component.ts b/projects/observability/src/shared/components/card-list/card-list.component.ts
index 726629f56..99a11ac40 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.ts
+++ b/projects/observability/src/shared/components/card-list/card-list.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, AfterContentInit } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
 import { queryListAndChanges$ } from '@hypertrace/common';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';

From e4cfb4bd1dab7693b1291ec5e158732c24b8c998 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Thu, 1 Apr 2021 11:46:03 -0700
Subject: [PATCH 7/7] refactor: updating tests

---
 .../components/card-list/card-list.component.test.ts  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/projects/observability/src/shared/components/card-list/card-list.component.test.ts b/projects/observability/src/shared/components/card-list/card-list.component.test.ts
index 5f446c21f..daa74eb3d 100644
--- a/projects/observability/src/shared/components/card-list/card-list.component.test.ts
+++ b/projects/observability/src/shared/components/card-list/card-list.component.test.ts
@@ -66,20 +66,23 @@ describe('Card List component', () => {
   test('should apply grouped style class', () => {
     const data = [
       {
-        name: 'first'
+        name: 'first',
+        grouped: true
       },
       {
-        name: 'second'
+        name: 'second',
+        grouped: false
       },
       {
-        name: 'third'
+        name: 'third',
+        grouped: false
       }
     ];
 
     spectator = createHost(
       `
     <ht-card-list [mode]="mode">
-      <ht-card-container *ngFor="let cardData of this.data; first" showGroupedStyle="{{cardData === first ? true: false}}">
+      <ht-card-container *ngFor="let cardData of this.data; first" showGroupedStyle="cardData.grouped">
         <div class="custom-card">
           <div class="title">{{cardData.name}}</div>
         </div>