HParams: Fix bug where context menu stays open when another modal is opened (#6504)

## Motivation for features / changes
There was a bug where opening another modal (such as the column adder
using the + button) the context menu would not close. This happened
because of event propagation is disabled to allow nested context menus.

## Screenshots of UI changes (or N/A)
Before

![2f4c9735-0bc4-4356-97a2-49e3e85149a7](https://github.com/tensorflow/tensorboard/assets/78179109/61ae353e-96a0-424f-99f0-a46806b7cd0e)

After

![a95c50dd-c33f-4cd4-a8a1-fdde88885391](https://github.com/tensorflow/tensorboard/assets/78179109/7b3c5ba9-c62d-4781-b949-5908efe6cdbc)

Author: rileyajones

tensorboard/webapp/widgets/data_table/data_table_component.ng.html

@@ -12,7 +12,7 @@
 limitations under the License.
 -->
 
-<custom-modal #contextMenu>
+<custom-modal #contextMenu (onClose)="onContextMenuClosed()">
   <div class="context-menu">
     <div
       *ngIf="!contextMenuHeader?.removable && !contextMenuHeader?.sortable && !canContextMenuInsert()"
@@ -50,15 +50,15 @@
       mat-button
       *ngIf="canContextMenuInsert()"
       class="context-menu-button"
-      (click)="openColumnSelector($event, Side.LEFT)"
+      (click)="openColumnSelector($event, {insertTo: Side.LEFT, isSubMenu: true})"
     >
       <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Left
     </button>
     <button
       mat-button
       *ngIf="canContextMenuInsert()"
       class="context-menu-button"
-      (click)="openColumnSelector($event, Side.RIGHT)"
+      (click)="openColumnSelector($event, {insertTo: Side.RIGHT, isSubMenu: true})"
     >
       <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Right
     </button>

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -240,6 +240,7 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
   openContextMenu(header: ColumnHeader, event: MouseEvent) {
     event.stopPropagation();
     event.preventDefault();
+    this.columnSelectorModal.close();
 
     this.contextMenuHeader = header;
     this.contextMenu.openAtPosition({
@@ -248,9 +249,18 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
     });
   }
 
-  openColumnSelector(event: MouseEvent, insertTo?: Side) {
-    event.stopPropagation();
-    this.insertColumnTo = insertTo;
+  onContextMenuClosed() {
+    this.contextMenuHeader = undefined;
+  }
+
+  openColumnSelector(
+    event: MouseEvent,
+    options?: {insertTo?: Side; isSubMenu?: boolean}
+  ) {
+    if (options?.isSubMenu) {
+      event.stopPropagation();
+    }
+    this.insertColumnTo = options?.insertTo;
     const rect = (event.target as HTMLElement).getBoundingClientRect();
     this.columnSelectorModal.openAtPosition({
       x: rect.x + rect.width,
@@ -260,7 +270,6 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
   }
 
   onColumnSelectorClosed() {
-    this.contextMenuHeader = undefined;
     this.insertColumnTo = undefined;
     this.columnSelector.deactivate();
   }

tensorboard/webapp/widgets/data_table/data_table_test.ts

@@ -14,12 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  flush,
-} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatIconTestingModule} from '../../testing/mat_icon_module';
 import {By} from '@angular/platform-browser';
 import {
@@ -867,5 +862,25 @@ describe('data table', () => {
         contextMenu.nativeElement.innerHTML.includes('No Actions Available')
       ).toBeTrue();
     });
+
+    it('closes when the + button is clicked', () => {
+      const fixture = createComponent({
+        headers: mockHeaders,
+        data: mockTableData,
+        potentialColumns: mockPotentialColumns,
+      });
+      const fixedHeader = fixture.debugElement.queryAll(
+        By.directive(HeaderCellComponent)
+      )[0];
+      fixedHeader.nativeElement.dispatchEvent(new MouseEvent('contextmenu'));
+      fixture.detectChanges();
+      expect(fixture.debugElement.query(By.css('.context-menu'))).toBeTruthy();
+
+      const addBtn = fixture.debugElement.query(By.css('.add-column-btn'));
+      addBtn.nativeElement.click();
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.query(By.css('.context-menu'))).toBeFalsy();
+    });
   });
 });