[Global pins] Add clear all pins button (#6828)

## Motivation for features / changes
Following #6821 As pin data is accumulated, unwanted pins can easily
crowd the dashboard. Therefore, this PR adds a button that allows users
to conveniently clear all pins at once.

## Technical description of changes
* 57c6a47 Introduced new action called `metricsClearAllPinnedCards`
* When `metricsClearAllPinnedCards` is dispatched, the reducer removed
all pinned cards in the state.

* a04c2d7 Added `clear all pins` button in the pinned view container.
  * The button will be shown if there's at least one pinned card.

* f0c3a54 Implemented `removeAllScalarPins` method in the saved pins
data source.
  * This method removes stored pins from local storage.

* e97b110 Added `removeAllPins` effect in the `metrics/effects/index.ts`
* When `metricsClearAllPinnedCards` action is called, this effect will
call `removeAllScalarPins` method defined in the saved pin data source.

* c0edd37 guarded UI feature (button) with feature flag and added
related tests.

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

![image](https://github.com/tensorflow/tensorboard/assets/24772412/a0793e8b-7fea-45f0-b2d8-4e742ca40918)


### Dark mode

![image](https://github.com/tensorflow/tensorboard/assets/24772412/581468a1-1a9c-4ab4-b70a-13c5a5b168f6)

## Detailed steps to verify changes work correctly (as executed by you)
Unit test pass  & cl TAP presubmit pass
## Alternate designs / implementations considered (or N/A)
I also considered a feature to select a pinned card and remove the
selected pinned card, but I thought that this would be the same as
pressing the 'unpin' button individually from the user's perspective. So
I implemented a 'clear all pins' button that removes all pinned cards.
Any feedback is appreciated!

Author: roseayeon

tensorboard/webapp/metrics/actions/index.ts

@@ -277,5 +277,9 @@ export const metricsUnresolvedPinnedCardsFromLocalStorageAdded = createAction(
   props<{cards: CardUniqueInfo[]}>()
 );
 
+export const metricsClearAllPinnedCards = createAction(
+  '[Metrics] Clear all pinned cards'
+);
+
 // TODO(jieweiwu): Delete after internal code is updated.
 export const stepSelectorTimeSelectionChanged = timeSelectionChanged;

tensorboard/webapp/metrics/data_source/saved_pins_data_source.ts

@@ -45,4 +45,8 @@ export class SavedPinsDataSource {
     }
     return [];
   }
+
+  removeAllScalarPins(): void {
+    window.localStorage.setItem(SAVED_SCALAR_PINS_KEY, JSON.stringify([]));
+  }
 }

tensorboard/webapp/metrics/data_source/saved_pins_data_source_test.ts

@@ -114,4 +114,15 @@ describe('SavedPinsDataSource Test', () => {
       expect(dataSource.getSavedScalarPins()).toEqual(['tag1']);
     });
   });
+
+  describe('removeAllScalarPins', () => {
+    it('removes all existing pins', () => {
+      dataSource.saveScalarPin('tag3');
+      dataSource.saveScalarPin('tag4');
+
+      dataSource.removeAllScalarPins();
+
+      expect(dataSource.getSavedScalarPins().length).toEqual(0);
+    });
+  });
 });

tensorboard/webapp/metrics/effects/index.ts

@@ -316,6 +316,21 @@ export class MetricsEffects implements OnInitEffects {
     })
   );
 
+  private readonly removeAllPins$ = this.actions$.pipe(
+    ofType(actions.metricsClearAllPinnedCards),
+    withLatestFrom(
+      this.store.select(selectors.getEnableGlobalPins),
+      this.store.select(selectors.getShouldPersistSettings)
+    ),
+    filter(
+      ([, enableGlobalPins, shouldPersistSettings]) =>
+        enableGlobalPins && shouldPersistSettings
+    ),
+    tap(() => {
+      this.savedPinsDataSource.removeAllScalarPins();
+    })
+  );
+
   /**
    * In general, this effect dispatch the following actions:
    *
@@ -356,7 +371,11 @@ export class MetricsEffects implements OnInitEffects {
         /**
          * Subscribes to: dashboard shown (initAction).
          */
-        this.loadSavedPins$
+        this.loadSavedPins$,
+        /**
+         * Subscribes to: metricsClearAllPinnedCards.
+         */
+        this.removeAllPins$
       );
     },
     {dispatch: false}

tensorboard/webapp/metrics/effects/metrics_effects_test.ts

@@ -985,5 +985,42 @@ describe('metrics effects', () => {
         expect(actualActions).toEqual([]);
       });
     });
