ntp: add url to open action (#1248)

Co-authored-by: Shane Osbourne <[email protected]>

Author: shakyShane

special-pages/messages/new-tab/favorites_open.notify.json

@@ -4,13 +4,18 @@
   "type": "object",
   "required": [
     "id",
-    "target"
+    "target",
+    "url"
   ],
   "properties": {
     "id": {
       "description": "Entity ID",
       "type": "string"
     },
+    "url": {
+      "description": "The url to open",
+      "type": "string"
+    },
     "target": {
       "type": "string",
       "enum": ["same-tab", "new-tab", "new-window"]

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -25,7 +25,7 @@ export const FavoritesMemo = memo(Favorites);
  * @param {Expansion} props.expansion
  * @param {() => void} props.toggle
  * @param {(id: string) => void} props.openContextMenu
- * @param {(id: string, target: OpenTarget) => void} props.openFavorite
+ * @param {(id: string, url: string, target: OpenTarget) => void} props.openFavorite
  * @param {() => void} props.add
  */
 export function Favorites({ gridRef, favorites, expansion, toggle, openContextMenu, openFavorite, add }) {
@@ -89,16 +89,16 @@ export function Favorites({ gridRef, favorites, expansion, toggle, openContextMe
     function onClick(event) {
         let target = /** @type {HTMLElement|null} */ (event.target);
         while (target && target !== event.currentTarget) {
-            if (typeof target.dataset.id === 'string') {
+            if (typeof target.dataset.id === 'string' && 'href' in target && typeof target.href === 'string') {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 const isControlClick = platformName === 'macos' ? event.metaKey : event.ctrlKey;
                 if (isControlClick) {
-                    return openFavorite(target.dataset.id, 'new-tab');
+                    return openFavorite(target.dataset.id, target.href, 'new-tab');
                 } else if (event.shiftKey) {
-                    return openFavorite(target.dataset.id, 'new-window');
+                    return openFavorite(target.dataset.id, target.href, 'new-window');
                 }
-                return openFavorite(target.dataset.id, 'same-tab');
+                return openFavorite(target.dataset.id, target.href, 'same-tab');
             } else {
                 target = target.parentElement;
             }

special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js

@@ -32,7 +32,7 @@ export const FavoritesContext = createContext({
     openContextMenu: (id) => {
         throw new Error('must implement');
     },
-    /** @type {(id: string, target: OpenTarget) => void} */
+    /** @type {(id: string, url: string, target: OpenTarget) => void} */
     openFavorite: (id, target) => {
         throw new Error('must implement');
     },
@@ -86,11 +86,11 @@ export function FavoritesProvider({ children }) {
         [service],
     );
 
-    /** @type {(id: string, target: OpenTarget) => void} */
+    /** @type {(id: string, url: string, target: OpenTarget) => void} */
     const openFavorite = useCallback(
-        (id, target) => {
+        (id, url, target) => {
             if (!service.current) return;
-            service.current.openFavorite(id, target);
+            service.current.openFavorite(id, url, target);
         },
         [service],
     );

special-pages/pages/new-tab/app/favorites/favorites.service.js

@@ -110,12 +110,13 @@ export class FavoritesService {
 
     /**
      * @param {string} id - entity id
+     * @param {string} url - target url
      * @param {FavoritesOpenAction['target']} target
      * @internal
      */
-    openFavorite(id, target) {
+    openFavorite(id, url, target) {
         // let the native side know too
-        this.ntp.messaging.notify('favorites_open', { id, target });
+        this.ntp.messaging.notify('favorites_open', { id, url, target });
     }
 
     /**

special-pages/pages/new-tab/app/favorites/integration-tests/favorites.page.js

@@ -19,19 +19,19 @@ export class FavoritesPage {
     async opensInNewTab() {
         await this.nthFavorite(0).click({ modifiers: ['Meta'] });
         const calls = await this.ntp.mocks.waitForCallCount({ method: 'favorites_open', count: 1 });
-        expect(calls[0].payload.params).toStrictEqual({ id: 'id-many-1', target: 'new-tab' });
+        expect(calls[0].payload.params).toStrictEqual({ id: 'id-many-1', url: 'https://example.com/?id=id-many-1', target: 'new-tab' });
     }
 
     async opensInNewWindow() {
         await this.nthFavorite(0).click({ modifiers: ['Shift'] });
         const calls = await this.ntp.mocks.waitForCallCount({ method: 'favorites_open', count: 1 });
-        expect(calls[0].payload.params).toStrictEqual({ id: 'id-many-1', target: 'new-window' });
+        expect(calls[0].payload.params).toStrictEqual({ id: 'id-many-1', url: 'https://example.com/?id=id-many-1', target: 'new-window' });
     }
 
     async opensInSameTab() {
         await this.nthFavorite(0).click();
         const calls = await this.ntp.mocks.waitForCallCount({ method: 'favorites_open', count: 1 });
-        expect(calls[0].payload.params).toStrictEqual({ id: 'id-many-1', target: 'same-tab' });
+        expect(calls[0].payload.params).toStrictEqual({ id: 'id-many-1', url: 'https://example.com/?id=id-many-1', target: 'same-tab' });
     }
 
     async addsAnItem() {

special-pages/types/new-tab.ts

@@ -133,6 +133,10 @@ export interface FavoritesOpenAction {
    * Entity ID
    */
   id: string;
+  /**
+   * The url to open
+   */
+  url: string;
   target: "same-tab" | "new-tab" | "new-window";
 }
 /**