From 71f37c7a210699983b09c417b19dc2be2c9e274b Mon Sep 17 00:00:00 2001
From: Ilya Hancharyk <Ilya_Hancharyk@epam.com>
Date: Tue, 7 May 2024 18:30:31 +0200
Subject: [PATCH] Add basic iFrame interaction

---
 .../extensionLoader/extensionLoader.jsx       | 51 ++----------
 .../federatedExtensionLoader.jsx              | 52 +++++++++++++
 .../federatedExtensionLoader/index.js         | 17 ++++
 .../standaloneExtensionLoader/index.js        | 17 ++++
 .../standaloneExtensionLoader.jsx             | 78 +++++++++++++++++++
 .../controllers/plugins/uiExtensions/sagas.js |  1 +
 .../plugins/uiExtensions/selectors.js         |  3 +-
 .../projectUiExtensionPage.jsx                | 13 ++--
 app/src/routes/constants.js                   |  1 +
 9 files changed, 180 insertions(+), 53 deletions(-)
 create mode 100644 app/src/components/extensionLoader/federatedExtensionLoader/federatedExtensionLoader.jsx
 create mode 100644 app/src/components/extensionLoader/federatedExtensionLoader/index.js
 create mode 100644 app/src/components/extensionLoader/standaloneExtensionLoader/index.js
 create mode 100644 app/src/components/extensionLoader/standaloneExtensionLoader/standaloneExtensionLoader.jsx

diff --git a/app/src/components/extensionLoader/extensionLoader.jsx b/app/src/components/extensionLoader/extensionLoader.jsx
index 6a53110f2f..099c2db23d 100644
--- a/app/src/components/extensionLoader/extensionLoader.jsx
+++ b/app/src/components/extensionLoader/extensionLoader.jsx
@@ -16,58 +16,21 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BubblesLoader } from '@reportportal/ui-kit';
 import { ErrorBoundary } from 'components/containers/errorBoundary';
-import { createImportProps } from 'controllers/plugins/uiExtensions/createImportProps';
 import { ExtensionError } from './extensionError';
 import { extensionType } from './extensionTypes';
