From 4aa572d489b29d40172b12ce78d025b95f34154c Mon Sep 17 00:00:00 2001
From: Marcelo Arias <mail.marcelo.as@gmail.com>
Date: Thu, 23 Mar 2023 14:53:01 -0500
Subject: [PATCH] Button to clear the recent objects list (#6327)

---
 .../functional/recentObjects.e2e.spec.js      | 11 +++++++-
 src/ui/layout/Layout.vue                      | 12 +++++++++
 src/ui/layout/RecentObjectsList.vue           | 27 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/functional/recentObjects.e2e.spec.js b/e2e/tests/functional/recentObjects.e2e.spec.js
index 164b4ff3f7..44648ca236 100644
--- a/e2e/tests/functional/recentObjects.e2e.spec.js
+++ b/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() {
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index 19c0ab0660..e055d97512 100644
--- a/src/ui/layout/Layout.vue
+++ b/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;
         },
diff --git a/src/ui/layout/RecentObjectsList.vue b/src/ui/layout/RecentObjectsList.vue
index 4e34a46f60..81414b1085 100644
--- a/src/ui/layout/RecentObjectsList.vue
+++ b/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();
+                        }
+                    }
+                ]
+            });
         }
     }
 };