From a682df9253d358833e316b42b415236372da6d5d Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sun, 17 May 2020 10:57:24 +0200
Subject: [PATCH] show pages in iframe

---
 packages/api/.env                      |  9 ++++++++-
 packages/api/src/controllers/config.js | 10 ++++++++++
 packages/api/src/main.js               |  4 ++++
 packages/web/src/icons.js              |  5 +++++
 packages/web/src/tabs/InfoPageTab.js   |  6 ++++++
 packages/web/src/tabs/index.js         |  2 ++
 packages/web/src/widgets/Toolbar.js    | 22 ++++++++++++++++++++++
 7 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/web/src/tabs/InfoPageTab.js

diff --git a/packages/api/.env b/packages/api/.env
index 80abeb9f..0f4a7a58 100644
--- a/packages/api/.env
+++ b/packages/api/.env
@@ -1,7 +1,14 @@
 CONNECTIONS=mysql
-LABEL_mysql=localhost-mysql
+LABEL_mysql=MySql localhost
 SERVER_mysql=localhost
 USER_mysql=root
 PASSWORD_mysql=test
 PORT_mysql=3307
 ENGINE_mysql=mysql
+
+TOOLBAR=home
+ICON_home=fas fa-home
+TITLE_home=Home
+PAGE_home=home.html
+
+PAGES_DIRECTORY=/home/jena/jenasoft/dbgate-web/pages
diff --git a/packages/api/src/controllers/config.js b/packages/api/src/controllers/config.js
index d20b4489..a4dcb23c 100644
--- a/packages/api/src/controllers/config.js
+++ b/packages/api/src/controllers/config.js
@@ -1,8 +1,18 @@
 module.exports = {
   get_meta: 'get',
   async get() {
+    const toolbarButtons = process.env.TOOLBAR;
+    const toolbar = toolbarButtons
+      ? toolbarButtons.split(',').map((name) => ({
+          name,
+          icon: process.env[`ICON_${name}`],
+          title: process.env[`TITLE_${name}`],
+          page: process.env[`PAGE_${name}`],
+        }))
+      : null;
     return {
       runAsPortal: !!process.env.CONNECTIONS,
+      toolbar,
     };
   },
 };
diff --git a/packages/api/src/main.js b/packages/api/src/main.js
index 9e829634..f1fae6bc 100644
--- a/packages/api/src/main.js
+++ b/packages/api/src/main.js
@@ -37,6 +37,10 @@ function start(argument = null) {
   useController(app, '/jsldata', jsldata);
   useController(app, '/config', config);
 
+  if (process.env.PAGES_DIRECTORY) {
+    app.use('/pages', express.static(process.env.PAGES_DIRECTORY));
+  }
+
   if (fs.existsSync('/home/dbgate-docker/build')) {
     // server static files inside docker container
     app.use(express.static('/home/dbgate-docker/build'));
diff --git a/packages/web/src/icons.js b/packages/web/src/icons.js
index 16de8be4..074e8909 100644
--- a/packages/web/src/icons.js
+++ b/packages/web/src/icons.js
@@ -4,6 +4,11 @@ import _ from 'lodash';
 export function getIconImage(src, props) {
   const { size = 16, style = {}, className, title } = props || {};
   if (!src) return null;
+
+  if (src.startsWith('fas ') || src.startsWith('far ')) {
+    return <i className={src} />;
+  }
+
   if (src.endsWith('.svg')) {
     // eslint-disable-next-line
     src = `${process.env.PUBLIC_URL}/icons/${src}`;
diff --git a/packages/web/src/tabs/InfoPageTab.js b/packages/web/src/tabs/InfoPageTab.js
new file mode 100644
index 00000000..740d04c1
--- /dev/null
+++ b/packages/web/src/tabs/InfoPageTab.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import resolveApi from '../utility/resolveApi';
+
+export default function InfoPageTab({ page }) {
+  return <iframe src={`${resolveApi()}/pages/${page}`} />;
+}
diff --git a/packages/web/src/tabs/index.js b/packages/web/src/tabs/index.js
index e22d726f..6a674165 100644
--- a/packages/web/src/tabs/index.js
+++ b/packages/web/src/tabs/index.js
@@ -2,10 +2,12 @@ import TableDataTab from './TableDataTab';
 import ViewDataTab from './ViewDataTab';
 import TableStructureTab from './TableStructureTab';
 import QueryTab from './QueryTab';
+import InfoPageTab from './InfoPageTab';
 
 export default {
   TableDataTab,
   ViewDataTab,
   TableStructureTab,
   QueryTab,
+  InfoPageTab,
 };
diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js
index a5dc7092..a51eef5e 100644
--- a/packages/web/src/widgets/Toolbar.js
+++ b/packages/web/src/widgets/Toolbar.js
@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import ToolbarButton from './ToolbarButton';
 import useNewQuery from '../query/useNewQuery';
 import { useConfig } from '../utility/metadataLoaders';
+import { useSetOpenedTabs } from '../utility/globalState';
+import { openNewTab } from '../utility/common';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -15,10 +17,30 @@ export default function ToolBar({ toolbarPortalRef }) {
   const modalState = useModalState();
   const newQuery = useNewQuery();
   const config = useConfig();
+  const toolbar = config.toolbar || [];
+  const setOpenedTabs = useSetOpenedTabs();
 
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
+      {toolbar.map((button) => (
+        <ToolbarButton
+          key={button.name}
+          onClick={() => {
+            openNewTab(setOpenedTabs, {
+              title: button.title,
+              tabComponent: 'InfoPageTab',
+              icon: button.icon,
+              props: {
+                page: button.page,
+              },
+            });
+          }}
+          icon={button.icon}
+        >
+          {button.title}
+        </ToolbarButton>
+      ))}
       {config.runAsPortal == false && (
         <ToolbarButton onClick={modalState.open} icon="fas fa-database">
           Add connection