add globalPinsEnabled feature flag to the pinned view container

Author: roseayeon

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

@@ -45,7 +45,10 @@ import {CardIdWithMetadata} from '../metrics_view_types';
           </span>
         </span>
       </div>
-      <div class="right-items" *ngIf="cardIdsWithMetadata.length > 0">
+      <div
+        class="right-items"
+        *ngIf="cardIdsWithMetadata.length > 0 && globalPinsEnabled"
+      >
         <button mat-stroked-button (click)="onClearAllPinsClicked.emit()">
           Clear all pins
         </button>
@@ -67,5 +70,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());
   }