From bcb23bc9dcc5eff55b6c7fbaf09b2751224089d6 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 31 Aug 2022 14:52:49 +0200
Subject: [PATCH] Cleaned up Frame components

refs https://github.com/TryGhost/Team/issues/1858
---
 apps/comments-ui/src/App.js                   |  14 +--
 apps/comments-ui/src/components/Frame.js      | 107 ++++++++++--------
 .../src/components/modals/GenericDialog.js    |   6 +-
 3 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js
index 7e1140db53..9e1805d0f4 100644
--- a/apps/comments-ui/src/App.js
+++ b/apps/comments-ui/src/App.js
@@ -1,4 +1,4 @@
-import Frame from './components/Frame';
+import {CommentsFrame} from './components/Frame';
 import React from 'react';
 import {isSyncAction, ActionHandler, SyncActionHandler} from './actions';
 import {createPopupNotification} from './utils/helpers';
@@ -18,14 +18,6 @@ function AuthFrame({adminUrl, onLoad}) {
     );
 }
 
-function CommentsBoxContainer({done, appVersion}) {
-    return (
-        <Frame title="comments-box">
-            <CommentsBox done={done} />
-        </Frame>
-    );
-}
-
 function SentryErrorBoundary({dsn, children}) {
     // todo: add Sentry.ErrorBoundary wrapper if Sentry is enabled
     return (
@@ -309,7 +301,9 @@ export default class App extends React.Component {
         return (
             <SentryErrorBoundary dsn={this.props.sentryDsn}>
                 <AppContext.Provider value={this.getContextFromState()}>
-                    <CommentsBoxContainer done={done} />
+                    <CommentsFrame>
+                        <CommentsBox done={done} />
+                    </CommentsFrame>
                     <AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initAdminAuth.bind(this)}/>
                     <PopupModal />
                 </AppContext.Provider>
diff --git a/apps/comments-ui/src/components/Frame.js b/apps/comments-ui/src/components/Frame.js
index 73736906a5..e72b938902 100644
--- a/apps/comments-ui/src/components/Frame.js
+++ b/apps/comments-ui/src/components/Frame.js
@@ -2,32 +2,73 @@ import React, {useContext, useState} from 'react';
 import AppContext from '../AppContext';
 import IFrame from './IFrame';
 
-const Frame = ({
-    children,
-    type,
-    ...props
-}) => {
+/**
+ * Loads all the CSS styles inside an iFrame. Only shows the visible content as soon as the CSS file with the tailwind classes has loaded.
+ */
+const TailwindFrame = ({children, onResize, style, title}) => {
     const {stylesUrl} = useContext(AppContext);
+    const [cssLoaded, setCssLoaded] = useState(!stylesUrl);
 
-    const styles = `
+    const initialStyles = `
         body, html {
             overflow: hidden;
         }
     `;
 
-    // We have two types of frames:
-    // - A full width + content fitted height one
-    // - A fixed positioned one for modals
-    /**
-     * @type {'dynamic'|'fixed'}
-     */
-    type = type ?? 'dynamic';
+    const onLoadCSS = () => {
+        setCssLoaded(true);
+    };
 
-    // For now we don't listen for type changes, we could consider adding useEffect, but that won't be used
-    const defaultStyle = type === 'dynamic' ? {
+    const head = (
+        <>
+            {stylesUrl ? <link rel="stylesheet" href={stylesUrl} onLoad={onLoadCSS} /> : null}
+            <style dangerouslySetInnerHTML={{__html: initialStyles}} />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+        </>
+    );
+
+    // For now we're using <NewFrame> because using a functional component with portal caused some weird issues with modals
+    return (
+        <IFrame head={head} style={style} onResize={onResize} title={title}>
+            {cssLoaded && children}
+        </IFrame>
+    );
+};
+
+/**
+ * This iframe has the same height as it contents and mimics a shadow DOM component
+ */
+const ResizableFrame = ({children, style, title}) => {
+    const [iframeStyle, setIframeStyle] = useState(style);
+    const onResize = (iframeRoot) => {
+        setIframeStyle((current) => {
+            return {
+                ...current,
+                height: `${iframeRoot.scrollHeight}px`
+            };
+        });
+    };
+    return (
+        <TailwindFrame style={iframeStyle} onResize={onResize} title={title}>
+            {children}
+        </TailwindFrame>
+    );
+};
+
+export const CommentsFrame = ({children}) => {
+    const style = {
         width: '100%',
         height: '400px'
-    } : {
+    };
+    return (
+        <ResizableFrame style={style} title="comments-frame">
+            {children}
+        </ResizableFrame>
+    );
+};
+
+export const PopupFrame = ({children}) => {
+    const style = {
         zIndex: '3999999',
         position: 'fixed',
         left: '0',
@@ -37,37 +78,9 @@ const Frame = ({
         overflow: 'hidden'
     };
 
-    const [iframeStyle, setIframeStyle] = useState(defaultStyle);
-
-    const onResize = (iframeRoot) => {
-        setIframeStyle((current) => {
-            return {
-                ...current,
-                height: `${iframeRoot.scrollHeight}px`
-            };
-        });
-    };
-
-    const [cssLoaded, setCssLoaded] = useState(!stylesUrl);
-
-    const onLoadCSS = () => {
-        setCssLoaded(true);
-    };
-
-    const head = (
-        <>
-            {stylesUrl ? <link rel="stylesheet" href={stylesUrl} onLoad={onLoadCSS} /> : null}
-            <style dangerouslySetInnerHTML={{__html: styles}} />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-        </>
-    );
-
-    // For now we're using <NewFrame> because using a functional component with portal caused some weird issues with modals
     return (
-        <IFrame {...props} head={head} style={iframeStyle} onResize={type === 'dynamic' ? onResize : null}>
-            {cssLoaded && children}
-        </IFrame>
+        <TailwindFrame style={style} title="popup-frame">
+            {children}
+        </TailwindFrame>
     );
 };
-
-export default Frame;
diff --git a/apps/comments-ui/src/components/modals/GenericDialog.js b/apps/comments-ui/src/components/modals/GenericDialog.js
index 6aacec0b05..5364e45d9b 100644
--- a/apps/comments-ui/src/components/modals/GenericDialog.js
+++ b/apps/comments-ui/src/components/modals/GenericDialog.js
@@ -1,6 +1,6 @@
 import React, {useContext, useEffect} from 'react';
 import {Transition} from '@headlessui/react';
-import Frame from '../Frame';
+import {PopupFrame} from '../Frame';
 import AppContext from '../../AppContext';
 
 const GenericDialog = (props) => {
@@ -29,7 +29,7 @@ const GenericDialog = (props) => {
 
     return (
         <Transition show={props.show} appear={true}>
-            <Frame type="fixed">
+            <PopupFrame>
                 <div>
                     <Transition.Child
                         enter="transition duration-200 linear"
@@ -53,7 +53,7 @@ const GenericDialog = (props) => {
                         </div>
                     </Transition.Child>
                 </div>
-            </Frame>
+            </PopupFrame>
         </Transition>
     );
 };