refactor: begin renaming bookmark to saved searches (#1407)

* refactor: begin renaming bookmark to saved searches

Previously, we used the phrases `bookmark` and `saved search` interchangeably.
However, after creating the APIs, `saved searches` are the saved query objects
and `bookmarks` describe a user's specific status related to a saved search.

This commit starts to rename a lot of the references to `bookmark` to `saved search`.
We still need to rename the appBookmarkInfo to appSavedSearchInfo
(since it's all about reading from the saved searches API), but that can come later.

Besides the renaming mentioned above, there is one new thing: `CurrentSavedSearch`.
`CurrentSavedSearch` is a new interface that can hold either one of the new interfaces:
`UserSavedSearch` and `GlobalSavedSearch` This is done through a discriminated [union](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions).
I used this type of union vs the regular union with `|` because GlobalSavedSearch and UserSavedSearch had different fields
but previously I was just allowing them to use both one interface and mark all the fields optional.
These two specific interfaces let consumers know that fields are actually expected for each interface.
Additionally, the typescript compiler in vscode is smart enough to know what once you have checked for a certain type, it knows it is using that type.

* change type->scope

Author: jcscottiii

frontend/src/static/js/components/test/webstatus-overview-content.test.ts

@@ -34,10 +34,10 @@ describe('webstatus-overview-content', () => {
       const element: WebstatusOverviewContent = container.querySelector(
         'webstatus-overview-content',
       ) as WebstatusOverviewContent;
-      // Set location to one of the globalBookmarks.
+      // Set location to one of the globalSavedSearches.
       element.location = {search: '?q=test_query_1'};
       element.appBookmarkInfo = {
-        globalBookmarks: [
+        globalSavedSearches: [
           {
             name: 'Test Bookmark 1',
             query: 'test_query_1',
@@ -49,7 +49,7 @@ describe('webstatus-overview-content', () => {
             description: 'test description2',
           },
         ],
-        currentGlobalBookmark: {
+        currentGlobalSavedSearch: {
           name: 'Test Bookmark 1',
           query: 'test_query_1',
           description: 'test description1',
@@ -77,16 +77,16 @@ describe('webstatus-overview-content', () => {
       const element: WebstatusOverviewContent = container.querySelector(
         'webstatus-overview-content',
       ) as WebstatusOverviewContent;
-      // Set location to one of the globalBookmarks.
+      // Set location to one of the globalSavedSearches.
       element.location = {search: '?q=test_query_1'};
       element.appBookmarkInfo = {
-        globalBookmarks: [
+        globalSavedSearches: [
           {
             name: 'Test Bookmark 1',
             query: 'test_query_1',
           },
         ],
-        currentGlobalBookmark: {
+        currentGlobalSavedSearch: {
           name: 'Test Bookmark 1',
           query: 'test_query_1',
         },

frontend/src/static/js/components/test/webstatus-overview-filters.test.ts

@@ -31,13 +31,13 @@ import {WebstatusOverviewFilters} from '../webstatus-overview-filters.js';
 import {APIClient} from '../../api/client.js';
 
 import {stub} from 'sinon'; // Make sure you have sinon installed
-import {bookmarkHelpers} from '../../contexts/app-bookmark-info-context.js';
+import {savedSearchHelpers} from '../../contexts/app-bookmark-info-context.js';
 
 it('should correctly update _activeQuery based on getCurrentQuery return value', async () => {
   const apiClient = new APIClient('');
   const location = {search: ''};
 
-  const getCurrentQueryStub = stub(bookmarkHelpers, 'getCurrentQuery');
+  const getCurrentQueryStub = stub(savedSearchHelpers, 'getCurrentQuery');
 
   // Test case 1: Empty query
   getCurrentQueryStub.returns('');

frontend/src/static/js/components/test/webstatus-overview-table.test.ts

@@ -21,19 +21,29 @@ import {ApiError} from '../../api/errors.js';
 import {TaskStatus} from '@lit/task';
 import {WebstatusOverviewTable} from '../webstatus-overview-table.js';
 import '../webstatus-overview-table.js';
+import {
+  CurrentSavedSearch,
+  SavedSearchScope,
+} from '../../contexts/app-bookmark-info-context.js';
 
 describe('webstatus-overview-table', () => {
-  const orderedBookmark = {
-    name: 'Ordered Bookmark 1',
-    query: 'name:test3 OR id:test1 OR id:test2',
-    description: 'test description1',
-    is_ordered: true,
+  const orderedSavedSearch: CurrentSavedSearch = {
+    scope: SavedSearchScope.GlobalSavedSearch,
+    value: {
+      name: 'Ordered Bookmark 1',
+      query: 'name:test3 OR id:test1 OR id:test2',
+      description: 'test description1',
+      is_ordered: true,
+    },
   };
-  const defaultOrderBookmark = {
-    name: 'No order Bookmark 2',
-    query: 'id:nothing',
-    description: 'test description1',
-    is_ordered: false,
+  const defaultOrderSavedSearch: CurrentSavedSearch = {
+    scope: SavedSearchScope.GlobalSavedSearch,
+    value: {
+      name: 'No order Bookmark 2',
+      query: 'id:nothing',
+      description: 'test description1',
+      is_ordered: false,
+    },
   };
   const page = {
     data: [
@@ -82,7 +92,7 @@ describe('webstatus-overview-table', () => {
       await fixture<WebstatusOverviewTable>(
         html`<webstatus-overview-table
           .location=${location}
-          .bookmark=${orderedBookmark}
+          .savedSearch=${orderedSavedSearch}
           .taskTracker=${taskTracker}
         ></webstatus-overview-table>`,
       );
@@ -100,14 +110,17 @@ describe('webstatus-overview-table', () => {
     expect(sortedFeatures[3].feature_id).to.equal('test2');
   });
 
-  it('reorderByQueryTerms() sorts correctly with DEFAULT_BOOKMARKS', async () => {
+  it('reorderByQueryTerms() sorts correctly with DEFAULT_GLOBAL_SAVED_SEARCHES', async () => {
     const cssQuery =
       'id:anchor-positioning OR id:container-queries OR id:has OR id:nesting OR id:view-transitions OR id:subgrid OR id:grid OR name:scrollbar OR id:scroll-driven-animations OR id:scope';
-    const cssBookmark = {
-      name: 'css',
-      query: cssQuery,
-      description: 'test description1',
-      is_ordered: true,
+    const cssSavedSearch: CurrentSavedSearch = {
+      scope: SavedSearchScope.GlobalSavedSearch,
+      value: {
+        name: 'css',
+        query: cssQuery,
+        description: 'test description1',
+        is_ordered: true,
+      },
     };
     const cssPage = {
       data: [
@@ -177,7 +190,7 @@ describe('webstatus-overview-table', () => {
       await fixture<WebstatusOverviewTable>(
         html`<webstatus-overview-table
           .location=${location}
-          .bookmark=${cssBookmark}
+          .savedSearch=${cssSavedSearch}
           .taskTracker=${cssTaskTracker}
         ></webstatus-overview-table>`,
       );
@@ -208,7 +221,7 @@ describe('webstatus-overview-table', () => {
     const component = await fixture<WebstatusOverviewTable>(
       html`<webstatus-overview-table
         .location=${location}
-        .bookmark=${defaultOrderBookmark}
+        .savedSearch=${defaultOrderSavedSearch}
         .taskTracker=${taskTracker}
       ></webstatus-overview-table>`,
     );