fix: table component should emit column change when columns are updat…

…ed (#2399)
hypertrace · Sep 15, 2023 · 80619ef · 80619ef
1 parent ca2a8f9
commit 80619ef
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/projects/components/src/table/table.component.test.ts b/projects/components/src/table/table.component.test.ts
@@ -445,6 +445,34 @@ describe('Table component', () => {
     flush();
   }));
 
+  test('should emit correctly on column changes', fakeAsync(() => {
+    const mockColumnConfigsChange = jest.fn();
+    const columns = buildColumns();
+    const spectator = createHost(
+      `<ht-table [columnConfigs]="columnConfigs" [data]="data" [selectionMode]="selectionMode"
+         [mode]="mode" (columnConfigsChange)="mockColumnConfigsChange($event)"></ht-table>`,
+      {
+        hostProps: {
+          columnConfigs: columns,
+          data: buildData(),
+          selectionMode: TableSelectionMode.Multiple,
+          mode: TableMode.Flat,
+          mockColumnConfigsChange: mockColumnConfigsChange
+        }
+      }
+    );
+
+    // Hiding a column
+    spectator.component.onHideColumn(columns[0]);
+    expect(mockColumnConfigsChange).toHaveBeenLastCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({ ...columns[0], visible: false }),
+        expect.objectContaining({ ...columns[1] })
+      ])
+    );
+    flush();
+  }));
+
   test('should select only selected rows', fakeAsync(() => {
     const columns = buildColumns();
     const rows = buildData();

diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts
@@ -2,8 +2,8 @@
 /* eslint-disable @angular-eslint/component-max-inline-declarations */
 import { ModalService } from '../modal/modal.service';
 import {
-  TableEditColumnsModalConfig,
-  TableEditColumnsModalComponent
+  TableEditColumnsModalComponent,
+  TableEditColumnsModalConfig
 } from './columns/table-edit-columns-modal.component';
 import { CdkHeaderRow } from '@angular/cdk/table';
 import {
@@ -35,7 +35,7 @@ import {
 } from '@hypertrace/common';
 import { isNil, without } from 'lodash-es';
 import { BehaviorSubject, combineLatest, merge, Observable, Subject } from 'rxjs';
-import { switchMap, take, filter, map } from 'rxjs/operators';
+import { filter, map, switchMap, take } from 'rxjs/operators';
 import { FilterAttribute } from '../filtering/filter/filter-attribute';
 import { LoadAsyncConfig } from '../load-async/load-async.service';
 import { PageEvent } from '../paginator/page.event';
@@ -719,7 +719,7 @@ export class TableComponent
     this.initialColumnConfigIdWidthMap = new Map(visibleColumns.map(column => [column.id, column.width ?? -1]));
     this.updateVisibleColumns(visibleColumns);
 
-    this.columnConfigsSubject.next(columnConfigurations);
+    this.propagateUpdatedColumns(columnConfigurations);
   }
 
   private checkColumnWidthCompatibilityOrThrow(width?: TableColumnWidth): void {
@@ -823,7 +823,7 @@ export class TableComponent
     const updatedColumns = this.columnConfigsSubject.value;
     this.updateVisibleColumns(updatedColumns.filter(c => c.visible));
     this.distributeWidthToColumns(TableColumnWidthUtil.getColWidthInPx(column.width));
-    this.columnConfigsSubject.next(updatedColumns);
+    this.propagateUpdatedColumns(updatedColumns);
   }
 
   public showEditColumnsModal(): void {
@@ -909,6 +909,11 @@ export class TableComponent
     return this.hasExpandableRows() ? index - 1 : index;
   }
 
+  private propagateUpdatedColumns(updatedColumns: TableColumnConfigExtended[]): void {
+    this.columnConfigsSubject.next(updatedColumns);
+    this.columnConfigsChange.next(updatedColumns);
+  }
+
   private buildColumnConfigExtendeds(columnConfigs: TableColumnConfig[]): TableColumnConfigExtended[] {
     const stateColumns = [];