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;