Merge pull request #779 from actiontech/fix/user-guide

Fix/user guide

Author: LZS911

packages/base/src/App.ce.test.tsx

@@ -59,7 +59,8 @@ describe('test App ce', () => {
     (useSelector as jest.Mock).mockImplementation((selector) => {
       return selector({
         user: {
-          token: 'AAh32ffdswt'
+          token: 'AAh32ffdswt',
+          isLoggingIn: false
         },
         nav: {
           modalStatus: {

packages/base/src/App.test.tsx

@@ -93,7 +93,8 @@ describe('App', () => {
     (useSelector as jest.Mock).mockImplementation((selector) => {
       return selector({
         user: {
-          token: 'AAh32ffdswt'
+          token: 'AAh32ffdswt',
+          isLoggingIn: false
         },
         nav: {
           modalStatus: {
@@ -137,7 +138,8 @@ describe('App', () => {
     (useSelector as jest.Mock).mockImplementation((selector) => {
       return selector({
         user: {
-          token: ''
+          token: '',
+          isLoggingIn: false
         }
       });
     });
@@ -210,12 +212,16 @@ describe('App', () => {
     (useSelector as jest.Mock).mockImplementation((selector) => {
       return selector({
         user: {
-          token: ''
+          token: '',
+          isLoggingIn: false
         },
         nav: {
           modalStatus: {
             [ModalName.Company_Notice]: false
           }
+        },
+        availabilityZone: {
+          availabilityZoneTips: []
         }
       });
     });

packages/base/src/App.tsx

@@ -96,8 +96,8 @@ export const Wrapper: React.FC<{
   return <>{!initRenderApp && children}</>;
 };
 function App() {
-  const { token } = useSelector((state: IReduxState) => ({
-    token: state.user.token
+  const { isAfterLoggingIn } = useSelector((state: IReduxState) => ({
+    isAfterLoggingIn: !state.user.isLoggingIn && !!state.user.token
   }));
   const dispatch = useDispatch();
   const { notificationContextHolder } = useNotificationContext();
@@ -160,7 +160,9 @@ function App() {
     userOperationPermissions
   ]);
   const elements = useRoutes(
-    token ? (AuthRouterConfigData as RouteObject[]) : unAuthRouterConfig
+    isAfterLoggingIn
+      ? (AuthRouterConfigData as RouteObject[])
+      : unAuthRouterConfig
   );
   useChangeTheme();
   const themeData = useMemo(() => {
@@ -204,10 +206,10 @@ function App() {
     });
   }, [dispatch, fetchModuleSupportStatus, getUserBySession, updateDriverList]);
   useEffect(() => {
-    if (token) {
+    if (isAfterLoggingIn) {
       getInitialData();
     }
-  }, [token, getInitialData]);
+  }, [getInitialData, isAfterLoggingIn]);
   useEffect(() => {
     i18n.changeLanguage(currentLanguage);
   }, [currentLanguage]);
@@ -314,7 +316,7 @@ function App() {
           <StyledEngineProvider injectFirst>
             <ThemeProvider theme={themeData}>
               {notificationContextHolder}
-              <EmptyBox if={!!token} defaultNode={<>{elements}</>}>
+              <EmptyBox if={isAfterLoggingIn} defaultNode={<>{elements}</>}>
                 <ErrorBoundary>{body}</ErrorBoundary>
               </EmptyBox>
             </ThemeProvider>

packages/base/src/hooks/useNavigateToWorkbench/index.test.tsx

@@ -0,0 +1,100 @@
+import { act, cleanup } from '@testing-library/react';
+import { superRenderHook } from '@actiontech/shared/lib/testUtil/superRender';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  baseMockApi,
+  createSpySuccessResponse
+} from '@actiontech/shared/lib/testUtil/mockApi';
+import useNavigateToWorkbench from '.';
+import { mockUseRecentlySelectedZone } from '../../testUtils/mockHooks/mockUseRecentlySelectedZone';
+import { mockGatewayTipsData } from '@actiontech/shared/lib/testUtil/mockApi/base/gateway/data';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn(),
+  useSelector: jest.fn()
+}));
+
+describe('useNavigateToWorkbench', () => {
+  const dispatchSpy = jest.fn();
+  let getGatewayTipsSpy: jest.SpyInstance;
+  let getSQLQueryConfigurationSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    (useDispatch as jest.Mock).mockImplementation(() => dispatchSpy);
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      return selector({
+        availabilityZone: {
+          availabilityZoneTips: mockGatewayTipsData
+        }
+      });
+    });
+    mockUseRecentlySelectedZone();
+    getGatewayTipsSpy = baseMockApi.gateway.getGatewayTips();
+    getSQLQueryConfigurationSpy = baseMockApi.cloudBeaver.getSqlQueryUrl();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('should initialize with correct default values', () => {
+    const { result } = superRenderHook(() => useNavigateToWorkbench());
+
+    expect(result.current.navigateToWorkbenchLoading).toBeFalsy();
+    expect(result.current.getAvailabilityZoneTipsLoading).toBeFalsy();
+    expect(typeof result.current.navigateToWorkbenchAsync).toBe('function');
+    expect(typeof result.current.getAvailabilityZoneTipsAsync).toBe('function');
+  });
+
+  it('should fetch availability zone tips successfully', async () => {
+    const { result } = superRenderHook(() => useNavigateToWorkbench());
+    expect(result.current.getAvailabilityZoneTipsLoading).toBeFalsy();
+
+    act(() => {
+      result.current.getAvailabilityZoneTipsAsync();
+    });
+    expect(result.current.getAvailabilityZoneTipsLoading).toBeTruthy();
+    await act(async () => jest.advanceTimersByTime(3000));
+    expect(result.current.getAvailabilityZoneTipsLoading).toBeFalsy();
+
+    expect(getGatewayTipsSpy).toHaveBeenCalledTimes(1);
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: 'availabilityZone/updateAvailabilityZoneTips',
+      payload: { availabilityZoneTips: mockGatewayTipsData }
+    });
+  });
+
+  it('should fetch SQL query configuration successfully', async () => {
+    const mockUpdateRecentlySelectedZone = jest.fn();
+    getSQLQueryConfigurationSpy.mockImplementation(() =>
+      createSpySuccessResponse({
+        data: {
+          enable_sql_query: true,
+          sql_query_root_uri: '/cloudbeaver'
+        }
+      })
+    );
+    mockUseRecentlySelectedZone({
+      availabilityZone: undefined,
+      updateRecentlySelectedZone: mockUpdateRecentlySelectedZone
+    });
+    const { result } = superRenderHook(() => useNavigateToWorkbench());
+    expect(result.current.navigateToWorkbenchLoading).toBeFalsy();
+
+    act(() => {
+      result.current.navigateToWorkbenchAsync();
+    });
+    expect(result.current.navigateToWorkbenchLoading).toBeTruthy();
+    await act(async () => jest.advanceTimersByTime(3000));
+    expect(result.current.navigateToWorkbenchLoading).toBeFalsy();
+
+    expect(getSQLQueryConfigurationSpy).toHaveBeenCalledTimes(1);
+    expect(mockUpdateRecentlySelectedZone).toHaveBeenCalledWith(
+      mockGatewayTipsData[0]
+    );
+  });
+});

packages/base/src/hooks/useNavigateToWorkbench/index.ts

@@ -0,0 +1,86 @@
+import { useRequest } from 'ahooks';
+import { useDispatch, useSelector } from 'react-redux';
+import { DmsApi } from '@actiontech/shared/lib/api';
+import { ResponseCode } from '@actiontech/dms-kit';
+import useRecentlySelectedZone from '@actiontech/dms-kit/es/features/useRecentlySelectedZone';
+import { IReduxState } from '../../store';
+import { updateAvailabilityZoneTips } from '../../store/availabilityZone';
+
+const useNavigateToWorkbench = () => {
+  const dispatch = useDispatch();
+
+  const availabilityZoneTips = useSelector(
+    (state: IReduxState) => state.availabilityZone.availabilityZoneTips
+  );
+
+  const { availabilityZone, updateRecentlySelectedZone } =
+    useRecentlySelectedZone();
+
+  const {
+    runAsync: getAvailabilityZoneTipsAsync,
+    loading: getAvailabilityZoneTipsLoading
+  } = useRequest(
+    () =>
+      DmsApi.GatewayService.GetGatewayTips().then((res) => {
+        if (res.data.code === ResponseCode.SUCCESS) {
+          return res.data.data;
+        }
+        return [];
+      }),
+    {
+      onSuccess: (res) => {
+        dispatch(
+          updateAvailabilityZoneTips({
+            availabilityZoneTips: res ?? []
+          })
+        );
+      },
+      manual: true
+    }
+  );
+
+  const {
+    loading: navigateToWorkbenchLoading,
+    runAsync: navigateToWorkbenchAsync
+  } = useRequest(
+    () => {
+      return DmsApi.CloudBeaverService.GetSQLQueryConfiguration().then(
+        (res) => {
+          if (res.data.code === ResponseCode.SUCCESS) {
+            return res.data.data;
+          }
+        }
+      );
+    },
+    {
+      manual: true,
+      onSuccess: (res) => {
+        if (
+          res?.enable_sql_query &&
+          res.sql_query_root_uri &&
+          res.sql_query_root_uri !== location.pathname
+        ) {
+          // 如果当前设置了可用区 并且没有最近选择的可用区记录 则设置一个默认的可用区
+          if (!!availabilityZoneTips.length && !availabilityZone) {
+            updateRecentlySelectedZone(availabilityZoneTips[0]);
+          }
+
+          // res.sql_query_root_uri !== location.pathname 防止无限刷新
+          // 因为sql_query_root_uri是不携带origin的，只有pathname。所以开发环境localhost不可以直接跳转到CB
+          // #if [PROD]
+          window.location.href = res.sql_query_root_uri;
+          // #endif
+        }
+      }
+    }
+  );
+
+  return {
+    navigateToWorkbenchLoading,
+    navigateToWorkbenchAsync,
+    getAvailabilityZoneTipsAsync,
+    getAvailabilityZoneTipsLoading
+  };
+};
+
+export default useNavigateToWorkbench;

packages/base/src/hooks/useSessionUser/index.test.tsx

@@ -55,4 +55,24 @@ describe('useSessionUser', () => {
     });
     expect(result.current.getSessionUserLoading).toBeFalsy();
   });
+
+  it('should get user system data', async () => {
+    const { result } = superRenderHook(() => useSessionUser(), undefined, {
+      initStore: {
+        user: { uid: 'test' }
+      }
+    });
+    expect(result.current.getSessionUserSystemLoading).toBeFalsy();
+    expect(result.current.shouldNavigateToWorkbench).toEqual(undefined);
+
+    await act(async () => {
+      result.current.getSessionUserInfoAsync();
+      await jest.advanceTimersByTime(3000);
+    });
+    expect(getUserBySessionSpy).toHaveBeenCalledTimes(1);
+    expect(getCurrentUserSpy).toHaveBeenCalledTimes(1);
+    await act(async () => jest.advanceTimersByTime(3000));
+    expect(result.current.getSessionUserSystemLoading).toBeFalsy();
+    expect(result.current.shouldNavigateToWorkbench).toBeFalsy();
+  });
 });

packages/base/src/hooks/useSessionUser/index.tsx

@@ -4,6 +4,8 @@ import { ResponseCode } from '@actiontech/dms-kit';
 import { updateUserUid } from '../../store/user';
 import { useUserInfo } from '@actiontech/shared/lib/features';
 import Session from '@actiontech/shared/lib/api/base/service/Session';
+import User from '@actiontech/shared/lib/api/base/service/User';
+import { GetUserSystemEnum } from '@actiontech/shared/lib/api/base/service/common.enum';
 
 const useSessionUser = () => {
   const dispatch = useDispatch();
@@ -28,10 +30,34 @@ const useSessionUser = () => {
     }
   });
 
+  const {
+    data: shouldNavigateToWorkbench,
+    runAsync: getSessionUserInfoAsync,
+    loading: getSessionUserSystemLoading
+  } = useRequest(
+    () =>
+      Session.GetUserBySession({}).then((res) => {
+        if (res.data.code === ResponseCode.SUCCESS) {
+          const uid = res.data.data?.user_uid ?? '';
+          return User.GetUser({ user_uid: uid }).then((resp) => {
+            if (resp.data.code === ResponseCode.SUCCESS) {
+              return resp.data.data?.system === GetUserSystemEnum.WORKBENCH;
+            }
+          });
+        }
+      }),
+    {
+      manual: true
+    }
+  );
+
   return {
     sessionUser,
     getSessionUserLoading,
-    getUserBySession
+    getUserBySession,
+    getSessionUserInfoAsync,
+    shouldNavigateToWorkbench,
+    getSessionUserSystemLoading
   };
 };