refactor: change baidu-ui to antd-ui in hubble (#344)

hubble-fe/config-overrides.js

@@ -1,7 +1,34 @@
-const { override, addLessLoader } = require('customize-cra');
+const {
+  override,
+  addLessLoader,
+  addWebpackAlias,
+  overrideDevServer,
+  watchAll
+} = require('customize-cra');
 
-module.exports = override(
-  addLessLoader({
-    javascriptEnabled: true
-  })
-);
+const addProxy = () => (configFunction) => {
+  configFunction.proxy = {
+    '/about': {
+      target: 'http://127:0.0.1:8088',
+      changeOrigin: true
+    },
+    '/api': {
+      target: 'http://127:0.0.1:8088',
+      changeOrigin: true
+    }
+  };
+
+  return configFunction;
+};
+
+module.exports = {
+  webpack: override(
+    addLessLoader({
+      javascriptEnabled: true
+    }),
+    addWebpackAlias({
+      'hubble-ui': require('path').resolve(__dirname, './src/components/hubble-ui')
+    })
+  ),
+  devServer: overrideDevServer(addProxy(), watchAll())
+};

hubble-fe/package.json

@@ -8,7 +8,6 @@
     "url": "https://github.com/hugegraph/hugegraph-hubble"
   },
   "dependencies": {
-    "@baidu/one-ui": "3.1.1-beta-18",
     "@types/classnames": "^2.2.10",
     "@types/codemirror": "^0.0.96",
     "@types/d3": "^5.7.2",
@@ -21,6 +20,7 @@
     "@types/react-highlight-words": "^0.16.1",
     "@types/uuid": "^8.3.0",
     "@types/validator": "^13.1.0",
+    "antd": "^4.18.5",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
     "codemirror": "^5.55.0",

hubble-fe/src/components/graph-management/GraphManagementEmptyList.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useCallback } from 'react';
 import { observer } from 'mobx-react';
-import { Button } from '@baidu/one-ui';
+import { Button } from 'hubble-ui';
 
 import { GraphManagementStoreContext } from '../../stores';
 import AddIcon from '../../assets/imgs/ic_add.svg';

hubble-fe/src/components/graph-management/GraphManagementHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useCallback } from 'react';
 import { observer } from 'mobx-react';
-import { Input, Button } from '@baidu/one-ui';
+import { Input, Button } from 'hubble-ui';
 import { GraphManagementStoreContext } from '../../stores';
 
 const styles = {

hubble-fe/src/components/graph-management/GraphManagementLimitHint.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { observer } from 'mobx-react';
-import { Alert } from '@baidu/one-ui';
+import { Alert } from 'hubble-ui';
 
 import { GraphManagementStoreContext } from '../../stores';
 

hubble-fe/src/components/graph-management/GraphManagementList.tsx

@@ -15,7 +15,7 @@ import {
   Modal,
   Message,
   Tooltip
-} from '@baidu/one-ui';
+} from 'hubble-ui';
 import { useLocation } from 'wouter';
 import { isNull } from 'lodash-es';
 import { motion } from 'framer-motion';

hubble-fe/src/components/graph-management/GraphManagementSidebar.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useContext, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { useLocation, useRoute } from 'wouter';
-import { Select, Tooltip, PopLayer, Menu } from '@baidu/one-ui';
+import { Select, Tooltip, PopLayer, Menu } from 'hubble-ui';
 
 import {
   GraphManagementStoreContext,

hubble-fe/src/components/graph-management/NewGraphConfig.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useCallback, useLayoutEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Embedded, Input, Button, Message, Tooltip } from '@baidu/one-ui';
+import { Embedded, Input, Button, Message, Tooltip } from 'hubble-ui';
 
 import { GraphManagementStoreContext } from '../../stores';
 import HintIcon from '../../assets/imgs/ic_question_mark.svg';

hubble-fe/src/components/graph-management/async-tasks/AsyncTaskList.tsx

