feat: adding a clear selected button to select option

projects/components/src/filtering/filter/filter-url.service.test.ts

@@ -62,7 +62,8 @@ describe('Filter URL service', () => {
     providers: [
       mockProvider(NavigationService, {
         navigation$: EMPTY,
-        addQueryParametersToUrl: (paramObject: QueryParamObject) => (testQueryParamObject = paramObject),
+        addQueryParametersToUrl: (paramObject: QueryParamObject) =>
+          (testQueryParamObject = { ...testQueryParamObject, ...paramObject }),
         getAllValuesForQueryParameter: (param: string) => testQueryParamObject[param] ?? []
       })
     ]
@@ -361,4 +362,23 @@ describe('Filter URL service', () => {
       filter: ['numberAttribute_neq_217', 'stringAttribute_eq_test', 'stringMapAttribute.myKey_eq_myValue']
     });
   });
+
+  test('correctly gets filters and group by from url', () => {
+    testQueryParamObject = {
+      ...expectedQueryParamObject,
+      ['group-by']: ['field1,field2']
+    };
+    expect(spectator.service.getUrlFilters(attributes)).toEqual(filters);
+    expect(spectator.service.getUrlGroupBy()).toEqual(['field1', 'field2']);
+  });
+
+  test('correctly sets filters and group by in url', () => {
+    spectator.service.setUrlGroupBy(['field1', 'field2']);
+    spectator.service.setUrlFilters(filters);
+
+    expect(testQueryParamObject).toEqual({
+      ...expectedQueryParamObject,
+      ['group-by']: ['field1,field2']
+    });
+  });
 });

projects/components/src/filtering/filter/filter-url.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { NavigationService } from '@hypertrace/common';
-import { remove } from 'lodash-es';
+import { isEmpty, remove } from 'lodash-es';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { FilterBuilderLookupService } from './builder/filter-builder-lookup.service';
@@ -15,6 +15,7 @@ import { splitFilterStringByOperator } from './parser/parsed-filter';
 })
 export class FilterUrlService {
   private static readonly FILTER_QUERY_PARAM: string = 'filter';
+  private static readonly GROUP_BY_QUERY_PARAM: string = 'group-by';
 
   public constructor(
     private readonly navigationService: NavigationService,
@@ -54,6 +55,19 @@ export class FilterUrlService {
     });
   }
 
+  public setUrlGroupBy(groupBy?: string[]): void {
+    this.navigationService.addQueryParametersToUrl({
+      [FilterUrlService.GROUP_BY_QUERY_PARAM]: isEmpty(groupBy) ? undefined : [groupBy!.toString()]
+    });
+  }
+
+  public getUrlGroupBy(): string[] {
+    return this.navigationService
+      .getAllValuesForQueryParameter(FilterUrlService.GROUP_BY_QUERY_PARAM)
+      .map(groupByString => groupByString.split(',').map(attributeName => attributeName.trim()))
+      .flat();
+  }
+
   public addUrlFilter(attributes: FilterAttribute[], filter: Filter): void {
     const remainingFilters = this.getUrlFilters(attributes).filter(f => areCompatibleFilters(f, filter));
 

projects/components/src/select/select.component.test.ts

@@ -342,4 +342,33 @@ describe('Select Component', () => {
     expect(onChange).not.toHaveBeenCalled();
     flush();
   }));
+
+  test('should show clear selected button', fakeAsync(() => {
+    spectator = hostFactory(
+      `
+    <ht-select [selected]="selected">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [selectedLabel]="option.selectedLabel">
+      </ht-select-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          selected: selectionOptions[1].value
+        }
+      }
+    );
+
+    spectator.tick();
+    spectator.click('.trigger-content');
+
+    const clearSelectedButton = spectator.query('.clear-selected', { root: true });
+    expect(clearSelectedButton).toExist();
+    spectator.click(clearSelectedButton!);
+
+    spectator.tick();
+    expect(spectator.component.selected).toBe(undefined);
+    expect(spectator.query('.clear-selected', { root: true })).not.toExist();
+
+    flush();
+  }));
 });

projects/components/src/select/select.component.ts

@@ -24,6 +24,7 @@ import { SelectJustify } from './select-justify';
 import { SelectOption } from './select-option';
 import { SelectOptionComponent } from './select-option.component';
 import { SelectSize } from './select-size';
+import { ButtonRole, ButtonStyle } from '../button/button';
 
 @Component({
   selector: 'ht-select',
@@ -134,6 +135,15 @@ import { SelectSize } from './select-size';
               </ht-event-blocker>
               <ht-divider class="divider"></ht-divider>
             </ng-container>
+            <ht-button
+              class="clear-selected"
+              *ngIf="this.selected !== undefined"
+              role="${ButtonRole.Primary}"
+              display="${ButtonStyle.Text}"
+              label="Clear Selected"
+              (click)="this.onClearSelected()"
+            ></ht-button>
+
             <ng-container *htLetAsync="this.topControlItems$ as topControlItems">
               <div *ngIf="topControlItems?.length !== 0">
                 <ng-container
@@ -311,6 +321,10 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
     this.propagateValueChangeToFormControl(this.selected);
   }
 
+  public onClearSelected(): void {
+    this.setSelection();
+  }
+
   private setSelection(value?: V): void {
     this.selected = value;
     this.selected$ = this.buildObservableOfSelected();

projects/components/src/select/select.module.ts

@@ -15,6 +15,7 @@ import { SelectControlOptionComponent } from './select-control-option.component'
 import { SelectGroupComponent } from './select-group.component';
 import { SelectOptionComponent } from './select-option.component';
 import { SelectComponent } from './select.component';
+import { ButtonModule } from '../button/button.module';
 
 @NgModule({
   imports: [
@@ -28,7 +29,8 @@ import { SelectComponent } from './select.component';
     DividerModule,
     MemoizeModule,
     TraceSearchBoxModule,
-    EventBlockerModule
+    EventBlockerModule,
+    ButtonModule
   ],
   declarations: [
     SelectComponent,