[Global Pins] Shows a confirmation dialog when disabling the global pin feature

tensorboard/webapp/BUILD

@@ -283,6 +283,7 @@ tf_ng_web_test_suite(
         "//tensorboard/webapp/metrics/views/card_renderer:card_renderer_tests",
         "//tensorboard/webapp/metrics/views/main_view:main_view_tests",
         "//tensorboard/webapp/metrics/views/right_pane:right_pane_test",
+        "//tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog:saving_pins_dialog_test",
         "//tensorboard/webapp/metrics/views/right_pane/scalar_column_editor:scalar_column_editor_test",
         "//tensorboard/webapp/plugins:plugins_container_test_lib",
         "//tensorboard/webapp/reloader:test_lib",

tensorboard/webapp/metrics/views/right_pane/BUILD

@@ -11,30 +11,43 @@ tf_sass_binary(
     ],
 )
 
+tf_sass_binary(
+    name = "saving_pins_checkbox_styles",
+    src = "saving_pins_checkbox_component.scss",
+    deps = [
+        "//tensorboard/webapp:angular_material_sass_deps",
+        "//tensorboard/webapp/theme",
+    ],
+)
+
 tf_ng_module(
     name = "right_pane",
     srcs = [
         "right_pane_component.ts",
         "right_pane_module.ts",
+        "saving_pins_checkbox_component.ts",
         "settings_view_component.ts",
         "settings_view_container.ts",
     ],
     assets = [
         ":settings_view_styles",
         "settings_view_component.ng.html",
+        ":saving_pins_checkbox_styles",
     ],
     deps = [
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_button_toggle",
         "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
         "//tensorboard/webapp/angular:expect_angular_material_select",
         "//tensorboard/webapp/angular:expect_angular_material_slider",
         "//tensorboard/webapp/feature_flag",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
+        "//tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog",
         "//tensorboard/webapp/widgets/card_fob:types",
         "//tensorboard/webapp/widgets/dropdown",
         "//tensorboard/webapp/widgets/range_input",
@@ -56,6 +69,7 @@ tf_ts_library(
         ":right_pane",
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
+        "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
         "//tensorboard/webapp/angular:expect_angular_material_button_toggle",
         "//tensorboard/webapp/angular:expect_angular_material_checkbox",
@@ -66,6 +80,7 @@ tf_ts_library(
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/store",
+        "//tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog",
         "//tensorboard/webapp/testing:utils",
         "//tensorboard/webapp/widgets/card_fob:types",
         "//tensorboard/webapp/widgets/dropdown",

tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts

@@ -26,12 +26,15 @@ import {RangeInputModule} from '../../../widgets/range_input/range_input_module'
 import {RightPaneComponent} from './right_pane_component';
 import {SettingsViewComponent} from './settings_view_component';
 import {SettingsViewContainer} from './settings_view_container';
+import {SavingPinsCheckboxComponent} from './saving_pins_checkbox_component';
+import {SavingPinsDialogModule} from './saving_pins_dialog/saving_pins_dialog_module';
 
 @NgModule({
   declarations: [
     RightPaneComponent,
     SettingsViewComponent,
     SettingsViewContainer,
+    SavingPinsCheckboxComponent,
   ],
   exports: [RightPaneComponent],
   imports: [
@@ -40,6 +43,7 @@ import {SettingsViewContainer} from './settings_view_container';
     MatButtonModule,
     MatButtonToggleModule,
     MatCheckboxModule,
+    SavingPinsDialogModule,
     MatIconModule,
     MatSelectModule,
     MatSliderModule,

tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts

@@ -19,6 +19,7 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSelectModule} from '@angular/material/select';
@@ -37,10 +38,13 @@ import {HistogramMode, TooltipSort, XAxisType} from '../../types';
 import {RightPaneComponent} from './right_pane_component';
 import {SettingsViewComponent, TEST_ONLY} from './settings_view_component';
 import {SettingsViewContainer} from './settings_view_container';
+import {SavingPinsDialogModule} from './saving_pins_dialog/saving_pins_dialog_module';
+import {SavingPinsCheckboxComponent} from './saving_pins_checkbox_component';
 
 describe('metrics right_pane', () => {
   let store: MockStore<State>;
   let dispatchSpy: jasmine.Spy;
+  let overlayContainer: OverlayContainer;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -49,13 +53,15 @@ describe('metrics right_pane', () => {
         DropdownModule,
         MatButtonToggleModule,
         MatCheckboxModule,
+        SavingPinsDialogModule,
         MatSelectModule,
         MatSliderModule,
       ],
       declarations: [
         RightPaneComponent,
         SettingsViewComponent,
         SettingsViewContainer,
+        SavingPinsCheckboxComponent,
       ],
       providers: [provideMockTbStore()],
       // Ignore errors from components that are out-of-scope for this test:
@@ -65,6 +71,7 @@ describe('metrics right_pane', () => {
 
     store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
     dispatchSpy = spyOn(store, 'dispatch');
+    overlayContainer = TestBed.inject(OverlayContainer);
   });
 
   afterEach(() => {
@@ -574,17 +581,64 @@ describe('metrics right_pane', () => {
         ).toBeTrue();
       });
 
-      it('dispatches metricsEnableSavingPinsToggled on toggle', () => {
+      it('dispatches metricsEnableSavingPinsToggled if user checks the box', () => {
         const fixture = TestBed.createComponent(SettingsViewContainer);
         fixture.detectChanges();
 
         const checkbox = select(fixture, '.saving-pins input');
         checkbox.nativeElement.click();
 
+        const savingPinsDialog = overlayContainer
+          .getContainerElement()
+          .querySelectorAll('saving-pins-dialog');
+        expect(savingPinsDialog.length).toBe(0);
         expect(dispatchSpy).toHaveBeenCalledWith(
           actions.metricsEnableSavingPinsToggled()
         );
       });
+
+      it('dispatches metricsEnableSavingPinsToggled if users clicks disable in the dialog', async () => {
+        store.overrideSelector(selectors.getMetricsSavingPinsEnabled, true);
+        const fixture = TestBed.createComponent(SettingsViewContainer);
+        fixture.detectChanges();
+
+        const checkbox = select(fixture, '.saving-pins input');
+        checkbox.nativeElement.click();
+
+        const savingPinsDialog = overlayContainer
+          .getContainerElement()
+          .querySelectorAll('saving-pins-dialog');
+
+        const disableButton = overlayContainer
+          .getContainerElement()
+          .querySelector('.disable-button');
+        (disableButton as HTMLButtonElement).click();
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(savingPinsDialog.length).toBe(1);
+        expect(dispatchSpy).toHaveBeenCalledWith(
+          actions.metricsEnableSavingPinsToggled()
+        );
+      });
+
+      it('does not dispatch metricsEnableSavingPinsToggled if users cancels the dialog', async () => {
+        store.overrideSelector(selectors.getMetricsSavingPinsEnabled, true);
+        const fixture = TestBed.createComponent(SettingsViewContainer);
+        fixture.detectChanges();
+
+        const checkbox = select(fixture, '.saving-pins input');
+        checkbox.nativeElement.click();
+
+        const disableButton = overlayContainer
+          .getContainerElement()
+          .querySelector('.cancel-button');
+        (disableButton as HTMLButtonElement).click();
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(dispatchSpy).not.toHaveBeenCalled();
+      });
     });
   });
 });

tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss

@@ -0,0 +1,48 @@
+/* Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+@use '@angular/material' as mat;
+@import 'tensorboard/webapp/theme/tb_theme';
+
+:host {
+  @include tb-theme-foreground-prop(color, secondary-text);
+  font-size: 12px;
+}
+
+mat-checkbox {
+  // Counteract the padding of the checkbox in order to align it vertically
+  // with other items in the pane.
+  margin-left: -11px;
+
+  ::ng-deep label {
+    @include tb-theme-foreground-prop(color, secondary-text);
+    font-size: 12px;
+    letter-spacing: normal;
+    padding-left: 0px;
+    white-space: nowrap;
+  }
+}
+
+.saving-pins-checkbox {
+  align-items: center;
+  display: flex;
+
+  .info {
+    $_dim: 15px;
+    height: $_dim;
+    margin-left: 5px;
+    width: $_dim;
+    min-width: $_dim;
+  }
+}

tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.ts

@@ -0,0 +1,54 @@
+/* Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import {
+  MAT_CHECKBOX_DEFAULT_OPTIONS,
+  MatCheckboxDefaultOptions,
+} from '@angular/material/checkbox';
+
+@Component({
+  selector: 'saving-pins-checkbox',
+  template: `
+    <div class="saving-pins-checkbox">
+      <mat-checkbox [checked]="isChecked" (click)="onCheckboxToggled.emit()"
+        >Enable saving pins (Scalars only)</mat-checkbox
+      >
+      <mat-icon
+        class="info"
+        svgIcon="help_outline_24px"
+        title="When saving pins are enabled, pinned cards will be visible across multiple experiments."
+      ></mat-icon>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['saving_pins_checkbox_component.css'],
+  providers: [
+    {
+      provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
+      useValue: {clickAction: 'noop'} as MatCheckboxDefaultOptions,
+    },
+  ],
+})
+export class SavingPinsCheckboxComponent {
+  @Input() isChecked!: boolean;
+
+  @Output() onCheckboxToggled = new EventEmitter<void>();
+}

tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog/BUILD

@@ -0,0 +1,41 @@
+load("//tensorboard/defs:defs.bzl", "tf_ng_module", "tf_sass_binary", "tf_ts_library")
+
+package(default_visibility = ["//tensorboard:internal"])
+
+tf_sass_binary(
+    name = "saving_pins_dialog_component_styles",
+    src = "saving_pins_dialog_component.scss",
+)
+
+tf_ng_module(
+    name = "saving_pins_dialog",
+    srcs = [
+        "saving_pins_dialog_component.ts",
+        "saving_pins_dialog_module.ts",
+    ],
+    assets = [
+        ":saving_pins_dialog_component_styles",
+        "saving_pins_dialog_component.ng.html",
+    ],
+    deps = [
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+    ],
+)
+
+tf_ts_library(
+    name = "saving_pins_dialog_test",
+    testonly = True,
+    srcs = ["saving_pins_dialog_test.ts"],
+    deps = [
+        ":saving_pins_dialog",
+        "//tensorboard/webapp/angular:expect_angular_core_testing",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "@npm//@types/jasmine",
+    ],
+)

tensorboard/webapp/metrics/views/right_pane/saving_pins_dialog/saving_pins_dialog_component.ng.html

@@ -0,0 +1,36 @@
+<!--
+@license
+Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<h3 class="title">Disable Saving Pins?</h3>
+
+<p>
+  Disabling saving pins will remove locally stored pinned card data and no
+  longer allow pinned cards to be shared across multiple experiments.<br />You
+  can re-enable the feature and re-pin cards at any time.
+</p>
+
+<div class="bottom-buttons">
+  <button
+    mat-flat-button
+    (click)="closeWithoutDisabling()"
+    class="cancel-button"
+  >
+    Cancel
+  </button>
+  <button mat-flat-button (click)="closeAndDisable()" class="disable-button">
+    Disable
+  </button>
+</div>