[Global Pins] Shows a confirmation dialog when disabling the global pin feature (#6843)

## Motivation for features / changes
Regarding #6831 , this PR adds confirmation dialog" that appears when
the user clears the checkbox to make the user aware that local storage
is disappearing.

## Technical description of changes
0e63b07 created a `saving pins dialog` component

05e06f5 Created a `saving pins checkbox` component
* The Save Pin checkbox prevents the default click and must be done
after confirmation in the modal. So I added
`MAT_CHECKBOX_DEFAULT_OPTIONS`
(https://v15.material.angular.io/comComponents/checkbox/overview#click-action-config)
to prevent the default click event. However, if I add this directly to
the `settings view component`, all checkboxes will be disabled,
including other unwanted ones. So, I created a separate checkbox for the
Save Pin checkbox. Please let me know is there any other good way to do
this.

6ba778e Make the dialog shows up when user clears the checkbox
* Passes to `onEnableSavingPinsToggled` whether the checkbox is
selected.
* If the checkbox is selected and user clicks it, it means that the user
disables the global pin, so a dialog box is displayed.
* If the checkbox is not checked but is clicked, it means the user is
trying to enable a global pin and no dialog box will be displayed.
* `onEnableSavingPinsToggled` and `isSavingPinsEnabled` is passed to
`saving-pins-checkbox` component.

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

![image](https://github.com/tensorflow/tensorboard/assets/24772412/eb442565-4f39-45e7-b893-4866ee3fc1e4)

## Detailed steps to verify changes work correctly (as executed by you)
unit test passes + TAP presubmit passes 
## Alternate designs / implementations considered (or N/A)

Author: roseayeon

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>