show pages in iframe

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}`;

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}`} />;
+}

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,
 };

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