fix(#6503): Recently Viewed Items - Disable button if no items (#6533)

* add e2e test

* fix: remove slow function

* test: After deactivating the button, new objects must be inserted and the button becomes active again

* test: ensure clear recent objects button is active or inactive

* add an event to notify when an object is inserted in the recents list

* add an event to notify when an object is inserted in the recents list

* fix: adjusting function name and add validation for triggering the event

* fix: add event to disable button only when user click ok to clear list of recents

* test: fix failing e2e + better assertions

---------

Co-authored-by: Jesse Mazzella <jessemazzella@gmail.com>

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

@@ -58,7 +58,7 @@ test.describe('Recent Objects', () => {
     });
     test('Navigated objects show up in recents, object renames and deletions are reflected', async ({ page }) => {
         // Verify that both created objects appear in the list and are in the correct order
-        assertInitialRecentObjectsListState();
+        await assertInitialRecentObjectsListState();
 
         // Navigate to the folder by clicking on the main object name in the recent objects list item
         await page.getByRole('listitem', { name: folderA.name }).getByText(folderA.name).click();
@@ -149,9 +149,9 @@ test.describe('Recent Objects', () => {
         await expect(clockTreeItem.locator('.c-tree__item')).not.toHaveClass(/is-targeted-item/);
     });
     test("Persists on refresh", async ({ page }) => {
-        assertInitialRecentObjectsListState();
+        await assertInitialRecentObjectsListState();
         await page.reload();
-        assertInitialRecentObjectsListState();
+        await assertInitialRecentObjectsListState();
     });
     test("Displays objects and aliases uniquely", async ({ page }) => {
         const mainTree = page.getByRole('tree', { name: 'Main Tree'});
@@ -252,13 +252,57 @@ test.describe('Recent Objects', () => {
         // Assert that the list is empty
         expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(0);
     });
+    test("Ensure clear recent objects button is active or inactive", async ({ page }) => {
+        // Assert that the list initially contains 3 objects (clock, folder, my items)
+        expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(3);
+
+        // Assert that the button is enabled
+        expect(
+            await page
+                .getByRole("button", { name: "Clear Recently Viewed" })
+                .isEnabled()
+        ).toBe(true);
+
+        // 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);
+
+        // Assert that the button is disabled
+        expect(
+            await page
+                .getByRole("button", { name: "Clear Recently Viewed" })
+                .isEnabled()
+        ).toBe(false);
+
+        // Navigate to folder object
+        await page.goto(folderA.url);
+
+        // Assert that the list contains 1 object
+        expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(1);
+
+        // Assert that the button is enabled
+        expect(
+            await page
+                .getByRole("button", { name: "Clear Recently Viewed" })
+                .isEnabled()
+        ).toBe(true);
+    });
 
     function assertInitialRecentObjectsListState() {
-        expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeTruthy();
+        return Promise.all([
-        expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
+            expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeVisible(),
-        expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
+            expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeVisible(),
-        expect(recentObjectsList.getByRole('listitem').nth(0).getByText(clock.name)).toBeTruthy();
+            expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeVisible(),
-        expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
+            expect(recentObjectsList.getByRole('listitem').nth(0).getByText(clock.name)).toBeVisible(),
-        expect(recentObjectsList.getByRole('listitem').nth(1).getByText(folderA.name)).toBeTruthy();
+            expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeVisible(),
+            expect(recentObjectsList.getByRole('listitem').nth(3).getByText(folderA.name)).toBeVisible()
+        ]);
     }
 });

src/ui/layout/Layout.vue

@@ -96,12 +96,14 @@
                         ref="recentObjectsList"
                         class="l-shell__tree"
                         @openAndScrollTo="openAndScrollTo($event)"
+                        @setClearButtonDisabled="setClearButtonDisabled"
                     />
                     <button
                         slot="controls"
                         class="c-icon-button icon-clear-data"
                         aria-label="Clear Recently Viewed"
                         title="Clear Recently Viewed"
+                        :disabled="disableClearButton"
                         @click="handleClearRecentObjects"
                     >
                     </button>
@@ -150,19 +152,19 @@
 </template>
 
 <script>
-import Inspector from '../inspector/Inspector.vue';
-import MctTree from './mct-tree.vue';
 import ObjectView from '../components/ObjectView.vue';
-import CreateButton from './CreateButton.vue';
+import Inspector from '../inspector/Inspector.vue';
-import GrandSearch from './search/GrandSearch.vue';
-import multipane from './multipane.vue';
-import pane from './pane.vue';
-import BrowseBar from './BrowseBar.vue';
 import Toolbar from '../toolbar/Toolbar.vue';
 import AppLogo from './AppLogo.vue';
+import BrowseBar from './BrowseBar.vue';
+import CreateButton from './CreateButton.vue';
+import RecentObjectsList from './RecentObjectsList.vue';
+import MctTree from './mct-tree.vue';
+import multipane from './multipane.vue';
+import pane from './pane.vue';
+import GrandSearch from './search/GrandSearch.vue';
 import Indicators from './status-bar/Indicators.vue';
 import NotificationBanner from './status-bar/NotificationBanner.vue';
-import RecentObjectsList from './RecentObjectsList.vue';
 
 export default {
     components: {
@@ -197,7 +199,8 @@ export default {
             triggerSync: false,
             triggerReset: false,
             headExpanded,
-            isResizing: false
+            isResizing: false,
+            disableClearButton: false
         };
     },
     computed: {
@@ -296,7 +299,11 @@ export default {
         },
         onEndResizing() {
             this.isResizing = false;
+        },
+        setClearButtonDisabled(isDisabled) {
+            this.disableClearButton = isDisabled;
         }
+
     }
 };
 </script>

src/ui/layout/RecentObjectsList.vue

@@ -181,6 +181,10 @@ export default {
          */
         setSavedRecentItems() {
             localStorage.setItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS, JSON.stringify(this.recents));
+            // send event to parent for enabled button
+            if (this.recents.length === 1) {
+                this.$emit("setClearButtonDisabled", false);
+            }
         },
         /**
          * Returns true if the `domainObject` supports composition and we are not already
@@ -208,6 +212,7 @@ export default {
                             localStorage.removeItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS);
                             this.recents = [];
                             dialog.dismiss();
+                            this.$emit("setClearButtonDisabled", true);
                         }
                     },
                     {
@@ -222,7 +227,3 @@ export default {
     }
 };
 </script>
-
-<style>
-
-</style>