refactor(view): change database data source binding

frontend/src/app/migration/MigrationEvent.ts

@@ -20,7 +20,7 @@ import { APP_VERSION_INIT } from './constants';
 import { IDomainEvent, Task } from './types';
 
 /**
- * Migrtion Event
+ * Migration Event
  * @class MigrationTaskEvent
  * @template TDomainModel
  */
@@ -48,12 +48,12 @@ class MigrationEvent<TDomainModel extends { version?: string }>
       }
       return result;
     } catch (error) {
-      // TODO(Stephen): beautiful console format
-      console.error(
-        'Migration Event Error | Version: %s | Stack Trace: %o',
+      console.log(
+        '%c Datart Migration Error | Version: %s | Please Contract Administrator! ',
+        'background: red; color: #fafafa',
         this.version,
-        error,
       );
+      console.log('Migration Event Error | Stack Trace: %o', error);
       throw error;
     }
   }

frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/Resource.tsx

@@ -28,58 +28,71 @@ import { Col, Input, Row } from 'antd';
 import { Tree } from 'app/components';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import { useSearchAndExpand } from 'app/hooks/useSearchAndExpand';
-import { selectDataProviderDatabaseListLoading } from 'app/pages/MainPage/slice/selectors';
-import { getDataProviderDatabases } from 'app/pages/MainPage/slice/thunks';
 import { DEFAULT_DEBOUNCE_WAIT } from 'globalConstants';
-import { memo, useCallback, useContext, useEffect } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
 import { monaco } from 'react-monaco-editor';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
 import { SPACE_MD, SPACE_XS } from 'styles/StyleConstants';
 import { RootState } from 'types';
-import { request } from 'utils/request';
-import { errorHandle } from 'utils/utils';
 import { ColumnTypes } from '../../constants';
 import { EditorContext } from '../../EditorContext';
-import { useViewSlice } from '../../slice';
 import {
   selectCurrentEditingViewAttr,
-  selectDatabases,
+  selectSourceDatabaseSchemas,
 } from '../../slice/selectors';
 import { getEditorProvideCompletionItems } from '../../slice/thunks';