+
+    describe('removeAllPins', () => {
+      let removeAllScalarPinsSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        removeAllScalarPinsSpy = spyOn(
+          savedPinsDataSource,
+          'removeAllScalarPins'
+        );
+        store.overrideSelector(selectors.getEnableGlobalPins, true);
+        store.refreshState();
+      });
+
+      it('removes all pins by calling removeAllScalarPins method', () => {
+        actions$.next(actions.metricsClearAllPinnedCards());
+
+        expect(removeAllScalarPinsSpy).toHaveBeenCalled();
+      });
+
+      it('does not remove pins if getEnableGlobalPins is false', () => {
+        store.overrideSelector(selectors.getEnableGlobalPins, false);
+        store.refreshState();
+
+        actions$.next(actions.metricsClearAllPinnedCards());
+
+        expect(removeAllScalarPinsSpy).not.toHaveBeenCalled();
+      });
+
+      it('does not remove pins if getShouldPersistSettings is false', () => {
+        store.overrideSelector(selectors.getShouldPersistSettings, false);
+        store.refreshState();
+
+        actions$.next(actions.metricsClearAllPinnedCards());
+
+        expect(removeAllScalarPinsSpy).not.toHaveBeenCalled();
+      });
+    });
   });
 });

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -77,6 +77,8 @@ import {
   TagMetadata,
   TimeSeriesData,
   TimeSeriesLoadable,
+  CardToPinnedCard,
+  PinnedCardToCard,
 } from './metrics_types';
 import {dataTableUtils} from '../../widgets/data_table/utils';
 
@@ -1525,7 +1527,28 @@ const reducer = createReducer(
         ],
       };
     }
-  )
+  ),
+  on(actions.metricsClearAllPinnedCards, (state) => {
+    const nextCardMetadataMap = {...state.cardMetadataMap};
+    const nextCardStepIndex = {...state.cardStepIndex};
+    const nextCardStateMap = {...state.cardStateMap};
+
+    for (const cardId of state.pinnedCardToOriginal.keys()) {
+      delete nextCardMetadataMap[cardId];
+      delete nextCardStepIndex[cardId];
+      delete nextCardStateMap[cardId];
+    }
+
+    return {
+      ...state,
+      cardMetadataMap: nextCardMetadataMap,
+      cardStateMap: nextCardStateMap,
+      cardStepIndex: nextCardStepIndex,
+      cardToPinnedCopy: new Map() as CardToPinnedCard,
+      cardToPinnedCopyCache: new Map() as CardToPinnedCard,
+      pinnedCardToOriginal: new Map() as PinnedCardToCard,
+    };
+  })
 );
 
 export function reducers(state: MetricsState | undefined, action: Action) {

tensorboard/webapp/metrics/store/metrics_reducers_test.ts

@@ -4488,5 +4488,57 @@ describe('metrics reducers', () => {
         expect(state2.unresolvedImportedPinnedCards).toEqual([fakePinnedCard]);
       });
     });
+
+    describe('#metricsClearAllPinnedCards', () => {
+      it('unpins all pinned cards', () => {
+        const beforeState = buildMetricsState({
+          cardMetadataMap: {
+            card1: createScalarCardMetadata(),
+            pinnedCopy1: createScalarCardMetadata(),
+            card2: createScalarCardMetadata(),
+            pinnedCopy2: createScalarCardMetadata(),
+          },
+          cardList: ['card1', 'card2'],
+          cardStepIndex: {
+            card1: buildStepIndexMetadata({index: 10}),
+            pinnedCopy1: buildStepIndexMetadata({index: 20}),
+            card2: buildStepIndexMetadata({index: 11}),
+            pinnedCopy2: buildStepIndexMetadata({index: 21}),
+          },
+          cardToPinnedCopy: new Map([
+            ['card1', 'pinnedCopy1'],
+            ['card2', 'pinnedCopy2'],
+          ]),
+          cardToPinnedCopyCache: new Map([
+            ['card1', 'pinnedCopy1'],
+            ['card2', 'pinnedCopy2'],
+          ]),
+          pinnedCardToOriginal: new Map([
+            ['pinnedCopy1', 'card1'],
+            ['pinnedCopy2', 'card2'],
+          ]),
+        });
+        const nextState = reducers(
+          beforeState,
+          actions.metricsClearAllPinnedCards()
+        );
+
+        const expectedState = buildMetricsState({
+          cardMetadataMap: {
+            card1: createScalarCardMetadata(),
+            card2: createScalarCardMetadata(),
+          },
+          cardList: ['card1', 'card2'],
+          cardStepIndex: {
+            card1: buildStepIndexMetadata({index: 10}),
+            card2: buildStepIndexMetadata({index: 11}),
+          },
+          cardToPinnedCopy: new Map(),
+          cardToPinnedCopyCache: new Map(),
+          pinnedCardToOriginal: new Map(),
+        });
+        expect(nextState).toEqual(expectedState);
+      });
+    });
   });
 });

tensorboard/webapp/metrics/testing.ts

@@ -405,6 +405,8 @@ export class TestingSavedPinsDataSource {
   getSavedScalarPins() {
     return [];
   }
+
+  removeAllScalarPins() {}
 }
 
 export function provideTestingSavedPinsDataSource() {

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.scss

@@ -26,6 +26,25 @@ mat-icon {
   margin-right: 5px;
 }
 
+.group-toolbar {
+  justify-content: space-between;
+}
+
+.left-items {
+  display: flex;
+  align-items: center;
+}
+
+.right-items {
+  button {
+    $_height: 25px;
+    font-size: 12px;
+    font-weight: normal;
+    height: $_height;
+    line-height: $_height;
+  }
+}
+
 .group-text {
   display: flex;
   align-items: baseline;