🎨 Changed share hash route from #/portal/share to #/share

ref #26866

This switches share routing to #/share and keeps the old hash path disabled for the requested breaking change.

Author: peterzimon

apps/portal/README.md

@@ -22,7 +22,7 @@ By default, the script adds a default floating trigger button on the bottom righ
 
 Its possible to add custom trigger button of your own by adding data attribute `data-portal` to any HTML tag on page, and also specify a specific [page](https://github.com/TryGhost/Ghost/blob/main/ghost/portal/src/pages.js#L13-L22) to open from it by using it as `data-portal=signup`.
 
-Share modal can be opened with `data-portal="share"` (or `#/portal/share`).
+Share modal can be opened with `data-portal="share"` (or `#/share`).
 
 Default (zero-config) usage:
 ```html

apps/portal/src/app.js

@@ -532,6 +532,7 @@ export default class App extends React.Component {
         const productYearlyPriceQueryRegex = /^(?:(\w+?))?\/yearly$/;
         const offersRegex = /^offers\/(\w+?)\/?$/;
         const linkRegex = /^\/portal\/?(?:\/(\w+(?:\/\w+)*))?\/?$/;
+        const shareRegex = /^\/share\/?$/;
         const feedbackRegex = /^\/feedback\/(\w+?)\/(\w+?)\/?$/;
 
         if (path && feedbackRegex.test(path)) {
@@ -561,8 +562,21 @@ export default class App extends React.Component {
                 }
             }
         }
+        if (path && shareRegex.test(path)) {
+            return {
+                showPopup: true,
+                page: 'share'
+            };
+        }
+
         if (path && linkRegex.test(path)) {
             const [,pagePath] = path.match(linkRegex);
+
+            // `#/portal/share` has been replaced with `#/share`.
+            if (pagePath === 'share') {
+                return {};
+            }
+
             const {page, pageQuery, pageData} = this.getPageFromLinkPath(pagePath) || {};
 
             // If user is not logged in and trying to access an account page,
@@ -1118,7 +1132,7 @@ export default class App extends React.Component {
      * portal. Especially useful for copy/pasted links from Admin screens.
      */
     transformPortalLinksToRelative() {
-        document.querySelectorAll('a[href*="#/portal"]').forEach(transformPortalAnchorToRelative);
+        document.querySelectorAll('a[href*="#/portal"], a[href*="#/share"]').forEach(transformPortalAnchorToRelative);
     }
 
     render() {

apps/portal/src/utils/transform-portal-anchor-to-relative.js

@@ -1,14 +1,17 @@
 export function transformPortalAnchorToRelative(anchor) {
     const href = anchor.getAttribute('href');
     const url = new URL(href, window.location.origin);
+    const supportedHashPrefixes = ['#/portal', '#/share'];
+    const hasSupportedHashPrefix = supportedHashPrefixes.some(prefix => url.hash.startsWith(prefix));
+    const hasRelativeSupportedHashPrefix = supportedHashPrefixes.some(prefix => href.startsWith(prefix));
 
     // ignore non-portal links
-    if (!url.hash || !url.hash.startsWith('#/portal')) {
+    if (!url.hash || !hasSupportedHashPrefix) {
         return;
     }
 
     // ignore already-relative links
-    if (href.startsWith('#/portal')) {
+    if (hasRelativeSupportedHashPrefix) {
         return;
     }
 

apps/portal/test/app.test.js

@@ -63,6 +63,21 @@ describe('App', function () {
         expect(link.getAttribute('href')).toBe('#/portal/signup');
     });
 
+    test('transforms share links on render', async () => {
+        const link = document.createElement('a');
+        link.setAttribute('href', 'http://example.com/#/share');
+        document.body.appendChild(link);
+
+        const ghostApi = setupApi();
+        const utils = appRender(
+            <App siteUrl="http://example.com" api={ghostApi} />
+        );
+
+        await utils.findByTitle(/portal-popup/i);
+
+        expect(link.getAttribute('href')).toBe('#/share');
+    });
+
     test('prefers locale prop over site locale for i18n language', async () => {
         const ghostApi = setupApi({
             site: {

apps/portal/test/portal-links.test.js

@@ -189,9 +189,9 @@ describe('Portal Data links:', () => {
         });
     });
 
-    describe('#/portal/share', () => {
+    describe('#/share', () => {
         test('opens portal share page', async () => {
-            window.location.hash = '#/portal/share';
+            window.location.hash = '#/share';
             let {
                 popupFrame, triggerButtonFrame, ...utils
             } = await setup({
@@ -204,6 +204,19 @@ describe('Portal Data links:', () => {
             const shareTitle = within(popupFrame.contentDocument).queryByText(/^Share$/i);
             expect(shareTitle).toBeInTheDocument();
         });
+
+        test('does not open share page with legacy #/portal/share path', async () => {
+            window.location.hash = '#/portal/share';
+            const {
+                triggerButtonFrame, queryByTitle
+            } = await setup({
+                site: FixtureSite.singleTier.basic,
+                showPopup: false
+            });
+
+            expect(triggerButtonFrame).toBeInTheDocument();
+            expect(queryByTitle(/portal-popup/i)).not.toBeInTheDocument();
+        });
     });
 
     describe('#/portal/signup/free', () => {

apps/portal/test/unit/transform-portal-anchor-to-relative.test.js

@@ -19,6 +19,14 @@ describe('transformPortalAnchorToRelative', function () {
         expect(anchor.getAttribute('href')).toBe('#/portal/signup');
     });
 
+    test('ignores already-relative share links', function () {
+        const anchor = document.createElement('a');
+        anchor.setAttribute('href', '#/share');
+        transformPortalAnchorToRelative(anchor);
+
+        expect(anchor.getAttribute('href')).toBe('#/share');
+    });
+
     test('ignores external links', function () {
         const anchor = document.createElement('a');
         anchor.setAttribute('href', 'https://example.com/#/portal/signup');
@@ -34,4 +42,12 @@ describe('transformPortalAnchorToRelative', function () {
 
         expect(anchor.getAttribute('href')).toBe('#/portal/signup');
     });
+
+    test('converts absolute share links to relative links', function () {
+        const anchor = document.createElement('a');
+        anchor.setAttribute('href', 'http://localhost:3000/#/share');
+        transformPortalAnchorToRelative(anchor);
+
+        expect(anchor.getAttribute('href')).toBe('#/share');
+    });
 });