Adapt configuration to support the new user profile mini-app

.github/workflows/release.yml

@@ -28,6 +28,7 @@ jobs:
     environment: qa
     env:
       NOTEBOOK_APP_URL: https://qa.hypothes.is/notebook
+      PROFILE_APP_URL: https://qa.hypothes.is/user-profile
       SIDEBAR_APP_URL: https://qa.hypothes.is/app.html
 
     steps:
@@ -69,6 +70,7 @@ jobs:
     environment: production
     env:
       NOTEBOOK_APP_URL: https://hypothes.is/notebook
+      PROFILE_APP_URL: https://hypothes.is/user-profile
       SIDEBAR_APP_URL: https://hypothes.is/app.html
 
     steps:

rollup-boot.config.mjs

@@ -21,6 +21,10 @@ const notebookAppUrl = process.env.NOTEBOOK_APP_URL
   ? `${process.env.NOTEBOOK_APP_URL}`
   : `${localhost}:5000/notebook`;
 
+const profileAppUrl = process.env.PROFILE_APP_URL
+  ? `${process.env.PROFILE_APP_URL}`
+  : `${localhost}:5000/user-profile`;
+
 const sidebarAppUrl = process.env.SIDEBAR_APP_URL
   ? `${process.env.SIDEBAR_APP_URL}`
   : `${localhost}:5000/app.html`;
@@ -52,6 +56,7 @@ export default {
       values: {
         __ASSET_ROOT__: assetRoot,
         __NOTEBOOK_APP_URL__: notebookAppUrl,
+        __PROFILE_APP_URL__: profileAppUrl,
         __SIDEBAR_APP_URL__: sidebarAppUrl,
       },
     }),

src/annotator/config/app.js