-import { Schema } from '../../slice/types';
+import { DatabaseSchema } from '../../slice/types';
+import { buildAntdTreeNodeModel } from '../../utils';
 import Container from './Container';
 
 export const Resource = memo(() => {
-  const { actions } = useViewSlice();
+  const t = useI18NPrefix('view.resource');
   const dispatch = useDispatch();
   const { editorCompletionItemProviderRef } = useContext(EditorContext);
   const sourceId = useSelector<RootState>(state =>
     selectCurrentEditingViewAttr(state, { name: 'sourceId' }),
   ) as string;
-  const databases = useSelector(state =>
-    selectDatabases(state, { name: sourceId }),
-  );
-  const databaseListLoading = useSelector(
-    selectDataProviderDatabaseListLoading,
+  const databaseSchemas = useSelector(state =>
+    selectSourceDatabaseSchemas(state, { id: sourceId }),
   );
-  const t = useI18NPrefix('view.resource');
+
+  const buildTableNode = useCallback((database: DatabaseSchema) => {
+    const children =
+      database?.tables?.map(table => {
+        return buildTableColumnNode([database.dbName], table);
+      }) || [];
+
+    return buildAntdTreeNodeModel([], database.dbName, children, false);
+  }, []);
+
+  const buildTableColumnNode = (ancestors: string[] = [], table) => {
+    const children =
+      table?.columns?.map(column => {
+        return buildAntdTreeNodeModel(
+          ancestors.concat(table.tableName),
+          column?.name,
+          [],
+          true,
+        );
+      }) || [];
+    return buildAntdTreeNodeModel(ancestors, table.tableName, children, false);
+  };
+
+  const databaseTreeModel = useMemo(() => {
+    return (databaseSchemas || []).map(buildTableNode);
+  }, [buildTableNode, databaseSchemas]);
 
   const { filteredData, onExpand, debouncedSearch, expandedRowKeys } =
     useSearchAndExpand(
-      databases,
+      databaseTreeModel,
       (keywords, data) => (data.title as string).includes(keywords),
       DEFAULT_DEBOUNCE_WAIT,
       true,
     );
-  useEffect(() => {
-    if (sourceId && !databases) {
-      dispatch(getDataProviderDatabases(sourceId));
-    }
-  }, [dispatch, sourceId, databases]);
 
   useEffect(() => {
-    if (databases && editorCompletionItemProviderRef) {
+    if (databaseTreeModel && editorCompletionItemProviderRef) {
       editorCompletionItemProviderRef.current?.dispose();
       dispatch(
         getEditorProvideCompletionItems({
@@ -93,54 +106,7 @@ export const Resource = memo(() => {
         }),
       );
     }
-  }, [dispatch, sourceId, databases, editorCompletionItemProviderRef]);
-
-  const loadData = useCallback(
-    ({ value }) =>
-      new Promise<void>((resolve, reject) => {
-        try {
-          const [database, table] = value;
-          if (table) {
-            request<Schema[]>(
-              `/data-provider/${sourceId}/${database}/${table}/columns`,
-            ).then(({ data }) => {
-              dispatch(
-                actions.addSchema({
-                  sourceId,
-                  databaseName: database,
-                  tableName: table,
-                  schema: data,
-                }),
-              );
-              resolve();
-            });
-          } else {
-            request<string[]>(
-              `/data-provider/${sourceId}/${database}/tables`,
-            ).then(({ data }) => {
-              dispatch(
-                actions.addTables({
-                  sourceId,
-                  databaseName: database,
-                  tables: data.sort((a, b) =>
-                    a.toLowerCase() < b.toLowerCase()
-                      ? -1
-                      : a.toLowerCase() > b.toLowerCase()
-                      ? 1
-                      : 0,
-                  ),
-                }),
-              );
-              resolve();
-            });
-          }
-        } catch (error) {
-          errorHandle(error);
-          reject();
-        }
-      }),
-    [dispatch, sourceId, actions],
-  );
+  }, [dispatch, sourceId, databaseTreeModel, editorCompletionItemProviderRef]);
 
   const renderIcon = useCallback(({ value }) => {
     if (Array.isArray(value)) {
@@ -179,8 +145,7 @@ export const Resource = memo(() => {
         <Tree
           className="medium"
           treeData={filteredData}
-          loadData={loadData}
-          loading={databaseListLoading}
+          loading={false}
           icon={renderIcon}
           selectable={false}
           defaultExpandedKeys={expandedRowKeys}

frontend/src/app/pages/MainPage/pages/ViewPage/slice/index.ts

@@ -19,6 +19,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { getDataProviderDatabases } from 'app/pages/MainPage/slice/thunks';
 import { useInjectReducer } from 'utils/@reduxjs/injectReducer';
+import { isMySliceRejectedAction } from 'utils/@reduxjs/toolkit';
+import { rejectedActionMessageHandler } from 'utils/notification';
 import { ViewViewModelStages } from '../constants';
 import {
   diffMergeHierarchyModel,
@@ -399,15 +401,17 @@ const slice = createSlice({
     });
 
     builder.addCase(getSchemaBySourceId.fulfilled, (state, action) => {
-      if (!action.payload?.data) {
+      if (!action.payload?.data?.schemaItems) {
         return;
       }
-      if (!state.sourceDatabaseSchema) {
-        state.sourceDatabaseSchema = {};
-      }
       state.sourceDatabaseSchema[action.payload?.sourceId] =
-        action.payload.data;
+        action.payload.data.schemaItems;
     });
+
+    builder.addMatcher(
+      isMySliceRejectedAction(slice.name),
+      rejectedActionMessageHandler,
+    );
   },
 });
 

frontend/src/app/pages/MainPage/pages/ViewPage/slice/selectors.ts

@@ -22,6 +22,7 @@ import { listToTree } from 'utils/utils';
 import { initialState } from '.';
 import { ResourceTypes } from '../../PermissionPage/constants';
 import {
+  DatabaseSchema,
   SelectViewFolderTreeProps,
   SelectViewTreeProps,
   ViewViewModel,

frontend/src/app/pages/MainPage/pages/ViewPage/slice/thunks.ts

@@ -359,10 +359,10 @@ export const getEditorProvideCompletionItems = createAsyncThunk<
     const variableKeywords = new Set<string>();
 
     if (sourceId) {
-      const databaseSchemas = selectSourceDatabaseSchemas(getState(), {
+      const currentDBSchemas = selectSourceDatabaseSchemas(getState(), {
         id: sourceId,
       });
-      databaseSchemas?.schemaItems?.forEach(db => {
+      currentDBSchemas?.forEach(db => {
         dbKeywords.add(db.dbName);
         db.tables?.forEach(table => {
           tableKeywords.add(table.tableName);

frontend/src/app/pages/MainPage/pages/ViewPage/slice/types.ts

@@ -39,7 +39,7 @@ export interface ViewState {
     [name: string]: TreeDataNode[];
   };
   sourceDatabaseSchema: {
-    schemaItems?: DatabaseSchema[];
+    [name: string]: DatabaseSchema[];
   };
   saveViewLoading: boolean;
   unarchiveLoading: boolean;

frontend/src/app/pages/MainPage/pages/ViewPage/utils.tsx

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { TreeDataNode } from 'antd';
 import { FONT_WEIGHT_MEDIUM, SPACE_UNIT } from 'styles/StyleConstants';
 import { Nullable } from 'types';
 import { isEmptyArray } from 'utils/object';
@@ -376,3 +377,20 @@ export const diffMergeHierarchyModel = (model: HierarchyModel) => {
   model.hierarchy = newHierarchy;
   return model;
 };
+
+export function buildAntdTreeNodeModel<T extends TreeDataNode & { value: any }>(
+  ancestors: string[] = [],
+  nodeName: string,
+  children?: T[],
+  isLeaf?: boolean,
+): T {
+  const TREE_HIERARCHY_SEPERATOR = String.fromCharCode(0);
+  const fullNames = ancestors.concat(nodeName);
+  return {
+    key: fullNames.join(TREE_HIERARCHY_SEPERATOR),
+    title: nodeName,
+    value: fullNames,
+    children,
+    isLeaf,
+  } as any;
+}