@@ -17,7 +17,7 @@ import {
   Message,
   Table,
   Loading
-} from '@baidu/one-ui';
+} from 'hubble-ui';
 
 import {
   GraphManagementStoreContext,

hubble-fe/src/components/graph-management/data-analyze/DataAnalyze.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { useRoute, useLocation, Params } from 'wouter';
-import { Modal, Button } from '@baidu/one-ui';
+import { Modal, Button } from 'hubble-ui';
 
 import DataAnalyzeContent from './DataAnalyzeContent';
 import DataAnalyzeInfoDrawer from './DataAnalyzeInfoDrawer';

hubble-fe/src/components/graph-management/data-analyze/DataAnalyzeInfoDrawer.tsx

@@ -2,7 +2,7 @@ import React, { useState, useContext, useCallback, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { isUndefined, update } from 'lodash-es';
-import { Drawer, Input, Button, Message } from '@baidu/one-ui';
+import { Drawer, Input, Button, Message } from 'hubble-ui';
 
 import { DataAnalyzeStoreContext } from '../../../stores';
 import { convertArrayToString } from '../../../stores/utils';

hubble-fe/src/components/graph-management/data-analyze/DynamicAddEdge.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useCallback, useRef, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Drawer, Select, Input, Button, Message } from '@baidu/one-ui';
+import { Drawer, Select, Input, Button, Message } from 'hubble-ui';
 
 import { DataAnalyzeStoreContext } from '../../../stores';
 import { addGraphNodes, addGraphEdges } from '../../../stores/utils';

hubble-fe/src/components/graph-management/data-analyze/DynamicAddNode.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useCallback, useRef, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Drawer, Select, Input, Button, Message } from '@baidu/one-ui';
+import { Drawer, Select, Input, Button, Message } from 'hubble-ui';
 
 import { DataAnalyzeStoreContext } from '../../../stores';
 import { addGraphNodes } from '../../../stores/utils';

hubble-fe/src/components/graph-management/data-analyze/ExecLogAndQueryCollections.tsx

@@ -5,7 +5,7 @@ import { isUndefined } from 'lodash-es';
 import Highlighter from 'react-highlight-words';
 import { useRoute, useLocation } from 'wouter';
 import { useTranslation } from 'react-i18next';
-import { Table, Input, Button, Message } from '@baidu/one-ui';
+import { Table, Input, Button, Message } from 'hubble-ui';
 
 import { Tooltip } from '../../common';
 import Favorite from './common/Favorite';

hubble-fe/src/components/graph-management/data-analyze/QueryAndAlgorithmLibrary.tsx

@@ -18,7 +18,7 @@ import {
   Input,
   Radio,
   Select
-} from '@baidu/one-ui';
+} from 'hubble-ui';
 
 import 'codemirror/lib/codemirror.css';
 import 'react-popper-tooltip/dist/styles.css';

hubble-fe/src/components/graph-management/data-analyze/algorithm/AllPath.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, createContext } from 'react';
 import { observer } from 'mobx-react';
-import { Button, Radio, Input, Select, Switch } from '@baidu/one-ui';
+import { Button, Radio, Input, Select, Switch } from 'hubble-ui';
 import { useTranslation } from 'react-i18next';
 import { styles } from '../QueryAndAlgorithmLibrary';
 import { Tooltip as CustomTooltip } from '../../../common';

hubble-fe/src/components/graph-management/data-analyze/algorithm/FocusDetection.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, createContext } from 'react';
 import { observer } from 'mobx-react';
-import { Button, Radio, Input, Select, Switch } from '@baidu/one-ui';
+import { Button, Radio, Input, Select, Switch } from 'hubble-ui';
 import { useTranslation } from 'react-i18next';
 import { styles } from '../QueryAndAlgorithmLibrary';
 import { Tooltip as CustomTooltip } from '../../../common';

hubble-fe/src/components/graph-management/data-analyze/algorithm/LoopDetection.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, createContext } from 'react';
 import { observer } from 'mobx-react';
-import { Button, Radio, Input, Select, Switch } from '@baidu/one-ui';
+import { Button, Radio, Input, Select, Switch } from 'hubble-ui';
 import { useTranslation } from 'react-i18next';
 import { styles } from '../QueryAndAlgorithmLibrary';
 import { Tooltip as CustomTooltip } from '../../../common';

hubble-fe/src/components/graph-management/data-analyze/algorithm/ModelSimilarity.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, createContext } from 'react';
 import { observer } from 'mobx-react';
 import { size } from 'lodash-es';
-import { Button, Radio, Input, Select, Switch } from '@baidu/one-ui';
+import { Button, Radio, Input, Select, Switch } from 'hubble-ui';
 import { useTranslation } from 'react-i18next';
 import { styles } from '../QueryAndAlgorithmLibrary';
 import { Tooltip as CustomTooltip } from '../../../common';

hubble-fe/src/components/graph-management/data-analyze/algorithm/NeighborRank.tsx

