refactoring

Author: Artyom Podymov

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

@@ -47,32 +47,32 @@ const QueryCardCliPlugin = (props: Props) => {
 
   const dispatch = useDispatch()
 
+  const sendMessageToPlugin = (data = {}) => {
+    const event: any = document.createEvent('Event')
+    event.initEvent('message', false, false)
+    event.data = data
+    event.origin = '*'
+    pluginIframeRef?.current?.contentWindow?.dispatchEvent(event)
+  }
+
   const executeCommand = () => {
-    const event:any = document.createEvent('Event')
-    event.initEvent('message', true, true)
-    event.data = {
+    sendMessageToPlugin({
       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) => {
-          const event:any = document.createEvent('Event')
-          event.initEvent('message', true, true)
-          event.data = {
+          sendMessageToPlugin({
             event: 'executeRedisCommand',
             requestId,
             data: response
-          }
-          event.origin = '*'
-          pluginIframeRef?.current?.contentWindow?.dispatchEvent(event)
+          })
         }
       })
     )
@@ -115,7 +115,6 @@ 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.srcdoc = html
   }

redisinsight/ui/src/plugins/pluginImport.ts

@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/no-nested-template-literals */
+/* eslint-disable no-restricted-globals */
 // @ts-nocheck
 export const importPluginScript = () => (config) => {
   const { scriptSrc, stylesSrc, iframeId, modules, baseUrl } = JSON.parse(config)
@@ -21,10 +22,9 @@ export const importPluginScript = () => (config) => {
 
   const sendMessageToMain = (data = {}) => {
     const event = document.createEvent('Event')
-    event.initEvent('message', true, true)
+    event.initEvent('message', false, false)
     event.data = data
     event.origin = '*'
-    // eslint-disable-next-line no-restricted-globals
     parent.dispatchEvent(event)
   }
 
@@ -36,26 +36,26 @@ export const importPluginScript = () => (config) => {
           iframeId,
           text
         })
+      },
+      setPluginLoadSucceed: () => {
+        sendMessageToMain({
+          event: 'loaded',
+          iframeId,
+        })
+      },
+      setPluginLoadFailed: (error) => {
+        sendMessageToMain({
+          event: 'error',
+          iframeId,
+          error,
+        })
       }
     }
   }
 
   const listenEvents = () => {
-
     globalThis.onmessage = (e) => {
       if (e.data.event === events.EXECUTE_COMMAND) {
-        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)
       }
 
@@ -89,7 +89,7 @@ export const importPluginScript = () => (config) => {
 
 export const prepareIframeHtml = (config) => {
   const importPluginScriptInner: string = importPluginScript().toString()
-  const { scriptSrc, scriptPath, stylesSrc, iframeId, bodyClass } = config
+  const { scriptSrc, scriptPath, stylesSrc, bodyClass } = config
   const stylesLinks = stylesSrc.map((styleSrc: string) => `<link rel="stylesheet" href=${styleSrc} />`).join('')
   const configString = JSON.stringify(config)
 
@@ -106,25 +106,11 @@ export const prepareIframeHtml = (config) => {
           import(\`${scriptSrc}\`)
               .then((module) => {
                   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);
+                  globalThis.PluginSDK.setPluginLoadSucceed();
               })
               .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);
+                  var error = \`${scriptPath} not found. Check if it has been renamed or deleted and try again.\`
+                  globalThis.PluginSDK.setPluginLoadFailed(error)
               })
         </script>
         <script src="${scriptSrc}" type="module"></script>

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

@@ -88,7 +88,8 @@ 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.only.after(async t => {
+test.skip
+    .after(async t => {
         //Drop index and documents
         await workbenchPage.sendCommandInWorkbench('FT.DROPINDEX products DD');
     })
@@ -104,8 +105,6 @@ test.only.after(async t => {
         //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();