support auto focus database node

oceanbase · Feb 28, 2024 · 0d7ef52 · 0d7ef52
1 parent 3a16839
commit 0d7ef52
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 33 deletions.
diff --git a/src/page/Workspace/components/SessionContextWrap/SessionSelect/SessionDropdown/index.tsx b/src/page/Workspace/components/SessionContextWrap/SessionSelect/SessionDropdown/index.tsx
@@ -15,7 +15,7 @@
  */
 import { formatMessage } from '@/util/intl';
 import { Badge, Input, Popover, Select, Space, Spin, Tooltip, Tree } from 'antd';
-import React, { Key, useContext, useEffect, useMemo, useState } from 'react';
+import React, { Key, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import styles from './index.less';
 import Icon, { SearchOutlined } from '@ant-design/icons';
 import tracert from '@/util/tracert';
@@ -99,6 +99,7 @@ const SessionDropdown: React.FC<IProps> = function ({
   const context = useContext(SessionContext);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
+  const treeRef = useRef(null);
   const { datasourceId } = useParams<{
     datasourceId: string;
   }>();
@@ -190,6 +191,17 @@ const SessionDropdown: React.FC<IProps> = function ({
     };
   }, [data?.contents]);
 
+  useEffect(() => {
+    const databaseId = context?.databaseId;
+    const db = data?.contents.find((db) => db.id === databaseId);
+    if (db) {
+      setExpandedKeys([db.dataSource.id]);
+      setTimeout(() => {
+        treeRef?.current?.scrollTo({ key: `db:${databaseId}` });
+      }, 500);
+    }
+  }, [data?.contents]);
+
   useEffect(() => {
     if (dataGroup?.allDatasources) {
       dataSourceStatusStore.asyncUpdateStatus(dataGroup?.allDatasources?.map((a) => a.id));
@@ -368,6 +380,47 @@ const SessionDropdown: React.FC<IProps> = function ({
       }
     }
   }
+
+  function TreeRender() {
+    return (
+      <Tree
+        ref={treeRef}
+        expandAction="click"
+        className={styles.tree}
+        key={from}
+        onSelect={async (_, info) => {
+          const key = info.node?.key?.toString();
+          let dbId, dsId;
+          if (context.datasourceMode) {
+            dsId = toInteger(key);
+          } else {
+            dbId = toInteger(key?.replace('db:', ''));
+          }
+          setLoading(true);
+          try {
+            await context.selectSession(dbId, dsId, from);
+          } catch (e) {
+            console.error(e);
+          } finally {
+            setLoading(false);
+          }
+          setIsOpen(false);
+        }}
+        selectedKeys={[
+          context?.datasourceMode ? context?.datasourceId : `db:${context?.databaseId}`,
+        ].filter(Boolean)}
+        height={215}
+        expandedKeys={expandedKeys}
+        onExpand={(expandedKeys) => {
+          setExpandedKeys(expandedKeys);
+        }}
+        showIcon
+        blockNode={true}
+        treeData={treeData()}
+      />
+    );
+  }
+
   return (
     <Popover
       trigger={['click']}
@@ -426,36 +479,7 @@ const SessionDropdown: React.FC<IProps> = function ({
                 overflow: 'hidden',
               }}
             >
-              <Tree
-                expandAction="click"
-                className={styles.tree}
-                key={from}
-                onSelect={async (_, info) => {
-                  const key = info.node?.key?.toString();
-                  let dbId, dsId;
-                  if (context.datasourceMode) {
-                    dsId = toInteger(key);
-                  } else {
-                    dbId = toInteger(key?.replace('db:', ''));
-                  }
-                  setLoading(true);
-                  try {
-                    await context.selectSession(dbId, dsId, from);
-                  } catch (e) {
-                    console.error(e);
-                  } finally {
-                    setLoading(false);
-                  }
-                  setIsOpen(false);
-                }}
-                selectedKeys={[
-                  context?.datasourceMode ? context?.datasourceId : `db:${context?.databaseId}`,
-                ].filter(Boolean)}
-                height={215}
-                showIcon
-                blockNode={true}
-                treeData={treeData()}
-              />
+              {TreeRender()}
             </div>
           </div>
         </Spin>

diff --git a/src/page/Workspace/components/SessionContextWrap/SessionSelect/index.less b/src/page/Workspace/components/SessionContextWrap/SessionSelect/index.less
@@ -24,3 +24,9 @@
     color: var(--text-color-link);
   }
 }
+.aim {
+  color: var(--text-color-secondary);
+  &:hover {
+    color: var(--text-color-primary);
+  }
+}
diff --git a/src/page/Workspace/components/SessionContextWrap/SessionSelect/index.tsx b/src/page/Workspace/components/SessionContextWrap/SessionSelect/index.tsx
@@ -15,11 +15,11 @@
  */
 
 import { formatMessage } from '@/util/intl';
-import { useContext, useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import SessionContext from '../context';
 
 import ConnectionPopover from '@/component/ConnectionPopover';
-import Icon, { DownOutlined, LoadingOutlined } from '@ant-design/icons';
+import Icon, { AimOutlined, DownOutlined, LoadingOutlined } from '@ant-design/icons';
 import { Divider, Popover, Space, Spin } from 'antd';
 import styles from './index.less';
 
@@ -32,6 +32,9 @@ import SessionDropdown from './SessionDropdown';
 import RiskLevelLabel from '@/component/RiskLevelLabel';
 import { EnvColorMap } from '@/constant';
 import login from '@/store/login';
+import ResourceTreeContext from '@/page/Workspace/context/ResourceTreeContext';
+import ActivityBarContext from '@/page/Workspace/context/ActivityBarContext';
+import { ActivityBarItemType } from '@/page/Workspace/ActivityBar/type';
 
 export default function SessionSelect({
   readonly,
@@ -40,10 +43,22 @@ export default function SessionSelect({
   dialectTypes?: ConnectionMode[];
 }) {
   const context = useContext(SessionContext);
+  const resourceTreeContext = useContext(ResourceTreeContext);
+  const activityContext = useContext(ActivityBarContext);
   useEffect(() => {
     tracert.expo('a3112.b41896.c330994');
   }, []);
 
+  function focusDataBase(e: React.MouseEvent) {
+    const datasourceId = context?.session?.odcDatabase?.dataSource?.id;
+    const databaseId = context?.session?.odcDatabase?.id;
+    activityContext.setActiveKey(ActivityBarItemType.Database);
+    resourceTreeContext.setSelectDatasourceId(datasourceId);
+    resourceTreeContext.setCurrentDatabaseId(databaseId);
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
   function renderProject() {
     const DBIcon = getDataSourceStyleByConnectType(context?.session?.connection?.type)?.dbIcon;
     return (
@@ -138,6 +153,7 @@ export default function SessionSelect({
             />
             <span style={{ lineHeight: 1 }}>{context?.session?.odcDatabase?.name}</span>
             <DownOutlined />
+            <AimOutlined className={styles.aim} onClick={focusDataBase} />
             <Space
               size={1}
               split={<Divider type="vertical" />}