@@ -4,7 +4,7 @@ import { size, last } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { styles } from '../QueryAndAlgorithmLibrary';
-import { Button, Radio, Input, Select } from '@baidu/one-ui';
+import { Button, Radio, Input, Select } from 'hubble-ui';
 
 import { Tooltip as CustomTooltip } from '../../../common';
 import DataAnalyzeStore from '../../../../stores/GraphManagementStore/dataAnalyzeStore/dataAnalyzeStore';

hubble-fe/src/components/graph-management/data-analyze/algorithm/ShortestPathAll.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, createContext } from 'react';
 import { observer } from 'mobx-react';
-import { Button, Radio, Input, Select, Switch } from '@baidu/one-ui';
+import { Button, Radio, Input, Select, Switch } from 'hubble-ui';
 import { useTranslation } from 'react-i18next';
 import { styles } from '../QueryAndAlgorithmLibrary';
 import { Tooltip as CustomTooltip } from '../../../common';

hubble-fe/src/components/graph-management/data-analyze/common/Favorite.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useCallback } from 'react';
 import { observer } from 'mobx-react';
-import { Button, Input, Message } from '@baidu/one-ui';
+import { Button, Input, Message } from 'hubble-ui';
 
 import { DataAnalyzeStoreContext } from '../../../../stores';
 

hubble-fe/src/components/graph-management/data-analyze/query-result/GraphPopOver.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useCallback } from 'react';
 import { observer } from 'mobx-react';
-import { Message } from '@baidu/one-ui';
+import { Message } from 'hubble-ui';
 import { isUndefined } from 'lodash-es';
 
 import { DataAnalyzeStoreContext } from '../../../../stores';

hubble-fe/src/components/graph-management/data-analyze/query-result/GraphQueryResult.tsx

@@ -10,7 +10,7 @@ import { size, isUndefined, isEmpty } from 'lodash-es';
 import { saveAs } from 'file-saver';
 import vis from 'vis-network';
 import 'vis-network/styles/vis-network.min.css';
-import { Message } from '@baidu/one-ui';
+import { Message } from 'hubble-ui';
 
 import QueryFilterOptions from './QueryFilterOptions';
 import GraphPopOver from './GraphPopOver';

hubble-fe/src/components/graph-management/data-analyze/query-result/QueryFilterOptions.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useCallback } from 'react';
 import { observer } from 'mobx-react';
-import { Select, Input, NumberBox, Calendar } from '@baidu/one-ui';
-import { Message } from '@baidu/one-ui';
+import { Select, Input, NumberBox, Calendar } from 'hubble-ui';
+import { Message } from 'hubble-ui';
 
 import { DataAnalyzeStoreContext } from '../../../../stores';
 import { addGraphNodes, addGraphEdges } from '../../../../stores/utils';

hubble-fe/src/components/graph-management/data-analyze/query-result/TableQueryResult.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useCallback } from 'react';
 import { observer } from 'mobx-react';
-import { Table } from '@baidu/one-ui';
+import { Table } from 'hubble-ui';
 
 import { DataAnalyzeStoreContext } from '../../../../stores';
 

hubble-fe/src/components/graph-management/data-import/import-tasks/ImportFinish.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { useRoute, useLocation } from 'wouter';
 import { isEmpty } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@baidu/one-ui';
