Button to clear the recent objects list (#6327)

e2e/tests/functional/recentObjects.e2e.spec.js

@@ -191,7 +191,7 @@ test.describe('Recent Objects', () => {
         expect(await clockBreadcrumbs.count()).toBe(2);
         expect(await clockBreadcrumbs.nth(0).innerText()).not.toEqual(await clockBreadcrumbs.nth(1).innerText());
     });
-    test("Enforces a limit of 20 recent objects", async ({ page }) => {
+    test("Enforces a limit of 20 recent objects and clears the recent objects", async ({ page }) => {
         // Creating 21 objects takes a while, so increase the timeout
         test.slow();
 
@@ -242,6 +242,15 @@ test.describe('Recent Objects', () => {
 
         // Assert that the Clock treeitem is no longer highlighted
         await expect(lastClockTreeItem.locator('.c-tree__item')).not.toHaveClass(/is-targeted-item/);
+
+        // Click the aria-label="Clear Recently Viewed" button
+        await page.getByRole('button', { name: 'Clear Recently Viewed' }).click();
+
+        // Click on the "OK" button in the confirmation dialog
+        await page.getByRole('button', { name: 'OK' }).click();
+
+        // Assert that the list is empty
+        expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(0);
     });
 
     function assertInitialRecentObjectsListState() {

src/ui/layout/Layout.vue

@@ -93,9 +93,18 @@
                     :persist-position="true"
                 >
                     <RecentObjectsList
+                        ref="recentObjectsList"
                         class="l-shell__tree"
                         @openAndScrollTo="openAndScrollTo($event)"
                     />
+                    <button
+                        slot="controls"
+                        class="c-icon-button icon-clear-data"
+                        aria-label="Clear Recently Viewed"
+                        title="Clear Recently Viewed"
+                        @click="handleClearRecentObjects"
+                    >
+                    </button>
                 </pane>
             </multipane>
         </pane>
@@ -279,6 +288,9 @@ export default {
         handleTreeReset() {
             this.triggerReset = !this.triggerReset;
         },
+        handleClearRecentObjects() {
+            this.$refs.recentObjectsList.clearRecentObjects();
+        },
         onStartResizing() {
             this.isResizing = true;
         },

src/ui/layout/RecentObjectsList.vue

@@ -191,6 +191,33 @@ export default {
         shouldTrackCompositionFor(domainObject, navigationPath) {
             return this.compositionCollections[navigationPath] === undefined
                 && this.openmct.composition.supportsComposition(domainObject);
+        },
+        /**
+         * Clears the Recent Objects list in localStorage and in the component.
+         * Before clearing, prompts the user to confirm the action with a dialog.
+         */
+        clearRecentObjects() {
+            const dialog = this.openmct.overlays.dialog({
+                title: 'Clear Recently Viewed Objects',
+                iconClass: 'alert',
+                message: 'This action will clear the Recently Viewed Objects list. Are you sure you want to continue?',
+                buttons: [
+                    {
+                        label: 'OK',
+                        callback: () => {
+                            localStorage.removeItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS);
+                            this.recents = [];
+                            dialog.dismiss();
+                        }
+                    },
+                    {
+                        label: 'Cancel',
+                        callback: () => {
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            });
         }
     }
 };