[refactor] upgrade to react-router v6 (#31)

 upgrade to react-router v6

frontend/.babelrc

@@ -25,7 +25,9 @@
         }
       }
     ],
-    "@babel/preset-react",
+    ["@babel/preset-react", {
+      "runtime": "automatic"
+    }],
     "@babel/preset-typescript"
 
   ],

frontend/.eslintrc.js

@@ -19,7 +19,12 @@
 
 module.exports = {
     parser: '@typescript-eslint/parser',
-    extends: ['plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended', "plugin:react/recommended", "plugin:react/jsx-runtime"],
+    extends: [
+        'plugin:prettier/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+    ],
     parserOptions: {
         ecmaVersion: 2019,
         sourceType: 'module',
@@ -28,6 +33,9 @@ module.exports = {
         browser: true,
         node: true,
     },
+    ignorePatterns: ['./config/*.js'],
     rules: {
+        'react/jsx-uses-react': 'off',
+        'react/react-in-jsx-scope': 'off',
     },
 };

frontend/config/webpack.base.config.js

@@ -15,6 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -35,7 +36,7 @@ const postCssLoader = () => {
 
 module.exports = {
     entry: {
-        index: ['react-hot-loader/patch'].concat([path.resolve(__dirname, '../src/index.tsx')]),
+        index: path.resolve(__dirname, '../src/index.tsx'),
     },
     output: {
         path: path.join(__dirname, '../dist/'),
@@ -54,7 +55,7 @@ module.exports = {
             '@pages': path.resolve(__dirname, '../src/pages'),
             '@utils': path.resolve(__dirname, '../src/utils'),
             '@tools': path.resolve(__dirname, '../src/tools'),
-            'bn.js': path.resolve(process.cwd(), 'node_modules', 'bn.js')
+            'bn.js': path.resolve(process.cwd(), 'node_modules', 'bn.js'),
         },
         extensions: ['.ts', '.tsx', '.js', '.jsx'],
         fallback: {
@@ -107,7 +108,7 @@ module.exports = {
                         loader: 'less-loader',
                         options: {
                             lessOptions: {
-                                modifyVars: {...themes},
+                                modifyVars: { ...themes },
                                 javascriptEnabled: true,
                             },
                             implementation: require('less'),
@@ -132,7 +133,7 @@ module.exports = {
                         loader: 'less-loader',
                         options: {
                             lessOptions: {
-                                modifyVars: {...themes},
+                                modifyVars: { ...themes },
                                 javascriptEnabled: true,
                             },
                             implementation: require('less'),
@@ -159,6 +160,5 @@ module.exports = {
         }),
 
         new ESLintPlugin(),
-
     ],
 };

frontend/config/webpack.dev.config.js

@@ -15,40 +15,28 @@
 // specific language governing permissions and limitations
 // under the License.
 
-const webpackBaseConfig = require("./webpack.base.config");
-const { merge } = require("webpack-merge");
-const SERVER_RD = 'http://127.0.0.1:8880';
+/* eslint-disable @typescript-eslint/no-var-requires */
+const webpackBaseConfig = require('./webpack.base.config');
+const { merge } = require('webpack-merge');
+const SERVER_RD = 'http://127.0.0.1:8080/';
 
 module.exports = merge(webpackBaseConfig, {
-  mode: "development",
-  devtool: "eval-source-map",
-  // 开发服务配置
-  devServer: {
-    host: "localhost",
-    port: 8084,
-    publicPath: "/",
-    disableHostCheck: true,
-    useLocalIp: false,
-    open: true,
-    overlay: true,
-    hot: true,
-    stats: {
-      assets: false,
-      colors: true,
-      modules: false,
-      children: false,
-      chunks: false,
-      chunkModules: false,
-      entrypoints: false,
+    mode: 'development',
+    devtool: 'eval-source-map',
+    // 开发服务配置
+    devServer: {
+        host: 'localhost',
+        port: 8084,
+        open: true,
+        hot: true,
+        proxy: {
+            '/api': {
+                target: SERVER_RD,
+                changeOrigin: true,
+                secure: false,
+                // pathRewrite: {'^/api': '/api'}
+            },
+        },
+        historyApiFallback: true,
     },
-    proxy: {
-      '/api': {
-          target: SERVER_RD,
-          changeOrigin: true,
-          secure: false,
-          // pathRewrite: {'^/api': '/api'}
-      },
-    },
-    historyApiFallback: true,
-  },
 });

frontend/config/webpack.prod.config.js

@@ -15,9 +15,10 @@
 // specific language governing permissions and limitations
 // under the License.
 
-const webpackBaseConfig = require("./webpack.base.config");
-const { merge } = require("webpack-merge");
-const path = require("path");
+/* eslint-disable @typescript-eslint/no-var-requires */
+const webpackBaseConfig = require('./webpack.base.config');
+const { merge } = require('webpack-merge');
+const path = require('path');
 const TerserWebpackPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@@ -85,7 +86,7 @@ module.exports = merge(webpackBaseConfig, {
         new CopyPlugin({
             patterns: [
                 { from: path.join(__dirname, '../src/assets/'), to: path.join(__dirname, '../dist/src/assets/') },
-                { from: path.join(__dirname, '../favicon.ico'), to: path.join(__dirname, '../dist/') }
+                { from: path.join(__dirname, '../favicon.ico'), to: path.join(__dirname, '../dist/') },
             ],
         }),
         // new BundleAnalyzerPlugin()

frontend/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "webpack5",
+  "name": "doris-manager",
   "version": "1.0.0-beta",
   "description": "",
-  "main": "index.js",
+  "main": "index.tsx",
   "scripts": {
     "start": "npm run dev",
     "dev": "cross-env NODE_ENV=development webpack serve",
@@ -18,11 +18,12 @@
     "@ant-design/pro-layout": "^7.0.1-alpha.5",
     "@ant-design/pro-list": "^1.17.7",
     "@ant-design/pro-table": "^2.56.7",
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@monaco-editor/react": "^4.4.1",
-    "ahooks": "^3.1.10",
-    "antd": "^4.16.11",
-    "axios": "^0.24.0",
+    "ahooks": "^3.3.0",
+    "antd": "^4.19.3",
+    "axios": "^0.26.1",
     "babel-loader": "^8.2.2",
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
@@ -32,10 +33,9 @@
     "echarts-for-react": "^3.0.0",
     "echarts-liquidfill": "^3.1.0",
     "highlight.js": "^11.0.1",
-    "i18next": "^20.4.0",
-    "i18next-browser-languagedetector": "^6.1.2",
+    "i18next": "^21.6.4",
+    "i18next-browser-languagedetector": "^6.1.4",
     "immer": "^9.0.12",
-    "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21",
     "password-generator": "^2.3.2",
     "path-to-regexp": "^6.2.0",
@@ -44,18 +44,15 @@
     "react": "^17.0.1",
     "react-css-modules": "^4.7.11",
     "react-dom": "^17.0.1",
-    "react-hot-loader": "^4.13.0",
-    "react-i18next": "^11.11.4",
-    "react-router-cache-route": "^1.12.1",
-    "react-router-dom": "^5.2.0",
+    "react-i18next": "^11.16.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-spring": "^9.4.4",
-    "recoil": "^0.5.0",
+    "recoil": "^0.6.1",
     "stream-browserify": "^3.0.0",
-    "sweetalert2": "^11.1.9",
-    "sweetalert2-react-content": "^4.1.1",
-    "swr": "^0.5.6",
-    "ttag": "1.7.15",
-    "typescript": "^4.3.5",
+    "sweetalert2": "^11.4.8",
+    "sweetalert2-react-content": "^4.2.0",
+    "typescript": "^4.6.3",
     "use-immer": "^0.6.0",
     "webpack": "^5.11.0",
     "webpack-merge": "^5.7.3"
@@ -66,47 +63,41 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@types/jest": "^26.0.20",
-    "@types/js-cookie": "^2.2.7",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.7.1",
-    "@types/react": "^17.0.17",
+    "@types/react": "^17.0.43",
     "@types/react-css-modules": "^4.6.4",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router": "^5.1.16",
-    "@types/react-router-config": "^5.0.1",
-    "@types/react-router-dom": "^5.1.8",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.1.1",
-    "autoprefixer": "^10.3.2",
+    "@types/react-dom": "^17.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "autoprefixer": "^10.4.4",
     "babel-plugin-import": "^1.13.3",
-    "babel-plugin-ttag": "^1.7.26",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^9.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^5.0.1",
     "cssnano": "^5.0.8",
-    "eslint": "^8.11.0",
+    "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.1",
     "less-loader": "^10.0.1",
     "lint-staged": "^12.3.5",
-    "mini-css-extract-plugin": "^2.2.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.1",
     "postcss-normalize": "^10.0.0",
     "postcss-preset-env": "^7.4.3",
-    "prettier": "^2.3.2",
-    "react-router-config": "^5.1.1",
-    "style-loader": "^2.0.0",
+    "prettier": "^2.6.1",
+    "style-loader": "^3.3.1",
     "ts-jest": "^26.4.4",
     "url-loader": "^4.1.1",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.3.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix"

frontend/src/app.tsx

@@ -16,8 +16,6 @@
 // under the License.
 
 import React from 'react';
-import { hot } from 'react-hot-loader/root';
-import { BrowserRouter as Router, Switch } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ConfigProvider } from 'antd';
 import zh from 'antd/lib/locale/zh_CN';
@@ -39,4 +37,4 @@ const App = () => {
     );
 };
 
-export default hot(App);
+export default App;

frontend/src/common/common.data.ts

@@ -43,7 +43,6 @@ export enum TableTypeEnum {
     AGG_KEYS = 'AGG_KEYS',
 }
 
-
 export const TABLE_TYPE_KEYS = [
     {
         value: TableTypeEnum.PRIMARY_KEYS,
@@ -91,12 +90,7 @@ export const FIRST_COLUMN_FIELD_TYPES = FIELD_TYPES.filter(
     (field: any) => !FIRST_COLUMN_FIELD_TYPE_CANNOT_BE.includes(field),
 );
 
-export const ANALYTICS_URL = '/login';
-export const STUDIO_INDEX_URL = `/meta/index`; //待确认
-export const MANAGE_INDEX_URL = `/super-admin/space/list`;
-
-
 export enum AuthTypeEnum {
     LDAP = 'ldap',
-    STUDIO = 'studio',
-}
+    LOCAL = 'local',
+}

frontend/src/routes/tree/create-menu/create.module.less → frontend/src/components/auths/auth-route.tsx

@@ -15,13 +15,21 @@
 // specific language governing permissions and limitations
 // under the License.
 
-.create-drop {
-  :global .ant-dropdown-menu {
-    border-radius: 15px;
+import { RequireAuth } from './require-auth';
+import { RequireInitialized } from './require-initialized';
+interface AuthRouteProps {
+    children: JSX.Element;
+    requireInitialized?: boolean;
+}
 
-    .ant-dropdown-menu-item:hover {
-      background-color: #a5bbf1 !important;
-      border-radius: 10px;
+export function AuthRoute({ children, requireInitialized = true }: AuthRouteProps) {
+    if (requireInitialized) {
+        return (
+            <RequireInitialized>
+                <RequireAuth>{children}</RequireAuth>
+            </RequireInitialized>
+        );
+    } else {
+        return <RequireAuth>{children}</RequireAuth>;
     }
-  }
 }