feature: Add event handlers for saved search and bookmark actions (#1408)

This adds event listeners for the following events:
- saved-search-saved
- saved-search-edited
- saved-search-deleted
- saved-search-bookmarked
- saved-search-unbookmarked

Future PR(s) will emit those events. We create the event listeners so that anywhere in the app can emit an event and the appBookmarkInfo will update. And as a result, all the subscribers to appBookmarkInfo will get the new state automatically.

saved-search-bookmarked can use the same event listener method as saved-search-saved because:
1. The saved search owner can't toggle its bookmark status (like in  issue tracker).
2. As a result of point number 1, non owners can be the only users toggling. Which means it can use `handleSavedSearchSaved` since it just adds the saved search to the user's array locally.

The above also applies for saved-search-unbookmarked and saved-search-deleted

Other changes:
- On the overview page component, since we recently change the load task to disable autoRun and control when it runs, add a new check that verifies that we have not loaded this current saved search before.

Author: jcscottiii

frontend/src/static/js/components/webstatus-overview-page.ts

@@ -40,7 +40,9 @@ import {
   appBookmarkInfoContext,
   AppBookmarkInfo,
   savedSearchHelpers,
+  SavedSearchScope,
 } from '../contexts/app-bookmark-info-context.js';
+import {UserSavedSearch} from '../utils/constants.js';
 
 @customElement('webstatus-overview-page')
 export class OverviewPage extends LitElement {
@@ -67,6 +69,8 @@ export class OverviewPage extends LitElement {
   @state()
   appBookmarkInfo?: AppBookmarkInfo;
 
+  _lastUserSavedSearch?: UserSavedSearch;
+
   constructor() {
     super();
 
@@ -119,20 +123,48 @@ export class OverviewPage extends LitElement {
       },
     });
   }
+
+  areUserSavedSearchesDifferent(
+    current?: UserSavedSearch,
+    incoming?: UserSavedSearch,
+  ): boolean {
+    // Could be a completely different search or a more recently updated search
+    return (
+      current?.id !== incoming?.id ||
+      current?.updated_at !== incoming?.updated_at
+    );
+  }
+
   protected willUpdate(changedProperties: PropertyValueMap<this>): void {
     if (
       changedProperties.has('apiClient') ||
       changedProperties.has('location') ||
       changedProperties.has('appBookmarkInfo')
     ) {
+      if (this.apiClient === undefined) {
+        return;
+      }
+      const incomingCurrentSavedSearch =
+        savedSearchHelpers.getCurrentSavedSearch(
+          this.appBookmarkInfo,
+          this.location,
+        );
+      const userSavedSearch =
+        incomingCurrentSavedSearch?.scope === SavedSearchScope.UserSavedSearch
+          ? incomingCurrentSavedSearch.value
+          : undefined;
       if (
-        this.apiClient !== undefined &&
-        this.currentLocation?.search !== this.location.search &&
+        (this.currentLocation?.search !== this.location.search ||
+          this.areUserSavedSearchesDifferent(
+            this._lastUserSavedSearch,
+            userSavedSearch,
+          )) &&
         !savedSearchHelpers.isBusyLoadingSavedSearchInfo(
           this.appBookmarkInfo,
           this.location,
         )
       ) {
+        this._lastUserSavedSearch = userSavedSearch;
         void this.loadingTask.run();
       }
     }