Merge pull request #56 from ScilifelabDataCentre/iframe_page

Work on adding KIARVA page in precision-medicine-portal

conf/nginx.conf

@@ -5,4 +5,5 @@ server {
       index  index.html index.htm;
       try_files $uri $uri/ /index.html;
     } 
+    add_header Content-Security-Policy "default-src 'self';" always;
   }

pmp-frontend-app/package.json

@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
+    "react-iframe": "^1.8.5",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.3",
     "remark-gfm": "^4.0.0"

pmp-frontend-app/src/components/Routes.tsx

@@ -13,6 +13,7 @@ import AboutFAQPage from '../pages/AboutFAQPage';
 import AboutTeamPage from '../pages/AboutTeamPage';
 import AboutPartnersPage from '../pages/AboutPartnersPage';
 import AccessClinicalDataPage from '../pages/AccessClinicalDataPage'
+import KiarvaIFramePage from '../pages/KiarvaIFramePage';
 
 const router = createBrowserRouter([
     {
@@ -73,6 +74,10 @@ const router = createBrowserRouter([
                 path: 'privacy',
                 element: <PrivacyPage />,
             },
+            {
+                path: 'kiarva',
+                element: <KiarvaIFramePage />,
+            },
         ]
     },
   ]);

pmp-frontend-app/src/pages/KiarvaIFramePage.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+import Iframe from 'react-iframe';
+
+export default function KiarvaIFramePage(): ReactElement {
+    TrackPageViewIfEnabled();
+
+    let kiarva_hostname = '';
+
+    return (
+        <>
+            {kiarva_hostname &&
+            (<Iframe 
+            url={kiarva_hostname}
+            width="100%" 
+            height="1000" 
+            allow='modals scripts' />)
+            }
+        </>
+    );
+}