@@ -36,7 +36,7 @@ export function createAppConfig(appURL, config) {
   appConfig.origin = new URL(appURL).origin;
 
   // Pass the version of the client, so we can check if it is the same as the
-  // one used in the sidebar/notebook.
+  // one used in the sidebar/notebook/profile.
   appConfig.version = '__VERSION__';
 
   // Pass the URL of the page that embedded the client.

src/annotator/config/index.js

@@ -23,7 +23,7 @@ import { urlFromLinkTag } from './url-from-link-tag';
  * Named subset of the Hypothesis client configuration that is relevant in
  * a particular context.
  *
- * @typedef {'sidebar'|'notebook'|'annotator'|'all'} Context
+ * @typedef {'sidebar'|'notebook'|'profile'|'annotator'|'all'} Context
  */
 
 /**
@@ -61,6 +61,7 @@ function configurationKeys(context) {
       'theme',
       'usernameUrl',
     ],
+    profile: ['profileAppUrl'],
   };
 
   switch (context) {
@@ -70,9 +71,11 @@ function configurationKeys(context) {
       return contexts.sidebar;
     case 'notebook':
       return contexts.notebook;
+    case 'profile':
+      return contexts.profile;
     case 'all':
       // Complete list of configuration keys used for testing.
-      return [...contexts.annotator, ...contexts.sidebar, ...contexts.notebook];
+      return Object.values(contexts).flat();
     default:
       throw new Error(`Invalid application context used: "${context}"`);
   }
@@ -177,6 +180,11 @@ const configDefinitions = {
     defaultValue: null,
     getValue: settings => settings.notebookAppUrl,
   },
+  profileAppUrl: {
+    allowInBrowserExt: true,
+    defaultValue: null,
+    getValue: settings => settings.profileAppUrl,
+  },
   sidebarAppUrl: {
     allowInBrowserExt: true,
     defaultValue: null,

src/annotator/config/settings.js

@@ -14,6 +14,7 @@ import { urlFromLinkTag } from './url-from-link-tag';
  * @prop {string} clientUrl
  * @prop {string} sidebarAppUrl
  * @prop {string} notebookAppUrl
+ * @prop {string} profileAppUrl
  * @prop {(name: string) => unknown} hostPageSetting
  */
 
@@ -175,6 +176,9 @@ export function settingsFrom(window_) {
     get notebookAppUrl() {
       return urlFromLinkTag(window_, 'notebook', 'html');
     },
+    get profileAppUrl() {
+      return urlFromLinkTag(window_, 'profile', 'html');
+    },
     get showHighlights() {
       return showHighlights();
     },

src/annotator/config/test/index-test.js

@@ -12,6 +12,7 @@ describe('annotator/config/index', () => {
       clientUrl: 'fakeValue',
       group: 'fakeValue',
       notebookAppUrl: 'fakeValue',
+      profileAppUrl: 'fakeValue',
       showHighlights: 'fakeValue',
       sidebarAppUrl: 'fakeValue',
       query: 'fakeValue',
@@ -83,6 +84,7 @@ describe('annotator/config/index', () => {
             focus: null,
             group: 'fakeValue',
             notebookAppUrl: 'fakeValue',
+            profileAppUrl: 'fakeValue',
             onLayoutChange: null,
             openSidebar: true, // coerced
             query: 'fakeValue',
@@ -115,6 +117,7 @@ describe('annotator/config/index', () => {
             focus: 'fakeValue',
             group: 'fakeValue',
             notebookAppUrl: 'fakeValue',
+            profileAppUrl: 'fakeValue',
             onLayoutChange: 'fakeValue',
             openSidebar: true, // coerced
             query: 'fakeValue',
@@ -171,6 +174,7 @@ describe('annotator/config/index', () => {
         focus: null,
         group: null,
         notebookAppUrl: null,
+        profileAppUrl: null,
         onLayoutChange: null,
         openSidebar: false,
         query: null,
@@ -255,6 +259,10 @@ describe('annotator/config/index', () => {
           'usernameUrl',
         ],
       },
+      {
+        app: 'profile',
+        expectedKeys: ['profileAppUrl'],
+      },
     ].forEach(test => {
       it(`ignores values not belonging to "${test.app}" context`, () => {
         const config = getConfig(test.app, 'WINDOW');

src/annotator/config/test/settings-test.js

@@ -35,6 +35,16 @@ describe('annotator/config/settingsFrom', () => {
     });
   });
 
+  describe('#profileAppUrl', () => {
+    it('calls urlFromLinkTag with appropriate params', () => {
+      assert.equal(
+        settingsFrom(window).profileAppUrl,
+        'http://example.com/app.html'
+      );
+      assert.calledWith(fakeUrlFromLinkTag, window, 'profile', 'html');
+    });
+  });
+
   describe('#sidebarAppUrl', () => {
     it('calls urlFromLinkTag with appropriate params', () => {
       assert.equal(

src/boot/boot.js

@@ -10,6 +10,7 @@
  * @typedef AnnotatorConfig
  * @prop {string} assetRoot - The root URL to which URLs in `manifest` are relative
  * @prop {string} notebookAppUrl - The URL of the sidebar's notebook
+ * @prop {string} profileAppUrl - The URL of the sidebar's user profile view
  * @prop {string} sidebarAppUrl - The URL of the sidebar's HTML page
  * @prop {Record<string,string>} manifest -
  *   A mapping from canonical asset path to cache-busted asset path
@@ -154,6 +155,9 @@ export function bootHypothesisClient(doc, config) {
   // Register the URL of the notebook app which the Hypothesis client should load.
   injectLink(doc, 'notebook', 'html', config.notebookAppUrl);
 
+  // Register the URL of the user profile app which the Hypothesis client should load.
+  injectLink(doc, 'profile', 'html', config.profileAppUrl);
+
   // Preload the styles used by the shadow roots of annotator UI elements.
   preloadURL(doc, 'style', assetURL(config, 'styles/annotator.css'));
 

src/boot/index.js

@@ -39,6 +39,9 @@ if (isBrowserSupported()) {
     const notebookAppUrl = processUrlTemplate(
       annotatorConfig.notebookAppUrl || '__NOTEBOOK_APP_URL__'
     );
+    const profileAppUrl = processUrlTemplate(
+      annotatorConfig.profileAppUrl || '__PROFILE_APP_URL__'
+    );
     const sidebarAppUrl = processUrlTemplate(
       annotatorConfig.sidebarAppUrl || '__SIDEBAR_APP_URL__'
     );
@@ -46,6 +49,7 @@ if (isBrowserSupported()) {
       assetRoot,
       manifest,
       notebookAppUrl,
+      profileAppUrl,
       sidebarAppUrl,
     });
   }

src/sidebar/services/router.js

 /**
- * @typedef {'annotation'|'notebook'|'stream'|'sidebar'} RouteName
+ * @typedef {'annotation'|'notebook'|'profile'|'stream'|'sidebar'} RouteName
  * @typedef {Record<string,string>} RouteParams
  */
 
@@ -58,6 +58,9 @@ export class RouterService {
       case 'notebook':
         route = 'notebook';
         break;
+      case 'user-profile':
+        route = 'profile';
+        break;
       case 'stream':
         route = 'stream';
         break;
@@ -90,6 +93,9 @@ export class RouterService {
       case 'notebook':
         url = '/notebook';
         break;
+      case 'profile':
+        url = '/user-profile';
+        break;
       case 'stream':
         url = '/stream';
         break;

src/sidebar/services/test/router-test.js

@@ -15,6 +15,11 @@ const fixtures = [
     route: 'notebook',
     params: {},
   },
+  {
+    path: '/user-profile',
+    route: 'profile',
+    params: {},
+  },
   {
     path: '/a/foo',
     route: 'annotation',

src/sidebar/store/modules/route.js

 import { createStoreModule, makeAction } from '../create-store';
 
 /**
- * @typedef {'annotation'|'notebook'|'sidebar'|'stream'} RouteName
+ * @typedef {'annotation'|'notebook'|'profile'|'sidebar'|'stream'} RouteName
  */
 
 const initialState = {