diff --git a/packages/web/src/appobj/AppObjectCore.js b/packages/web/src/appobj/AppObjectCore.js index 15978b0a8..58efa6b2d 100644 --- a/packages/web/src/appobj/AppObjectCore.js +++ b/packages/web/src/appobj/AppObjectCore.js @@ -49,6 +49,7 @@ export function AppObjectCore({ extInfo = undefined, statusTitle = undefined, disableHover = false, + children = null, Menu = undefined, ...other }) { @@ -63,31 +64,34 @@ export function AppObjectCore({ }; return ( - { - if (onClick) onClick(data); - if (onClick2) onClick2(data); - if (onClick3) onClick3(data); - }} - theme={theme} - isBold={isBold} - draggable - onDragStart={e => { - e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data)); - }} - disableHover={disableHover} - {...other} - > - {prefix} - {isBusy ? : } - {title} - {statusIcon && ( - - - - )} - {extInfo && {extInfo}} - + <> + { + if (onClick) onClick(data); + if (onClick2) onClick2(data); + if (onClick3) onClick3(data); + }} + theme={theme} + isBold={isBold} + draggable + onDragStart={e => { + e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data)); + }} + disableHover={disableHover} + {...other} + > + {prefix} + {isBusy ? : } + {title} + {statusIcon && ( + + + + )} + {extInfo && {extInfo}} + + {children} + ); } diff --git a/packages/web/src/appobj/ClosedTabAppObject.js b/packages/web/src/appobj/ClosedTabAppObject.js index 360d9a2de..0ef7e11b9 100644 --- a/packages/web/src/appobj/ClosedTabAppObject.js +++ b/packages/web/src/appobj/ClosedTabAppObject.js @@ -5,6 +5,14 @@ import { DropDownMenuItem } from '../modals/DropDownMenu'; import { useSetOpenedTabs } from '../utility/globalState'; import { AppObjectCore } from './AppObjectCore'; import { setSelectedTabFunc } from '../utility/common'; +import styled from 'styled-components'; +import { FontIcon } from '../icons'; +import useTheme from '../theme/useTheme'; + +const InfoDiv = styled.div` + margin-left: 30px; + color: ${props => props.theme.left_font3}; +`; function Menu({ data }) { const setOpenedTabs = useSetOpenedTabs(); @@ -25,17 +33,16 @@ function Menu({ data }) { function ClosedTabAppObject({ data, commonProps }) { const { tabid, props, selected, icon, title, closedTime, busy } = data; const setOpenedTabs = useSetOpenedTabs(); + const theme = useTheme(); const onClick = () => { setOpenedTabs(files => setSelectedTabFunc( - files.map( - x => ({ - ...x, - closedTime: x.tabid == tabid ? undefined : x.closedTime, - }), - tabid - ) + files.map(x => ({ + ...x, + closedTime: x.tabid == tabid ? undefined : x.closedTime, + })), + tabid ) ); }; @@ -50,7 +57,14 @@ function ClosedTabAppObject({ data, commonProps }) { onClick={onClick} isBusy={busy} Menu={Menu} - /> + > + {data.props && data.props.database && ( + + {data.props.database} + + )} + {data.contentPreview && {data.contentPreview}} + ); } diff --git a/packages/web/src/tabs/QueryTab.js b/packages/web/src/tabs/QueryTab.js index bc50240b7..4801f29c1 100644 --- a/packages/web/src/tabs/QueryTab.js +++ b/packages/web/src/tabs/QueryTab.js @@ -24,6 +24,24 @@ import useExtensions from '../utility/useExtensions'; import useTimerLabel from '../utility/useTimerLabel'; import { StatusBarItem } from '../widgets/StatusBar'; +function createSqlPreview(sql) { + if (!sql) return undefined; + let data = sql.substring(0, 500); + data = data.replace(/\[[^\]]+\]\./g, ''); + data = data.replace(/\[a-zA-Z0-9_]+\./g, ''); + data = data.replace(/\/\*.*\*\//g, ''); + data = data.replace(/[\[\]]/g, ''); + data = data.replace(/--[^\n]*\n/g, ''); + + for (let step = 1; step <= 5; step++) { + data = data.replace(/\([^\(^\)]+\)/g, ''); + } + data = data.replace(/\s+/g, ' '); + data = data.trim(); + data = data.replace(/^(.{50}[^\s]*).*/, '$1'); + return data; +} + export default function QueryTab({ tabid, conid, @@ -74,6 +92,23 @@ export default function QueryTab({ useUpdateDatabaseForTab(tabVisible, conid, database); const connection = useConnectionInfo({ conid }); + const updateContentPreviewDebounced = React.useRef( + _.debounce( + // @ts-ignore + sql => + changeTab(tabid, setOpenedTabs, tab => ({ + ...tab, + contentPreview: createSqlPreview(sql), + })), + 500 + ) + ); + + React.useEffect(() => { + // @ts-ignore + updateContentPreviewDebounced.current(editorData); + }, [editorData]); + const handleExecute = async () => { if (busy) return; setExecuteNumber(num => num + 1); diff --git a/packages/web/src/widgets/FavoritesWidget.js b/packages/web/src/widgets/FavoritesWidget.js index 27e67da31..ce0f3191f 100644 --- a/packages/web/src/widgets/FavoritesWidget.js +++ b/packages/web/src/widgets/FavoritesWidget.js @@ -44,14 +44,14 @@ export default function FavoritesWidget() { const hasPermission = useHasPermission(); return ( - - - {hasPermission('files/favorites/read') && ( - + )} + + + ); }