fix(sandbox): close modal from the parent app

Author: johannes-lindgren

packages/sandbox/src/components/FieldPluginSandbox.tsx

@@ -323,6 +323,7 @@ const useSandbox = (
       setSchema,
       setUrl,
       randomizeUid,
+      setModalOpen,
     },
   ] as const
 }
@@ -342,7 +343,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
       fieldTypeIframe,
       iframeSrc,
     },
-    { setContent, setLanguage, setSchema, setUrl, randomizeUid },
+    { setModalOpen, setContent, setLanguage, setSchema, setUrl, randomizeUid },
   ] = useSandbox(error)
 
   return (
@@ -378,6 +379,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
               enablePortalModal={enablePortalModal}
               fullHeight={fullHeight}
               ref={fieldTypeIframe}
+              onModalChange={setModalOpen}
             />
           </CenteredContent>
           <Stack alignSelf="flex-start">

packages/sandbox/src/components/FieldTypePreview.tsx

@@ -10,10 +10,12 @@ import {
   Backdrop,
   Box,
   Dialog,
+  IconButton,
   SxProps,
   Typography,
 } from '@mui/material'
 import { DisableShieldsNotification } from './DisableShieldsNotification'
+import { CloseIcon } from '@storyblok/mui'
 
 const NonPortalModal: FunctionComponent<
   PropsWithChildren<{
@@ -136,9 +138,11 @@ export const FieldTypePreview = forwardRef<
     // Allows the iframe to be refreshed
     iframeKey?: number
     sx?: SxProps
+    onModalChange: (isModal: boolean) => void
   }
 >(function FieldTypePreview(props, ref) {
-  const { height, isModal, fullHeight, enablePortalModal } = props
+  const { height, isModal, fullHeight, enablePortalModal, onModalChange } =
+    props
 
   const isNonPortalModalOpen = !enablePortalModal && isModal
   const isPortalModalOpen = enablePortalModal && isModal
@@ -154,6 +158,10 @@ export const FieldTypePreview = forwardRef<
     }
   }
 
+  const handleClose = () => {
+    onModalChange(false)
+  }
+
   return (
     <Box sx={props.sx}>
       <DisableShieldsNotification />
@@ -169,7 +177,21 @@ export const FieldTypePreview = forwardRef<
             overflow: 'hidden',
           },
         }}
+        onClose={handleClose}
       >
+        <Box
+          width="100%"
+          display="flex"
+          justifyContent="flex-end"
+          padding={1}
+        >
+          <IconButton
+            onClick={handleClose}
+            color="secondary"
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
         <FieldPluginIframe
           key={props.iframeKey}
           src={props.src}