+import { Button } from 'hubble-ui';
 
 import {
   ImportManagerStoreContext,

hubble-fe/src/components/graph-management/data-import/import-tasks/ImportManager.tsx

@@ -4,7 +4,7 @@ import { useRoute, useLocation, Switch, Route } from 'wouter';
 import { useTranslation } from 'react-i18next';
 import { isNull } from 'lodash-es';
 import classnames from 'classnames';
-import { Breadcrumb } from '@baidu/one-ui';
+import { Breadcrumb } from 'hubble-ui';
 
 import { JobDetails } from './job-details';
 import ImportTaskList from './ImportTaskList';

hubble-fe/src/components/graph-management/data-import/import-tasks/ImportTaskList.tsx

@@ -4,7 +4,7 @@ import { useRoute, useLocation } from 'wouter';
 import { useTranslation } from 'react-i18next';
 import { isEmpty, size } from 'lodash-es';
 import classnames from 'classnames';
-import { Button, Input, Table, Modal, Message } from '@baidu/one-ui';
+import { Button, Input, Table, Modal, Message } from 'hubble-ui';
 
 import LoadingDataView from '../../../common/LoadingDataView';
 import { Tooltip as CustomTooltip } from '../../../common';

hubble-fe/src/components/graph-management/data-import/import-tasks/ImportTasks.tsx

@@ -4,7 +4,7 @@ import { useRoute, useLocation } from 'wouter';
 import { isNull } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { Steps, Button } from '@baidu/one-ui';
+import { Steps, Button } from 'hubble-ui';
 
 import UploadEntry from './UploadEntry';
 import { DataMapConfigs } from './datamap-configs';

hubble-fe/src/components/graph-management/data-import/import-tasks/UploadEntry.tsx

@@ -13,7 +13,7 @@ import {
 import { DndProvider, useDrop, DropTargetMonitor } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 import { HTML5Backend, NativeTypes } from 'react-dnd-html5-backend';
-import { Button, Progress, Message } from '@baidu/one-ui';
+import { Button, Progress, Message } from 'hubble-ui';
 import { CancellablePromise } from 'mobx/lib/api/flow';
 
 import { DataImportRootStoreContext } from '../../../../stores';

hubble-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/DataMapConfigs.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { isEmpty } from 'lodash-es';
-import { Menu } from '@baidu/one-ui';
+import { Menu } from 'hubble-ui';
 
 import {
   ImportManagerStoreContext,

hubble-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/EdgeMap.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { isUndefined, isEmpty, size, cloneDeep } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { Input, Select, Checkbox, Message } from '@baidu/one-ui';
+import { Input, Select, Checkbox, Message } from 'hubble-ui';
 
 import { Tooltip } from '../../../../common';
 import { DataImportRootStoreContext } from '../../../../../stores';

hubble-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/FileConfigs.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { range, rangeRight } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { Radio, Switch, Input, Select, Button, Message } from '@baidu/one-ui';
+import { Radio, Switch, Input, Select, Button, Message } from 'hubble-ui';
 
 import { DataImportRootStoreContext } from '../../../../../stores';
 

hubble-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/TypeConfigManipulations.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@baidu/one-ui';
+import { Button } from 'hubble-ui';
 
 interface TypeConfigManipulationsProps {
   type: 'vertex' | 'edge';

hubble-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/TypeConfigs.tsx

@@ -4,7 +4,7 @@ import { isEmpty, size } from 'lodash-es';
 import { useLocation } from 'wouter';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { Button } from '@baidu/one-ui';
+import { Button } from 'hubble-ui';
 
 import { DataImportRootStoreContext } from '../../../../../stores';
 

hubble-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/TypeInfo.tsx

@@ -8,7 +8,7 @@ import React, {
 import { observer } from 'mobx-react';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { Button } from '@baidu/one-ui';
+import { Button } from 'hubble-ui';
 
 import { Tooltip } from '../../../../common';
 import { DataImportRootStoreContext } from '../../../../../stores';

hubble-fe/src/components/graph-management/data-import/import-tasks/datamap-configs/VertexMap.tsx

@@ -9,7 +9,7 @@ import { observer } from 'mobx-react';
 import { isUndefined, isEmpty, size, cloneDeep } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { Input, Select, Checkbox, Message } from '@baidu/one-ui';
+import { Input, Select, Checkbox, Message } from 'hubble-ui';
 
 import { Tooltip } from '../../../../common';
 import TypeConfigManipulations from './TypeConfigManipulations';

hubble-fe/src/components/graph-management/data-import/import-tasks/error-logs/JobErrorLogs.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useRoute } from 'wouter';
 import { observer } from 'mobx-react';
 import { motion } from 'framer-motion';
-import { Menu } from '@baidu/one-ui';
+import { Menu } from 'hubble-ui';
 
 import { ImportManagerStoreContext } from '../../../../../stores';
 

hubble-fe/src/components/graph-management/data-import/import-tasks/job-details/BasicSettings.tsx

@@ -4,7 +4,7 @@ import { isEmpty, isNull, isUndefined } from 'lodash-es';
 import { useRoute } from 'wouter';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
-import { Button, Modal, Input, Message } from '@baidu/one-ui';
+import { Button, Modal, Input, Message } from 'hubble-ui';
 
 import { ImportManagerStoreContext } from '../../../../../stores';
 import {

hubble-fe/src/components/graph-management/data-import/import-tasks/job-details/JobDetails.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { AnimatePresence } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { isEmpty } from 'lodash-es';
-import { Menu } from '@baidu/one-ui';
+import { Menu } from 'hubble-ui';
 
 import {
   DataImportRootStoreContext,