-import { useFederatedComponent } from './hooks';
-import { getExtensionUrl } from './utils';
-
-function FederatedExtensionLoader({ extension, withPreloader, ...componentProps }) {
-  const { moduleName, scope, pluginName } = extension;
-  const url = getExtensionUrl(extension);
-
-  const { failed, Component } = useFederatedComponent(scope, moduleName, url);
-
-  // TODO: replace with proper failed state
-  if (failed) {
-    return <h2>Failed to load extension: {moduleName}</h2>;
-  }
-
-  // TODO: Provide extensionImportProps via React Context
-  const extensionImportProps = createImportProps(pluginName);
-
-  return (
-    <React.Suspense fallback={withPreloader ? <BubblesLoader /> : null}>
-      {Component ? <Component {...extensionImportProps} {...componentProps} /> : null}
-    </React.Suspense>
-  );
-}
-FederatedExtensionLoader.propTypes = {
-  extension: extensionType,
-  withPreloader: PropTypes.bool,
-};
-FederatedExtensionLoader.defaultProps = {
-  extension: {},
-  withPreloader: false,
-};
-
-function StandaloneExtensionLoader({ extension }) {
-  return <iframe title={extension.pluginName} src={extension.url} />;
-}
-StandaloneExtensionLoader.propTypes = {
-  extension: extensionType,
-};
-StandaloneExtensionLoader.defaultProps = {
-  extension: {},
-};
+import { FederatedExtensionLoader } from './federatedExtensionLoader';
+import { StandaloneExtensionLoader } from './standaloneExtensionLoader';
 
 function ExtensionLoader({ extension, withPreloader, ...componentProps }) {
   return extension.pluginType === 'remote' ? (
     <StandaloneExtensionLoader extension={extension} />
   ) : (
-    <ExtensionLoader extension={extension} withPreloader={withPreloader} {...componentProps} />
+    <FederatedExtensionLoader
+      extension={extension}
+      withPreloader={withPreloader}
+      {...componentProps}
+    />
   );
 }
 ExtensionLoader.propTypes = {
diff --git a/app/src/components/extensionLoader/federatedExtensionLoader/federatedExtensionLoader.jsx b/app/src/components/extensionLoader/federatedExtensionLoader/federatedExtensionLoader.jsx
new file mode 100644
index 0000000000..af637a7ed3
--- /dev/null
+++ b/app/src/components/extensionLoader/federatedExtensionLoader/federatedExtensionLoader.jsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BubblesLoader } from '@reportportal/ui-kit';
+import { createImportProps } from 'controllers/plugins/uiExtensions/createImportProps';
+import { getExtensionUrl } from '../utils';
+import { useFederatedComponent } from '../hooks';
+import { extensionType } from '../extensionTypes';
+
+export function FederatedExtensionLoader({ extension, withPreloader, ...componentProps }) {
+  const { moduleName, scope, pluginName } = extension;
+  const url = getExtensionUrl(extension);
+
+  const { failed, Component } = useFederatedComponent(scope, moduleName, url);
+
+  // TODO: replace with proper failed state
+  if (failed) {
+    return <h2>Failed to load extension: {moduleName}</h2>;
+  }
+
+  // TODO: Provide extensionImportProps via React Context
+  const extensionImportProps = createImportProps(pluginName);
+
+  return (
+    <React.Suspense fallback={withPreloader ? <BubblesLoader /> : null}>
+      {Component ? <Component {...extensionImportProps} {...componentProps} /> : null}
+    </React.Suspense>
+  );
+}
+FederatedExtensionLoader.propTypes = {
+  extension: extensionType,
+  withPreloader: PropTypes.bool,
+};
+FederatedExtensionLoader.defaultProps = {
+  extension: {},
+  withPreloader: false,
+};
diff --git a/app/src/components/extensionLoader/federatedExtensionLoader/index.js b/app/src/components/extensionLoader/federatedExtensionLoader/index.js
new file mode 100644
index 0000000000..73fb756d3e
--- /dev/null
+++ b/app/src/components/extensionLoader/federatedExtensionLoader/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+export { FederatedExtensionLoader } from './federatedExtensionLoader';
diff --git a/app/src/components/extensionLoader/standaloneExtensionLoader/index.js b/app/src/components/extensionLoader/standaloneExtensionLoader/index.js
new file mode 100644
index 0000000000..be040cfb9b
--- /dev/null
+++ b/app/src/components/extensionLoader/standaloneExtensionLoader/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+export { StandaloneExtensionLoader } from './standaloneExtensionLoader';
diff --git a/app/src/components/extensionLoader/standaloneExtensionLoader/standaloneExtensionLoader.jsx b/app/src/components/extensionLoader/standaloneExtensionLoader/standaloneExtensionLoader.jsx
new file mode 100644
index 0000000000..c00ed6593a
--- /dev/null
+++ b/app/src/components/extensionLoader/standaloneExtensionLoader/standaloneExtensionLoader.jsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import React, { useRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { userInfoSelector } from 'controllers/user';
+import { projectInfoSelector } from 'controllers/project';
+import { extensionType } from '../extensionTypes';
+
+// http://localhost:3000/#superadmin_personal/plugin/BrowserKube
+// TODO: add loader while loading the iframe
+// TODO: configure sandbox for iframe
+function StandaloneExtensionLoader({ extension, userInfo, projectInfo }) {
+  const [loaded, setLoaded] = useState(false);
+  const ref = useRef();
+
+  const onLoad = () => {
+    setLoaded(true);
+  };
+
+  const sendRpContext = () => {
+    const consumerOrigin = new URL(extension.url).origin;
+    const data = {
+      user: userInfo,
+      project: projectInfo,
+    };
+    ref?.current?.contentWindow.postMessage(data, consumerOrigin);
+  };
+
+  useEffect(() => {
+    if (loaded) {
+      sendRpContext();
+    }
+  }, [loaded, userInfo, projectInfo]);
+
+  return (
+    <iframe
+      ref={ref}
+      name={extension.pluginName}
+      title={extension.pluginName}
+      src={extension.url}
+      style={{ width: '100%', height: '100%' }}
+      onLoad={onLoad}
+      seamless
+    />
+  );
+}
+StandaloneExtensionLoader.propTypes = {
+  extension: extensionType,
+  userInfo: PropTypes.object.isRequired,
+  projectInfo: PropTypes.object.isRequired,
+};
+StandaloneExtensionLoader.defaultProps = {
+  extension: {},
+};
+
+const withConnect = connect((state) => ({
+  userInfo: userInfoSelector(state),
+  projectInfo: projectInfoSelector(state),
+}));
+
+const ConnectedStandaloneExtensionLoader = withConnect(StandaloneExtensionLoader);
+
+export { ConnectedStandaloneExtensionLoader as StandaloneExtensionLoader };
diff --git a/app/src/controllers/plugins/uiExtensions/sagas.js b/app/src/controllers/plugins/uiExtensions/sagas.js
index 1538804fab..2d88a6ad52 100644
--- a/app/src/controllers/plugins/uiExtensions/sagas.js
+++ b/app/src/controllers/plugins/uiExtensions/sagas.js
@@ -45,6 +45,7 @@ export function* fetchExtensionsMetadata(action) {
 
   try {
     const results = yield Promise.allSettled(calls);
+    // const results = [];
     const metadataArray = results.reduce((acc, result, index) => {
       if (result.status !== 'fulfilled') {
         return acc;
diff --git a/app/src/controllers/plugins/uiExtensions/selectors.js b/app/src/controllers/plugins/uiExtensions/selectors.js
index 07f4e8c329..0e0d0d39e2 100644
--- a/app/src/controllers/plugins/uiExtensions/selectors.js
+++ b/app/src/controllers/plugins/uiExtensions/selectors.js
@@ -59,8 +59,9 @@ const createExtensionSelectorByType = (type, pluginNamesSelector = enabledPlugin
         .filter(([name]) => pluginNames.includes(name))
         .map(([, extensions]) => extensions);
 
+      // TODO: update
       const newExtensions = extensionsMetadata
-        .filter(({ pluginName }) => pluginNames.includes(pluginName))
+        // .filter(({ pluginName }) => pluginNames.includes(pluginName))
         .map(({ extensions, ...commonMetadata }) =>
           extensions.map((ext) => ({ ...ext, ...commonMetadata })),
         );
diff --git a/app/src/pages/inside/projectUiExtensionPage/projectUiExtensionPage.jsx b/app/src/pages/inside/projectUiExtensionPage/projectUiExtensionPage.jsx
index 156cfdaf7f..c5c655c6ed 100644
--- a/app/src/pages/inside/projectUiExtensionPage/projectUiExtensionPage.jsx
+++ b/app/src/pages/inside/projectUiExtensionPage/projectUiExtensionPage.jsx
@@ -15,20 +15,17 @@
  */
 
 import React from 'react';
+import { BubblesLoader } from '@reportportal/ui-kit';
 import { uiExtensionProjectPagesSelector } from 'controllers/plugins/uiExtensions';
 import { useActivePluginPageExtension } from 'controllers/plugins/uiExtensions/hooks';
 import { ExtensionLoader } from 'components/extensionLoader';
-import { PageHeader, PageLayout, PageSection } from 'layouts/pageLayout';
 
 export const ProjectUiExtensionPage = () => {
   const extension = useActivePluginPageExtension(uiExtensionProjectPagesSelector);
 
-  return (
-    <PageLayout>
-      <PageHeader breadcrumbs={[{ title: extension.title || extension.name }]} />
-      <PageSection>
-        <ExtensionLoader extension={extension} silentOnError={false} withPreloader />
-      </PageSection>
-    </PageLayout>
+  return extension ? (
+    <ExtensionLoader extension={extension} silentOnError={false} withPreloader />
+  ) : (
+    <BubblesLoader />
   );
 };
diff --git a/app/src/routes/constants.js b/app/src/routes/constants.js
index 3c548d1f4b..0ddcd18f6f 100644
--- a/app/src/routes/constants.js
+++ b/app/src/routes/constants.js
@@ -126,5 +126,6 @@ export const pageRendering = {
   [PROJECT_PLUGIN_PAGE]: {
     component: ProjectUiExtensionPage,
     layout: AppLayout,
+    rawContent: true,
   },
 };