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,31 +64,34 @@ export function AppObjectCore({
   };
 
   return (
-    <AppObjectDiv
-      onContextMenu={handleContextMenu}
-      onClick={() => {
-        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}
-      <IconWrap>{isBusy ? <FontIcon icon="icon loading" /> : <FontIcon icon={icon} />}</IconWrap>
-      {title}
-      {statusIcon && (
-        <StatusIconWrap>
-          <FontIcon icon={statusIcon} title={statusTitle} />
-        </StatusIconWrap>
-      )}
-      {extInfo && <ExtInfoWrap theme={theme}>{extInfo}</ExtInfoWrap>}
-    </AppObjectDiv>
+    <>
+      <AppObjectDiv
+        onContextMenu={handleContextMenu}
+        onClick={() => {
+          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}
+        <IconWrap>{isBusy ? <FontIcon icon="icon loading" /> : <FontIcon icon={icon} />}</IconWrap>
+        {title}
+        {statusIcon && (
+          <StatusIconWrap>
+            <FontIcon icon={statusIcon} title={statusTitle} />
+          </StatusIconWrap>
+        )}
+        {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,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 && (
+        <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>
   );
 }