Use new ModalDialog for use profile modal

src/annotator/components/ModalDialog.tsx

@@ -6,9 +6,15 @@ type DialogProps = {
   closed: boolean;
   children: ComponentChildren;
   onClose: () => void;
+  'data-testid'?: string;
 };
 
-const NativeDialog = ({ closed, children, onClose }: DialogProps) => {
+function NativeDialog({
+  closed,
+  onClose,
+  children,
+  'data-testid': testId,
+}: DialogProps) {
   const dialogRef = useRef<HTMLDialogElement | null>(null);
 
   useEffect(() => {
@@ -32,32 +38,30 @@ const NativeDialog = ({ closed, children, onClose }: DialogProps) => {
     <dialog
       ref={dialogRef}
       className="relative w-full h-full backdrop:bg-black/50"
-      data-testid="notebook-outer"
+      data-testid={testId}
     >
       {children}
     </dialog>
   );
-};
+}
 
 /**
  * Temporary fallback used in browsers not supporting `dialog` element.
  * It can be removed once all browsers we support can use it.
  */
-const FallbackDialog = ({ closed, children }: DialogProps) => {
+function FallbackDialog({ closed, children, ...rest }: DialogProps) {
   return (
     <div
+      {...rest}
       className={classnames(
         'fixed z-max top-0 left-0 right-0 bottom-0 p-3 bg-black/50',
         { hidden: closed },
       )}
-      data-testid="notebook-outer"
     >
-      <div className="relative w-full h-full" data-testid="notebook-inner">
-        {children}
-      </div>
+      <div className="relative w-full h-full">{children}</div>
     </div>
   );
-};
+}
 
 /** Checks if the browser supports native modal dialogs */
 function isModalDialogSupported(document: Document) {

src/annotator/components/NotebookModal.tsx

@@ -108,7 +108,11 @@ export default function NotebookModal({
   }
 
   return (
-    <ModalDialog closed={isHidden} onClose={onClose}>
+    <ModalDialog
+      closed={isHidden}
+      onClose={onClose}
+      data-testid="notebook-outer"
+    >
       <div className="absolute right-0 m-3">
         <IconButton
           title="Close the Notebook"

src/annotator/components/ProfileModal.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import type { Emitter, EventBus } from '../util/emitter';
+import ModalDialog from './ModalDialog';
 
 export type ProfileConfig = { profileAppUrl: string } & Record<string, unknown>;
 
@@ -37,33 +38,32 @@ export default function ProfileModal({ eventBus, config }: ProfileModalProps) {
   }
 
   return (
-    <div
-      className="fixed z-max top-0 left-0 right-0 bottom-0 p-3 bg-black/50"
+    <ModalDialog
+      closed={isHidden}
+      onClose={onClose}
       data-testid="profile-outer"
     >
-      <div className="relative w-full h-full" data-testid="profile-inner">
-        <div className="absolute right-0 m-3">
-          <IconButton
-            title="Close the Profile"
-            onClick={onClose}
-            variant="dark"
-            classes={classnames(
-              // Remove the dark variant's background color to avoid
-              // interfering with modal overlays. Re-activate the dark variant's
-              // background color on hover.
-              // See https://github.com/hypothesis/client/issues/3676
-              '!bg-transparent enabled:hover:!bg-grey-3',
-            )}
-          >
-            <CancelIcon className="w-4 h-4" />
-          </IconButton>
-        </div>
-        <iframe
-          title={'Hypothesis profile'}
-          className="h-full w-full border-0"
-          src={config.profileAppUrl}
-        />
+      <div className="absolute right-0 m-3">
+        <IconButton
+          title="Close profile dialog"
+          onClick={onClose}
+          variant="dark"
+          classes={classnames(
+            // Remove the dark variant's background color to avoid
+            // interfering with modal overlays. Re-activate the dark variant's
+            // background color on hover.
+            // See https://github.com/hypothesis/client/issues/3676
+            '!bg-transparent enabled:hover:!bg-grey-3',
+          )}
+        >
+          <CancelIcon className="w-4 h-4" />
+        </IconButton>
       </div>
-    </div>
+      <iframe
+        title={'Hypothesis profile'}
+        className="h-full w-full border-0"
+        src={config.profileAppUrl}
+      />
+    </ModalDialog>
   );
 }

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

@@ -6,13 +6,13 @@ describe('ModalDialog', () => {
   let components;
 
   const createComponent = props => {
-    const attachTo = document.createElement('div');
-    document.body.appendChild(attachTo);
+    const container = document.createElement('div');
+    document.body.appendChild(container);
 
     const component = mount(<ModalDialog open {...props} />, {
-      attachTo,
+      attachTo: container,
     });
-    components.push([component, attachTo]);
+    components.push([component, container]);
     return component;
   };
 

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

@@ -12,7 +12,7 @@ describe('NotebookModal', () => {
   let eventBus;
   let emitter;
 
-  const outerSelector = '[data-testid="notebook-outer"]';
+  const outerSelector = 'dialog[data-testid="notebook-outer"]';
 
   const createComponent = config => {
     const attachTo = document.createElement('div');