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"
>
+
@@ -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();
+ }
+ }
+ ]
+ });
}
}
};