bold current connection

packages/web/src/appobj/AppObjectList.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { AppObjectCore } from './AppObjects';
-import { useSetOpenedTabs } from '../utility/globalState';
+import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
 import styled from 'styled-components';
 import { ExpandIcon } from '../icons';
 
@@ -99,7 +99,7 @@ export function AppObjectList({
   groupFunc = undefined,
   groupOrdered = undefined,
 }) {
-  const setOpenedTabs = useSetOpenedTabs();
+  const appObjectParams = useAppObjectParams();
 
   const createComponent = (data, appobj) => (
     <AppObjectListItem
@@ -116,7 +116,7 @@ export function AppObjectList({
   if (groupFunc) {
     const listGrouped = _.compact(
       (list || []).map(data => {
-        const appobj = makeAppObj(data, { setOpenedTabs });
+        const appobj = makeAppObj(data, appObjectParams);
         const { matcher } = appobj;
         if (matcher && !matcher(filter)) return null;
         const component = createComponent(data, appobj);
@@ -131,7 +131,7 @@ export function AppObjectList({
   }
 
   return (list || []).map(data => {
-    const appobj = makeAppObj(data, { setOpenedTabs });
+    const appobj = makeAppObj(data, appObjectParams);
     const { matcher } = appobj;
     if (matcher && !matcher(filter)) return null;
     return createComponent(data, appobj);

packages/web/src/appobj/AppObjects.js

@@ -1,9 +1,10 @@
 // @ts-nocheck
 
+import _ from 'lodash'
 import React from 'react';
 import styled from 'styled-components';
 import { showMenu } from '../modals/DropDownMenu';
-import { useSetOpenedTabs } from '../utility/globalState';
+import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
 
 const AppObjectDiv = styled.div`
   padding: 5px;
@@ -12,6 +13,7 @@ const AppObjectDiv = styled.div`
   }
   cursor: pointer;
   white-space: nowrap;
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
 `;
 
 const AppObjectSpan = styled.span`
@@ -35,22 +37,26 @@ export function AppObjectCore({
   prefix = null,
   ...other
 }) {
-  const setOpenedTabs = useSetOpenedTabs();
+  const appObjectParams = useAppObjectParams();
 
   const handleContextMenu = event => {
     if (!Menu) return;
 
     event.preventDefault();
-    showMenu(event.pageX, event.pageY, <Menu data={data} makeAppObj={makeAppObj} setOpenedTabs={setOpenedTabs} />);
+    showMenu(event.pageX, event.pageY, <Menu data={data} makeAppObj={makeAppObj} {...appObjectParams} />);
   };
 
   const Component = component == 'div' ? AppObjectDiv : AppObjectSpan;
 
+  let bold = false;
+  if (_.isFunction(isBold)) bold = isBold(appObjectParams);
+  else bold = !!isBold;
+
   return (
     <Component
       onContextMenu={handleContextMenu}
       onClick={onClick ? () => onClick(data) : undefined}
-      isBold={isBold}
+      isBold={bold}
       {...other}
     >
       {prefix}
@@ -63,7 +69,7 @@ export function AppObjectCore({
 }
 
 export function AppObjectControl({ data, makeAppObj, component = 'div' }) {
-  const setOpenedTabs = useSetOpenedTabs();
-  const appobj = makeAppObj(data, { setOpenedTabs });
+  const appObjectParams = useAppObjectParams();
+  const appobj = makeAppObj(data, appObjectParams);
   return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} component={component} />;
 }

packages/web/src/appobj/connectionAppObject.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React from 'react';
 import { getEngineIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
@@ -21,11 +22,19 @@ function Menu({ data, makeAppObj }) {
   );
 }
 
-export default function connectionAppObject({ _id, server, displayName, engine }) {
+const connectionAppObject = flags => ({ _id, server, displayName, engine }) => {
   const title = displayName || server;
   const key = _id;
   const Icon = getEngineIcon(engine);
   const matcher = filter => filterName(filter, displayName, server);
+  const { boldCurrentDatabase } = flags || {};
+  const isBold = boldCurrentDatabase
+    ? ({ currentDatabase }) => {
+        return _.get(currentDatabase, 'connection._id') == _id;
+      }
+    : null;
 
-  return { title, key, Icon, Menu, matcher };
-}
+  return { title, key, Icon, Menu, matcher, isBold };
+};
+
+export default connectionAppObject;

packages/web/src/appobj/databaseAppObject.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 import { DatabaseIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
 import showModal from '../modals/showModal';
@@ -20,10 +21,20 @@ function Menu({ data, makeAppObj }) {
   );
 }
 
-export default function databaseAppObject({ name }) {
+const databaseAppObject = flags => ({ name, connection }) => {
+  const { boldCurrentDatabase } = flags || {};
   const title = name;
   const key = name;
   const Icon = DatabaseIcon;
+  const isBold = boldCurrentDatabase
+    ? ({ currentDatabase }) => {
+        return (
+          _.get(currentDatabase, 'connection._id') == _.get(connection, '_id') && _.get(currentDatabase, 'name') == name
+        );
+      }
+    : null;
 
-  return { title, key, Icon, Menu };
-}
+  return { title, key, Icon, Menu, isBold };
+};
+
+export default databaseAppObject;

packages/web/src/appobj/tableAppObject.js

@@ -46,7 +46,7 @@ function Menu({ data, makeAppObj, setOpenedTabs }) {
   );
 }
 
-export default function tableAppObject({ conid, database, pureName, schemaName }, { setOpenedTabs }) {
+const tableAppObject = () => ({ conid, database, pureName, schemaName }, { setOpenedTabs }) => {
   const title = schemaName ? `${schemaName}.${pureName}` : pureName;
   const key = title;
   const Icon = TableIcon;
@@ -61,4 +61,6 @@ export default function tableAppObject({ conid, database, pureName, schemaName }
   const matcher = filter => filterName(filter, pureName);
 
   return { title, key, Icon, Menu, onClick, matcher };
-}
+};
+
+export default tableAppObject;

packages/web/src/utility/globalState.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import useStorage from './useStorage';
 import useConnectionInfo from './useConnectionInfo';
+import usePrevious from './usePrevious';
 
 function createGlobalState(defaultValue) {
   const Context = React.createContext(null);
@@ -64,10 +65,21 @@ export { OpenedTabsProvider, useOpenedTabs, useSetOpenedTabs };
 export function useUpdateDatabaseForTab(tabVisible, conid, database) {
   const connection = useConnectionInfo(conid);
   const setDb = useSetCurrentDatabase();
-  if (tabVisible && connection) {
+
+  const previousTabVisible = usePrevious(!!(tabVisible && connection));
+  if (!previousTabVisible && tabVisible && connection) {
     setDb({
       name: database,
       connection,
     });
   }
 }
+
+export function useAppObjectParams() {
+  const setOpenedTabs = useSetOpenedTabs();
+  const currentDatabase = useCurrentDatabase();
+  return {
+    setOpenedTabs,
+    currentDatabase,
+  };
+}

packages/web/src/widgets/DatabaseWidget.js

@@ -57,7 +57,13 @@ function SubDatabaseList({ data }) {
     url: `server-connections/list-databases?conid=${_id}`,
     reloadTrigger: `database-list-changed-${_id}`,
   });
-  return <AppObjectList list={databases} makeAppObj={databaseAppObject} onObjectClick={handleDatabaseClick} />;
+  return (
+    <AppObjectList
+      list={(databases || []).map(db => ({ ...db, connection: data }))}
+      makeAppObj={databaseAppObject({ boldCurrentDatabase: true })}
+      onObjectClick={handleDatabaseClick}
+    />
+  );
 }
 
 function ConnectionList() {
@@ -74,7 +80,12 @@ function ConnectionList() {
       </SearchBoxWrapper>
 
       <InnerContainer>
-        <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} filter={filter} />
+        <AppObjectList
+          list={connections}
+          makeAppObj={connectionAppObject({ boldCurrentDatabase: true })}
+          SubItems={SubDatabaseList}
+          filter={filter}
+        />
       </InnerContainer>
     </>
   );
@@ -101,7 +112,7 @@ function SqlObjectList({ conid, database }) {
       <InnerContainer>
         <AppObjectList
           list={(tables || []).map(x => ({ ...x, conid, database }))}
-          makeAppObj={tableAppObject}
+          makeAppObj={tableAppObject()}
           groupFunc={appobj => 'Tables'}
           filter={filter}
         />