running as portal

packages/api/.env

@@ -10,5 +10,6 @@ TOOLBAR=home
 ICON_home=fas fa-home
 TITLE_home=Home
 PAGE_home=home.html
+STARTUP_PAGES=home
 
 PAGES_DIRECTORY=/home/jena/jenasoft/dbgate-web/pages

packages/api/src/controllers/config.js

@@ -10,9 +10,11 @@ module.exports = {
           page: process.env[`PAGE_${name}`],
         }))
       : null;
+    const startupPages = process.env.STARTUP_PAGES ? process.env.STARTUP_PAGES.split(',') : [];
     return {
       runAsPortal: !!process.env.CONNECTIONS,
       toolbar,
+      startupPages,
     };
   },
 };

packages/web/src/tabs/InfoPageTab.js

@@ -1,6 +1,12 @@
 import React from 'react';
+import styled from 'styled-components';
 import resolveApi from '../utility/resolveApi';
 
+const Frame = styled.iframe`
+  flex: 1;
+  border: 0px solid gray;
+`;
+
 export default function InfoPageTab({ page }) {
-  return <iframe src={`${resolveApi()}/pages/${page}`} />;
+  return <Frame src={`${resolveApi()}/pages/${page}`} />;
 }

packages/web/src/widgets/DatabaseWidget.js

@@ -25,6 +25,7 @@ import {
 import axios from '../utility/axios';
 import LoadingInfo from './LoadingInfo';
 import SearchInput from './SearchInput';
+import ErrorInfo from './ErrorInfo';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -126,7 +127,14 @@ function SqlObjectList({ conid, database }) {
 function SqlObjectListWrapper() {
   const db = useCurrentDatabase();
 
-  if (!db) return <div>(Choose database)</div>;
+  if (!db) {
+    return (
+      <>
+        <WidgetTitle>Tables, views, functions</WidgetTitle>
+        <ErrorInfo message="Database not selected" />
+      </>
+    );
+  }
   const { name, connection } = db;
 
   return <SqlObjectList conid={connection._id} database={name} />;

packages/web/src/widgets/Toolbar.js

@@ -5,7 +5,7 @@ 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 { useSetOpenedTabs, useOpenedTabs } from '../utility/globalState';
 import { openNewTab } from '../utility/common';
 
 const ToolbarContainer = styled.div`
@@ -19,25 +19,44 @@ export default function ToolBar({ toolbarPortalRef }) {
   const config = useConfig();
   const toolbar = config.toolbar || [];
   const setOpenedTabs = useSetOpenedTabs();
+  const openedTabs = useOpenedTabs();
+
+  function openTabFromButton(button) {
+    if (openedTabs.find((x) => x.tabComponent == 'InfoPageTab' && x.props && x.props.page == button.page)) {
+      setOpenedTabs((tabs) =>
+        tabs.map((tab) => ({
+          ...tab,
+          selected: tab.tabComponent == 'InfoPageTab' && tab.props && tab.props.page == button.page,
+        }))
+      );
+    } else {
+      openNewTab(setOpenedTabs, {
+        title: button.title,
+        tabComponent: 'InfoPageTab',
+        icon: button.icon,
+        props: {
+          page: button.page,
+        },
+      });
+    }
+  }
+
+  React.useEffect(() => {
+    if (config.startupPages) {
+      for (const page of config.startupPages) {
+        const button = toolbar.find((x) => x.name == page);
+        if (button) {
+          openTabFromButton(button);
+        }
+      }
+    }
+  }, config && config.startupPages);
 
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
       {toolbar.map((button) => (
-        <ToolbarButton
+        <ToolbarButton key={button.name} onClick={() => openTabFromButton(button)} icon={button.icon}>
-          key={button.name}
-          onClick={() => {
-            openNewTab(setOpenedTabs, {
-              title: button.title,
-              tabComponent: 'InfoPageTab',
-              icon: button.icon,
-              props: {
-                page: button.page,
-              },
-            });
-          }}
-          icon={button.icon}
-        >
           {button.title}
         </ToolbarButton>
       ))}