Add enable saving pins checkbox in the settings view component

Author: roseayeon

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

@@ -548,5 +548,43 @@ describe('metrics right_pane', () => {
         ).toHaveClass('toggle-opened');
       });
     });
+
+    describe('saving pins check box', () => {
+      beforeEach(() => {
+        store.overrideSelector(selectors.getEnableGlobalPins, true);
+        store.overrideSelector(selectors.getMetricsSavingPinsEnabled, false);
+      });
+
+      it('does not render if getEnableGlobalPins feature flag is false', () => {
+        store.overrideSelector(selectors.getEnableGlobalPins, false);
+        const fixture = TestBed.createComponent(SettingsViewContainer);
+        fixture.detectChanges();
+
+        expect(select(fixture, '.saving-pins')).toBeFalsy();
+      });
+
+      it('renders checked saving pins check box if isSavingpinsEnabled is true', () => {
+        store.overrideSelector(selectors.getMetricsSavingPinsEnabled, true);
+
+        const fixture = TestBed.createComponent(SettingsViewContainer);
+        fixture.detectChanges();
+
+        expect(
+          select(fixture, '.saving-pins input').componentInstance.checked
+        ).toBeTrue();
+      });
+
+      it('dispatches metricsEnableSavingPinsToggled on toggle', () => {
+        const fixture = TestBed.createComponent(SettingsViewContainer);
+        fixture.detectChanges();
+
+        const checkbox = select(fixture, '.saving-pins input');
+        checkbox.nativeElement.click();
+
+        expect(dispatchSpy).toHaveBeenCalledWith(
+          actions.metricsEnableSavingPinsToggled()
+        );
+      });
+    });
   });
 });

tensorboard/webapp/metrics/views/right_pane/settings_view_component.ng.html

@@ -93,6 +93,19 @@ <h3 class="section-title">General</h3>
       </button>
     </div>
   </div>
+
+  <div class="control-row saving-pins" *ngIf="globalPinsFeatureEnabled">
+    <mat-checkbox
+      [checked]="isSavingPinsEnabled"
+      (change)="onEnableSavingPinsToggled.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 shared across multiple experiments."
+    ></mat-icon>
+  </div>
 </section>
 
 <section class="scalars">

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

@@ -146,3 +146,16 @@ tb-dropdown {
     margin-left: 28px;
   }
 }
+
+.saving-pins {
+  align-items: center;
+  display: flex;
+
+  .info {
+    $_dim: 15px;
+    height: $_dim;
+    margin-left: 5px;
+    width: $_dim;
+    min-width: $_dim;
+  }
+}

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

@@ -70,12 +70,15 @@ export class SettingsViewComponent {
   @Input() linkedTimeSelection!: TimeSelection | null;
   @Input() stepMinMax!: {min: number; max: number};
   @Input() isSlideOutMenuOpen!: boolean;
+  @Input() isSavingPinsEnabled!: boolean;
+  @Input() globalPinsFeatureEnabled: boolean = false;
 
   @Output() linkedTimeToggled = new EventEmitter<void>();
 
   @Output() stepSelectorToggled = new EventEmitter<void>();
   @Output() rangeSelectionToggled = new EventEmitter<void>();
   @Output() onSlideOutToggled = new EventEmitter<void>();
+  @Output() onEnableSavingPinsToggled = new EventEmitter<void>();
 
   @Input() isImageSupportEnabled!: boolean;
 

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

@@ -28,6 +28,7 @@ import {
   metricsChangeScalarSmoothing,
   metricsChangeTooltipSort,
   metricsChangeXAxisType,
+  metricsEnableSavingPinsToggled,
   metricsResetCardWidth,
   metricsResetImageBrightness,
   metricsResetImageContrast,
@@ -83,6 +84,9 @@ import {HistogramMode, TooltipSort, XAxisType} from '../../types';
       (stepSelectorToggled)="onStepSelectorToggled()"
       (rangeSelectionToggled)="onRangeSelectionToggled()"
       (onSlideOutToggled)="onSlideOutToggled()"
+      [isSavingPinsEnabled]="isSavingPinsEnabled$ | async"
+      (onEnableSavingPinsToggled)="onEnableSavingPinsToggled()"
+      [globalPinsFeatureEnabled]="globalPinsFeatureEnabled$ | async"
     >
     </metrics-dashboard-settings-component>
   `,
@@ -146,6 +150,13 @@ export class SettingsViewContainer {
   readonly imageShowActualSize$ = this.store.select(
     selectors.getMetricsImageShowActualSize
   );
+  readonly isSavingPinsEnabled$ = this.store.select(
+    selectors.getMetricsSavingPinsEnabled
+  );
+  // Feature flag for global pins.
+  readonly globalPinsFeatureEnabled$ = this.store.select(
+    selectors.getEnableGlobalPins
+  );
 
   onTooltipSortChanged(sort: TooltipSort) {
     this.store.dispatch(metricsChangeTooltipSort({sort}));
@@ -222,4 +233,8 @@ export class SettingsViewContainer {
   onSlideOutToggled() {
     this.store.dispatch(metricsSlideoutMenuToggled());
   }
+
+  onEnableSavingPinsToggled() {
+    this.store.dispatch(metricsEnableSavingPinsToggled());
+  }
 }