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>

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 GrandSearch from './search/GrandSearch.vue';
-import multipane from './multipane.vue';
-import pane from './pane.vue';
-import BrowseBar from './BrowseBar.vue';
+import Inspector from '../inspector/Inspector.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>