Reload iframe on every `openNotebook` event

While there is no mechanism to sync new annotations in the notebook, we
force re-rendering of the iframe on every 'openNotebook' event, so we
fetch the new annotations.

This is a temporary fix that is intended to be removed.

src/annotator/components/NotebookModal.js

@@ -26,7 +26,6 @@ function NotebookIframe({ config, groupId }) {
 
   return (
     <iframe
-      key={groupId} // force re-rendering on group change
       title={'Hypothesis annotation notebook'}
       className="Notebook__iframe"
       // Enable media in annotations to be shown fullscreen
@@ -48,6 +47,11 @@ function NotebookIframe({ config, groupId }) {
  * @param {NotebookModalProps} props
  */
 export default function NotebookModal({ eventBus, config }) {
+  // Temporary solution: while there is no mechanism to sync new annotations in
+  // the notebook, we force re-rendering of the iframe on every 'openNotebook'
+  // event, so that the new annotations are displayed.
+  // https://github.com/hypothesis/client/issues/3182
+  const [iframeKey, setIframeKey] = useState(0);
   const [isHidden, setIsHidden] = useState(true);
   const [groupId, setGroupId] = useState(/** @type {string|null} */ (null));
   const originalDocumentOverflowStyle = useRef('');
@@ -81,6 +85,7 @@ export default function NotebookModal({ eventBus, config }) {
       /** @type {string} */ groupId
     ) => {
       setIsHidden(false);
+      setIframeKey(iframeKey => iframeKey + 1);
       setGroupId(groupId);
     });
 
@@ -105,7 +110,7 @@ export default function NotebookModal({ eventBus, config }) {
           onClick={onClose}
         />
         {groupId !== null && (
-          <NotebookIframe config={config} groupId={groupId} />
+          <NotebookIframe key={iframeKey} config={config} groupId={groupId} />
         )}
       </div>
     </div>

src/annotator/components/test/NotebookModal-test.js

@@ -58,7 +58,7 @@ describe('NotebookModal', () => {
     );
   });
 
-  it('creates a new iframe element if the group is changed', () => {
+  it('creates a new iframe element on every "openNotebook" event', () => {
     const wrapper = createComponent();
 
     emitter.publish('openNotebook', '1');
@@ -78,7 +78,7 @@ describe('NotebookModal', () => {
       iframe2.prop('src'),
       `/notebook#config=${encodeURIComponent('{"group":"1"}')}`
     );
-    assert.equal(iframe1.getDOMNode(), iframe2.getDOMNode());
+    assert.notEqual(iframe1.getDOMNode(), iframe2.getDOMNode());
 
     emitter.publish('openNotebook', '2');
     wrapper.update();
@@ -91,7 +91,7 @@ describe('NotebookModal', () => {
     assert.notEqual(iframe1.getDOMNode(), iframe3.getDOMNode());
   });
 
-  it('makes the document unscrollable on openNotebook event', () => {
+  it('makes the document unscrollable on "openNotebook" event', () => {
     createComponent();
     act(() => {
       emitter.publish('openNotebook', 'myGroup');