closed tab - show more info

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,6 +64,7 @@ export function AppObjectCore({
   };
 
   return (
+    <>
       <AppObjectDiv
         onContextMenu={handleContextMenu}
         onClick={() => {
@@ -89,5 +91,7 @@ export function AppObjectCore({
         )}
         {extInfo && <ExtInfoWrap theme={theme}>{extInfo}</ExtInfoWrap>}
       </AppObjectDiv>
+      {children}
+    </>
   );
 }

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,18 +33,17 @@ 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(
+        files.map(x => ({
-          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 && (
+        <InfoDiv theme={theme}>
+          <FontIcon icon="icon database" /> {data.props.database}
+        </InfoDiv>
+      )}
+      {data.contentPreview && <InfoDiv theme={theme}>{data.contentPreview}</InfoDiv>}
+    </AppObjectCore>
   );
 }
 

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);

packages/web/src/widgets/FavoritesWidget.js

@@ -44,14 +44,14 @@ export default function FavoritesWidget() {
   const hasPermission = useHasPermission();
   return (
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" height="20%">
-        <ClosedTabsList />
-      </WidgetColumnBarItem>
       {hasPermission('files/favorites/read') && (
-        <WidgetColumnBarItem title="Favorites" name="favorites" height="15%">
+        <WidgetColumnBarItem title="Favorites" name="favorites" height="20%">
           <FavoritesList />
         </WidgetColumnBarItem>
       )}
+      <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs">
+        <ClosedTabsList />
+      </WidgetColumnBarItem>
     </WidgetColumnBar>
   );
 }