diff --git a/packages/web/src/appobj/AppObjectList.js b/packages/web/src/appobj/AppObjectList.js index 7534653d..e388300a 100644 --- a/packages/web/src/appobj/AppObjectList.js +++ b/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) => ( { - 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); diff --git a/packages/web/src/appobj/AppObjects.js b/packages/web/src/appobj/AppObjects.js index b059c3bc..5697cbce 100644 --- a/packages/web/src/appobj/AppObjects.js +++ b/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, ); + showMenu(event.pageX, event.pageY, ); }; const Component = component == 'div' ? AppObjectDiv : AppObjectSpan; + let bold = false; + if (_.isFunction(isBold)) bold = isBold(appObjectParams); + else bold = !!isBold; + return ( 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 ; } diff --git a/packages/web/src/appobj/connectionAppObject.js b/packages/web/src/appobj/connectionAppObject.js index 82a4f89b..75e2cb2b 100644 --- a/packages/web/src/appobj/connectionAppObject.js +++ b/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; diff --git a/packages/web/src/appobj/databaseAppObject.js b/packages/web/src/appobj/databaseAppObject.js index 6adaf779..ba099cf3 100644 --- a/packages/web/src/appobj/databaseAppObject.js +++ b/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; diff --git a/packages/web/src/appobj/tableAppObject.js b/packages/web/src/appobj/tableAppObject.js index 23ed61ed..af159191 100644 --- a/packages/web/src/appobj/tableAppObject.js +++ b/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; diff --git a/packages/web/src/utility/globalState.js b/packages/web/src/utility/globalState.js index df843e38..08f9fd65 100644 --- a/packages/web/src/utility/globalState.js +++ b/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, + }; +} diff --git a/packages/web/src/widgets/DatabaseWidget.js b/packages/web/src/widgets/DatabaseWidget.js index 374cc3d3..63651a16 100644 --- a/packages/web/src/widgets/DatabaseWidget.js +++ b/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 ; + return ( + ({ ...db, connection: data }))} + makeAppObj={databaseAppObject({ boldCurrentDatabase: true })} + onObjectClick={handleDatabaseClick} + /> + ); } function ConnectionList() { @@ -74,7 +80,12 @@ function ConnectionList() { - + ); @@ -101,7 +112,7 @@ function SqlObjectList({ conid, database }) { ({ ...x, conid, database }))} - makeAppObj={tableAppObject} + makeAppObj={tableAppObject()} groupFunc={appobj => 'Tables'} filter={filter} />