add globalPinsEnabled feature flag to the pinned view container

Author: roseayeon

tensorboard/webapp/metrics/views/main_view/main_view_test.ts

@@ -69,6 +69,7 @@ import {MainViewComponent, SHARE_BUTTON_COMPONENT} from './main_view_component';
 import {MainViewContainer} from './main_view_container';
 import {PinnedViewComponent} from './pinned_view_component';
 import {PinnedViewContainer} from './pinned_view_container';
+import {buildMockState} from '../../../testing/utils';
 
 @Component({
   selector: 'card-view',
@@ -182,7 +183,11 @@ describe('metrics main view', () => {
       ],
       providers: [
         provideMockStore({
-          initialState: appStateFromMetricsState(buildMetricsState()),
+          initialState: {
+            ...buildMockState({
+              ...appStateFromMetricsState(buildMetricsState()),
+            }),
+          },
         }),
       ],
       // Skip errors for card renderers, which are tested separately.
@@ -1606,6 +1611,67 @@ describe('metrics main view', () => {
         expect(indicator).toBeTruthy();
       });
     });
+
+    describe('clear all pins button', () => {
+      beforeEach(() => {
+        store.overrideSelector(selectors.getEnableGlobalPins, true);
+      });
+
+      it('does not show the button if getEnableGlobalPins is false', () => {
+        store.overrideSelector(selectors.getEnableGlobalPins, false);
+        store.overrideSelector(selectors.getPinnedCardsWithMetadata, []);
+        const fixture = TestBed.createComponent(MainViewContainer);
+        fixture.detectChanges();
+
+        const clearAllButton = fixture.debugElement.query(
+          By.css('[aria-label="Clear all pinned cards"]')
+        );
+        expect(clearAllButton).toBeNull();
+      });
+
+      it('does not show the button if there is no pinned card', () => {
+        store.overrideSelector(selectors.getPinnedCardsWithMetadata, []);
+        const fixture = TestBed.createComponent(MainViewContainer);
+        fixture.detectChanges();
+
+        const clearAllButton = fixture.debugElement.query(
+          By.css('[aria-label="Clear all pinned cards"]')
+        );
+        expect(clearAllButton).toBeNull();
+      });
+
+      it('shows the button if there is a pinned card', () => {
+        store.overrideSelector(selectors.getPinnedCardsWithMetadata, [
+          {cardId: 'card1', ...createCardMetadata(PluginType.SCALARS)},
+          {cardId: 'card2', ...createCardMetadata(PluginType.IMAGES)},
+        ]);
+        const fixture = TestBed.createComponent(MainViewContainer);
+        fixture.detectChanges();
+
+        const clearAllButton = fixture.debugElement.query(
+          By.css('[aria-label="Clear all pinned cards"]')
+        );
+        expect(clearAllButton).toBeTruthy();
+      });
+
+      it('dispatch clear all action when the button is clicked', () => {
+        store.overrideSelector(selectors.getPinnedCardsWithMetadata, [
+          {cardId: 'card1', ...createCardMetadata(PluginType.SCALARS)},
+          {cardId: 'card2', ...createCardMetadata(PluginType.IMAGES)},
+        ]);
+        const fixture = TestBed.createComponent(MainViewContainer);
+        fixture.detectChanges();
+
+        const clearAllButton = fixture.debugElement.query(
+          By.css('[aria-label="Clear all pinned cards"]')
+        );
+        clearAllButton.nativeElement.click();
+
+        expect(dispatchedActions).toEqual([
+          actions.metricsClearAllPinnedCards(),
+        ]);
+      });
+    });
   });
 
   describe('slideout menu', () => {

tensorboard/webapp/metrics/views/main_view/pinned_view_component.ts

@@ -45,8 +45,15 @@ import {CardIdWithMetadata} from '../metrics_view_types';
           </span>
         </span>
       </div>
-      <div class="right-items" *ngIf="cardIdsWithMetadata.length > 0">
-        <button mat-stroked-button (click)="onClearAllPinsClicked.emit()">
+      <div
+        class="right-items"
+        *ngIf="cardIdsWithMetadata.length > 0 && globalPinsEnabled"
+      >
+        <button
+          mat-stroked-button
+          aria-label="Clear all pinned cards"
+          (click)="onClearAllPinsClicked.emit()"
+        >
           Clear all pins
         </button>
       </div>
@@ -67,5 +74,6 @@ export class PinnedViewComponent {
   @Input() cardObserver!: CardObserver;
   @Input() cardIdsWithMetadata!: CardIdWithMetadata[];
   @Input() lastPinnedCardTime!: number;
+  @Input() globalPinsEnabled: boolean = false;
   @Output() onClearAllPinsClicked = new EventEmitter<void>();
 }

tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts

@@ -22,6 +22,7 @@ import {getLastPinnedCardTime, getPinnedCardsWithMetadata} from '../../store';
 import {CardObserver} from '../card_renderer/card_lazy_loader';
 import {CardIdWithMetadata} from '../metrics_view_types';
 import {metricsClearAllPinnedCards} from '../../actions';
+import {getEnableGlobalPins} from '../../../selectors';
 
 @Component({
   selector: 'metrics-pinned-view',
@@ -30,6 +31,7 @@ import {metricsClearAllPinnedCards} from '../../actions';
       [cardIdsWithMetadata]="cardIdsWithMetadata$ | async"
       [lastPinnedCardTime]="lastPinnedCardTime$ | async"
       [cardObserver]="cardObserver"
+      [globalPinsEnabled]="globalPinsEnabled$ | async"
       (onClearAllPinsClicked)="onClearAllPinsClicked()"
     ></metrics-pinned-view-component>
   `,
@@ -50,6 +52,8 @@ export class PinnedViewContainer {
     skip(1)
   );
 
+  readonly globalPinsEnabled$ = this.store.select(getEnableGlobalPins);
+
   onClearAllPinsClicked() {
     this.store.dispatch(metricsClearAllPinnedCards());
   }