Make api simpler

Author: zhanlarr

src/App.js

@@ -31,12 +31,13 @@ const App = () => {
       <br />
       <br />
       <Retool
-        url="https://support.retool.com/embedded/public/cb9e15f0-5d7c-43a7-a746-cdec870dde9a"
+        url="https://retoolin.tryretool.com/embedded/public/9e6c7390-922d-41bd-b038-2e9c0476867c"
         data={data}
         height="700px"
         width="1000px"
         onData={setRetoolData}
-      ></Retool>
+        sandbox 
+      />
       <h1> {JSON.stringify(retoolData)} </h1>
     </div>
   );

src/components/Retool.js

@@ -1,65 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 
-const IFramePermissionKeys = set(['downloads', 'forms', 'modals', 'popups', 'fullscreen', 'camera', 'microphone', 'geolocation', 'payment', 'topNavigation', 'sameOrigin'])
+const MINIMUM_SANDBOX_PERMISSIONS = 'allow-scripts allow-same-origin'
 
-const constructPermissionStrings = (permissions) => {
-  if (!permissions || permissions.length === 0) {
-    return { allowString: undefined, sandboxString: undefined }
-  }
-
-  const allowArray = []
-  const sandboxArray = []
-
-  permissions.filter(permission => IFramePermissionKeys.has(permission)).forEach(permission => {
-    switch (permission) {
-      case 'downloads':
-        sandboxArray.push('allow-downloads')
-        break
-      case 'forms':
-        sandboxArray.push('allow-forms')
-        break
-      case 'modals':
-        sandboxArray.push('allow-modals')
-        break
-      case 'popups':
-        sandboxArray.push('allow-popups', 'allow-popups-to-escape-sandbox')
-        break
-      case 'fullscreen':
-        allowArray.push('fullscreen')
-        break
-      case 'camera':
-        allowArray.push('camera')
-        break
-      case 'microphone':
-        allowArray.push('microphone')
-        break
-      case 'geolocation':
-        allowArray.push('geolocation')
-        break
-      case 'payment':
-        allowArray.push('payment')
-        break
-      case 'topNavigation':
-        sandboxArray.push('allow-top-navigation', 'allow-top-navigation-by-user-activation')
-        break
-      case 'sameOrigin':
-        sandboxArray.push('allow-same-origin')
-        break
-    }
-  })
-
-  const allowString = allowArray.length > 0 ? allowArray.join(';') : undefined
-  const sandboxString = sandboxArray.length > 0 ? sandboxArray.join(' ') : undefined
-
-  return { allowString, sandboxString }
-}
-
-const Retool = ({ data, url, height, width, onData, permissions }) => {
+const Retool = ({ data, url, height, width, onData, sandbox, allow }) => {
   const embeddedIframe = useRef(null);
   const [elementWatchers, setElementWatchers] = useState({});
 
-  const { allowString, sandboxString } = constructPermissionStrings(permissions)
-
   /* Retool passes up the list of elements to watch on page load  */
   useEffect(() => {
     for (const key in elementWatchers) {
@@ -141,17 +87,19 @@ const Retool = ({ data, url, height, width, onData, permissions }) => {
     }
   };
 
+  const sandboxAttrib = typeof sandbox === 'string' ? `${MINIMUM_SANDBOX_PERMISSIONS} ${sandbox}` : sandbox === true ? MINIMUM_SANDBOX_PERMISSIONS : sandbox
+
   return (
     <iframe
-      allow={allowString}
-      sandbox={sandboxString}
+      allow={allow}
+      sandbox={sandboxAttrib}
       height={height ?? "100%"}
       width={width ?? "100%"}
       frameBorder="none"
       src={url}
       ref={embeddedIframe}
       title="retool"
-    ></iframe>
+    />
   );
 };