From 29751e734c5944bcf6de991dec187d59a88e3e6f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Wed, 31 Jan 2024 16:08:59 +0100
Subject: [PATCH] Use ModalDialog in the notebook

---
 package.json                               |  2 +-
 src/annotator/components/NotebookModal.tsx | 26 +++++++++++++++-------
 yarn.lock                                  | 10 ++++-----
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index cf546e8a679..a3512aa425e 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.16.7",
     "@hypothesis/frontend-build": "^3.0.0",
-    "@hypothesis/frontend-shared": "^7.2.0",
+    "@hypothesis/frontend-shared": "^7.3.0",
     "@hypothesis/frontend-testing": "^1.2.0",
     "@npmcli/arborist": "^7.0.0",
     "@octokit/rest": "^20.0.1",
diff --git a/src/annotator/components/NotebookModal.tsx b/src/annotator/components/NotebookModal.tsx
index d8997acadd9..a16f821d1a8 100644
--- a/src/annotator/components/NotebookModal.tsx
+++ b/src/annotator/components/NotebookModal.tsx
@@ -1,4 +1,8 @@
-import { IconButton, CancelIcon } from '@hypothesis/frontend-shared';
+import {
+  IconButton,
+  CancelIcon,
+  ModalDialog,
+} from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
@@ -107,14 +111,20 @@ export default function NotebookModal({
 
   return (
     <div
-      className={classnames(
-        'fixed z-max top-0 left-0 right-0 bottom-0 p-3 bg-black/50',
-        { hidden: isHidden },
-      )}
+      className={classnames({
+        // We just hide the content, instead of fully unmounting the component
+        // to avoid the iframe to be reloaded and re-fetched every time the
+        // notebook is opened
+        hidden: isHidden,
+      })}
       data-testid="notebook-outer"
     >
-      <div className="relative w-full h-full" data-testid="notebook-inner">
-        <div className="absolute right-0 m-3">
+      <ModalDialog
+        variant="custom"
+        size="custom"
+        classes="p-3 relative w-full h-full"
+      >
+        <div className="absolute right-6 top-6">
           <IconButton
             title="Close the Notebook"
             onClick={onClose}
@@ -131,7 +141,7 @@ export default function NotebookModal({
           </IconButton>
         </div>
         <NotebookIframe key={iframeKey} config={config} groupId={groupId} />
-      </div>
+      </ModalDialog>
     </div>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 7b7366694f4..0345a806b9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1995,15 +1995,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hypothesis/frontend-shared@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "@hypothesis/frontend-shared@npm:7.2.0"
+"@hypothesis/frontend-shared@npm:^7.3.0":
+  version: 7.3.0
+  resolution: "@hypothesis/frontend-shared@npm:7.3.0"
   dependencies:
     highlight.js: ^11.6.0
     wouter-preact: ^2.10.0-alpha.1
   peerDependencies:
     preact: ^10.4.0
-  checksum: fe4b515e0f856dcb6c9876e52aba2a262d1bf6cebb13176b6ee2a676df719e2331106ee1595e2de057843fe7ebe8ac03f3a8f568fb03f50b3ea0622496da2ead
+  checksum: 5b295e0cb949c858d70c96ab24e7ec387d31e4a0e5bde6555ba70843cdceaae030a119e20841fa4924888db618c7fa47bdd4f83a3be65da889ad702506cc75f4
   languageName: node
   linkType: hard
 
@@ -7793,7 +7793,7 @@ __metadata:
     "@babel/preset-react": ^7.0.0
     "@babel/preset-typescript": ^7.16.7
     "@hypothesis/frontend-build": ^3.0.0
-    "@hypothesis/frontend-shared": ^7.2.0
+    "@hypothesis/frontend-shared": ^7.3.0
     "@hypothesis/frontend-testing": ^1.2.0
     "@npmcli/arborist": ^7.0.0
     "@octokit/rest": ^20.0.1