add new connection button

packages/web/src/widgets/DatabaseWidget.js

@@ -16,18 +16,15 @@ import {
   useDatabaseInfo,
   useConfig,
 } from '../utility/metadataLoaders';
-import {
-  SearchBoxWrapper,
-  WidgetsInnerContainer,
-  WidgetsMainContainer,
-  WidgetsOuterContainer,
-  WidgetTitle,
-} from './WidgetStyles';
+import { SearchBoxWrapper, WidgetsInnerContainer } from './WidgetStyles';
 import axios from '../utility/axios';
 import LoadingInfo from './LoadingInfo';
 import SearchInput from './SearchInput';
 import ErrorInfo from './ErrorInfo';
 import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
+import ToolbarButton from './ToolbarButton';
+import useShowModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -57,6 +54,7 @@ function ConnectionList() {
     connections && serverStatus
       ? connections.map((conn) => ({ ...conn, status: serverStatus[conn._id] }))
       : connections;
+  const showModal = useShowModal();
 
   const handleRefreshConnections = () => {
     for (const conid of openedConnections) {
@@ -64,6 +62,10 @@ function ConnectionList() {
     }
   };
 
+  const showNewConnection = () => {
+    showModal((modalState) => <ConnectionModal modalState={modalState} />);
+  };
+
   const [filter, setFilter] = React.useState('');
   return (
     <>
@@ -83,6 +85,11 @@ function ConnectionList() {
           filter={filter}
           isExpandable={(data) => openedConnections.includes(data._id)}
         />
+        {connections && connections.length == 0 && (
+          <ToolbarButton icon="icon new-connection" onClick={showNewConnection}>
+            Add new connection
+          </ToolbarButton>
+        )}
       </WidgetsInnerContainer>
     </>
   );

packages/web/src/widgets/Toolbar.js

@@ -32,7 +32,6 @@ const ToolbarContainer = styled.div`
 `;
 
 export default function ToolBar({ toolbarPortalRef }) {
-  const modalState = useModalState();
   const newQuery = useNewQuery();
   const newQueryDesign = useNewQueryDesign();
   const newFreeTable = useNewFreeTable();
@@ -53,7 +52,9 @@ export default function ToolBar({ toolbarPortalRef }) {
   const currentTab = openedTabs.find((x) => x.selected);
 
   React.useEffect(() => {
-    window['dbgate_createNewConnection'] = modalState.open;
+    if (config.runAsPortal == false) {
+      window['dbgate_createNewConnection'] = showNewConnection;
+    }
     window['dbgate_newQuery'] = newQuery;
     window['dbgate_closeAll'] = () => setOpenedTabs([]);
     window['dbgate_showAbout'] = showAbout;
@@ -79,6 +80,10 @@ export default function ToolBar({ toolbarPortalRef }) {
     ));
   };
 
+  const showNewConnection = () => {
+    showModal((modalState) => <ConnectionModal modalState={modalState} />);
+  };
+
   const switchTheme = () => {
     if (currentTheme == 'light') setCurrentTheme('dark');
     else setCurrentTheme('light');
@@ -131,7 +136,6 @@ export default function ToolBar({ toolbarPortalRef }) {
 
   return (
     <ToolbarContainer>
-      {!!modalState.isOpen && <ConnectionModal modalState={modalState} />}
       {!electron && (
         <ToolbarButtonExternalImage
           // eslint-disable-next-line
@@ -147,7 +151,9 @@ export default function ToolBar({ toolbarPortalRef }) {
           </ToolbarButton>
         ))}
       <ToolbarDropDownButton icon="icon add" text="New">
-        {config.runAsPortal == false && <DropDownMenuItem onClick={modalState.open}>Connection</DropDownMenuItem>}
+        {config.runAsPortal == false && (
+          <DropDownMenuItem onClick={showNewConnection}>Connection</DropDownMenuItem>
+        )}
         <DropDownMenuItem onClick={() => newQuery()}>SQL query</DropDownMenuItem>
         {!!currentDatabase && <DropDownMenuItem onClick={() => newQueryDesign()}>Query designer</DropDownMenuItem>}
         <DropDownMenuItem onClick={() => newFreeTable()}>Free table editor</DropDownMenuItem>