refactor events communication between app and plugins

Author: Artyom Podymov

redisinsight/ui/src/components/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx

@@ -48,23 +48,31 @@ const QueryCardCliPlugin = (props: Props) => {
   const dispatch = useDispatch()
 
   const executeCommand = () => {
-    pluginIframeRef?.current?.contentWindow?.postMessage({
+    const event:any = document.createEvent('Event')
+    event.initEvent('message', true, true)
+    event.data = {
       event: 'executeCommand',
       method: currentView.activationMethod,
       data: { command: query, data: result, status }
-    }, '*')
+    }
+    event.origin = '*'
+    pluginIframeRef?.current?.contentWindow?.dispatchEvent(event)
   }
 
   const sendRedisCommand = (command: string, requestId: string) => {
     dispatch(
       sendPluginCommandAction({
         command,
         onSuccessAction: (response) => {
-          pluginIframeRef?.current?.contentWindow?.postMessage({
+          const event:any = document.createEvent('Event')
+          event.initEvent('message', true, true)
+          event.data = {
             event: 'executeRedisCommand',
             requestId,
             data: response
-          }, '*')
+          }
+          event.origin = '*'
+          pluginIframeRef?.current?.contentWindow?.dispatchEvent(event)
         }
       })
     )
@@ -107,8 +115,9 @@ const QueryCardCliPlugin = (props: Props) => {
       bodyClass: theme === Theme.Dark ? 'theme_DARK' : 'theme_LIGHT',
       modules
     })
+    //pluginIframeRef.current.src = `data:text/html;charset=utf-8,${encodeURI(html)}`
     // @ts-ignore
-    pluginIframeRef.current.src = `data:text/html;charset=utf-8,${encodeURI(html)}`
+    pluginIframeRef.current.srcdoc = html
   }
 
   const getGlobalStylesSrc = (): string =>
@@ -155,7 +164,7 @@ const QueryCardCliPlugin = (props: Props) => {
           title={id}
           ref={pluginIframeRef}
           referrerPolicy="no-referrer"
-          sandbox="allow-same-origin allow-scripts"
+          sandbox="allow-same-origin allow-scripts allow-modals"
         />
         {!!error && (
           <div className={styles.container}>

redisinsight/ui/src/packages/redis-app-plugin-api/helpers.js

@@ -4,5 +4,13 @@
  * @param data
  */
 export const sendMessageToMain = (data = {}) => {
-  window.top.postMessage(data, '*')
+  const event = document.createEvent('Event')
+  event.initEvent('message', true, true)
+  event.data = data
+  event.origin = '*'
+  // eslint-disable-next-line no-restricted-globals
+  parent.dispatchEvent(event)
 }
+// export const sendMessageToMain = (data = {}) => {
+//   window.top.postMessage(data, '*')
+// }

redisinsight/ui/src/packages/redisearch/src/main.tsx

@@ -14,6 +14,7 @@ interface Props {
 
 const renderRediSearch = (props:Props) => {
   const { command = '', status = '', data: response = {} } = props
+  alert('renderRediSearch')
   render(<App command={command} response={response} status={status} />,
     document.getElementById('app'))
 }

redisinsight/ui/src/plugins/pluginEvents.ts

@@ -20,6 +20,7 @@ export enum PluginEvents {
 
 export const listenPluginsEvents = () => {
   globalThis.onmessage = (e: MessageEvent) => {
+    console.log(22222, e.data)
     switch (e.data?.event) {
       case 'loaded': {
         pluginApi.sendEvent(e.data.iframeId, 'loaded')

redisinsight/ui/src/plugins/pluginImport.ts

@@ -20,7 +20,12 @@ export const importPluginScript = () => (config) => {
   const { callbacks } = globalThis.state
 
   const sendMessageToMain = (data = {}) => {
-    globalThis.top.postMessage(data, '*')
+    const event = document.createEvent('Event')
+    event.initEvent('message', true, true)
+    event.data = data
+    event.origin = '*'
+    // eslint-disable-next-line no-restricted-globals
+    parent.dispatchEvent(event)
   }
 
   const providePluginSDK = () => {
@@ -36,9 +41,22 @@ export const importPluginScript = () => (config) => {
   }
 
   const listenEvents = () => {
+
     globalThis.onmessage = (e) => {
       if (e.data.event === events.EXECUTE_COMMAND) {
-        plugin[e.data.method] && plugin[e.data.method](e.data.data)
+        const event = document.createEvent('Event')
+        event.initEvent('message', true, true)
+        event.data = {
+          event: events.EXECUTE_COMMAND,
+          method: e.data.method,
+          data: e.data.data,
+          plugin: globalThis.plugin,
+          iframeId: `${iframeId}`
+        }
+        event.origin = '*'
+        // eslint-disable-next-line no-restricted-globals
+        parent.dispatchEvent(event)
+        globalThis.plugin[e.data.method] && globalThis.plugin[e.data.method](e.data.data)
       }
 
       if (e.data.event === events.EXECUTE_REDIS_COMMAND) {
@@ -84,22 +102,29 @@ export const prepareIframeHtml = (config) => {
       <body class="${bodyClass}" style="height: fit-content">
         <div id="app"></div>
         <script>
-          let plugin = {}
           ;(${importPluginScriptInner})(\`${configString}\`);
           import(\`${scriptSrc}\`)
               .then((module) => {
-                  plugin = { ...module.default };
-                  globalThis.top.postMessage({
+                  globalThis.plugin = { ...module.default };
+                  var event = document.createEvent('Event')
+                  event.initEvent("message", true, true);
+                  event.data = {
                     event: 'loaded',
                     iframeId: \`${iframeId}\`
-                  }, '*')
+                  }
+                  event.origin = '*'
+                  parent.dispatchEvent(event);
               })
-              .catch(() => {
-                globalThis.top.postMessage({
+              .catch((e) => {
+                  var event = document.createEvent('Event')
+                  event.initEvent("message", true, true);
+                  event.data = {
                     event: 'error',
                     iframeId: \`${iframeId}\`,
                     error: \`${scriptPath} not found. Check if it has been renamed or deleted and try again.\`
-                  }, '*')
+                  }
+                  event.origin = '*'
+                  parent.dispatchEvent(event);
               })
         </script>
         <script src="${scriptSrc}" type="module"></script>

tests/e2e/tests/critical-path/workbench/scripting-area.e2e.ts

@@ -88,8 +88,7 @@ test.skip('Verify that user when he have more than 10 results can request to vie
     await workbenchPage.sendCommandInWorkbench('FT.DROPINDEX products DD');
 });
 //skipped due the inaccessibility of the iframe
-test.skip
-    .after(async t => {
+test.only.after(async t => {
         //Drop index and documents
         await workbenchPage.sendCommandInWorkbench('FT.DROPINDEX products DD');
     })
@@ -105,6 +104,8 @@ test.skip
         //Send search command
         await workbenchPage.sendCommandInWorkbench(searchCommand);
         //Check that result is displayed in Table view
+        t.wait(10000)
+        t.debug()
         await t.expect(workbenchPage.queryTableResult.exists).ok('The result is displayed in Table view');
         //Select Text view type
         await workbenchPage.selectViewTypeText();